@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap");

@font-face {
  font-family: "Savoye LET";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/savoye-let.ttf);
}

@font-face {
  font-family: "Stempel Garamond";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/StempelGaramondLTStd-BoldIt.ttf);
}

:root {
  --color-primary: #ec619b;
  --color-secondary: #95d1e7;
  --color-dark: #000000;
  --color-light: #f8f8f8;

  /* Color Variants */
  --color-primary-50: #fef2f7;
  --color-primary-100: #fbd7e7;
  --color-primary-200: #f9c4db;
  --color-primary-300: #f6a9cb;
  --color-primary-400: #f498c1;
  --color-primary-500: #f17eb1;
  --color-primary-600: #db73a1;
  --color-primary-700: #ab597e;
  --color-primary-800: #854561;
  --color-primary-900: #65354a;

  --color-secondary-50: #f1fafb;
  --color-secondary-100: #d3eef3;
  --color-secondary-200: #bde6ee;
  --color-secondary-300: #9fdbe6;
  --color-secondary-400: #8dd4e1;
  --color-secondary-500: #70c9d9;
  --color-secondary-600: #66b7c5;
  --color-secondary-700: #508f9a;
  --color-secondary-800: #3e6f77;
  --color-secondary-900: #2f545b;

  --top-bar-height: 32px;
  --header-height: 100px;

  --white: #fff;
  --black: #000;
  --moderate-blue: #d8e0f5;
  --desaturated-blue: #1a2a3a;
  --light-blue: #e8ecf9;
  --thin-blue: #f5f8fb;
  --magenta: #f3e0f0;
  /* --bold-orange: #ff925c; */
  /* --bold-orange: var(--color-primary); */
  --bold-orange: var(--color-secondary);
  /* --light-orange: #ffc266; */
  /* --light-orange: var(--color-primary-300); */
  --light-orange: var(--color-secondary-100);
  --light-orange-sm: #ffe1d2;
  --thin-orange: #ffe9c8;
  --thin-orange-md: #ffeee5;
  --thin-orange-sm: #fff9ef;
  --thin-orange-xs: #fef7ef;
  --thin-orange-2xs: #fff1dc;
  --strong-cyan: #00a1c2;
  --light-cyan: #d6fff9;
  --thin-cyan: #d6f8ff;
  --thin-cyan-sm: #f5fcfc;
  --thin-cyan-xs: #e9fffc;
  --light-red: #ffc9c8;
  --light-red-sm: #ffdcdb;
  --thin-white: #fcfcfc;
  --bold-green: #00c2a5;
  --bold-red: #ff5752;
  --light-red-10: #fffafa;
  --bold-magenta: #3d63cc;
  --moderate-magenta: #c261b2;
  --moderate-magenta-20: #f9eff7;
  --moderate-magenta-10: #fcf9fc;
  --strong-cyan-blue-20: #e9fbff;
  --NFA-10-Orange: #fffbf9;
  --fs-clamp-48: clamp(32px, 2.6vw, 48px);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  padding-top: calc(var(--header-height) + var(--top-bar-height) + 1rem);
  background-color: var(--color-light);
  font-size: 16px;
  font-family: "Red Hat Display", system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  @media screen and (max-width: 991px) {
    font-size: 15px;
  }
  @media screen and (max-width: 767px) {
    font-size: 14px;
  }
}

/* * Site Container */
.site-container {
  width: 95%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

/* * Site Section Header */
.site-section-header {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-dark);
  h2 {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 130%;
    color: inherit;
    @media screen and (max-width: 1440px) {
      font-size: 2.4rem;
    }
    @media screen and (max-width: 1199px) {
      font-size: 2.3rem;
    }
    @media screen and (max-width: 991px) {
      font-size: 2.2rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 2rem;
    }
    @media screen and (max-width: 550px) {
      font-size: 1.75rem;
    }
  }
}

/* * Site Section Seperator Text  */
.site-section-seperator-text {
  margin: 2rem 0;
  padding: 2.5rem 2rem 2rem;
  text-align: center;
  background-color: white;
  border-radius: 0.25rem;
  color: #1a2e32;
  font-family: "Stempel Garamond";
  font-size: 2.25rem;
  font-style: italic;
  line-height: 130%;

  @media screen and (max-width: 1440px) {
    font-size: 2.15rem;
  }
  @media screen and (max-width: 1199px) {
    font-size: 2rem;
  }
  @media screen and (max-width: 991px) {
    font-size: 1.5rem;
  }
  @media screen and (max-width: 767px) {
    font-size: 1.25rem;
  }

  p {
    margin-bottom: 0;
  }
}

/* * Site Top Bar */
header.site-top-bar {
  position: fixed;
  z-index: 400;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--top-bar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.6rem 0 0;
  background-color: #646869;
  h6 {
    color: #eaeeef;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 500;
    line-height: 160%;
    @media screen and (max-width: 991px) {
      font-size: 0.85rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 0.8rem;
    }
  }
}

/* * Menu Backdrop */
.menu-backdrop {
  position: fixed;
  top: calc(var(--header-height) + var(--top-bar-height));
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 350;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  display: none;
  transition: all 300ms ease;
  &.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }
  @media screen and (max-width: 991px) {
    display: block;
  }
}

/* * Site Header */
header.site-header {
  position: fixed;
  z-index: 400;
  top: var(--top-bar-height);
  left: 0;
  width: 100%;
  height: var(--header-height);
  background-color: white;
  /* margin-bottom: 1rem; */
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, 0.1);
  .site-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    .header-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 60px;
      @media screen and (max-width: 1440px) {
        height: 55px;
      }
      @media screen and (max-width: 1199px) {
        height: 50px;
      }
      @media screen and (max-width: 991px) {
        height: 45px;
      }
      @media screen and (max-width: 767px) {
        height: 40px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
    .search-bar,
    .mobile-search-bar {
      flex: 1;
      display: none;
      input {
        width: 100%;
        border: 0;
        padding: 1.5rem;
        border-radius: 0.5rem;
        background-color: #f3f3f3;
        color: #938e8e;
        font-size: 1rem;
        font-weight: 600;
        line-height: normal;
      }
    }
    .menu {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1.85rem;
      @media screen and (max-width: 1440px) {
        gap: 1.5rem;
      }
      @media screen and (max-width: 991px) {
        position: fixed;
        right: 0;
        top: calc(var(--header-height) + var(--top-bar-height));
        bottom: 0;
        z-index: 500;
        background: white;
        min-width: 300px;
        width: max-content;
        max-width: 100%;
        flex-direction: column;
        opacity: 0;
        transform: translateX(100%);
        transition: all 300ms ease;
        &.active {
          opacity: 1;
          transform: translateX(0);
        }
      }
      a {
        display: inline-flex;
        color: #1a2e32;
        text-align: center;
        font-size: 1.1rem;
        line-height: 110%;
        padding: 0.65rem 0.25rem;
        text-transform: uppercase;
        position: relative;
        @media screen and (max-width: 1440px) {
          font-size: 1.2rem;
        }
        @media screen and (max-width: 1199px) {
          font-size: 1.15rem;
        }
        @media screen and (max-width: 991px) {
          font-size: 1.1rem;
          font-weight: 600;
        }
        @media screen and (max-width: 767px) {
          font-size: 1rem;
        }
        &::before {
          content: "";
          display: block;
          width: 100%;
          height: 2px;
          position: absolute;
          left: 0;
          bottom: 0;
          background: linear-gradient(
            to right,
            transparent,
            var(--color-secondary-900),
            transparent
          );
          will-change: transform;
          transform: scaleX(0);
          transition: all 300ms ease;
        }
        &:hover::before,
        &.active::before {
          transform: scaleX(1);
        }
        &:hover {
          color: var(--color-secondary-700);
        }
      }
    }
    .icons {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 1rem;
      @media screen and (max-width: 1440px) {
        gap: 0.85rem;
      }
      @media screen and (max-width: 1199px) {
        gap: 0.75rem;
      }
      li {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .account-frame {
        position: relative;
        .login-popup {
          border-radius: 0.75rem;
          border: 1px solid #e6e6e6;
          padding: 2rem 1.75rem 1.25rem;
          top: calc(var(--header-height) - 0.5rem);
          position: absolute;
          width: 400px;
          background-color: white;
          right: -0.5rem;
          z-index: 1;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10%);
          transition: all 300ms ease;
          &.show {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
          }
          .popup-arrow {
            position: absolute;
            top: -14px;
            right: 1.5rem;
            z-index: -1;
            width: 15px;
            height: 15px;
          }
          .popup-title {
            color: black;
            font-size: 1.5rem;
            line-height: 100%;
            margin-bottom: 1.6rem;
          }
          .input-field {
            margin-bottom: 0.6rem;
            position: relative;
            input {
              width: 100%;
              border: 1px solid #d5d7da;
              border-radius: 0.5rem;
              padding: 1.35rem 1rem;
              transition: all 300ms ease;
              &:hover,
              &:focus {
                border-color: #11b95c;
              }
            }
            .show-password-btn,
            .hide-password-btn {
              position: absolute;
              top: 50%;
              right: 1.25rem;
              cursor: pointer;
              transform: translateY(-50%);
              path {
                transition: all 300ms ease;
              }
              &:hover path,
              &.active path {
                fill: var(--color-secondary-300);
              }
            }
            .hide-password-btn {
              display: none;
            }
          }
          .input-flex {
            margin: 12px 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
          .checkbox-item {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            input {
              appearance: none;
              margin-bottom: auto;
              position: relative;
              min-width: 0.95rem;
              min-height: 0.95rem;
              border: 1px solid #d5d7da;
              border-radius: 4px;
              margin-bottom: 0.2rem;
              transition: all 300ms ease;
              &:hover,
              &:focus {
                border-color: #11b95c;
              }
              &::before {
                content: "";
                position: absolute;
                display: block;
                inset: 2px;
                opacity: 0;
                transform: scale(0);
                border-radius: 3px;
                background-color: #11b95c;
                transition: all 300ms ease;
              }
              &:checked::before {
                opacity: 1;
                transform: scale(1);
              }
            }
            label {
              margin-bottom: 0;
              line-height: 170%;
              font-size: 0.95rem;
              font-weight: 500;
              cursor: pointer;
              user-select: none;
            }
          }
          .reset-password-link {
            color: #142326;
            font-size: 14px;
            font-weight: 500;
            line-height: 170%;
            transition: all 300ms ease;
            &:hover {
              color: var(--color-secondary-700);
            }
          }
          .submit-btn {
            margin: 1rem 0;
            cursor: pointer;
            padding: 1.25rem;
            display: block;
            text-align: center;
            width: 100%;
            color: white;
            border: 0;
            border-radius: 6px;
            background-color: #13ce66;
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 120%;
            transition: all 300ms ease;
            &:hover {
              background: #11b95c;
            }
          }
          .popup-footer {
            color: #142326;
            text-align: center;
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 170%;
            margin-bottom: 0;
            a {
              color: inherit;
              font-weight: 800;
              text-decoration: underline;
            }
          }
        }
      }
      .cart-frame {
        position: relative;
        .cart-popup {
          border-radius: 0.75rem;
          border: 1px solid #e6e6e6;
          padding: 2rem 1.75rem 1.25rem;
          top: calc(var(--header-height) - 0.5rem);
          position: absolute;
          width: 500px;
          background-color: white;
          right: -0.5rem;
          z-index: 1;
          opacity: 0;
          visibility: hidden;
          transform: translateY(-10%);
          transition: all 300ms ease;
          &.show {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
          }
          &.active {
            transform: translateY(0);
            opacity: 1;
            visibility: visible;
          }
          .popup-arrow {
            position: absolute;
            top: -14px;
            right: 1.5rem;
            z-index: -1;
            width: 15px;
            height: 15px;
          }
          .product-list {
            max-height: 455px;
            overflow-y: auto;
            .product {
              margin-bottom: 2rem;
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: 2.5rem;
              .product-image {
                width: 130px;
                height: 120px;
                object-fit: cover;
                border-radius: 6px;
              }
              .tag {
                font-size: 0.75rem;
                line-height: 150%;
                font-weight: 500;
                display: inline-block;
                padding: 0.25rem 1.25rem;
                border-radius: 100px;
                color: #b42318;
                background-color: #fef3f2;
                margin-bottom: 2px;
              }
              .educator {
                color: black;
                font-size: 1rem;
                line-height: 160%;
                letter-spacing: 0.16px;
                margin-bottom: 0;
              }
              .product-name {
                color: #142326;
                font-size: 1.25rem;
                font-weight: 500;
                line-height: 130%;
                letter-spacing: 0.2px;
                margin: 0.5rem 0;
                transition: all 300ms ease;
              }
              .product-price {
                color: #142326;
                font-size: 1.25rem;
                font-weight: 600;
                line-height: 130%;
                letter-spacing: 0.2px;
              }
              &:hover .product-name {
                color: var(--color-secondary-800);
              }
              .option-name {
                color: #5f6368;
                font-size: 0.95rem;
                line-height: 125%;
              }
            }
          }
          .total-product {
            text-align: center;
            margin: 1.25rem 0;
            color: #213c41;
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 130%;
            letter-spacing: 0.2px;
            strong {
              color: #142326;
              font-size: 1.4rem;
              font-weight: 600;
              line-height: 100%;
              letter-spacing: 0.24px;
            }
            span {
              font-size: 1.25rem;
            }
          }
          .cart-btn {
            margin: 1rem 0;
            cursor: pointer;
            padding: 1.25rem;
            display: block;
            text-align: center;
            width: 100%;
            color: white;
            border: 0;
            border-radius: 6px;
            background-color: #13ce66;
            font-size: 1.25rem;
            font-weight: 500;
            line-height: 120%;
            transition: all 300ms ease;
            &:hover {
              background: #11b95c;
            }
          }
        }
      }
      .menu-btn {
        display: none;
        align-items: center;
        justify-content: space-between;
        padding: 0.25rem;
        margin-left: 0.25rem;
        height: 26px;
        width: 30px;
        flex-direction: column;
        span {
          min-height: 2px;
          width: 100%;
          border-radius: 4px;
          background-color: #1a2e32;
          transition: all 300ms ease;
        }
        &.active {
          span:nth-child(1) {
            transform: translateY(8px) rotate(45deg);
          }
          span:nth-child(2) {
            opacity: 0;
            transform: translateX(100%);
          }
          span:nth-child(3) {
            transform: translateY(-8px) rotate(-45deg);
          }
        }
        @media screen and (max-width: 991px) {
          display: inline-flex;
        }
      }
      > li > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 1rem;
        transition: all 300ms ease;
        @media screen and (max-width: 1440px) {
          padding: 0.75rem;
        }
        @media screen and (max-width: 1199px) {
          padding: 0.5rem;
        }
        svg {
          width: 1.75rem;
          height: 1.75rem;
          @media screen and (max-width: 1440px) {
            width: 1.65rem;
            height: 1.65rem;
          }
          @media screen and (max-width: 1199px) {
            width: 1.5rem;
            height: 1.5rem;
          }
        }
        &:hover {
          transform: scale(1.1);
        }
      }
    }
  }
}

/* * Home Swiper */
section.home-swiper {
  margin-bottom: 1.75rem;
  .home-swiper {
    position: relative;
    overflow: hidden;
    .swiper-slide {
      position: relative;
      overflow: hidden;
      border-radius: 0.5rem;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          to bottom,
          rgba(0, 0, 0, 0.1),
          rgba(0, 0, 0, 0.1)
        );
        pointer-events: none;
        z-index: 0;
        opacity: 0.1;
      }
      img {
        user-select: none;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .slide-content {
        position: absolute;
        left: 6rem;
        right: 6rem;
        bottom: 3.5rem;
        color: var(--color-light);
        @media screen and (max-width: 1440px) {
          left: 5rem;
          bottom: 3.25rem;
        }
        @media screen and (max-width: 1199px) {
          left: 4rem;
          bottom: 3rem;
        }
        @media screen and (max-width: 991px) {
          left: 3rem;
          bottom: 2rem;
        }
        @media screen and (max-width: 767px) {
          left: 2rem;
          bottom: 1.25rem;
        }
        .slide-sub-title {
          font-size: 2rem;
          font-weight: 700;
          line-height: 130%;
          @media screen and (max-width: 1440px) {
            font-size: 1.85rem;
          }
          @media screen and (max-width: 1199px) {
            font-size: 1.5rem;
          }
          @media screen and (max-width: 991px) {
            font-size: 1.25rem;
          }
          @media screen and (max-width: 767px) {
            font-size: 1.05rem;
          }
        }
        .slide-title {
          font-size: 2.85rem;
          font-weight: 900;
          line-height: 130%;
          @media screen and (max-width: 1440px) {
            font-size: 2.65rem;
          }
          @media screen and (max-width: 1199px) {
            font-size: 2.45rem;
          }
          @media screen and (max-width: 991px) {
            font-size: 2rem;
          }
          @media screen and (max-width: 767px) {
            font-size: 1.65rem;
          }
          @media screen and (max-width: 550px) {
            font-size: 1.35rem;
          }
        }
        a {
          color: white;
          transition: all 300ms ease;
        }
        a:hover {
          color: #f8f8f8;
        }
      }
    }
    .swiper-navigation {
      position: absolute;
      top: 50%;
      left: 0.5rem;
      right: 0.5rem;
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: space-between;
      transform: translateY(-50%);
      @media screen and (max-width: 991px) {
        display: none;
      }
      .swiper-nav-prev,
      .swiper-nav-next {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #959b9a;
        transition: all 300ms ease;
        &:hover {
          color: #bcc0bf;
          transform: scale(1.1);
        }
      }
    }
    .swiper-pagination {
      position: static;
      margin-top: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.75rem;
      .swiper-pagination-bullet {
        margin: 0;
        opacity: 1;
        background-color: #d1d1d1;
        width: 19px;
        height: 1rem;
        border-radius: 2px;
        transition: all 300ms ease;
        @media screen and (max-width: 1199px) {
          width: 18px;
          height: 0.95rem;
        }
        @media screen and (max-width: 991px) {
          width: 16px;
          height: 0.9rem;
        }
        @media screen and (max-width: 767px) {
          width: 14px;
          height: 0.85rem;
        }
        @media screen and (max-width: 550px) {
          width: 14px;
          height: 0.8rem;
        }
        &.swiper-pagination-bullet-active {
          background-color: var(--color-secondary-500);
          opacity: 1;
          width: 38px;
          @media screen and (max-width: 1199px) {
            width: 36px;
          }
          @media screen and (max-width: 991px) {
            width: 34px;
          }
          @media screen and (max-width: 767px) {
            width: 32px;
          }
          @media screen and (max-width: 550px) {
            width: 30px;
          }
        }
      }
    }
  }
}

