:root {
  /* Base Colors */
  --color-white: #ffffff;
  --color-white-5: #ffffff0d;
  --color-black: #000000;
  --color-gray-400: #fefefe;
  --color-gray-600: #bcc6cdcc;
  --color-gray-900: #171717;
  --color-primary: #12c2e9;
  --color-primary-10: hsla(191, 86%, 49%, 0.1);
  --color-primary-30: hsla(191, 86%, 49%, 0.3);
  --color-primary-40: #11c1e866;
  --color-primary-40-2: #20c1e966;
  --color-primary-50: rgba(17, 193, 232, 0.5);
  --color-primary-70: hsla(192, 82%, 52%, 0.7);
  --color-primary-80: hsla(192, 82%, 52%, 0.8);
  --color-primary-90: hsla(192, 82%, 52%, 0.9);
  --color-red-600: #ef4444;
  --color-red-600-80: #ef4444cc;

  --color-gray-100-5: hsla(0, 0%, 95%, 0.05);

  --color-gold: #ffa600;
  --color-gold-20: #ffa60033;
  --color-gold-30: hsla(30, 61%, 50%, 0.3);
  --color-gold-40: hsla(39, 100%, 50%, 0.4);
  --color-gold-50: hsla(39, 100%, 50%, 0.5);
  --color-gold-80: hsla(39, 100%, 50%, 0.8);
  --color-gold-80: hsla(39, 100%, 50%, 0.8);
  --color-dark-gold-80: hsla(30, 61%, 50%, 0.8);
  --color-gold2: #ffe2ac;

  --color-yellow-5: hsla(55, 86%, 49%, 0.05);
  --color-yellow-20: hsla(55, 86%, 49%, 0.2);

  --color-yellow2-30: hsla(64, 86%, 49%, 0.3);
  --color-yellow2-50: hsla(64, 86%, 49%, 0.5);

  --color-lightblue: #24c3ea;
  --color-green: #469449;

  /* Text Colors */
  --text-primary-color: #fff;
  --text-primary-color-5: #ffffff0d; /* #fff 5% */
  --text-primary-color-10: #ffffff1a; /* #fff 10% */
  --text-primary-color-20: #ffffff33; /* #fff 20% */
  --text-primary-color-30: #ffffff4d; /* #fff 30% */
  --text-primary-color-40: #ffffff66; /* #fff 40% */
  --text-primary-color-50: #ffffff80; /* #fff 50% */
  --text-primary-color-60: #ffffff99; /* #fff 60% */
  --text-primary-color-70: #ffffffb3; /* #fff 70% */
  --text-primary-color-80: #ffffffcc; /* #fff 80% */
  --text-primary-color-90: #ffffffe6; /* #fff 90% */
  --text-tertiary-color: #000000;
  --text-quaternary-color: #171717;

  --text-form-label-80: #ffffffcc;
  --text-form-placeholder-70: #ffffffb3;

  --text-gray: #ffffff;
  --text-gray-60: #ffffff99;

  --text-blue-550: #15a5c5;

  /* Bg Colors */
  --bg-primary-color: #171717;
  --bg-secondary-color: #000;
  --bg-secondary-color-80: #000000cc;
  --bg-tertiary-color: #fff;
  --bg-tertiary-color-5: rgba(255, 255, 255, 0.05);
  --bg-tertiary-color-8: rgba(255, 255, 255, 0.08);
  --bg-tertiary-color-10: rgba(255, 255, 255, 0.1);
  --bg-tertiary-color-15: rgba(255, 255, 255, 0.15);
  --bg-tertiary-color-20: rgba(255, 255, 255, 0.2);
  --bg-tertiary-color-30: rgba(255, 255, 255, 0.3);
  --bg-tertiary-color-40: rgba(255, 255, 255, 0.4);
  --bg-tertiary-color-50: rgba(255, 255, 255, 0.5);
  --bg-tertiary-color-60: rgba(255, 255, 255, 0.6);
  --bg-tertiary-color-80: rgba(255, 255, 255, 0.8);
  --bg-quaternary-color-50: #0f0e0e80;
  --bg-toggle-light: #ffed6199;
  --bg-toggle-dark: #7e51ad;

  --bg-blue-300: #27b8e9;
  --bg-pink-500: #c470eb;
  --bg-red-600: #f54e58;
  --bg-blue-350: #12c2e9;
  --bg-pink-550: #c471ed;
  --bg-red-650: #f64f59;

  --bg-black-800: #232323;
  --bg-black-830: #1a1a1a;
  --bg-black-840-50: #100f0f80;
  --bg-black-850: #171717;
  --bg-black-850-76: #171717c2;
  --bg-black-850-92: #171717eb;
  --bg-black-900-5: hsla(0, 0%, 0%, 0.05);
  --bg-black-900-15: hsla(0, 0%, 0%, 0.15);
  --bg-black-900-30: hsla(0, 0%, 0%, 0.3);
  --bg-black-900-53: hsla(0, 0%, 0%, 0.53);
  --bg-black-900-80: #000000cc;

  --bg-instructors-card-19: hsla(0, 0%, 5%, 0.19);
  --bg-instructors-card-60: #0d0d0d99;

  /* Border Colors */
  --border-white: #ffffff;
  --border-primary-color: #ffffff80;
  --border-primary-color-5: rgba(255, 255, 255, 0.05);
  --border-primary-color-10: rgba(255, 255, 255, 0.1);
  --border-primary-color-15: rgba(255, 255, 255, 0.15);
  --border-primary-color-17: rgba(255, 255, 255, 0.17);
  --border-primary-color-20: #ffffff33;
  --border-primary-color-25: hsla(0, 0%, 100%, 0.25);
  --border-primary-color-30: #ffffff4d;
  --border-primary-color-40: #ffffff66;
  --border-primary-color-50: #ffffff80;
  --border-primary-color-60: hsla(0, 0%, 100%, 0.6);
  --border-primary-color-70: #ffffffb3;
  --border-primary-color-80: #ffffffcc;
  --border-black-50: hsla(0, 0%, 0%, 0.5);

  --border-blue-400: #24c3ea;

  --border-gray: #d9d9d9;
  --border-gray-2: #d5d5d5;
  /* 30% */
  --border-gray-3: #ffffff4d; /* 30% transparency */

  --border-toggle-light: #e1dab0;
  /* --border-toggle-dark: #86e0f4; */
  --border-toggle-dark: #7e51ad;

  --shadow-primary-50: hsla(0, 0%, 0%, 0.5);
  --shadow-primary-60: #00000099;
  --shadow-white-8: #ffffff14;
  --shadow-white-10: #ffffff1a;
  --shadow-white-12: #ffffff1f;
  --shadow-black-25: rgba(23, 23, 23, 0.25);

  color-scheme: dark light;
}
@media (prefers-color-scheme: light) {
  :root {
  }
}

html {
  scroll-behavior: smooth;
}
body {
  /* width: 100vw; */
  font-family: "Montserrat", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  background-color: var(--bg-primary-color);
  color: var(--text-primary-color);
  /* overflow-x: hidden !important; */
  padding-top: 61px;
  scroll-behavior: smooth;
}

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

/* !Global */
.container {
  max-width: 1312px;
  margin: 0 auto;
}

.prevent-scroll {
  overflow: hidden;
}

a {
  display: inline-block;
  color: var(--text-primary-color);
  text-decoration: none;
  transition: color 0.2s;
}

ul {
  list-style: none;
}

.btn-outline {
  /* width: ; */
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: transparent;
  font-weight: 500;
  border: 1px solid var(--text-primary-color-50);
  border-radius: 4px;
}

.whatsapp {
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
  position: fixed;
  right: 20px;
  bottom: 30px;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border-bottom-right-radius: 10px;
  z-index: 100;
}

.rotate-180 {
  transform: rotate(180deg);
}

.toast-default {
}
.toast-success {
}
.toast-warning {
}
.toast-error {
}

.loading-spinner {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  display: none;
  animation: spin 1s linear infinite;
}
.loading-spinner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    white 0deg,
    rgba(255, 255, 255, 0.7) 90deg,
    rgba(255, 255, 255, 0.3) 180deg,
    transparent 270deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.loading-spinner.active {
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (max-width: 768px) {
  .whatsapp {
    /* right: 0; */
    bottom: 30px;
    width: 54px;
    height: 54px;
  }
  .whatsapp img {
    width: 34px;
    height: 34px;
  }
}

/* !Hover States */
.click-btn {
  transition: transform 0.2s;
}
.click-btn:active {
  transform: scale(0.95);
}

.primary-btn {
  background-color: var(--color-primary-80);
  transition: background-color 0.2s, color 0.2s;
}
.primary-btn:hover {
  color: var(--text-primary-color);
  background-color: var(--color-primary);
}

.secondary-btn {
  padding: 9px 10px;
  background-color: var(--bg-tertiary-color-10);
  border: 1px solid var(--border-primary-color-10);
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s, border-color 0.2s;
}
.secondary-btn:hover {
  background-color: var(--bg-tertiary-color-15);
  border: 1px solid var(--border-primary-color-30);
}

.outline-btn {
  border: 1px solid var(--border-primary-color-50);
  border-radius: 8px;
  transition: background-color 0.2s;
}
.outline-btn:hover {
  background-color: var(--bg-tertiary-color-10);
}

.outline-btn2 {
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
  border-radius: 4px;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.outline-btn2:hover {
  background-color: var(--color-primary-30);
  box-shadow: 0 0 0 2px var(--border-primary-color-50) inset;
}

.gradient-bg {
  position: relative;
  width: 100%;
  font-family: "Montserrat";
  border-radius: 4px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.gradient-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  background: linear-gradient(
    -89deg,
    var(--bg-red-650),
    var(--bg-pink-550) 50%,
    var(--bg-blue-350)
  );
  border-radius: 4px;
  z-index: -1;
  transition: opacity 0.2s;
}
.gradient-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 2px solid transparent;
  opacity: 0.5;
  background: linear-gradient(
      -89deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
  transition: opacity 0.2s;
}
.gradient-bg:hover::before {
  opacity: 0.6;
}
.gradient-bg:hover::after {
  opacity: 0.9;
}

.card-gradient-bg {
  width: 100%;
  padding: 20px;
  position: relative;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
}
.card-gradient-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    -89deg,
    var(--bg-red-650),
    var(--bg-pink-550) 50%,
    var(--bg-blue-350)
  );
  border-radius: 12px;
  z-index: -1;
}
.card-gradient-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  background: linear-gradient(
      -89deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.add-to-favorites-btn {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--border-primary-color-50);
  background-color: transparent;
  /* box-shadow: 0 0 0 1px var(--border-primary-color-50) inset; */
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.add-to-favorites-btn:hover {
  background-color: var(--bg-tertiary-color-80);
  border: 1px solid var(--border-primary-color-80);
}

.add-to-favorites-btn img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  transition: opacity 0.2s, transform 0.2s;
}

.add-to-favorites-btn .heart-dark {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}
.add-to-favorites-btn:hover .heart-dark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.add-to-favorites-btn .heart-outline {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.add-to-favorites-btn:hover .heart-outline {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.5);
}

.add-to-favorites-btn.active {
  background-color: var(--bg-tertiary-color);
  border: 1px solid var(--border-black-50);
}
.add-to-favorites-btn.active:hover {
  background-color: var(--bg-tertiary-color-80);
  border: 1px solid var(--border-primary-color-80);
}
.add-to-favorites-btn.active .heart-dark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.add-to-favorites-btn.active:hover .heart-dark {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.add-to-favorites-btn.active .heart-outline {
  opacity: 0;
}
.add-to-favorites-btn.active:hover .heart-outline {
  opacity: 0;
}

/* !Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.625rem 1rem;
  z-index: 1000;
}
.header-blur {
  position: absolute;
  inset: 0;
  background-color: var(--bg-secondary-color-80);
  backdrop-filter: blur(4px);
  z-index: -1;
}
.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.header-logo {
  max-width: 178px;
  max-height: 40px;
  display: grid;
  place-content: center;
}
.header-logo img {
  width: 100%;
  height: 40px;
  object-fit: cover;
}
.header-navigation {
  height: 100%;
}
.header-navigation ul {
  height: 100%;
  display: flex;
  gap: 32px;
}
.header-navigation ul a {
  font-size: 20px;
}
.header-navigation ul li:hover a {
  color: var(--color-primary);
}
.header-navigation ul li.active a {
  color: var(--color-primary);
  font-weight: 500;
}
.header-cta {
  display: flex;
  align-items: center;
  gap: 20px;
}

.header-cart-btn {
  width: 41px;
  height: 41px;
  display: grid;
  place-content: center;
  background-color: transparent;
  border: 1px solid var(--border-primary-color-80);
  border-radius: 4px;
  transition: background-color 0.2s, border-color 0.2s;
}
.header-cart-btn:hover {
  background-color: var(--color-primary-30);
  border: 1px solid var(--color-white);
}
.header-cart-btn span {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-content: center;
  color: var(--text-tertiary-color);
  background-color: var(--text-primary-color);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  line-height: 100%;
}

.header-profile {
  position: relative;
  display: inline-block;
}
/* Fill the gap for hover effect */
.header-profile::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 200%;
  height: 22px;
  background: transparent;
}
.header-profile-dropdown {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  width: 168px;
  /* height: 230px; */
  position: absolute;
  top: calc(100% + 22px);
  right: 0;
  transform: translateY(-10%);
  background-color: var(--bg-black-900-30);
  border-radius: 12px;
  border-top-right-radius: 2px;
  box-shadow: 0 8px 12px 0 var(--bg-black-900-30);
  transition: all 0.3s ease;
}
.header-profile.active .header-profile-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.header-profile-dropdown-list {
  position: relative;
  padding: 20px 10px;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: linear-gradient(
    to bottom,
    var(--bg-black-850-92),
    var(--bg-black-850-76),
    var(--bg-black-850)
  );
  backdrop-filter: blur(10px);
  border-radius: 12px;
  border-top-right-radius: 2px;
}
.header-profile-dropdown-list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border-top-right-radius: 2px;
  border: 1px solid transparent;
  opacity: 0.3;
  background: linear-gradient(
      -11deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
.header-profile-dropdown-list-item {
  height: 30px;
  border-radius: 4px;
  padding-inline: 10px;
  transition: background-color 0.3s;
}
.header-profile-dropdown-list-item.active {
  background-color: var(--color-primary);
}
.header-profile-dropdown-list-item:hover {
  background-color: var(--color-primary);
}
.header-profile-dropdown-list-item a {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  text-align: end;
}

.header-profile-btn {
  width: 41px;
  height: 41px;
  display: grid;
  place-content: center;
  background-color: transparent;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.header-profile-btn:hover {
  background-color: var(--bg-tertiary-color-20);
}
.header-profile-btn img {
  /* pointer-events: none; */
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}
.toggle-label {
  position: relative;
  display: inline-block;
  width: 64px;
  height: 32px;
  background: linear-gradient(
    to bottom right,
    var(--border-primary-color-30),
    var(--border-primary-color-50)
  );
  border-radius: 24px;
}
.toggle-label::before {
  content: "";
  position: absolute;
  inset: 1px;
  background-color: #373737;
  border-radius: 28px;
  cursor: pointer;
}

.toggle-input {
  opacity: 1;
  width: 0;
  height: 0;
}

.toggle-input:before {
  box-sizing: border-box;
  position: absolute;
  content: "";
  height: 32px;
  width: 32px;
  left: 0;
  bottom: 0;
  inset: 0;
  /* background-color: var(--bg-toggle-light);
  border: 1px solid var(--border-toggle-light); */
  border-radius: 50%;
  transition: transform 0.4s ease-in-out, background-color 0.3s ease;
}

.toggle-input:checked::before {
  /* transform: translateX(100%);
  background-color: var(--color-primary);
  border: 1px solid var(--border-toggle-dark); */
}

.theme-toggle-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  cursor: pointer;
}

.sun-icons {
  background-color: var(--bg-toggle-light);
  /* border: 1px solid var(--border-toggle-light); */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transition: background-color 0.6s ease, border 0.5s ease;
}
.moon-icons {
  background-color: transparent;
  /* border: 1px solid transparent; */
  border-radius: 50%;
  transition: background-color 0.6s ease, border 0.5s ease;
}
.sun-icons,
.moon-icons {
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 10;
}
.sun-icons img {
  /* display: block; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}
.moon-icons img {
  /* display: block; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
}

.theme-toggle-icons .sun-icons .sun-filled-icon {
  opacity: 1;
}
.theme-toggle-icons .sun-icons .sun-icon {
  opacity: 0;
}
.toggle-input:checked + .theme-toggle-icons .sun-icons {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
}

.toggle-input:checked + .theme-toggle-icons .moon-icons {
  background-color: var(--bg-toggle-dark);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.theme-toggle-icons .sun-icons .sun-filled-icon {
  opacity: 1;
}
.theme-toggle-icons .sun-icons .sun-icon {
  opacity: 0;
}
.toggle-input:checked + .theme-toggle-icons .sun-icons .sun-filled-icon {
  opacity: 0;
}
.toggle-input:checked + .theme-toggle-icons .sun-icons .sun-icon {
  opacity: 1;
}

.theme-toggle-icons .moon-icons .moon-filled-icon {
  opacity: 0;
}
.theme-toggle-icons .moon-icons .moon-icon {
  opacity: 1;
}

.toggle-input:checked + .theme-toggle-icons .moon-icons .moon-filled-icon {
  opacity: 1;
}
.toggle-input:checked + .theme-toggle-icons .moon-icons .moon-icon {
  opacity: 0;
}

.menu-button {
  display: none;
}
.mobile-menu {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 3rem;
  opacity: 0;
  /* visibility: hidden; */
  position: fixed;
  top: 0;
  right: 0;
  transform: translateX(100%);
  width: 100vw;
  height: 100lvh;
  background-color: var(--bg-black-900-30);
  /* backdrop-filter: blur(15px); */
  border-radius: 8px;
  box-shadow: 0 8px 12px 0 var(--bg-black-900-30);
  z-index: 1000;
  transition: all 0.5s cubic-bezier(0.65, -0.25, 0.35, 1.25);
}
.mobile-menu-blur {
  position: relative;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--bg-black-850-92),
    var(--bg-black-850-76),
    var(--bg-black-850)
  );
  backdrop-filter: blur(10px);
  border-radius: 8px;
}
.mobile-menu-blur::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  border-top-right-radius: 2px;
  border: 1px solid transparent;
  opacity: 0.3;
  background: linear-gradient(
      -11deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
.mobile-menu-header {
  height: 64px;
  padding-inline: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--bg-black-900-80);
  border: 1px solid transparent;
}
.mobile-menu-header-cta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mobile-menu-header-cta .header-cart-btn {
  width: 32px;
  height: 32px;
}
.mobile-menu-header-cta .header-cart-btn img {
  width: 28px;
  height: 28px;
}
.mobile-menu-close-btn {
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  border: none;
}

