@charset "UTF-8";
    @import url('https://fonts.googleapis.com/css2?family=Sour+Gummy:ital,wght@0,100..900;1,100..900&display=swap');
    /* Box sizing rules */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      word-wrap: break-word;
      overflow-wrap: break-word;
      -webkit-tap-highlight-color: transparent;
      tap-highlight-color: transparent;
    }

    /* Remove default margin */
    body,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    figure,
    blockquote,
    dl,
    dd,
    small,
    span {
      margin-block-end: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role='list'],
    ol[role='list'] {
      list-style: none;
    }

    /* Set core root defaults */
    html:focus-within {
      scroll-behavior: smooth;
    }

    /* Set core body defaults */
    body {
      min-height: 100vh;
      min-height: 100dvh;
      text-rendering: optimizeSpeed;
      line-height: 1.5;
    }

    /* A elements that don't have a class get default styles 
    a:not([class]) {
      text-decoration-skip-ink: auto;
    }*/

    /* Make images easier to work with */
    img,
    picture {
      max-width: 100%;
      display: block;
    }

    /* Inherit fonts for inputs and buttons */
    * {
      font: inherit;
    }

    /* Button Hover Cursor */
    button{
        cursor: url('cursor-pointer.svg'), pointer;
    }

    button,
    input,
    textarea {
        outline: none;
        border: none;
    }

    button:focus,
    button:active,
    input:focus,
    textarea:focus {
        /*outline: none !important;
        border: none !important;*/
    }

    /* Chrome, Safari, Edge ve Opera */
    input[type=number]::-webkit-outer-spin-button,
    input[type=number]::-webkit-inner-spin-button {
      -webkit-appearance: none; /* Hides the spinner buttons */
      margin: 0; /* Removes any default margin */
    }

    /* Firefox */
    input[type=number] {
      -moz-appearance: textfield; /* Makes the input look like a regular text field */
    }


    /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
    @media (prefers-reduced-motion: reduce) {
      html:focus-within {
      scroll-behavior: smooth;
      }
      
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* Colours By Their HEX */
    /*  Neutral: #;
        Light: #;
        Dark: #;
    */

    /* Root Elements */
    :root{

        --max-page-width: 1920px; /* Maximum Page Width */

        --ff-main: "Sour Gummy", sans-serif;

        /* Font Weights */
        --fw-black: 900;
        --fw-extra-bold: 800;
        --fw-bold: 700;
        --fw-semi-bold: 600;
        --fw-medium: 500;
        --fw-regular: 400;
        --fw-light: 300;
        --fw-extra-light: 200;
        --fw-thin: 100;

        /* Font Sizes */
        --fs-main: clamp(1.1em, 2vw, 1.1em);
        --fs-h1: clamp(2.8em, 5vw, 4em);
        --fs-h2: clamp(2.5em, 4.5vw, 3.5em);
        --fs-h3: clamp(2.2em, 4vw, 3em);
        --fs-h4: clamp(2em, 3.5vw, 2.5em);
        --fs-h5: clamp(1.7em, 3vw, 2em);
        --fs-h6: clamp(1.2em, 2.5vw, 1.6em);

        --fs-larger: clamp(2.2em, 8vw, 3.5em);
        --fs-xl: clamp(2em, 6vw, 2.8em);
        --fs-l: clamp(1.7em, 4vw, 2.3em);
        --fs-m: clamp(1.4em, 3vw, 1.8em);
        --fs-mm: clamp(1.2em, 2.5vw, 1.5em);
        --fs-sm: clamp(1em, 2vw, 1.1em);
        --fs-s: clamp(0.9em, 2vw, 1em);
        --fs-ms: clamp(0.8em, 1.5vw, 0.9em);
        --fs-xs: clamp(0.7em, 1.2vw, 0.8em);

        --fs-btn: var(--fs-main);  /* Button Font Size*/

        --fs-input: var(--fs-ms);  /* Input Font Size */


        /* Background Colors */
        --clr-bg: #f7f7f7;


        /* Primary Colors */
        --clr-pure-light: #FFFFFF;
        --clr-light: #f7f7f7;
        --clr-dark: #252525;
        
        /* Accent Colors */
        --clr-danger-400: #ff0a0a;
        --clr-danger-300: #FF5555;
        --clr-danger-200: #FF7070;
        --clr-danger-100: #FF8A8A;
        
        --clr-success-600: #73EB2D;
        --clr-success-500: #82EE44;
        --clr-success-400: #92F05C;
        --clr-success-300: #A2F273;
        --clr-success-200: #B1F48A;
        --clr-success-100: #C1F6A2;
        
        --clr-alert-300: #FFDD55;
        --clr-alert-200: #FFE270;
        --clr-alert-100: #FFE88A;


        /* Text Color */
        --clr-txt: ;


        /* Dropdown */
        --dropdown-bg: ;            /* Recommended Color: hsl(0, 0%, 100%) */
        --dropdown-clr: var(--clr-primary-900);           /* Recommended Color: hsl(0, 0%, 38%)*/
        --dropdown-hover: var(--clr-rgba-gray-softer);         /* Recommended Color: hsl(0, 0%, 94%) */
        --dropdown-padding: .6em 1em;       /* Recommended Padding: .85em 1.2em */
        --dropdown-shadow: var(--clr-rgba-gray-soft) 0 2px 5px 1px;

        
        /* Modal */
        --modal-bg: var(--clr-rgba-gray-med-darker);               /* Set bg color */
        --modal-content-bg: var(--clr-light);       /* Set modal bg color */

        --modal-content-padding: 1em 1.5em;  /* Set padding */
        --modal-content-radius: var(--btn-border-radius-md);   /* Set radius */
        --modal-content-border: ;   /* Set border */
        --modal-content-clr: var(--clr-gray-darker);      /* Set color */


        /* Alert */
        --alert-bg: ;               /* Set bg color */
        --alert-clr: ;              /* Set color */
        
        --alert-border: ;           /* Set border */
        --alert-radius: ;           /* Set border radius */
        --alert-padding: ;          /* Set padding */


        /* Accent Colors */
        --clr-primary: #57BFE5;
        
        --clr-primary-100: #c5e9f6;
        --clr-primary-200: #B0E1F3;
        --clr-primary-300: #99D9EF;
        --clr-primary-400: #83D0EC;
        --clr-primary-500: #6DC8E8;
        --clr-primary-600: #57BFE5;
        --clr-primary-700: #41B7E2;
        --clr-primary-800: #2BAFDE;
        --clr-primary-900: #20A1CF;

        --clr-primary-lighter: #6DC8E8;
        --clr-primary-darker: #41B7E2;

        
        /* Gradient Colors */
        --gradient-primary-y: ;
        --gradient-primary-x: ;
        
        --gradient-btn: ;


        /* Button */
        --btn-border-clr: var(--clr-primary-400);
        --btn-border: 3px;

        --btn-border-top: var(--btn-border);
        --btn-border-bottom: 7px;
        --btn-border-left: var(--btn-border);
        --btn-border-right: var(--btn-border);

        --btn-bg: var(--clr-primary-600);
        --btn-bg-hover: var(--clr-primary-500);
        --btn-txt: var(--clr-light);
        
        --btn-border-gray: var(--clr-rgba-gray-soft);

        --btn-border-radius-main: 20px;
        --btn-border-radius: 10px;
        --btn-border-radius-smooth: 12px;
        --btn-border-radius-sharp: 5px;

        --btn-border-radius-xl: 24px;
        --btn-border-radius-lg: 20px;
        --btn-border-radius-md: 12px;
        --btn-border-radius-sm: 10px;
        --btn-border-radius-xs: 5px;
        --btn-border-radius-pill: 100vw;
        --btn-border-radius-none: 0;
        
        --btn-padding: .45em 1em;


        /* Secondary Button */
        --btn-secondary-bg: ;
        --btn-secondary-bg-hover: ;
        --btn-secondary-txt: ;
        
        --btn-secondary-border-clr: var(--clr-gray);
        --btn-secondary-hover: var(--clr-gray-softer);

        --checkbox-border: 1.5px solid var(--clr-rgba-gray-soft);
        --checkbox-border-radius: 5px;

        /* Success Button */
        --btn-success-bg: var(--clr-success-500);
        --btn-success-bg-hover: var(--clr-success-600);
        --btn-success-txt: var(--clr-light);
        --btn-success-border-clr: var(--clr-success-300);

        /* Danger Button */
        --btn-danger-bg: var(--clr-danger-300);
        --btn-danger-bg-hover: var(--clr-danger-400);
        --btn-danger-txt: var(--clr-light);
        --btn-danger-border-clr: var(--clr-danger-100);


         /* Gradient Button */
        --gradient-btn-border-size: ; /* Set the border size of the button */


        /* Input */
        --input-bg-hover: ;         /* Set color */
        --input-file-bg-hover: ;    /* Set color ( Recommended: rgba(0,0,0,0.05) );*/
        
        --input-clr: ;              /* Set color */

        --input-border: 3px solid var(--clr-primary-600);           /* Recommended Border: 1.5px solid #dcdcdc */
        --input-border-radius: 15px;    /* Recommended Radius: 10px */
        --input-padding: .45em 1em;          /* Recommended Padding: .65em 1.2em */

        
        /* Input File */
        --input-clr-file: ;         /* Set color ( Recommended: hsl(0, 0%, 34%) );*/


        /* Input Range */
        --input-range-color: #000;            /* Set input range color */
        --input-range-null-color: #afafaf;    /* Set input range color (null) */

        --input-range-bar-size: 8px;            /* Set input range bar size */

        --input-range-thumb-color: #727272;   /* Set input range thumb color */
        --input-range-price-color: #2b2b2b;   /* Set input range price color */

        --input-range-thumb-size: 20px;         /* Set input range thumb size */


        /* Fast Shadows */
        --clr-rgba-gray-much-darker-opacity: rgba(48, 48, 48, 0.9); 
        --clr-rgba-gray-darker-opacity: rgba(48, 48, 48, 0.8); 
        --clr-rgba-gray-much-darker: rgba(0,0,0,0.50); 
        --clr-rgba-gray-med-darker: rgba(0,0,0,0.40); 
        --clr-rgba-gray-darker: rgba(0,0,0,0.20); 
        --clr-rgba-gray: rgba(0,0,0,0.15);
        --clr-rgba-gray-soft: rgba(0,0,0,0.10);
        --clr-rgba-gray-softer: rgba(0,0,0,0.05);

        --clr-gray-darker: #626262;
        --clr-gray-dark: #757575;
        --clr-gray: #D9D9D9;
        --clr-gray-soft: #DBDBDB;
        --clr-gray-softer: #F2F2F2;

        --profileBoxShadow: 0 0 10px 1px var(--clr-rgba-gray-softer);


        /* Transition */
        --transition: .3s;

        /* Animation Transitions*/
        --scale-animation: .3s;
        --opacity-animation: .6s;
        --text-animation: .5s;
        --text-animation-longer: 1s;
        --xl-animation: .5s;
        --xr-animation: .5s;
    }

    @media screen and (max-width: 550px){
      :root{
        --modal-content-padding: 1em
      }
    }

    /* Header Texts */
    h1{ font-size: var(--fs-h1); font-weight: var(--fw-bold);}
    h2{ font-size: var(--fs-h2); font-weight: var(--fw-semi-bold);}
    h3{ font-size: var(--fs-h3); font-weight: var(--fw-semi-bold);}
    h4{ font-size: var(--fs-h4); font-weight: var(--fw-semi-bold);}
    h5{ font-size: var(--fs-h5); font-weight: var(--fw-500);}
    h6{ font-size: var(--fs-h6); font-weight: var(--fw-semi-bold);}

    /* Button Styling */
    button:not(.transparent-btn, .hamburger-btn),
    button:not(.transparent-btn, .hamburger-btn)[type="submit"],
    button:not(.transparent-btn, .hamburger-btn)[type="button"],
    input:not(.transparent-btn, .hamburger-btn)[type="button"],
    input:not(.transparent-btn, .hamburger-btn)[type="submit"],
    a.buttonLink{
        position: relative;
        overflow: hidden;
        padding: var(--btn-padding);
        cursor: url('cursor-pointer.svg'), pointer;
        transition: var(--transition);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: .5em;
        font-weight: var(--fw-normal);
        background-color: var(--btn-bg);
        font-size: var(--fs-btn);
        border-radius: var(--btn-border-radius-main);
        color: var(--btn-txt);
        border-top: var(--btn-border-top) solid var(--btn-border-clr);
        border-bottom: var(--btn-border-bottom) solid var(--btn-border-clr);
        border-left: var(--btn-border-left) solid var(--btn-border-clr);
        border-right: var(--btn-border-right) solid var(--btn-border-clr);
    }

    /* Button Hover */
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn):is(:hover,:focus-visible),
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="submit"]:is(:hover,:focus-visible),
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="button"]:is(:hover,:focus-visible),
    input:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="button"]:is(:hover,:focus-visible),
    input:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="submit"]:is(:hover,:focus-visible){
      background-color: var(--btn-bg-hover);
    }

    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn):is( :active),
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="submit"]:is( :active),
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="button"]:is( :active),
    input:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="button"]:is( :active),
    input:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="submit"]:is( :active){
      transform: translateY(calc(var(--btn-border-bottom) - var(--btn-border)));
      /*margin-top: calc(var(--btn-border-bottom) - var(--btn-border));*/
      border: var(--btn-border) solid var(--btn-border-clr);
    }

    @media screen and (max-width: 550px){
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn),
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="submit"],
    button:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="button"],
    input:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="button"],
    input:not(.asideNavArea button, .transparent-btn, .hamburger-btn)[type="submit"]{
      padding-block: .4em;
    }
    }


    /* ---------------- SECONDARY BUTTON --------------- */
    button:is(.secondaryBtn),
    button:is(.secondaryBtn)[type="submit"],
    button:is(.secondaryBtn)[type="button"],
    input:is(.secondaryBtn)[type="button"],
    input:is(.secondaryBtn)[type="submit"]{
      background-color: var(--btn-secondary-bg);
      color: var(--clr-primary-700);
      border-color: var(--btn-secondary-border-clr);
    }

    button:is(.secondaryBtn):is(:hover,:focus-visible),
    button:is(.secondaryBtn)[type="submit"]:is(:hover,:focus-visible),
    button:is(.secondaryBtn)[type="button"]:is(:hover,:focus-visible),
    input:is(.secondaryBtn)[type="button"]:is(:hover,:focus-visible),
    input:is(.secondaryBtn)[type="submit"]:is(:hover,:focus-visible){
      background-color: var(--btn-secondary-hover) !important;
    }

    
    button:is(.secondaryBtn):is(:focus, :active),
    button:is(.secondaryBtn)[type="submit"]:is(:focus, :active),
    button:is(.secondaryBtn)[type="button"]:is(:focus, :active),
    input:is(.secondaryBtn)[type="button"]:is(:focus, :active),
    input:is(.secondaryBtn)[type="submit"]:is(:focus, :active){
      border-color: var(--btn-secondary-border-clr) !important;
    }

    /* ---------------- SUCCESS BUTTON (1) --------------- */
    button:is(.successBtn),
    button:is(.successBtn)[type="submit"],
    button:is(.successBtn)[type="button"],
    input:is(.successBtn)[type="button"],
    input:is(.successBtn)[type="submit"]{
      background-color: var(--btn-success-bg);
      color: var(--btn-success-txt);
      border-color: var(--btn-success-border-clr);
    }

    button:is(.successBtn):is(:hover,:focus-visible),
    button:is(.successBtn)[type="submit"]:is(:hover,:focus-visible),
    button:is(.successBtn)[type="button"]:is(:hover,:focus-visible),
    input:is(.successBtn)[type="button"]:is(:hover,:focus-visible),
    input:is(.successBtn)[type="submit"]:is(:hover,:focus-visible){
      background-color: var(--btn-success-bg-hover);
    }

    
    button:is(.successBtn):is(:focus, :active),
    button:is(.successBtn)[type="submit"]:is(:focus, :active),
    button:is(.successBtn)[type="button"]:is(:focus, :active),
    input:is(.successBtn)[type="button"]:is(:focus, :active),
    input:is(.successBtn)[type="submit"]:is(:focus, :active){
      border-color: var(--btn-success-border-clr);
    }

       /* ---------------- SUCCESS BUTTON (2) --------------- */
       button:is(.successBtn2),
       button:is(.successBtn2)[type="submit"],
       button:is(.successBtn2)[type="button"],
       input:is(.successBtn2)[type="button"],
       input:is(.successBtn2)[type="submit"]{
          background-color: transparent;
          color: var(--clr-success-600);
         border-color: var(--btn-success-border-clr);
       }
   
       button:is(.successBtn2):is(:hover,:focus-visible),
       button:is(.successBtn2)[type="submit"]:is(:hover,:focus-visible),
       button:is(.successBtn2)[type="button"]:is(:hover,:focus-visible),
       input:is(.successBtn2)[type="button"]:is(:hover,:focus-visible),
       input:is(.successBtn2)[type="submit"]:is(:hover,:focus-visible){
         background-color: transparent;
       }
   
       
       button:is(.successBtn2):is(:focus, :active),
       button:is(.successBtn2)[type="submit"]:is(:focus, :active),
       button:is(.successBtn2)[type="button"]:is(:focus, :active),
       input:is(.successBtn2)[type="button"]:is(:focus, :active),
       input:is(.successBtn2)[type="submit"]:is(:focus, :active){
         border-color: var(--btn-success-border-clr);
       }

           /* ---------------- DANGER BUTTON (1) --------------- */
           button:is(.dangerBtn),
           button:is(.dangerBtn)[type="submit"],
           button:is(.dangerBtn)[type="button"],
           input:is(.dangerBtn)[type="button"],
           input:is(.dangerBtn)[type="submit"]{
             background-color: var(--btn-danger-bg);
             color: var(--btn-danger-txt);
             border-color: var(--btn-danger-border-clr);
           }
       
           button:is(.dangerBtn):is(:hover,:focus-visible),
           button:is(.dangerBtn)[type="submit"]:is(:hover,:focus-visible),
           button:is(.dangerBtn)[type="button"]:is(:hover,:focus-visible),
           input:is(.dangerBtn)[type="button"]:is(:hover,:focus-visible),
           input:is(.dangerBtn)[type="submit"]:is(:hover,:focus-visible){
             background-color: var(--btn-danger-bg-hover);
           }
       
           
           button:is(.dangerBtn):is(:focus, :active),
           button:is(.dangerBtn)[type="submit"]:is(:focus, :active),
           button:is(.dangerBtn)[type="button"]:is(:focus, :active),
           input:is(.dangerBtn)[type="button"]:is(:focus, :active),
           input:is(.dangerBtn)[type="submit"]:is(:focus, :active){
             border-color: var(--btn-danger-border-clr);
           }

             /* ---------------- SUCCESS BUTTON (2) --------------- */
       button:is(.dangerBtn2),
       button:is(.dangerBtn2)[type="submit"],
       button:is(.dangerBtn2)[type="button"],
       input:is(.dangerBtn2)[type="button"],
       input:is(.dangerBtn2)[type="submit"]{
          background-color: transparent;
          color: var(--btn-danger-bg);
         border-color: var(--btn-danger-bg);
       }
   
       button:is(.dangerBtn2):is(:hover,:focus-visible),
       button:is(.dangerBtn2)[type="submit"]:is(:hover,:focus-visible),
       button:is(.dangerBtn2)[type="button"]:is(:hover,:focus-visible),
       input:is(.dangerBtn2)[type="button"]:is(:hover,:focus-visible),
       input:is(.dangerBtn2)[type="submit"]:is(:hover,:focus-visible){
         background-color: transparent;
       }
   
       
       button:is(.dangerBtn2):is(:focus, :active),
       button:is(.dangerBtn2)[type="submit"]:is(:focus, :active),
       button:is(.dangerBtn2)[type="button"]:is(:focus, :active),
       input:is(.dangerBtn2)[type="button"]:is(:focus, :active),
       input:is(.dangerBtn2)[type="submit"]:is(:focus, :active){
         border-color: var(--btn-danger-bg);
       }
    /* ---------------- GRADIENT BUTTONS --------------- */
    /* ---------------- ONLY BACKGROUND --------------- */
    button:is(.btn_bgG, .btnb_bG),
    button:is(.btn_bgG, .btnb_bG)[type="submit"],
    button:is(.btn_bgG, .btnb_bG)[type="button"],
    input:is(.btn_bgG, .btnb_bG)[type="button"],
    input:is(.btn_bgG, .btnb_bG)[type="submit"]{
      padding: var(--btn-padding);
      border: none;
      outline: none;
      position: relative;
      z-index: 1;
      border-radius: var(--btn-border-radius-sm);
      background: linear-gradient(to right, #00ffa3, #dc1fff);
    }

    button:is(.btn_bgG, .btnb_bG)::before,
    button:is(.btn_bgG, .btnb_bG)[type="submit"]::before,
    button:is(.btn_bgG, .btnb_bG)[type="button"]::before,
    input:is(.btn_bgG, .btnb_bG)[type="button"]::before,
    input:is(.btn_bgG, .btnb_bG)[type="submit"]::before{
      content: "";
      position: absolute;
      inset: var(--gradient-btn-border-size);
      border-radius: calc(var(--btn-border-radius-sm) - var(--gradient-btn-border-size));
      background-color: white;
      z-index: -1;
      transition: var(--transition);
    }

    button:is(.btn_bgG)::before,
    button:is(.btn_bgG)[type="submit"]::before,
    button:is(.btn_bgG)[type="button"]::before,
    input:is(.btn_bgG)[type="button"]::before,
    input:is(.btn_bgG)[type="submit"]::before{
      opacity: 0;
    }
    

    button:is(.btn_bgG):is(:hover,:focus-visible):before,
    button:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):before,
    button:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):before{
      opacity: 1;
    }

    button:is(.btn_bgG)::after,
    button:is(.btn_bgG)[type="submit"]::after,
    button:is(.btn_bgG)[type="button"]::after,
    input:is(.btn_bgG)[type="button"]::after,
    input:is(.btn_bgG)[type="submit"]::after{
      content: attr(data);
      color: #fff;
      transition: var(--transition);
    }   

    button:is(.btn_bgG):is(:hover,:focus-visible):after,
    button:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):after,
    button:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btn_bgG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btn_bgG)[type="submit"]:is(:hover,:focus-visible):after{
      background: linear-gradient(to left, #00ffa3, #dc1fff);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    /* ---------------- ONLY BORDER --------------- */
    button:is(.btnb_bG):is(:hover,:focus-visible):before,
    button:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):before,
    button:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):before,
    input:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):before{
      opacity: 0;
    }

    button:is(.btnb_bG)::after,
    button:is(.btnb_bG)[type="submit"]::after,
    button:is(.btnb_bG)[type="button"]::after,
    input:is(.btnb_bG)[type="button"]::after,
    input:is(.btnb_bG)[type="submit"]::after{
      content: attr(data);
      background: linear-gradient(to left, #00ffa3, #dc1fff);
      -webkit-background-clip: text;
      color: transparent;
      transition: var(--transition);
    }

    button:is(.btnb_bG):is(:hover,:focus-visible):after,
    button:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):after,
    button:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btnb_bG)[type="button"]:is(:hover,:focus-visible):after,
    input:is(.btnb_bG)[type="submit"]:is(:hover,:focus-visible):after{
      color: #fff;
    }


    /* ---------------- OTHER BUTTONS --------------- */
    button:is(.btnGray, .btnGrayBorderless),
    button:is(.btnGray, .btnGrayBorderless)[type="submit"],
    button:is(.btnGray, .btnGrayBorderless)[type="button"],
    input:is(.btnGray, .btnGrayBorderless)[type="button"],
    input:is(.btnGray, .btnGrayBorderless)[type="submit"]{
      background-color: transparent !important;
      color: var(--clr-rgba-gray-much-darker);
      border-color: var(--btn-border-gray);
    }

    button:is(.btnGrayBorderless),
    button:is(.btnGrayBorderless)[type="submit"],
    button:is(.btnGrayBorderless)[type="button"],
    input:is(.btnGrayBorderless)[type="button"],
    input:is(.btnGrayBorderless)[type="submit"]{
      border-color: transparent;
    }

    button:is(.btnGray, .btnGrayBorderless):is(:hover, :focus-visible),
    button:is(.btnGray, .btnGrayBorderless)[type="submit"]:is(:hover, :focus-visible),
    button:is(.btnGray, .btnGrayBorderless)[type="button"]:is(:hover, :focus-visible),
    input:is(.btnGray, .btnGrayBorderless)[type="button"]:is(:hover, :focus-visible),
    input:is(.btnGray, .btnGrayBorderless)[type="submit"]:is(:hover, :focus-visible){
      background-color: var(--clr-rgba-gray-softer) !important;
    }

    /* Input Styling */
    input:not([type="button"], [type="submit"], [type="range"]),
    textarea,
    .inputCustom{
      display: flex;
      justify-content: start;
      align-items: center;
      resize: none;
      font-size: var(--fs-input);
      caret-color: var(--clr-primary);
      padding: var(--input-padding);
      background-color: var(--clr-light);
      background-color: transparent;
      border: var(--input-border);
      border-radius: var(--input-border-radius);
      color: var(--input-clr);
      transition: var(--transition);

      min-height: 3em;
    }

    /* Input Hover */
    input:not([type="button"], [type="submit"], [type="range"]):hover,
    textarea:hover,
    .inputCustom:hover{ 
      background-color: var(--input-bg-hover);
    }

    /* Input's Placeholder while its active */
    input:not([type="button"], [type="submit"], [type="range"]):is(:focus,:focus-visible)::placeholder,
    textarea:is(:focus,:focus-visible)::placeholder{
      transition: var(--transition);
    }

    input:not([type="button"], [type="submit"], [type="range"]):is(:focus,:focus-visible)::placeholder,
    textarea:is(:focus,:focus-visible)::placeholder{
        color: ;
        opacity: .4;
    }

    .inputCustom{
      padding: 0;
    }

    .inputCustom img{
      width: 1em;
      margin: 1em;
    }

    .inputCustom :is(input, textarea){
      width: 100%;
      height: 100%;
      border: 0 !important;
    }

    .inputCustom input{
      padding-right: 0;
    }

    /* Custom Checkbox */
    input[type="checkbox"],
    input[type="radio"]{
      accent-color: var(--clr-primary);
    }

    .aspectRatio{
      aspect-ratio: 1/1;
    }

    .checkbox {
      display: flex;
      justify-content: start;
      align-items: center;
      position: relative;
      padding-left: 35px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* Hide the browser's default checkbox */
    .checkbox input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
    
    /* Create a custom checkbox */
    .checkmarkCheckbox {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      border: var(--checkbox-border);
      border-radius: var(--checkbox-border-radius);
      transition: var(--transition);
    }
    
    /* On mouse-over, add a grey background color */
    .checkbox:hover input ~ .checkmarkCheckbox {
      background-color: var(--clr-rgba-gray-softer);
    }
    
    /* When the checkbox is checked, add a blue background */
    .checkbox input:checked ~ .checkmarkCheckbox {
      background-color: var(--clr-primary);
    }
    
    /* Create the checkmarkCheckbox/indicator (hidden when not checked) */
    .checkmarkCheckbox:after {
      content: "";
      position: absolute;
      display: none;
    }
    
    /* Show the checkmarkCheckbox when checked */
    .checkbox input:checked ~ .checkmarkCheckbox:after {
      display: block;
    }
    
    /* Style the checkmarkCheckbox/indicator */
    .checkbox .checkmarkCheckbox:after {
      left: 9.5px;
      top: 5.5px;
      width: 5px;
      height: 10px;
      border: solid white;
      border-width: 0 3px 3px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    .radio {
      display: flex;
      justify-content: start;
      align-items: center;
      position: relative;
      padding-left: 35px;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }
    
    /* Hide the browser's default radio button */
    .radio input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }
    
    /* Create a custom radio button */
    .checkmarkRadio {
      position: absolute;
      top: 0;
      left: 0;
      height: 25px;
      width: 25px;
      background-color: var(--clr-rgba-gray-softer);
      border-radius: 50%;
    }
    
    /* On mouse-over, add a grey background color */
    .radio:hover input ~ .checkmarkRadio {
      background-color: #ccc;
    }
    
    /* When the radio button is checked, add a blue background */
    .radio input:checked ~ .checkmarkRadio {
      background-color: var(--clr-primary);
    }
    
    /* Create the indicator (the dot/circle - hidden when not checked) */
    .checkmarkRadio:after {
      content: "";
      position: absolute;
      display: none;
    }
    
    /* Show the indicator (dot/circle) when checked */
    .radio input:checked ~ .checkmarkRadio:after {
      display: block;
    }
    
    /* Style the indicator (dot/circle) */
    .radio .checkmarkRadio:after {
      inset: 0;
      margin: 7px;
      border: 2px solid #fff;
      border-radius: 50%;
      background: white;
    }

    /* Input Block Styling */
    .input-block{
        display: grid;
        place-items: start;
       /* gap: .35em;*/
    }

    .input-block label{
        font-size: var(--fs-xs);
        opacity: .5;
        font-weight: var(--fw-semi-bold);
        padding-inline: .45em;
    }

    .input-block input{
      width: 100%;
    }

    /* loader */
    .loader-container{
        position: fixed;
        inset: 0;
        z-index: 1000000;
        min-width: 100%;
        min-height: 100vh;
        min-height: 100dvh;
        display: grid;
        place-items: center;
        background-color: ;
    }

    .loader {
        /* LOADER CODES HERE */
    }

    /* Scroll Bar */
    @supports(scrollbar-color: red blue){
        *{
            scrollbar-color: var(--clr-primary) var(--clr-dark);
            scrollbar-width: thin;
        }
    }

    /* Selection Color */
    ::selection{
        background-color: var(--clr-primary-300);
    }

    /*  Controlling the width and height of elements */
    .fit-content{
      width: fit-content;
    }

    .mfit-content{
      min-width: fit-content;
    }

    .width-50{
      width: 50%;
    }

    .width{
        width: 100%;
    }

    .min-width{
      min-width: 100%;
    }

    .max-width{
      max-width: 100%;
    }

    .height{
        height: 100vh;
        height: 100dvh;
    }

    .min-height{
      min-height: 100vh;
      min-height: 100dvh;
    }

    .max-height{
      max-height: 100vh;
      max-height: 100dvh;
    }

    /* Fast Layouts */
    .flex{
        display: flex;
        align-items: center;
    }

    /* Fast Layouts */
    .flex1{
      flex: 1;
  }

    .wrap{
        flex-wrap: wrap;
    }

    .flex-space{
      display: flex;
      align-items: center;
      justify-content: space-between !important;
    }

    .flex-around{
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .flex-evenly{
      display: flex;
      align-items: center;
      justify-content: space-evenly;
  }

    .flex-center{
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .flex-center-x{
      display: flex;
      align-items: start;
      justify-content: center;
    }

    .flex-center-y{
      display: flex;
      justify-content: start;
      align-items: center;
    }

    .flex-column{
        display: flex;
        flex-direction: column;
    }

    .align-self-top{
        align-self: start;
    }

    .align-self-bottom{
      align-self: flex-end;
    }

    .align-items-top{
      align-items: flex-start;
    }

    .stretch-items{
      align-items: stretch;
    }

    .justify-self-start{
    justify-self: flex-start;
    }

    .justify-self-end{
        justify-self: end;
    }

    .justify-content-start{
      justify-content: flex-start;
      }
  
      .justify-content-end{
          justify-content: flex-end;
      }

    .grid{
        display: grid;
    }

    .grid-center{
        display: grid;
        place-items: center;
    }

    .grid2column{
      grid-column: span 2;
    }

    .center-self{
        margin-inline: auto;
        justify-self: center;
    }

    .text-center{
        text-align: center;
    }

    /* Custom Cursor (Pointer) */
    .cursor{
        cursor: url('cursor-pointer.svg'), pointer;
    }

   /* Font Weights */
    .fw-black { font-weight: var(--fw-black); }
    .fw-extra-bold { font-weight: var(--fw-extra-bold); }
    .fw-bold { font-weight: var(--fw-bold); }
    .fw-semi-bold { font-weight: var(--fw-semi-bold); }
    .fw-medium { font-weight: var(--fw-medium); }
    .fw-regular { font-weight: var(--fw-regular); }
    .fw-light { font-weight: var(--fw-light); }
    .fw-extra-light { font-weight: var(--fw-extra-light); }
    .fw-thin { font-weight: var(--fw-thin); }
    /* Your font may not support some values */

    /* Font Weights (Simplified)*/
    .fw-900 { font-weight: var(--fw-black); }
    .fw-800 { font-weight: var(--fw-extra-bold); }
    .fw-700 { font-weight: var(--fw-bold); }
    .fw-600 { font-weight: var(--fw-semi-bold); }
    .fw-500 { font-weight: var(--fw-medium); }
    .fw-400 { font-weight: var(--fw-regular); }
    .fw-300 { font-weight: var(--fw-light); }
    .fw-200 { font-weight: var(--fw-extra-light); }
    .fw-100 { font-weight: var(--fw-thin); }
    /* Your font may not support some values */

    /* Gaps */
    .g-3  { gap: .3em;  }
    .g-5  { gap: .5em;  }
    .g-7  { gap: .7em;  }
    .g-10 { gap: 1em;   }
    .g-12 { gap: 1.2em; }
    .g-15 { gap: 1.5em; }
    .g-20 { gap: 2em;   }
    .g-25 { gap: 2.5em; }
    .g-30 { gap: 3em;   }
    .g-35 { gap: 3.5em; }
    .g-40 { gap: 4em;   }
    .g-45 { gap: 4.5em; }
    .g-50 { gap: 5em;   }

    /* Paddings */
    .p-5  { padding: .5em;  }
    .p-10 { padding: 1em; }
    .p-15 { padding: 1.5em; }
    .p-20 { padding: 2em; }
    .p-25 { padding: 2.5em; }
    .p-30 { padding: 3em; }
    .p-35 { padding: 3.5em; }
    .p-40 { padding: 4em; }
    .p-45 { padding: 4.5em; }
    .p-50 { padding: 5em; }

    /* Paddings */
    .p-5i { padding: .5em !important;  }
    .p-7i { padding: .7em !important; }
    .p-10i { padding: 1em !important; }
    .p-15i { padding: 1.5em !important; }
    .p-20i { padding: 2em !important; }
    .p-25i { padding: 2.5em !important; }
    .p-30i { padding: 3em !important; }
    .p-35i { padding: 3.5em !important; }
    .p-40i { padding: 4em !important; }
    .p-45i { padding: 4.5em !important; }
    .p-50i { padding: 5em !important; }


    .px-5  { padding-inline: .5em; }
    .px-10 { padding-inline: 1em; }
    .px-15 { padding-inline: 1.5em; }
    .px-20 { padding-inline: 2em; }
    .px-25 { padding-inline: 2.5em; }
    .px-30 { padding-inline: 3em; }
    .px-35 { padding-inline: 3.5em; }
    .px-40 { padding-inline: 4em; }
    .px-45 { padding-inline: 4.5em; }
    .px-50 { padding-inline: 5em; }

    .py-5  { padding-block: .5em; }
    .py-10 { padding-block: 1em; }
    .py-15 { padding-block: 1.5em; }
    .py-20 { padding-block: 2em; }
    .py-25 { padding-block: 2.5em; }
    .py-30 { padding-block: 3em; }
    .py-35 { padding-block: 3.5em; }
    .py-40 { padding-block: 4em; }
    .py-45 { padding-block: 4.5em; }
    .py-50 { padding-block: 5em; }

    .pt-5  { padding-top: .5em; }
    .pt-10 { padding-top: 1em; }
    .pt-15 { padding-top: 1.5em; }
    .pt-20 { padding-top: 2em; }
    .pt-25 { padding-top: 2.5em; }
    .pt-30 { padding-top: 3em; }
    .pt-35 { padding-top: 3.5em; }
    .pt-40 { padding-top: 4em; }
    .pt-45 { padding-top: 4.5em; }
    .pt-50 { padding-top: 5em; }

    .pb-5  { padding-bottom: .5em; }
    .pb-10 { padding-bottom: 1em; }
    .pb-15 { padding-bottom: 1.5em; }
    .pb-20 { padding-bottom: 2em; }
    .pb-25 { padding-bottom: 2.5em; }
    .pb-30 { padding-bottom: 3em; }
    .pb-35 { padding-bottom: 3.5em; }
    .pb-40 { padding-bottom: 4em; }
    .pb-45 { padding-bottom: 4.5em; }
    .pb-50 { padding-bottom: 5em; }

    .pr-5  { padding-right: .5em; }
    .pr-10 { padding-right: 1em; }
    .pr-15 { padding-right: 1.5em; }
    .pr-20 { padding-right: 2em; }
    .pr-25 { padding-right: 2.5em; }
    .pr-30 { padding-right: 3em; }
    .pr-35 { padding-right: 3.5em; }
    .pr-40 { padding-right: 4em; }
    .pr-45 { padding-right: 4.5em; }
    .pr-50 { padding-right: 5em; }

    .pl-5  { padding-left: .5em; }
    .pl-10 { padding-left: 1em; }
    .pl-15 { padding-left: 1.5em; }
    .pl-20 { padding-left: 2em; }
    .pl-25 { padding-left: 2.5em; }
    .pl-30 { padding-left: 3em; }
    .pl-35 { padding-left: 3.5em; }
    .pl-40 { padding-left: 4em; }
    .pl-45 { padding-left: 4.5em; }
    .pl-50 { padding-left: 5em; }

    .p-0{ padding:  0!important; }
    .px-0{ padding-inline: 0 !important; }
    .py-0{ padding-block: 0 !important; }
    .pt-0{ padding-top: 0 !important; }
    .pb-0{ padding-bottom: 0 !important; }
    .pr-0{ padding-right: 0 !important; }
    .pl-0{ padding-left: 0 !important; }

    /* Opacity */
    .opacity-10{ opacity: .1; }
    .opacity-20{ opacity: .2; }
    .opacity-30{ opacity: .3; }
    .opacity-40{ opacity: .4; }
    .opacity-50{ opacity: .5; }
    .opacity-60{ opacity: .6; }
    .opacity-70{ opacity: .7; }
    .opacity-80{ opacity: .8; }
    .opacity-90{ opacity: .9; }

    .clr-txt{ color: var(--clr-gray-darker) !important; }

    .clr-dark{ color: var(--clr-dark); }

    .clr-light{ color: var(--clr-light); }

    .clr-primary{ color: var(--clr-primary-700); }

    .clr-primary-h:is(:hover, :focus-visible){ color: var(--clr-primary); }

    .transition{ transition: var(--transition); }

    a{
        text-decoration: none;
        color: var(--clr-txt);
        cursor: url('cursor-pointer.svg'), pointer;
    }

    .transparent-btn,
    a.transparent-a{
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: transparent;
        padding: .3em 1em;
        outline: 0;
        border: 0;
        transition: var(--transition);
    }

    /* Fast Blur Effects */
    .blur-5 { filter: blur(5px);  }
    .blur-10{ filter: blur(10px); }
    .blur-15{ filter: blur(15px); }
    .blur-20{ filter: blur(20px); }
    .blur-25{ filter: blur(25px); }
    .blur-30{ filter: blur(30px); }
    .blur-35{ filter: blur(35px); }
    .blur-40{ filter: blur(40px); }
    .blur-45{ filter: blur(45px); }
    .blur-50{ filter: blur(50px); }

    /* Rotate Elements */
    .rotate { scale: -1; }

    /* Fit IMG */
    .img-set{
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    /* Dropdown Styling */
    .pureflowcss-dropdown{
      position: relative;
      display: grid;
      min-width: fit-content;
      max-height: fit-content;
      color: var(--dropdown-clr);
      user-select: none;
      font-size: var(--fs-input);
    }

    .pureflowcss-dropdown label{
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--dropdown-bg);
      padding: var(--dropdown-padding);
      gap: .75em;
      border-radius: var(--input-border-radius);
      overflow: hidden;
      border: var(--input-border);
      transition: var(--transition);
      
      min-height: 3.5em;
    }

    .pureflowcss-dropdown label svg path{
      transition: var(--transition);
    }

    .pureflowcss-dropdown label:not(:hover) svg path{
      stroke: var(--clr-primary-900);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items{
      display: grid;
      place-items: center;
      position: absolute;
      overflow: auto;
      top: 3.5em;
      left: 0;
      min-width: 100%;
      background-color: var(--clr-light);
      border-radius: 10px;
      border: var(--input-border);
      box-shadow: var(--dropdown-shadow);
      visibility: hidden;
      opacity: 0;
      max-height: 0px;
      transition: var(--transition);
      z-index: 60 !important;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items.show-dropdown-list{
      max-height: 300px;
      top: 4em;
      opacity: 1;
      visibility: visible;
      overflow: auto;
    }

    /* Scroll Bar */
    @supports(scrollbar-color: red blue){
      .pureflowcss-dropdown .pureflowcss-dropdown-items{
          scrollbar-color: var(--clr-rgba-gray) var(--clr-light);
          scrollbar-width: thin;
      }
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column{
      width: 100%;
    }

    /* Dropdown list column number */
    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="med-dropdown-list"] .pureflow-css-dropdown-add-column{
      grid-column: span 2;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="long-dropdown-list"] .pureflow-css-dropdown-add-column{
      grid-column: span 3;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="longer-dropdown-list"] .pureflow-css-dropdown-add-column{
      grid-column: span 4;
    }
    /* You can add more */

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column .pureflowcss-input-container {
      border-bottom: 2px solid var(--clr-rgba-gray-soft);
      width: 100%;
      margin-inline: 1.2em;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column .pureflowcss-input-container input{
      border: 0;
      width: 100%;
      padding-inline: 1em;
      background-color: transparent;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .pureflow-css-dropdown-add-column .pureflowcss-input-container button{
      background-color: transparent;
      border-color: transparent;
      height: 100%;
      padding: .5em;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="med-dropdown-list"]{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      padding: .3em;
      gap: .5em;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="long-dropdown-list"]{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      padding: .3em;
      gap: .5em;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items[data-type="longer-dropdown-list"]{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: .3em;
      gap: .5em;
    }

    .pureflowcss-dropdown label svg.active-dropdownSvg{
      rotate: 180deg;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items span{
      width: 100%;
      display: flex;
      justify-content: start;
      align-items: center;
      gap: .7em;
      text-align: start;
      padding: .85em 1.2em;
      cursor: url('cursor-pointer.svg'), pointer;
      white-space: nowrap;
      transition: var(--transition);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items:is([data-type="med-dropdown-list"] ,[data-type="long-dropdown-list"] ,[data-type="longer-dropdown-list"]) span{
      border-radius: 5px;
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items:is([data-type="long-dropdown-list"] ,[data-type="longer-dropdown-list"]) span{
      border-radius: 5px;
    }

    .pureflowcss-dropdown label:hover{
      color: var(--clr-gray-darker);
      background-color: var(--dropdown-hover);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items span:hover{
      background-color: var(--dropdown-hover);
      color: var(--clr-gray-darker);
    }

    .pureflowcss-dropdown .pureflowcss-dropdown-items .no-match{
      color: var(--clr-warning);
      font-size: var(--fs-sm);
      white-space: nowrap;
      padding: 1em;
    }
     /* Dropdown Stling Ends */
     

    /* Range Input Stling */
    input[type=range] {
      -webkit-appearance: none;
      width: 100%;
      height: var(--input-range-bar-size);
      background: linear-gradient(to right, var(--input-range-color), var(--input-range-null-color));
      border-radius: 5px;
      outline: none;
    }

    input[type=range]::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--input-range-thumb-size);
      height: var(--input-range-thumb-size);
      border-radius: 50%;
      background: var(--input-range-thumb-color);
      cursor: url('cursor-pointer.svg'), pointer;
      border: 3px solid var(--clr-bg);
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    }

    input[type=range]::-moz-range-thumb {
      width: var(--input-range-thumb-size);
      height: var(--input-range-thumb-size);
      border-radius: 50%;
      background: var(--input-range-thumb-color);
      cursor: url('cursor-pointer.svg'), pointer;
      border: 3px solid var(--clr-bg);
    }

    .price-text {
      position: relative;
      margin-top: 30px;
    }

    #priceLabel {
      left: 0;
      position: absolute;
      top: -30px;
      font-size: 16px;
      color: var(--input-range-price-color);
      font-weight: bold;
      transition: left 0.1s ease-in-out;
    }

    .price-range-area p{
      font-size: var(--fs-xs);
      opacity: .9;
    }
    /* Range Input Stling Ends */


    /* File Input Stling */
    .inputfile {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      position: absolute;
      z-index: -1;
      width: fit-content;
    }

    .inputfile + label {
      display: flex;
      justify-content: start;
      align-items: center;
      gap: .7em;
      color: var(--input-clr-file);
      font-weight: var(--fw-normal-bolder);
      border: var(--input-border);
      border: var(--input-border);
      padding: var(--input-padding);
      border-radius: var(--input-border-radius);
      transition: var(--transition);
      user-select: none;
      font-size: var(--fs-input);
    }

    .inputfile:focus + label,
    .inputfile + label:hover {
      background-color: var(--input-file-bg-hover);
    }

    .inputfile + label * {
      pointer-events: none;
    }
     /* File Input Stling Ends */


    /* Modal Styling starts here*/
    .fullScreenModal{
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 999;
      background-color: var(--modal-bg);
      backdrop-filter: blur(5px);

      /* You can set custom animations here */
      pointer-events: none;
      opacity: 0;
      visibility: hidden;
      transition: var(--transition);

      /* justify-content: start; */ /* Add this if you want to align the modal to the start */
      /* justify-content: end;*/ /* Add this if you want to align the modal to the end */
      /* align-items: start; */ /* Add this if you want to align the modal to the start */
      /* align-items: end; */ /* Add this if you want to align the modal to the end */
    }

    .show-fullScreenModal{
      opacity: 1;
      visibility: visible;
      pointer-events: inherit;
    }

    .fullScreenModal .modalContent{
      background-color: var(--modal-content-bg);
      padding: var(--modal-content-padding);
      border-radius: var(--modal-content-radius);
      border: var(--modal-content-border);
      color: var(--modal-content-clr);

      /* You can set custom animations here */
      scale: .95;
      transition: var(--transition);

      /* justify-self: stretch; */ /* Add this if you want to stretch the modal (100% width) */
      /* align-self: stretch; */ /* Add this if you want to stretch the modal (100% height) */

      display: flex;
      flex-direction: column;
      gap: 1em;
      max-width: 90vw;
    }

    .fullScreenModal .show-modalContent{
      scale: 1;
    }



    .fullScreenModal .show-modalContent .line-x{
      width: 100%;
      height: 1px;
      background-color: var(--clr-gray-dark);
      opacity: .1;
    }    

    .fullScreenModal .modalContent small{
      font-size: var(--fs-xs);
      color: var(--clr-gray-dark);
      opacity: .8;
      line-height: 1.2;
    }

    @media screen and (max-width: 550px){
      .fullScreenModal .modalContent button{
        width: 100%;
      }

      .fullScreenModal .show-modalContent .modalTitle{
        text-align: center;
      }
    }

    /* MODAL STYLING ENDS HERE (don't forget to include the "fullScreenModal.js" file in your HTML, otherwise it won't work) */
    /* Button (or anything) with "active-modal" class required. */


    /* Alert Styling starts here*/
    .alertContainer{
      position: fixed;
      background-color: var(--alert-bg);
      color: var(--alert-clr);
      border: var(--alert-border);
      border-radius: var(--alert-radius);
      padding: var(--alert-padding);
      z-index: 950;
      
      /* You can set custom animations here */
      opacity: 0;
      visibility: 0;
      pointer-events: none;
      transition: .3s;
    }

    .alertContainer.show-alertContainer{
      opacity: 1;
      visibility: 1;
      pointer-events: inherit;
    }

    .alertTop,
    .alertTopRight,
    .alertTopLeft{
      top: 0;
    }

    .alertBottom,
    .alertBottomRight,
    .alertBottomLeft{
      bottom: 0;
    }

    .alertBottomRight,
    .alertTopRight{
      right: 0;
    }

    .alertBottomLeft,
    .alertTopLeft{
      left: 0;
    }

    .alertCenter{
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .alertBottom,
    .alertTop{
      left: 50%;
      transform: translateX(-50%);
    }

    /* ALERT STYLING ENDS HERE (don't forget to include the "alert.js" file in your HTML, otherwise it won't work) */
    /* Button (or anything) with "showAlerts" class required. */

    /*-------------------------------------------------------- SCROLL ANIMATIONS --------------------------------------------------------*/
    /* Text Animation ---------------------------------------------------------------------------------- */
    .add-text-animation{
      transform: translateY(-5px) !important;
      opacity: 0 !important;

      transition: var(--text-animation);
    }

    .text-animation-longer{ 
      transform: translateY(-5px) !important;
      opacity: 0 !important;
      
      transition: var(--text-animation-longer); 
    }

    .add-text-animation.text-animation{
      transform: translateY(0) !important;
      opacity: 1 !important;
    }


    /* Opacity Animation ---------------------------------------------------------------------------------- */
    .add-opacity-animation{
      opacity: 0 !important;
      
      transition: var(--opacity-animation);
    }

    .add-opacity-animation.opacity-animation{
      opacity: 1 !important;
    }


    /* Slide To Left Animation ---------------------------------------------------------------------------------- */
    .add-x-toLeft-animation{
      transform: translateX(-10px) !important;
      opacity: 0 !important;

      transition: var(--xl-animation) ;
    }

    .add-x-toLeft-animation.x-toLeft-animation{
      transform: translateX(0) !important;
      opacity: 1 !important;
    }


    /* Slide To Right Animation ---------------------------------------------------------------------------------- */
    .add-x-toRight-animation{
      transform: translateX(10px) !important;
      opacity: 0 !important;
      
      transition: var(--xr-animation);
    }

    .add-x-toRight-animation.x-toRight-animation{
      transform: translateX(0) !important;
      opacity: 1 !important;
    }


    /* Scale Animation ---------------------------------------------------------------------------------- */
    .add-scale-animation{
      scale: 0 !important;
      opacity: 0 !important;

      transition: var(--scale-animation);
    }

    .add-scale-animation.scale-animation{
      scale: 1 !important;
      opacity: 1 !important;
    }

    @media screen and (max-width: 1000px){
        /* Optimized Scale Animation ---------------------------------------------------------------------------------- */
        .add-scale-animation{
          scale: .9 !important;
          opacity: .9 !important;
        }

        .add-scale-animation.scale-animation{
          scale: 1 !important;
          opacity: 1 !important;
        
        }  
    }

    .relative{
      position: relative;
    }


    /* Page Styling */
    body{
      cursor: url('cursor.svg'), auto;
      font-family: var(--ff-main);
      font-size: var(--fs-main);
      font-weight: var(--fw-normal);
      color: var(--clr-txt);
      background-color: var(--clr-bg);
      margin-inline: auto;
      max-width: var(--max-page-width);
    }

    body.noScrollBody{
      max-height: 100vh;
      max-height: 100dvh;
      overflow: hidden;
    }

    main section:not(.no-padding-section){
      padding-block: 8em;
    }

    @media screen and (max-width: 550px){
      main section:not(.no-padding-section):first-child{
        padding-block: 3em !important;
      }
   }

    @media screen and (max-width: 550px){
      body{
        user-select: none;
      }
    }

    header{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .5em 1em;
    }

    header nav{
      align-self: stretch;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    header nav ul{
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--clr-gray-darker);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: stretch;
    }

    header nav ul li a{
      width: fit-content;
      padding-inline: .85em;
      height: 100%;
      align-self: stretch;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    header nav ul li a.currentPage{
      color: var(--clr-primary);
    }

    header nav ul li{
      transition: var(--transition);
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      align-self: stretch;
    }

    header nav ul li:is(:hover, :focus-visible){
      padding-bottom: 5px;
    }

    header .changeLanguageContainer{
      position: relative;
    }

    header .changeLanguageContainer .otherLanguages{
      position: absolute;
      top: 150%;
      opacity: 0;
      background-color: var(--clr-light);
      filter: blur(1px);
      border-radius: var(--btn-border-radius-md);
      box-shadow: var(--clr-rgba-gray-soft) 0 0 5px 1px;
      visibility: hidden;
      transition: var(--transition);
    }
    
    header .changeLanguageContainer .otherLanguages:hover{
      background-color: var(--clr-gray-softer);
      scale: .98;
    }

    header .changeLanguageContainer .otherLanguages button{
      padding: 1em;
    }

    header .changeLanguageContainer .otherLanguages.show{
      opacity: 1;
      filter: blur(0);
      visibility: visible;
      top: 150%;
    }

    header button.hamburgerBtn{
      display: none;
    }

    @media screen and (max-width: 1000px){
      header{
        padding: 1em;
      }

      header .headerIMGArea{
        display: none;
      }

      header button.hamburgerBtn{
        position: relative;
        display: grid;
        gap: 0;
        aspect-ratio: 1/1;
      }

      header button.hamburgerBtn::before,
      header button.hamburgerBtn .bar,
      header button.hamburgerBtn::after{
        content: '';
        width: 25px;
        height: 3px;
        border-radius: var(--btn-border-radius-pill);
        background-color: var(--clr-primary);
      }

      header button.hamburgerBtn .bar{
        width: 70%;
        justify-self: right;
        transition: var(--transition);
      }
      
      header button.hamburgerBtn.active .bar{
        width: 100%;
      }

      header nav{
        position: fixed;
        inset: 0;
        background-color: var(--clr-rgba-gray-med-darker);
        backdrop-filter: blur(4px);
        z-index: 300;
        visibility: hidden;
        opacity: 0;
        transition: var(--transition);
      }

      header nav.show{
        visibility: visible;
        opacity: 1;
      }

      header nav ul{
        flex-direction: column;
        place-self: center;
        background-color: var(--clr-light);
        width: fit-content;
        height: fit-content;
        border-radius: var(--btn-border-radius-md);
        overflow: hidden;
        width: 85vw;
        scale: .9;
        transition: var(--transition);
      }

      header nav ul.show{
        scale: 1;
      }

      header nav ul li:is(:hover, :focus-visible){
        padding-bottom: 0 !important;
      }

      header nav ul li a{
        padding: .5em 1.5em;
        justify-content: start;
        width: 100%;
        transition: var(--transition);
      }

      header nav ul li a:is(:hover, :focus-visible){
        background-color: var(--clr-rgba-gray-softer);
      }

      header nav ul li:first-child a{
        padding-top: .7em;
      }

      header nav ul li:last-child a{
        padding-bottom: .7em;
      }

      header .headerBlock{
        width: fit-content;
        flex: inherit;
        flex-direction: row-reverse;
      }
      
    }



    footer{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      padding: 2em 1em;
    }

    @media screen and (max-width: 800px){
      footer{
        grid-template-columns: repeat(2, 1fr);
        gap: 3em 0;
      }
    }

    @media screen and (max-width: 455px){
      footer{
        grid-template-columns: repeat(1, 1fr);
        gap: 3em 0;
      }
    }

    footer ul{
      display: flex;
      flex-direction: column;
      color: var(--clr-gray-darker);
    }

    footer ul a{
      transition: var(--transition);
      width: 100%;
    }

    footer ul a.currentPage{
      color: var(--clr-primary);
    }

    footer ul a:not(.currentPage):hover{
      opacity: .7;
    }





    section.indexHero picture{
      width: 95vw;
    }



    section.stepsSection{
      position: relative;
    }

    section.stepsSection img{
      max-height: 100%;
    }

    
    section.stepsSection img:last-child{
      max-width: 40em;
    }
    
    section.stepsSection img:first-child{
      max-width: 30em;
    }

    @media screen and (max-width: 1300px){
      section.stepsSection img:last-child{
        max-width: 35em;
      }
      
      section.stepsSection img:first-child{
        max-width: 25em;
      }
    }

    @media screen and (max-width: 1100px){
      section.stepsSection{
        flex-direction: column-reverse;
        justify-content: center;
        align-items: start;
        gap: 3em;
      }
      
      section.stepsSection img:first-child{
        position: relative;
        max-width: 20em;
      }

      
      section.stepsSection img:last-child{
        max-width: 90vw;
        align-self: center;
      }
    }

    @media screen and (max-width: 500px){

      section.stepsSection img{
        position: relative;
      }
      
      section.stepsSection img:first-child{
        max-width: 60vw;
      }
    }





    section.letsStartSection {
      padding-inline: 1em;
      position: relative;
      overflow: hidden;
    }

    section.letsStartSection img.mascot{
      position: absolute;
      max-width: 15em;
      top: 0;
      right: -7em;
      rotate: -25deg;
    }

    @media screen and (max-width: 777px){
      section.letsStartSection img.mascot{
        display: none;
      }
    }
    
    @media screen and (max-width: 455px){
      section.letsStartSection {
        --fs-h3: clamp(1.6em, 4vw, 3em);
      }
    }

    





    @media screen and (max-width: 700px){
     section.quizPageSignedInNotSection{
      padding-inline: 1em;
     } 
    }

    @media screen and (max-width: 600px){
      section.quizPageSignedInNotSection .quizPageSignedInNotSectionTitle{
        padding-inline: .5em;
      }

      section.quizPageSignedInNotSection .quizPageSignedInNotSectionTitle .quizPageSignedInNotSectionTitleTxt{
        display: none;
      }

      section.quizPageSignedInNotSection .quizPageSignedInNotSectionTitle button{
        font-size: var(--fs-s);
      } 
     }





     @media screen and (max-width: 950px){
      section.quizPageGuestSection2 img:first-child{
        display: none;
      }
     }





     section.quizPageGuestSection3{
      padding-inline: 3em;
     }

     @media screen and (max-width: 660px){
     section.quizPageGuestSection3{
      padding-inline: 1em;
    padding-block: 3em !important;
     }

     section.categoriesButtonSection {
      padding-inline: 1em;
     }
    }






    .titleWithLine .line-x{
      width: 100%;
      height: 1.5px;
      opacity: .3;
      background-color: var(--clr-gray-darker);
    }
    
    .titleWithLine h6{
      white-space: nowrap;
    }

    section.categoriesButtonSection .categoriesButtonGrid button{
      color: var(--clr-gray-darker);
      justify-content: start;
    }

    
    section.categoriesButtonSection .categoriesButtonGrid button img{
      width: 1.2em;
    }

    
    section.categoriesButtonSection .categoriesButtonGrid{
      width: 100%;
      gap: 1.5em;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }







    section.leaderboardSection .top3Container img:nth-child(2){
      margin-bottom: 4em;
    }

    @media screen and (max-width: 940px){
      section.leaderboardSection .leaderboardSectionTitle{
        padding-inline: 0;
      }

      section.leaderboardSection .top3Container{
        max-width: 95vw;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
      }
      
      section.leaderboardSection .top3Container img{
        max-width: 100%;
      } 
    }

    @media screen and (max-width: 710px){
      section.leaderboardSection .top3Container{
        gap: 2em;
      }
    }

    @media screen and (max-width: 560px){
      section.leaderboardSection .leaderboardSectionTitle{
        justify-content: center;
      }
    }

    @media screen and (max-width: 420px){
      section.leaderboardSection .leaderboardSectionTitle img{
        width: 1.3em !important;
      }

      section.leaderboardSection .leaderboardSectionTitle h6{
        --fs-h6: clamp(1em, 2.5vw, 1.2em);
      }
    }

    section.leaderboardSection .leaderboardTable{
      display: grid;
      background-color: var(--clr-gray);
      border: 2px solid var(--clr-gray);
      border-radius: var(--btn-border-radius-md);
      overflow: hidden;
      gap: 1.5px;
      width: 50em;
      max-width: 85vw !important;
    }
    
    section.leaderboardSection .leaderboardTable .leaderboardUser{
      --fs-main: clamp(.7em, 2vw, 1.3em);
      font-size: var(--fs-main);
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: var(--clr-light);
      padding: .6em 1.3em;
    }

    section.leaderboardSection .leaderboardTable .leaderboardUser .leaderboardUserBlock{
      gap: 2em;
      max-width: 100%;
      overflow: hidden;
    }

    section.leaderboardSection .leaderboardTable .leaderboardUser p.name{
      max-width: 100%;
      text-align: start;
    }

    section.leaderboardSection .leaderboardTable .leaderboardUser p.score{
      min-width: fit-content !important;
    }
    
    section.leaderboardSection .leaderboardTable .leaderboardUser p{
      white-space: nowrap;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    section.leaderboardSection .leaderboardTable .leaderboardUser img{
      max-width: 40px;
      max-height: 40px;
      aspect-ratio: 1/1;
      border-radius: 100vw;
      overflow: hidden;
      object-fit: cover;
    }
    
    @media screen and (max-width: 710px){
      section.leaderboardSection .leaderboardTable .leaderboardUser img{
        max-width: 25px;
        max-height: 25px;
      }
    }





    section.contactSection{
      align-items: flex-start;
      padding-top: 2em !important;
    }

    
    section.contactSection .contactContainer{
      padding-top: 5em;
    }
    
    section.contactSection .contactContainer .contactHeader{
      gap: .7em;
    }

    section.contactSection .contactContainer .contactHeader button{
      background-color: transparent;
      border-radius: var(--btn-border-radius-pill);
      color: var(--clr-gray-darker);
      border: 2px solid var(--clr-primary);
      padding: .7em 1.2em;
    }
    
    section.contactSection .contactContainer .contactHeader button img{
      height: 1em;
    }
    
    section.contactSection .contactContainer .contactArea textarea{
      height: 15em;
    }

    @media screen and (max-width: 1300px){
      section.contactSection img.contactGraphic{
        width: 20em;
      }

      section.contactSection .contactContainer .contactArea textarea{
        height: 13.5em;
      }
    }
    
    @media screen and (max-width: 1130px){
      section.contactSection{
        display: flex ;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        padding-inline: 1em;
      }
    }
    
    @media screen and (max-width: 780px){
      section.contactSection{
        gap: 5em;
      }

      section.contactSection .contactContainer{
        display: flex ;
        flex-direction: column;
        width: 100%;
        padding-top: 0;
      }

      section.contactSection .contactContainer .contactHeader{
        flex-direction: column;
        width: 100% ;
      }

      section.contactSection .contactContainer .contactHeader button{
        width: 100%;
        justify-content: flex-start;
      }
      
    section.contactSection .contactContainer .contactArea button{
      width: 100%;
    }

    section.contactSection .contactContainer .contactArea .contactForm .contactFormInputs{
      flex-direction: column;
    }
    }




    section.rewardsSection{
      padding-top: 3.3em !important;
    }

    @media screen and (max-width: 550px){
      section.rewardsSection{
        padding-inline: 1em;
      }
      
      section.rewardsSection .rewardsHeader{
        justify-content: center;
      }
    }

    section.rewardsSection .rewardsGrid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(370px, 1fr));
      gap: 1.5em;
      color: var(--clr-gray-darker);
    }

    @media screen and (max-width: 400px){
      section.rewardsSection .rewardsGrid{
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      }
    }

    section.rewardsSection .rewardsGrid .rewardsCard{
      gap: .7em;
      width: 100%;
    }
    
    section.rewardsSection .rewardsGrid .rewardsCard img.rewardThumbnail{
      aspect-ratio: 16/9;
      width: 10em;
      width: clamp(8.5em, 100%, 10em);
      object-fit: cover;
      border-radius: var(--btn-border-radius-md);
      transition: var(--transition);
    }

    section.rewardsSection .rewardsGrid .rewardsCard:hover img.rewardThumbnail{
      filter: brightness(70%);
    }

    section.rewardsSection .rewardsGrid .rewardsCard h6{
      --fs-h6: clamp(1em, 2.5vw, 1.2em);
      line-height: 1.3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    
    section.rewardsSection .rewardsGrid .rewardsCard img.coinSVG{
      width: 1.5em;
    }






    main.signPagesMain{
    }

    main.signPagesMain section.signPagesSection{
      padding: 0 !important;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
      min-height: 100dvh;
    }
    
    main.signPagesMain section.signPagesSection .signContainer{
      display: flex;
      flex-direction: column;
      align-self: stretch;
      justify-content: space-between;
      align-items: space-between;
      width: 40%;
    }

    main.signPagesMain section.signPagesSection .signContainer .signHeader h1{
      font-size: var(--fs-h4);
      font-weight: var(--fw-medium);
      white-space: nowrap;
    }

    main.signPagesMain section.signPagesSection .signContainer .signFormArea .lostPassTxt{
      color: var(--clr-gray-darker);
    }
    
    main.signPagesMain section.signPagesSection .signContainer :is(.signFormArea, .signDownArea){
      padding-inline: 3em;
    }

    main.signPagesMain section.signPagesSection .signContainer .signDownArea button.guestBtn{
      border: 0 !important;
    }
    
    main.signPagesMain section.signPagesSection :is(.signGraphicArea, .signContainer){
      padding: 2em;
    }
    
    main.signPagesMain section.signPagesSection .signGraphicArea{
      align-self: stretch;
      width: 60%;
      padding-left: 0 !important;
    }

    main.signPagesMain section.signPagesSection .signGraphicArea .signGraphicContainer{
      position: relative;
      background: linear-gradient( var(--clr-primary-900), var(--clr-primary-400));
      box-shadow: inset 0 0 25px var(--clr-rgba-gray-darker);
      min-width: 100%;
      min-height: 100%;
      border-radius: var(--btn-border-radius-md);
      overflow: hidden;
    }

    
    main.signPagesMain section.signPagesSection .signGraphicArea .signGraphicContainer img.mascot{
      position: absolute;
      right: 0;
      bottom: -5em;
      width: 15em;
      rotate: -15deg;
      filter: drop-shadow(20px 20px 8px var(--clr-rgba-gray-darker));
    }

    
    main.signPagesMain section.signPagesSection .signGraphicArea .signGraphicContainer img.title{
      position: absolute;
      top: 2em;
      left: 2em;
      width: 25em;
    }

    @media screen and (max-width: 1350px){
      main.signPagesMain section.signPagesSection .signContainer :is(.signFormArea, .signDownArea){
        padding-inline: 1em;
      }  

      main.signPagesMain section.signPagesSection .signGraphicArea .signGraphicContainer img.mascot{
        width: 13em;
      }

      main.signPagesMain section.signPagesSection .signUpHeader .signUpHeaderBtn{
        display: none;
      }
    }

    @media screen and (max-width: 1000px){
      main.signPagesMain section.signPagesSection .signGraphicArea{
        display: none;
      }

      
    main.signPagesMain section.signPagesSection .signContainer{
      width: 100%;
    }
    }

    @media screen and (min-width: 550px) and (max-width: 1000px){
      main.signPagesMain section.signPagesSection .signContainer :is(.signFormArea, .signDownArea){
        width: 30em;
        align-self: center;
        max-width: 95vw;
      }
    }

    @media screen and (max-width: 550px){
      main.signPagesMain section.signPagesSection .signContainer :is(.signFormArea, .signDownArea){
        padding-inline: 0;
      }
  
      main.signPagesMain section.signPagesSection :is(.signGraphicArea, .signContainer){
        padding: 1.5em;
      }
    }







    main.profileMain{
      min-height: 100vh;
      min-height: 100dvh;
      max-height: 100vh;
      max-height: 100dvh;
      display: flex;
      flex-direction: space-between;
      align-content: stretch;
      background-color: var(--clr-light);
    }

    main.profileMain aside{
      display: flex;
      flex-direction: column;
      align-items: space-between;
      justify-content: space-between;
      padding: 1em;
      background-color: var(--clr-pure-light);
      box-shadow: var(--profileBoxShadow);
    }
    
    main.profileMain aside img.logo{
      width: 6em;
    }

    main.profileMain aside button{
      width: 100%;
      justify-content: flex-start;
      background-color: transparent;
      border: 0;
      color: var(--clr-gray-darker);
      padding: .6em 5em .6em 1em;
      white-space: nowrap;
      border-radius: var(--btn-border-radius-md);
    }

    main.profileMain aside button.active{
      background-color: var(--clr-rgba-gray-soft) !important;
    }

    
    main.profileMain aside button:is(:hover, :focus-visible),
    main.profileMain aside button.asideNavMoreBtnClick.active{
      background-color: var(--clr-rgba-gray-softer);
    }

    main.profileMain aside button:active{
      scale: .95;
    }
    
    main.profileMain aside button img{
      width: 1.5em;
    }

    main.profileMain aside .asideNavArea{
      gap: .5em;
    }

    main.profileMain aside .asideNavArea .asideNavMoreArea{
      position: absolute;
      bottom: 110%;
      background-color: var(--clr-pure-light);
      gap: 0;
      box-shadow: 0 0 10px 1px var(--clr-rgba-gray-softer);
      border-radius: var(--btn-border-radius-lg);
      overflow: hidden;
      opacity: 0;
      filter: blur(5px);
      visibility: hidden;
      transform: translateY(5px);
      transition: var(--transition);
    }

    main.profileMain aside .asideNavArea .asideNavMoreArea.active{
      opacity: 1;
      filter: blur(0);
      visibility: visible;
      transform: translateY(0);
    }
    
    main.profileMain aside .asideNavArea .asideNavMoreArea button{
      border-radius: 0;
      padding-block: .7em;
    }



    main.profileMain section.profilSection{
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: start;
      padding: 2em;
      gap: 2em;
      max-height: 100vh;
      max-height: 100dvh;
      overflow: auto;
    }

    main.profileMain section.profilSection .profileSectionHeader .profileSectionHeaderUserInfo img{
      width: 2.5em;
      aspect-ratio: 1/1;
      object-fit: cover;
    }

    
    main.profileMain section.profilSection .profileSectionHeader .profileSectionHeaderUserInfo .profileSectionHeaderUserInfoTxtArea{
      line-height: 1.1;
    }

    
    main.profileMain section.profilSection .profileSectionHeader .profileSectionHeaderUserInfo .profileSectionHeaderUserInfoTxtArea span p{
      color: var(--clr-gray-dark);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    main.profileMain section.profilSection .profileSectionHeader .profileSectionHeaderUserInfo .profileSectionHeaderUserInfoTxtArea h6{ line-height: 1.3;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    main.profileMain section.profilSection .profileContainer{
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      background-color: var(--clr-pure-light);
      border-radius: var(--btn-border-radius-lg);
      padding: .85em 1.2em;
      padding-bottom: 0;
      color: var(--clr-gray-darker);
      gap: 1em;
      box-shadow: var(--profileBoxShadow);
    }

    
    main.profileMain section.profilSection .profileContainer .line-x{
      height: 1px;
      background-color: var(--clr-gray-darker);
      opacity: .1;
    }
    
    main.profileMain section.profilSection .profileContainer .profileContainerHeader{
      min-height: 3em;
    }
    
    main.profileMain section.profilSection .profileContainer .profileContainerHeader img{
      width: 1.4em;
    }

    main.profileMain section.profilSection .profileContainer .profileContainerHeader .profileContainerHeaderTitle{
      gap: .6em;
    }
    
    main.profileMain section.profilSection .profileContainer h6{
      font-weight: var(--fw-regular);
    }

    main.profileMain section.profilSection .profileContainer .profileUIBlock {
      display: grid;
      place-items: center;
      gap: 1em;
      max-height: 300px;
      overflow: auto;
      user-select: none;
      cursor: grab;
  }

  main.profileMain section.profilSection .profileContainer .profileUIBlock.active {
    cursor: grabbing !important;
}
  
  /* Scrollbar desteği varsa */
  @supports (scrollbar-color: red blue) {
      main.profileMain section.profilSection .profileContainer .profileUIBlock {
          scrollbar-color: transparent transparent;
          scrollbar-width: thin;
      }
  }
  
  main.profileMain section.profilSection .profileContainer .profileUIStats{
    --fs-main: clamp(1em, 2vw, 1.2em);
    --fs-xs: clamp(0.5em, 1.2vw, 0.6em);
  }

  main.profileMain section.profilSection .profileContainer .profileUIBlock img{
    width: 3em;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: var(--btn-border-radius-pill);
  }

  main.profileMain section.profilSection .profileContainer .profileUIStats small{
    font-size: var(--fs-xs);
    opacity: .8;
  }

  main.profileMain section.profilSection .profileContainer .profileUIStats p{
    font-size: var(--fs-main);
    font-weight: var(--fw-medium);
  }

  main.profileMain section.profilSection .profileContainer .profileUIBlock_Leaderboard img{
    width: 2em;
  }
  
  main.profileMain section.profilSection .profileContainer .profileUIBlock_Leaderboard h6{
    --fs-h6: clamp(1em, 2.5vw, 1.2em);
  }




  main.quizMain{
    min-height: 100vh;
    min-height: 100dvh;
    background-color: var(--clr-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  
  main.quizMain section{
    position: relative;
    padding: 0;
  }

  main.quizMain .quizTime{
    --fs-sm: clamp(1em, 2vw, 1.3em);
    font-size: var(--fs-sm);
  }

  main.quizMain section img.mascot{
    width: 10em;
    position: absolute;
    top: -35%;
  }

  main.quizMain section .questBlock{
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    z-index: 5;
    background-color: var(--clr-pure-light);
    padding: 4em ;
    padding-top: 2em;
    display: flex;
    flex-direction: column;
    gap: 5em;
    box-shadow: 0 0 25px 1px var(--clr-primary-100);
  }

  main.quizMain section .questBlock .answerButtonsGrid{
    grid-template-columns: repeat(2, 1fr);
    gap: .5em;
    margin-block: 1em 2em;
  }

  @media screen and (max-width: 810px){
    main.quizMain section .questBlock .answerButtonsGrid{
      grid-template-columns: repeat(1, 1fr);
    }
    
  main.quizMain section img.mascot{
    display: none;
  }
    
  }

  @media screen and (max-width: 550px){
    main.quizMain .questAreaHeader{
      padding: 1em;
    }

    main.quizMain section .questBlock{
      border-top-left-radius: 50px;
      border-top-right-radius: 50px;
      padding: 1em ;
      padding-top: 2em;
      gap: 5em;
      gap: 3em;
    }
    
  main.quizMain section .questBlock .progressBar{
    padding: 1em 2em 0 2em;
  }

    main.quizMain section .questBlock .answerButtonsGrid,
    main.quizMain section .questBlock .answerButtonsGrid button{
      width: 100%;
    }
  }

  main.quizMain section .questBlock .answerButtonsGrid button{
    white-space: nowrap;
  }

  main.quizMain section .questBlock .questionContainer {
    gap: 1em;
  }

  main.quizMain section .questBlock .progressBar{
    gap: 1em;
  }
  
  main.quizMain section .questBlock .progressBar .bar{
    background-color: var(--clr-primary);
    width: 100%;
    height: 3px;
    border-radius: 100vw;
  }

  main.profileMain section.profilSection .profileContainer .profileUIBlock_quizList{
    max-height: 450px !important;
  }