/* * Home Courses */
section.home-courses {
  .site-section-header {
    color: #8b68e0;
  }
  .course-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .show-all-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
  }
  .show-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 130%;
    color: #1a2e32;
    border-radius: 0.25rem;
    border: 1px solid var(--color-secondary-500);
    transition: all 300ms ease;
    @media screen and (max-width: 1199px) {
      font-size: 1.35rem;
    }
    @media screen and (max-width: 991px) {
      padding: 1rem 1.75rem;
      font-size: 1.2rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 1.1rem;
    }
    &:hover {
      background-color: var(--color-secondary-50);
    }
  }
}

/* * Home Categories */
section.home-categories {
  .site-section-header {
    color: #f7c05b;
  }
  .category-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .show-all-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
  }
  .show-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 130%;
    color: #1a2e32;
    border-radius: 0.25rem;
    border: 1px solid var(--color-secondary-500);
    transition: all 300ms ease;
    @media screen and (max-width: 1199px) {
      font-size: 1.35rem;
    }
    @media screen and (max-width: 991px) {
      padding: 1rem 1.75rem;
      font-size: 1.2rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 1.1rem;
    }
    &:hover {
      background-color: var(--color-secondary-50);
    }
  }
}

/* * Home Blog Cards */
section.home-blog-cards {
  .site-section-header {
    color: #7cc35b;
  }
  .blog-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }
  .show-all-btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.4rem;
    margin-bottom: 2.4rem;
  }
  .show-all-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 130%;
    color: #1a2e32;
    border-radius: 0.25rem;
    border: 1px solid var(--color-secondary-500);
    transition: all 300ms ease;
    @media screen and (max-width: 1199px) {
      font-size: 1.35rem;
    }
    @media screen and (max-width: 991px) {
      padding: 1rem 1.75rem;
      font-size: 1.2rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 1.1rem;
    }
    &:hover {
      background-color: var(--color-secondary-50);
    }
  }
}

/* * Home Join Card */
section.home-join-card {
  margin: 2.5rem 0;
  .join-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5rem 6rem;
    background-color: white;
    border-radius: 0.4rem;
    @media screen and (max-width: 1199px) {
      padding: 2.5rem 4rem;
    }
    @media screen and (max-width: 991px) {
      padding: 2.5rem 3rem;
    }
    @media screen and (max-width: 767px) {
      flex-direction: column;
      align-items: flex-start;
      gap: 1rem;
    }
    h3 {
      max-width: 440px;
      color: #1a2e32;
      font-size: 2.85rem;
      font-weight: 900;
      line-height: 130%;
      @media screen and (max-width: 1440px) {
        font-size: 2.65rem;
      }
      @media screen and (max-width: 1199px) {
        font-size: 2.45rem;
      }
      @media screen and (max-width: 991px) {
        font-size: 2rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.75rem;
      }
      @media screen and (max-width: 550px) {
        font-size: 1.6rem;
      }
    }
    .join-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      font-size: 1.45rem;
      font-weight: 700;
      line-height: 130%;
      padding: 1.4rem 3rem;
      border-radius: 0.5rem;
      background-color: var(--color-primary);
      transition: all 300ms ease;
      @media screen and (max-width: 1440px) {
        font-size: 1.4rem;
      }
      @media screen and (max-width: 1199px) {
        font-size: 1.35rem;
        padding: 1.3rem 2.5rem;
      }
      @media screen and (max-width: 991px) {
        font-size: 1.3rem;
        padding: 1.25rem 2.25rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.25rem;
        padding: 1.2rem 2rem;
      }
      @media screen and (max-width: 550px) {
        font-size: 1.1rem;
        padding: 1rem 1.5rem;
      }
      &:hover {
        background-color: var(--color-primary-500);
      }
    }
  }
}

/* * Our Values */
section.our-values .our-values-grid .out-values-swiper {
  position: relative;
  overflow: hidden;
}
section.our-values {
  margin-bottom: 5rem;
  .site-section-header {
    color: #5b9bd5;
  }
  .our-values-grid {
    /* display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem; */
    margin-bottom: 2rem;
    .our-value-card {
      padding: 2.5rem 2rem;
      background-color: white;
      border-radius: 0.6rem;
      text-align: center;
      border: 1px solid #e6e6e6;
      @media screen and (max-width: 1440px) {
        padding: 2.4rem 2rem;
      }
      @media screen and (max-width: 1199px) {
        padding: 2.3rem 2rem;
      }
      @media screen and (max-width: 991px) {
        padding: 2.25rem 2rem;
      }
      @media screen and (max-width: 767px) {
        padding: 2rem 1.75rem;
      }
      img {
        object-fit: contain;
        margin-bottom: 1rem;
      }
      h3 {
        color: #595959;
        font-size: 1.4rem;
        font-weight: 600;
        line-height: 95%;
        margin-bottom: 1.75rem;
        @media screen and (max-width: 1440px) {
          font-size: 1.65rem;
          margin-bottom: 1.6rem;
        }
        @media screen and (max-width: 1199px) {
          font-size: 1.5rem;
          margin-bottom: 1.5rem;
        }
        @media screen and (max-width: 991px) {
          font-size: 1.4rem;
          margin-bottom: 1.4rem;
        }
        @media screen and (max-width: 767px) {
          font-size: 1.25rem;
          margin-bottom: 1.25rem;
        }
      }
      p {
        text-align: center;
        color: #757575;
        font-size: 1.15rem;
        line-height: 125%;
        margin-bottom: 0;
        @media screen and (max-width: 1440px) {
          font-size: 1.1rem;
        }
        @media screen and (max-width: 1199px) {
          font-size: 1.05rem;
        }
        @media screen and (max-width: 991px) {
          font-size: 1rem;
        }
        @media screen and (max-width: 767px) {
          font-size: 1rem;
        }
      }
    }
  }
}

/* * Footer */
footer.site-footer {
  padding: 3rem 0 0;
  background-color: white;
  border-top: 4px solid rgba(127, 127, 127, 0.2);

  .site-container {
    .footer-logo {
      display: inline-flex;
      align-items: center;
      justify-content: flex-start;
      padding-bottom: 2.5rem;
      img {
        height: 56px;
        object-fit: contain;
      }
    }
    .columns {
      margin-bottom: 5rem;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 2rem;
      width: 100%;
    }
    .mini-title {
      color: #142326;
      font-size: 1.05rem;
      font-weight: 600;
      margin-bottom: 0.75rem;
      @media screen and (max-width: 991px) {
        font-size: 1rem;
      }
    }
    .footer-start {
      a {
        display: block;
        color: #142326;
        font-size: 1.25rem;
        line-height: 150%;
        margin-bottom: 0.5rem;
        transition: all 300ms ease;
        @media screen and (max-width: 991px) {
          font-size: 1.15rem;
        }
        &:hover {
          color: var(--color-secondary-700);
        }
      }
    }
    .social-media {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 1rem;
      margin-top: 1.1rem;
      a {
        color: black;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 300ms ease;
        &:hover {
          color: var(--color-secondary-700);
        }
      }
    }
    .footer-links {
      .footer-links-title {
        color: #1a2e32;
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 1.6rem;
        @media screen and (max-width: 991px) {
          font-size: 1.2rem;
        }
      }
      a {
        display: inline-block;
        color: #142326;
        font-size: 1.1rem;
        line-height: 150%;
        margin-bottom: 1rem;
        transition: all 300ms ease;
        @media screen and (max-width: 991px) {
          font-size: 1rem;
        }
        &:hover {
          color: var(--color-secondary-700);
        }
      }
    }
  }
  .footer-end {
    padding: 1rem 0;
    border-top: 1px solid rgba(127, 127, 127, 0.2);
    .site-container {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      p {
        max-width: 420px;
        font-size: 0.95rem;
        margin-bottom: 0;
        @media screen and (max-width: 991px) {
          font-size: 0.8rem;
        }
      }
      .vp-logo-pack {
        flex: 1;
        display: flex;
        justify-content: center;
        img {
          width: auto;
          min-width: 220px;
          height: 24px;
          min-height: 24px;
          object-fit: contain;
          @media screen and (max-width: 991px) {
            width: 50px;
          }
          @media screen and (max-width: 767px) {
            width: 45px;
          }
        }
      }
      .biltek-signature {
        flex: 1;
        display: flex;
        justify-content: flex-end;
      }
      .biltek-logo {
        svg {
          width: 75px;
          height: auto;
          object-fit: contain;
          @media screen and (max-width: 991px) {
            width: 65px;
          }
          @media screen and (max-width: 767px) {
            width: 60px;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 1199px) {
  footer.site-footer .footer-end .site-container {
    flex-wrap: wrap;
  }

  footer.site-footer .footer-end .site-container p {
    width: 100%;
    text-align: center;
    flex: 1;
  }
}

@media screen and (max-width: 991px) {
  footer.site-footer .footer-end .site-container p {
    flex: unset;
  }

  footer.site-footer .footer-end .site-container .vp-logo-pack {
    flex: unset;
  }

  footer.site-footer .footer-end .site-container {
    gap: 12px;
  }
}

/* * Register */
section.register-form {
  .site-container {
    max-width: 1000px;
    .form-card {
      padding: 2rem 1.5rem;
      margin: 1.25rem auto;
      background-color: white;
      border-radius: 12px;
    }
    .form-container {
      width: 95%;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
    .form-title {
      color: #181d27;
      font-size: 1.85rem;
      font-weight: 600;
      line-height: 125%;
      margin-bottom: 2rem;
      @media screen and (max-width: 1199px) {
        font-size: 1.75rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.5rem;
      }
    }
    fieldset {
      display: flex;
      flex-direction: column;
      margin-bottom: 1.25rem;
    }
    label {
      color: #414651;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 110%;
      @media screen and (max-width: 1199px) {
        font-size: 1rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.9rem;
      }
    }
    input,
    .nice-select {
      border-radius: 0.5rem;
      border: 1px solid #d5d7da;
      font-size: 0.95rem;
      padding: 1.25rem 1.5rem;
      box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
      transition: all 300ms ease;
      @media screen and (max-width: 1199px) {
        padding: 1.15rem 1.25rem;
      }
      @media screen and (max-width: 767px) {
        padding: 1rem 1.2rem;
      }
      &:hover,
      &:focus {
        border-color: #11b95c;
      }
    }
    .nice-select {
      height: auto;
      padding: 0.75rem 2.5rem 0.75rem 1.5rem;
      @media screen and (max-width: 1199px) {
        padding: 0.5rem 2.25rem 0.5rem 1.25rem;
      }
      @media screen and (max-width: 767px) {
        padding: 0.4rem 2.25rem 0.4rem 1.2rem;
      }
      &::after {
        right: 1.5rem;
        width: 0.5rem;
        height: 0.5rem;
      }
    }
    .field-small {
      margin-top: 0.4rem;
      font-size: 0.85rem;
      color: #535862;
      font-size: 14px;
      line-height: 140%;
      @media screen and (max-width: 1199px) {
        font-size: 0.8rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.75rem;
      }
    }
    .form-small {
      margin-top: 0.4rem;
      font-size: 0.85rem;
      color: #535862;
      font-size: 14px;
      line-height: 140%;
      @media screen and (max-width: 1199px) {
        font-size: 0.8rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.75rem;
      }
    }
    .submit-btn {
      margin: 1.25rem 0 2rem;
      cursor: pointer;
      padding: 1.25rem;
      display: block;
      text-align: center;
      width: 100%;
      color: white;
      border: 0;
      border-radius: 6px;
      background-color: #13ce66;
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 120%;
      transition: all 300ms ease;
      @media screen and (max-width: 1199px) {
        font-size: 1.15rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1rem;
      }
      &:hover {
        background: #11b95c;
      }
    }
    .form-end {
      text-align: center;
      color: #535862;
      font-size: 0.9rem;
      line-height: 140%;
      @media screen and (max-width: 1199px) {
        font-size: 0.85rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.8rem;
      }
      a {
        font-weight: 700;
        color: #6941c6;
      }
    }
  }
}

/* * Login */
section.login-form {
  .site-container {
    max-width: 1000px;
    .form-card {
      padding: 2rem 1.5rem;
      margin: 1.25rem auto;
      background-color: white;
      border-radius: 12px;
    }
    .form-container {
      width: 95%;
      max-width: 500px;
      margin-left: auto;
      margin-right: auto;
    }
    .form-title {
      color: #181d27;
      font-size: 1.85rem;
      font-weight: 600;
      line-height: 125%;
      margin-bottom: 2rem;
      @media screen and (max-width: 1199px) {
        font-size: 1.75rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.5rem;
      }
    }
    fieldset {
      display: flex;
      flex-direction: column;
      margin-bottom: 1.25rem;
    }
    label {
      color: #414651;
      font-size: 1.05rem;
      font-weight: 700;
      line-height: 110%;
      @media screen and (max-width: 1199px) {
        font-size: 1rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.9rem;
      }
    }
    input,
    .nice-select {
      border-radius: 0.5rem;
      border: 1px solid #d5d7da;
      font-size: 0.95rem;
      padding: 1.25rem 1.5rem;
      box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
      transition: all 300ms ease;
      @media screen and (max-width: 1199px) {
        padding: 1.15rem 1.25rem;
      }
      @media screen and (max-width: 767px) {
        padding: 1rem 1.2rem;
      }
      &:hover,
      &:focus {
        border-color: #11b95c;
      }
    }
    .nice-select {
      height: auto;
      padding: 0.75rem 2.5rem 0.75rem 1.5rem;
      @media screen and (max-width: 1199px) {
        padding: 0.5rem 2.25rem 0.5rem 1.25rem;
      }
      @media screen and (max-width: 767px) {
        padding: 0.4rem 2.25rem 0.4rem 1.2rem;
      }
      &::after {
        right: 1.5rem;
        width: 0.5rem;
        height: 0.5rem;
      }
    }
    .field-small {
      margin-top: 0.4rem;
      font-size: 0.85rem;
      color: #535862;
      font-size: 14px;
      line-height: 140%;
      @media screen and (max-width: 1199px) {
        font-size: 0.8rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.75rem;
      }
    }
    .form-small {
      margin-top: 0.4rem;
      font-size: 0.85rem;
      color: #535862;
      font-size: 14px;
      line-height: 140%;
      @media screen and (max-width: 1199px) {
        font-size: 0.8rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.75rem;
      }
    }
    .submit-btn {
      margin: 1.25rem 0 2rem;
      cursor: pointer;
      padding: 1.25rem;
      display: block;
      text-align: center;
      width: 100%;
      color: white;
      border: 0;
      border-radius: 6px;
      background-color: #13ce66;
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 120%;
      transition: all 300ms ease;
      @media screen and (max-width: 1199px) {
        font-size: 1.15rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1rem;
      }
      &:hover {
        background: #11b95c;
      }
    }
    .form-end {
      text-align: center;
      color: #535862;
      font-size: 0.9rem;
      line-height: 140%;
      @media screen and (max-width: 1199px) {
        font-size: 0.85rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.8rem;
      }
      a {
        font-weight: 700;
        color: #6941c6;
      }
    }
  }
}

/* * Contact Informations */
section.contact-informations {
  background-color: white;
  margin-top: -1rem;
  .site-container {
    max-width: 850px;
  }
  .informations {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(2rem + (64px / 2)) 0 2rem;
    gap: 2rem;
    @media screen and (max-width: 767px) {
      row-gap: 3.5rem;
      flex-direction: column;
    }
    .information {
      flex: 1;
      background-color: var(--color-light);
      color: var(--color-dark);
      border-radius: 1rem;
      padding: 0 3rem 2rem 3rem;
      text-align: center;
      .icon {
        margin: calc(64px / 2 * -1) auto 1rem auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 64px;
        border: 0.5rem solid #f1fafb;
        border-radius: 50%;
        background-color: #d3eef3;
      }
      strong {
        display: inline-block;
        color: #181d27;
        font-size: 1rem;
        font-weight: 900;
        line-height: 150%;
        margin-bottom: 0.5rem;
        @media screen and (max-width: 767px) {
          font-size: 0.9rem;
        }
      }
      p {
        margin-bottom: 1.25rem;
        color: #142326;
        font-size: 1rem;
        font-weight: 600;
        line-height: 150%;
        @media screen and (max-width: 767px) {
          font-size: 0.9rem;
        }
      }
      a {
        color: #142326;
        font-size: 1rem;
        font-weight: 600;
        line-height: 150%;
        @media screen and (max-width: 767px) {
          font-size: 0.9rem;
        }
        &:hover {
          color: var(--color-secondary-700);
        }
      }
    }
  }
}

/* * Contact Form */
section.contact-form {
  padding: 2.5rem 0;
  .site-container {
    max-width: 850px;
  }
  .form-title {
    color: #181d27;
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 125%;
    margin-bottom: 2rem;
    @media screen and (max-width: 1199px) {
      font-size: 1.85rem;
    }
    @media screen and (max-width: 991px) {
      font-size: 1.75rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 1.5rem;
    }
  }
  .form-flex {
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media screen and (max-width: 767px) {
      flex-direction: column;
      align-items: stretch;
      gap: 0rem;
    }
  }
  fieldset {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    @media screen and (max-width: 767px) {
      margin-bottom: 1rem;
    }
  }
  label {
    color: #414651;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 110%;
    @media screen and (max-width: 767px) {
      font-size: 1rem;
    }
  }
  input,
  textarea,
  .nice-select {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d5d7da;
    font-size: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    transition: all 300ms ease;
    @media screen and (max-width: 767px) {
      font-size: 0.95rem;
      padding: 1rem 1.25rem;
    }
    &:hover,
    &:focus {
      border-color: #11b95c;
    }
  }
  .nice-select {
    height: auto;
    padding: 0.75rem 2.5rem 0.75rem 1.5rem;
    &::after {
      right: 1.5rem;
      width: 0.5rem;
      height: 0.5rem;
    }
  }
  .form-p {
    color: #222;
    font-size: 1.1rem;
    line-height: 120%;
    margin: 1.25rem 0 1.5rem;
    @media screen and (max-width: 991px) {
      font-size: 1rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 0.95rem;
    }
  }
  .col {
    @media screen and (max-width: 767px) {
      margin: 0.5rem 0;
    }
    padding: 0;
    flex: 1;
    img {
      min-width: 100%;
      min-height: 58px;
      border-radius: 0.5rem;
    }
    a {
      background-color: var(--color-secondary-700);
    }
    input {
      font-weight: 700;
      text-transform: uppercase;
      padding: 1rem;
      text-align: center;
    }
  }
  .submit-btn {
    flex: 1;
    cursor: pointer;
    padding: 1.25rem;
    display: block;
    text-align: center;
    width: 100%;
    color: white;
    border: 0;
    border-radius: 6px;
    background-color: #13ce66;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    transition: all 300ms ease;
    &:hover {
      background: #11b95c;
    }
  }
}

/* * About */
section.about {
  padding: 2rem 0;
  .site-container {
    max-width: 1000px;
  }
  .about-title {
    color: #142326;
    font-size: 5rem;
    font-weight: 800;
    line-height: 120%;
    margin-bottom: 1rem;
    @media screen and (max-width: 1440px) {
      font-size: 4.5rem;
    }
    @media screen and (max-width: 1199px) {
      font-size: 3.5rem;
    }
    @media screen and (max-width: 991px) {
      font-size: 2.5rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 2rem;
    }
    span {
      -webkit-text-stroke: 2px #142326;
      color: transparent;
    }
  }
  img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 0.5rem;
    margin: 1rem 0;
    border: 1px solid #e8e8e8;
    @media screen and (max-width: 1440px) {
      height: 450px;
    }
    @media screen and (max-width: 1199px) {
      height: 400px;
    }
    @media screen and (max-width: 991px) {
      height: 350px;
    }
    @media screen and (max-width: 767px) {
      height: 250px;
    }
  }
  p {
    color: #142326;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 150%;
    margin-bottom: 3rem;
    @media screen and (max-width: 1440px) {
      font-size: 1.4rem;
    }
    @media screen and (max-width: 1199px) {
      font-size: 1.35rem;
    }
    @media screen and (max-width: 991px) {
      font-size: 1.25rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 1.15rem;
    }
  }
}

/* * Educators Header */
header.educators-header {
  .site-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: auto;
    max-height: 100%;
  }
  ul {
    top: 1rem;
    left: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    a {
      display: inline-block;
      color: inherit;
    }
  }
  ._page-title {
    margin: 0 auto 1.5rem;
    color: #8b68e0;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 130%;
    @media screen and (max-width: 991px) {
      visibility: hidden;
    }
  }
}

/* * Educators */
section.educator-list {
  .course-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
    .course-card {
      height: 375px;
      .course-detail {
        padding: 0.5rem 1.5rem !important;
      }
      .educator-name {
        font-size: 1.25rem;
        font-weight: 800;
        margin-bottom: 0.25rem;
      }
      .course-title {
        font-weight: 500;
        font-size: 1rem;
      }
    }
  }
}

/* * Educator Header */
header.educator-header {
  margin-top: 1rem;
  .site-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    max-height: 100%;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    a {
      display: inline-block;
      color: inherit;
    }
  }
}

/* * Educator Detail */
section.educator-detail {
  margin-top: 1rem;
  margin-bottom: 3rem;
  .site-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    @media screen and (max-width: 1440px) {
      gap: 3.5rem;
    }
    @media screen and (max-width: 1199px) {
      gap: 3rem;
    }
    @media screen and (max-width: 991px) {
      gap: 2.5rem;
    }
    @media screen and (max-width: 767px) {
      flex-direction: column;
      gap: 1.5rem;
    }
    .educator-image {
      width: 450px;
      height: 450px;
      @media screen and (max-width: 1440px) {
        width: 350px;
        height: 350px;
      }
      @media screen and (max-width: 1199px) {
        width: 300px;
        height: 300px;
      }
      @media screen and (max-width: 991px) {
        width: 250px;
        height: 250px;
      }
      @media screen and (max-width: 767px) {
        width: 100%;
        height: auto;
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .educator-detail {
      flex: 1;
      .educator-name {
        color: black;
        font-size: 2rem;
        font-weight: 500;
        line-height: 125%;
        margin-bottom: 1.4rem;
        @media screen and (max-width: 1440px) {
          font-size: 1.85rem;
        }
        @media screen and (max-width: 1199px) {
          font-size: 1.75rem;
        }
        @media screen and (max-width: 991px) {
          font-size: 1.65rem;
        }
        @media screen and (max-width: 767px) {
          font-size: 1.5rem;
        }
      }
      p {
        color: #142326;
        font-size: 1.15rem;
        line-height: 135%;
        @media screen and (max-width: 1440px) {
          font-size: 1.1rem;
        }
        @media screen and (max-width: 1199px) {
          font-size: 1.05rem;
        }
        @media screen and (max-width: 991px) {
          font-size: 1rem;
        }
        @media screen and (max-width: 767px) {
          font-size: 0.95rem;
        }
      }
    }
  }
}

/* * Educator Courses */
section.educator-courses {
  margin: 1.5rem 0;
  .educator-courses-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    h2 {
      color: #8b68e0;
      text-align: center;
      font-weight: 900;
      line-height: 130%;
      font-size: 2.25rem;
      @media screen and (max-width: 1440px) {
        font-size: 2.15rem;
      }
      @media screen and (max-width: 1199px) {
        font-size: 2rem;
      }
      @media screen and (max-width: 991px) {
        font-size: 1.75rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.5rem;
      }
    }
    .nice-select {
      width: 150px;
    }
  }
  .course-cards {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    .course-card {
      height: 480px !important;
    }
  }
}

/* * Course List */
section.course-list {
  margin: 1rem 0;
  .course-list-header {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
  }

  .filter-btn,
  .nice-select {
    display: inline-flex;
    width: 150px;
    background-color: var(--color-light);
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-radius: 0.25rem;
    border: 1px solid #d1d1d1;
    gap: 1rem;
    color: #1a2e32;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 150%;
    transition: all 300ms ease;
    &::after {
      margin-right: 0.25rem;
      width: 0.5rem;
      height: 0.5rem;
    }
    &:hover {
      background-color: white;
    }
  }
  .filter-btn {
    display: none;
    @media screen and (max-width: 991px) {
      display: inline-flex;
    }
  }
  .nice-select {
    width: 200px;
  }
  .course-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
  }
  .course-list-filter {
    min-width: 340px;
    border-radius: 0.75rem;
    background: white;
    border: 1px solid #d1d1d1;
    overflow: hidden;
    @media screen and (max-width: 991px) {
      top: calc(var(--header-height) + var(--top-bar-height));
      left: 0;
      right: 0;
      bottom: 0;
      overflow-y: auto;
      transform: translateY(100%);
      opacity: 0;
      visibility: hidden;
      transition: all 300ms ease;
      position: fixed;
      z-index: 10;
      &.show {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
      }
    }
    .filter-btn {
      display: none;
      @media screen and (max-width: 991px) {
        display: flex;
        justify-content: center;
        width: 100%;
        border-top: 0;
        border-left: 0;
        border-right: 0;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
    .filter-collapse-toggle {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem 1rem;
      color: #142326;
      font-size: 1rem;
      font-weight: 600;
      line-height: 150%;
      border-bottom: 1px solid #d1d1d1;
      &:not(:last-of-type) {
      }
    }
    .categories {
      li {
        color: #142326;
        font-size: 1rem;
        line-height: 150%;
        padding: 0.5rem 1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        transition: all 300ms ease;
        &:hover {
          color: var(--color-secondary-700);
        }
        label {
          user-select: none;
          flex: 1;
          cursor: pointer;
        }
        input {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 1rem;
          height: 1rem;
          border: 1px solid #d5d7da;
          border-radius: 0.25rem;
          position: relative;
          overflow: hidden;
          transition: all 200ms ease;
          &::before {
            content: url(/notosegitim/assets/img/check.svg);
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) scale(0);
            margin-top: 1px;
            opacity: 1;
            transition: all 200ms ease;
          }
          &:checked {
            border-color: var(--color-secondary-400);
            &::before {
              transform: translate(-50%, -50%) scale(1);
              opacity: 1;
            }
          }
        }
      }
    }
    .filter-collapse-panel {
      padding: 1.5rem 0;
      &:not(:last-of-type) {
        border-bottom: 1px solid #d1d1d1;
      }
      h3 {
        padding: 1rem;
      }
    }
  }
  .course-list {
    flex: 1;
    width: 100%;
    gap: 0.75rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  }
}

/* * Course Detail Header */
header.course-detail-header {
  margin-top: 1rem;
  .site-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    max-height: 100%;
  }
  ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    a {
      display: inline-block;
      color: inherit;
    }
  }
}