@media (max-width: 1024px) {
  .header {
    background-color: var(--bg-secondary-color);
    backdrop-filter: none;
  }
  .header-navigation {
    display: none;
  }

  .theme-toggle {
    display: none;
  }
  .mobile-theme-toggle {
    display: flex;
  }

  .header-profile:hover .header-profile-dropdown {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px);
  }
  .header-cta {
    gap: 10px;
  }
  .header-profile-btn {
    display: none;
  }
  .mobile-menu {
    display: flex;
  }
  .header-content.mobile-menu-open .mobile-menu {
    opacity: 1;
    /* visibility: visible; */
    transform: translateX(0);
  }
  .mobile-menu .header-navigation {
    margin-top: 20px;
    padding-inline: 16px;
    display: flex;
    height: min-content;
  }
  .mobile-menu .header-navigation-list {
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .mobile-menu .header-navigation-list li {
    width: 100%;
  }
  .mobile-menu .header-navigation-list li:not(:first-child) {
    justify-content: unset;
    height: 60px;
  }
  .mobile-menu .header-navigation-list li:not(:last-child) a {
    border-bottom: 1px solid var(--border-primary-color-10);
  }
  .mobile-menu .header-navigation-list a {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }
  .mobile-menu-profile-wrapper {
    border-bottom: 1px solid var(--border-primary-color-10);
    transition: background-color 0.3s;
  }
  .mobile-menu-profile-wrapper.open {
    background-color: var(--bg-tertiary-color-10);
    border-bottom: none;
  }
  .mobile-menu-profile-title-wrapper {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }
  .mobile-menu-profile-title-wrapper.active {
    background-color: var(--color-primary-80);
    border-radius: 4px;
  }
  .mobile-menu-profile-title-wrapper img {
    transition: transform 0.3s;
  }

  .mobile-menu .mobile-menu-profile-list {
    height: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    transition: height 0.3s;
  }
  .mobile-menu .mobile-menu-profile-list li {
    height: 60px;
  }
  .mobile-menu .header-navigation-list .mobile-menu-profile-list li a {
    height: 60px;
    border-bottom: none;
  }

  .mobile-menu .header-account-btn {
    display: grid;
    margin-left: 0;
  }

  .menu-button {
    /* margin-left: 19px; */
    /* margin-right: 1rem; */
    width: 19px;
    height: auto;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .menu-button .menu-button-line {
    width: 20px;
    height: 1px;
    background-color: var(--text-primary-color-50);
    border-radius: 1px;
    transition: transform 0.2s, opacity 0.2s;
  }

  .menu-button-line:nth-child(1) {
    transform-origin: top left;
  }

  .menu-button.open > .menu-button-line:nth-child(1) {
    transform: rotate(45deg);
  }

  .menu-button.open > .menu-button-line:nth-child(2) {
    opacity: 0;
  }

  .menu-button-line:nth-child(3) {
    transform-origin: bottom left;
  }

  .menu-button.open > .menu-button-line:nth-child(3) {
    transform: rotate(-45deg) translate(-1px, 1px);
  }

  .header-navigation-list-item.active {
    background-color: var(--color-primary-80);
    border-radius: 4px;
  }
  .header-navigation ul li a {
    color: var(--text-primary-color);
  }
  .header-navigation ul li.active a {
    color: var(--text-primary-color);
  }
  .mobile-menu-profile-list li a {
    color: var(--text-primary-color);
  }
  .header-navigation ul li:hover a {
    color: var(--text-primary-color);
  }
}

/* !Footer */

.footer {
  padding-inline: 24px;
  background-color: #000;
}
.footer-content-wrapper {
}
.footer-content-top {
  padding-block: 65px 63px;
  display: grid;
  grid-template-columns: auto auto auto 1fr;
}
.footer-logo {
  max-width: 255px;
}
.footer-description {
  margin-top: 20px;
  font-size: 15px;
  color: var(--text-primary-color-80);
}
.footer-socials {
  margin-top: 40px;
  display: flex;
  gap: 8px;
}
.footer-socials a {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: grid;
  place-content: center;
  background-color: var(--bg-tertiary-color-10);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.footer-socials a:hover {
  background-color: var(--bg-tertiary-color-15);
  box-shadow: 0 0 0 1px var(--border-primary-color-30) inset;
}

.footer-course-categories {
  margin-left: 85px;
}
.footer-course-categories h3,
.discover-more-links h3,
.footer-support h3 {
  font-size: 20px;
  font-weight: 700;
}

.footer-course-categories-heading,
.footer-discover-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.discover-more-links {
  margin-left: 106px;
}

.footer-nav .footer-links-list li:hover a {
  color: var(--color-primary);
}

.footer-support {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
.footer-support-content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.footer-support-content p {
  max-width: 258px;
  margin-top: 20px;
  text-align: right;
  color: var(--text-primary-color-70);
}
.footer-support-content a {
  margin-top: 10px;
  color: var(--text-primary-color-70);
  text-decoration: underline;
}

.footer-dropdown {
  pointer-events: none;
  margin-bottom: 20px;
}
.footer-dropdown img {
  display: none;
  transition: transform 0.2s;
}

.footer-discover-links-wrapper {
  display: flex;
  gap: 40px;
}
.footer-links-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.footer-links-list a {
  white-space: nowrap;
  font-size: 18px;
  color: var(--text-primary-color-70);
}

.footer-content-bottom {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding-block: 31px 21px;
}
.footer-content-bottom::before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  width: 100%;
  height: 1px;
  opacity: 0.3;
  background: linear-gradient(
    to right,
    transparent,
    var(--border-gray) 11%,
    var(--border-gray) 89%,
    transparent
  );
}
.footer-copyright {
  font-size: 16px;
  color: var(--text-primary-color-70);
}
.footer-bottom-links {
  display: flex;
  align-items: center;
  gap: 23px;
}
.footer-bottom-links a {
  font-size: 16px;
  color: var(--text-primary-color-70);
}

@media (max-width: 1200px) {
  .footer-course-categories {
    margin-left: 50px;
  }
  .discover-more-links {
    margin-left: 50px;
  }
}
@media (max-width: 1024px) {
  .footer-content-top {
    padding-block: 20px 40px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, auto));
    gap: 40px;
  }
  .footer-logo {
    max-width: none;
  }
  .footer-description {
    text-align: center;
  }
  .footer-socials {
    margin-top: 35px;
    gap: 20px;
    justify-content: center;
  }
  .footer-course-categories {
    margin-left: 0;
  }
  .discover-more-links {
    margin-left: 0;
  }
  .footer-support {
    gap: 50px;
    align-items: center;
  }
  .footer-support-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: normal;
    align-self: flex-start;
  }
  .footer-support-content p {
    max-width: none;
    margin-inline: auto;
    text-align: center;
  }
  .footer-support-content a {
    margin-inline: auto;
  }
  .footer .theme-toggle {
    display: flex;
  }

  .footer-content-bottom {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 80px;
    padding-block: 0 21px;
  }
  .footer-content-bottom::before {
    position: absolute;
    top: 55%;
    left: 0;
    content: "";
    width: 100%;
    height: 1px;
    opacity: 0.3;
    background: linear-gradient(
      to right,
      transparent,
      var(--border-gray) 11%,
      var(--border-gray) 89%,
      transparent
    );
  }
  .footer-copyright {
    text-align: center;
    order: 1;
  }
  .footer-bottom-links {
    /* display: flex; */
    flex-direction: column;
    gap: 20px;
  }
}

@media (max-width: 768px) {
  .footer-dropdown {
    pointer-events: all;
    margin-bottom: 0;
    transition: margin-bottom 0.2s;
  }
  .mb-20 {
    margin-bottom: 20px;
  }
  .footer-dropdown img {
    display: block;
  }

  .footer-dropdown-content {
    height: 0;
    overflow: hidden;
    transition: height 0.2s ease;
  }
}

/* !Hero Home */
.hero-section {
  position: relative;
  padding: 100px 24px;
  width: 100%;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
}

.hero-content-wrapper {
  display: grid;
  grid-template-columns: minmax(300px, 523px) minmax(300px, 749px);
  gap: 40px;
  align-items: start;
}
.hero-content-texts h1 {
  max-width: 523px;
  font-family: "Raleway";
  font-size: 2rem;
  line-height: 52px;
  text-transform: uppercase;
  font-weight: 900;
}
.hero-content-texts p {
  max-width: 523px;
  margin-top: 16px;
  font-size: 18px;
  line-height: 32px;
  color: var(--text-primary-color-50);
  font-weight: 500;
}

.hero-btn {
  display: grid;
  place-content: center;
  width: 304px;
  height: 46px;
  margin-top: 64px;
  font-size: 18px;
  font-weight: 500;
  background-color: var(--bg-tertiary-color);
  color: var(--text-quaternary-color);
  border-radius: 8px;
  box-shadow: 0 0 0 6px var(--text-primary-color-20);
  text-shadow: 0 0 0;
  animation: border-pulse 0.4s 0.2s ease-out infinite alternate;
  transition: box-shadow 0.3s 4ms ease-out, text-shadow 0.3s 4ms ease-out;
}
.hero-btn:hover {
  animation: none;
  box-shadow: 0 0 0 8px var(--color-primary-40);
  text-shadow: 0 0 1px currentColor;
}

@keyframes border-pulse {
  from {
    box-shadow: 0 0 0 6px var(--text-primary-color-20);
    text-shadow: 0 0 0;
  }
  to {
    box-shadow: 0 0 0 8px var(--color-primary-40);
    text-shadow: 0 0 1px currentColor;
  }
}

.hero-swiper-container {
}

.hero-swiper-wrapper {
  /* margin-top: 24px; */
}

#heroSwiper {
  height: 369px;
  padding-block: 20px;
}

#heroSwiper .swiper-wrapper {
  align-items: center;
}

#heroSwiper .swiper-slide {
  position: relative;
  width: 582px !important;
  height: 288px !important;
  /* transform: scale(1); */
  opacity: 0.4;
  /* transition: all 0.3s; */
}

#heroSwiper .swiper-slide.swiper-slide-active {
  /* transform: scale(1); */
  opacity: 1;
  height: 329px !important;
}
#heroSwiper .swiper-slide.swiper-slide-active::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--text-primary-color-30) inset,
    0 -33px 130px 0 var(--shadow-primary-60) inset;
  border-radius: 12px;
  pointer-events: none;
}

.hero-slider-card {
  display: flex;
  align-items: flex-end;
  height: 100%;
  position: relative;
  width: 100%;
  /* background: linear-gradient(
    to bottom,
    var(--text-primary-color-20),
    var(--text-primary-color-5)
  ); */
  border-radius: 12px;
  overflow: hidden;
}
.hero-slider-card:after {
  content: "";
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: -1px;
  /* background: linear-gradient(
    to bottom,
    var(--text-primary-color-30),
    var(--text-primary-color-50)
  ); */
  border-radius: 8px;
  z-index: -1;
}

.hero-slider-img {
  position: absolute;
  top: 0;
  left: 0;
  /* max-width: 416px; */
  width: 100%;
  /* max-height: 235px; */
  height: 100%;
}
.hero-slider-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* height: 235px; */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.hero-slider-card-details {
  position: relative;
  padding: 12px 24px 24px;
  z-index: 10;
}
.hero-slider-card h3 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.hero-slider-card p {
  margin-top: 10px;
  font-size: 16px;
  font-weight: 500;
  line-height: 26.9px;
  color: var(--text-primary-color-90);

  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.hero-swiper-btns {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.swiper-custom-button-prev,
.swiper-custom-button-next {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right bottom, transparent, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
  transition: all 0.1s ease-in;
  cursor: pointer;
}
.swiper-custom-button-prev::after,
.swiper-custom-button-next::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right bottom,
    var(--text-primary-color-10),
    var(--text-primary-color-40)
  );
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.1s ease-in;
  z-index: -1;
}

.swiper-custom-button-prev:hover::after,
.swiper-custom-button-next:hover::after {
  opacity: 1;
}

.swiper-custom-button-prev img,
.swiper-custom-button-next img {
  user-select: none;
}

.swiper-custom-button-prev img {
  transform: rotate(180deg);
}

@media (max-width: 1200px) {
  #heroSwiper .swiper-slide {
    width: 460px !important;
  }
}
@media (max-width: 1024px) {
  .hero-content-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: start;
  }
  .hero-swiper-wrapper {
    grid-row-start: 1;
    max-width: calc(100vw - 48px);
  }

  .hero-content-texts {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 768px) {
  .hero-section {
    position: relative;
    padding: 60px 24px;
  }

  .hero-content-wrapper {
    gap: 60px;
  }

  #heroSwiper {
    height: 210px;
    padding-block: 0;
  }

  #heroSwiper .swiper-wrapper {
    align-items: start;
  }

  #heroSwiper .swiper-slide {
    width: 270px !important;
    height: 134px !important;
    /* height: 210px !important; */
  }
  #heroSwiper .swiper-slide.swiper-slide-active {
    height: 210px !important;
  }
  #heroSwiper .swiper-slide .hero-slider-card-details {
    opacity: 0;
    transition: opacity 0.3s;
  }
  #heroSwiper .swiper-slide.swiper-slide-active .hero-slider-card-details {
    opacity: 1;
  }

  .swiper-slide-active h3 {
    font-size: 16px;
  }

  .swiper-slide-active p {
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    display: -webkit-box;
    line-clamp: 5;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .hero-content-texts h1 {
    text-align: center;
    font-size: 1.25rem;
    line-height: 28px;
  }

  .hero-content-texts p {
    text-align: center;
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
  }

  .hero-btn {
    width: 260px;
    margin: 24px auto 0;
    border-radius: 8px;
    box-shadow: 0 0 0 6px var(--text-primary-color-20);
    text-shadow: 0 0 0;
    animation: border-pulse 0.4s 0.2s ease-out infinite alternate;
    transition: box-shadow 0.3s 4ms ease-out, text-shadow 0.3s 4ms ease-out;
  }
}

/* !Courses Home */

.courses-section {
  padding-inline: 1.5rem;
  overflow: hidden;
}

.courses-section > h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}

.home-courses-description {
  margin-top: 40px;
}
.home-courses-description h3 {
  max-width: 600px;
  margin-inline: auto;
  font-family: "Raleway";
  text-align: center;
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 28px;
  line-height: 34px;
}
.home-courses-description p {
  max-width: 993px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: var(--text-primary-color-50);
}

.home-course-actions-wrapper {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-course-price {
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-course-price .current-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary-color-90);
}
.home-course-price .old-price {
  font-size: 16px;
  color: var(--text-primary-color-60);
  text-decoration: line-through;
}
.home-course-price .sale {
  width: 80px;
  height: 28px;
  display: grid;
  place-items: center;
  background-color: var(--color-red-600);
  border-radius: 5px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary-color-90);
}
.home-course-actions {
  margin-top: 25px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-course-actions .learn-more {
  width: 170px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 4px;
  /* box-shadow: 0 0 0 1px var(--border-primary-color-50) inset; */
}
.home-course-actions .learn-more span {
  font-family: "SFProDisplay";
  font-size: 16px;
  font-weight: 500;
}
.home-course-actions .learn-more img {
  width: 20px;
  height: 20px;
}
/* .home-course-actions .add-to-favorites {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
  cursor: pointer;
}
.home-course-actions .add-to-favorites img {
  width: 20px;
  height: 20px;
} */

.home-course-actions .add-to-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 170px;
  height: 44px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}
.home-course-actions .add-to-cart span {
  font-family: "Montserrat";
  color: var(--text-primary-color);
  font-size: 16px;
  font-weight: 500;
}

.home-courses-swiper-wrapper {
  margin-top: 20px;
}
#coursesSwiper {
  /* padding-block: 20px; */
  height: 402px;
  overflow: visible;
}
#coursesSwiper .swiper-wrapper {
  align-items: flex-end;
  transition: all 0.3s;
}
#coursesSwiper .swiper-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 304px;
  border-radius: 8px;
  height: fit-content;
  will-change: width;
  background: linear-gradient(
    to bottom,
    var(--bg-tertiary-color-10),
    var(--bg-tertiary-color-5)
  );
  opacity: 0.2;
  box-shadow: 0 0 0 1px var(--bg-tertiary-color-30);

  will-change: width, height, opacity, box-shadow;

  /* transition: width 0.3s, height 0.3s, opacity 0.3s; */
  transition: box-shadow 0.4s, width 0.4s, height 0.4s, opacity 0.4s;
}

#coursesSwiper .swiper-slide .home-course-actions-wrapper {
  display: none;
}
/* #coursesSwiper .swiper-slide::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: linear-gradient(
    to bottom right,
    var(--bg-tertiary-color-20),
    var(--bg-tertiary-color-50)
  );
  border-radius: 8px;
  z-index: -1;
} */

#coursesSwiper .swiper-slide.swiper-slide-active {
  width: 438px;
  /* height: 402px; */
  background: linear-gradient(
    to bottom right,
    var(--bg-tertiary-color-15),
    var(--bg-tertiary-color-5)
  );
  /* background: linear-gradient(
      to bottom,
      var(--bg-tertiary-color-20),
      var(--bg-tertiary-color-5)
    ),
    linear-gradient(
      to bottom right,
      var(--bg-tertiary-color-15),
      var(--bg-tertiary-color-5)
    ); */

  opacity: 1;
  box-shadow: 0 0 0 1px var(--bg-tertiary-color-30),
    0 0 40px 5px var(--bg-tertiary-color-20);
  z-index: 1;
}
#coursesSwiper .swiper-slide.swiper-slide-prev,
#coursesSwiper .swiper-slide.swiper-slide-next {
  width: 397px;
  opacity: 1;
}

.home-courses-slide {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  will-change: width, height;
  transition: width 0.3s, height 0.3s;
}

.home-courses-slide-img {
  position: relative;
  width: 100%;
}
.swiper-slide-prev .home-courses-slide-img,
.swiper-slide-next .home-courses-slide-img {
  width: 100%;
  height: 100%;
}

.home-courses-slide-img > img {
  display: block;
  width: 304px;
  height: 171px;
  object-fit: cover;
  border-top-right-radius: 9px;
  border-top-left-radius: 9px;
  transition: height 0.3s, height 0.3s;
  will-change: width, height;
}

.home-course-logos {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.home-course-logo-img {
  width: 35px;
  height: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
}
.home-course-logo-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: linear-gradient(
      -54deg,
      var(--bg-tertiary-color-60),
      var(--bg-tertiary-color-30)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.home-course-logo-img img {
  display: block;
  width: 20px;
  height: 20px;
  object-fit: cover;
}

.home-courses-slide-img .home-course-info {
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  width: 200px;
  height: 35px;
  position: absolute;
  left: 50%;
  bottom: 19px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.home-course-info-lessons {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.home-course-info-lessons img {
  width: 20px;
  height: 16px;
}
.home-course-info-lessons::after {
  content: "";
  margin-left: 7px;
  width: 1px;
  height: 16px;
  background-color: var(--color-primary-40-2);
}

.home-course-info-lessons span,
.home-course-info-hours span {
  font-size: 10px;
}

.home-course-info-hours {
  display: flex;
  align-items: center;
  gap: 5px;
}
.home-course-info-hours img {
  width: 16px;
  height: 16px;
}

#coursesSwiper .swiper-slide.swiper-slide-active .home-course-info {
  width: 227px;
  height: 38px;
}

#coursesSwiper .swiper-slide.swiper-slide-active .home-courses-slide-img > img {
  width: 438px;
  height: 246px;
}
#coursesSwiper .swiper-slide.swiper-slide-prev .home-courses-slide-img > img,
#coursesSwiper .swiper-slide.swiper-slide-next .home-courses-slide-img > img {
  width: 398px;
  height: 224px;
}

.home-courses-slide-details {
  width: 100%;
  height: 142px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  /* transition: all 0.3s; */
  transition: height 0.4s ease, width 0.4s ease;
}

#coursesSwiper .swiper-slide h3 {
  text-align: center;
  max-width: 272px;
  margin-inline: auto;

  display: -webkit-box;
  line-clamp: 1;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
#coursesSwiper .swiper-slide p {
  text-align: center;
  max-width: 272px;
  margin-top: 20px;
  margin-inline: auto;

  display: -webkit-box;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

#coursesSwiper .swiper-slide.swiper-slide-active .home-courses-slide-details {
  height: 155px;
}

#coursesSwiper .swiper-slide.swiper-slide-active h3,
#coursesSwiper .swiper-slide.swiper-slide-prev h3,
#coursesSwiper .swiper-slide.swiper-slide-next h3,
#coursesSwiper .swiper-slide.swiper-slide-active p,
#coursesSwiper .swiper-slide.swiper-slide-prev p,
#coursesSwiper .swiper-slide.swiper-slide-next p {
  text-align: center;
  max-width: 406px;
  margin-inline: auto;
}

