/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     scroll-behavior: smooth;

 }

 body {
     margin: 0;
     padding: 0;
     /* font-family: 'Inter', sans-serif; */
     font-family: sans-serif;
     scroll-behavior: smooth;
     min-height: 100vh;
     line-height: 1.3;
 }

 :root {
     --background-color-1: #000;
     --background-color-2: #3b1e54;
     /* --background-color-3: #1a20e8; */
     /* --background-color-3: #4700d8; */
     --background-color-3: #4300ff;
     --background-color-4: #2573ef;
     --background-color-5: #fbfbff;
     --p-tiny: 14px;
     --p-small: 16px;
     --p-large: 18px;
     --h1: 35px;
     --h2: 25px;
     --h3: 20px;
 }



 img,
 picture,
 video,
 canvas,
 svg {
     display: block;
     max-width: 100%;
 }

 button {
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 p {
     margin: 0;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 blockquote {
     margin-top: 0;
     margin-bottom: 1rem;
 }

 ::selection {
     background-color: var(--background-color-3);
     color: #fff;
 }


 /* Target the scrollbar itself */
 ::-webkit-scrollbar {
     width: 10px;
     /* Width of the entire scrollbar */
     height: 10px;
     /* Height of the entire scrollbar */
 }

 /* Target the scrollbar thumb (the draggable part) */
 ::-webkit-scrollbar-thumb {
     background-color: #888;
     /* Color of the thumb */
     border-radius: 5px;
     /* Rounded corners of the thumb */
     border: 2px solid transparent;
     /* Creates padding around the thumb */
     background-clip: padding-box;
     /* Ensures padding doesn't affect the thumb's size */
 }

 ::-webkit-scrollbar-thumb:hover {
     background-color: #555;
     /* Darker color on hover */
 }

 /* Target the track (the area behind the thumb) */
 ::-webkit-scrollbar-track {
     background-color: #f1f1f1;
     /* Color of the track */
 }

 /* Target the corners (where horizontal and vertical scrollbars meet) */
 ::-webkit-scrollbar-corner {
     background-color: #eee;
 }

 /* Standard properties (for Firefox) */
 * {
     scrollbar-width: thin;
     /* auto, thin, none */
     scrollbar-color: #888 #f1f1f1;
     /* thumb track */
 }

 /* range bar  */

 input[type="range"] {
     -webkit-appearance: none;
     appearance: none;
     width: 100%;
     height: 2px;
     background-color: #f1f1f1;
 }

 input[type="range"]::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 12px;
     height: 12px;
     background: var(--background-color-3);
     border-radius: 50%;
     cursor: pointer;
 }

 input[type="range"]::-moz-range-thumb {
     width: 12px;
     height: 12px;
     /* background: #007bff; */
     background: var(--background-color-3);
     border-radius: 50%;
     cursor: pointer;
 }

 ul,
 ol {
     padding-left: 0;
     /* list-style: none; */
 }

 .wrapper {
     padding: 0px 30px;
     max-width: 1100px;
     margin: 0 auto;
     box-sizing: border-box;
 }

 /* ------------------------------ Pre loader  ------------------------------ */
 .loading {
     width: 22px;
     height: 22px;
     border: 5px solid #f2f2f2;
     border-right: 5px solid var(--background-color-3);
     border-radius: 200px;
     margin-left: 10px;
     animation-name: preloader;
     animation-duration: 0.5s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-play-state: paused;
     display: none;
 }

 .loading_active {
     animation-play-state: running;
     display: inline-block;
 }

 .blur_class {
     opacity: 0.5;
     pointer-events: none;
 }

 @keyframes preloader {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }




 h1 {
     font-size: var(--h1);
     font-weight: 800;
 }

 header h1 span,
 section h1 span,
 section h2 span,
 section h3 span {
     color: var(--background-color-3);
 }

 section h2 {
     position: relative;
     display: inline-block;
     font-size: var(--h2);
     text-align: center;
 }

 section h3 {
     position: relative;
     /* display: inline-block; */
     font-size: var(--h3);
     margin-bottom: 20px;
     text-align: left;
 }

 section h2::after,
 section.features h3::after {
     position: absolute;
     content: "";
     width: 60px;
     height: 5px;
     background-color: var(--background-color-3);
     bottom: -9px;
     left: 0px;
     border-radius: 100px;
 }


 /* ------------------------------  Notification ------------------------------ */
 .notification_box {
     position: fixed;
     top: 9px;
     right: -200px;
     z-index: 999;
     cursor: pointer;
     transition: 0.5s;
 }

 .success_notification_box_active {
     background-color: mediumspringgreen;
     right: 15px;
     border-right: 3px solid #000;
 }

 .error_notification_box_active {
     border-right: 3px solid #000;
     background-color: deeppink;
     right: 15px;
 }

 .notification {
     font-size: 16px;
     padding: 14px 20px;
     font-weight: bold;
     box-shadow: 0px 20px 20px -24px #0b00ff;
 }

 @media (max-width:320px) {

     .notification {
         font-size: 14px;
     }
 }

 /* ------------------------------  Pagination ------------------------------ */

 .pagination img {
     width: 15px;
     filter: invert(1);
 }

 .pagination_box {
     /* border-top: 2px solid #f2f2f2; */
     /* padding: 5px; */
     text-align: center;

 }

 .pagination {
     display: inline-flex;
     width: fit-content;
     border-radius: 50px;
     margin: 0 auto;
 }

 .pagination p:hover {
     background-color: var(--background-color-3);
     color: #fff;
 }

 .pagination p {
     font-size: 16px;
     margin: 10px 0px;
     margin-left: 8px;
     color: var(--background-color-3);
     cursor: pointer;
     padding: 3px 8px;
     border: 1px solid var(--background-color-3);

     border-radius: 0px;
     transition: 0.3s;
 }

 .pagination .active_pagination {
     background-color: var(--background-color-3);
     color: #fff;
 }

 /* ------------------------------  premium icon design ------------------------------ */

 .premium_tag {
     background-color: deeppink;
     border-radius: 50px;
 }

 body .premium_tag img {
     filter: unset !important;
     width: 25px !important;
     height: auto;
     padding: 5px;
 }

 /* ------------------------------  premium box ------------------------------ */

 .premium_container {
     width: 100%;
     height: 100vh;
     position: absolute;
     z-index: 10;
     background-color: #00000064;
     box-shadow: 0px 0px 10px -15px blue;
     opacity: 0;
     pointer-events: none;
     transition: 0.3s;
 }

 .premium_container_active {
     pointer-events: fill;
     opacity: 1;
 }

 .premium_box {
     display: flex;
     width: 700px;
     max-width: 100%;
     border-radius: 5px;
     gap: 20px;
     position: absolute;
     padding: 20px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.5);
     opacity: 0;
     pointer-events: none;
     background-color: #fff;
     transition: 0.3s;
 }

 .premium_box_active {
     transform: translate(-50%, -50%) scale(1);
     pointer-events: fill;
     opacity: 1;
 }

 .premium_box .feature_details ul li {
     display: flex;
     gap: 5px;
     list-style: none;
 }

 .premium_box .feature_details,
 .premium_box .logo_box {
     width: 50%;
     line-height: 2;
 }

 .premium_box .feature_details ul li span {
     font-weight: 900;
     color: var(--background-color-3);

 }

 .premium_box .logo_box {
     text-align: center;
     border-radius: 10px;
     padding: 10px;
     background-color: #f2f2f2;
 }

 .close_premium_box {
     background-color: #f2f2f2;
     position: absolute;
     top: -15px;
     right: -15px;
     padding: 10px;
     border-radius: 100px;
     cursor: pointer;
 }

 .close_premium_box img {
     width: 10px;

 }

 .premium_box .logo_box span {
     font-size: 20px;
     font-weight: 900;
     margin: 0 auto;
 }

 .premium_box .logo_box .logo_box_image {
     position: relative;
     width: fit-content;
     margin: 0 auto;

 }

 .premium_box .logo_box img {
     width: 150px;

 }

 .premium_box .logo_box img:nth-child(2) {
     width: 35px;
     position: absolute;
     top: -12px;
     right: 20px;
     background-color: deeppink;
     padding: 5px;
     border-radius: 60px;

 }

 .premium_button_class {
     background-color: var(--background-color-3);
     color: #fff;
     font-weight: 900;
     padding: 10px 20px;
     width: 100%;
 }

 @media (max-width:600px) {

     body section h2::after {
         left: 50%;
         transform: translate(-50%, -50%);
     }
 }

 /* ------------------------------ Common content box ------------------------------ */
 .common_content_box {
     margin: 50px auto;
     border: 2px solid #f2f2f2;
     width: 50%;
     max-width: 500px;
     max-width: 100%;
     padding: 15px 30px;
     line-height: 2;
     font-size: var(--h2);
     display: block;
 }

 .common_content_box a {
     font-weight: bold;
     text-decoration: underline;
     color: var(--background-color-3);
 }

 .common_content_box_title {
     font-weight: 900;
     line-height: 1.5;
     padding-bottom: 20px;
 }

 @media screen and (max-width:600px) {
     .common_content_box {
         width: 100%;
         padding: 10px;
     }
 }

 @media screen and (max-width:320px) {
     .common_content_box {
         font-size: var(--h2);
     }
 }