/* * Course Detail */
section.course-detail {
  padding: 1.5rem 0;
  .course-detail-flex {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    @media screen and (max-width: 991px) {
      flex-direction: column;
    }
    .left-side {
      width: 450px;
      @media screen and (max-width: 1199px) {
        width: 400px;
      }
      @media screen and (max-width: 991px) {
        width: 100%;
        display: flex;
        gap: 1rem;
      }
      @media screen and (max-width: 767px) {
        flex-direction: column;
      }
      .course-detail-card {
        border-radius: 0.75rem;
        overflow: hidden;
        background: white;
        border: 1px solid #dfdfdf;
        margin-bottom: 1.25rem;
        @media screen and (max-width: 991px) {
          flex: 1;
          margin-bottom: 0;
        }
        .course-image {
          width: 100%;
          max-height: 300px;
          object-fit: cover;
        }
        .discount {
          position: absolute;
          top: 0;
          right: 0;
          transform: translate(55%, -75%);
          background-color: #13ce66;
          width: 5rem;
          height: 5rem;
          border-radius: 50%;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          @media screen and (max-width: 991px) {
            width: 4rem;
            height: 4rem;
            font-size: 0.8rem;
            transform: translate(30%, -65%);
          }
        }
        .detail {
          position: relative;
          margin: 0 3rem;
          z-index: 2;
          margin-top: -2rem;
          background: white;
          border-radius: 0.75rem;
          @media screen and (max-width: 991px) {
            margin: -2rem 1.5rem 0;
          }
          .educator-name {
            color: #142326;
            font-size: 1.5rem;
            font-weight: 500;
            line-height: 125%;
            padding: 1rem;
            text-align: center;
            @media screen and (max-width: 991px) {
              font-size: 1.35rem;
            }
          }
          .quota-card {
            margin-bottom: 2rem;
            padding: 0 4rem;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.75rem;
            @media screen and (max-width: 991px) {
              padding: 0 2rem;
            }
            h6 {
              color: black;
              font-size: 1.1rem;
              line-height: 175%;
              @media screen and (max-width: 991px) {
                font-size: 1rem;
              }
            }
            span {
              color: #1a2e32;
              font-size: 1rem;
              font-weight: 600;
              line-height: 150%;
              @media screen and (max-width: 991px) {
                font-size: 0.95rem;
              }
            }
          }
          .properties-card {
            padding: 0 4rem;
            margin-bottom: 2rem;
            @media screen and (max-width: 991px) {
              padding: 0 2rem;
            }
            li {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              gap: 0.6rem;
              padding: 0.6rem;
              color: #1a2e32;
              font-size: 1rem;
              font-weight: 700;
              line-height: 150%;
              @media screen and (max-width: 991px) {
                font-size: 0.95rem;
              }
              img {
                object-fit: contain;
                width: 1.5rem;
                height: 1.5rem;
              }
            }
          }
          .price {
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            text-align: center;
            strong {
              color: #142326;
              font-size: 1.85rem;
              font-weight: 700;
              line-height: 135%;
              @media screen and (max-width: 991px) {
                font-size: 1.75rem;
              }
              @media screen and (max-width: 767px) {
                font-size: 1.5rem;
              }
            }
            span {
              color: #ff000d;
              font-size: 1.25rem;
              font-weight: 700;
              line-height: 135%;
              text-decoration-line: line-through;
              @media screen and (max-width: 991px) {
                font-size: 1.1rem;
              }
              @media screen and (max-width: 767px) {
                font-size: 1rem;
              }
            }
          }
          .btn-corparate-apply {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1rem;
            color: #142326;
            font-size: 1.25rem;
            font-weight: 600;
            line-height: 120%;
            border-radius: 0.5rem;
            background-color: var(--color-secondary-100);
            margin-bottom: 2rem;
            @media screen and (max-width: 991px) {
              font-size: 0.95rem;
              padding: 0.75rem;
            }
          }
          .btn-add-to-cart {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 1rem;
            color: white;
            font-size: 1.25rem;
            font-weight: 600;
            line-height: 120%;
            border-radius: 0.5rem;
            background-color: #13ce66;
            margin-bottom: 0.5rem;
            @media screen and (max-width: 991px) {
              font-size: 0.95rem;
              padding: 0.75rem;
            }
          }
        }
      }
      .educator-card {
        border-radius: 12px;
        border: 1px solid #dfdfdf;
        background: white;
        padding: 1.5rem;
        @media screen and (max-width: 991px) {
          flex: 1;
        }
        .educator-photo {
          width: 100px;
          height: 100px;
          object-fit: cover;
          border-radius: 50%;
          margin-bottom: 1rem;
          @media screen and (max-width: 991px) {
            width: 90px;
            height: 90px;
          }
        }
        .educator-title {
          color: #142326;
          font-size: 2rem;
          font-weight: 500;
          line-height: 125%;
          margin-bottom: 1.25rem;
          display: block;

          @media screen and (max-width: 991px) {
            font-size: 1.75rem;
          }
        }
        .educator-desc {
          color: #142326;
          font-size: 1.15rem;
          line-height: 135%;
          @media screen and (max-width: 991px) {
            font-size: 1.1rem;
          }
        }
      }
    }
    .right-side {
      flex: 1;
      .description-card {
        padding: 2rem 3rem;
        border: 1px solid #dfdfdf;
        border-radius: 0.75rem;
        margin-bottom: 1.25rem;
        background-color: white;
        @media screen and (max-width: 991px) {
          padding: 1.5rem 2rem;
        }
        @media screen and (max-width: 767px) {
          padding: 1.5rem;
        }
        ul,
        li {
          list-style-type: disc;
          list-style-position: inside;
        }
        h2 {
          @media screen and (max-width: 991px) {
            font-size: 1.75rem;
          }
          @media screen and (max-width: 767px) {
            font-size: 1.5rem;
          }
        }
        p {
          font-size: 0.95rem;
          @media screen and (max-width: 991px) {
            font-size: 0.9rem;
          }
        }
      }
    }
  }
}