.courses-swiper-navigation {
  margin-top: 20px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
}

.courses-swiper-scrollbar {
  position: static !important;
  height: 17px !important;
  border-radius: 12px;
  background-color: var(--bg-tertiary-color-10);
  box-shadow: 0 0 0 1px var(--bg-tertiary-color-10) inset;
}
.courses-swiper-scrollbar .swiper-scrollbar-drag {
  background-color: var(--bg-tertiary-color-60);
  box-shadow: 0 0 0 1px var(--bg-tertiary-color) inset;
}

.courses-swiper-btns {
  display: flex;
  gap: 16px;
}

.all-courses {
  margin-top: 40px;
  width: 192px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-inline: auto;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border-primary-color-30) inset;
}

@media (max-width: 768px) {
  .hero-background {
    position: absolute;
    top: -270px;
    left: 0;
    width: 100%;
    height: 160%;
    object-fit: cover;
    z-index: -1;
  }
  .courses-section > h2 {
    font-size: 24px;
    line-height: 32px;
  }
  .home-courses-description,
  .home-course-actions-wrapper {
    display: none;
  }
  .home-courses-swiper-wrapper {
    margin-top: 20px;
  }

  #coursesSwiper {
    height: 468px;
  }
  #coursesSwiper .swiper-slide {
    width: 272px;
    height: 100%;
    transform: scaleY(0.95);
    box-shadow: 0 0 0 1px var(--bg-tertiary-color-30);
    transition: transform 0.3s, opacity 0.3s;
  }

  #coursesSwiper .swiper-slide.swiper-slide-active {
    width: 272px;
    transform: scaleY(1);
    background: linear-gradient(
      -28deg,
      var(--bg-tertiary-color-5),
      var(--bg-tertiary-color-15)
    );
  }
  #coursesSwiper .swiper-slide.swiper-slide-prev,
  #coursesSwiper .swiper-slide.swiper-slide-next {
    width: 272px;
    opacity: 0.2;
  }

  .home-courses-slide-img > img {
    width: 256px;
    height: 143px;
    transition: height 0.3s, width 0.3s;
  }

  #coursesSwiper
    .swiper-slide.swiper-slide-active
    .home-courses-slide-img
    > img {
    width: 100%;
    height: 170px;
  }
  #coursesSwiper .swiper-slide.swiper-slide-prev .home-courses-slide-img,
  #coursesSwiper .swiper-slide.swiper-slide-next .home-courses-slide-img,
  #coursesSwiper .swiper-slide.swiper-slide-prev .home-courses-slide-img > img,
  #coursesSwiper .swiper-slide.swiper-slide-next .home-courses-slide-img > img {
    width: 256px;
    height: 143px;
  }

  #coursesSwiper .swiper-slide.swiper-slide-active .home-course-info {
    width: 252px;
    height: 37px;
    bottom: 10px;
    box-shadow: 0 0 0 1px var(--border-primary-color-30) inset;
  }

  .home-courses-slide-img .home-course-info {
    width: 192px;
    height: 30px;
    bottom: 10px;
  }

  .home-course-info-lessons img {
    width: 12px;
    height: 10px;
  }
  .home-course-info-hours img {
    width: 10px;
    height: 10px;
  }
  #coursesSwiper .swiper-slide.swiper-slide-active .home-courses-slide-details {
    max-height: 143px;
    height: auto;
    margin-top: 20px;
    padding: 0 10px 0;
  }
  #coursesSwiper .swiper-slide.swiper-slide-active p {
    text-align: left;
  }
  #coursesSwiper .swiper-slide p {
    max-width: 272px;
    margin-top: 10px;
    font-size: 16px;
    line-height: 24px;
    display: -webkit-box;
    line-clamp: 4;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .courses-swiper-navigation {
    margin-top: 34px;
  }

  .all-courses {
    margin-top: 20px;
    width: 100%;
  }

  #coursesSwiper .swiper-slide .home-course-actions-wrapper {
    width: 100%;
    margin-top: 0;
    display: flex;
    align-items: flex-start;
    padding: 0 10px 10px;
  }
  .mobile-course-actions-wrapper .mobile-course-dates {
    display: flex;
    align-items: center;
    gap: 17px;
  }
  .mobile-course-actions-wrapper .mobile-course-dates span:first-child {
    font-size: 12px;
    color: var(--text-primary-color-60);
  }
  .mobile-course-actions-wrapper .mobile-course-dates span:last-child {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary-color-90);
  }
  #coursesSwiper
    .swiper-slide
    .mobile-course-actions-wrapper
    .home-course-price {
    margin-top: 10px;
    width: 100%;
    gap: 17px;
    display: flex;
    justify-content: space-between;
  }
  #coursesSwiper .swiper-slide .mobile-course-actions-wrapper .current-price {
    margin-top: 0;
    font-size: 24px;
  }
  #coursesSwiper .swiper-slide .mobile-course-actions-wrapper .old-price {
    margin-top: 0;
    font-size: 16px;
  }
  #coursesSwiper .swiper-slide .mobile-course-actions-wrapper .sale {
    margin-top: 0;
    width: 74px;
    font-size: 14px;
    font-weight: 500;
    display: grid;
    place-content: center;
  }
  #coursesSwiper
    .swiper-slide
    .mobile-course-actions-wrapper
    .home-course-actions {
    width: 100%;
    margin-top: 10px;
    gap: 10px;
    justify-content: space-between;
  }
  #coursesSwiper
    .swiper-slide
    .mobile-course-actions-wrapper
    .add-to-favorites-btn {
    order: 1;
    width: 40px;
    height: 40px;
  }
  #coursesSwiper .swiper-slide .mobile-course-actions-wrapper .add-to-cart {
    width: 202px;
    height: 40px;
  }
}

/* !Stay Abroad Home */

.study-abroad-section {
  padding-inline: 24px;
}
.study-abroad-section-content {
  position: relative;
  margin-top: 100px;
  border-radius: 24px;
  padding-inline: 4px;
  z-index: 1;
}
.study-abroad-section-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    0deg,
    var(--bg-red-600),
    var(--bg-pink-500),
    var(--bg-blue-300)
  );
  opacity: 0.6;
  border-radius: 24px;
  z-index: -1;
}

.study-abroad-linear-bg {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: linear-gradient(
    to right,
    var(--bg-blue-300),
    var(--bg-pink-500),
    var(--bg-red-600)
  );
  border-radius: 20px;
  z-index: -1;
}
.study-abroad-linear-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 0%);
  opacity: 0.6;
  border-radius: 20px;
  z-index: -1;
}

.study-abroad-heading {
  position: absolute;
  top: -47px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 432px;
  background-color: var(--bg-primary-color);
  height: 81px;
  border-radius: 12px;
}
.study-abroad-heading::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    80deg,
    var(--bg-blue-300),
    var(--bg-pink-500),
    var(--bg-red-600)
  );
  opacity: 0.6;
  border-radius: 12px;
  z-index: -1;
}
.study-abroad-heading-linear-bg {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: linear-gradient(
    80deg,
    var(--bg-blue-300),
    var(--bg-pink-500),
    var(--bg-red-600)
  );
  border-radius: 8px;
  z-index: -1;
}
.study-abroad-heading-linear-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: hsl(0, 0%, 0%);
  opacity: 0.6;
  border-radius: 8px;
  backdrop-filter: blur(24px);
  box-shadow: 0 12 24 0 rgba(23, 23, 23, 0.25) inset;
}
.study-abroad-heading h2 {
  text-transform: uppercase;
  font-family: "Raleway";
  font-weight: 900;
  font-size: 28px;
  letter-spacing: 5px;
}

.study-abroad-title {
  padding: 61px 29px 36px;
  border-bottom: 1px solid var(--border-primary-color-50);
}
.study-abroad-title p {
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}

.study-abroad-details {
  position: relative;
  display: grid;
  grid-template-columns: 415px 555px;
  gap: 40px;
  justify-content: center;
  padding: 61px 0;
  overflow: hidden;
}
.study-abroad-bg-img {
  width: 100%;
  height: calc(100% - 4px);
  position: absolute;
  top: 0;
  left: 0;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  opacity: 0.8;
  object-fit: cover;
  z-index: -1;
}
.study-abroad-bg-img-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 4px);
  background: linear-gradient(
    to bottom,
    hsla(0, 0%, 0%, 0.8),
    hsla(0, 0%, 0%, 0.7) 20%,
    hsla(0, 0%, 0%, 0.8)
  );
  /* opacity: 0.8; */
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 0;
}

.study-abroad-imgs {
  position: relative;
  display: grid;
  grid-template-columns: 192px 1fr;
  gap: 18px;
  align-items: end;
}
.study-abroad-imgs img:nth-child(1) {
  border-radius: 7px;
  width: 192px;
  height: 176px;
  object-fit: cover;
}
.study-abroad-imgs img:nth-child(2) {
  border-radius: 6px;
  width: 139px;
  height: 138px;
  object-fit: cover;
}
.study-abroad-imgs img:nth-child(3) {
  position: absolute;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  margin-right: -40px;
  width: 220px;
  height: 220px;
  object-fit: cover;
  z-index: 3;
}
.study-abroad-imgs img:nth-child(4) {
  width: 364px;
  height: 265px;
  object-fit: contain;
  border-radius: 8px;
  margin-left: 51px;
}

.study-abroad-texts {
  height: fit-content;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: flex-end;
}
.study-abroad-outline {
  width: 101px;
  height: 41px;
  position: absolute;
  left: 167px;
  top: 0;
}
.study-abroad-texts h3 {
  font-size: 32px;
  font-family: "Inter";
  font-weight: 400;
  margin-bottom: 20px;
}
.study-abroad-texts p {
  max-width: 530px;
  font-size: 16px;
  font-family: "Inter";
  font-weight: 400;
  line-height: 24px;
  margin-bottom: 40px;
}

.study-abroad-learn-more {
  position: relative;
  width: 236px;
  height: 63px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  font-size: 20px;
  font-family: "Raleway";
  font-weight: 600;
  backdrop-filter: blur(24px);
  box-shadow: 0 12px 24px 0 rgba(23, 23, 23, 0.25) inset;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-primary-color);

  z-index: 10;
}
.study-abroad-learn-more::before {
  z-index: -1;

  border-radius: 12px;
}
.study-abroad-learn-more::after {
  border-radius: 12px;
}

@media (max-width: 1024px) {
  .study-abroad-details {
    grid-template-columns: auto;
  }

  .study-abroad-imgs {
    width: fit-content;
    position: relative;
    display: grid;
    grid-template-columns: 192px 1fr;
    gap: 18px;
    align-items: end;
  }

  .study-abroad-texts {
    padding-inline: 20px;
  }
  .study-abroad-outline {
    left: 187px;
  }
}

@media (max-width: 768px) {
  .study-abroad-heading {
    top: -15px;
    width: 198px;
    height: 25px;
    border-radius: 6px;
  }
  .study-abroad-heading::before {
    border-radius: 6px;
  }
  .study-abroad-heading-linear-bg {
    border-radius: 2px;
  }
  .study-abroad-heading-linear-bg::after {
    background: hsl(0, 0%, 0%);
    opacity: 0.6;
    border-radius: 2px;
  }
  .study-abroad-heading h2 {
    font-size: 16px;
    letter-spacing: 2px;
  }

  .study-abroad-title {
    padding: 20px 7.5px 10px;
    border-bottom: 1px solid var(--border-primary-color-50);
  }

  .study-abroad-title p {
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
  }

  .study-abroad-details {
    padding: 10px 10px 20px;
    gap: 20px;
  }

  .study-abroad-imgs {
    grid-template-columns: 116px 1fr;
    gap: 11px;
  }
  .study-abroad-imgs img:nth-child(1) {
    width: 116px;
    height: 106px;
  }
  .study-abroad-imgs img:nth-child(2) {
    width: 84px;
    height: 84px;
  }
  .study-abroad-imgs img:nth-child(3) {
    top: 55px;
    width: 132.5px;
    height: 132.5px;
  }
  .study-abroad-imgs img:nth-child(4) {
    width: 219px;
    height: 160px;
    margin-left: 31px;
  }

  .study-abroad-texts {
    padding-inline: 10px;
  }
  .study-abroad-texts h3 {
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
  }
  .study-abroad-outline {
    left: 128px;
    width: 56px;
    height: 24px;
  }
  .study-abroad-texts p {
    text-align: center;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 15px;
  }
  .study-abroad-learn-more {
    position: relative;
    width: 100%;
    height: 63px;
    z-index: 10;
  }
  .study-abroad-learn-more {
    font-size: 16px;
  }
}

/* !Top Instructors Home */

.top-instructors-section {
  position: relative;
  padding-inline: 24px;
  margin-top: 100px;
  overflow-x: clip;
}
.top-instructors-section::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 160%;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--color-primary), transparent);
  opacity: 0.2;
  filter: blur(60px);
  z-index: -1;
}

.top-instructors-section h2 {
  font-weight: 900;
  font-size: 32px;
  text-align: center;
}

.top-instructors-list {
  margin-top: 40px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 298px));
  grid-auto-rows: 340px;
  justify-content: center;
  gap: 40px;
}

.top-instructor-card {
  width: max(272px, 298px);
  position: relative;
  border-radius: 12px;
  background-color: var(--bg-instructors-card-60);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  box-shadow: 0 0 0 1px var(--border-primary-color-15),
    0 0 30px 0 var(--shadow-white-8);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.top-instructor-card:hover {
  box-shadow: 0 0 0 1px var(--border-primary-color-15),
    0 0 30px 0 var(--shadow-white-12);
  background-color: var(--bg-instructors-card-19);
}

.top-instructor-img {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  object-fit: cover;
}
.top-instructor-texts {
  display: grid;
  gap: 16px;
}
.top-instructor-name {
  margin-top: 20px;
  text-align: center;
  font-weight: 500;
  font-size: 20px;
}
.top-instructor-title {
  text-align: center;
  font-size: 16px;
  color: var(--text-primary-color-60);
}

.all-instructors {
  margin-top: 40px;
  width: 192px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-inline: auto;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border-primary-color-30) inset;
}

@media (max-width: 768px) {
  .top-instructors-section {
    margin-top: 60px;
  }
  .top-instructors-section h2 {
    font-size: 20px;
    line-height: 32px;
  }
  .top-instructors-list {
    margin-top: 20px;
    grid-template-columns: repeat(auto-fit, minmax(272px, 298px));
    /* grid-auto-rows: 302px; */
    grid-auto-rows: auto;
    gap: 20px;
  }
  .top-instructor-card {
    width: 100%;
    max-width: 300px;
    min-height: 302px;
  }
  .top-instructor-title {
    font-size: 18px;
    max-width: 250px;
  }

  .all-instructors {
    width: 100%;
  }
}

/* !Events Home */

.events-section {
  margin-top: 100px;
  padding-inline: 24px;
}

.events-section-content > h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
.events-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 411px));
  gap: 39px;
}
.event-card {
  width: max(272px, 410px);
  padding: 24px;
  position: relative;
  border-radius: 12px;
  background-color: var(--bg-tertiary-color-10);
  transition: background-color 0.2s, box-shadow 0.2s;
}
.event-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(
      -39deg,
      var(--bg-tertiary-color-10),
      var(--bg-tertiary-color-40)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.event-card:hover {
  background-color: var(--bg-tertiary-color-15);
  box-shadow: 0 0 30px 0 var(--shadow-white-10);
}

.event-card-img-wrapper {
  margin-inline: auto;
  width: fit-content;
  position: relative;
}
.event-card-img-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5) inset;
  border-radius: 8px;
  z-index: 1;
}
.event-card-img {
  position: relative;
  width: max(224px, 363px);
  height: 269px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}
.event-tag {
  padding: 10px 17px;
  display: flex;
  justify-content: center;
  gap: 12px;
  align-items: center;
  position: absolute;
  left: 50%;
  bottom: 25px;
  transform: translateX(-50%);
  border-radius: 8px;
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
}

.event-card-details {
  margin-top: 24px;
  display: flex;
  align-items: center;
}
.event-card-date {
  margin-inline: 12px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
}
.event-card-texts {
  border-left: 1px solid var(--border-primary-color-17);
  padding-left: 12px;
}
.event-card-texts h3 {
  font-weight: 500;
  font-size: 20px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.event-card-texts p {
  margin-top: 10px;
  font-size: 18px;
  color: var(--text-primary-color-60);

  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.all-events {
  margin-top: 40px;
  width: 192px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-inline: auto;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border-primary-color-30) inset;
}

@media (max-width: 768px) {
  .events-section {
    margin-top: 60px;
  }
  .events-section-content > h2 {
    font-size: 20px;
  }
  .events-list {
    grid-template-columns: minmax(272px, 1fr);
    justify-content: center;
    gap: 30px;
  }
  .event-card {
    width: 100%;
    padding: 20px 24px;
  }
  .event-card-img {
    width: 224px;
  }
  .event-tag {
    padding: 10px 20px;
  }
  .event-card-details {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .event-card-date {
    margin-block: 12px;
    font-size: 24px;
  }
  .event-card-texts {
    border-top: 1px solid var(--border-primary-color-17);
    border-left: none;
    padding-left: 0;
    padding-top: 12px;
  }
  .event-card-texts h3 {
    text-align: center;
    font-size: 18px;
  }
  .event-card-texts p {
    text-align: center;
    font-size: 16px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
  }
  .all-events {
    width: 100%;
  }
}

/* !News Home */
.news-section {
  margin-block: 100px;
  padding-inline: 24px;
}

.news-section h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}

.news-section-list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.news-card {
  position: relative;
  display: flex;
  gap: 40px;
  border-radius: 8px;
  padding-right: 20px;
}
.news-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(
    75deg,
    var(--bg-tertiary-color-15),
    var(--bg-tertiary-color-5)
  );
  z-index: -1;
  opacity: 0.5;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.news-card::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.5;
  background: linear-gradient(
      80deg,
      var(--bg-tertiary-color-20),
      var(--bg-tertiary-color-50)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.news-card:hover::before {
  opacity: 0.7;
  box-shadow: 0 0 30px 0 var(--shadow-white-10);
}

.news-card:nth-of-type(2) {
  justify-content: flex-end;
  padding-left: 20px;
  padding-right: 0;
}
.news-card:nth-of-type(2) .news-card-img-wrapper {
  order: 1;
}
.news-card:nth-of-type(2) .news-card-texts {
  align-items: flex-end;
}
.news-card:nth-of-type(2) .news-card-texts .news-card-description {
  text-align: right;
}

.news-card-img-wrapper {
  position: relative;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
}
.news-card-img-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.5) inset;
  border-radius: 8px;
  z-index: 1;
}

.news-card-img {
  display: block;
  width: 581px;
  height: 327px;
  object-fit: cover;
  border-radius: 8px;
}

.news-card-texts {
  max-width: 570px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}
.news-card-title {
  font-size: 18px;
  font-weight: 700;

  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}
.news-card-description {
  font-size: 16px;
  line-height: 26.9px;
  color: var(--text-primary-color-60);

  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.news-card-posted-date span {
  font-size: 12px;
  color: var(--text-primary-color-70);
}
.news-card-posted-date p {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary-color-70);
}

.all-news {
  margin-top: 40px;
  width: 192px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-inline: auto;
  font-size: 18px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border-primary-color-30) inset;
}

