/* fonts */

/* vietnamese */
@font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
      U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
      U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
      U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2)
      format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* vietnamese */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
      U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
      U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
      U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2)
      format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* vietnamese */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
      U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
      U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
      U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2)
      format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* vietnamese */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
      U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
      U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
      U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2)
      format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  /* vietnamese */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNJfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
      U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329,
      U+1EA0-1EF9, U+20AB;
  }
  /* latin-ext */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNIfJ7Cww.woff2)
      format("woff2");
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF,
      U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }
  /* latin */
  @font-face {
    font-family: "Public Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/publicsans/v15/ijwRs572Xtc6ZYQws9YVwnNGfJ4.woff2)
      format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
      U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
      U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

:root {
    --page-color: #fff;
    --page-color-rgb: 255, 255, 255;
    --title-color: #333333;
    --title-color-rgb: 51, 51, 51;
    --text-color: #555555;
    --text-color-rgb: 85, 85, 85;
    --subtext-color: #777777;
    --subtext-color-rgb: 119, 119, 119;
    --white-text-color: #ffffff;
    --white-text-color-rgb: 255, 255, 255;
    --white2-text-color: #ededed;
    --white2-text-color-rgb: 237, 237, 237;
    --black-text-color: #000000;
    --black-text-color-rgb: 0, 0, 0;
    --primary-color: #228B22;
    --primary-color-rgb: 34, 139, 34;
    --secondary-color: #32CD32;       /* Lime Green */
    --secondary-color-rgb: 50, 205, 50;
    --tertiary-color: #f5b500;
    --tertiary-color-rgb: 245, 181, 0;
    --fourth-color: #e89f23;
    --fourth-color-rgb: 232, 159, 35;
    --fifth-color: #f4a300;
    --fifth-color-rgb: 244, 163, 0;
    --blue-primary-color: #007bff;
    --blue-primary-color-rgb: 0, 123, 255;
    --blue-secondary-color: #0056b3;
    --blue-secondary-color-rgb: 0, 86, 179;
    --green-primary-color: #32a852;
    --green-primary-color-rgb: 50, 168, 82;
    --green-secondary-color: #2d6a4f;
    --green-secondary-color-rgb: 45, 106, 79;
    --orange-primary-color: #f3c614;
    --orange-primary-color-rgb: 243, 198, 20;
    --orange-secondary-color: #D98721;
    --orange-secondary-color-rgb: 217, 135, 33;
    --red-primary-color: #dc3545;
    --red-primary-color-rgb: 220, 53, 69;
    --red-secondary-color: #bd2130;
    --red-secondary-color-rgb: 189, 33, 48;
    --purple-primary-color: #6f42c1;
    --purple-primary-color-rgb: 111, 66, 193;
    --purple-secondary-color: #5a32a8;
    --purple-secondary-color-rgb: 90, 50, 168;
    --yellow-primary-color: #ffc107;
    --yellow-primary-color-rgb: 255, 193, 7;
    --yellow-secondary-color: #d39e00;
    --yellow-secondary-color-rgb: 211, 158, 0;
    --border-color: #e0e0e0;
    --border-color-rgb: 224, 224, 224;
    --dark-color: #1f1f1f;
    --dark-color-rgb: 31, 31, 31;
       /* Neutral colors */
       --neutral-n00: #ffffff;
       --neutral-n10: #f8f9fa;
       --neutral-n20: #f5f5f5;
       --neutral-n30: #f1f3f5;
       --neutral-n40: #e9ecef;
       --neutral-n50: #dee2e6;
       --neutral-n60: #ececec;
       --neutral-n70: #e0e0e0;
       --neutral-n80: #d7d7d7;
       --neutral-n90: #ced4da;
       --neutral-n100: #c7c7c7;
       --neutral-n120: #b5b5b5;
       --neutral-n140: #a5a5a5;
       --neutral-n150: #8f8f8f;
       --neutral-n160: #6c6c6c;
       --neutral-n170: #4f4f4f;
       --neutral-n180: #333333;
       --neutral-n190: #212529;
       --neutral-n200: #16181b;
       --neutral-n210: #0d0d0d;
       --neutral-n230: #000000;
       /* Neutral colors (RGB) */
       --neutral-n00-rgb: 255, 255, 255;
       --neutral-n10-rgb: 248, 249, 250;
       --neutral-n20-rgb: 245, 245, 245;
       --neutral-n30-rgb: 241, 243, 245;
       --neutral-n40-rgb: 233, 236, 239;
       --neutral-n50-rgb: 222, 226, 230;
       --neutral-n60-rgb: 236, 236, 236;
       --neutral-n70-rgb: 224, 224, 224;
       --neutral-n80-rgb: 215, 215, 215;
       --neutral-n90-rgb: 206, 212, 218;
       --neutral-n100-rgb: 199, 199, 199;
       --neutral-n120-rgb: 181, 181, 181;
       --neutral-n140-rgb: 165, 165, 165;
       --neutral-n150-rgb: 143, 143, 143;
       --neutral-n160-rgb: 108, 108, 108;
       --neutral-n170-rgb: 79, 79, 79;
       --neutral-n180-rgb: 51, 51, 51;
       --neutral-n190-rgb: 33, 37, 41;
       --neutral-n200-rgb: 22, 24, 27;
       --neutral-n210-rgb: 13, 13, 13;
       --neutral-n230-rgb: 0, 0, 0;
       /* Text colors modern */
       --title-color: #212529;
       --text-color-dark: #333333;
       --text-color-medium: #505458;
       --text-color-light: #6c757d;
       --text-color-muted: #adb5bd;
       --text-color-lighter: #ced4da;
       --text-color-white: #ffffff;
       --text-color-black: #000000;
       --text-color-n00: #ffffff;
       --text-color-n10: #f8f9fa;
       --text-color-n20: #dbdbeb;
       --text-color-n30: #c7c7c7;
       --text-color-n40: #b5b5b5;
       --text-color-n50: #8f8f8f;
       --text-color-n60: #6c6c6c;
       --text-color-n70: #4f4f4f;
       --text-color-n80: #333333;
       --text-color-n90: #212529;
       --text-color-n100: #16181b;
       --text-color-n120: #0d0d0d;
       --text-color-n140: #000000;
       /* Text colors modern (RGB) */
       --title-color-rgb: 33, 37, 41;
       --text-color-dark-rgb: 51, 51, 51;
       --text-color-light-rgb: 108, 117, 125;
       --text-color-muted-rgb: 173, 181, 189;
       --text-color-lighter-rgb: 206, 212, 218;
       --text-color-white-rgb: 255, 255, 255;
       --text-color-black-rgb: 0, 0, 0;
       --text-color-n00-rgb: 255, 255, 255;
       --text-color-n10-rgb: 248, 249, 250;
       --text-color-n20-rgb: 219, 219, 235;
       --text-color-n30-rgb: 199, 199, 199;
       --text-color-n40-rgb: 181, 181, 181;
       --text-color-n50-rgb: 143, 143, 143;
       --text-color-n60-rgb: 108, 108, 108;
       --text-color-n70-rgb: 79, 79, 79;
       --text-color-n80-rgb: 51, 51, 51;
       --text-color-n90-rgb: 33, 37, 41;
       --text-color-n100-rgb: 22, 24, 27;
       --text-color-n120-rgb: 13, 13, 13;
       --text-color-n140-rgb: 0, 0, 0;
       /* Other Colors RGB */
       --other-c-error-color: 220, 53, 69;
       --other-c-success-color: 40, 167, 69;
       --other-c-warning-color: 255, 193, 7;
       --other-c-info-color: 23, 162, 184;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Public Sans", sans-serif;
    transition: all 0.1s ease-in-out;
  }
  
  body {
      background: var(--page-color);
      color: var(--text-color);
      transition: all 0.1s ease-in-out;
      overflow-x: hidden;
  }

#page {
    color: var(--text-color);
    transition: all 0.1s ease-in-out;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  
  input,
  textarea,
  button,
  select,
  a,
  div,
  span {
    -webkit-tap-highlight-color: transparent;
  }

  ::-webkit-scrollbar {
    width: 0;  
    background: transparent; 
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
}
  
  .header {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 130px;
    z-index: 500;
    background: var(--page-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  @media screen and (max-width: 850px) {
    .header {
        height: 80px;
    }
  }

  @media screen and (max-width: 450px) {
    .header {
        height: 120px;
    }
  }

  .navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 503;
    background: var(--page-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  @media screen and (max-width: 850px) {
    .navbar {
        padding: 1rem 1rem;
    }
  }

  @media screen and (max-width: 450px) {
    .navbar {
        height: 120px;
        padding: 0.5rem 0.5rem;
    }
  }

  .navbar__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    width: 100%;
  }

  @media screen and (max-width: 450px) {
    .navbar__container {
        align-items: flex-start;
    }
  }

  .navbar__logo {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  @media screen and (max-width: 850px) {
    .navbar__logo {
        margin-left: 0;
    }
  }

  @media screen and (max-width: 450px) {
    .navbar__logo {
        margin-left: 0;
        margin-top: 10px;
    }
  }

    .navbar__logo a {
        display: flex;
        align-items: center;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--text-color);
        text-decoration: none;
    }

    .navbar__logo a img {
        height: 2rem;
        margin-right: 0.5rem;
    }

    .header__category {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        width: 100%;
        height: 100%;
        z-index: 501;
        background: var(--page-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    @media screen and (max-width: 850px) {
        .header__category {
            display: none;
        }
    }

    .header__category_header {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 3px;
        width: 100%;
        height: 50px;
        background: var(--neutral-n10);
    }

    .header__category__item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        padding: 0.5rem 1rem;
        height: 100%;
        cursor: pointer;
    }

    .header__category__item:hover {
        border-radius: 2px;
        border-bottom: 2px solid var(--primary-color);
        transition: all 0.1s ease-in-out;
    }

    .header__category__item:hover a {
        color: var(--primary-color);
    }

    .header__category__item::after {
        content: "";
        position: absolute;
        top: 25%;
        right: -2px;
        width: 1px;
        height: 50%;
        background: rgba(var(--text-color-rgb), 0.1);
    }

    .header__category__item:last-child::after {
        display: none;
    }

    .header__category__item a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
        color: var(--text-color);
        text-decoration: none;
        text-align: center;
    }

    .navbar__searchBoxMenu {
        display: none;
        position: absolute;
        top: 60px;
        min-width: 680px;
        min-height: 200px;
        border-radius: 0 0 10px 10px;
        background: var(--page-color);
        z-index: 505;
    }

    .navbar__searchBoxMenu.active {
        display: flex;
        border-left: 2px solid var(--primary-color);
        border-right: 2px solid var(--primary-color);
        border-bottom: 2px solid var(--primary-color);
    }

    .searchBoxMenu__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 1rem;
    }

    .searchBoxMenu__content_header {
        display: flex;
        flex-direction: row;
        gap: 1rem;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        background: var(--page-color);
    }

    .searchBoxMenu__content_header_clear {
        display: none;
        align-items: flex-end !important;
        justify-content: flex-end !important;
        font-size: 12px !important;
        font-weight: 700;
        color: var(--primary-color) !important;
        cursor: pointer;
    }

    .searchBoxMenu__content_header_clear.active {
        display: flex;
    }

    .searchBoxMenu__content_history {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 1rem 0;
        background: var(--page-color);
    }

    .searchBoxMenu__content_history ul {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        height: 100%;
    }

    .searchBoxMenu__content_history ul li {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background: rgba(var(--page-color-rgb), 1);
        padding: 0.5rem 0.25rem;
        border-radius: 8px;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    .searchBoxMenu__content_history ul li:hover {
        background: rgba(var(--text-color-rgb), 0.05);
    }

    .searchBoxMenu__content_history ul li a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
        text-decoration: none;
    }
    
    .searchBoxMenu__content_history ul li svg {
        display: none;
        width: 16px;
        height: 16px;
        margin-left: 5px;
        color: var(--subtext-color);
    }

    .searchBoxMenu__content_history ul li:hover svg {
        display: flex;
    }

    .searchBoxMenu__content_history ul li svg:hover {
        color: var(--primary-color);
    }

    .searchBoxMenu__content_popular {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 1rem 0;
        background: var(--page-color);
    }

    .searchBoxMenu__content_popular ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 5px;
        width: 100%;
        height: 100%;
    }

    .searchBoxMenu__content_popular ul li {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(var(--text-color-rgb), 0.05);
        padding: 0.5rem 0.5rem;
        border-radius: 8px;
        width: fit-content;
        height: fit-content;
        cursor: pointer;
    }

    .searchBoxMenu__content_popular ul li a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
        text-decoration: none;
    }
    

    .navbar__searchBox.menuActive {
        border-radius: 10px 10px 0 0;
    }

    .navbar__searchBox {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        min-width: 680px;
        background: var(--page-color);
        border-radius: 10px 25px 25px 10px;
        border: 2px solid rgba(var(--text-color-rgb), 0.1);
    }

    @media screen and (max-width: 1300px) {
        .navbar__searchBox {
            min-width: 500px;
        }
    }

    @media screen and (max-width: 1100px) {
        .navbar__searchBox {
            min-width: 400px;
        }
    }

    @media screen and (max-width: 950px) {
        .navbar__searchBox {
            min-width: 300px;
        }
    }

    @media screen and (max-width: 900px) {
        .navbar__searchBox {
            min-width: 200px;
        }
    }

    @media screen and (max-width: 850px) {
        .navbar__searchBox {
          min-width: 0;
          width: 95% !important;
          border-radius: 25px;
        }
    }

    @media screen and (max-width: 450px) {
        .navbar__searchBox {
          position: absolute;
          bottom: 5px;
        }
    }

    .navbar__searchBox.active {
        border: 2px solid var(--primary-color);
        box-shadow: 0 4px 8px rgba(var(--primary-color-rgb), 0.2);
    }

    .navbar__searchBox_wrapper {
        display: flex;
        align-items: center;
        width: 98%;
        margin-right: 5px;
        height: 36px;
        background: var(--page-color);
    }

    @media screen and (max-width: 1300px) {
        .navbar__searchBox_wrapper {
            width: 97%;
        }
    }

    @media screen and (max-width: 1100px) {
        .navbar__searchBox_wrapper {
            width: 96%;
        }
    }

    @media screen and (max-width: 950px) {
        .navbar__searchBox_wrapper {
            width: 95%;
        }
    }

    @media screen and (max-width: 850px) {
        .navbar__searchBox_wrapper {
            width: 90%;
            margin-right: 0;
        }
    }

    .navbar__searchBox_wrapper input {
        width: 100%;
        height: 100%;
        padding: 0.5rem 1rem;
        border: none;
        border-radius: 2px;
        font-size: 14px;
        font-weight: 400;
        color: var(--text-color);
        outline: none;
    }

    @media screen and (max-width: 850px) {
        .navbar__searchBox_wrapper input {
            padding: 0.5rem 0.5rem 0.5rem 0;
        }
    }

    .navbar__searchBox_wrapper input::placeholder {
        color: var(--subtext-color);
    }

    .navbar__searchBox_wrapper .deleteIcon_container {
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;
        max-height: 24px;
        border-radius: 50%;
        background: rgba(var(--text-color-rgb), 0.1);
        cursor: pointer;
        margin-right: 5px;
    }

    .deleteIcon_container.active {
        display: flex;
    }

    .deleteIcon_container .deleteIcon {
        width: 16px;
        height: 16px;
        color: var(--text-color);
    }

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

    .navbar__searchBox_wrapper .searchIcon {
        min-width: 22px;
        min-height: 22px;
        max-width: 22px;
        max-height: 22px;
        color: var(--text-color);
    }

    .navbar__searchBox_wrapper .searchIcon.active {
        color: rgba(var(--primary-color-rgb), 1);
    }

    .navbar__Menus {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: fit-content;
        height: 100%;
        margin-left: 75px;
        gap: 1rem;
    }

    @media screen and (max-width: 1440px) {
        .navbar__Menus {
            margin-left: 60px;
        }
    }

    @media screen and (max-width: 1400px) {
        .navbar__Menus {
            margin-left: 50px;
        }
    }

    @media screen and (max-width: 1330px) {
        .navbar__Menus {
            margin-left: 40px;
        }
    }

    @media screen and (max-width: 1100px) {
        .navbar__Menus {
          margin-left: 30px;
        }
    }

    @media screen and (max-width: 850px) {
        .navbar__Menus {
            margin-left: 5px;
        }
    }

    @media screen and (max-width: 450px) {
        .navbar__Menus {
            align-items: flex-start;
            height: 50px;
        }
    }

    .navbar__locationContainer {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 50px;
        min-width: 125px;
        max-width: 140px;
        background: rgba(var(--page-color-rgb), 1);
        cursor: pointer;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.1s ease-in-out;
    }

    @media screen and (max-width: 850px) {
        .navbar__locationContainer {
            display: none;
        }
    }

    .navbar__locationContainer:hover {
        background: rgba(var(--text-color-rgb), 0.05);
        transition: all 0.1s ease-in-out;
    }


    .navbar__location svg {
        font-size: 18px;
        color: var(--text-color);
    }

    .navbar__location_texts {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 100%;
      height: 100%;
      padding: 0 10px 0 0;
      box-sizing: border-box; 
      overflow: hidden;
  }
  
  .navbar__location_texts_header {
      font-size: 12px;
      font-weight: 700;
      color: var(--text-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  
  .navbar__location_texts_content {
      font-size: 12px;
      font-weight: 500;
      color: var(--subtext-color);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  

    .navbar__accountContainer {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 50px;
        min-width: 125px;
        max-width: 130px;
        background: rgba(var(--page-color-rgb), 1);
        cursor: pointer;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.1s ease-in-out;
    }

    @media screen and (max-width: 850px) {
        .navbar__accountContainer {
          min-width: 50px;
          max-width: 50px;
        }
    }

    .navbar__accountContainer:hover {
        background: rgba(var(--text-color-rgb), 0.05);
        transition: all 0.1s ease-in-out;
    }

    .navbar__accountLogo {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 50px;
        max-width: 50px;
        min-height: 40px;
        max-height: 40px;
    } 

    .navbar__accountLogo_logoContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        max-width: 40px;
        min-height: 40px;
        max-height: 40px;
        border-radius: 50%;
        background: rgba(var(--primary-color-rgb), 0.1);
        border: 2px solid var(--border-color);
        overflow: hidden;
    }

    .navbar__accountLogo_logoContainer svg {
        font-size: 18px;
        color: var(--primary-color);
    }

    .navbar__accountLogo_logoContainer_letter {
        font-size: 18px;
        font-weight: 700;
        color: var(--primary-color);
        user-select: none;
    }

    .navbar__account_texts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0.5rem 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    @media screen and (max-width: 850px) {
      .navbar__account_texts {
          display: none;
      }
  }

    .navbar__account_texts_header {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;   
        overflow: hidden;  
        text-overflow: ellipsis;  
    }

    .navbar__account_texts_content {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        white-space: nowrap;   
        overflow: hidden;  
        text-overflow: ellipsis;  
    }

    .navbar__cartContainer {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 50px;
        width: 50px;
        background: rgba(var(--page-color-rgb), 1);
        cursor: pointer;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.1s ease-in-out;
    }

    .navbar__cartContainer:hover {
        background: rgba(var(--text-color-rgb), 0.05);
        transition: all 0.1s ease-in-out;
    }

    .navbar__cartLogo {
      position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 50px;
        max-width: 50px;
        min-height: 40px;
        max-height: 40px;
    }

    .navbar__cartLogo_count {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 16px;
        max-width: 16px;
        min-height: 16px;
        max-height: 16px;
        border-radius: 50%;
        background: var(--primary-color);
        color: var(--white-text-color);
        font-size: 10px;
        font-weight: 700;
        position: absolute;
        top: 0;
        right: 0;
        transform: translate(-15%, 15%);
    }

    .navbar__cartLogo svg {
        font-size: 18px;
        color: var(--text-color);
    }

    .navbar__menuIcon {
        display: none;
        align-items: center;
        justify-content: center;
        min-width: 50px;
        max-width: 50px;
        min-height: 40px;
        max-height: 40px;
        cursor: pointer;
    }

    .navbar__menuIcon svg {
        width: 24px;
        height: 24px;
        color: var(--text-color);
    }

    @media screen and (max-width: 850px) {
        .navbar__menuIcon {
            display: flex;
        }
    }

    @media screen and (max-width: 450px) {
        .navbar__menuIcon {
          min-height: 50px;
          max-height: 50px;
          height: 50px;
        }
    }

    .page__menus {
        display: none;
        position: fixed;
        top: 82px;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 499;
        overflow: hidden;
    }

    .page__menus.active {
      display: block;
      z-index: 507;
    }

    .mobile_menu {
        position: fixed;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 300px;
        height: 100%;
        background: var(--page-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transform: translateX(-100%);
        transition: all 0.3s ease-in-out;
        z-index: 508;
        padding-bottom: 1rem;
    }

    @media screen and (max-width: 450px) {
        .mobile_menu {
            top: 122px;
        }
    }

    @media screen and (max-width: 320px) {
        .mobile_menu {
            width: 90%;
        }
    }

    .mobile_menu.active {
        transform: translateX(0);
        transition: all 0.3s ease-in-out;
    }

    .mobile_menu__controller {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        margin-bottom: 100px;
    }

    .mobile_menu__list {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 1rem 0.5rem;
    }

    .mobile_menu__list_item {
      position: relative;
        display: flex;
        justify-content: flex-start;
        width: 90%;
        height: 45px;
        padding: 0 0.50rem;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
    }

    .mobile_menu__list_item:hover {
        background: rgba(var(--text-color-rgb), 0.05);
    }

    .mobile_menu__list_item_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        max-width: 40px;
        min-height: 45px;
        max-height: 45px;
    }

    .mobile_menu__list_item_icon svg {
        width: 24px;
        height: 24px;
        color: var(--text-color);
    }

    .mobile_menu__list_item_text {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 0 0.25rem;
    }

    .mobile_menu__list_item_text a {
        margin-right: 50px;
        font-size: 14px;
        font-weight: 700;
        color: var(--text-color);
        text-decoration: none;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.2em * 2); 
        word-break: break-all;
        hyphens: auto; 
        line-height: 1.2em; 
    }

    .mobile_menu__list_item_text i {
        position: absolute;
        width: 14px;
        height: 14px;
        right: 40px;
        color: var(--text-color);
    }

    .mobile_menu__list_item_texts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 0.25rem;
    }

    .mobile_menu__list_item_texts_header {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-color);
        text-decoration: none;
    }

    .mobile_menu__list_item_texts_content {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        text-decoration: none;
    }

    .mobile_menu__list_category_list {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 0 0.5rem;
    }

    .mobile_menu__list_category_list.active {
        display: flex;
    }

    .mobile_menu__list_category_list_item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 90%;
        height: 45px;
        padding: 0 0.25rem;
        border-radius: 8px;
        cursor: pointer;
    }

    .mobile_menu__list_category_list_item:hover {
        background: rgba(var(--text-color-rgb), 0.05);
    }

    .mobile_menu__list_category_list_item a {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-color);
        text-decoration: none;
    }

    .mobile_menu__list_category_list_item_divider {
      display: block;
      flex: 1 1 100%;
      height: 1px;
      max-height: 1px;
      width: 100%;
      transition: inherit;
      border-style: solid;
      border-width: thin 0 0 0;
      border-color: rgba(var(--text-color-rgb), 1);
      opacity: 0.12;
    }

    .navbar__locationContainer_texts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 0.25rem;
        box-sizing: border-box; 
        overflow: hidden;
    }

    .navbar__locationContainer_texts_header {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
    }
    
    .navbar__locationContainer_texts_content {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
    }

    .mobile_menu__list_title_item {
        display: flex;
        justify-content: flex-start;
        width: 90%;
        height: fit-content;
        padding: 0.50rem 1rem 0 0.50rem;
        border-radius: 8px;
        cursor: pointer;
        box-sizing: border-box; 
        overflow: hidden;
    }

    .mobile_menu__list_title_item a {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
        text-decoration: none;
        text-transform: uppercase;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
    }

    .navbar__classic_menu {
        display: none;
        position: fixed;
        top: 60px;
        right: 0;
        width: 300px;
        padding: 0 0 1rem 0;
        z-index: 506;
        background: var(--page-color);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    @media screen and (max-width: 450px) {
        .navbar__classic_menu {
            width: 80%;
        }
    }

    @media screen and (max-width: 320px) {
        .navbar__classic_menu {
            width: 90%;
        }
    }

    .navbar__classic_menu.active {
        display: flex;
        z-index: 507;
    }

    .navbar__classic_menu__content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0.5rem 0.25rem;
        width: 100%;
        height: 100%;
    }

    .navbar__classic_menu__account_item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 0.5rem 1rem;
        border-radius: 8px;
        cursor: pointer;
        margin-bottom: 5px;
    }

    .navbar__classic_menu__account_item:hover {
        background: rgba(var(--text-color-rgb), 0.05);
    }

    .navbar__classic_menu__account_item_logo {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        max-width: 36px;
        min-height: 36px;
        max-height: 36px;
        border-radius: 50%;
        background: rgba(var(--primary-color-rgb), 0.1);
        border: 2px solid var(--border-color);
        overflow: hidden;
    }

    .navbar__classic_menu__account_item_logo svg {
        font-size: 14px;
        color: var(--primary-color);
    }

    .navbar__classic_menu__account_item_logo_letter {
        font-size: 15px;
        font-weight: 700;
        color: var(--primary-color);
        user-select: none;
    }

    .navbar__classic_menu__account_item_texts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0 0.25rem;
        box-sizing: border-box; 
        overflow: hidden;
    }

    .navbar__classic_menu__account_item_texts_header {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar__classic_menu__account_item_texts_content {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .navbar__classic_menu__list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
        height: fit-content;
        padding: 0 1rem;
    }

    .navbar__classic_menu__list_divider {
        display: block;
        flex: 1 1 100%;
        height: 1px;
        max-height: 1px;
        width: 100%;
        transition: inherit;
        border-style: solid;
        border-width: thin 0 0 0;
        border-color: rgba(var(--text-color-rgb), 1);
        opacity: 0.12;
    }

    .navbar__classic_menu__list li {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 0 0.50rem;
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
    }

    .navbar__classic_menu__list li a {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color);
        text-decoration: none;
    }

    .navbar__classic_menu__list li:hover a {
        color: rgba(var(--text-color-rgb), 0.7);
    }

    .navbar__classic_menu__locationContainer {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 0 1rem;
        margin-bottom: 10px;
    }

    .navbar__classic_menu__locationContainer_texts {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        height: fit-content;
        padding: 0 0.25rem;
        box-sizing: border-box; 
        overflow: hidden;
        margin-bottom: 10px;
    }

    .navbar__classic_menu__locationContainer_texts_title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin-bottom: 10px;
    }

    .navbar__classic_menu__locationContainer_texts_content {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }

    .navbar__classic_menu__locationContainer_button_container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: fit-content;
    }

    .navbar__classic_menu__locationContainer_button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 80%;
        height: 38px;
        padding: 0 0.25rem;
        border-radius: 8px;
        cursor: pointer;
        border: none;
        background: rgba(var(--fifth-color-rgb), 0.9);
    }

    .navbar__classic_menu__locationContainer_button:hover {
        background: rgba(var(--fifth-color-rgb), 1);
    }

    .navbar__classic_menu__locationContainer_button a {
        font-size: 16px;
        font-weight: 700;
        color: var(--white-text-color);
        text-decoration: none;
    }

      .navbar__classic_menu__locationContainerSellect {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 0 1rem;
        margin-bottom: 10px;
        margin-top: 10px;
      }

      .navbar__classic_menu__locationContainerSellect_text {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: fit-content;
        padding: 0 0.25rem;
        box-sizing: border-box; 
        overflow: hidden;
        margin-bottom: 10px;
      }

      .navbar__classic_menu__locationContainerSellect_text a {
        text-decoration: none;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

    .navbar__classic_menu__locationContainerSellect_list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        gap: 5px;
        margin-bottom: 10px;
    }

    .navbar__classic_menu__locationContainerSellect_list_item {
        display: flex;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 0.25rem 0;
        border: 2px solid var(--border-color);
        border-radius: 8px;
        cursor: pointer;
        overflow: hidden;
    }

    .navbar__classic_menu__locationContainerSellect_list_item.active {
        border: 2px solid var(--primary-color);
    }

    .navbar__classic_menu__locationContainerSellect_list_item:hover {
        background: rgba(var(--text-color-rgb), 0.05);
    }

    .navbar__classic_menu__locationContainerSellect_list_item_texts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 80%;
        height: 100%;
        padding: 0 0.25rem;
        box-sizing: border-box; 
        overflow: hidden;
    }

    .navbar__classic_menu__locationContainerSellect_list_item_title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .navbar__classic_menu__locationContainerSellect_list_item_content {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.2em * 2); 
        word-break: break-all;
        hyphens: auto; 
        line-height: 1.2em; 
    }

    .navbar__classic_menu__locationContainerSellect_list_item_sellectBoxContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 100%;
        box-sizing: border-box; 
        overflow: hidden;
        z-index: 999;
    }

    .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_label {
      display: flex;
      position: relative;
      width: 50%;
      height: 100%;
      align-items: center;
      justify-content: center;
      font-size: 15px;
      color: var(--title-color);
      font-weight: 600;
      cursor: pointer;
      text-transform: uppercase;
      transition: all 0.3s ease;
    }

    .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_custom {
      position: absolute;
      width: 15px;
      height: 15px;
      margin-left: 5px;
      border-radius: 50%;
      border: 2px solid rgba(var(--primary-color-rgb), 1);
      transition: all 0.3s ease;
      align-items: center;
      justify-content: center;
    }

    .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_input:checked + .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_label .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_custom {
        background-color: rgba(var(--primary-color-rgb), 1);
        border-color: transparent;
        transform: scale(0.8);
        box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 1);
    }

    .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_input:checked + .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_label {
        color: var(--primary-color);
    }

    .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_label:hover .navbar__classic_menu__locationContainerSellect_list_item_sellectBox_custom {
        transform: scale(1.1);
        border-color: rgba(var(--primary-color-rgb), 1);
        box-shadow: 0 0 10px rgba(var(--primary-color-rgb), 1);
    }

    .page__content {
        position: relative;
        display: block;
        max-width: 100%;
    }

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

    .page__bannerContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: fit-content;
        padding: 10px;
        position: relative;
    }

    @media screen and (max-width: 748px) {
        .page__bannerContainer {
            padding: 10px 0;
        }
    }
    
    .page__bannerContainerBoxs {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1180px;
        height: fit-content;
        max-height: 400px;
        min-height: 400px;
        overflow: hidden;
        position: relative;
    }

    @media screen and (max-width: 1300px) {
        .page__bannerContainerBoxs {
            width: 100%;
        }
    }

    @media screen and (max-width: 748px) {
        .page__bannerContainerBoxs {
            max-height: unset;
            min-height: unset;
        }
    }

    @media screen and (max-width: 450px) {
        .page__bannerContainerBoxs {
            max-height: unset;
            min-height: unset;
        }
    }
    
    .page__bannerContainer_box {
        position: relative;
        width: 100%;
        height: auto;
        opacity: 0;
        transition: opacity 0.5s ease;
        display: none;
    }

    .page__bannerContainer_box.block {
        display: block;
    }
    
    .page__bannerContainer_box.active {
        opacity: 1;
        z-index: 1;
    }

    .page__bannerContainer_box_countContainer {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 15px;
        right: 50px;
        padding: 4px 7px;
        opacity: .75;
        border-radius: 12px;
        background-color: var(--dark-color);
        font-size: 10px;
        font-weight: 600;
        color: var(--white2-text-color);
        overflow: hidden;
        z-index: 6;
    }

    @media screen and (max-width: 748px) {
        .page__bannerContainer_box_countContainer {
            top: 10px;
            right: 20px;
        }
    }

    .slider {
        position: relative;
        display: flex;
        overflow: hidden;
        width: 1180px;
        height: 100%;
        scroll-behavior: smooth;
    } 

    @media screen and (max-width: 748px) {
        .slider {
            min-width: 95%;
            width: 95%;
        }
    }

    .page__bannerContainer_box_img {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
        z-index: 5;
    }

    .page__bannerContainer_box.loadingImage {
        background: rgba(var(--white2-text-color-rgb), 1) !important;
        opacity: 1 !important;
        min-height: 400px;
        max-height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 8px;
    }

    @media screen and (max-width: 748px) {
        .page__bannerContainer_box.loadingImage {
            min-height: 300px;
            max-height: 300px;
        }
    }

    @media screen and (max-width: 450px) {
        .page__bannerContainer_box.loadingImage {
            min-height: 200px;
            max-height: 200px;
        }
    }

    .page__bannerContainer_box.loadingImage .page__bannerContainer_box_img {
        display: none !important;
    }

    .page__bannerContainer_box.loadingImage::before {
        content: "LEDX";
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-color);
    }

    
    .page__bannerContainerBoxs_button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        max-width: 36px;
        min-height: 36px;
        max-height: 36px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        border: none;
        cursor: pointer;
        font-size: 18px;
        z-index: 11;    
        opacity: 0;
        visibility: hidden;
    }

    @media screen and (max-width: 748px) {
        .page__bannerContainerBoxs_button {
            display: none;
        }
    }

    .page__bannerContainerBoxs:hover .page__bannerContainerBoxs_button {
        opacity: 1;
        visibility: visible;
    }
    
    .page__bannerContainerBoxs_button.prev {
        left: 30px;
    }
    
    .page__bannerContainerBoxs_button.next {
        right: 30px;
    }

    .standart__product_slider {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        padding: 50px;
        position: relative;
    }

    @media screen and (max-width: 748px) {
        .standart__product_slider {
            padding: 50px 5px;
        }
    }

    .product_slider__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: fit-content;
        margin-bottom: 10px;
    }

    .product_slider__header_wrapper {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
    }

    .product_slider__header_title {
        font-size: 32px;
        font-weight: 700;
        color: var(--title-color);
    }

    @media screen and (max-width: 748px) {
        .product_slider__header_title {
            font-size: 24px;
        }
    }

    .product_slider__content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overflow: hidden;
    }

    .product_slider__content_list {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: stretch;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        gap: 10px;
        padding: 10px;
        border-radius: 8px;
        background: var(--page-color);
        transition: all 0.3s ease;
        overflow-x: auto;
        scroll-behavior: smooth;
    }

    @media screen and (max-width: 748px) {
        .product_slider__content_list {
            scroll-behavior: unset;
        }
    }

    .product_slider__content_list::-webkit-scrollbar {
        display: none;
    }

    
    
    .product_slider__content::before, 
    .product_slider__content::after {
        content: "";
        position: absolute;
        top: 0;
        width: 100px;
        height: 100%;
        pointer-events: none;
        z-index: 10;
        transition: opacity 0.3s ease;
        opacity: 0;
    }
    
    .product_slider__content::before {
        left: 0;
        background: linear-gradient(to right, rgba(255, 255, 255, 0.7), transparent);
    }
    
    .product_slider__content::after {
        right: 0;
        background: linear-gradient(to left, rgba(255, 255, 255, 0.7), transparent);
    }
    
    .product_slider__content.show-left::before {
        opacity: 1;
    }
    
    .product_slider__content.show-right::after {
        opacity: 1;
    }
    

    .product_slider__content_list_item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        min-width: 180px;
        max-width: 180px;
        height: 360px;
        max-height: 380px;
        overflow: hidden;
        box-sizing: border-box;
        transition: all 0.3s ease;
        text-decoration: none;
        cursor: pointer;
    }

    @media screen and (max-width: 748px) {
        .product_slider__content_list_item {
            width: 150px;
        }
    }

    .product_slider__content_list_item_special_tag {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 10px;
        right: 10px;
        padding: 2px 5px;
        min-height: fit-content;
        border-radius: 5px;
        background: rgba(var(--blue-secondary-color-rgb), 0.1);
        color: var(--blue-secondary-color);
        font-size: 10px;
        font-weight: 500;
        z-index: 10;
        letter-spacing: 0.5px;
    }
    
    .product_slider__content_list_item_special_tag.green {
        background: rgba(var(--green-primary-color-rgb), 0.1);
        color: var(--green-primary-color);
    }
    
    .product_slider__content_list_item_special_tag.red {
        background: rgba(var(--red-primary-color-rgb), 0.1);
        color: var(--red-primary-color);
    }
    
    .product_slider__content_list_item_special_tag.orange {
        background: rgba(var(--orange-primary-color-rgb), 0.1);
        color: var(--orange-primary-color);
    }
    
    .product_slider__content_list_item_special_tag.blue {
        background: rgba(var(--blue-primary-color-rgb), 0.1);
        color: var(--blue-primary-color);
    }
    
    @media screen and (max-width: 748px) {
        .product_slider__content_list_item {
            width: 150px;
        }
    }
    
    .product_slider__content_list_item_image {
        position: relative;
        box-sizing: border-box;
        display: flex;
        width: 100%;
        min-height: 180px;
        max-height: 180px;
        overflow: hidden;
        border-radius: 8px 8px 0 0;
    }

    .product_slider__content_list_item_image.loadingImage {
        background: rgba(var(--white2-text-color-rgb), 1);
    }

    .product_slider__content_list_item_image.loadingImage .product_slider__content_list_item_image_img {
        display: none;
    }

    .product_slider__content_list_item_image.loadingImage::before {
        content: "LEDX";
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        font-size: 24px;
        font-weight: 700;
        color: var(--text-color);
    }

    .product_slider__content_list_item_image .product_slider__content_list_item_image_img {
        min-width: 100%;
        min-height: 100%;
        object-fit: cover;
        user-select: none;  
        -webkit-user-drag: none; 
    }
    
    .product_slider__content_list_item_image_favorite_button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        min-height: 30px;
        max-width: 30px;
        max-height: 30px;
        position: relative;
        top: 10px;
        right: 40px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 0.1s ease;
    }
    
    .product_slider__content_list_item:hover .product_slider__content_list_item_image_favorite_button {
        opacity: 1;
        visibility: visible;
    }
    
    
    .product_slider__content_list_item_image_favorite_button .product_slider__content_list_item_image_favorite_button_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }
    
    .product_slider__content_list_item_image_favorite_button .product_slider__content_list_item_image_favorite_button_icon svg {
        width: 16px;
        height: 16px;
        color: var(--text-color);
    }
    
    .product_slider__content_list_item_image_favorite_button:hover {
        background: rgba(var(--white2-text-color-rgb), 1);
    }
    
    .product_slider__content_list_item_image_favorite_button.active {
        background: rgba(var(--white2-text-color-rgb), 1);
    }
    
    .product_slider__content_list_item_image_favorite_button .product_slider__content_list_item_image_favorite_button_icon.active {
        color: var(--primary-color);
    }
    
    .product_slider__content_list_item_details {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        height: 100%;
        padding: 10px;
    }
    
    .product_slider__content_list_item_details_tags {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        margin-bottom: 5px;
    }
    
    .product_slider__content_list_item_details_tags_item {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 90%;
        padding: 2px 5px;
        border-radius: 5px;
        background: rgba(var(--primary-color-rgb), 0.1);
        border-color: rgba(var(--primary-color-rgb), 0.5);
        border-style: solid;
        border-width: 1px;
        color: var(--primary-color);
        font-size: 11px;
        font-weight: 600;
    }
    
    .product_slider__content_list_item_details_text {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: fit-content;
        gap: 5px;
        margin-bottom: 5px;
    }
    
    .product_slider__content_list_item_details_text_title {
        font-size: 12px;
        font-weight: 600;
        color: var(--title-color);
        margin-bottom: 5px;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.2em * 2); 
        word-break: break-all;
        hyphens: auto; 
        line-height: 1.2em; 
    }
    
    .product_slider__content_list_item_details_stars {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
        margin-bottom: 5px;
    }
    
    .product_slider__content_list_item_details_stars_star {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 14px;
        height: 14px;
        background: rgba(var(--white-text-color-rgb), 0.9);
    }
    
    .product_slider__content_list_item_details_stars_star i {
        font-size: 14px;
        color: var(--subtext-color);
    }
    
    .product_slider__content_list_item_details_stars_star i.active {
        color: var(--primary-color);
    }
    
    .product_slider__content_list_item_details_stars_comment_count {
        font-size: 12px;
        font-weight: 600;
        color: var(--subtext-color);
    }
    
    .product_slider__content_list_item_details_price_detail {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
        gap: 5px;
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags_item {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 2px 5px;
        min-height: fit-content;
        border-radius: 5px;
        background: rgba(var(--blue-secondary-color-rgb), 0.1);
        color: var(--blue-secondary-color);
        font-size: 10px;
        font-weight: 500;
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags_item.green {
        background: rgba(var(--green-primary-color-rgb), 0.1);
        color: var(--green-primary-color);
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags_item.red {
        background: rgba(var(--red-primary-color-rgb), 0.1);
        color: var(--red-primary-color);
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags_item.orange {
        background: rgba(var(--orange-primary-color-rgb), 0.1);
        color: var(--orange-primary-color);
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags_item.yellow {
        background: rgba(var(--yellow-primary-color-rgb), 0.1);
        color: var(--yellow-primary-color);
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags_item.blue {
        background: rgba(var(--blue-primary-color-rgb), 0.1);
        color: var(--blue-primary-color);
    }
    
    .product_slider__content_list_item_details_price_detail_price_tags_item.purple {
        background: rgba(var(--purple-primary-color-rgb), 0.1);
        color: var(--purple-primary-color);
    }
    
    .product_slider__content_list_item_details_price_detail_price {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;
        width: 100%;
        height: 100%;
        gap: 5px;
        text-align: left;
    }
    
    .product_slider__content_list_item_details_price_detail_price_inbasket_text {
        font-size: 15px;
        font-weight: 700;
        color: var(--primary-color);
        text-align: start;
    }
    
    .product_slider__content_list_item_details_price_detail_price_old {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        text-decoration: line-through;
        text-align: start;
    }
    
    .product_slider__content_list_item_details_price_detail_price_current {
        font-size: 14px;
        font-weight: 700;
        color: var(--title-color);
        text-align: start;
    }
    
    /* <div class="product_slider__content_list_item_details_price_detail_piecePrice">
    <span class="product_slider__content_list_item_details_price_detail_piecePrice_text">Adet fiyatı: <strong><%= product.priceDetails.piecePrice %> TL</strong></span>
    </div> */
    
    .product_slider__content_list_item_details_price_detail_piecePrice {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        gap: 5px;
    }
    
    .product_slider__content_list_item_details_price_detail_piecePrice_text {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
    }
    
    .product_slider__content_list_empty {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        gap: 10px;
        flex-direction: column;
        text-align: center;
    }
    
    .product_slider__content_list_empty_text {
        font-size: 16px;
        font-weight: 500;
        color: var(--title-color);
    }

    .product_slider__content_button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        max-width: 36px;
        min-height: 36px;
        max-height: 36px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        border: none;
        cursor: pointer;
        font-size: 18px;
        z-index: 11;
    }

    @media screen and (max-width: 748px) {
        .product_slider__content_button {
            display: none;
        }
    }

    .product_slider__content_button_prev {
        left: 30px;
    }

    .product_slider__content_button_next {
        right: 30px;
    }

    .product_slider__content_button:hover {
        background: rgba(var(--white2-text-color-rgb), 1);
    }
    
    .scrollTopBtn {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 100px;
        right: 20px;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border: none;
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        z-index: 999;
    }

    .scrollTopBtn.active {
        opacity: 1;
        visibility: visible;
    }

    .scrollTopBtn:hover {
        background: rgba(var(--white2-text-color-rgb), 1);
    }

    .scrollTopBtn i {
        font-size: 18px;
        color: var(--text-color);
    }

    .footer {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-top: 25px;
        height: fit-content;
        padding: 20px 0;
        background: var(--page-color);
        overflow: hidden;
    }

    .footer_content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: fit-content;
        padding: 20px 150px;
        gap: 20px;
    }

    @media screen and (max-width: 1300px) {
        .footer_content {
            padding: 20px 100px;
        }
    }

    @media screen and (max-width: 1200px) {
        .footer_content {
            padding: 20px 50px;
        }
    }

    @media screen and (max-width: 748px) {
        .footer_content {
            padding: 20px 20px;
        }
    }

    .footer_content__ceo_content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .footer_content__ceo_content__standart {
        display: flex;
        justify-content: flex-start;
    }

    .footer_content__ceo_content__standart_content {
        display: block;
    }

    .footer_content__ceo_content__standart_content__short {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .footer_content__ceo_content__standart_content__short h1 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--title-color);
    }

    .footer_content__ceo_content__standart_content__short p {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 15px;
    }

    .footer_content__ceo_content__standart_content__short h3 {
        font-size: 14px;
        font-weight: 700;
        color: var(--title-color);
        margin-bottom: 8px;
    }


    .footer_content__ceo_content__standart_content__short.active {
        display: flex;
    }

    .footer_content__ceo_content__standart_content__long {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .footer_content__ceo_content__standart_content__long h1 {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 10px;
        color: var(--title-color);
    }

    .footer_content__ceo_content__standart_content__long p {
        font-size: 13px;
        font-weight: 500;
        color: var(--text-color);
        margin-bottom: 15px;
    }

    .footer_content__ceo_content__standart_content__long h3 {
        font-size: 14px;
        font-weight: 700;
        color: var(--title-color);
        margin-bottom: 8px;
    }

    .footer_content__ceo_content__standart_content__long.active {
        display: flex;
    }

    .footer_content__ceo_content__standart_content__button {
        background-color: transparent;
        border: 0;
        padding: 0;
        text-transform: capitalize;
        outline: 0;
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.54;
        letter-spacing: -.05px;
        color: var(--title-color);
        text-decoration: underline;
    }

    .footer_content__normal {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
    }
    
    .footer_content__normal__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px 0;
        width: 100%;
        border-top: 1px solid var(--border-color);
        border-bottom: 1px solid var(--border-color);
    }

    .footer_content__normal__info_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        gap: 10px;
    }

    .footer_content__normal__info_container_list {
        display: grid;
        flex-direction: row;
        grid-template-columns: repeat(4, 1fr); 
        -ms-grid-column-align: center;
        justify-content: center;
        align-items: center;
        width: fit-content;
        gap: 20px;
    }

    @media (max-width: 1024px) {
        .footer_content__normal__info_container_list {
            grid-template-columns: repeat(2, 1fr); 
            justify-content: flex-start;
            width: 100%;
        }
    }

    .footer_content__normal__info_container_list_item {
        display: flex;
        flex-direction: row;
        justify-content: stretch;
        align-items: center;
        width: 230px;
        height: 65px;
        gap: 10px;
    }

    @media (max-width: 1024px) {
        .footer_content__normal__info_container_list_item {
            flex-direction: column;
            width: 100%;
            gap: 5px;
            height: 100px;
        }
    }

    .footer_content__normal__info_container_list_item__icon_container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 65px;
        max-width: 65px;
        min-height: 65px;
        max-height: 65px;
    }

    .footer_content__normal__info_container_list_item__icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 64px;
        max-width: 64px;
        min-height: 64px;
        max-height: 64px;
        border-radius: 50%;
        border: 2px solid var(--primary-color);
    }

    @media screen and (max-width: 1024px) {
        .footer_content__normal__info_container_list_item__icon {
            min-width: 48px;
            min-height: 48px;
            max-width: 48px;
            max-height: 48px;
        }
    }

    .footer_content__normal__info_container_list_item__icon svg {
        min-width: 32px;
        min-height: 32px;
        max-width: 32px;
        max-height: 32px;
        color: var(--primary-color);
    }

    @media screen and (max-width: 1024px) {
        .footer_content__normal__info_container_list_item__icon svg {
            min-width: 24px;
            min-height: 24px;
            max-width: 24px;
            max-height: 24px;
        }
    }

    .footer_content__normal__info_container_list_item__text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
    }
    
    @media screen and (max-width: 1024px) {
        .footer_content__normal__info_container_list_item__text {
            text-align: center;
            font-size: 14px;
        }
    }

    .footer_content__normal__menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 24px 0;
        width: 100%;
    }

    .footer_content__normal__menu_container {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        gap: 10px;
    }

    @media screen and (max-width: 1100px) {
        .footer_content__normal__menu_container {
            flex-direction: row;
            justify-content: center;
        }
    }
    
    .footer_content__normal__menu_container_list {
        position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: flex-start;
        margin-bottom: 25px;
        width: fit-content;
        max-width: 50%;
    }

    @media screen and (max-width: 748px) {
        .footer_content__normal__menu_container_list {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 20px;
            width: 100%;
        }
    }

    .footer_content__normal__menu_container_list_item {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        align-self: start;
        margin-bottom: 25px;
        max-width: 250px;
        min-width: 200px;
        height: fit-content;
        transition: all 0.1s ease-in-out;
        text-align: left;
    }

    @media screen and (max-width: 748px) {
        .footer_content__normal__menu_container_list_item {
            align-items: center;
            justify-content: center;
            min-width: 100px;
        }
    }

    @media screen and (max-width: 448px) {
        .footer_content__normal__menu_container_list_item {
            min-width: 100%;
        }  
    }

    .footer_content__normal__menu_container_list_item__title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 10px;
        width: 100%;
    }

    @media screen and (max-width: 448px) {
        .footer_content__normal__menu_container_list_item__title {
            text-align: center;
        }
    }

    .footer_content__normal__menu_container_list_item__list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 5px;
        width: 100%;
    }

    @media screen and (max-width: 448px) {
        .footer_content__normal__menu_container_list_item__list {
            align-items: center;
            justify-content: center;
        }
    }

    .footer_content__normal__menu_container_list_item__list_item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 5px;
    }

    .footer_content__normal__menu_container_list_item__list_item a {
        font-size: 14px;
        font-weight: 400;
        color: var(--text-color);
        text-decoration: none;
    }

    @media screen and (max-width: 448px) {
        .footer_content__normal__menu_container_list_item__list_item a {
            text-align: center;
        }
    }

    .footer_content__normal__menu_container_list_item__list_item a:hover {
        text-decoration: underline;
    }

    .footer_content__normal__menu_container_social_and_contact {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        max-width: 100%;
        gap: 200px;
    }

    @media screen and (max-width: 1100px) {
        .footer_content__normal__menu_container_social_and_contact {
            flex-direction: column;
            justify-content: center;
            gap: 50px;
        }
    }

    .footer_content__normal__menu_container_social {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .footer_content__normal__menu_container_social_title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
    }

    .footer_content__normal__menu_container_social_icons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

    .footer_content__normal__menu_container_social_icons_item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        max-width: 40px;
        min-height: 40px;
        max-height: 40px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .footer_content__normal__menu_container_social_icons_item:hover {
        background: rgba(var(--white2-text-color-rgb), 1);
    }

    .footer_content__normal__menu_container_social_icons_item a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        text-decoration: none;
    }

    .footer_content__normal__menu_container_social_icons_item a i {
        font-size: 18px;
        color: var(--text-color);
    }

    .footer_content__normal__menu_container_social_icons_item a svg {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        max-width: 24px;
        max-height: 24px;
        color: var(--text-color);
    }

    .footer_content__normal__menu_container_contact {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        width: fit-content;
        min-width: 50%;
    }

    .footer_content__normal__menu_container_contact_title {
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
    }

    .footer_content__normal__menu_container_contact_live_chat {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .footer_content__normal__menu_container_contact_live_chat_button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 100px;
        max-width: 100px;
        min-height: 40px;
        max-height: 40px;
        border-radius: 8px;
        background: rgba(var(--primary-color-rgb), 0.1);
        color: var(--primary-color);
        border: none;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .footer_content__normal__menu_container_contact_live_chat_button:hover {
        background: rgba(var(--primary-color-rgb), 0.2);
    }

    .footer_content__normal__menu_container_contact_veya_text {
        position: relative;
        width: 100%;
        padding: 0 10px;
        text-align: center;
        text-transform: uppercase;
        align-items: center;
        justify-content: center;
    }

    .footer_content__normal__menu_container_co  ntact_veya_text_line {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 0;
        min-width: 100%;
        height: 1px;
        background-color: var(--primary-color);
        z-index: 1;
    }

    .footer_content__normal__menu_container_contact_veya_text_text {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 10px;
        width: fit-content;
        text-align: center;
        background-color: var(--page-color);
        z-index: 2;
        left: 50%;
        transform: translateX(-50%);
    }

    .footer_content__normal__menu_container_contact_veya_text_text span {
        font-size: 14px;
        font-weight: 500;
        color: var(--primary-color);
        background-color: var(--page-color);
        padding: 0 10px;
        text-transform: uppercase;
    }

    .colorred {
        color: var(--primary-color);
    }

    .footer_content__normal__menu_container_contact_phone {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .footer_content__normal__menu_container_contact_phone_title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color);
    }

    .footer_content__normal__menu_container_contact_phone_number {
        font-size: 20px;
        font-weight: 700;
        color: var(--text-color);
    }

    .footer_content__normal__menu_container_contact_whatsapp {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
    }

    .footer_content__normal__menu_container_contact_whatsapp_title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color);
    }

    .footer_content__normal__menu_container_contact_whatsapp_button {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 100px;
        max-width: 200px;
        min-height: 40px;
        max-height: 40px;
        border-radius: 8px;
        padding: 0 10px;
        background: rgba(var(--green-primary-color-rgb), 0.1);
        color: var(--green-primary-color);
        border: none;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .footer_content__normal__menu_container_contact_whatsapp_button:hover {
        background: rgba(var(--green-primary-color-rgb), 0.2);
    }

    .footer_content__normal__payment {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .footer_content__normal__payment_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 10px;
        width: 100%;
    }

    .footer_content__normal__payment_container_icons {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }

    .footer_content__normal__payment_container_icons_item {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 30px;
        max-width: 30px;
        min-height: 30px;
        max-height: 30px;
    }

    .footer_content__normal__payment_container_icons_item img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
    }

    .footer_content__normal__payment_container_icons_item img.active {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:hover {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:active {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:focus {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:visited {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:link {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:target {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:after {
        filter: grayscale(0);
    }

    .footer_content__normal__payment_container_icons_item img:before {
        filter: grayscale(0);
    }

    .footer_content__normal__etbis {
        display: flex;
        flex-direction: column;
        margin-top: 20px;
        justify-content: flex-end;
        align-items: flex-end;
        gap: 10px;
        width: 100%;
    }

    .footer_content__normal__etbis_container {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
    }

    .footer_content__normal__etbis_container_text {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-color);
        width: 40%;
    }

    @media screen and (max-width: 748px) {
        .footer_content__normal__etbis_container_text {
            width: 100%;
        }    
    }
        
    .footer_content__normal__etbis_container_etbis {
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 120px;
        overflow: hidden;
        width: fit-content;
    }

    #ETBIS {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-height: 100px;
    }

    #ETBIS div {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    #ETBIS div a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
    }

    #ETBIS div a img {
        width: 100%;
        max-height: 100px;
        object-fit: contain;
        user-select: none;
        -webkit-user-drag: none;
    }

    .mail_verified_container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 100%;
        height: fit-content;
        padding: 20px 0;
    }   

    .mail_verified {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 20px;
        width: 100%;
        max-width: 500px;
        padding: 20px;
        border-radius: 10px;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .mail_verified__header {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
    }

    .mail_verified__header_icon {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 40px;
        max-width: 40px;
        min-height: 40px;
        max-height: 40px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .mail_verified__header_icon.success {
        background: rgba(var(--green-primary-color-rgb), 0.1);
    }

    .mail_verified__header_icon.error {
        background: rgba(var(--red-primary-color-rgb), 0.1);
    }

    .mail_verified__header_icon svg {
        width: 24px;
        height: 24px;
        min-width: 24px;
        min-height: 24px;
        max-width: 24px;
        max-height: 24px;
        color: var(--text-color);
    }

    .mail_verified__header_text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 700;
        color: var(--text-color);
    }

    .mail_verified__text {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
    }

    .mail_verified__text span {
        text-align: center;
    }

    .mail_verified__text a {
        font-size: 14px;
        font-weight: 500;
        color: var(--primary-color);
        text-decoration: underline;
    }

    .mail_verified__text a:hover {
        text-decoration: none;
    }

    .navbar__dealerContainer {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 50px;
        min-width: 180px;
        max-width: 180px;
        padding: 2px;
        background: rgba(var(--text-color-rgb), 0.05);
        cursor: pointer;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.1s ease-in-out;
        z-index: 2;
    }
    

    @media screen and (max-width: 1480px) {
        .navbar__dealerContainer {
            min-width: 130px;
            max-width: 130px;
        }
    }

    @media screen and (max-width: 1400px) {
        .navbar__dealerContainer {
            min-width: 50px;
            max-width: 50px;
        }
    }

    .navbar__dealerContainer:hover {
        background: rgba(var(--text-color-rgb), 0.08);
        transition: all 0.1s ease-in-out;
    }

    /*
                <div class="navbar__dealerContainer">
                <div class="navbar__dealerLogo">
                    <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-store"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><circle cx="9" cy="7" r="4" /><circle cx="16" cy="7" r="4" /><circle cx="9" cy="16" r="4" /><path d="M9 11v-3m-1 0h2" /><path d="M15 16v-6" /><path d="M9 20v-2m-1 0h2" /><path d="M15 20v-2m-1 0h2" /></svg>
                </div>
                <div class="navbar__dealer_texts">
                    <div class="navbar__dealer_texts_header">
                        <span>Hemen Bayi Olun!</span>
                    </div>
                    <div class="navbar__dealer_texts_content">
                        <span>Bayi Girişi</span>
                    </div>
                </div>
            </div>
    */
    

    .navbar__dealerLogo {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;
        max-height: 24px;
        margin: 0 10px;
    }

    .navbar__dealerLogo svg {
        width: 24px;
        height: 24px;
        color: var(--primary-color);
    }

    .navbar__dealer_texts {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 100%;
        height: 100%;
        padding: 0.5rem 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    @media screen and (max-width: 1400px) {
        .navbar__dealer_texts {
            display: none;
        }
    }

    .navbar__dealer_texts_header {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;   
        overflow: hidden;  
        text-overflow: ellipsis;  
    }

    .navbar__dealer_texts_content {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        white-space: nowrap;   
        overflow: hidden;  
        text-overflow: ellipsis;  
    }

    .tag {
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: fit-content;
        max-width: 100%;
        min-height: 24px;
        padding: 0.25rem 0.25rem;
        background: rgba(var(--primary-color-rgb), 0.2);
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease;
        text-decoration: none;
        color: var(--primary-color);
    }
    
    .tag.mini {
        height: 18px;
        padding: 0.25rem 0.25rem;
        font-size: 12px;
    }

    .tag.margin {
        margin: 0 5px;
    }
    .tag.margin-left {
        margin-left: 5px;
    }
    .tag.margin-right {
        margin-right: 5px;
    }
    .tag.margin-top {
        margin-top: 5px;
    }
    .tag.margin-bottom {
        margin-bottom: 5px;
    }
    .tag.margin-top-bottom {
        margin: 5px 0;
    }

    .tag.blue {
        background: rgba(var(--blue-primary-color-rgb), 0.1);
        color: var(--blue-primary-color);
    }

    .tag.primary {
        background: rgba(var(--primary-color-rgb), 0.1);
        color: var(--primary-color);
    }

    .tag.green {
        background: rgba(var(--green-primary-color-rgb), 0.1);
        color: var(--green-primary-color);
    }

    .tag.red {
        background: rgba(var(--red-primary-color-rgb), 0.1);
        color: var(--red-primary-color);
    }

    .tag.yellow {
        background: rgba(var(--yellow-primary-color-rgb), 0.1);
        color: var(--yellow-primary-color);
    }

    .tag.orange {
        background: rgba(var(--orange-primary-color-rgb), 0.1);
        color: var(--orange-primary-color);
    }

    .page__classic_bannerContainer {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: fit-content;
        padding: 10px;
        position: relative;
    }

    @media screen and (max-width: 748px) {
        .page__classic_bannerContainer {
            padding: 10px 0;
        }
    }
    
    .page__classic_bannerContainer_boxs {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1180px;
        height: fit-content;
        max-height: 200px;
        min-height: 200px;
        overflow: hidden;
        position: relative;
    }

    @media screen and (max-width: 1300px) {
        .page__classic_bannerContainer_boxs {
            width: 100%;
        }
    }

    @media screen and (max-width: 748px) {
        .page__classic_bannerContainer_boxs {
            max-height: unset;
            min-height: unset;
        }
    }
    
    .page__classic_bannerContainer_boxs_slider_box {
        position: relative;
        width: 100%;
        height: auto;
        opacity: 0;
        transition: opacity 0.5s ease;
        display: none;
    }

    .page__classic_bannerContainer_boxs_slider_box.block {
        display: block;
    }
    
    .page__classic_bannerContainer_boxs_slider_box.active {
        opacity: 1;
        z-index: 1;
    }

    .page__classic_bannerContainer_boxs_countContainer {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 15px;
        right: 50px;
        padding: 4px 7px;
        opacity: .75;
        border-radius: 12px;
        background-color: var(--dark-color);
        font-size: 10px;
        font-weight: 600;
        color: var(--white2-text-color);
        overflow: hidden;
        z-index: 6;
    }

    @media screen and (max-width: 748px) {
        .page__classic_bannerContainer_boxs_countContainer {
            top: 10px;
            right: 20px;
        }
    }

    .page__classic_bannerContainer_boxs_slider {
        position: relative;
        display: flex;
        overflow: hidden;
        width: 1180px;
        scroll-behavior: smooth;
    } 

    @media screen and (max-width: 748px) {
        .page__classic_bannerContainer_boxs_slider {
            min-width: 95%;
            width: 95%;
        }
    }

    .page__classic_bannerContainer_boxs_slider_box_img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 8px;
        z-index: 5;
    }

    @media screen and (max-width: 748px) {
        .page__classic_bannerContainer_boxs_slider_box_img {
            height: 100px;
        }
    }
    
    @media screen and (max-width: 448px) {
        .page__classic_bannerContainer_boxs_slider_box_img {
            height: 80px;
        }
    }
    
    .page__classic_bannerContainer_boxs_button {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        max-width: 36px;
        min-height: 36px;
        max-height: 36px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        border: none;
        cursor: pointer;
        font-size: 18px;
        z-index: 11;    
        opacity: 0;
        visibility: hidden;
    }

    @media screen and (max-width: 748px) {
        .page__classic_bannerContainer_boxs_button {
            display: none;
        }
    }

    .page__classic_bannerContainer_boxs:hover .page__classic_bannerContainer_boxs_button {
        opacity: 1;
        visibility: visible;
    }
    
    .page__classic_bannerContainer_boxs_button.prev {
        left: 30px;
    }
    
    .page__classic_bannerContainer_boxs_button.next {
        right: 30px;
    }

    /*
            <div class="homePage_billBoard active">
            <div class="homePage_billBoard_container">
                <span class="homePage_billBoard_close">
                    <i class="fas fa-times"></i>
                </span>
                
                <div class="homePage_billBoard_content">
                    <div class="homePage_billBoard_content_image">
                        <img src="/server/products/images/test.jpg/format:webp" alt="product" class="homePage_billBoard_content_image_img" loading="lazy" >
                    </div>
                </div>
             
             </div>
        </div>
    */

    /* Popup gibi aaçılaack tüm ekrnaı nerdeyse kaplicak mobil uyumlu */
    .homePage_billBoard {
        position: fixed;
        align-items: center;
        justify-content: center;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    }

    body.lock-scroll {
        overflow: hidden;
    }
    
    .homePage_billBoard.active {
        opacity: 1;
        visibility: visible;
    }



    .homePage_billBoard_container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        max-width: 1180px;
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
        background: rgba(var(--white2-text-color-rgb), 1);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    @media screen and (max-width: 748px) {
        .homePage_billBoard_container {
            max-width: 95%;
            max-height: 95%;
            padding: 3px;
        }
    }

    .homePage_billBoard_close {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 10px;
        right: 10px;
        min-width: 36px;
        max-width: 36px;
        min-height: 36px;
        max-height: 36px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        cursor: pointer;
        font-size: 18px;
        z-index: 11;
    }

    .homePage_billBoard_close i {
        font-size: 18px;
    }

    .homePage_billBoard_content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1180px;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
    }
    
    @media screen and (max-width: 748px) {
        .homePage_billBoard_content {
            max-width: 100%;
            padding: 3px;
        }
    }
    
    .homePage_billBoard_content_image {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        max-height: 60vh;
        overflow: hidden;
    }
    
    .homePage_billBoard_content_image_img {
        position: relative;
        width: auto; 
        height: 60vh;
        max-width: 100%; 
        object-fit: contain; 
        border-radius: 8px;
    }

    @media screen and (max-width: 748px) {
        .homePage_billBoard_content_image_img {
            position: relative;
            width: 100% !important;
            object-fit: contain !important;
            height: unset !important;
            border-radius: 8px;
        }
    }

    /* 
            <% if (homeFloatingSentencesData.status == 1) { %>
                <div class="floating-text-container">
                  <div class="floating-text-content" id="floatingTextWrapper">
                    <div id="floatingText">
                      <% homeFloatingSentencesData.floatingSentences.forEach(function(sentence) { %>
                        <span><%= sentence.text %>&nbsp;&nbsp;&nbsp;</span>
                      <% }) %>
                    </div>
                  </div>
                </div>
              <% } %>
              
              
    */
    .floating-text-container {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 36px;
        padding: 10px 0;
        background-color: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
        z-index: 9998;
      }
    
      @media screen and (max-width: 748px) {
        .floating-text-container {
          padding: 5px 0;
        }
      }
    
      .floating-text-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: fit-content;
        overflow-x: hidden;
        position: relative;
        gap: 50px;
      }

      #floatingText {
        display: none;    
        align-items: center;
        justify-content: flex-start;
        width: fit-content;
        height: fit-content;
        padding: 0 10px;
        box-sizing: border-box;
        white-space: nowrap;
        gap: 200px;
        will-change: transform;
        transition: none !important;
      }
    
      .floating-text-content span {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    
      .floating-text-content span:hover {
        text-decoration: underline;
      }
    
      @keyframes scroll-left {
        from { transform: translateX(0); }
        to   { transform: translateX(-50%); }
      }

      /* 
        Sayfanın Sol altında popup gibi ama popup değil bildirim gibi ama bildirim değil ürün çıkıcak 


              <div class="homePage_discountProduct" id="homePage_discountProduct">
            <div class="homePage_discountProduct_container">
                <span class="homePage_discountProduct_close" id="homePage_discountProduct_close">
                    <i class="fas fa-times"></i>
                </span>

                <div class="homePage_discountProduct_content" id="homePage_discountProduct_content" data-href="<%= getDiscountProduct.details.seoDetails.seo %>">
                    <div class="homePage_discountProduct_content_image">
                        <img src="<%= getDiscountProduct.details.coverImage %>" alt="product" class="homePage_discountProduct_content_image_img" id="homePage_discountProduct_img">
                    </div>
                    <div class="homePage_discountProduct_content_text">
                        <span class="homePage_discountProduct_content_text_title"><%= getDiscountProduct.details.longName %></span>
                        <% if (getDiscountProduct.details.howManyInABox) { %>
                            <span class="homePage_discountProduct_content_text_tag orange"><%= getDiscountProduct.details.howManyInABox %>'li paket</span>
                        <% } %>
                        <% if (getDiscountProduct.priceDetails.inCartDiscountDetails.inCartDiscountStatus) { %>
                            <span class="homePage_discountProduct_content_text_price"><%= getDiscountProduct.productTotalPriceText %> TL</span>
                            <span class="homePage_discountProduct_content_text_price_inbasket_text">SEPETTE</span>
                            <span class="homePage_discountProduct_content_text_price_current"><%= getDiscountProduct.finalProductPriceText %> TL</span>
                        <% } else if (getDiscountProduct.priceDetails.normalDiscountDetails.normalDiscountStatus) { %>
                            <span class="homePage_discountProduct_content_text_price"><%= getDiscountProduct.productTotalPriceText %> TL</span>
                            <span class="homePage_discountProduct_content_text_price_current"><%= getDiscountProduct.finalProductPriceText %> TL</span>
                        <% } else { %>
                            <span class="homePage_discountProduct_content_text_price_current"><%= getDiscountProduct.finalProductPriceText %> TL</span>
                        <% } %>
                    </div>
                </div>
             
             </div>
        </div>
      */

    .homePage_discountProduct {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        bottom: 30px;
        left: 0;
        width: 100%;
        height: auto;
        padding: 10px 10px;
        z-index: 9998;
    }

    @media screen and (max-width: 748px) {
        .homePage_discountProduct {
            padding: 5px 0;
            justify-content: center;
        }
    }

    .homePage_discountProduct_container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        max-width: 600px;
        padding: 10px;
        box-sizing: border-box;
        overflow: hidden;
        background: rgba(var(--white2-text-color-rgb), 1);
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    @media screen and (max-width: 748px) {
        .homePage_discountProduct_container {
            max-width: 95%;
            max-height: 95%;
            padding: 3px;
        }
    }

    .homePage_discountProduct_close {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 5px;
        right: 5px;
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;
        max-height: 24px;
        border-radius: 50%;
        background: rgba(var(--white2-text-color-rgb), 0.9);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        color: var(--text-color);
        cursor: pointer;
        font-size: 14px;
        z-index: 11;
    }

    .homePage_discountProduct_close i {
        font-size: 14px;
    }

    .homePage_discountProduct_content {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 1180px;
        padding: 5px;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
    }

    @media screen and (max-width: 748px) {
        .homePage_discountProduct_content {
            max-width: 100%;
            padding: 3px;
        }
    }

    .homePage_discountProduct_content_image {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        max-width: 60px;
        max-height: 60px;
        min-width: 60px;
        min-height: 60px;
        overflow: hidden;
        border-radius: 8px;
    }

    .homePage_discountProduct_content_image_img {
        position: relative;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    @media screen and (max-width: 748px) {
        .homePage_discountProduct_content_image_img {
            position: relative;
            width: 100% !important;
            object-fit: contain !important;
            height: unset !important;
        }
    }

    .homePage_discountProduct_content_text {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        width: 100%;
        max-width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
        overflow: hidden;
    }

    @media screen and (max-width: 748px) {
        .homePage_discountProduct_content_text {
            max-width: 100%;
            padding: 3px;
        }
    }

    .homePage_discountProduct_content_text_title {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 5px;
        display: -webkit-box;
        line-clamp: 2;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.2em * 2);
        word-break: break-all;
        hyphens: auto;
        line-height: 1.2em;
    }

    .homePage_discountProduct_content_text_tag {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0.25rem;
        background: rgba(var(--orange-primary-color-rgb), 0.1);
        border: none;
        border-radius: 5px;
        transition: all 0.3s ease;
        text-decoration: none;
        color: var(--orange-primary-color);
    }

    .homePage_discountProduct_content_text_tag.mini {
        height: 18px;
        padding: 0.25rem 0.25rem;
        font-size: 12px;
    }

    .homePage_discountProduct_content_text_tag.margin {
        margin: 0 5px;
    }

    .homePage_discountProduct_content_text_tag.margin-left {
        margin-left: 5px;
    }

    .homePage_discountProduct_content_text_tag.margin-right {
        margin-right: 5px;
    }

    .homePage_discountProduct_content_text_tag.margin-top {
        margin-top: 5px;
    }

    .homePage_discountProduct_content_text_tag.margin-bottom {
        margin-bottom: 5px;
    }

    .homePage_discountProduct_content_text_tag.margin-top-bottom {
        margin: 5px 0;
    }

    .homePage_discountProduct_content_text_price {
        font-size: 12px;
        font-weight: 500;
        color: var(--subtext-color);
        text-decoration: line-through;
        text-align: start;
    }

    .homePage_discountProduct_content_text_price_inbasket_text {
        font-size: 15px;
        font-weight: 700;
        color: var(--primary-color);
        text-align: start;
    }

    .homePage_discountProduct_content_text_price_current {
        font-size: 14px;
        font-weight: 700;
        color: var(--title-color);
        text-align: start;
    }

    .mt-5 {
        margin-top: 5px;
    }
    .mb-5 {
        margin-bottom: 5px;
    }
    .ml-5 {
        margin-left: 5px;
    }
    .mr-5 {
        margin-right: 5px;
    }
    .mt-10 {
        margin-top: 10px;
    }
    .mb-10 {
        margin-bottom: 10px;
    }
    .ml-10 {
        margin-left: 10px;
    }
    .mr-10 {
        margin-right: 10px;
    }

    /* <div class="navbar__dealerContainerLoged">
    <div class="navbar__dealerContainerLoged_text">
        <span>BAYİİ PANELİ</span>
    </div>
</div> */

    .navbar__dealerContainerLoged {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
        min-height: 50px;
        padding: 5px 10px;
        cursor: pointer;
        overflow: hidden;
        border-radius: 8px;
        transition: all 0.1s ease-in-out;
    }

    @media screen and (max-width: 1480px) {
        .navbar__dealerContainerLoged {
            min-width: 130px;
            max-width: 130px;
        }
    }

    @media screen and (max-width: 1400px) {
        .navbar__dealerContainerLoged {
            min-width: 50px;
            max-width: 50px;
        }
    }

    .navbar__dealerContainerLoged:hover {
        background: rgba(var(--text-color-rgb), 0.08);
        transition: all 0.1s ease-in-out;
    }

    .navbar__dealerContainerLoged_text {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }


    .navbar__dealerContainerLoged_text span {
        font-size: 12px;
        font-weight: 700;
        color: var(--text-color);
        white-space: nowrap;   
        overflow: hidden;  
        text-overflow: ellipsis;  
    }

/*
        <div class="whatsappBtn">
            <a href="https://api.whatsapp.com/send?phone=9<%= footerSettings.contact.whatsapp %>" target="_blank">
          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-brand-whatsapp"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /><path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg>
            </a>
        </div>
        */
    .whatsappBtn {
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
        bottom: 40px;
        right: 15px;
        width: 50px;
        height: 50px;
        background-color: rgba(37,211,102, 0.9);
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 9998;
    }

    .whatsappBtn a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: var(--white2-text-color);
        text-decoration: none;
    }

    .whatsappBtn svg {
        width: 24px;
        height: 24px;
        color: var(--white2-text-color);
    }

    .whatsappBtn:hover {
        background-color: rgba(37,211,102, 1);
        transition: all 0.3s ease;
    }

    .whatsappBtn:active {
        transform: scale(0.95);
        transition: all 0.1s ease;
    }

    .whatsappBtn:focus {
        outline: none;
    }
    .whatsappBtn:focus-visible {
        outline: none;
    }