/* * Course Detail Courses */
.course-detail-courses {
  margin: 1rem 0 1.5rem;
  @media screen and (max-width: 991px) {
    margin-top: 0;
  }
  h3 {
    color: #8b68e0;
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 130%;
    margin-bottom: 1.5rem;
    @media screen and (max-width: 991px) {
      font-size: 2rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 1.75rem;
    }
  }
  .courses {
    width: 100%;
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}

/* * Blog List  */
section.blog-list {
  padding: 3rem 0;
  @media screen and (max-width: 991px) {
    padding: 1.5rem 0;
  }
  .blog-title {
    color: black;
    font-size: 2rem;
    font-weight: 700;
    line-height: 90%;
    margin-left: calc(300px + 0.75rem);
    margin-bottom: 0.85rem;

    @media screen and (max-width: 991px) {
      margin-left: 0;
      font-size: 1.75rem;
    }
  }
  .blog-list-flex {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    @media screen and (max-width: 991px) {
      flex-direction: column;
    }
  }
  .blog-categories {
    width: 300px;
    background-color: white;
    border: 1px solid #d1d1d1;
    border-radius: 12px;
    @media screen and (max-width: 991px) {
      width: 100%;
    }
    .aside-title {
      color: #142326;
      font-size: 1rem;
      font-weight: 600;
      line-height: 150%;
      padding: 1.25rem 1rem;
      border-bottom: 1px solid #e6e6e6;
    }
    ul {
      padding: 0.5rem 0;
    }
    li {
    }
    a {
      color: #142326;
      font-size: 1rem;
      line-height: 150%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1rem;
      transition: all 300ms ease;
      &:hover {
        color: var(--color-secondary-700);
      }
      span:last-child {
        margin-left: 0.5rem;
        font-size: 0.75rem;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.5rem;
        height: 1.5rem;
        border-radius: 0.25rem;
        background-color: #f4f4f4;
        color: #748c91;
      }
    }
  }
  .blog-list {
    flex: 1;
    @media screen and (max-width: 991px) {
      width: 100%;
    }
  }
  .blog-list-grid {
    display: grid;
    justify-content: flex-start;
    column-gap: 1rem;
    row-gap: 2.5rem;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    li {
    }
    a {
      .blog-image {
        overflow: hidden;
        height: 250px;
        border: 2px solid white;
        border-radius: 0.4rem;
        margin-bottom: 1rem;
        @media screen and (max-width: 991px) {
          height: 230px;
        }
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
        transition: all 300ms ease;
      }
      .author {
        display: block;
        color: #2f545b;
        font-size: 1rem;
        font-weight: 500;
        line-height: 125%;
        margin-bottom: 1rem;
        @media screen and (max-width: 991px) {
          font-size: 0.95rem;
        }
      }
      strong {
        color: #2f545b;
        font-size: 1.3rem;
        font-weight: 900;
        line-height: 130%;
        transition: all 300ms ease;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        @media screen and (max-width: 991px) {
          font-size: 1.2rem;
        }
      }
      &:hover {
        img {
          transform: scale(1.1);
        }
        strong {
          color: var(--color-secondary-700);
        }
      }
    }
  }
  .blog-pagination {
    margin-top: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    a {
      font-size: 0.9rem;
      font-weight: 500;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 0.5rem;
      color: #717680;
      transition: all 300ms ease;
      background-color: transparent;
      border: none;
      box-shadow: none !important;
      @media screen and (max-width: 991px) {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.85rem;
      }
      &:hover,
      &.active {
        color: var(--color-secondary-400);
        background-color: var(--color-secondary-50);
      }
    }
  }
}

.blog-pagination .page-item.active a {
  background-color: var(--color-secondary-50);
  color: var(--color-secondary-400) !important;
}

/* * Blog Content */
section.blog-content {
  padding: 2.5rem 0;
  @media screen and (max-width: 991px) {
    padding: 1.5rem 0;
  }
  .site-container {
    .blog-header {
      text-align: center;
    }
    .blog-date {
      color: #142326;
      font-size: 1rem;
      font-weight: 600;
      line-height: 150%;
      margin-bottom: 0.75rem;
      display: block;
      @media screen and (max-width: 991px) {
        font-size: 0.95rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.9rem;
      }
    }
    .blog-title {
      color: #142326;
      font-size: 3rem;
      font-weight: 600;
      line-height: 125%;
      letter-spacing: -0.96px;
      /* display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis; */
      @media screen and (max-width: 991px) {
        font-size: 2.5rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 2rem;
      }
    }
    .author {
      display: inline-block;
      text-align: center;
      color: #2f545b;
      font-size: 1.25rem;
      line-height: 160%;
      /* margin-bottom: 2rem; */
      @media screen and (max-width: 991px) {
        font-size: 1.1rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1rem;
      }
    }
    .blog-detail-image {
      width: 100%;
      max-width: 1200px;
      margin: 2rem auto;
      @media screen and (max-width: 991px) {
        margin: 1.25rem auto;
      }
      @media screen and (max-width: 767px) {
        margin: 1rem auto;
      }
    }
    .blog-container {
      max-width: 700px;
      margin-left: auto;
      margin-right: auto;
    }
    blockquote {
      padding-left: 1.25rem;
      border-left: 2px solid #d3eef3;
      color: #181d27;
      font-size: 1.25rem;
      font-style: italic;
      font-weight: 700;
      line-height: 135%;
      @media screen and (max-width: 991px) {
        font-size: 1.15rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1rem;
      }
      span {
        display: block;
        color: #535862;
        font-weight: 400;
        margin-top: 1.75rem;
        font-size: 1rem;
        line-height: 150%;
        @media screen and (max-width: 991px) {
          font-size: 0.95rem;
        }
        @media screen and (max-width: 767px) {
          font-size: 0.9rem;
        }
      }
    }
    p {
      margin: 0.75rem 0;
      color: #535862;
      font-size: 1.1rem;
      line-height: 135%;
      @media screen and (max-width: 991px) {
        font-size: 1rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 0.95rem;
      }
    }
    .blog-footer {
      border-top: 1px solid #e9eaeb;
      padding: 1.5rem 0;
      display: flex;
      align-self: center;
      justify-content: flex-start;
      @media screen and (max-width: 767px) {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: flex-start;
      }
      .author-image {
        min-width: 3.5rem;
        min-height: 3.5rem;
        border-radius: 50%;
        margin-right: 1rem;
        @media screen and (max-width: 991px) {
          min-width: 3rem;
          min-height: 3rem;
        }
        @media screen and (max-width: 767px) {
          min-width: 2.5rem;
          min-height: 2.5rem;
        }
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .author-detail {
        .author-name {
          display: block;
          color: #181d27;
          font-size: 1.1rem;
          font-weight: 600;
          line-height: 155%;
          @media screen and (max-width: 991px) {
            font-size: 1rem;
          }
          @media screen and (max-width: 767px) {
            font-size: 0.95rem;
          }
        }
        span {
          color: #535862;
          font-size: 1rem;
          line-height: 150%;
          @media screen and (max-width: 991px) {
            font-size: 0.9rem;
          }
          @media screen and (max-width: 767px) {
            font-size: 0.85rem;
          }
        }
      }
      .buttons {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        @media screen and (max-width: 767px) {
          width: 100%;
          justify-content: flex-start;
        }
        a {
          border: 1px solid #d5d7da;
          border-radius: 0.5rem;
          background-color: white;
          padding: 0.6rem 1rem;
          color: #414651;
          font-size: 0.9rem;
          font-weight: 600;
          line-height: 140%;
          display: inline-flex;
          align-items: center;
          justify-content: flex-start;
          gap: 0.5rem;
          @media screen and (max-width: 991px) {
            padding: 0.4rem 0.75rem;
            font-size: 0.8rem;
          }
          @media screen and (max-width: 767px) {
            font-size: 0.75rem;
          }
          &.square {
            max-width: 2.5rem;
            max-height: 2.5rem;
            padding: 0.6rem;
            @media screen and (max-width: 991px) {
              max-width: 2rem;
              max-height: 2rem;
            }
          }
          svg {
            width: 1.25rem;
            height: 1.25rem;
            color: #a4a7ae;
            transition: all 300ms ease;
            @media screen and (max-width: 991px) {
              width: 1rem;
              height: 1rem;
            }
          }
          &:hover svg {
            color: var(--color-secondary-700);
          }
        }
      }
    }
  }
}

/* ? Globals ? */

/* * Course Card */
.course-card {
  display: flex;
  height: 475px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: 0.4rem;
  background-color: var(--color-light);
  @media screen and (max-width: 1440px) {
    height: 460px;
  }
  @media screen and (max-width: 1199px) {
    height: 450px;
  }
  @media screen and (max-width: 991px) {
    height: 425px;
  }
  @media screen and (max-width: 767px) {
    height: 400px;
  }
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)
    );
    pointer-events: none;
    transition: all 300ms ease;
  }
  .course-card-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    user-select: none;
    border-radius: 0.4rem;
    object-fit: cover;
    transition: all 300ms ease;
  }
  .course-detail {
    padding: 1.5rem;
    position: relative;
    z-index: 3;
    color: #fdfdfd;
    transition: all 300ms ease;
    .educator-name {
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 100%;
      margin-bottom: 0.85rem;
      @media screen and (max-width: 1440px) {
        font-size: 1.1rem;
      }
      @media screen and (max-width: 1199px) {
        font-size: 1.15rem;
      }
      @media screen and (max-width: 991px) {
        font-size: 1.1rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.05rem;
      }
    }
    .course-title {
      font-size: 1.35rem;
      font-weight: 900;
      line-height: 130%;
      letter-spacing: 0.22px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      @media screen and (max-width: 1440px) {
        font-size: 1.3rem;
      }
      @media screen and (max-width: 1199px) {
        font-size: 1.25rem;
      }
      @media screen and (max-width: 991px) {
        font-size: 1.2rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.15rem;
      }
    }
  }
  &:hover {
    &::before {
      opacity: 0;
    }
    .course-card-image {
      transform: scale(1.075);
    }
    .course-detail {
      color: white;
    }
  }
}

/* * Category Card */
.category-card {
  display: flex;
  height: 260px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  overflow: hidden;
  border-radius: 0.4rem;
  background-color: var(--color-light);
  @media screen and (max-width: 1440px) {
    height: 250px;
  }
  @media screen and (max-width: 1199px) {
    height: 240px;
  }
  @media screen and (max-width: 991px) {
    height: 230px;
  }
  @media screen and (max-width: 767px) {
    height: 220px;
  }
  &::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.1)
    );
    pointer-events: none;
    transition: all 300ms ease;
  }
  .category-card-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    user-select: none;
    border-radius: 0.4rem;
    object-fit: cover;
    transition: all 300ms ease;
  }
  .category-detail {
    padding: 1.5rem;
    position: relative;
    z-index: 3;
    color: #fdfdfd;
    transition: all 300ms ease;
    .category-title {
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 130%;
      letter-spacing: 2px;
      color: transparent;
      -webkit-text-stroke: 1px white;
      transform-origin: bottom;
      transition: inherit;
      @media screen and (max-width: 1440px) {
        font-size: 1.45rem;
      }
      @media screen and (max-width: 1199px) {
        font-size: 1.4rem;
      }
      @media screen and (max-width: 991px) {
        font-size: 1.35rem;
      }
      @media screen and (max-width: 767px) {
        font-size: 1.25rem;
      }
    }
  }
  &:hover {
    &::before {
      opacity: 0;
    }
    .category-card-image {
      /* transform: scale(1.075); */
    }
    .category-detail {
      color: white;
      .category-title {
        color: white;
        transform: scale(1.1);
        -webkit-text-stroke-color: transparent;
      }
    }
  }
}

/* * Blog Card */
.blog-card {
  border-radius: 0.5rem;
  background-color: var(--color-secondary-100);
  max-height: 100%;
  .blog-card-image {
    height: 200px;
    margin: 2px;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 2px solid var(--color-light);
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 300ms ease;
      user-select: none;
    }
  }
  .blog-author {
    margin: 1rem 1rem 0.85rem;
    color: #2f545b;
    font-size: 1rem;
    font-weight: 500;
    line-height: 125%;
    @media screen and (max-width: 767px) {
      font-size: 0.95rem;
    }
  }
  .blog-title {
    margin: 1rem 1rem 2rem;
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 130%;
    color: #2f545b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    @media screen and (max-width: 767px) {
      font-size: 1.1rem;
    }
  }
  &:hover {
    &::before {
      opacity: 0.65;
    }
    .blog-card-image img {
      transform: scale(1.075);
    }
    .blog-title {
      color: #1a2e32;
    }
  }
}