@media (max-width: 1024px) {
  .news-card-img {
    width: 381px;
  }
}
@media (max-width: 768px) {
  .news-section {
    margin-block: 60px;
  }
  .news-section h2 {
    font-size: 20px;
  }

  .news-card {
    gap: 10px;
    padding-right: 0;
    flex-direction: column;
  }

  .news-card-img {
    width: 100%;
    height: 243px;
  }

  .news-card:nth-of-type(2) {
    justify-content: flex-start;
    padding-left: 0;
    padding-right: 0;
  }
  .news-card:nth-of-type(2) .news-card-img-wrapper {
    order: 0;
  }
  .news-card-texts {
    padding: 0 10px 20px;
  }
  .news-card-title {
    text-align: center;
    line-height: 26px;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .news-card-description {
    text-align: center;
    font-size: 14px;
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
}
@media (max-width: 480px) {
  .news-card-img {
    min-width: 272px;
    height: 143px;
  }

  .all-news {
    width: 100%;
  }
}

/* !Registration Page */

.registration-form-wrapper {
  margin-block: 100px 64px;
  padding-inline: 24px;
}

/* .registration-form-wrapper .hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
} */

.registration-form {
  position: relative;
  max-width: 718px;
  margin-inline: auto;
  padding: 40px 80px;
  border-radius: 12px;

  z-index: 0;
}

.form-default-styles {
  position: relative;
  max-width: 718px;
  margin-inline: auto;
  border-radius: 12px;
  padding: 40px 80px;
  background-color: var(--bg-tertiary-color-5);
  z-index: 0;
}

.form-default-styles::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(var(--color-white-5), var(--color-white-5)),
    linear-gradient(
      -43deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    );
  opacity: 0.05;
  border-radius: 12px;
  z-index: -1;
}
.form-default-styles::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  background: linear-gradient(
      -43deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.form-title {
  margin-bottom: 40px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: var(--color-white);
}
.form-groups-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-groups-flex {
  display: flex;
  gap: 40px;
}
.form-group {
  width: 100%;
}

.form-group label {
  font-size: 18px;
  color: var(--text-form-label-80);
}

.custom-select {
  margin-top: 13px;
  /* padding: 12px 20px 12px 12px; */
}
.custom-select-trigger {
  position: relative;
  padding: 12px 20px 12px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.custom-select-trigger h4 {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-primary-color-90);
}
.custom-select-trigger img {
  display: block;
  width: 16px;
  transition: transform 0.2s;
}
.custom-select.open .custom-select-trigger::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    -67deg,
    var(--bg-tertiary-color-10),
    var(--bg-tertiary-color-20)
  );
  border-radius: 8px;
  opacity: 1;
  z-index: 2;
  transition: opacity 0.2s;
}
.custom-select.open .custom-select-trigger img {
  transform: rotate(180deg);
}

.custom-select-options {
  /* padding: 12px 20px 12px 12px; */
  display: flex;
  flex-direction: column;
  height: 0;
  transition: height 0.2s ease;
  overflow: hidden;
}
.custom-select-options li {
  color: var(--text-primary-color-70);
  background-color: transparent;
  padding: 12px 20px 12px 12px;
  transition: background-color 0.3s;
}
.custom-select-options li:hover {
  background-color: var(--bg-tertiary-color-10);
  cursor: pointer;
}
.custom-select-options li:last-child:hover {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.form-radio-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.form-radio-group input {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.custom-radio {
  position: relative;
  width: 26px;
  height: 26px;
  box-shadow: 0 0 0 1px var(--border-blue-400) inset;
  border-radius: 50%;
  background-color: var(--color-white);
}
.custom-radio::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background-color: var(--border-blue-400);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

.input-text {
  display: block;
  position: relative;
  padding: 12px;
  width: 100%;
  height: 44px;
  margin-top: 13px;
  font-size: 16px;
  font-family: "Montserrat";
  background-color: transparent;
  border-radius: 8px;
  border: none;
  outline: none;
}
.input-with-icon {
  position: relative;
}
.input-with-icon::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(
      -43deg,
      var(--border-primary-color-10),
      var(--border-primary-color-25)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
.input-with-icon:focus-within::after {
  background: linear-gradient(
      -43deg,
      var(--border-primary-color-60),
      var(--border-primary-color-50)
    )
    border-box;
}

.input-text::placeholder {
  color: var(--text-form-placeholder-70);
}

.terms-checkbox-wrapper {
  display: flex;
  align-items: center;
}
.custom-checkbox-label {
  width: fit-content;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.input-checkbox {
  position: absolute; /* Hide it from view */
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  appearance: none;
}
.custom-checkbox {
  display: inline-flex;
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-gray-2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  background-color: transparent;
}
.custom-checkbox::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 4px;
  width: 3px;
  height: 7px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0;
  transform: rotate(45deg);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.input-checkbox:checked + .custom-checkbox {
  /* border-color: var(--color-primary); */
  /* background-color: var(--color-primary); */
}
.input-checkbox:checked + .custom-checkbox::after {
  opacity: 1;
}

.checkbox-label:active .custom-checkbox {
  /* transform: scale(0.95); */
}

.input-textarea {
  margin-top: 13px;
  padding: 16px 12px;
  display: block;
  background-color: transparent;
  width: 100%;
  min-height: 167px;
  resize: none;
  border: none;
  outline: none;
  font-family: "Montserrat";
  font-size: 16px;
}
.input-textarea::placeholder {
  color: var(--text-form-placeholder-70);
}

.terms-group .terms-label {
  margin-left: 8px;
  font-size: 15px;
}
.terms-group .terms-label a {
  color: var(--color-primary-70);
  font-size: 15px;
}

.input-with-icon .asterisk-img {
  position: absolute;
  top: 10px;
  right: 12px;
}

.form-group-error .input-text {
  border-bottom: 1px solid var(--color-red-600-80);
}
.info-red {
  display: none;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}
.form-group-error .info-red {
  display: block;
}
.form-error-text {
  display: none;
  text-align: right;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1;
  color: var(--color-red-600-80);
}
.form-group-error .form-error-text {
  display: block;
}

.form-btn {
  font-family: "Montserrat";
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding-block: 20px;
  border: none;
  border-radius: 8px;
  background-color: var(--color-primary-80);
  cursor: pointer;
}
.form-btn p span {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-gray-400);
}
.form-btn p {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}

.have-account {
  margin-top: 40px;
}
.have-account p {
  text-align: center;
  font-size: 18px;
}
.have-account a {
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .registration-form-wrapper {
    margin-block: 60px 70px;
    padding-inline: 24px;
  }

  .form-default-styles {
    position: relative;
    max-width: 718px;
    margin-inline: auto;
    padding: 20px 10px;
    border-radius: 12px;
    z-index: 0;
  }
  .form-title {
    font-size: 24px;
  }
  .form-error-text {
    font-size: 12px;
  }
  .form-btn {
    padding-block: 9px;
    border-radius: 4px;
  }
  .have-account {
    margin-top: 20px;
  }
  .have-account p {
    font-size: 16px;
  }
}

/* !Sign In Page */

.log-in-form-wrapper {
  margin-block: 100px;
  padding-inline: 24px;
}

.sign-in-form .form-groups-wrapper {
  gap: 40px;
}

.do-not-have-account {
  margin-top: 40px;
}
.do-not-have-account p {
  text-align: center;
  font-size: 18px;
}
.do-not-have-account a {
  color: var(--color-primary);
}
.reset-password-link {
  font-size: 18px;
  display: block;
  margin-top: 40px;
  text-align: center;
  color: var(--color-primary);
}

@media (max-width: 768px) {
  .log-in-form-wrapper {
    margin-block: 60px;
  }
  .log-in-form-wrapper .form-title {
    margin-bottom: 30px;
  }

  .sign-in-form .form-groups-wrapper {
    gap: 20px;
  }

  .log-in-form-wrapper .form-btn {
    margin-top: 20px;
  }
  .do-not-have-account {
    margin-top: 30px;
  }
  .do-not-have-account p {
    font-size: 16px;
  }
  .reset-password-link {
    font-size: 16px;
    margin-top: 20px;
  }
}

/* !Password Recovery Page */
.recovery-password-form-wrapper {
  margin: 100px 24px 141px;
}

.recovery-password-form-wrapper .form-btn {
  margin-top: 20px;
}
.recovery-password-form-wrapper .have-account {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .recovery-password-form-wrapper {
    margin: 60px 24px 60px;
  }

  .get-recovery-email-btn p span {
    font-size: 18px;
  }
}

/* !Terms Page */
.terms-form-wrapper {
  margin: 100px 24px;
}
.terms-form {
  padding: 40px;
}
.terms-form .form-title {
  max-width: 375px;
  margin-inline: auto;
  line-height: 38px;
}

.terms-paragraph {
  font-size: 16px;
  line-height: 28px;
  color: var(--text-form-label-80);
}

.terms-list {
  /* list-style: disc;
  list-style-position: inside; */
  position: relative;
  font-size: 16px;
  line-height: 28px;
  color: var(--text-form-label-80);
}
.terms-list-item {
  position: relative;
  padding-left: 20px;
}
.terms-list-item::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 9px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: var(--text-form-label-80);
}
li.terms-list-item::marker {
  margin: 0px !important;
  margin-inline: 10px;
}

.terms-form-actions {
  margin-top: 40px;
  display: flex;
  gap: 20px;
}
.terms-form-wrapper .form-btn {
  width: 100%;
  padding-block: 0;
  height: 50px;
}
.form-btn-decline {
  background-color: transparent;
  border: 1px solid var(--border-gray-3);
  font-family: "Montserrat";
  font-weight: 500;
  font-size: 16px;
  color: var(--text-gray-60);
}
.form-btn-accept {
  font-size: 16px;
  font-weight: 700;
  line-height: 14px;
  color: var(--text-gray);
}

@media (max-width: 768px) {
  .terms-form-wrapper {
    margin-block: 60px 80px;
  }
  .terms-form {
    padding: 20px 10px;
  }
  .terms-form .form-title {
    max-width: 245px;
    font-size: 20px;
  }
  .terms-paragraph {
    line-height: 24px;
  }
  .terms-form-actions {
    display: flex;
    flex-direction: column;
  }
  .terms-form-wrapper .form-btn {
    height: 40px;
  }
  .form-btn-decline {
    order: 1;
  }
  .form-btn-accept {
    font-size: 18px;
  }
}

/* !Courses Page */
.courses-page-wrapper {
  margin-top: 100px;
  padding-inline: 24px;
}
.courses-page-gradient-bg {
  position: absolute;
  top: -575px;
  left: 50%;
  transform: translateX(-50%);
  width: 1740px;
  height: 1254px;
  background: radial-gradient(closest-side, var(--color-primary), transparent);
  opacity: 0.4;
  z-index: -1;
}

.courses-page-content h1 {
  font-size: 24px;
  font-weight: 700;
}

.courses-page-search-form {
  margin-top: 40px;
  width: 100%;
  max-width: 536px;
  height: 40px;
  padding-inline: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border-primary-color-70);
  border-radius: 5px;
}
.courses-page-search-form input {
  width: 100%;
  height: 100%;
  font-size: 14px;
  font-family: "Montserrat";
  border: none;
  outline: none;
  background-color: transparent;
}
.courses-page-search-form input::placeholder {
  color: var(--text-primary-color-50);
}

.courses-category {
  margin-top: 40px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.courses-category a {
  position: relative;
  font-size: 16px;
  padding: 12px;
}
.courses-category a.active-category {
  position: relative;
  padding: 12px;
  font-weight: 500;
  color: var(--color-primary);
  background-color: var(--bg-black-800);
  border-radius: 4px;
  /* --bg-blue-350: #12c2e9;
  --bg-pink-550: #c471ed;
  --bg-red-650: #f64f59; */
}
.courses-category a.active-category::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  opacity: 0.5;
  border: 2px solid transparent;
  background: linear-gradient(
      78deg,
      var(--bg-blue-350),
      var(--bg-pink-550),
      var(--bg-red-650)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.courses-category a:hover {
  position: relative;
  border-radius: 4px;
  background-color: var(--bg-tertiary-color-10);
  transition: all 0.3s;
}
.courses-category a::after {
  transition: all 0.3s;
}
.courses-category a:hover::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  opacity: 0.5;
  border: 2px solid transparent;
  background: linear-gradient(
      78deg,
      var(--bg-blue-350),
      var(--bg-pink-550),
      var(--bg-red-650)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.courses-page-separator {
  margin-block: 40px;
  height: 1px;
  width: 100%;
  opacity: 0.4;
  background: linear-gradient(
    to bottom,
    var(--border-primary-color-30),
    var(--border-primary-color-50)
  );
}

.courses-page-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 410px));
  gap: 40px;
}

.courses-page-list-item {
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 8px;
  background: linear-gradient(
    -36deg,
    var(--bg-tertiary-color-5),
    var(--bg-tertiary-color-15)
  );
}
.courses-page-list-item:hover {
  /* background: none; */
}

.courses-page-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  opacity: 0;
  background: linear-gradient(
    -36deg,
    var(--bg-tertiary-color-5),
    var(--bg-tertiary-color-15)
  );
  transition: opacity 0.2s, box-shadow 0.2s;
}
.courses-page-list-item:hover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: linear-gradient(
    -36deg,
    var(--bg-tertiary-color-10),
    var(--bg-tertiary-color-30)
  );
  box-shadow: 0 0 30px 0 var(--shadow-white-10);
  opacity: 0.8;
}

.courses-page-list-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  opacity: 0.8;
  background: linear-gradient(
      -48deg,
      var(--bg-tertiary-color-50),
      var(--bg-tertiary-color-20)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.courses-page-list-item a {
  z-index: 10;
}

.courses-list-item-img {
  position: relative;
}

.courses-list-item-img > img {
  width: 410px;
  height: 230px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  object-fit: cover;
}

.course-list-item-logos {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.course-list-item-logo-img {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
}
.course-list-item-logo-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: linear-gradient(
      -54deg,
      var(--bg-tertiary-color-60),
      var(--bg-tertiary-color-30)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.course-list-item-logo-img img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}

.course-list-item-info {
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  width: 212px;
  height: 37px;
  position: absolute;
  left: 50%;
  bottom: 19px;
  transform: translateX(-50%);
  transition: width 0.3s, height 0.3s;
}
.course-info-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  gap: 10px;
  position: relative;
}
.course-info-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: linear-gradient(
      83deg,
      var(--bg-tertiary-color-20),
      var(--bg-tertiary-color-50)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.course-info-lessons {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.course-info-lessons::after {
  content: "";
  margin-left: 10px;
  width: 1px;
  height: 16px;
  background-color: var(--color-primary-40-2);
}
.course-info-hours {
  display: flex;
  align-items: center;
  gap: 5px;
}

.course-info-lessons img {
  width: 20px;
  height: 16px;
}
.course-info-hours img {
  width: 16px;
  height: 16px;
}
.course-info-lessons span,
.course-info-hours span {
  font-size: 10px;
}

.courses-details {
  position: relative;
  padding: 20px 20px 0;
  z-index: 10;
}
.course-title {
  font-size: 18px;
  font-weight: 700;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.course-description {
  margin-top: 20px;
  font-size: 18px;
  line-height: 24px;

  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.course-actions-wrapper {
  margin-top: 20px;
}
.course-price-and-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-price {
  display: flex;
  align-items: center;
  gap: 9px;
}
.course-current-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary-color-90);
}
.course-old-price {
  font-size: 16px;
  color: var(--text-primary-color-60);
  text-decoration: line-through;
}
.course-sale {
  width: 77px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary-color-90);
  background-color: var(--color-red-600);
  border-radius: 5px;
}
.course-dates {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}
.course-dates span:first-child {
  font-size: 12px;
  color: var(--text-primary-color-60);
}
.course-dates span:last-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary-color-90);
}

.course-actions {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 20px;
  padding: 0 20px 20px;
  z-index: 10;
}
.add-to-cart {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary-color);
  border-radius: 4px;
  border: none;
  background-color: var(--color-primary-80);
  cursor: pointer;
}
/* .add-to-favorites {
  width: 44px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid var(--border-primary-color-50);
  cursor: pointer;
} */

.courses-page-pagination {
  margin: 40px 24px 76px;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.pagination button {
  cursor: pointer;
}
.pagination-btn-previous,
.pagination-btn-next {
  width: 44px;
  height: 44px;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background-color 0.2s, box-shadow 0.2s;
}
.pagination-btn-next {
  transform: rotate(180deg);
}
.pagination-btn-previous:hover,
.pagination-btn-next:hover {
  background-color: var(--bg-tertiary-color-10);
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
}

.pagination-btn {
  position: relative;
  width: 44px;
  height: 44px;
  background-color: transparent;
  border-radius: 4px;
  border: none;
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
  font-size: 16px;
  font-family: "Montserrat";
  transition: background-color 0.2s;
}
.pagination-btn:hover {
  background-color: var(--bg-tertiary-color-10);
}
.pagination-btn.active {
  background-color: var(--bg-tertiary-color-10);
}
.pagination-btn.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 2px solid transparent;
  opacity: 0.5;
  background: linear-gradient(
      -90deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: 1;
}
.pagination-ellipsis {
  align-self: flex-end;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .courses-page-wrapper {
    margin-top: 24px;
    padding-inline: 24px;
  }

  .courses-page-search-form {
    margin-top: 20px;
    height: 36px;
    padding-inline: 10px;
  }
  .courses-category {
    margin-top: 20px;
    gap: 10px;
  }
  .courses-category a {
    position: relative;
    font-size: 12px;
    color: var(--text-primary-color-80);
    padding: 10px 12px;
    border-radius: 4px;
    background-color: var(--bg-tertiary-color-10);
  }
  .courses-category a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    border: 1px solid transparent;
    background: linear-gradient(
        79deg,
        var(--bg-tertiary-color-30),
        var(--bg-tertiary-color-60)
      )
      border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
  }
  .courses-page-separator {
    margin-block: 20px;
  }

  .courses-page-list {
    gap: 20px;
  }

  .courses-list-item-img > img {
    width: 100%;
    height: 169px;
  }
  .course-list-item-info {
    width: 252px;
    bottom: 10px;
  }
  .course-list-item-logo-img {
    width: 35px;
    height: 35px;
  }
  .course-list-item-logo-img img {
    width: 20px;
    height: 20px;
  }
  .courses-details {
    padding: 20px 10px 0;
  }
  .course-title {
    font-size: 16px;
  }
  .course-description {
    margin-top: 10px;
    font-size: 16px;
  }
  .course-price-and-date {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .course-price {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    gap: 17px;
    order: 1;
  }
  .course-dates {
    flex-direction: row;
    align-items: flex-end;
    gap: 17px;
  }
  .course-sale {
    width: 75px;
  }
  .course-actions {
    margin-top: 10px;
    grid-template-columns: 1fr 40px;
    gap: 10px;
    padding: 0 10px 10px;
  }
  .add-to-favorites-btn {
    width: 40px;
    height: 40px;
  }
  .add-to-cart {
    height: 40px;
    font-size: 18px;
  }

  .courses-page-pagination {
    margin: 20px 24px 60px;
  }
  .pagination {
    gap: 8px;
  }
}

/* ! Course Inner Page */
.course-inner-sponsored-by-section {
  margin-top: 40px;
  padding-inline: 24px;
}
.course-inner-sponsored-by-section h1 {
  margin-top: 40px;
  font-size: 28px;
  line-height: 34px;
  text-transform: uppercase;
}
.sponsored-by-wrapper {
  margin-top: 20px;
}
.sponsored-companies-list {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
}
.sponsored-by-text {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary-color-60);
}

.course-inner-details-section {
  margin-top: 20px;
  padding-inline: 24px;
  position: relative;
  overflow-x: clip;
}

.back-btn {
  width: 118px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
  border-radius: 4px;
  border: none;
}

.course-details-container {
  position: relative;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 297px;
  column-gap: 40px;
}
.gradient-bg-wrapper {
  opacity: 0.3;
  z-index: -1;
}
.gradient-bg-cyan {
  content: "";
  position: absolute;
  top: 414px;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  width: 100%;
  height: 733px;
  border-radius: 50%;
  /* background: radial-gradient(circle, var(--color-primary), transparent); */
  background: radial-gradient(closest-side, var(--color-primary), transparent);
  opacity: 0.3;
  filter: blur(15px);
  /* will-change: filter; */
  z-index: -1;
}
.gradient-bg-red {
  content: "";
  position: absolute;
  top: 220px;
  left: -50%;
  width: 1374px;
  height: 950px;
  border-radius: 50%;
  /* background: radial-gradient(circle, #c81011, transparent); */
  background: radial-gradient(closest-side, #c81011, transparent);
  opacity: 0.7;
  /* filter: blur(200px); */
  /* will-change: filter; */
  transform: translateZ(0);
  z-index: -1;
}
.course-details-container .red-circle-bg {
  content: "";
  position: absolute;
  top: 220px;
  left: -50%;
  width: 1374px;
  height: 950px;
  /* opacity: 0.7; */
  z-index: -1;
}
.gradient-bg-cyan-2 {
  content: "";
  position: absolute;
  top: 220px;
  left: 0;
  width: 1374px;
  height: 1675px;
  border-radius: 50%;
  /* background: radial-gradient(circle, #0681bf, transparent); */
  background: radial-gradient(closest-side, #0681bf, transparent);
  opacity: 0.7;
  /* filter: blur(200px); */
  /* will-change: filter; */
  transform: translateZ(0);
  z-index: -2;
}
.course-details-container .cyan-circle-bg {
  content: "";
  position: absolute;
  top: 220px;
  left: 0;
  width: 1374px;
  height: 1675px;
  opacity: 0.7;
  z-index: -2;
}
.gradient-bg-pink {
  content: "";
  position: absolute;
  top: 600px;
  right: -40%;
  width: 1160px;
  height: 1460px;
  border-radius: 50%;
  /* background: radial-gradient(circle, #9314dd, transparent); */
  background: radial-gradient(closest-side, #9314dd, transparent);
  opacity: 0.7;
  /* filter: blur(200px); */
  /* will-change: filter; */
  transform: translateZ(0);
  z-index: -2;
}
.gradient-bg-red-2 {
  content: "";
  position: absolute;
  top: 1600px;
  right: -50%;
  width: 1374px;
  height: 650px;
  border-radius: 50%;
  /* background: radial-gradient(circle, #c81011, transparent); */
  background: radial-gradient(closest-side, #c81011, transparent);
  opacity: 0.6;
  /* filter: blur(60px); */
  /* will-change: filter; */
  transform: translateZ(0);
  z-index: -1;
}
.gradient-bg-pink-2 {
  content: "";
  position: absolute;
  top: 1700px;
  left: -50%;
  width: 1160px;
  height: 1360px;
  border-radius: 50%;
  /* background: radial-gradient(circle, #9314dd, transparent); */
  background: radial-gradient(closest-side, #9314dd, transparent);
  opacity: 0.6;
  /* filter: blur(60px); */
  /* will-change: filter; */
  transform: translateZ(0);
  z-index: -2;
}
.gradient-bg-cyan-3 {
  content: "";
  position: absolute;
  top: 1220px;
  left: 0;
  width: 1374px;
  height: 1675px;
  border-radius: 50%;
  /* background: radial-gradient(circle, #0681bf, transparent); */
  background: radial-gradient(closest-side, #0681bf, transparent);
  opacity: 0.6;
  /* filter: blur(200px); */
  /* will-change: filter; */
  transform: translateZ(0);
  z-index: -2;
}

.course-video-and-information-wrapper {
  grid-column: 1/2;
}

.course-actions-block-wrapper {
  grid-column-start: 2;
  grid-row: 1/4;
}

.gradient-gray-border {
  position: relative;
}
.gradient-gray-border::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.8;
  background: linear-gradient(
      -82deg,
      var(--bg-tertiary-color-50),
      var(--bg-tertiary-color-20)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.sponsored-company {
  min-width: 299px;
  height: 55px;
  position: relative;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 11px;
  background-color: var(--bg-black-840-50);
}
.sponsored-company img {
  width: 35px;
  height: 35px;
  object-fit: cover;
}
.sponsored-company h4 {
  font-size: 20px;
  font-weight: 500;
}
.course-actions-block-sticky {
  position: sticky;
  top: 84px;
  right: 0;
}
.course-actions-block {
  width: 100%;
  padding: 20px;
  position: relative;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
}
.course-actions-block::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    -89deg,
    var(--bg-red-650),
    var(--bg-pink-550) 50%,
    var(--bg-blue-350)
  );
  border-radius: 12px;
  z-index: -1;
}
.course-actions-block::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  background: linear-gradient(
      -89deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
.course-actions-title {
  text-align: center;
  font-size: 24px;
  font-weight: 900;
}
.course-actions-description {
  max-width: 259px;
  margin-top: 54px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  color: var(--text-primary-color-80);
}
.course-actions-description span {
  font-weight: 500;
}
.course-actions-price-range-title {
  margin-top: 54px;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}
.course-price-range {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.course-price-range img {
  display: block;
  height: 15px;
  margin-right: 2px;
}
.course-price-range span {
  font-size: 20px;
  margin-top: 0;
  direction: ltr;
}
.course-price-range span:first-of-type {
  direction: ltr;
  margin-right: 5px;
}
.course-actions-wishlist-btn {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 54px;
  background-color: transparent;
  border-radius: 4px;
  border: none;
  font-size: 16px;
  font-weight: 900;
  font-family: "Montserrat";
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
  cursor: pointer;
}
.course-actions-wishlist-btn span {
  font-size: 16px;
  font-weight: 500;
}
.course-actions-wishlist-btn.active span {
  font-size: 20px;
  font-weight: 700;
}
.course-actions-cart-btn {
  margin-top: 20px;
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary-80);
  font-family: "Montserrat";
  font-size: 18px;
  letter-spacing: 3px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.course-video {
  position: relative;
  width: 100%;
  height: 482px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.course-video-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.play-icon {
  width: 76px;
  height: 73px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: var(--bg-black-900-53);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  pointer-events: none;
  z-index: 1;
}
.course-video:hover .play-icon {
  transform: scale(1.1);
}
.play-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 98%;
  height: 94%;
  border-radius: 50%;
  border: 2px solid var(--border-white);
}
.play-icon-img {
  transform: translateX(5px);
}

.course-video-link {
  width: 100%;
}
.course-video-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.course-information-list {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}
.course-information-list-item {
  width: 180px;
  height: 130px;
  background-color: var(--bg-black-830);
  box-shadow: 0 0 0 1px var(--border-primary-color-15);
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.course-information-list-item h4 {
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
}
.course-information-list-item p {
  font-size: 14px;
  line-height: 24px;
  color: var(--text-blue-550);
  white-space: nowrap;
}

.course-page-description {
  position: relative;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.course-page-description h2 {
  font-size: 32px;
  font-weight: 900;
}
.course-page-description-text {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary-color-70);
}
.description-marked-text {
  position: relative;
  background-color: var(--bg-tertiary-color-8);
  border-radius: 8px;
  padding: 24px;
}
.description-marked-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  background: linear-gradient(
    -15deg,
    var(--bg-red-650),
    var(--bg-pink-550),
    var(--bg-blue-350)
  );
  opacity: 0.5;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.accordion-block {
  margin-top: 93px;
}
.accordion-block h2 {
  font-size: 32px;
  font-weight: 900;
}
.accordion-block .accordion {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.accordion-block .accordion-item {
  background: linear-gradient(
    -85deg,
    var(--bg-tertiary-color-5),
    var(--bg-tertiary-color-10)
  );
  box-shadow: 0 0 0 1px var(--border-primary-color-20) inset;
  border-radius: 12px;
}
.accordion-block .accordion-button {
  padding: 20px;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  height: 84px;
  border-radius: 12px;
  overflow: hidden;
  transition: height 0.3s ease;
}
.accordion-button-text {
  display: flex;
  gap: 10px;
}
.accordion-button-text p,
.accordion-button-text span {
  font-size: 18px;
  font-weight: 500;
}

.accordion-button-right {
  display: flex;
  align-items: center;
  gap: 20px;
}
.view-syllabus-btn {
  padding: 12.5px 20px;
  background-color: var(--color-primary-80);
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}

.accordion-block .accordion-item .accordion-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    -67deg,
    var(--bg-tertiary-color-5),
    var(--bg-tertiary-color-10)
  );
  opacity: 0;
  z-index: 1;
  transition: opacity 0.2s;
}
.accordion-block .accordion-item.open .accordion-button::after {
  opacity: 0.3;
  /* backdrop-filter: blur(24px); */
  background: linear-gradient(
    to bottom,
    var(--bg-tertiary-color-60),
    var(--bg-tertiary-color-30)
  );
  z-index: -1;
  transition: opacity 0.2s;
}

.accordion-block .accordion-item .accordion-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    -67deg,
    var(--bg-tertiary-color-10),
    var(--bg-tertiary-color-20)
  );
  opacity: 0;
  z-index: 2;
  transition: opacity 0.2s;
}
.accordion-block .accordion-item .accordion-button:hover::before {
  opacity: 1;
}
.accordion-block .accordion-item.open .accordion-button:hover::before {
  opacity: 0.3;
}

.accordion-block.course-accordion
  .accordion-item.open
  .accordion-button::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 100%;
  height: 16px;
  background: linear-gradient(
    -15deg,
    var(--bg-red-650),
    var(--bg-pink-550),
    var(--bg-blue-350)
  );
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  opacity: 0.6;
  z-index: -1;
}

.accordion-block .accordion-chevron {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-primary-color-50);
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.accordion-chevron img {
  transition: transform 0.3s ease-in-out;
}
.accordion-block .accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}
.accordion-content-texts {
  padding: 24px;
}
.accordion-content ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.accordion-content ul li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 28px;
  color: var(--text-form-label-80);
}
.accordion-content ul li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 9px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: var(--text-form-label-80);
}

.course-page-instructors {
  margin-top: 182px;
}
.course-page-instructors h2 {
  font-size: 32px;
  font-weight: 900;
}
.course-page-instructors .top-instructors-list {
  margin-top: 40px;
  justify-content: start;
}

.course-page-collaboration {
  margin-top: 100px;
}

.course-page-partners {
  margin-top: 100px;
}
.course-page-partners h2 {
  font-size: 32px;
  font-weight: 900;
}

.partners-list {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 299px));
  gap: 38px;
}
.partners-list-item {
  position: relative;
  height: 162px;
}
.partners-list-item-content {
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
  transition: background-color 0.2s, transform 0.3s ease;
}
.partners-list-item-content::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  background: linear-gradient(
      -61deg,
      var(--border-primary-color-10),
      var(--border-primary-color-40)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.partners-list-item-content:hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  transform: translateY(-15%);
  background-color: var(--bg-tertiary-color-10);
  backdrop-filter: blur(10px);
  z-index: 1;
}

.partners-list-item-content .partner-company-logo {
  width: 80px;
  height: 80px;
  object-fit: cover;
}
.partners-list-item-content .top-right-arrow-icon {
  opacity: 0;
  position: absolute;
  top: 10px;
  right: 10px;
  transition: opacity 0.3s ease;
}
.partners-list-item-content .partner-company-name {
  margin-top: 20px;
  font-size: 18px;
  font-weight: 500;
}
.partners-item-additional-info {
  display: grid;
  justify-items: center;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.3s ease;

  & > div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
}
.partners-list-item-flag {
  margin-top: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.partners-list-item-flag p {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary-color-60);
}
.partners-list-item-flag img {
  width: 38px;
  height: 19px;
}
.partner-company-type {
  display: flex;
  margin-top: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-primary-color-80);
}

.partners-list-item-content:hover .top-right-arrow-icon {
  opacity: 1;
}
.partners-list-item-content:hover .partners-item-additional-info {
  grid-template-rows: 1fr;
}
.partners-list-item:hover .partners-list-item-flag {
  display: flex;
}
.partners-list-item:hover .partner-company-type {
  display: flex;
}
@media (max-width: 768px) {
  .partners-list {
    margin-top: 20px;
    gap: 20px;
    justify-content: center;
  }
  .partners-list-item {
    height: fit-content;
  }
  .partners-list-item-content {
    padding: 10px;
    border-radius: 4px;
  }
  .partners-list-item-content::after {
    border-radius: 4px;
  }
  .partners-list-item-content:hover {
    position: relative;
    transform: translateY(0);
    backdrop-filter: blur(0);
  }
  .partners-list-item-content .partner-company-name {
    margin-top: 11px;
  }
  .partners-list-item-content:hover .partners-item-additional-info {
    grid-template-rows: 0fr;
  }
  .partners-list-item-content:hover .top-right-arrow-icon {
    opacity: 0;
  }
}

.course-plans-section {
  padding: 100px 24px;
}

.course-plan-form {
  display: flex;
  gap: 40px;
}