/* * E-Commerce Customize */
.account {
  background: #f8f8f8;
  padding: 1.5vw 0 3vw;
}
.account .account-wrapper {
  display: flex;
  gap: clamp(1rem, 1.8vw, 2rem);
}
.account .account-wrapper .account-left-area {
  flex: 1;
}
.account .account-wrapper .account-left-area .left-area-header .header-title {
  display: inline-flex;
  padding: 21px 26px;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-secondary);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
  background: var(--color-secondary-50);
}
.account .account-wrapper .account-left-area .left-area-body {
  display: flex;
  padding: clamp(2rem, 2.5vw, 3rem);
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 1.7vw, 2rem);
  background: var(--white);
}
.account .account-wrapper .account-left-area .left-area-body .left-area-info {
  width: 100%;
}
.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info.left-area-info-main
  .info-item:last-child {
  margin-top: 0;
}
.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item:nth-child(2) {
  margin-top: 6.7vw;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .item-title {
  padding: 8px 0px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(24px, 1.8vw, 32px);
  font-weight: 500;
  line-height: normal;
  margin-bottom: clamp(1rem, 2.5vw, 3rem);
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form {
  width: 100%;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
  flex-wrap: unset;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  input
  textarea {
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group.input-group-textarea {
  align-items: start;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  input,
.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  textarea {
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 1rem;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1.5px solid #ced6dd;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: 0.4s;
  resize: none;
  border-radius: 0;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  input:focus,
.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  textarea:focus {
  border-color: var(--color-secondary);
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  .nice-select {
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 1rem;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1.5px solid #ced6dd;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: 0.4s;
  border-radius: 0;
  height: unset;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .form-send {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
  display: flex;
  padding: 13px 25.5px;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .form-send-btn {
  padding-top: 1rem;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .form-send
  svg {
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .form-send
  svg
  path {
}

.account .account-wrapper .account-right-area {
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 2rem);
  position: sticky;
  height: 100%;
  top: 120px;
}

.account .account-wrapper .account-right-area .right-area-header {
}

.account .account-wrapper .account-right-area .right-area-header .header-title {
  display: inline-flex;
  padding: 21px 26px;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--color-secondary);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
  background: var(--color-secondary-50);
}

.account .account-wrapper .account-right-area .right-area-header .header-user {
  display: flex;
  padding: 26px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
}

.account .account-wrapper .account-right-area .account-nav-container {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 2rem);
  position: relative;
}

.account .account-wrapper .account-right-area .account-nav-container::before {
  content: "";
  position: absolute;
  background: var(--white);
  top: -8px;
  left: 30px;
  height: 15px;
  width: 15px;
  transform: rotate(45deg);
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-nav {
  display: flex;
  padding: 24px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
  background: var(--white);
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-nav
  .nav-item {
  width: 100%;
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-nav
  .nav-item.active
  a {
  color: var(--color-secondary);
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-nav
  .nav-item
  a {
  display: flex;
  padding: 10px;
  align-items: center;
  gap: 8px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 17px;
  font-weight: 400;
  line-height: normal;
  border-bottom: 1px solid var(--thin-blue);
  padding-bottom: 1rem;
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-nav
  .nav-item:last-child
  a {
  margin: 0;
  border-bottom: 0;
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-nav
  .nav-item
  a
  svg {
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-nav
  .nav-item
  a
  svg
  path {
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-logout {
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-logout
  .logout-link {
  display: inline-flex;
  padding: 7px clamp(1rem, 1.7vw, 30px);
  justify-content: center;
  align-items: center;
  gap: 12px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(15px, 0.8vw, 17px);
  font-weight: 500;
  line-height: normal;
  margin: 8px 0 0;
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-logout
  .logout-link
  svg {
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-logout
  .logout-link
  svg
  path {
}

.account
  .account-wrapper
  .account-right-area
  .account-nav-container
  .account-create-date {
  color: #878787;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  /* 175% */
}

.account .account-wrapper .account-left-area .left-area-body .left-area-kvkk {
}

.account .account-wrapper .account-left-area .left-area-body .left-area-kvkk p {
  color: #878787;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  /* 175% */
  margin: 0;
  padding: 24px 0;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-kvkk
  p
  a {
  color: var(--desaturated-blue);
  font-size: 12px;
  font-weight: 500;
  line-height: 21px;
  text-decoration-line: underline;
}

.account .order-detail {
  padding: 0;
  background: transparent;
}

.account .order-detail .account-order-detail-wrapper {
  display: flex;
  gap: clamp(16px, 1.25vw, 24px);
  flex-wrap: wrap;
}

.account .order-detail .invoice-wrapper .invoice-detail {
  width: calc(50% - 1rem);
}

.account .order-detail .invoice-wrapper .add-invoice-detail .detail-title {
  border: 0;
  padding-bottom: 8px;
}

.account .order-detail .invoice-wrapper .invoice-detail .add-invoice a {
  display: flex;
  padding: 7px 15px;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.order-detail .invoice-wrapper .invoice-detail .invoice-edit {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 10.5px;
  font-weight: 500;
  line-height: normal;
  display: flex;
  padding: 2px;
  align-items: center;
  gap: 4px;
}

@media screen and (max-width: 1199px) {
  .account .account-wrapper .account-left-area .left-area-body {
    padding: 1rem 1.5rem 1.5rem;
  }

  .account
    .account-wrapper
    .account-right-area
    .account-nav-container
    .account-nav {
    padding: 8px;
  }

  .account .account-wrapper .account-left-area .left-area-header .header-title {
    padding: 1rem;
  }

  .account
    .account-wrapper
    .account-right-area
    .right-area-header
    .header-title {
    padding: 1rem;
  }

  .account .account-wrapper .account-left-area.account-left-area-table {
    flex: 1 0 63%;
    width: 63%;
  }

  .account .order-detail .invoice-wrapper .invoice-detail {
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .account .account-wrapper .account-right-area {
    display: none;
  }

  .account .account-wrapper {
    padding-top: 0;
    flex-direction: column;
  }

  .account .account-wrapper .account-left-area.account-left-area-table {
    flex: 1;
    width: 100%;
  }

  .account .order-detail .invoice-wrapper .invoice-detail {
    width: calc(50% - 1rem);
  }
}

@media screen and (max-width: 767px) {
  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group
    input {
    width: 100%;
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group {
    flex-direction: column;
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group.checkbox-group {
    flex-direction: row;
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group
    .nice-select {
    width: 100%;
    flex: 1;
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group
    textarea {
    width: 100%;
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .form-send {
    width: 100%;
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-kvkk
    p {
    padding: 8px 0;
    text-align: center;
  }

  .account .order-detail .invoice-wrapper {
    flex-direction: column;
  }

  .account .order-detail .invoice-wrapper .invoice-detail {
    flex: 1;
    width: 100%;
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group.input-group-textarea
    input {
    order: -1;
  }
}

/* ACCOUNT END */
/* BASKET START */
.basket {
  background: #f8f8f8;
  padding: 1.5vw 0;
}

.basket .basket-container {
  display: flex;
  gap: clamp(1rem, 1.8vw, 2rem);
}

.basket .basket-container .basket-product {
  flex: 1;
}

.basket .basket-container .basket-product .product-header {
  display: inline-flex;
  padding: 13px 22px;
  align-items: center;
  gap: 8px;
  background: var(--color-secondary-50);
  color: var(--color-secondary);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
}

.basket .basket-container .basket-product .product-list-container {
  display: flex;
  padding: clamp(2rem, 2.5vw, 3rem) clamp(1rem, 1.8vw, 2rem);
  flex-direction: column;
  align-items: flex-start;
  background: var(--thin-white);
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-bottom: 1px solid var(--desaturated-blue);
  padding-bottom: 0.5rem;
  margin-bottom: clamp(16px, 1.25vw, 24px);
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list-header
  .header-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  display: flex;
  padding: 15px clamp(12px, 2.1vw, 38px) 15px 12px;
  align-items: center;
  gap: 8px;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list {
  width: 100%;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--thin-blue);
  margin-bottom: clamp(16px, 1.25vw, 24px);
  padding-bottom: clamp(16px, 1.25vw, 24px);
  width: 100%;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item:last-child {
  margin-bottom: 8px;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area {
  display: flex;
  gap: clamp(12px, 0.8vw, 16px);
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-img {
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-img
  img {
  max-width: 100px;
  max-height: 200px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-img:hover
  img {
  transform: scale(1.2);
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-info {
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-info
  .info-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 600;
  line-height: 1.2;
  padding: 9px 4px;
  margin: 0;
  transition: 0.4s;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-info
  .info-desc {
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-info
  .info-desc
  .desc-item {
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  display: flex;
  padding: 2px 4px;
  align-items: center;
  gap: 8px;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-info
  .info-desc
  .desc-item
  .item-title {
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-left-area
  .item-info
  .info-desc
  .desc-item
  .item-desc {
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-right-area {
  text-align: end;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-right-area
  .product-price {
  display: flex;
  padding: 15px 0 15px 12px;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-right-area
  .product-price
  a {
  color: #9c9ea0;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-list
  .product-list-item
  .item-right-area
  .product-price
  a:hover {
  color: var(--desaturated-blue);
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-discount {
  display: flex;
  justify-content: end;
  width: 100%;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-discount
  .discount-input {
  display: flex;
  width: 240px;
  padding: 6px clamp(12px, 2.1vw, 38px) 6px 12px;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #ced6dd;
  transition: 0.4s;
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-discount
  .discount-button {
  display: flex;
  padding: 6.5px 12px;
  align-items: center;
  gap: 8px;
  color: var(--thin-white);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(14px, 0.9vw, 17px);
  font-weight: 500;
  line-height: normal;
  outline: none;
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-discount
  .discount-button
  svg {
}

.basket
  .basket-container
  .basket-product
  .product-list-container
  .product-discount
  .discount-button
  svg
  path {
}

.basket .basket-container .basket-summary {
  width: 320px;
  position: sticky;
  top: 120px;
  height: 100%;
  flex-shrink: 0;
}

.basket .basket-container .basket-summary .summary-title {
  display: inline-flex;
  padding: 13px 22px;
  align-items: center;
  gap: 8px;
  background: var(--color-secondary-50);
  color: var(--color-secondary);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
}

.basket .basket-container .basket-summary .summary-list-container {
  display: flex;
  padding: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(8px, 0.8vw, 16px);
  background: var(--thin-white);
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-list {
  width: 100%;
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-list
  .list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  gap: 8px;
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-list
  .list-item.list-item-discount
  .item-title,
.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-list
  .list-item.list-item-discount
  .item-price {
  color: var(--bold-red);
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-list
  .list-item
  .item-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 9px 4px;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-list
  .list-item
  .item-price {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 9px 4px;
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 4px;
  gap: 8px;
  border-top: 1px solid var(--thin-blue);
  border-bottom: 1px solid var(--thin-blue);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-total
  .total-title {
  padding: 9px 4px;
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-total
  .total-price {
  padding: 9px 4px;
}

.basket
  .basket-container
  .basket-summary
  .summary-list-container
  .summary-payment {
  width: 100%;
}

.payment-btn {
  display: flex;
  padding: 10.5px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--color-secondary);
  outline: 0;
  color: var(--thin-white);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(15px, 0.9vw, 17px);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 1px solid transparent;
  transition: 0.4s;
}

@media screen and (max-width: 1199px) {
  .basket .basket-container .basket-product .product-list-container {
    padding: 12px 24px 24px;
  }
}

@media screen and (max-width: 991px) {
  .basket .basket-container {
    flex-direction: column;
    padding-top: 0;
  }

  .basket .basket-container .basket-summary {
    position: relative;
    top: unset;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .basket .basket-container .basket-product .product-list-container {
    padding: 12px;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-list
    .product-list-item {
    flex-direction: column;
    margin-bottom: 12px;
    padding-bottom: 0;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-list
    .product-list-item
    .item-left-area
    .item-info
    .info-title {
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
    max-height: 48px;
    margin-bottom: 8px;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-list {
    border: 0;
    padding-bottom: 0;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-discount {
    flex-direction: column;
    gap: 8px;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-discount
    .discount-input {
    width: 100%;
    padding: 12px;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-discount
    .discount-button {
    justify-content: center;
    padding: 12px;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-list
    .product-list-item
    .item-left-area
    .item-info
    .info-desc
    .desc-item {
    gap: 4px;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-list
    .product-list-item
    .item-right-area
    .product-price {
    background: var(--desaturated-blue);
    color: white;
    margin-top: 1rem;
    display: inline-flex;
    border-radius: 100px;
    padding: 5px 12px;
    margin-bottom: 1rem;
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-list
    .product-list-item
    .item-right-area
    .product-price
    a {
    color: var(--white);
  }
}

/* BASKET END */
/* ACCOUNT MOBILE MENU START */
.account-mobile-menu {
  display: none;
}

.account-mobile-menu .mobile-menu-header {
  display: flex;
  padding: 21px 26px;
  align-items: center;
  justify-content: start;
  margin: 0;
  color: var(--color-secondary);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
  background: var(--thin-cyan);
  gap: 8px;
}

.account-mobile-menu .mobile-menu-list-container {
  position: fixed;
  inset: 0;
  height: 100%;
  width: 100%;
  background: var(--white);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.4s;
}

.account-mobile-menu .mobile-menu-list-container.active {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.account-mobile-menu .mobile-menu-list-container .list-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 32px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 2rem;
}

.account-mobile-menu .mobile-menu-list-container .account-mobile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: center;
  justify-content: center;
}

.account-mobile-menu
  .mobile-menu-list-container
  .account-mobile-menu-list
  .list-item {
  padding-bottom: 24px;
  border-bottom: 1px solid #fdefdf;
}

.account-mobile-menu
  .mobile-menu-list-container
  .account-mobile-menu-list
  .list-item
  a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 21px;
  font-weight: 500;
  line-height: normal;
  width: 100%;
}

.account-mobile-menu
  .mobile-menu-list-container
  .account-mobile-menu-list
  .list-item:last-child
  a {
  display: flex;
  padding: 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: var(--thin-white);
}

.account-mobile-menu
  .mobile-menu-list-container
  .account-mobile-menu-list
  .list-item:last-child {
  border: 0;
}

.account-mobile-menu
  .mobile-menu-list-container
  .account-mobile-menu-list
  .list-item.active
  a {
  color: var(--color-secondary);
}

.account-mobile-menu
  .mobile-menu-list-container
  .account-mobile-menu-list
  .list-item
  a
  svg {
}

.account-mobile-menu
  .mobile-menu-list-container
  .account-mobile-menu-list
  .list-item
  a
  svg
  path {
}

@media screen and (max-width: 991px) {
  .account-mobile-menu {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .account-mobile-menu .mobile-menu-header {
    padding: 1rem;
  }
}

/* ACCOUNT MOBILE MENU END */

/* ORDER SUCCESS START */
.order-status {
  background: #f8f8f8;
  padding: 1.5vw 0;
}

.order-status .status-wrapper {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 2.5vw, 3rem);
}

.order-status .status-wrapper .status-header {
  display: flex;
  padding: clamp(32px, 3.5vw, 64px) 32px;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(2rem, 2.5vw, 48px);
  background: var(--thin-white);
}

.order-status .status-wrapper .status-header .header-title {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.25vw, 24px);
}

.order-status .status-wrapper .status-header .header-title .title-icon {
  background: var(--bold-green);
  display: inline-block;
  padding: 9.6px 14.4px;
}

.order-status .status-wrapper .status-header .header-title .title-icon svg {
}

.order-status
  .status-wrapper
  .status-header
  .header-title
  .title-icon
  svg
  path {
}

.order-status .status-wrapper .status-header .header-title .title-text {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: var(--fs-clamp-48);
  font-weight: 600;
  line-height: 52px;
  /* 108.333% */
}

.order-status .status-wrapper .status-header .header-order {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
}

/* ORDER SUCCESS END */
/* ORDER DETAIL START */
.order-detail {
  display: flex;
  padding: clamp(2rem, 2.5vw, 48px) 32px;
  flex-direction: column;
  align-items: flex-start;
  background: var(--thin-white);
}

.order-detail .order-back-btn {
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
}

.order-detail .detail-wrapper {
  width: 100%;
}

.order-detail .detail-wrapper .detail-container {
}

.order-detail .detail-wrapper .detail-container .detail-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(24px, 1.8vw, 32px);
  font-weight: 500;
  line-height: normal;
  padding: 8px 0;
  margin-bottom: clamp(1rem, 1.7vw, 2rem);
}

.order-detail .detail-wrapper .detail-container .detail-info {
  display: inline-block;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(14px, 0.8vw, 17px);
  font-weight: 500;
  line-height: normal;
  margin-bottom: clamp(1rem, 1.7vw, 2rem);
}

.order-detail .detail-wrapper .detail-container .detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  border-bottom: 1px solid var(--desaturated-blue);
  padding-bottom: 0.5rem;
  margin-bottom: clamp(16px, 1.25vw, 24px);
}

.order-detail .detail-wrapper .detail-container .detail-header .header-text {
  display: flex;
  padding: 15px 38px 15px 12px;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-header
  .header-text:last-child {
  justify-content: end;
}

.order-detail .detail-wrapper .detail-container .detail-product {
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
}

.order-detail .detail-wrapper .detail-container .detail-product .product-item {
  display: flex;
  justify-content: space-between;
  border: 0;
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--thin-blue);
  padding-bottom: 24px;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info {
  display: flex;
  gap: 1rem;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-img {
  flex-shrink: 0;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-img
  img {
  max-width: 100px;
  max-height: 200px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-text {
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-text
  .text-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 600;
  line-height: 1.2;
  padding: 9px 4px;
  margin: 0;
  transition: 0.4s;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-text
  .info-desc {
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-text
  .info-desc
  .desc-item {
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  display: flex;
  padding: 2px 4px;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-text
  .info-desc
  .desc-item
  .item-title {
  padding: 2px 0;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .product-info
  .info-text
  .info-desc
  .desc-item
  .item-desc {
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .item-right-area {
  text-align: end;
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-product
  .product-item
  .item-right-area
  .product-price {
  display: flex;
  padding: 15px clamp(12px, 2.1vw, 38px) 15px 12px;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
}

.order-detail .detail-wrapper .detail-container .detail-price {
}

.order-detail .detail-wrapper .detail-container .detail-price .price-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
  padding-bottom: clamp(1rem, 1.8vw, 2rem);
  border-bottom: 1px solid var(--thin-blue);
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-price
  .price-item
  .item-text {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 0 clamp(12px, 2.1vw, 38px) 0 12px;
}

.order-detail .detail-wrapper .detail-container .detail-price .price-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--thin-blue);
  margin-bottom: clamp(1rem, 1.6vw, 24px);
  padding-bottom: clamp(1rem, 1.6vw, 24px);
}

.order-detail
  .detail-wrapper
  .detail-container
  .detail-price
  .price-total
  .total-text {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1vw, 19px);
  font-weight: 500;
  line-height: normal;
  padding: 0 clamp(12px, 2.1vw, 38px) 0 12px;
}

.order-detail .invoice-wrapper {
  width: 100%;
}

.order-detail .invoice-wrapper.success {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.order-detail .invoice-wrapper .invoice-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(24px, 1.8vw, 32px);
  font-weight: 500;
  line-height: normal;
  padding: 8px 0;
  width: 100%;
  flex: 1 0 100%;
}

.order-detail .invoice-wrapper .invoice-detail {
  display: inline-flex;
  padding: 24px;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--thin-blue);
  width: 35%;
}

.order-detail .invoice-wrapper .invoice-detail .detail-title {
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 500;
  line-height: 36px;
  /* 138.462% */
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--bold-orange);
  width: 100%;
  margin-bottom: 12px;
}

.order-detail .invoice-wrapper .invoice-detail .detail-description {
}

.order-detail
  .invoice-wrapper
  .invoice-detail
  .detail-description
  .description-item {
  color: #878787;
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 400;
  line-height: 26px;
  margin: 0;
}

.order-detail
  .invoice-wrapper
  .invoice-detail
  .detail-description
  .description-item
  br {
}

@media screen and (max-width: 1199px) {
  .order-detail .invoice-wrapper .invoice-detail .detail-title {
    padding-top: 0;
  }

  .order-detail .invoice-wrapper .invoice-detail {
    width: 50%;
  }

  .order-detail .invoice-wrapper.success .invoice-detail {
    width: calc(50% - 1rem);
  }
}

@media screen and (max-width: 767px) {
  .order-status .status-wrapper .status-header {
    padding: 24px;
    gap: 1rem;
    align-items: center;
    text-align: center;
  }

  .order-detail .invoice-wrapper.success .invoice-detail {
    width: 100%;
  }

  .order-status .status-wrapper .status-header .header-title .title-text {
    font-size: clamp(20px, 5.5vw, 24px);
    line-height: normal;
  }

  .order-status .status-wrapper .status-header .header-title {
    gap: 8px;
    text-align: start;
  }

  .order-status .status-wrapper .status-header .header-title .title-icon {
    padding: 4px;
  }

  .order-detail {
    padding: 24px;
  }

  .order-detail
    .detail-wrapper
    .detail-container
    .detail-product
    .product-item {
    flex-direction: column;
  }

  .order-detail
    .detail-wrapper
    .detail-container
    .detail-product
    .product-item
    .product-info
    .info-text
    .text-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: normal;
    max-height: 60px;
  }

  .order-detail
    .detail-wrapper
    .detail-container
    .detail-product
    .product-item
    .item-right-area
    .product-price {
    display: inline-flex;
    padding: 5px 12px;
    background: var(--desaturated-blue);
    color: var(--white);
    border-radius: 100px;
    margin-top: 1rem;
  }

  .order-detail .detail-wrapper .detail-container .detail-product {
    overflow-x: auto;
    text-wrap: nowrap;
  }

  .order-detail .invoice-wrapper .invoice-detail {
    width: 100%;
  }

  .order-detail
    .detail-wrapper
    .detail-container
    .detail-product::-webkit-scrollbar-thumb {
    background: var(--color-secondary);
    border-radius: 100px;
  }

  .order-detail
    .detail-wrapper
    .detail-container
    .detail-product::-webkit-scrollbar {
    height: 5px;
  }

  .order-detail
    .detail-wrapper
    .detail-container
    .detail-product::-webkit-scrollbar-track {
    border-radius: 100px;
  }
}

/* ORDER DETAIL END */
/* ORDER - GIFT TABLE START */
.table-wrapper {
  width: 100%;
}

.table-wrapper table {
  width: 100%;
}

.table-wrapper table thead {
  border-bottom: 1px solid var(--desaturated-blue);
}

.table-wrapper table thead tr {
}

.table-wrapper table thead tr th {
  padding: 24px clamp(12px, 2.1vw, 38px) 24px 16px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
}

.table-wrapper table thead tr th:last-child {
  padding-right: 1rem;
  text-align: end;
}

.table-wrapper table tbody {
}

.table-wrapper table tbody tr {
  border-bottom: 1px solid var(--thin-blue);
}

.table-wrapper table tbody tr:last-child {
  border: 0;
}

.table-wrapper table tbody tr td {
  padding: 24px clamp(12px, 2.1vw, 38px) 24px 16px;
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  color: #9c9ea0;
}

.table-wrapper table tbody tr td:last-child {
  padding-right: 1rem;
  text-align: end;
}

.table-wrapper table tbody tr td a {
  color: var(--desaturated-blue);
}

@media screen and (max-width: 1199px) {
  .table-wrapper {
    overflow-x: auto;
    text-wrap: nowrap;
  }
}

/* ORDER - GIFT TABLE END */

/* ! Hop ! */

/* BASKET STEPS */
.product-address-form-container {
  width: 100%;
}

.product-address-form-container .product-address-form-wrapper {
  width: 100%;
  display: flex;
  gap: clamp(1rem, 1.8vw, 2rem);
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form {
  flex: 1;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .product-address-title {
  padding: 8px 0px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(24px, 1.8vw, 32px);
  font-weight: 500;
  line-height: normal;
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form {
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-input {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
  flex-wrap: unset;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-input.institutional {
  display: none;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-input
  .default-form-icon-input {
  width: 100%;
  flex: 1;
  display: flex;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-input
  input,
.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-input
  textarea {
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 1rem;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1.5px solid #ced6dd;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: 0.4s;
  resize: none;
  border-radius: 0;
}

.product-address-form-container .product-address-form-wrapper .order-note {
}

.product-address-form-container
  .product-address-form-wrapper
  .order-note
  textarea {
}

.product-address-form-container .product-address-form-wrapper .order-note a {
}

.product-address-form-container
  .product-address-form-wrapper
  .order-note
  a
  svg {
}

.product-address-form-container
  .product-address-form-wrapper
  .order-note
  a
  svg
  path {
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .nice-select {
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 1rem;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1.5px solid #ced6dd;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: 0.4s;
  border-radius: 0;
  height: unset;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-radio-group {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 1.8vw, 2rem);
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
  flex-wrap: unset;
  min-height: 58px;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-input
  textarea {
  max-height: 148px;
}

.basket .order-note {
}

.basket .order-note textarea {
  width: 100%;
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 1rem;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1.5px solid #ced6dd;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: 0.4s;
  resize: none;
  border-radius: 0;
  max-height: 148px;
  margin-bottom: 2rem;
  transition: 0.4s;
}

.basket .order-note a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 22px;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-radio-group
  .radio-item {
  position: relative;
  cursor: pointer;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-radio-group
  .radio-item
  input {
  position: absolute;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-radio-group
  .radio-item
  .item-text {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  cursor: pointer;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-radio-group
  .radio-item
  .item-text::before {
  content: "";
  position: relative;
  left: 0;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-secondary);
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-radio-group
  .radio-item
  input:checked
  ~ .item-text::after {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: scale(1);
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-radio-group
  .radio-item
  .item-text::after {
  content: "";
  position: absolute;
  left: 5px;
  width: 14px;
  height: 14px;
  background: var(--color-secondary);
  border-radius: 50%;
  transform: scale(0);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.4s;
}

.product-address-form-container
  .product-address-form-wrapper
  .product-address-form
  .delivery-address-form
  .form-input
  button {
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 400;
  line-height: normal;
  margin: 0;
  flex: 1;
  padding: 6px 0;
  outline: none;
  border-radius: 0;
}

@media screen and (max-width: 767px) {
  .product-address-form-container .product-address-form-wrapper {
    flex-direction: column;
  }
}

.infoGroups.order-detail .invoice-wrapper .invoice-detail {
  width: 50%;
}

.payment-info-container {
  width: 100%;
}

.infoGroups-wrapper {
  display: flex;
  gap: 1rem;
}

.infoGroups {
  padding: 0;
}

.mybasket.payment .credit-card input {
  display: flex;
  padding: clamp(12px, 1vw, 18px) clamp(12px, 2.1vw, 38px)
    clamp(12px, 1vw, 18px) 1rem;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1.5px solid #ced6dd;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: 0.4s;
  resize: none;
  border-radius: 0;
  width: 100%;
  background: var(--thin-white) !important;
}

.card-wrap {
  width: 500px;
}

.card-type {
  display: none;
}

.odemeSecenek {
  background: #f8f8f8;
  border: none;
}

.basket-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
  background: #e4fbff;
  color: var(--color-secondary);
  padding: 13px 22px;
  margin: 0;
}

.credit-card-input-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
}

.credit-card-input-group .nice-select {
  flex: 1;
  display: flex;
  padding: clamp(12px, 1vw, 18px) clamp(12px, 2.1vw, 38px)
    clamp(12px, 1vw, 18px) 1rem;
  align-items: center;
  gap: 8px;
  flex: 1;
  border: 1.5px solid #ced6dd;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  transition: 0.4s;
  resize: none;
  border-radius: 0;
  width: 100%;
  background: var(--thin-white) !important;
  height: unset;
}

.sepet-back .default-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 22px;
}

.sepet-back {
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
}

.payment-select ul li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px)!important;
  font-weight: 500;
  line-height: normal;
  background: #fbf6f0;
  color: var(--bold-orange);
  flex: 1;
  justify-content: center;
}

.payment-options ul li a {
  color: #00a1c2;
  width: 100%;
  text-align: center;
}

.payment-options ul li a:hover {
  color: #00a1c2!important;
  background: #d6f8ff!important;
}

.payment-options ul {
  gap: 1rem;
}

.scrollArea.sozlesmeDetay {
  width: 100%;
}

div#onbilgilendirme_detay .sozlesmeDetay {
  width: 100%;
}

h4.scrollHead.inlineS {
  text-align: center;
  margin: unset;
  color: var(--desaturated-blue);
  font-size: clamp(18px, 1.5vw, 24px);
}

.payment-info-container .col-12 {
  padding: 0;
}

div#onbilgilendirme_detay .sozlesmeDetay {
  background: #f8f8f8 !important;
  border-color: var(--thin-orange);
  padding: 24px;
}

.scrollArea.sozlesmeDetay {
  background: #f8f8f8 !important;
  border-color: var(--thin-orange);
  padding: 24px;
}

.scrollArea.sozlesmeDetay {
  margin-bottom: 0;
}

.payment-info-container .payment-info-wrapper .col-12 {
  border-bottom: 1px solid var(--thin-blue);
  margin-bottom: clamp(1.5rem, 1.8vw, 2rem);
}

.basket-last-products .product-title {
  margin-bottom: clamp(1.5rem, 1.8vw, 2rem);
  font-size: clamp(20px, 1.5vw, 24px);
}

.basket-last-products .product-list {
  border-bottom: 0 !important;
  padding: 0 !important;
  margin-bottom: 2rem;
}

.basket .summary-aggrement {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 4px;
  gap: 8px;
  border-top: 1px solid var(--thin-blue);
}

.custom-control-input:checked ~ .custom-control-label::before {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
}

.custom-control-label::after {
  box-shadow: none !important;
}

h5.odemeAcklama {
  font-size: 14px;
}

.odemeBilgi {
  font-size: 14px;
}

@media screen and (max-width: 1199px) {
  .infoGroups-wrapper {
    flex-direction: column;
  }

  .infoGroups.order-detail .invoice-wrapper .invoice-detail {
    width: 100%;
  }
}

@media screen and (max-width: 991px) {
  .payment-info-container {
    padding-top: 12px;
  }

  .infoGroups-wrapper {
    flex-direction: unset;
  }

  .infoGroups.order-detail .invoice-wrapper .invoice-detail {
    width: 50%;
  }
}

@media screen and (max-width: 767px) {
  .card-wrap {
    width: 100%;
  }

  .odemeSecenek {
    padding: 12px;
  }

  .infoGroups-wrapper {
    flex-direction: column;
  }

  .infoGroups.order-detail .invoice-wrapper .invoice-detail {
    width: 100%;
  }

  .mybasket.payment .payment-select .payment-options ul {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .payment-select ul li {
    flex: 1 0 calc(50% - 0.5rem);
  }

  .payment-info-container .col-12 {
    padding: 0;
  }

  .payment-info-container {
    padding-top: 0;
  }

  .payment-options ul li a {
    /* width: 100%; */
    text-align: center;
  }

  .card-wrap p {
    font-size: 14px;
    margin-bottom: 0.5rem;
  }

  .card-wrap label {
    font-size: 14px;
  }

  h5.odemeAcklama {
    font-size: 15px;
    font-weight: 400;
  }

  .odemeBanks .odeme-icerik {
    flex-direction: column;
    align-items: start !important;
    justify-content: start;
  }

  .odemeBilgi {
    margin-left: 0;
  }

  .odemeImg {
    margin-bottom: 1rem;
  }

  .odemeBilgi p {
    font-size: 14px;
  }

  .cvv-type h6 {
    font-size: 14px;
  }

  .alert.alert-spec > .message {
    font-size: 14px;
  }

  div#onbilgilendirme_detay .sozlesmeDetay {
    padding: 24px;
    margin-top: 1rem;
  }

  .scrollArea.sozlesmeDetay {
    margin-top: 1rem;
    padding: 24px;
  }
}

.product-select-address-wrapper {
}

.product-select-address-wrapper .select-address-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-select-address-wrapper .select-address-header .header-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(22px, 1.5vw, 24px);
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.product-select-address-wrapper .select-address-header .btn-light-orange {
  padding: 7px 24px;
  text-align: center;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 17px;
  font-weight: 400;
  line-height: normal;
}

.product-select-address-wrapper .product-address-list {
  padding: 2rem 0;
}

.product-select-address-wrapper .product-address-list .list-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail {
  flex: 1 0 calc(50% - 1rem);
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .invoice-edit {
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .invoice-edit
  svg {
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .invoice-edit
  svg
  path {
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .detail-title {
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .detail-description {
  border-bottom: 1px solid var(--bold-orange);
  margin-bottom: 12px;
  padding-bottom: 12px;
  width: 100%;
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .detail-description
  .description-item {
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .detail-description
  .description-item
  br {
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .choose-address-type {
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .choose-address-type
  .type-input {
  position: relative;
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .choose-address-type
  .type-input
  input {
  position: absolute;
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .choose-address-type
  .type-input
  label {
  color: #878787;
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 400;
  line-height: 26px;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.4s;
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .choose-address-type
  .type-input
  label::before {
  position: relative;
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .choose-address-type
  .type-input
  input:checked
  ~ label::after {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(-50%) scale(1);
}

.product-select-address-wrapper
  .product-address-list
  .list-wrapper
  .invoice-detail
  .choose-address-type
  .type-input
  label:after {
  position: absolute;
  content: "";
  left: 4px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  background: var(--color-secondary);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.4s;
}

.odemeYazi h4 {
  color: var(--desaturated-blue);
}

@media screen and (max-width: 767px) {
  .product-select-address-wrapper .select-address-header {
    flex-direction: column;
    align-items: start;
    gap: 1rem;
  }

  .product-select-address-wrapper .select-address-header .btn-light-orange {
    padding: 4px 20px;
    font-size: 16px;
  }

  .product-select-address-wrapper .select-address-header .header-title {
    font-size: 20px;
  }

  .odemeYazi {
    padding: 24px;
  }

  .odemeYazi h4 {
    font-size: 20px;
    margin-bottom: 1rem;
  }

  .odemeYazi p {
    font-size: 14px;
  }
}

/* FORGOT PASSWORD START */
.forgot-password {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70svh;
  background: #f8f8f8;
  position: relative;
  overflow: hidden;
}

.forgot-password .forgot-bg {
  position: absolute;
  inset: 0;
}

.forgot-password .forgot-password-wrapper {
  position: relative;
}

.forgot-password .forgot-password-wrapper .forgot-card {
  padding: 2rem;
  background: var(--thin-white);
  width: 600px;
  border-radius: 12px;
}

.forgot-password .forgot-password-wrapper .forgot-card .forgot-card-header {
  margin-bottom: 2rem;
}

.forgot-password
  .forgot-password-wrapper
  .forgot-card
  .forgot-card-header
  .header-title {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(24px, 1.5vw, 32px);
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

.forgot-password .forgot-password-wrapper .forgot-card .forgot-card-body {
}

.forgot-password
  .forgot-password-wrapper
  .forgot-card
  .forgot-card-body
  .card-form {
}

.forgot-password
  .forgot-password-wrapper
  .forgot-card
  .forgot-card-body
  .card-form
  .form-input {
  display: flex;
  gap: 8px;
}

.forgot-password
  .forgot-password-wrapper
  .forgot-card
  .forgot-card-body
  .card-form
  .form-input
  input {
  display: flex;
  padding: 15px clamp(12px, 2.1vw, 38px) 15px 12px;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  border: 1.5px solid #ced6dd;
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  width: 100%;
  transition: 0.4s;
  border-radius: 0;
  height: 100%;
}

.forgot-password
  .forgot-password-wrapper
  .forgot-card
  .forgot-card-body
  .card-form
  .form-input
  .btn-light-orange {
  padding: 5px 22px;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
}

@media screen and (max-width: 767px) {
  .forgot-password .forgot-password-wrapper .forgot-card {
    width: 90vw;
  }

  .forgot-password
    .forgot-password-wrapper
    .forgot-card
    .forgot-card-body
    .card-form
    .form-input {
    flex-direction: column;
  }

  .forgot-password
    .forgot-password-wrapper
    .forgot-card
    .forgot-card-body
    .card-form
    .form-input
    .btn-light-orange {
    padding: 11px 0;
  }
}

/* FORGOT PASSWORD END */
.mobile-search-close {
  display: none;
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  right: 2rem;
}

header.blog-control .mobile-search-close svg path {
  fill: var(--desaturated-blue);
}

@media screen and (max-width: 991px) {
  .mobile-search-close {
    display: block;
  }

  .mobile-search-close.active {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }
}

/* USER LOGIN - REGISTER START */
.user-screen-back {
  position: absolute;
  right: 0;
  z-index: 1;
  top: 0;
  margin: 24px;
}

.user-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100svh;
  background: var(--color-secondary-50);
  padding-bottom: 1rem;
  position: relative;
}

.user-screen.user-register {
  height: 100%;
  min-height: 100vh;
}

.user-screen.user-register .screen-wrapper {
  gap: 1rem;
}

.user-screen .screen-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.user-screen .screen-wrapper .screen-form-container {
}

.user-screen.user-register .screen-wrapper .screen-form-container .form-header {
  padding: 50px 0;
}

.user-screen .screen-wrapper .screen-form-container .form-header {
  padding: 3.6vw 0 5vw 0;
  text-align: center;
}

.user-screen .screen-wrapper .screen-form-container .form-header img {
  width: 128px;
  height: 128px;
}

.user-screen .screen-wrapper .screen-form-container .form-body {
  display: flex;
  padding: 48px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1 0 0;
  align-self: stretch;
  background: var(--white);
  width: 540px;
}

.user-screen .screen-wrapper .screen-form-container .form-body .body-tabs {
  display: flex;
  width: 100%;
  gap: clamp(1rem, 1.8vw, 2rem);
  border-bottom: 1px solid var(--thin-blue);
  margin-bottom: clamp(1rem, 1.8vw, 2rem);
  padding-bottom: clamp(1rem, 1.8vw, 2rem);
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-tabs
  .tabs-link {
  display: flex;
  padding: 6px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex: 1 0 0;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
  transition: 0.4s;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-tabs
  .tabs-link.active {
  background: var(--thin-blue);
}

.user-screen .screen-wrapper .screen-form-container .form-body .body-form {
  width: 100%;
}

.user-screen .screen-wrapper .screen-form-container .form-body .body-form form {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.8vw, 2rem);
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input {
  position: relative;
  flex: 1;
  width: 100%;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input
  .input-icon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--desaturated-blue);
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input
  .input-icon
  svg:nth-child(2) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input
  .input-icon.show
  svg:nth-child(1) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input
  .input-icon.show
  svg:nth-child(2) {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input
  .input-icon
  svg {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.4s;
  cursor: pointer;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input
  input {
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 12px;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #ced6dd;
  width: 100%;
  transition: 0.4s;
  color: var(--desaturated-blue);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 0;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-input
  input:focus {
  border-color: var(--color-secondary);
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .forgot-password-link {
  padding: 0 4px;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .forgot-password-link
  a {
  color: var(--color-secondary);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  text-decoration-line: underline;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-btn {
  display: flex;
  padding: clamp(8px, 0.8vw, 13px) 22px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: normal;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-btn
  svg {
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-btn
  svg
  path {
}

.user-screen .screen-wrapper .screen-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.user-screen .screen-wrapper .screen-sign .sign-text {
  color: var(--5-f-6368, #5f6368);
  font-family: Inter;
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
}

.user-screen .screen-wrapper .screen-sign .sign-text span {
  color: var(--5-f-6368, #5f6368);
  text-align: center;
  font-family: Inter;
  font-size: 12px;
  font-weight: 500;
  line-height: 28px;
  /* 233.333% */
}

.user-screen .screen-wrapper .screen-sign .biltek-signature {
}

.user-screen
  .screen-wrapper
  .screen-sign
  .biltek-signature
  .biltek-signature-text {
}

.user-screen .screen-wrapper .screen-sign .biltek-signature #biltek-signature {
}

.user-screen
  .screen-wrapper
  .screen-sign
  .biltek-signature
  #biltek-signature
  img {
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  .form-aggrement {
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  .form-aggrement
  p {
  font-size: 14px;
  color: #878787;
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  margin: 0;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  .form-aggrement
  p
  a {
  color: var(--desaturated-blue);
  font-weight: 500;
  text-decoration-line: underline;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-captcha {
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-captcha
  input {
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 12px;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #ced6dd;
  width: 100%;
  transition: 0.4s;
  color: #9c9ea0;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  height: 100%;
  border-radius: 0;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-captcha
  input:focus {
  border-color: var(--color-secondary);
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-captcha
  img {
  max-height: 58px;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-captcha
  .form-row {
  margin: 0;
  gap: clamp(0.5rem, 0.9vw, 1rem);
}

.user-screen .user-screen-bg {
  position: absolute;
  inset: 0;
  top: 6.7vw;
  pointer-events: none;
  user-select: none;
}

.user-screen .user-screen-bg img {
  width: 100%;
  height: 100%;
}

.user-screen.user-forgot-password .screen-wrapper {
  height: auto;
}

.user-screen.user-forgot-password h1 {
  font-size: clamp(24px, 1.8vw, 36px);
  margin-bottom: 2rem;
}

section.user-screen.user-forgot-password {
  height: 80svh;
}

section.user-screen.user-forgot-password .user-screen-bg img {
  object-fit: cover;
}

section.user-screen.user-forgot-password .user-screen-bg {
  top: unset;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-group {
  display: flex;
  gap: clamp(1rem, 1.8vw, 2rem);
  margin-bottom: 0;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-group
  .nice-select {
  display: flex;
  padding: 18px clamp(12px, 2.1vw, 38px) 18px 12px;
  align-items: center;
  gap: 8px;
  border: 1.5px solid #ced6dd;
  width: 100%;
  transition: 0.4s;
  color: var(--desaturated-blue);
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border-radius: 0;
  float: unset;
  height: unset;
}

.user-screen
  .screen-wrapper
  .screen-form-container
  .form-body
  .body-form
  form
  .form-group
  .nice-select:focus {
  border-color: var(--color-secondary);
}

@media screen and (max-width: 991px) {
  .user-screen .screen-wrapper .screen-form-container .form-header {
    padding: 50px 0;
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-captcha
    input {
    padding: 12px;
  }

  .user-screen .user-screen-bg img {
    object-fit: cover;
  }

  .user-screen-back {
    display: none;
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-input
    .password-icon {
    height: 96%;
    width: 50px;
  }
}

@media screen and (max-width: 767px) {
  .user-screen .screen-wrapper .screen-form-container .form-body {
    width: 100%;
    padding: 1rem;
    flex: unset;
  }

  .user-screen .screen-wrapper {
    width: 100%;
    padding: 1rem;
    gap: 2rem;
  }

  .user-screen .screen-wrapper .screen-form-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-input
    input {
    padding: 12px;
    padding-right: 48px;
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    .form-aggrement
    p {
    text-align: center;
  }

  .user-screen .screen-wrapper .screen-form-container .form-header {
    padding: 24px 0;
  }

  .user-screen {
    height: 100%;
  }

  .user-screen .screen-wrapper .screen-sign {
    gap: 12px;
  }

  .user-screen .screen-wrapper .screen-sign .sign-text {
    line-height: normal;
  }

  .user-screen.user-screen-login {
    height: 100svh;
  }

  section.user-screen.user-forgot-password .user-screen-bg {
    top: 0;
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-group
    .nice-select {
    padding: 12px;
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .select-group {
    flex-direction: column;
  }
}

/* USER LOGIN - REGISTER END */

.s-title {
  font-size: clamp(20px, 1.5vw, 24px);
  margin-bottom: clamp(1.5rem, 1.8vw, 2rem);
}

.flatpickr-monthDropdown-months {
  display: block !important;
}

.nice-select.flatpickr-monthDropdown-months {
  display: none !important;
}

.flatpickr-current-month {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.default-form-icon-input {
  position: relative;
}

.default-form-icon-input svg {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  .form-input {
  flex: 1;
  display: flex;
  width: 100%;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  .form-input
  input {
  width: 100%;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  .form-input
  .input-icon {
  width: 100%;
}

.nice-select:after {
  display: none;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  .nice-select {
  flex: 1;
  display: flex;
  width: 100%;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  .form-input
  input {
  width: 100%;
}

.account
  .account-wrapper
  .account-left-area
  .left-area-body
  .left-area-info
  .info-item
  .info-form
  .input-group
  .nice-select
  .input-icon {
  width: 100%;
}

/* */

.s-breadcrumb {
  margin-bottom: 1rem;
}

.s-breadcrumb .breadcrumb {
  display: flex;
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
}

.s-breadcrumb .breadcrumb::-webkit-scrollbar {
  display: none;
}

.s-breadcrumb .breadcrumb .breadcrumb-item {
  font-size: 14px;
  color: var(--desaturated-blue);
}

.s-breadcrumb .breadcrumb .breadcrumb-item a {
  font-size: 14px;
  color: #878787;
}

ol.breadcrumb .breadcrumb-item.breadcrumb-item:before {
  color: var(--desaturated-blue);
  font-weight: normal;
}

.breadcrumb-item + .breadcrumb-item::before {
  content: ">";
}

@media screen and (max-width: 991px) {
  .s-breadcrumb {
    margin-bottom: 0;
    padding-bottom: 0;
  }
}

.s-editor h1,
.s-editor h2,
.s-editor h3,
.s-editor h4,
.s-editor h5,
.s-editor h6 {
  font-size: clamp(24px, 1.8vw, 32px);
}

.s-editor h1,
.s-editor h2,
.s-editor h3,
.s-editor h4,
.s-editor h5,
.s-editor h6 {
  font-size: clamp(24px, 1.8vw, 32px);
}

.s-editor p {
  font-size: clamp(16px, 1vw, 19px);
}

/* DATEPICKER */

.flatpickr-day {
  border-radius: 0;
  color: var(--desaturated-blue);
}

.flatpickr-day.today {
  border-color: var(--color-secondary);
}

span.flatpickr-weekday {
  color: var(--desaturated-blue);
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  color: var(--desaturated-blue);
}

.flatpickr-current-month input.cur-year {
  color: var(--desaturated-blue);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: var(--color-secondary);
}

.flatpickr-day.today:hover {
  border-color: var(--color-secondary);
  background: var(--color-secondary-50);
  color: var(--color-secondary);
}

.flatpickr-day.today:focus {
  border-color: var(--color-secondary);
  background: var(--color-secondary-50);
  color: var(--color-secondary);
}

.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  border-color: var(--color-secondary);
  background: var(--color-secondary-50);
}

.flatpickr-months .flatpickr-month {
  background: var(--thin-white);
}

.flatpickr-weekdays {
  background: var(--thin-white);
}

.dayContainer {
  background: var(--thin-white);
}

@media (hover: hover) {
  .services-list .list-item a .item-img:hover .img-icon {
    opacity: 1;
  }

  header .header-wrapper .header-user .user-search:hover {
    color: var(--desaturated-blue);
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-group
    .nice-select:hover {
    border-color: var(--color-secondary);
  }

  .flatpickr-months .flatpickr-prev-month:hover svg,
  .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-secondary);
  }

  .flatpickr-day.today:hover {
    border-color: var(--color-secondary);
    background: var(--color-secondary-50);
    color: var(--color-secondary);
  }

  .s-breadcrumb .breadcrumb .breadcrumb-item a:hover {
    color: var(--desaturated-blue);
  }

  header .header-wrapper .header-nav .nav-menu:hover .nav-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  header
    .header-wrapper
    .header-nav
    .nav-item
    .nav-submenu
    .sub-menu-item
    a:hover {
    background: var(--thin-cyan);
  }

  header .header-wrapper .header-nav .nav-item .nav-link:hover {
    color: var(--color-secondary);
  }

  header .header-wrapper .user-basket:hover .basket-info,
  header .header-wrapper .user-basket:hover {
    color: var(--thin-white);
  }

  header .header-wrapper .user-basket:hover {
    background: var(--color-secondary);
  }

  header .header-wrapper .user-account .account-button:hover {
    background: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
  }

  header .header-wrapper .user-account .account-button:hover svg path {
    fill: var(--color-secondary);
  }

  header .header-wrapper .user-account.isLogged:hover .account-nav-wrapper {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  header
    .header-wrapper
    .user-account
    .account-nav
    .nav-item
    .item-link
    .item-icon:hover {
    background: var(--thin-cyan);
  }

  .header-campaign .campaign-wrapper .campaign-text .text-link:hover svg {
    transform: translateX(6px);
  }

  .header-search
    .search-wrapper
    .search-header
    .header-input-group
    .header-input:hover {
    border-color: var(--color-secondary);
  }

  .login-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-input
    input:hover {
    border-color: var(--color-secondary);
  }

  .login-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-input
    .password-icon:hover {
    color: var(--color-secondary);
  }

  .login-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .forgot-password-link
    a:hover {
    color: var(--desaturated-blue);
  }

  .login-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-btn:hover {
    background: transparent;
    border-color: var(--light-orange);
    color: var(--light-orange);
  }

  .login-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-btn:hover
    svg
    path {
    fill: var(--light-orange);
  }

  .login-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    .register-text
    .register-popup-button:hover {
    color: var(--desaturated-blue);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-group
    .nice-select:hover {
    border-color: var(--color-secondary);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-group
    input:hover {
    border-color: var(--color-secondary);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-input
    input:hover {
    border-color: var(--color-secondary);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-input
    .input-icon:hover {
    color: var(--color-secondary);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-btn:hover {
    background: transparent;
    border-color: var(--light-orange);
    color: var(--light-orange);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    form
    .form-btn:hover
    svg
    path {
    fill: var(--light-orange);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    .form-aggrement
    .info-text
    a:hover {
    color: var(--color-secondary);
  }

  .register-popup
    .popup-wrapper
    .popup-form-container
    .form-wrapper
    .form-body
    .login-text
    .login-popup-button:hover {
    color: var(--desaturated-blue);
  }

  .homepage-about .about-wrapper .about-link .link-item a:hover {
    color: var(--desaturated-blue);
  }

  .services-list .list-item a .item-img:hover img {
    transform: scale(1.2);
  }

  .homepage-education
    .education-wrapper
    .education-header
    .header-navigation
    .navigation-btn:hover
    svg
    path {
    fill: var(--color-secondary);
  }

  .homepage-education
    .education-wrapper
    .education-list-container
    .list-container-wrapper
    .list-item:hover
    .item-img
    img {
    transform: scale(1.2);
  }

  .homepage-education
    .education-wrapper
    .education-list-container
    .list-container-wrapper
    .list-item:hover
    .item-title {
    color: var(--color-secondary);
  }

  .homepage-accreditation
    .accreditation-wrapper
    .accreditation-content
    .content-text
    .content-link:hover {
    color: var(--desaturated-blue);
  }

  .accreditation-popup
    .popup-wrapper
    .popup-body
    .popup-list
    .list-item
    .item-title:hover {
    color: var(--color-secondary);
  }

  .accreditation-popup
    .popup-wrapper
    .popup-footer
    .accreditation-popup-close:hover {
    color: var(--desaturated-blue);
  }

  .homepage-blog
    .blog-wrapper
    .blog-list-container
    .blog-list
    .list-item:hover
    .item-header
    img,
  .s-blog-card:hover .item-header img {
    transform: scale(1.2);
  }

  .homepage-blog
    .blog-wrapper
    .blog-list-container
    .blog-list
    .list-item:hover
    .item-body
    .item-title,
  .s-blog-card:hover .item-body .item-title {
    color: #00a1c2;
  }

  .s-blog-list .list-item:hover {
    background: transparent;
    border-color: #b7b7b7;
  }

  .homepage-subscription
    .subscription-wrapper
    .subscription-content
    .content-body
    .content-form
    form
    .input-group
    .group-button:hover
    svg
    path {
    fill: var(--desaturated-blue);
  }

  .homepage-subscription
    .subscription-wrapper
    .subscription-content
    .content-body
    .content-form
    form
    .input-group
    .group-button.btn-light-orange:hover {
    color: var(--desaturated-blue);
  }

  .homepage-subscription
    .subscription-wrapper
    .subscription-content
    .content-body
    .content-form
    form
    .input-group
    input:hover {
    background: #ffc26640;
  }

  .team .team-wrapper .team-list-container .team-list .list-item:hover {
    border-color: var(--light-orange);
  }

  .team
    .team-wrapper
    .team-list-container
    .team-list
    .list-item:hover
    .item-body
    .item-icon {
    opacity: 1;
    visibility: visible;
  }

  .team-detail
    .detail-wrapper
    .detail-user-container
    .user-info
    .info-services
    .services-content:hover {
    border-color: var(--light-orange);
    background: transparent;
  }

  .team-detail .detail-wrapper .detail-user-tabs .tab-list .list-item a:hover {
    background: var(--thin-white);
    color: var(--deseturated-blue);
  }

  .team-detail
    .detail-wrapper
    .detail-user-tabs
    .tab-content
    .content-item
    .expertise-list
    .list-item.item-accordion:hover
    .item-header {
    background: var(--desaturated-blue);
  }

  .s-content .item-body .body-item:hover {
    color: var(--desaturated-blue);
  }

  .accreditation
    .accreditation-wrapper
    .accreditation-content
    .content-list
    .content-item
    .item-body
    .body-item:hover {
    color: var(--desurated-blue);
  }

  .services-detail
    .detail-wrapper
    .detail-container
    .detail-user-container
    .user-info
    .info-body
    .body-form
    form
    .form-list
    .list-container
    .list-item
    label:hover {
    color: var(--desaturated-blue);
  }

  .services-detail
    .detail-wrapper
    .detail-container
    .detail-user-container
    .user-info
    .info-body
    .body-form
    form
    .form-item
    input:hover {
    border-color: var(--desaturated-blue);
    color: var(--desaturated-blue);
  }

  .services-detail
    .detail-wrapper
    .detail-container
    .detail-user-container
    .user-info
    .info-body
    .body-form
    form
    .form-input:hover
    svg
    path {
    fill: var(--desaturated-blue);
  }

  .services-detail
    .detail-wrapper
    .detail-container
    .detail-user-container
    .user-info
    .info-body
    .body-form
    form
    .form-flex
    .flex-item
    label:hover {
    color: var(--desaturated-blue);
  }

  .services-detail
    .detail-wrapper
    .detail-container
    .detail-user-container
    .user-info
    .info-footer
    .info-social.program-social
    .social-item
    a:hover {
    background: #c8f0f8;
  }

  .detail-tab-container .tab-list .list-item a:hover {
    background: var(--thin-white);
    color: var(--desaturated-blue);
  }

  .detail-tab-container
    .tab-content
    .content-item
    .item-wrapper
    .item-link:hover {
    color: var(--desaturated-blue);
  }

  .blog .blog-wrapper .blog-header .header-search-blog input:hover,
  .s-blog-header .header-search-blog input:hover {
    background: #f8f1f1;
  }

  .blog-slider-container
    .blog-slider
    .slider-list
    .slider-item
    .item-wrapper:hover
    .item-img
    img {
    transform: scale(1.2);
  }

  .blog-slider-container
    .blog-slider
    .slider-list
    .slider-item
    .item-wrapper:hover
    .item-content
    .content-header
    .content-title {
    color: var(--bold-orange);
  }

  .blog-slider-container
    .blog-slider
    .slider-list
    .slider-item
    .item-wrapper:hover
    .item-content
    .content-footer
    .content-icon
    svg {
    color: var(--bold-orange);
  }

  .blog-detail
    .detail-wrapper
    .detail-header
    .header-left-area
    .left-area-link:hover {
    background: var(--desaturated-blue);
    color: var(--thin-blue);
  }

  .blog-detail
    .detail-wrapper
    .detail-header
    .header-right-area
    .right-area-sort-container
    .sort-item:hover {
    color: var(--color-secondary);
  }

  .blog-detail
    .detail-wrapper
    .detail-content
    .content-body
    .content-social
    .s-social
    .social-item
    a:hover {
    background: var(--color-secondary-50);
  }

  .blog-detail
    .detail-wrapper
    .detail-editor
    .share-social
    .s-social
    .social-item
    a:hover {
    background: var(--color-secondary-50);
  }

  .blog-category
    .category-wrapper
    .category-list-container
    .category-list-header
    .header-left-area
    .left-area-link:hover {
    color: var(--thin-blue);
    background: var(--desaturated-blue);
  }

  .blog-category
    .category-wrapper
    .category-list-container
    .category-list-header
    .header-right-area
    .right-area-sort
    .sort-list
    .list-item
    a:hover {
    background: var(--thin-blue);
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group
    input:hover,
  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group
    textarea:hover {
    border-color: var(--color-secondary);
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-info
    .info-item
    .info-form
    .input-group
    .nice-select:hover {
    border-color: var(--color-secondary);
  }

  .account
    .account-wrapper
    .account-right-area
    .account-nav-container
    .account-nav
    .nav-item
    a:hover {
    color: var(--color-secondary);
  }

  .account
    .account-wrapper
    .account-left-area
    .left-area-body
    .left-area-kvkk
    p
    a:hover {
    color: var(--color-secondary);
  }

  .order-detail .invoice-wrapper .invoice-detail .invoice-edit:hover {
    color: var(--color-secondary);
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-list
    .product-list-item
    .item-left-area
    .item-info
    .info-title:hover {
    color: var(--color-secondary);
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-discount
    .discount-input:hover {
    border-color: var(--desaturated-blue);
  }

  .basket
    .basket-container
    .basket-product
    .product-list-container
    .product-discount
    .discount-button:hover {
    color: var(--desaturated-blue);
  }

  .payment-btn:hover {
    background: transparent;
    border-color: var(--color-secondary);
    color: var(--color-secondary);
  }

  .order-detail
    .detail-wrapper
    .detail-container
    .detail-product
    .product-item:hover
    .product-info
    .info-text
    .text-title {
    color: var(--color-secondary);
  }

  .table-wrapper table tbody tr td a:hover {
    color: var(--color-secondary);
  }

  .contact
    .contact-wrapper
    .contact-info-container
    .info-list
    .list-item
    .item-link:hover {
    color: var(--color-secondary);
  }

  .contact
    .contact-wrapper
    .contact-info-container
    .info-map
    .map-wrapper
    .map-location
    .location-link:hover {
    background: var(--desaturated-blue);
    color: var(--light-orange);
    border-color: var(--desaturated-blue);
  }

  .contact
    .contact-wrapper
    .contact-info-container
    .info-map
    .map-wrapper
    .map-location
    .location-link:hover
    svg
    path {
    fill: var(--light-orange);
  }

  .contact
    .contact-wrapper
    .contact-form-container
    .contact-form-right-area
    .contact-form
    input:hover,
  .contact
    .contact-wrapper
    .contact-form-container
    .contact-form-right-area
    .contact-form
    textarea:hover {
    border-color: var(--color-secondary);
  }

  .contact
    .contact-wrapper
    .contact-form-container
    .contact-form-right-area
    .contact-form
    .form-textarea
    textarea:hover {
    border-color: var(--color-secondary);
  }

  .contact
    .contact-wrapper
    .contact-form-container
    .contact-form-right-area
    .contact-form
    .form-aggrement
    .info-text
    a:hover {
    color: var(--color-secondary);
  }

  .s-social .social-item a:hover {
    background: #fbba69;
  }

  footer
    .footer-wrapper
    .footer-container-wrapper
    .footer-left-container
    .footer-contact
    a:hover {
    color: #2a99b9;
  }

  footer
    .footer-wrapper
    .footer-container-wrapper
    .footer-list-container
    .footer-list-wrapper
    .footer-list
    .list-item
    .item-link:hover {
    color: #2a98b8;
  }

  .btn-light-orange:hover {
    background-color: transparent;
    color: var(--light-orange);
    border-color: var(--light-orange);
  }

  .btn-des-blue:hover {
    background-color: transparent;
    color: var(--desaturated-blue);
    border-color: var(--desaturated-blue);
  }

  .btn-outline-des-blue:hover {
    background-color: var(--desaturated-blue);
    color: var(--white);
  }

  .btn-color-secondary:hover {
    background-color: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
  }

  .btn-thin-cyan:hover {
    background-color: transparent;
    color: var(--thin-cyan);
    border-color: var(--thin-cyan);
  }

  header
    .header-wrapper
    .header-user
    .user-content
    .user-basket:hover
    .basket-review {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
  }

  .basket-review
    .review-wrapper
    .review-header
    .review-product-list
    .list-item
    .item-info
    .info-header
    .header-title
    .info-title:hover {
    color: var(--color-secondary);
  }

  .basket-review
    .review-wrapper
    .review-header
    .review-product-list
    .list-item
    .item-info
    .info-header
    .remove-product:hover {
    color: var(--desaturated-blue);
  }

  .product-address-form-container
    .product-address-form-wrapper
    .product-address-form
    .delivery-address-form
    .form-input
    input:hover,
  .product-address-form-container
    .product-address-form-wrapper
    .product-address-form
    .delivery-address-form
    .form-input
    textarea:hover {
    border-color: var(--color-secondary);
  }

  .product-address-form-container
    .product-address-form-wrapper
    .product-address-form
    .delivery-address-form
    .nice-select:hover {
    border-color: var(--color-secondary);
  }

  .basket .order-note textarea:hover {
    border-color: var(--color-secondary);
  }

  .payment-options ul li a:hover {
    background: var(--light-orange);
    color: var(--white);
  }

  .wdOk label.custom-control-label a:hover {
    color: var(--color-secondary);
  }

  .product-select-address-wrapper
    .product-address-list
    .list-wrapper
    .invoice-detail
    .choose-address-type
    .type-input:hover
    label {
    color: var(--desaturated-blue);
  }

  .forgot-password
    .forgot-password-wrapper
    .forgot-card
    .forgot-card-body
    .card-form
    .form-input
    input:hover {
    border-color: var(--color-secondary);
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-tabs
    .tabs-link:hover {
    background-color: var(--thin-blue);
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-input
    .input-icon:hover {
    color: var(--color-secondary);
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-input
    input:hover {
    border-color: var(--color-secondary);
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .forgot-password-link
    a:hover {
    color: var(--desaturated-blue);
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    .form-aggrement
    p
    a:hover {
    color: var(--color-secondary);
  }

  .user-screen
    .screen-wrapper
    .screen-form-container
    .form-body
    .body-form
    form
    .form-captcha
    input:hover {
    border-color: var(--color-secondary);
  }
}

.custom-description-item {
  color: #878787;
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 400;
  line-height: 26px;
  margin: 0;
}

.basket-last-products {
  padding-top: clamp(1.5rem, 1.8vw, 2rem);
  border-top: 1px solid var(--thin-blue);
}

.alert.alert-spec.alert-dismissible.alert-warning {
  border: 1px solid var(--thin-orange);
  background: var(--white);
  border-radius: 0;
}

.alert.alert-dismissible.alert-warning .close {
  outline: none;
}

.alert.alert-spec > .message {
  padding: 15px 35px 15px 8px;
}

.alert.alert-spec.alert-dismissible.alert-info {
  border: 1px solid var(--moderate-blue);
  background: var(--thin-blue);
  border-radius: 0;
}

.alert.alert-spec.alert-dismissible.alert-success {
  border: 1px solid var(--bold-green);
  border-radius: 0;
}

.basket .card-wrap {
  width: 100%;
  margin: unset;
}

.account .order-detail .invoice-wrapper .invoice-detail .detail-nav-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.account .order-detail.add-new-address {
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--thin-blue);
}

.nfa-custom-checkbox label {
  color: #878787;
  font-size: clamp(14px, 0.9vw, 16px);
  font-weight: 400;
  line-height: 26px;
  margin: 0;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: 0.4s;
}

.nfa-custom-checkbox {
  position: relative;
}

.nfa-custom-checkbox input {
  position: absolute;
  opacity: 0;
}

.nfa-custom-checkbox label::before {
  position: relative;
  content: "";
  width: 20px;
  height: 20px;
  border: 1px solid var(--color-secondary);
  border-radius: 50%;
}

.nfa-custom-checkbox label::after {
  position: absolute;
  content: "";
  left: 4px;
  top: 50%;
  transform: translateY(-50%) scale(0);
  width: 12px;
  height: 12px;
  background: var(--color-secondary);
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.4s;
}

.nfa-custom-checkbox input:checked ~ label::after {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  transform: translateY(-50%) scale(1);
}

.account .order-detail .invoice-wrapper .invoice-card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.account .order-detail .invoice-wrapper .invoice-card-wrapper .invoice-detail {
  width: calc(50% - 1rem);
}

.border-moderate-magenta {
  border-color: var(--moderate-magenta) !important;
}

.bank-acount-container > ul > li {
  border-radius: 0;
  padding: 1.5rem 1rem;
  background: transparent;
  border: 1px solid var(--thin-blue);
  background-color: var(--NFA-10-Orange);
}

.bank-acount-container > ul > li .bank-info .title {
  font-size: 18px;
  color: var(--desaturated-blue);
}

.bank-acount-container > ul {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.custom-checkbox-label-control {
  margin-left: 6px;
}

.custom-checkbox-label-control::before {
  border-radius: 0 !important;
  border: 1px solid #fbb965 !important;
}

.custom-control-input:checked
  ~ .custom-control-label.custom-checkbox-label-control::before {
  background: #fbb965;
  box-shadow: none !important;
}

.custom-checkbox-label-control::before {
  box-shadow: none !important;
}

.page-404 {
  position: relative;
  background-color: #f8f8f8;
  overflow: hidden;
}

.page-404 .bg-404 {
  position: absolute;
  pointer-events: none;
  inset: 0;
}

.page.nf404 .svg path {
  /* fill: var(--color-secondary); */
}

.nf404 h2 {
  color: var(--color-secondary-700);
}

.page-404-wrapper {
  position: relative;
}

.nf404 h3 {
  color: var(--color-secondary-700);
}

.page.nf404 a svg {
  stroke: none;
}

.page.nf404 a {
  box-shadow: none !important;
  border-radius: 0;
  height: auto;
  padding: 12px 24px !important;
}

.page.nf404 a:hover {
  color: var(--light-orange);
}

.page.nf404 a:hover svg {
  fill: var(--light-orange);
  stroke: none;
}

.page.nf404 {
  padding-top: 100px;
}

.account .order-nav-buttons {
  display: flex;
  align-items: baseline;
  justify-content: end;
  gap: 12px;
}

@media screen and (max-width: 1199px) {
  .bank-acount-container > ul > li {
    height: auto;
  }

  .bank-acount-container > ul {
    grid-template-columns: 1fr;
  }

  .page.nf404 {
    padding-top: 50px;
  }

  .nf404 h2 {
    padding: 0 50px;
    font-size: 42px;
    margin-top: 0;
  }

  .nf404 .svg {
    margin-bottom: 0;
  }

  .page.nf404 a {
    margin-top: 0;
  }
}

@media screen and (max-width: 991px) {
  .page.nf404 {
    padding-top: 0;
  }

  .nf404 h2 {
    font-size: 32px;
  }
}

@media screen and (max-width: 767px) {
  .account
    .order-detail
    .invoice-wrapper
    .invoice-card-wrapper
    .invoice-detail {
    width: 100%;
  }

  .bank-acount-container > ul > li .bank-img img {
    width: 100%;
    height: 50px;
  }

  .custom-usr-container button {
    width: 100%;
  }

  .orders-detail-payment .form-group {
    align-items: start;
  }

  .nf404 h2 {
    font-size: 32px;
    margin-top: 0;
  }
}

/* ! İkinci ekleme ! */

/* COMPONENTS */
.text-thin-orange {
  color: var(--thin-orange);
}

.text-thin-orange-md {
  color: var(--thin-orange-md);
}

.bg-strong-cyan-blue-20 {
  background-color: var(--strong-cyan-blue-20);
}

.bg-moderate-magenta {
  background-color: var(--moderate-magenta);
}

.bg-moderate-magenta-10 {
  background-color: var(--moderate-magenta-10);
}

.bg-moderate-magenta-20 {
  background-color: var(--moderate-magenta-20);
}

.text-moderate-magenta {
  color: var(--moderate-magenta) !important;
}

.text-bold-red {
  color: var(--bold-red) !important;
}

.text-bold-green {
  color: var(--bold-green) !important;
}

.text-bold-orange {
  color: var(--bold-orange);
}

.text-strong-cyan {
  color: var(--strong-cyan);
}

.bg-thin-orange-md {
  background-color: var(--thin-orange-md);
}

.bg-thin-white {
  background-color: var(--thin-white);
}

.bg-bold-magenta {
  background-color: var(--bold-magenta);
}

.bg-bold-red {
  background-color: var(--bold-red);
}

.bg-bold-green {
  background-color: var(--bold-green);
}

.bg-thin-cyan {
  background-color: var(--thin-cyan);
}

.bg-thin-cyan-xs {
  background-color: var(--thin-cyan-xs);
}

.bg-light-red-sm {
  background-color: var(--light-red-sm);
}

.bg-light-blue {
  background-color: var(--light-blue);
}

.bg-bold-orange {
  background-color: var(--bold-orange);
}

.bg-thin-orange-2xs {
  background-color: var(--thin-orange-2xs);
}

.text-thin-white {
  color: var(--thin-white);
}

.text-des-blue {
  color: var(--desaturated-blue);
}

.bg-thin-blue {
  background-color: var(--thin-blue);
}

.bg-magenta {
  background-color: var(--magenta);
}

.bg-moderate-blue {
  background-color: var(--moderate-blue);
}

.bg-light-red {
  background-color: var(--light-red);
}

.bg-light-cyan {
  background-color: var(--light-cyan);
}

.bg-thin-cyan {
  background-color: var(--thin-cyan);
}

.bg-thin-cyan-sm {
  background-color: var(--thin-cyan-sm);
}

.bg-strong-cyan {
  background-color: var(--strong-cyan);
}

.bg-light-orange {
  background-color: var(--light-orange);
}

.bg-light-orange-sm {
  background-color: var(--light-orange-sm);
}

.bg-thin-orange {
  background-color: var(--thin-orange);
}

.bg-thin-orange-sm {
  background-color: var(--thin-orange-sm);
}

.bg-thin-orange-xs {
  background-color: var(--thin-orange-xs);
}

.btn-light-orange {
  background-color: var(--light-orange);
  color: var(--desaturated-blue);
  border: 1px solid transparent;
  transition: 0.4s;
}

.btn-des-blue {
  background-color: var(--desaturated-blue);
  color: var(--white);
  border: 1px solid transparent;
  transition: 0.4s;
  border-radius: 0;
  outline: none;
}

.btn-outline-des-blue {
  background-color: transparent;
  color: var(--desaturated-blue);
  border: 1px solid var(--desaturated-blue);
  transition: 0.4s;
  border-radius: 0;
  outline: none;
}

.btn-strong-cyan {
  background-color: var(--strong-cyan);
  color: var(--thin-white);
  border: 1px solid transparent;
  transition: 0.4s;
}

.btn-thin-cyan {
  background-color: var(--thin-cyan);
  color: var(--thin-cyan);
  border: 1px solid transparent;
  transition: 0.4s;
}

.bg-light-red-10 {
  background-color: var(--light-red-10);
}

.bg-moderate-magenta-10 {
  background-color: var(--moderate-magenta-10);
}

.s-badge {
  padding: 6px 10px;
  display: inline-block;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  max-width: fit-content;
}

.nice-select .option {
  padding: 1rem;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  border: 1.5px solid #ccced1;
  background-color: var(--thin-white);
}

.default-btn {
  padding: 3px 21px;
}

.default-horizontal-scrollbar::-webkit-scrollbar {
  border-radius: 100px;
  height: 5px;
}

.default-vertical-scrollbar::-webkit-scrollbar {
  border-radius: 100px;
  width: 5px;
}

.default-horizontal-scrollbar::-webkit-scrollbar-thumb,
.default-vertical-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--strong-cyan);
  border-radius: 100px;
}

.default-horizontal-scrollbar::-webkit-scrollbar-track,
.default-vertical-scrollbar::-webkit-scrollbar-track {
  border-radius: 100px;
}

/* ADD BASKET POPUP START */
.add-basket-popup {
  position: fixed;
  background: rgba(0, 0, 0, 40%);
  inset: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.4s;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.add-basket-popup .popup-wrapper {
  padding: clamp(24px, 2.5vw, 3rem);
  background: var(--thin-white);
  transition: 0.4s;
  transform: scale(0.6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  padding: 4vw 6.7vw;
}

.add-basket-popup.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.add-basket-popup.show .popup-wrapper {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

.add-basket-popup .popup-wrapper .popup-header {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(24px, 1.8vw, 32px);
  font-weight: 500;
  line-height: normal;
  padding: 8px 0;
  text-align: center;
  margin-bottom: clamp(1rem, 2.5vw, 3rem);
}

.add-basket-popup .popup-wrapper .popup-body {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 1.25vw, 24px);
}

.add-basket-popup .popup-wrapper .popup-body .popup-button {
  display: flex;
  padding: 13px 25px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  leading-trim: both;
  text-edge: cap;
  font-size: clamp(16px, 1.2vw, 21px);
  font-weight: 500;
  line-height: 1;
}

.add-basket-popup .popup-wrapper .popup-body .popup-button svg {
}

.add-basket-popup .popup-wrapper .popup-body .popup-button svg path {
}

@media screen and (max-width: 991px) {
  .add-basket-popup .popup-wrapper {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

@media screen and (max-width: 991px) {
  .add-basket-popup .popup-wrapper {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .add-basket-popup {
    padding: 24px;
  }

  .add-basket-popup .popup-wrapper .popup-header {
    padding-top: 0;
  }

  .add-basket-popup .popup-wrapper .popup-body .popup-button {
    padding: 8px 16px;
    white-space: nowrap;
  }
}

/* ADD BASKET POPUP END */
/* BASKET REVIEW START */
.basket-review {
  position: absolute;
  top: 100%;
  right: 0;
  padding-top: 1rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: 0.4s;
}

.basket-review .review-wrapper {
  background: var(--thin-white);
  width: 315px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
}

.basket-review .review-wrapper::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  background: var(--thin-white);
  top: 10px;
  right: 48px;
}

.basket-review .review-wrapper .review-header {
  width: 100%;
}

.basket-review .review-wrapper .review-header .review-product-list {
  max-height: 380px;
  overflow: hidden;
  overflow-y: auto;
  padding: 1rem 1rem 0;
  width: 100%;
}

.basket-review .review-wrapper .review-header .review-product-list .list-item {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--thin-blue);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  width: 100%;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-img {
  flex-shrink: 0;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-img
  img {
  width: 48px;
  height: 54px;
  object-fit: cover;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-header {
  display: flex;
  justify-content: space-between;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-header
  .header-title {
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-header
  .header-title
  .info-title {
  display: flex;
  padding: 9px 4px 0;
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-header
  .remove-product {
  color: #ccced1;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-header
  .remove-product
  svg {
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-header
  .remove-product
  svg
  path {
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-desc {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .info-desc
  .desc-item {
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  padding: 0 4px;
}

.basket-review
  .review-wrapper
  .review-header
  .review-product-list
  .list-item
  .item-info
  .item-price {
  color: #9c9ea0;
  leading-trim: both;
  text-edge: cap;
  font-size: 12px;
  font-weight: 400;
  line-height: normal;
  padding: 4px;
}

.basket-review .review-wrapper .review-body {
  width: 100%;
  padding: 1rem;
}

.basket-review .review-wrapper .review-body .review-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.basket-review .review-wrapper .review-body .review-total span {
  color: var(--desaturated-blue);
  leading-trim: both;
  text-edge: cap;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  padding: 9px 4px;
}

.basket-review .review-wrapper .review-body .review-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.basket-review .review-wrapper .review-body .review-link .link-item {
  display: flex;
  padding: 10px 12px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

.checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  label {
    display: inline-block;
    user-select: none;
    cursor: pointer;
  }
  input {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    border: 1px solid #d5d7da;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
    transition: all 200ms ease;
    &::before {
      content: url(/notosegitim/assets/img/check.svg);
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      margin-top: 1px;
      opacity: 1;
      transition: all 200ms ease;
    }
    &:checked {
      border-color: var(--color-secondary-400);
      &::before {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
      }
    }
  }
}

/* Modal Overlay */
.custom-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

/* Modal Box */
.custom-modal {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 850px;
  background: white;
  border-radius: 12px;
  z-index: 1000;
  padding: 24px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  .form-flex {
    gap: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    @media screen and (max-width: 767px) {
      flex-direction: column;
      align-items: stretch;
      gap: 0rem;
    }
  }
  fieldset {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.25rem;
    @media screen and (max-width: 767px) {
      margin-bottom: 1rem;
    }
  }
  label {
    color: #414651;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 110%;
    @media screen and (max-width: 767px) {
      font-size: 1rem;
    }
  }
  input,
  textarea,
  .nice-select {
    width: 100%;
    border-radius: 0.5rem;
    border: 1px solid #d5d7da;
    font-size: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0px 1px 2px 0px rgba(10, 13, 18, 0.05);
    transition: all 300ms ease;
    @media screen and (max-width: 767px) {
      font-size: 0.95rem;
      padding: 1rem 1.25rem;
    }
    &:hover,
    &:focus {
      border-color: #11b95c;
    }
  }
  .nice-select {
    height: auto;
    padding: 0.75rem 2.5rem 0.75rem 1.5rem;
    &::after {
      right: 1.5rem;
      width: 0.5rem;
      height: 0.5rem;
    }
  }
  .form-p {
    color: #222;
    font-size: 1.1rem;
    line-height: 120%;
    margin: 1.25rem 0 1.5rem;
    @media screen and (max-width: 991px) {
      font-size: 1rem;
    }
    @media screen and (max-width: 767px) {
      font-size: 0.95rem;
    }
  }
  .col {
    @media screen and (max-width: 767px) {
      margin: 0.5rem 0;
    }
    padding: 0;
    flex: 1;
    img {
      min-width: 100%;
      min-height: 58px;
      border-radius: 0.5rem;
    }
    a {
      background-color: var(--color-secondary-700);
    }
    input {
      font-weight: 700;
      text-transform: uppercase;
      padding: 1rem;
      text-align: center;
    }
  }
  .submit-btn {
    flex: 1;
    cursor: pointer;
    padding: 1.25rem;
    display: block;
    text-align: center;
    width: 100%;
    color: white;
    border: 0;
    border-radius: 6px;
    background-color: #13ce66;
    font-size: 1rem;
    font-weight: 500;
    line-height: 120%;
    transition: all 300ms ease;
    &:hover {
      background: #11b95c;
    }
  }
}

/* Modal Header */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* border-bottom: 1px solid #eee; */
  padding-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.modal-header .modal-title {
  color: black;
  font-size: 2rem;
  font-weight: 700;
  line-height: 75%;
}

/* Close Button */
.close-modal {
  cursor: pointer;
  font-size: 3rem;
  line-height: 1;
  color: #999;
}

.close-modal:hover {
  color: #000;
}

/* * Others */
.course-detail-card {
  overflow: visible !important;
}
.course-detail-card .course-image {
  border-top-left-radius: 0.75rem;
  border-top-right-radius: 0.75rem;
}
.course-detail-card .options-title {
  font-size: 0.95rem;
  color: #1a2e32;
  margin: 0.5rem 0;
  display: inline-block;
}
.course-detail-card .nice-select {
  width: 100%;
}
.course-detail-card .nice-select .current {
  display: block;
  max-width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap !important;
}

.course-detail-card .nice-select .option {
  white-space: normal !important;
}
.account-frame.logined {
  /* margin-left: -1rem; */
  order: 10;
}
.account-frame .account-link {
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: black;
  border: 1px solid var(--color-secondary-300);
  border-radius: 0.2rem;
  padding: 0.5rem 1rem !important;
}
.account-frame .account-link .icon {
  width: 1.5rem !important;
  height: 1.5rem !important;
  object-fit: contain;
}
.account-frame .account-link:hover {
  transform: scale(1) !important ;
  /* color: var(--color-secondary-900); */
  background-color: var(--color-secondary-50);
}

.page.nf404 {
  padding: 5rem 0;
}
.page.nf404 a {
  border-radius: 0.25rem;
  border-color: var(--color-secondary-700) !important;
  color: var(--color-secondary-700) !important;
  font-weight: 500;
}
.page.nf404 a:hover {
  background-color: var(--color-secondary-50) !important;
}

.info-card {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  color: var(--color-secondary-900);
  border: 1px solid var(--color-secondary-700);
  background-color: var(--color-secondary-50);
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
}
.info-card svg {
  min-width: 24px;
  height: 24px;
  margin-right: 0.75rem;
}
.info-card p {
  line-height: 130%;
  margin-bottom: 0;
  font-size: 0.9rem;
  font-weight: 500;
  color: inherit;
}
.passive {
  filter: grayscale(1);
}

/* * EKSTRA */
.mobile-search-bar {
  display: none;
}
@media screen and (max-width: 767px) {
  header.site-header .search-frame {
    display: none !important;
  }
  header.site-header .menu li:last-of-type {
    margin-bottom: auto !important;
  }
  .mobile-search-bar {
    display: block !important;
    flex: unset !important;
  }
  header.site-header .site-container .menu > .mobile-search-bar {
    width: 85% !important;
    margin-bottom: 0.5rem;
  }
  header.site-header .site-container .menu .mobile-search-bar input {
    border: 0;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    background-color: #f3f3f3;
    color: #938e8e;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: normal;
    margin-top: 1rem;
    width: 100%;
  }
  header.site-header
    .site-container
    .icons
    .account-frame
    .login-popup
    .popup-arrow,
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .popup-arrow {
    display: none !important;
  }
  header.site-header .site-container .icons .account-frame .login-popup,
  header.site-header .site-container .icons .cart-frame .cart-popup {
    max-width: 90%;
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(0) !important;
  }
  header.site-header .site-container .icons .account-frame .login-popup.show,
  header.site-header .site-container .icons .cart-frame .cart-popup.show {
    transform: translateX(-50%) translateY(50px) !important;
  }
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .product-list
    .product {
    flex-direction: column;
    gap: 0.5rem;
    border-bottom: 1px solid #e8e8e8;
    padding-bottom: 1rem;
  }
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .product-list
    .product
    .product-name {
    font-size: 1rem;
  }
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .product-list
    .product
    .product-image {
    width: 100px;
    height: 85px;
  }
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .product-list
    .product
    .product-price {
    font-size: 0.9rem;
  }
  header.site-header .site-container .icons .cart-frame .cart-popup .cart-btn {
    padding: 1rem;
    font-size: 1rem;
  }
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .total-product {
    font-size: 1rem;
  }
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .total-product
    strong,
  header.site-header
    .site-container
    .icons
    .cart-frame
    .cart-popup
    .total-product
    span {
    font-size: 0.95rem;
  }
}

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

.order-fee .order-adress {
  gap: 20px;
  align-items: stretch;
}

.order-fee .order-adress .adress {
  width: auto;
  padding: 32px 28px 32px;
}
#vergi_dairesi:disabled {
    background-color: #f2f2f2;
    color: #000;
    opacity: 1;
    border-color: #999;
    cursor: not-allowed
}