.course-plan-details {
  max-width: 411px;
  padding: 50px 40px 40px;
  position: relative;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
}
.course-plan-details::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    -89deg,
    var(--bg-red-650),
    var(--bg-pink-550) 50%,
    var(--bg-blue-350)
  );
  border-radius: 12px;
  z-index: -1;
}
.course-plan-details::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  background: linear-gradient(
      -89deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.most-popular-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 16px;
  font-family: "Raleway";
  font-size: 14px;
  color: var(--color-gold2);
  background-color: var(--bg-black-840-50);
  backdrop-filter: blur(4px);
  border-radius: 6px;
}
.most-popular-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  border: 1px solid transparent;
  opacity: 0.8;
  background: linear-gradient(
      -28deg,
      var(--color-gold-50),
      var(--color-gold-20)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
.most-popular-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px;
  opacity: 0.6;
  border: 1px solid transparent;
  background: linear-gradient(
      -28deg,
      var(--border-primary-color-60),
      var(--border-primary-color-30)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: 0;
}

.course-plan-details h4 {
  font-size: 24px;
  font-weight: 900;
}
.course-plan-details h4 span {
  color: var(--color-gold-80);
}

.course-plan-details-text {
  margin-top: 46px;
  font-size: 14px;
  line-height: 24px;
  text-align: justify;
  color: var(--text-primary-color-80);
}
.course-plan-details-list {
  margin-top: 46px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.course-plan-details-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.course-plan-details-list li p {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
}
.course-plan-details-list li img {
  width: 24px;
  height: 24px;
}

.course-plan-btn {
  position: relative;
  margin-top: 46px;
  width: 100%;
  height: 48px;
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.course-plan-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.35;
  background: linear-gradient(
    -89deg,
    var(--bg-red-650),
    var(--bg-pink-550) 50%,
    var(--bg-blue-350)
  );
  border-radius: 4px;
  z-index: -1;
}
.course-plan-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 2px solid transparent;
  opacity: 0.5;
  background: linear-gradient(
      -89deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.course-plan-list {
  padding: 40px 42px;
  width: 100%;
  position: relative;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.course-plan-list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    -90deg,
    var(--bg-blue-350),
    var(--bg-pink-550) 50%,
    var(--bg-red-650)
  );
  border-radius: 12px;
  z-index: -1;
}
.course-plan-list::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  background: linear-gradient(
      -89deg,
      var(--bg-blue-350),
      var(--bg-pink-550),
      var(--bg-red-650)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.course-plan-list-item {
  position: relative;
  background: linear-gradient(
    -85deg,
    var(--bg-black-900-15),
    var(--bg-black-900-5)
  );
  border-radius: 12px;
}
.course-plan-list-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 2px solid transparent;
  background: linear-gradient(
      -82deg,
      var(--border-primary-color-5),
      var(--border-primary-color-10)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.course-plan-list-item > input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 20px;
  width: 20px;
  z-index: 10;
  /* height: 0;
  width: 0; */
}

.course-plan-list-item label {
  height: 110px;
  padding: 22px 40px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  border-radius: 12px;
  transition: box-shadow 0.2s;
}
.course-plan-list-item label:hover {
  box-shadow: 0 0 50px -5px var(--color-gold-30);
}

.course-plan-title {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 20px;
}

.course-plan-list-item > input:checked ~ label .custom-radio::after {
  transform: translate(-50%, -50%) scale(1);
}

.course-plan-list-item > input:checked ~ label .course-plan-total p {
  color: var(--color-lightblue);
}

.course-plan-list-item > input:checked ~ label {
  box-shadow: 0 0 50px -5px var(--color-gold-30), 0 0 0 1px var(--color-gold-40);
}
.course-plan-list-item > input:checked ~ label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--color-gold-40) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.course-plan-title p {
  font-size: 24px;
  font-weight: 900;
  line-height: 24px;
  color: var(--text-primary-color-80);
}

.golden-plan-label .course-plan-title p {
  color: var(--color-gold-80);
}
.silver-plan-label .course-plan-title p {
  color: var(--color-gray-600);
}
.bronze-plan-label .course-plan-title p {
  color: var(--color-dark-gold-80);
}
.course-plan-title-text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.course-plan-discount {
  width: fit-content;
  padding: 5px;

  background-color: var(--color-red-600);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.course-plan-prices {
  display: flex;
  gap: 40px;
}

.course-plan-prices h5 {
  font-size: 16px;
  font-weight: 700;
}

.course-plan-vat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 23px;
}

.course-plan-vat p {
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary-color-90);
}

.course-plan-original {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.course-plan-original p {
  font-size: 20px;
  color: var(--text-primary-color-60);
  text-decoration: line-through;
}

.course-plan-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
}
.course-plan-total h5 {
  font-size: 15px;
}
.course-plan-total-price {
  display: flex;
  align-items: center;
  gap: 10px;
}
.course-plan-total p {
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  transition: color 0.2s;
}

.may-also-like-section {
  padding: 0 24px 100px;
}
.may-also-like-section h2 {
  margin-bottom: 40px;
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}

/* You May Also Like Swiper */
#mayLikeSwiper,
#mayLikeSwiper2 {
  /* overflow: visible; */
  padding: 1px;
}
/* #mayLikeSwiper .swiper-slide,
#mayLikeSwiper2 .swiper-slide {
  width: 410px;
} */
#mayLikeSwiper .swiper-slide,
#mayLikeSwiper2 .swiper-slide {
  position: relative;
  width: 410px;
  border-radius: 8px;
  background: linear-gradient(
    -37deg,
    var(--bg-tertiary-color-5),
    var(--bg-tertiary-color-15)
  );
  /* box-shadow: 0 0 0 1px var(--bg-tertiary-color-30); */
  transition: box-shadow 0.4s;
}
#mayLikeSwiper2 .swiper-slide {
  width: 409px;
}
#mayLikeSwiper .swiper-slide::before,
#mayLikeSwiper2 .swiper-slide::before {
  content: "";
  position: absolute;
  /* inset: 0; */
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: linear-gradient(
      -48deg,
      var(--border-primary-color-50),
      var(--border-primary-color-20)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

/* #mayLikeSwiper .swiper-slide.swiper-slide-active {
  box-shadow: 0 0 40px 5px var(--bg-tertiary-color-20);
  z-index: 1;
} */
.may-like-slide-img {
  position: relative;
}
.may-like-slide-img > img {
  display: block;
  width: 100%;
  height: 231px;
  object-fit: cover;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.may-like-course-logos {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.may-like-course-logo-img {
  width: 55px;
  height: 55px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
}

.may-like-course-logo-img::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: linear-gradient(
      -54deg,
      var(--bg-tertiary-color-60),
      var(--bg-tertiary-color-30)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.may-like-course-logo-img > img {
  width: 35px;
  height: 35px;
}

.may-like-slide-img .may-like-course-info {
  background-color: var(--bg-quaternary-color-50);
  backdrop-filter: blur(4px);
  border-radius: 8px;
  width: 203px;
  height: 36px;
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.may-like-course-info-lessons {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.may-like-course-info-lessons::after {
  content: "";
  margin-left: 7px;
  width: 1px;
  height: 16px;
  background-color: var(--color-primary-40-2);
}
.may-like-course-info-lessons img {
  width: 20px;
  height: 16px;
}
.may-like-course-info-lessons span {
  font-size: 10px;
}

.may-like-course-info-hours {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
}
.may-like-course-info-hours img {
  width: 16px;
  height: 16px;
}
.may-like-course-info-hours span {
  font-size: 10px;
}
.may-like-slide-details {
  padding: 16px 16px 0;
}
.may-like-slide-details h3 {
  text-align: center;
  font-size: 18px;
  font-weight: 700;
}
.may-like-slide-details p {
  margin-top: 20px;
  font-size: 18px;
  line-height: 24px;

  line-clamp: 3;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}

.may-like-actions-wrapper {
  margin-top: 25px;
  padding: 0 16px 16px;
}
.may-like-price-and-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.may-like-dates {
  order: 1;
  display: flex;
  flex-direction: column;
}
.may-like-dates span:first-child {
  font-size: 12px;
  color: var(--text-primary-color-60);
}
.may-like-dates span:last-child {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary-color-90);
}

.may-like-course-price {
  display: flex;
  align-items: center;
  gap: 9px;
}
.may-like-course-price .current-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary-color-90);
}
.may-like-course-price .old-price {
  font-size: 16px;
  color: var(--text-primary-color-60);
  text-decoration: line-through;
}
.may-like-course-price .sale {
  width: 77px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary-color-90);
  background-color: var(--color-red-600);
  border-radius: 5px;
}
.may-like-course-actions {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 44px;
  gap: 16px;
}
.may-like-course-actions .add-to-cart {
  border-radius: 10px;
}

.may-like-swiper-scrollbar,
.may-like-swiper-scrollbar2 {
  position: static !important;
  height: 17px !important;
  border-radius: 12px;
  background-color: var(--bg-tertiary-color-10);
  box-shadow: 0 0 0 1px var(--bg-tertiary-color-10) inset;
}
.may-like-swiper-scrollbar .swiper-scrollbar-drag,
.may-like-swiper-scrollbar2 .swiper-scrollbar-drag {
  background-color: var(--bg-tertiary-color-60);
  box-shadow: 0 0 0 1px var(--bg-tertiary-color) inset;
}
.may-like-swiper-btns {
  display: flex;
  gap: 16px;
}

@media (max-width: 1024px) {
  .course-details-container {
    margin-top: 45px;
    grid-template-columns: 1fr;
    column-gap: 40px;
  }
  .course-video-and-information-wrapper {
    grid-column: 1/2;
  }
  .course-actions-block-wrapper {
    margin-top: 54px;
    grid-column-start: 1;
    grid-row: 3;
  }
  .course-page-instructors .top-instructors-list {
    justify-content: start;
    /* grid-template-columns: 1fr; */
  }

  .course-plan-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .course-plan-details {
    order: 1;
  }
}

@media (max-width: 768px) {
  .back-btn {
    width: 107px;
    height: 40px;
  }
  .course-inner-sponsored-by-section h1 {
    margin-top: 40px;
    text-align: center;
    font-size: 24px;
    line-height: 32px;
    order: 1;
  }
  .course-inner-title-container {
    display: flex;
    flex-direction: column;
  }
  .sponsored-companies-list {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .sponsored-by-wrapper {
    margin-top: 40px;
  }
  .sponsored-by-text {
    text-align: start;
    font-size: 12px;
  }
  .sponsored-company {
    min-width: 299px;
    width: 100%;
    padding: 10px 20px 10px 40px;
    gap: 10px;
  }
  .sponsored-company h4 {
    font-size: 18px;
  }
  .course-details-container {
    margin-top: 40px;
  }
  .course-video {
    height: 200px;
  }
  .course-video-link img {
    border-radius: 8px;
  }
  .course-information-list {
    gap: 10px;
  }
  .course-information-list-item {
    width: 100%;
    box-shadow: none;
    border-radius: 4px;
    align-items: center;
  }
  .course-actions-title {
    font-size: 20px;
    font-weight: 900;
  }
  .course-actions-description {
    margin-top: 20px;
  }
  .course-actions-price-range-title {
    margin-top: 20px;
  }
  .course-actions-wishlist-btn {
    height: 40px;
    margin-top: 20px;
  }
  .course-actions-cart-btn {
    margin-top: 20px;
    height: 40px;
    font-size: 16px;
    letter-spacing: 2px;
  }
  .course-page-description h2 {
    text-align: center;
    font-size: 20px;
  }
  .course-page-description-text {
    font-size: 16px;
    line-height: 26px;
    text-align: justify;
    color: var(--text-primary-color-70);
  }

  .accordion-block {
    margin-top: 60px;
  }
  .accordion-block h2 {
    text-align: center;
    font-size: 20px;
  }
  .accordion-block .accordion-button {
    padding: 24px 18px 24px 24px;
    grid-template-columns: 1fr 40px;
    height: fit-content;
  }
  .accordion-block .accordion-chevron {
    width: 40px;
    height: 40px;
  }

  .course-page-instructors {
    margin-top: 60px;
  }
  .course-page-instructors h2 {
    text-align: center;
    font-size: 20px;
    line-height: 32px;
  }
  .course-page-instructors .top-instructors-list {
    max-width: none;
    margin-top: 20px;
    justify-content: center;
  }

  .course-page-collaboration {
    margin-top: 60px;
  }
  .course-page-collaboration h2 {
    text-align: center;
    font-size: 20px;
    font-weight: 900;
  }
  .collaboration-list {
    margin-top: 40px;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 20px;
  }
  .collaboration-list-item {
    border-radius: 4px;
  }
  .collaboration-list-item::after {
    border-radius: 4px;
  }
  .collaboration-list-item img {
    width: 50px;
    height: 50px;
  }

  .course-plans-section {
    padding: 60px 24px;
  }
  .course-plan-list {
    padding: 10px;
    width: 100%;
    position: relative;
    background-color: var(--bg-tertiary-color-5);
    border-radius: 12px;
  }
  .course-plan-list::before {
    background: linear-gradient(
      -90deg,
      var(--bg-red-650),
      var(--bg-pink-550) 50%,
      var(--bg-blue-350)
    );
  }
  .course-plan-list::after {
    background: linear-gradient(
        -89deg,
        var(--bg-red-650),
        var(--bg-pink-550),
        var(--bg-blue-350)
      )
      border-box;
  }
  .course-plan-list-item label {
    height: fit-content;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;
    cursor: pointer;
    border-radius: 12px;
    transition: box-shadow 0.2s;
  }
  .course-plan-title-text {
    flex-direction: row;
    gap: 10px;
  }
  .course-plan-discount {
    width: fit-content;
    height: fit-content;
    white-space: nowrap;
    padding: 5px;
    background-color: var(--color-red-600);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
  }
  .course-plan-title p {
    font-size: 20px;
  }
  .course-plan-prices {
    display: flex;
    justify-content: space-between;
    gap: 24px;
  }
  .course-plan-vat {
    gap: 12px;
  }
  .course-plan-original {
    gap: 13px;
  }
  .course-plan-total {
    gap: 11px;
  }
  .course-plan-vat h5,
  .course-plan-original h5,
  .course-plan-total h5 {
    font-size: 14px;
    font-weight: 500;
  }
  .course-plan-vat p {
    font-size: 16px;
  }
  .course-plan-original p {
    font-size: 16px;
    font-weight: 400;
  }
  .course-plan-total p {
    font-size: 24px;
    line-height: 24px;
  }
  .course-plan-total-price img {
    width: 22px;
  }

  .course-plan-details {
    max-width: none;
    padding: 40px 20px 20px;
  }
  .course-plan-details h4 {
    font-size: 20px;
  }
  .most-popular-badge {
    top: 5px;
    right: 5px;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 20px;
  }
  .most-popular-badge::before {
    border-radius: 20px;
  }
  .most-popular-badge::after {
    border-radius: 20px;
  }
  .course-plan-details-text {
    margin-top: 20px;
  }
  .course-plan-details-list {
    margin-top: 20px;
    gap: 10px;
  }
  .course-plan-details-list li p {
    font-size: 14px;
  }
  .course-plan-btn {
    margin-top: 20px;
    height: 40px;
    letter-spacing: 2px;
    font-size: 16px;
  }

  .may-also-like-section {
    padding: 0 24px 60px;
  }
  .may-also-like-section h2 {
    margin-bottom: 20px;
    font-size: 24px;
  }
  #mayLikeSwiper .swiper-slide {
    width: 272px;
    background: linear-gradient(
      -28deg,
      var(--bg-tertiary-color-5),
      var(--bg-tertiary-color-15)
    );
  }

  .may-like-slide-img > img {
    height: 169px;
  }
  .may-like-course-logo-img {
    width: 35px;
    height: 35px;
  }
  .may-like-course-logo-img > img {
    width: 20px;
    height: 20px;
  }
  .may-like-slide-img .may-like-course-info {
    width: 252px;
    height: 36px;
    bottom: 10px;
    gap: 10px;
  }
  .may-like-slide-details {
    padding: 20px 10px 0;
  }
  .may-like-slide-details h3 {
    font-size: 16px;
  }
  .may-like-slide-details p {
    text-align: justify;
    margin-top: 10px;
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .may-like-actions-wrapper {
    margin-top: 20px;
    padding: 0 10px 10px;
  }
  .may-like-price-and-date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .may-like-course-price {
    order: 1;
    display: flex;
    align-items: center;
    gap: 9px;
  }
  .may-like-dates {
    flex-direction: row;
    align-items: center;
    gap: 17px;
  }
  .may-like-course-actions {
    margin-top: 10px;
    grid-template-columns: 1fr 40px;
    gap: 10px;
  }
  .may-like-course-actions .add-to-cart {
    border-radius: 4px;
  }

  .may-also-like-swiper-wrapper .courses-swiper-navigation {
    margin-top: 20px;
  }

  .gradient-bg-cyan {
    top: 100px;
    width: 1400px;
    height: 733px;
    opacity: 0.4;
    /* filter: blur(100px); */
  }

  .gradient-bg-red {
    top: 150px;
    left: -100%;
    width: 1300px;
    height: 1050px;
    /* filter: blur(100px); */
    z-index: -1;
  }
  .gradient-bg-cyan-2 {
    top: 120px;
    left: -70%;
    width: 1300px;
    height: 1150px;
    /* filter: blur(100px); */
    z-index: -1;
  }
  .gradient-bg-pink {
    top: 700px;
    right: -100%;
    width: 600px;
    height: 1000px;
    opacity: 0.7;
    /* filter: blur(100px); */
    z-index: -2;
  }
  .gradient-bg-red-2 {
    top: 1600px;
    left: 20%;
    height: 650px;
  }
  .gradient-bg-pink-2 {
    left: -150%;
  }
  .gradient-bg-cyan-3 {
    top: 1220px;
    left: 0;
    width: 1374px;
    height: 1675px;
    border-radius: 50%;
    background: radial-gradient(closes-side, #0681bf, transparent);
    opacity: 0.6;
    /* filter: blur(100px); */
    z-index: -2;
  }
}

/* !Bought Course */

.course-actions-bought-btn {
  margin-top: 55px;
  width: 100%;
  height: 48px;
  letter-spacing: 2px;
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  background-color: var(--color-green);
  color: var(--color-white);
  cursor: pointer;
}

.bought-course-swiper-section {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .bought-course-swiper-section {
    margin-top: 60px;
  }
}

/* !Syllabus Inner Page */
.syllabus-page-section {
  padding-inline: 24px;
}
.syllabus-page-gradient-bg {
  position: absolute;
  top: -50%;
  left: 0;
  transform: translateY(-10%) translateZ(0);
  width: 100%;
  height: 1200px;
  background: radial-gradient(circle, var(--color-primary), transparent);
  opacity: 0.2;
  filter: blur(60px);
  z-index: -1;
}
.back-btn-container {
  max-width: 1350px;
  padding-inline: 24px;
  margin-inline: auto;
  margin-block: 40px;
}

.back-btn-container .back-btn {
  width: 201px;
}

.syllabus-page-content-wrapper {
  margin-bottom: 88px;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) 411px;
  gap: 40px;
}
.syllabus-page-content h1 {
  font-size: 24px;
  font-weight: 700;
}
.syllabus-page-text-content-wrapper {
  margin-top: 40px;
}
.syllabus-page-text-content-wrapper h2 {
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 700;
}
.syllabus-page-text-content-wrapper p {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary-color-70);
}
.syllabus-page-text-content-wrapper ul {
  position: relative;
  font-size: 16px;
  line-height: 28px;
  color: var(--text-primary-color-70);
}
.syllabus-page-text-content-wrapper ul li {
  position: relative;
  padding-left: 20px;
}
.syllabus-page-text-content-wrapper ul li::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 9px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: var(--text-form-label-80);
}

.syllabus-video {
  margin-block: 40px;
  position: relative;
  width: 100%;
  height: 482px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.syllabus-video-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.syllabus-video-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.syllabus-imgs {
  margin-block: 20px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 40px;
}
.syllabus-imgs img {
  max-width: 410px;
  width: 100%;
  max-height: 230px;
  height: 100%;
  display: block;
  border-radius: 4px;
  object-fit: cover;
}

.syllabus-page-side-content-wrapper {
  position: relative;
}
.syllabus-page-side-content {
  margin-top: 70px;
  position: sticky;
  top: 61px;
  left: 0;
  /* margin-top: 40px; */
}

.classroom-card {
  width: 100%;
  padding: 20px;
  position: relative;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
}
.classroom-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    -81deg,
    var(--bg-red-650),
    var(--bg-pink-550) 50%,
    var(--bg-blue-350)
  );
  border-radius: 12px;
  z-index: -1;
}
.classroom-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  background: linear-gradient(
      -81deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
.classroom-card h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 24px;
}
.classroom-card-content {
  margin-top: 20px;
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
}

.classroom-card-img {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.classroom-card-img h4 {
  font-size: 16px;
  font-weight: 500;
}

.classroom-card-content p {
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  line-height: 26px;
  color: var(--text-primary-color-60);
}

.see-classroom-btn {
  margin-top: 20px;
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background-color: var(--color-primary-80);
  border-radius: 8px;
}
.see-classroom-btn span {
  color: var(--text-primary-color-80);
  font-size: 16px;
  font-weight: 600;
}

.additional-links-card {
  margin-top: 40px;
  width: 100%;
  padding: 20px;
  position: relative;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
}
.additional-links-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.05;
  background: linear-gradient(
    -81deg,
    var(--bg-red-650),
    var(--bg-pink-550) 50%,
    var(--bg-blue-350)
  );
  border-radius: 12px;
  z-index: -1;
}
.additional-links-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  background: linear-gradient(
      -81deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}
.additional-links-card h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}

.additional-links-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.additional-link-item {
  padding: 10px 10px 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-radius: 8px;
  box-shadow: 0 0 0 1px var(--border-primary-color-50) inset;
}
.additional-link-item-icon {
  margin-right: 13px;
  align-self: center;
}

.additional-link-item-texts h3 {
  font-size: 16px;
  font-weight: 500;
}
.additional-link-item-texts p {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-primary-color-70);
}

@media (max-width: 768px) {
  .syllabus-page-gradient-bg {
    top: -30%;
    opacity: 0.25;
  }
  .back-btn-container .back-btn {
    height: 44px;
  }
  .back-btn-container {
    position: relative;
    max-width: 1350px;
    padding-inline: 24px;
    margin-inline: auto;
    margin-block: 40px 0;
  }
  .back-btn-container::after {
    content: "";
    margin-top: 16px;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      var(--border-primary-color-30),
      var(--border-primary-color-50)
    );
    z-index: -1;
  }
  .syllabus-page-content-wrapper {
    margin-bottom: 88px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .syllabus-page-side-content-wrapper {
    grid-row-start: 1;
  }
  .syllabus-page-side-content {
    position: static;
    margin-top: 40px;
  }
  .classroom-card {
    margin-top: 0;
  }
  .classroom-card-content {
    padding: 20px;
  }
  .see-classroom-btn {
    height: 40px;
    gap: 10px;
  }
  .additional-links-card {
    margin-top: 20px;
  }
  .additional-link-item-arrow {
    display: none;
  }
  .syllabus-page-content h1 {
    text-align: center;
    line-height: 32px;
    font-weight: 900;
  }
  .syllabus-page-content-wrapper {
    margin-bottom: 60px;
  }
  .syllabus-page-text-content-wrapper {
    margin-top: 20px;
  }
  .syllabus-page-text-content-wrapper h2 {
    text-align: center;
    font-size: 16px;
    line-height: 24px;
    font-weight: 900;
  }
  .syllabus-page-text-content-wrapper p {
    text-align: justify;
    color: var(--text-primary-color-70);
  }
  .syllabus-video {
    margin-block: 20px;
    height: 200px;
  }
  .play-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
  }
  .play-icon img {
    width: 12px;
    height: 15px;
    transform: translateX(3px);
  }
  .syllabus-imgs {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* !Affiliate Landing */
.affiliate-page-section {
  padding: 0 24px 100px;
}

.affiliate-page-content-wrapper {
  margin-top: 100px;
  display: grid;
  grid-template-columns: minmax(271px, 1fr) 411px;
  gap: 40px;
}
.affiliate-page-content-wrapper h1 {
  grid-column: span 2;
  font-size: 24px;
  font-weight: 900;
  line-height: 36px;
}
.affiliate-page-content {
}
.affiliate-page-img {
  width: 100%;
  height: 450px;
  margin-bottom: 40px;
  box-shadow: 0 0 30px 0 var(--color-primary-10);
}
.affiliate-page-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}
.affiliate-page-text-content-wrapper p {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary-color-80);
}

.affiliate-page-side-content {
  width: 100%;
  /* height: fit-content; */
  /* padding: 20px; */
  position: relative;

  border-radius: 12px;
  grid-column-start: 2;
  grid-row: span 2;
}

.affiliate-sign-up-card {
  position: sticky;
  top: 81px;
  left: 0;
  background-color: var(--bg-tertiary-color-5);
}
.affiliate-sign-up-card h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
.affiliate-sign-up-form {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.affiliate-sign-up-form .terms-checkbox-wrapper p {
  margin-left: 20px;
}
.affiliate-sign-up-form .terms-label {
  margin: 0;
}
.affiliate-sign-up-form .form-btn {
  height: 44px;
}
.affiliate-sign-up-form .form-btn p span {
  font-size: 16px;
  font-variation-settings: "wght" 500;
  color: var(--text-primary-color-90);
  transition: font-variation-settings 0.2s ease;
}

.faq-accordion-block {
  margin-top: 100px;
}
.faq-accordion-block .accordion-button {
  height: auto;
  padding: 24px;
  background: linear-gradient(
    -67deg,
    var(--bg-tertiary-color-5),
    var(--bg-tertiary-color-10)
  );
  transform: translateZ(0);
  transition: background-image 0.2s ease;
}
.faq-accordion-block .accordion-button::before {
  /* display: none; */
}

.faq-accordion-block .accordion-content-texts {
  padding: 20px;
}

.affiliate-page.may-also-like-section {
  padding-bottom: 120px;
}

@media (max-width: 768px) {
  .affiliate-page-content-wrapper {
    margin-top: 60px;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .affiliate-page-content-wrapper h1 {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    grid-column: span 1;
  }
  .affiliate-page-content-wrapper h1:after {
    content: "";
    margin-top: 16px;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      var(--border-primary-color-30),
      var(--border-primary-color-50)
    );
  }
  .affiliate-page-img {
    height: 200px;
    margin-bottom: 20px;
  }
  .affiliate-page-img img {
    border-radius: 4px;
  }
  .affiliate-page-text-content-wrapper p {
    text-align: justify;
  }

  .affiliate-page-side-content {
    margin-top: 40px;
    padding: 10px;
    grid-column-start: 1;
    grid-row: span 1;
  }
  .affiliate-sign-up-card h2 {
    font-size: 24px;
  }
  .affiliate-sign-up-form {
    margin-top: 20px;
  }
  .affiliate-sign-up-form .form-btn {
    border-radius: 8px;
  }
  .faq-accordion-block {
    margin-top: 40px;
  }
  .faq-accordion-block .accordion-button .accordion-chevron {
    border: none;
  }
  .affiliate-page-section {
    padding: 0 24px 60px;
  }
  .affiliate-page.may-also-like-section {
    padding-bottom: 60px;
  }
}

/* !Study Abroad */
.study-abroad-page-section {
  padding-top: 66px;
  padding-inline: 24px;
  position: relative;
  overflow-x: clip;
}
.study-abroad-page-hero {
  display: grid;
  grid-template-columns: 1fr;
}
.study-abroad-page-section .gradient-bg-cyan,
.study-abroad-page-section .gradient-bg-red-2,
.study-abroad-page-section .gradient-bg-pink-2,
.study-abroad-page-section .gradient-bg-cyan-3 {
  display: none;
}
.study-abroad-page-section .gradient-bg-red {
  display: none;
  top: -150px;
  left: -40%;
  background: radial-gradient(
    closest-side,
    hsla(0, 85%, 42%, 0.7),
    transparent
  );
}
.study-abroad-page-section .gradient-bg-cyan-2 {
  top: -300px;
  left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(
    closest-side,
    hsla(200, 94%, 39%, 0.5),
    transparent
  );
}
.study-abroad-page-section .gradient-bg-pink {
  top: 251px;
  right: -600px;
  width: 1000px;
  height: 1000px;
  background: radial-gradient(
    closest-side,
    hsla(278, 83%, 47%, 0.5),
    transparent
  );
}

.study-abroad-hero-decorations-wrapper {
  max-width: 879px;
  margin-inline: auto;
}

.study-abroad-hero-title-wrapper {
  position: relative;
  margin-inline: 10px;
  width: fit-content;
  max-width: 861px;
  padding: 30px;
  border: 1px solid var(--border-primary-color-15);
}
.outline-icon {
  width: 179px;
  height: 71px;
  position: absolute;
  top: -12px;
  left: -5px;
}
.study-abroad-hero-title-wrapper h1 {
  width: fit-content;
  max-width: 795px;
  font-size: 48px;
  font-weight: 900;
  line-height: 64px;
  text-align: center;
  text-transform: uppercase;
}
.study-abroad-hero-title-wrapper h1 span {
  position: relative;
}
.study-abroad-hero-decorations {
  display: flex;
  justify-content: space-between;
}
.study-abroad-hero-decorations div {
  width: 11px;
  height: 8px;
  border: 1px solid var(--border-primary-color-15);
}

.study-abroad-hero-description {
  margin: 20px auto 0;
  max-width: 710px;
  text-align: center;
  font-size: 18px;
  line-height: 32px;
  font-weight: 500;
  color: var(--text-primary-color-50);
}
.apply-now-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 331px;
  height: 48px;
  margin: 40px auto 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  box-shadow: 0 12px 24px 0 var(--shadow-black-25);
  backdrop-filter: blur(24px);
}
.study-abroad-hero-image {
  margin-top: 100px;
  width: 100%;
  height: 502px;
}
.study-abroad-hero-image img {
  border-radius: 18px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.gradient-yellow-bg {
  position: relative;
}
.gradient-yellow-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--color-yellow-20),
    var(--color-yellow-5)
  );
  opacity: 0.7;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.gradient-yellow-bg::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  border: 1px solid transparent;
  opacity: 0.7;
  background: linear-gradient(
      to bottom,
      var(--color-yellow2-30),
      var(--color-yellow2-50)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}

.study-abroad-hero-stats {
  padding-block: 18px;
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(auto-fit, 156px);
  gap: 20px;
  justify-content: center;
}

.study-abroad-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.stat-img-wrapper {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
}
.study-abroad-hero-stat::before,
.study-abroad-hero-stat::after {
  display: none;
}
.certificate-stat img {
  width: 36px;
}
.study-abroad-hero-stat h3 {
  margin-top: 20px;
  font-size: 16px;
  font-weight: 700;
  line-height: 26px;
}
.study-abroad-hero-stat p {
  margin-top: 4px;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary-color-70);
}

.agenda-section {
  margin-top: 50px;
  padding-inline: 24px;
}
.agenda-block {
  display: grid;
  grid-template-columns: 299px 1fr;
  gap: 38px;
  /* max-height: 795px; */
}
.agenda-swiper-navigation {
  display: none;
  margin-block: 0 20px;
}
.agenda-days-swiper {
  width: 100%;
  max-height: 795px;
}
.agenda-days-list {
  /* display: flex;
  flex-direction: column; */
  /* gap: 20px; */
}
.agenda-day {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 299px;
  height: fit-content;
  padding: 20px;
  background-color: var(--bg-tertiary-color-5);
  border-radius: 12px;
  transition: background-color 0.2s;
}
.agenda-day.gradient-bg::before {
  border-radius: 12px;
  opacity: 0.05;
}
.agenda-day.gradient-bg::after {
  border-radius: 12px;
  border: 1px solid transparent;
  opacity: 0.2;
  transition: border 0.1s;
}
.agenda-day.active {
  background-color: var(--bg-tertiary-color-10);
}
.agenda-day.active::before {
  opacity: 0.1;
  transition: background-color 0.2s;
}
.agenda-day.active::after {
  /* display: none; */
  border: none;
  opacity: 1;
  border-right: 3px solid transparent;
  background: linear-gradient(
      to bottom,
      var(--bg-blue-350),
      var(--bg-pink-550),
      var(--bg-red-650)
    )
    border-box;
}
.agenda-day:hover {
  background-color: var(--bg-tertiary-color-10);
}
.agenda-day:hover::before {
  opacity: 0.1;
}

.agenda-day p {
  font-size: 24px;
  font-weight: 500;
}
.agenda-details {
  position: relative;
  padding: 20px;
  background-color: var(--bg-tertiary-color-10);
  border-radius: 12px;
  cursor: default;
  overflow: hidden;
}
.agenda-details::before {
  opacity: 0.05;
  border-radius: 12px;
}
.agenda-details::after {
  opacity: 0.5;
  border-radius: 12px;
  background: linear-gradient(
      90deg,
      var(--bg-red-650),
      var(--bg-pink-550),
      var(--bg-blue-350)
    )
    border-box;
}
.agenda-details:hover::before {
  opacity: 0.05;
}
.agenda-details:hover::after {
  opacity: 0.5;
}
.agenda-details-content {
  position: absolute;
  bottom: -100%;
  left: 0;
  transform: translateY(30px);
  opacity: 0.2;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    opacity 0.5s ease-in-out 0.1s;
}
.agenda-details-content.active {
  position: static;
  transform: translateY(0);
  opacity: 1;
}
.agenda-details-content h2 {
  font-size: 24px;
  font-weight: 500;
}
.agenda-details-content h2 span {
  color: var(--color-primary);
}
.agenda-details-content h3 {
  margin-block: 20px;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
}
.agenda-text:first-of-type {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary-color-50);
}
.agenda-text:not(:first-of-type) {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-primary-color-80);
}
.agenda-image-wrapper {
  max-width: 617px;
  height: 267px;
  margin-block: 15px 20px;
}
.agenda-image-wrapper img {
  border-radius: 12px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.agenda-details-text-list {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.agenda-details-text-list li {
  position: relative;
  padding-left: 20px;
  font-size: 16px;
  line-height: 28px;
  color: var(--text-form-label-80);
}
.agenda-details-text-list li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 9px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background-color: var(--text-form-label-80);
}

.study-abroad-instructors-section {
  margin-top: 100px;
  padding-inline: 24px;
}
.study-abroad-instructors h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
.study-abroad-instructors .top-instructors-list::after {
  display: none;
}

.study-abroad-partners-section {
  margin-top: 100px;
  padding-inline: 24px;
}
.study-abroad-partners h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 1.2px;
}
.study-abroad-partners .collaboration-list {
  margin-top: 40px;
}
.study-abroad-partners .collaboration-list-item {
  padding-block: 20px;
}

.program-related-course-section {
  margin-top: 100px;
  padding-inline: 24px;
}
.program-related-course {
  max-width: 862px;
}
.program-related-course h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
.program-related-video {
  margin: 40px auto 0;
  width: 100%;
  height: 486px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 30px 0 var(--shadow-white-10);
  border-radius: 8px;
}
.program-related-video-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: 0 -20px 50px 0 var(--shadow-primary-50) inset;
  border-radius: 8px;
}
.program-related-video .play-icon {
  width: 82px;
  height: 82px;
  border-radius: 50%;
}
.program-related-video:hover .play-icon {
  transform: scale(1.1);
}
.program-related-video .video-thumbnail {
  position: relative;
  border-radius: 8px;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.program-related-course h3 {
  margin-top: 20px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  line-height: 32px;
}
.program-related-course p {
  margin-top: 20px;
  text-align: center;
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary-color-70);
}
.program-related-actions {
  margin-top: 59px;
  display: flex;
  justify-content: center;
  gap: 40px;
}
.program-related-actions a {
  width: 100%;
  height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-family: "Montserrat";
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .study-abroad-page-section {
    padding-top: 60px;
  }
  .study-abroad-page-section .gradient-bg-cyan {
    top: 693px;
    height: 533px;
    display: block;
    z-index: -3;
    opacity: 0.3;
  }
  .study-abroad-page-section .gradient-bg-red {
    display: block;
    top: 700px;
    left: -240%;
    background: radial-gradient(
      closest-side,
      hsla(0, 85%, 42%, 0.4),
      transparent
    );
    z-index: -2;
    opacity: 0.3;
  }
  .study-abroad-page-section .gradient-bg-cyan-2 {
    top: 600px;
    left: 180%;
    transform: translateX(-50%);
    background: radial-gradient(
      closest-side,
      hsla(200, 94%, 39%, 0.5),
      transparent
    );
    z-index: -1;
  }
  .study-abroad-page-section .gradient-bg-pink {
    top: 1200px;
    right: -800px;
    z-index: -1;
  }
  .study-abroad-page-section .gradient-bg-red-2 {
    display: block;
    height: 1150px;
    top: 2000px;
    left: 70%;
    opacity: 0.3;
  }
  .study-abroad-page-section .gradient-bg-pink-2 {
    display: block;
    height: 1100px;
    top: 2300px;
    opacity: 0.3;
    background: radial-gradient(
      closest-side,
      hsla(278, 83%, 47%, 0.7),
      transparent
    );
  }
  .study-abroad-page-section .gradient-bg-cyan-3 {
    display: block;
    top: 1600px;
    background: radial-gradient(
      closest-side,
      hsla(200, 94%, 39%, 0.7),
      transparent
    );
    opacity: 0.3;
  }

  .study-abroad-hero-title-wrapper {
    margin-inline: auto;
    padding: 0;
    border: none;
  }
  .study-abroad-hero-decorations {
    display: none;
  }
  .study-abroad-hero-title-wrapper h1 {
    font-size: 24px;
    line-height: 32px;
  }
  .outline-icon {
    width: 101px;
    height: 40px;
    top: -6px;
    left: -7px;
  }
  .study-abroad-hero-image {
    margin-top: 40px;
    height: 200px;
    grid-row-start: 2;
  }
  .study-abroad-hero-image img {
    border-radius: 4px;
  }
  .study-abroad-hero-description {
    text-align: justify;
    line-height: 24px;
  }
  .apply-now-btn {
    height: 40px;
    margin: 40px auto 0;
  }
  .study-abroad-hero-stats {
    padding-block: 0;
    margin-top: 60px;
    grid-template-columns: repeat(auto-fit, 271px);
    gap: 10px;
  }
  .study-abroad-hero-stats::before,
  .study-abroad-hero-stats::after {
    display: none;
  }
  .study-abroad-hero-stat {
    padding-block: 20px;
  }
  .study-abroad-hero-stat::before,
  .study-abroad-hero-stat::after {
    display: block;
    border-radius: 4px;
  }
  .certificate-stat img {
    width: 32px;
  }
  .study-abroad-hero-stat h3 {
    margin-top: 5px;
  }
  .study-abroad-hero-stat p {
    margin-top: 5px;
    font-size: 18px;
  }

  .agenda-section {
    margin-top: 60px;
  }
  .agenda-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  .agenda-swiper-navigation {
    display: flex;
  }
  .agenda-day {
    width: 113px;
    height: 54px;
    padding: 0 15px;
    border-radius: 4px;
  }
  .agenda-day.gradient-bg::before,
  .agenda-day.gradient-bg::after {
    border-radius: 4px;
  }
  .agenda-day.active::after {
    /* display: none; */
    border: none;
    opacity: 1;
    border-bottom: 3px solid transparent;
    background: linear-gradient(
        to right,
        var(--bg-blue-350),
        var(--bg-pink-550),
        var(--bg-red-650)
      )
      border-box;
  }
  .agenda-day p {
    font-size: 20px;
  }

  .agenda-details {
    padding: 20px 10px;
    background-color: var(--bg-tertiary-color-5);
  }
  .agenda-details-content h2 {
    text-align: center;
    line-height: 32px;
  }
  .agenda-details-content h3 {
    text-align: center;
    font-size: 18px;
  }
  .agenda-text {
    text-align: justify;
  }
  .agenda-image-wrapper {
    max-width: 617px;
    height: 180px;
    margin-block: 20px;
  }
  .agenda-details-text-list li {
    text-align: justify;
  }

  .study-abroad-instructors-section {
    margin-top: 60px;
  }
  .study-abroad-instructors h2 {
    font-size: 20px;
  }
  .study-abroad-partners-section {
    margin-top: 60px;
  }
  .study-abroad-partners h2 {
    font-size: 20px;
  }
  .study-abroad-partners .collaboration-list {
    margin-top: 20px;
  }

  .program-related-course-section {
    margin-top: 60px;
  }
  .program-related-course h2 {
    font-size: 20px;
  }
  .program-related-video {
    margin: 20px auto 0;
    height: 200px;
  }
  .program-related-video .play-icon {
    width: 40px;
    height: 40px;
  }
  .program-related-video .play-icon img {
    width: 15px;
    height: 19px;
  }
  .program-related-course p {
    text-align: justify;
    line-height: 24px;
  }
  .program-related-actions {
    margin-top: 20px;
    flex-direction: column;
    gap: 20px;
  }
  .program-related-actions a {
    height: 40px;
    font-size: 16px;
  }
}

/* !CART PAGE */
.cart-background {
  display: none;
}
.cart-page-section {
  position: relative;
  padding: 40px 20px 80px;
  overflow: clip;
}
.cart-page-section .gradient-bg-cyan {
  top: 500px;
  opacity: 0.25;
}
.cart-page-section .gradient-bg-red {
  top: auto;
  bottom: -500px;
  opacity: 0.5;
}
.cart-page-section .gradient-bg-cyan-2 {
  top: auto;
  bottom: -900px;
  opacity: 0.3;
}
.cart-page-section .gradient-bg-pink {
  top: auto;
  bottom: -900px;
  opacity: 0.3;
}

.cart-page-content {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(280px, 751px) minmax(280px, auto);
  gap: 40px;
}
.cart-items-list h1 {
  font-size: 24px;
  font-weight: 500;
}

.cart-items-group h3 {
  margin-block: 40px 25px;
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

.cart-items-group-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cart-group-item {
  display: grid;
  grid-template-columns: 184px 1fr;
}
.cart-group-item.out-of-date {
  opacity: 0.5;
}
.cart-group-item-image {
  position: relative;
  width: 184px;
  height: 109px;
}
.cart-group-item-image img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  object-fit: cover;
}
/* .out-of-date .cart-group-item-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-bl);
  border-radius: 4px;
} */
.out-of-date-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  color: var(--color-red-600);
  font-size: 24px;
  font-weight: 700;
}

.cart-group-item-details {
  /* width: 100%; */
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: min-content auto;
  /* max-width: 307px; */
  margin-left: 13px;
}
.cart-group-item-title {
  max-width: 307px;
  font-size: 14px;
  font-weight: 700;
}
.cart-group-item-title .cart-item-gold {
  color: var(--color-gold);
}

.cart-group-item-description {
  margin-top: 13px;
  font-size: 14px;
  line-height: 24px;
  grid-row-start: 2;
  max-width: 307px;
}
.cart-group-item-price-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 23px;
  justify-self: end;
  grid-row: span 2;
}
.cart-item-prices {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
.cart-item-price {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary-color-90);
}
.cart-item-old-price {
  font-size: 16px;
  color: var(--text-primary-color-60);
  text-decoration: line-through;
}
.remove-cart-group-item-btn {
  display: grid;
  place-content: center;
  height: fit-content;
  background-color: transparent;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.cart-item-labels-wrapper {
  margin-top: 11px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.cart-item-label {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cart-item-label span {
  font-size: 14px;
  line-height: 16px;
  white-space: nowrap;
}

.cart-order-summary {
  height: fit-content;
}
.cart-order-summary h2 {
  font-size: 24px;
  font-weight: 500;
  color: var(--text-primary-color-90);
}
.cart-prices {
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.cart-price-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart-price-item h3 {
  font-size: 18px;
  font-weight: 500;
}
.cart-price-item p {
  font-size: 20px;
  font-weight: 500;
}

.cart-sale-details {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cart-sale-details .cart-sale-perc {
  width: 64px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-red-600);
  border-radius: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary-color-90);
}
.cart-sale-details .cart-sale-price {
  font-size: 14px;
  color: var(--text-primary-color-60);
  text-decoration: line-through;
}
.cart-total-price h3,
.cart-total-price p {
  font-weight: 700;
}
.cart-pay-btn {
  margin-top: 55px;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.cart-pay-btn span {
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 600;
}

.cart-actions {
  margin-top: 20px;
}

@media (max-width: 1024px) {
  .cart-page-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .cart-group-item {
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .cart-background {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
  .cart-page-section {
    padding-block: 20px 60px;
  }
  .cart-page-section .gradient-bg-cyan,
  .cart-page-section .gradient-bg-red,
  .cart-page-section .gradient-bg-cyan-2,
  .cart-page-section .gradient-bg-pink {
    display: none;
  }

  .cart-page-content {
    gap: 68px;
  }
  .cart-items-list {
    padding: 20px 10px;
  }
  .cart-items-list h1 {
    font-size: 24px;
    font-weight: 500;
  }
  .cart-items-group h3 {
    margin-block: 20px;
    font-size: 18px;
    line-height: 18px;
  }
  .cart-group-item {
    grid-template-columns: minmax(63px, 184px) 1fr;
    gap: 0;
  }

  .cart-group-item-details {
    grid-template-columns: 1fr auto;
    grid-template-rows: min-content auto;
    gap: 9px;
    margin-left: 5px;
  }
  .cart-group-item-image {
    position: relative;
    width: 100%;
    height: fit-content;
  }
  .cart-group-item-title {
    font-weight: 500;
  }
  .cart-group-item-description {
    margin-top: 0;
    font-size: 12px;
    line-height: 18px;
    grid-row-start: 2;
    grid-column: span 2;
    max-width: none;
  }
  .cart-group-item-price-wrapper {
    gap: 9px;
    grid-row: span 1;
  }
  .cart-item-price {
    font-size: 14px;
  }
  .cart-item-old-price {
    font-size: 14px;
  }
  .out-of-date-label {
    white-space: normal;
    font-size: 15px;
    font-weight: 700;
  }
  .cart-item-labels-wrapper {
    margin-top: 10px;
    justify-content: center;
    gap: 20px;
    grid-column: span 2;
  }

  .cart-order-summary {
    padding: 20px 10px;
  }
  .cart-order-summary h2 {
    font-size: 24px;
  }
  .cart-prices {
    margin-top: 60px;
  }
  .cart-sale-details {
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .cart-group-item {
    grid-template-columns: 63px 1fr;
    gap: 0;
  }
}

/* !Checkout */

.checkout-payment-content {
  display: flex;
  flex-direction: column;
  gap: 40px;
  min-height: 533px;
  height: fit-content;
}
.checkout-payment-content h1 {
  font-size: 24px;
  font-weight: 500;
}
.checkout-payment-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.checkout-payment-form .form-groups-wrapper {
  width: fit-content;
}
.checkout-payment-form .form-groups-wrapper label {
  cursor: pointer;
}
.payment-radio-input {
  position: absolute;
  top: -5px;
  left: 0;
  opacity: 0;
}
.payment-radio-input:checked + .form-radio-group .custom-radio::after {
  transform: translate(-50%, -50%) scale(1);
}
.payment-radio-input ~ .form-groups-flex {
  display: none;
}
.payment-radio-input ~ .additional-email-title {
  display: none;
}
.payment-radio-input:checked ~ .form-groups-flex {
  display: flex;
}
.payment-radio-input:checked ~ .additional-email-title {
  display: block;
}
.additional-email-title {
  position: relative;
  font-size: 16px;
  color: var(--color-primary-90);
}
.additional-email-title::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary-30);
}

.promo-code-form {
  margin-block: 40px 20px;
  padding-block: 20px;
  border-top: 1px solid var(--border-primary-color-20);
  border-bottom: 1px solid var(--border-primary-color-20);
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.promo-code-form button {
  width: 200px;
  height: 42px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 500;
  color: var(--text-primary-color-80);
}

.checkout-actions {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.download-invoice-btn {
  height: 48px;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-primary-color-50);
  border-radius: 8px;
  background-color: transparent;
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary-color-80);
  cursor: pointer;
}
.send-invoice-btn,
.pay-btn {
  height: 48px;
  display: none;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 8px;
  font-family: "Montserrat";
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary-color-80);
  cursor: pointer;
}
.download-invoice-btn.active,
.send-invoice-btn.active,
.pay-btn.active {
  display: flex;
}

@media (max-width: 768px) {
  .checkout-payment-content {
    gap: 40px;
    min-height: auto;
    height: fit-content;
  }
  .promo-code-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .promo-code-form button {
    width: 100%;
    height: 42px;
  }
}

/* !About Page */
.about-hero-section {
  position: relative;
  overflow-x: clip;
  padding: 100px 24px 0;
}

.about-hero-section .gradient-bg-cyan {
  top: 672px;
  left: 400px;
  width: 1531px;
  height: 1251px;
}

.about-hero-section .gradient-bg-red {
  width: 1518px;
  left: -722px;
  height: 1495px;
  top: -472px;
}
.about-hero-section .gradient-bg-cyan-2 {
  top: -422px;
  left: -148px;
  width: 1500px;
  height: 1500px;
  opacity: 0.5;
}
.about-hero-section .gradient-bg-pink {
  top: 0px;
  right: -400px;
  width: 1000px;
  height: 1300px;
}
.our-partners-section .gradient-bg-cyan-3 {
  top: -100px;
  height: 900px;
  background: radial-gradient(closest-side, var(--color-primary), transparent);
  opacity: 0.25;
}

.about-hero-section h1 {
  font-family: "PPMonument";
  font-size: 32px;
  max-width: 1100px;
  text-transform: uppercase;
}
.about-hero-images {
  margin-block: 123px 207px;
  display: flex;
  gap: 16px;
}
.about-hero-image {
  position: relative;
}
.about-hero-image::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: linear-gradient(
      -39deg,
      var(--bg-tertiary-color-10),
      var(--bg-tertiary-color-40)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
}
.about-hero-image img {
  max-width: 316px;
  width: 100%;
  max-height: 416px;
  height: 100%;
  display: block;
  border-radius: 7px;
}

.about-hero-image:nth-of-type(2) {
  transform: translateY(107px);
}
.about-hero-image:nth-of-type(3) {
  transform: translateY(-55px);
}
.about-hero-image:nth-of-type(4) {
  transform: translateY(40px);
}

.who-we-are-section {
  padding-inline: 24px;
}
.who-we-are-section h2 {
  text-transform: uppercase;
  font-size: 32px;
  line-height: 38px;
  font-weight: 900;
  text-align: center;
}
.who-we-are-section p {
  max-width: 864px;
  margin-top: 20px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 26px;
  text-align: justify;
  color: var(--text-primary-color-80);
}

.managing-instructors-section {
  position: relative;
  overflow-x: clip;
  margin-top: 100px;
  padding-inline: 24px;
}
.managing-instructors-content .cyan-ellipsis-bg2 {
  top: 50px;
}
.managing-instructors-content h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
  line-height: 38px;
}

.our-partners-section {
  position: relative;
  margin-block: 144px 100px;
  padding-inline: 24px;
  overflow-x: clip;
}
.our-partners-content h2 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}

@media (max-width: 768px) {
  .about-hero-section {
    padding: 60px 24px 0;
  }

  .about-hero-section .cyan-circle-bg {
    width: 780px;
    height: 804px;
    top: -340px;
    left: 50%;
    transform: translateX(-50%);
  }

  .about-hero-section .gradient-bg-cyan {
    top: -250px;
    left: 200px;
    width: 1000px;
    height: 800px;
  }

  .about-hero-section .gradient-bg-red {
    display: none;
  }
  .about-hero-section .gradient-bg-cyan-2 {
    display: none;
  }
  .about-hero-section .gradient-bg-pink {
    display: none;
  }
  .our-partners-section .gradient-bg-cyan-3 {
    display: none;
  }

  .about-hero-section h1 {
    position: relative;
    text-align: center;
    font-family: "Montserrat";
    font-size: 24px;
    text-transform: none;
    font-weight: 700;
  }
  .about-hero-section h1::after {
    content: "";
    margin-top: 16px;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to bottom,
      var(--bg-tertiary-color-30),
      var(--bg-tertiary-color-50)
    );
  }
  .about-hero-images {
    margin-block: 40px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .about-hero-image:nth-of-type(2) {
    transform: translateY(50%);
  }
  .about-hero-image:nth-of-type(3) {
    transform: translateY(0);
  }
  .about-hero-image:nth-of-type(4) {
    transform: translateY(50%);
  }

  .who-we-are-section {
    margin-top: 150px;
    padding-inline: 24px;
  }
  .who-we-are-section h2 {
    text-transform: uppercase;
    font-size: 24px;
    line-height: 32px;
    font-weight: 900;
  }
  .who-we-are-section p {
    line-height: 24px;
  }
  .managing-instructors-section {
    margin-top: 60px;
  }

  .managing-instructors-content h2 {
    font-size: 24px;
    line-height: none;
    /* white-space: nowrap; */
  }
  .managing-instructors-content .cyan-ellipsis-bg2 {
    display: none;
  }

  .our-partners-section {
    margin-block: 60px;
  }
  .our-partners-content h2 {
    font-size: 24px;
  }
}

/* !Contact Page */
.contact-page-faq-section {
  padding-inline: 24px;
}
.contact-faq {
  max-width: 870px;
}
.contact-faq h1 {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}

.contact-help-section {
  margin-block: 100px;
  padding-inline: 24px;
}

.help-center-form {
  max-width: 870px;
  padding: 40px;
}

.help-center-form .form-btn {
  margin-top: 20px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary-color-80);
}

@media (max-width: 768px) {
  .contact-faq h1 {
    font-size: 24px;
  }

  .contact-page-faq-section .faq-accordion-block {
    margin-top: 60px;
  }
  .contact-page-faq-section .accordion-block .accordion {
    margin-top: 20px;
  }
  .contact-page-faq-section .accordion-button-text p,
  .accordion-button-text span {
    font-size: 16px;
  }

  .contact-help-section {
    margin-block: 60px;
  }
  .contact-help-section .form-title {
    margin-bottom: 20px;
  }
  .help-center-form {
    padding: 20px 10px;
  }
  .contact-help-section .input-textarea {
    min-height: 141px;
  }
  .help-center-form .form-btn {
    font-size: 16px;
  }
}

/* !Privacy Policy Page */
.privacy-policy-section {
  position: relative;
  overflow-x: clip;
  padding: 100px 24px;
}
.privacy-policy-section .cyan-circle-bg {
  display: none;
  top: -50%;
  left: -200px;
  opacity: 0.7;
}

.privacy-policy-content h1 {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
}
.privacy-policy-content {
  max-width: 974px;
}

.privacy-policy-texts {
  margin-top: 40px;
}

.privacy-policy-texts p {
  line-height: 24px;
  color: var(--text-primary-color-80);
}

.privacy-policy-texts-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.privacy-policy-texts-list li {
  position: relative;
  padding-left: 18px;
  font-size: 16px;
  color: var(--text-form-label-80);
}
.privacy-policy-texts-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-white);
}

.privacy-policy-texts-list li p:nth-child(n) {
  margin-top: 5px;
}
.privacy-policy-texts-list li p:nth-child(n + 2) {
  margin-top: 5px;
  margin-left: 2px;
}

.privacy-policy-marked-text {
  margin-block: 20px;
  position: relative;
  background-color: var(--color-gray-100-5);
  border-radius: 12px;
  padding: 20px 20px 20px 34px;
}
.privacy-policy-marked-text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 100%;
  background: var(--color-primary-80);
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
.privacy-policy-marked-text h3 {
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
}
.privacy-policy-marked-text p {
  margin-top: 16px;
}

.privacy-policy-marked-text ~ p {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .privacy-policy-section {
    position: relative;
    overflow-x: clip;
    padding: 60px 24px;
  }
  .privacy-policy-section .cyan-circle-bg {
    display: block;
    top: -15%;
    left: -800px;
    opacity: 0.7;
  }
  .privacy-policy-texts p {
    text-align: justify;
  }
  .privacy-policy-texts-list li::before {
    top: 12px;
  }
  .privacy-policy-marked-text::before {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 0px;
  }
}

/* !Partners Page */
.partners-page-section {
  position: relative;
  overflow-x: clip;
  padding: 100px 24px;
}
.partners-page-gradient-bg {
  position: absolute;
  top: -1100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  opacity: 0.6;
}

.our-partners-page-content h1 {
  position: relative;
  font-size: 24px;
  font-weight: 700;
}
.our-partners-page-content h1::after {
  content: "";
  margin-top: 20px;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to bottom,
    var(--bg-tertiary-color-30),
    var(--bg-tertiary-color-50)
  );
  opacity: 0.4;
}

@media (max-width: 768px) {
  .partners-page-section {
    padding: 60px 24px;
  }
  .partners-page-gradient-bg {
    position: absolute;
    top: -1100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0.6;
  }
  .our-partners-page-content h1 {
    font-size: 18px;
  }
  .our-partners-page-content h1::after {
    margin-top: 16px;
  }
}

/* !Instructors Page */
.instructors-page-section {
  position: relative;
  overflow-x: clip;
  padding: 100px 24px;
}
.instructors-page-gradient-bg {
  position: absolute;
  top: -1100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
  opacity: 0.6;
}

.instructors-page-content h1 {
  position: relative;
  font-size: 24px;
  font-weight: 700;
}
.instructors-page-content h1::after {
  content: "";
  margin-top: 20px;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to bottom,
    var(--bg-tertiary-color-30),
    var(--bg-tertiary-color-50)
  );
  opacity: 0.4;
}

@media (max-width: 768px) {
  .instructors-page-section {
    padding: 60px 24px;
  }
  .instructors-page-gradient-bg {
    position: absolute;
    top: -1100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    opacity: 0.6;
  }
  .instructors-page-content h1 {
    font-size: 18px;
  }
  .instructors-page-content h1::after {
    margin-top: 16px;
  }
}

/* !Instructor Inner Page */
.instructor-inner-page-section {
  position: relative;
  overflow-x: clip;
  padding: 100px 24px;
}
.instructor-inner-page-section .hero-background {
  height: auto;
}
.instructor-inner-page-section .instructors-page-gradient-bg {
  display: none;
}

.instructor-name h1 {
  font-size: 32px;
  font-weight: 700;
}

.instructor-inner-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 340px minmax(272px, 972px) 1fr;
  margin-inline: auto;
}
.instructor-profile-wrapper {
  width: 300px;
  margin-right: 40px;
  grid-column-start: 2;
  grid-row: span 4;
  position: relative;
  height: 100%;
}
.instructor-profile-card {
  padding: 24px;
  position: sticky;
  top: 81px;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: linear-gradient(
    -39deg,
    var(--bg-tertiary-color-5),
    var(--bg-tertiary-color-15)
  );
  border-radius: 10px;
}
.instructor-profile-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 11px;
  border: 1px solid transparent;
  background: linear-gradient(
      -51deg,
      var(--bg-tertiary-color-50),
      var(--bg-tertiary-color-20)
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
}

.instructor-profile-image {
  width: 100%;
  height: 224px;
}
.instructor-profile-image img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  object-fit: cover;
}
.instructor-social-link img {
  width: auto;
  height: 20px;
}

.instructor-name {
  display: flex;
  flex-direction: column;
  gap: 20px;
  grid-column-start: 3;
  grid-row-end: 2;
}
.instructor-texts-wrapper {
  margin-top: 20px;
  grid-column-start: 3;
  grid-row-start: 2;
  max-width: 972px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.instructor-texts-wrapper h1 {
  font-size: 32px;
  font-weight: 700;
}
.instructor-regalia-list {
  display: flex;
  gap: 10px;
}
.instructor-regalia-list p {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-primary);
}
.instructor-texts p {
  font-size: 16px;
  line-height: 24px;
}

.instructor-related-courses {
  grid-column-start: 3;
  grid-column-end: 5;
  margin-top: 100px;
}
.instructor-related-courses > h3 {
  font-family: "Inter";
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 40px;
}
.instructor-related-courses .may-also-like-swiper-wrapper {
  /* max-width: 972px; */
  width: 100%;
}

.instructor-related-events {
  grid-column-start: 3;
  grid-column-end: 5;
  margin-top: 100px;
}
.instructor-related-events > h3 {
  font-family: "Inter";
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 40px;
}
.instructor-related-events .may-also-like-swiper-wrapper {
  /* max-width: 972px; */
  width: 100%;
}

@media (max-width: 768px) {
  .instructor-inner-page-section {
    padding: 60px 24px;
  }
  .instructor-inner-content-wrapper {
    grid-template-columns: 1fr;
  }
  .instructor-inner-page-section .hero-background {
    height: auto;
  }
  .instructor-inner-page-section .instructors-page-gradient-bg {
    display: block;
  }

  .instructor-profile-wrapper {
    width: 100%;
    height: fit-content;
    margin-top: 20px;
    margin-right: 0;
    grid-column: span 1;
    grid-row-start: 2;
    grid-row-end: 3;
    position: relative;
  }
  .instructor-profile-card {
    padding: 10px;
    gap: 10px;
  }
  .instructor-name {
    align-items: center;
    grid-column-start: 1;
    grid-row-start: 1;
    grid-row-end: 2;
  }
  .instructor-name h1 {
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
  }
  .instructor-texts-wrapper {
    margin-top: 20px;
    grid-column-start: 1;
    grid-row-start: 3;
    max-width: 972px;
  }
  .instructor-texts p {
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
  }
  .instructor-related-courses {
    grid-column: span 1;
    margin-top: 60px;
    max-width: calc(100vw - 58px);
  }
  .instructor-related-courses > h3 {
    position: relative;
    margin-bottom: 0;
  }
  .instructor-related-courses > h3::after {
    content: "";
    margin-block: 10px 20px;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to bottom,
      var(--bg-tertiary-color-30),
      var(--bg-tertiary-color-50)
    );
    opacity: 0.4;
  }
  .instructor-related-events {
    grid-column: span 1;
    margin-top: 60px;
    max-width: calc(100vw - 58px);
  }

  .instructor-related-events > h3 {
    position: relative;
    margin-bottom: 0;
  }
  .instructor-related-events > h3::after {
    content: "";
    margin-block: 10px 20px;
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(
      to bottom,
      var(--bg-tertiary-color-30),
      var(--bg-tertiary-color-50)
    );
    opacity: 0.4;
  }
  #mayLikeSwiper2 .swiper-slide {
    width: 272px;
  }
  #mayLikeSwiper2 .swiper-slide .event-card-date {
    margin-block: 10px;
  }
  #mayLikeSwiper2 .swiper-slide-active .event-card-date {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: normal;
  }
  #mayLikeSwiper2 .swiper-slide .event-card-texts p {
    text-align: center;
    font-size: 16px;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    line-height: normal;
  }
}

/* !Events Page */
.events-page-wrapper {
  position: relative;
  overflow-x: clip;
  padding: 93px 24px 0;
}
.events-page-gradient-bg {
  position: absolute;
  top: -575px;
  left: 50%;
  transform: translateX(-50%);
  width: 1740px;
  height: 1254px;
  background: radial-gradient(closest-side, var(--color-primary), transparent);
  opacity: 0.4;
  z-index: -1;
}

.events-page-content h1 {
  font-size: 24px;
  font-weight: 700;
}
.events-page-content h1::after {
  content: "";
  margin-top: 20px;
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to bottom,
    var(--bg-tertiary-color-30),
    var(--bg-tertiary-color-50)
  );
  opacity: 0.4;
}

@media (max-width: 768px) {
  .events-page-wrapper {
    padding: 24px 24px 0;
  }
  .events-page-content h1 {
    font-size: 20px;
  }
  .events-page-content h1::after {
    margin-top: 16px;
  }

  .events-page-content .events-list {
    margin-top: 20px;
  }
}

/* !Event Inner Page */

.event-details-section {
  padding: 71px 24px 0;
}
.event-details-container {
  display: grid;
  grid-template-columns: minmax(272px, 1fr) minmax(272px, 411px);
  gap: 40px;
}

.event-details-img {
  max-width: 861px;
  height: 498px;
}
.event-details-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.event-details-texts {
  margin-top: 20px;
}
.event-details-texts h1 {
  max-width: 700px;
  font-size: 24px;
  font-weight: 900;
  line-height: 36px;
}
.event-details-actions {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.event-details-actions button {
  position: relative;
  height: 42px;
  padding: 10px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background-color: var(--color-primary-50);
  border-radius: 8px;
  border: none;
  cursor: pointer;
}
.event-details-actions button::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: linear-gradient(
      150deg,
      var(--bg-blue-350) 50%,
      var(--bg-pink-550) 100%,
      var(--bg-red-650) 100%
    )
    border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0.5;
  z-index: -1;
}
.event-details-actions button span {
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
}

.event-details-description {
  margin-top: 22px;
}
.event-details-description p {
  font-size: 16px;
  line-height: 26px;
  color: var(--text-primary-color-80);
}

.event-details-description .description-marked-text {
  margin-block: 20px;
}

.event-details-aside {
  position: relative;
}
.event-details-aside-content {
  padding: 20px;
  position: sticky;
  top: 81px;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.event-details-aside-title {
  text-align: center;
  font-size: 32px;
  font-weight: 900;
}
.event-details-aside-date {
  margin-block: 40px;
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 1px solid var(--border-primary-color-50);
}
.event-details-aside-date span {
  font-size: 32px;
  font-weight: 700;
  color: var(--color-primary);
}
.event-details-aside-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.event-details-aside-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.event-details-aside-info-item img {
  width: auto;
  height: 16px;
}
.event-details-aside-info-item span {
  font-size: 15px;
}
.event-details-aside-info-item p {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #ffc919;
}

.event-details-aside-btn {
  margin-top: 40px;
  padding: 12px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}

.event-agenda-section {
  margin-top: 56px;
}

@media (max-width: 768px) {
  .event-details-container {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .event-details-aside {
    grid-row-start: 1;
  }
}