/*-----------------------------------*\
  #style.css
\*-----------------------------------*/

/**
 * copyright 2022 codewithsadee
 */





/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/
@import "tailwindcss";

:root {

  /**
   * colors
   */
  --background-color: hsl(0, 0%, 8%);
  --foreground-color: white;
  --card-bg: rgba(255, 255, 255, 0.05);

  --whychooseus-card-bg: rgba(255, 255, 255, 0.1);
  --feature-text: #8f8f8f;
  --about-text: var(--white);
  --about-icon-bg: var(--primary-color);
  --hero-gradient: linear-gradient(-45deg, #1F446A, #0A1D2E, #132e39, #0A1D2E);
  --whychooseus-title: #1c1c1c;
  --carosel-btn: var(--primary-color);
  --smarttechsolutions-title: var(--primary-color);
  --services-card: var(--white);
  --ourservices-text: var(--primary-color);
  --services-text: var(--about-icon-bg);
  --services-bg: radial-gradient(circle at 84% 82%, rgba(217, 217, 217, 0.03) 0%, rgba(217, 217, 217, 0.03) 21%, transparent 21%, transparent 100%), radial-gradient(circle at 75% 56%, rgba(3, 3, 3, 0.03) 0%, rgba(3, 3, 3, 0.03) 30%, transparent 30%, transparent 100%), radial-gradient(circle at 74% 53%, rgba(153, 153, 153, 0.03) 0%, rgba(153, 153, 153, 0.03) 95%, transparent 95%, transparent 100%), radial-gradient(circle at 86% 43%, rgba(209, 209, 209, 0.03) 0%, rgba(209, 209, 209, 0.03) 83%, transparent 83%, transparent 100%), radial-gradient(circle at 64% 88%, rgba(192, 192, 192, 0.03) 0%, rgba(192, 192, 192, 0.03) 2%, transparent 2%, transparent 100%), radial-gradient(circle at 73% 77%, rgba(205, 205, 205, 0.03) 0%, rgba(205, 205, 205, 0.03) 18%, transparent 18%, transparent 100%), radial-gradient(circle at 57% 51%, rgba(161, 161, 161, 0.03) 0%, rgba(161, 161, 161, 0.03) 64%, transparent 64%, transparent 100%), radial-gradient(circle at 40% 84%, rgba(115, 115, 115, 0.03) 0%, rgba(115, 115, 115, 0.03) 14%, transparent 14%, transparent 100%), linear-gradient(90deg, rgb(0, 0, 0), rgb(0, 0, 0));
  ;
  --sexy-services: linear-gradient(to bottom, var(--background-color) 10%, #0a1d2e 100%);
  --copyright-text: var(--white);
  --text-color: hsl(198.76deg 63.83% 91.29%);
  --button-bg: var(--primary-color);
  --button-text: white;
  --rich-black-fogra-29_50: hsl(210, 26%, 11%, 0.5);
  --rich-black-fogra-29-1: hsl(210, 26%, 11%);
  --rich-black-fogra-29-2: hsl(210, 50%, 4%);
  --silver-metallic: hsl(212, 9%, 67%);
  --primary-color: #0093D1;
  --primary-color_20: rgba(0, 147, 209, 0.2);
  --accent-color: #1F446A;
  --background-dark: #0A1D2E;
  --light-text: #B8C8D9;
  --historybg: linear-gradient(135deg, var(--background-color), var(--background-dark));
  --historycard-bg: linear-gradient(to right, var(--card-bg), rgba(0, 191, 255, 0.04));
  --historycard-members-bg: var(--card-bg);
  --courses-bg: radial-gradient(circle at 84% 82%, rgba(217, 217, 217, 0.03) 0%, rgba(217, 217, 217, 0.03) 21%, transparent 21%, transparent 100%), radial-gradient(circle at 75% 56%, rgba(3, 3, 3, 0.03) 0%, rgba(3, 3, 3, 0.03) 30%, transparent 30%, transparent 100%), radial-gradient(circle at 74% 53%, rgba(153, 153, 153, 0.03) 0%, rgba(153, 153, 153, 0.03) 95%, transparent 95%, transparent 100%), radial-gradient(circle at 86% 43%, rgba(209, 209, 209, 0.03) 0%, rgba(209, 209, 209, 0.03) 83%, transparent 83%, transparent 100%), radial-gradient(circle at 64% 88%, rgba(192, 192, 192, 0.03) 0%, rgba(192, 192, 192, 0.03) 2%, transparent 2%, transparent 100%), radial-gradient(circle at 73% 77%, rgba(205, 205, 205, 0.03) 0%, rgba(205, 205, 205, 0.03) 18%, transparent 18%, transparent 100%), radial-gradient(circle at 57% 51%, rgba(161, 161, 161, 0.03) 0%, rgba(161, 161, 161, 0.03) 64%, transparent 64%, transparent 100%), radial-gradient(circle at 40% 84%, rgba(115, 115, 115, 0.03) 0%, rgba(115, 115, 115, 0.03) 14%, transparent 14%, transparent 100%), linear-gradient(90deg, rgb(0, 0, 0), rgb(0, 0, 0));
  --courses-cardbg: radial-gradient(circle at 13% 47%, rgba(140, 140, 140, 0.03) 0%, rgba(140, 140, 140, 0.03) 25%, transparent 25%, transparent 100%), radial-gradient(circle at 28% 63%, rgba(143, 143, 143, 0.03) 0%, rgba(143, 143, 143, 0.03) 16%, transparent 16%, transparent 100%), radial-gradient(circle at 81% 56%, rgba(65, 65, 65, 0.03) 0%, rgba(65, 65, 65, 0.03) 12%, transparent 12%, transparent 100%), radial-gradient(circle at 26% 48%, rgba(60, 60, 60, 0.03) 0%, rgba(60, 60, 60, 0.03) 6%, transparent 6%, transparent 100%), radial-gradient(circle at 97% 17%, rgba(150, 150, 150, 0.03) 0%, rgba(150, 150, 150, 0.03) 56%, transparent 56%, transparent 100%), radial-gradient(circle at 50% 100%, rgba(25, 25, 25, 0.03) 0%, rgba(25, 25, 25, 0.03) 36%, transparent 36%, transparent 100%), radial-gradient(circle at 55% 52%, rgba(69, 69, 69, 0.03) 0%, rgba(69, 69, 69, 0.03) 6%, transparent 6%, transparent 100%), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  --whychooseus-bg:var(--accent-color);
  
  --primary-color_10: hsla(227, 98%, 21%, 0.137);
  --sonic-silver: hsl(0, 0%, 47%);
  --cadet-gray: hsl(214, 15%, 62%);
  --light-gray: hsl(0, 0%, 80%);
  --gainsboro: hsl(0, 0%, 88%);
  --white_20: hsl(0, 0%, 100%, 0.2);
  --white_10: hsl(0, 0%, 100%, 0.1);
  --black_10: hsl(0, 0%, 0%, 0.1);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);
  --background: hsl(0, 0%, 8%);
  
  /**
  * typography
  */
  
  --ff-catamaran: 'Catamaran', sans-serif;
  --ff-rubik: 'Rubik', sans-serif;
  --cursive-font: 'Dancing Script', cursive;
  --fs-1: 3.8rem;
  --fs-2: 3rem;
  --fs-3: 2.5rem;
  --fs-4: 2rem;
  --fs-5: 1.8rem;
  --fs-6: 1.5rem;
  --fs-7: 1.8rem;
  --fw-900: 900;
  --fw-800: 800;
  --fw-700: 700;
  --fw-500: 500;
  
  /**
  * spacing
  */
  
  --section-padding: 80px;
  
  /**
  * shadow
  */
  
  --shadow-1: 0 0 20px var(--black_10);
  --shadow-2: 0px 10px 24px var(--primary-color_20);
  
  /**
  * border radius
  */
  
  --radius-10: 10px;
  --radius-8: 8px;
  --radius-5: 5px;
  
  /**
  * transition
  */
  
  --transition-1: 0.25s ease;
  --transition-2: 0.5s ease;
  --cubic-in: cubic-bezier(0.51, 0.03, 0.64, 0.28);
  --cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);
  
}


body.light-theme {
  --background-color: white;
  --foreground-color: #0A1D2E;
  --card-bg: #1f5993;
  --text-color: #222;
  --button-bg: #1F446A;
  --button-text: white;
  --feature-text: #2e96fd;
  --about-text: #1a1b1d;
  --about-icon-bg: #0A1D2E;
  --hero-gradient: linear-gradient(-45deg, #b0d3f5, #6ea8dc, #498ecb, #bcdffb);
  --whychooseus-title: rgb(239, 245, 252);
  --whychooseus-card-bg: #1f1f1f;
  --carosel-btn: #222628;
  --smarttechsolutions-title: #222;
  --services-card: rgb(226 238 255);
  --services-text: var(--about-icon-bg);
  --services-bg: radial-gradient(at 68% 94%, #1d3e53 0px, transparent 50%), radial-gradient(at 46% 70%, #254b62 0px, transparent 50%), radial-gradient(at 88% 78%, #476d7c 0px, transparent 50%), radial-gradient(at 87% 79%, #77abb7 0px, transparent 50%), #1d3e53;
  
  --ourservices-text: var(--white);
  --copyright-text: var(--black);
  --historybg: var(--accent-color);
  --historycard-bg: linear-gradient(to right, #0093d1, #1f446a);
  --historycard-members-bg: linear-gradient(to left, rgb(0 147 209 / 80%), #0093d1);
  --courses-bg: linear-gradient(55deg, rgba(208, 208, 208, 0.03) 0%, rgba(208, 208, 208, 0.03) 20%, rgba(55, 55, 55, 0.03) 20%, rgba(55, 55, 55, 0.03) 40%, rgba(81, 81, 81, 0.03) 40%, rgba(81, 81, 81, 0.03) 60%, rgba(208, 208, 208, 0.03) 60%, rgba(208, 208, 208, 0.03) 80%, rgba(191, 191, 191, 0.03) 80%, rgba(191, 191, 191, 0.03) 100%), linear-gradient(291deg, rgba(190, 190, 190, 0.02) 0%, rgba(190, 190, 190, 0.02) 14.286%, rgba(105, 105, 105, 0.02) 14.286%, rgba(105, 105, 105, 0.02) 28.572%, rgba(230, 230, 230, 0.02) 28.572%, rgba(230, 230, 230, 0.02) 42.858%, rgba(216, 216, 216, 0.02) 42.858%, rgba(216, 216, 216, 0.02) 57.144%, rgba(181, 181, 181, 0.02) 57.144%, rgba(181, 181, 181, 0.02) 71.42999999999999%, rgba(129, 129, 129, 0.02) 71.43%, rgba(129, 129, 129, 0.02) 85.71600000000001%, rgba(75, 75, 75, 0.02) 85.716%, rgba(75, 75, 75, 0.02) 100.002%), linear-gradient(32deg, rgba(212, 212, 212, 0.03) 0%, rgba(212, 212, 212, 0.03) 12.5%, rgba(223, 223, 223, 0.03) 12.5%, rgba(223, 223, 223, 0.03) 25%, rgba(11, 11, 11, 0.03) 25%, rgba(11, 11, 11, 0.03) 37.5%, rgba(86, 86, 86, 0.03) 37.5%, rgba(86, 86, 86, 0.03) 50%, rgba(106, 106, 106, 0.03) 50%, rgba(106, 106, 106, 0.03) 62.5%, rgba(220, 220, 220, 0.03) 62.5%, rgba(220, 220, 220, 0.03) 75%, rgba(91, 91, 91, 0.03) 75%, rgba(91, 91, 91, 0.03) 87.5%, rgba(216, 216, 216, 0.03) 87.5%, rgba(216, 216, 216, 0.03) 100%), linear-gradient(312deg, rgba(113, 113, 113, 0.01) 0%, rgba(113, 113, 113, 0.01) 14.286%, rgba(54, 54, 54, 0.01) 14.286%, rgba(54, 54, 54, 0.01) 28.572%, rgba(166, 166, 166, 0.01) 28.572%, rgba(166, 166, 166, 0.01) 42.858%, rgba(226, 226, 226, 0.01) 42.858%, rgba(226, 226, 226, 0.01) 57.144%, rgba(109, 109, 109, 0.01) 57.144%, rgba(109, 109, 109, 0.01) 71.42999999999999%, rgba(239, 239, 239, 0.01) 71.43%, rgba(239, 239, 239, 0.01) 85.71600000000001%, rgba(54, 54, 54, 0.01) 85.716%, rgba(54, 54, 54, 0.01) 100.002%), linear-gradient(22deg, rgba(77, 77, 77, 0.03) 0%, rgba(77, 77, 77, 0.03) 20%, rgba(235, 235, 235, 0.03) 20%, rgba(235, 235, 235, 0.03) 40%, rgba(215, 215, 215, 0.03) 40%, rgba(215, 215, 215, 0.03) 60%, rgba(181, 181, 181, 0.03) 60%, rgba(181, 181, 181, 0.03) 80%, rgba(193, 193, 193, 0.03) 80%, rgba(193, 193, 193, 0.03) 100%), linear-gradient(80deg, rgba(139, 139, 139, 0.02) 0%, rgba(139, 139, 139, 0.02) 14.286%, rgba(114, 114, 114, 0.02) 14.286%, rgba(114, 114, 114, 0.02) 28.572%, rgba(240, 240, 240, 0.02) 28.572%, rgba(240, 240, 240, 0.02) 42.858%, rgba(221, 221, 221, 0.02) 42.858%, rgba(221, 221, 221, 0.02) 57.144%, rgba(74, 74, 74, 0.02) 57.144%, rgba(74, 74, 74, 0.02) 71.42999999999999%, rgba(201, 201, 201, 0.02) 71.43%, rgba(201, 201, 201, 0.02) 85.71600000000001%, rgba(187, 187, 187, 0.02) 85.716%, rgba(187, 187, 187, 0.02) 100.002%), linear-gradient(257deg, rgba(72, 72, 72, 0.03) 0%, rgba(72, 72, 72, 0.03) 16.667%, rgba(138, 138, 138, 0.03) 16.667%, rgba(138, 138, 138, 0.03) 33.334%, rgba(54, 54, 54, 0.03) 33.334%, rgba(54, 54, 54, 0.03) 50.001000000000005%, rgba(161, 161, 161, 0.03) 50.001%, rgba(161, 161, 161, 0.03) 66.668%, rgba(17, 17, 17, 0.03) 66.668%, rgba(17, 17, 17, 0.03) 83.33500000000001%, rgba(230, 230, 230, 0.03) 83.335%, rgba(230, 230, 230, 0.03) 100.002%), linear-gradient(47deg, rgba(191, 191, 191, 0.01) 0%, rgba(191, 191, 191, 0.01) 16.667%, rgba(27, 27, 27, 0.01) 16.667%, rgba(27, 27, 27, 0.01) 33.334%, rgba(66, 66, 66, 0.01) 33.334%, rgba(66, 66, 66, 0.01) 50.001000000000005%, rgba(36, 36, 36, 0.01) 50.001%, rgba(36, 36, 36, 0.01) 66.668%, rgba(230, 230, 230, 0.01) 66.668%, rgba(230, 230, 230, 0.01) 83.33500000000001%, rgba(93, 93, 93, 0.01) 83.335%, rgba(93, 93, 93, 0.01) 100.002%), linear-gradient(90deg, #ffffff, #ffffff);
  --courses-cardbg: url(../assets/images/575bf60f-faba-462a-b05c-376603561596.svg) no-repeat bottom right;
  --whychooseus-bg:var(--primary-color);

}


/*-----------------------------------*\
  #RESET
\*-----------------------------------*/

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

li {
  list-style: none;
}

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

a,
img,
span,
input,
button,
strong,
ion-icon {
  display: block;
}

img {
  height: auto;
}

input,
button {
  background: none;
  border: none;
  font: inherit;
}

input {
  width: 100%;
}

button {
  cursor: pointer;
}

ion-icon {
  pointer-events: none;
}

address {
  font-style: normal;
}

html {
  font-family: var(--ff-rubik);
  font-size: 10px;
  scroll-behavior: smooth;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-size: 1.6rem;
  line-height: 1.6;
}

body {
  transition: background-color 0.4s ease, color 0.4s ease;
}

:focus-visible {
  outline-offset: 4px;
}

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background-color: var(--light-gray);
}

::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--rich-black-fogra-29-1);
}


/* Logo and Header Styles */
.site-header {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: var(--background-dark);
  /* #0A1D2E */
  border-bottom: 2px solid var(--primary-color);
  /* #0093D1 */
}

.navbar-logo {
  display: flex;
  align-items: center;
  padding: 4px;
}

.logo-only {
  height: 80px;
  /* Make it square */
  width: 80px;
  border-radius: 50%;
  /* Circle shape */
  object-fit: cover;
  /* Crop image cleanly inside circle */
  padding: 4px;
  background: linear-gradient(135deg, #0A1D2E, #1F446A);
  /* Brand frame */
  box-shadow:
    0 4px 8px rgba(0, 147, 209, 0.3),
    0 0 0 3px rgba(0, 147, 209, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.logo-only-2 {
  height: 40px;
  /* Make it square */
  width: 40px;
  border-radius: 50%;
  /* Circle shape */
  object-fit: cover;
  /* Crop image cleanly inside circle */
  padding: 4px;
  background: linear-gradient(135deg, #0A1D2E, #1F446A);
  /* Brand frame */
  box-shadow:
    0 4px 8px rgba(0, 147, 209, 0.3),
    0 0 0 3px rgba(0, 147, 209, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-right: 10px;
}

.logo-only:hover {
  transform: scale(1.08);
  box-shadow:
    0 6px 12px rgba(0, 147, 209, 0.4),
    0 0 0 4px rgba(0, 147, 209, 0.25);
}

/* //THEME BUTTON */
.switch {
  font-size: 17px;
  position: relative;
  display: inline-block;
  width: 64px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #0093d1;
  transition: .4s;
  border-radius: 30px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  border-radius: 20px;
  left: 2px;
  bottom: 2px;
  z-index: 2;
  background-color: #e8e8e8;
  transition: .4s;
}

.sun svg {
  position: absolute;
  top: 6px;
  left: 36px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

.moon svg {
  fill: #73C0FC;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 1;
  width: 24px;
  height: 24px;
}

/* .switch:hover */
.sun svg {
  animation: rotate 15s linear infinite;
}

@keyframes rotate {

  0% {
    transform: rotate(0);
  }

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

/* .switch:hover */
.moon svg {
  animation: tilt 5s linear infinite;
}

@keyframes tilt {

  0% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-10deg);
  }

  75% {
    transform: rotate(10deg);
  }

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

.input:checked+.slider {
  background-color: #183153;
}

.input:focus+.slider {
  box-shadow: 0 0 1px #183153;
}

.input:checked+.slider:before {
  transform: translateX(30px);
}


.site-title {
  font-size: 1.8rem;
  color: azure;
  /* #0093D1 */
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}


.hero-banner {
  background: var(--hero-gradient);
  color: white;
}

.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  transition: background-image 1s ease-in-out;
}

.hero .container {
  color: hsl(0deg 0% 59.27%);
}

.hero-title {
  color: var(--foreground-color);
}


.container-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.carousel-container {
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
  display: flex;
  padding-bottom: 40px;
  width: 100%;
}

.carousel-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;

}

.carousel-track {
  display: flex;
  gap: 30px;
  padding: 0 30px;
  transition: transform 0.5s ease;

}

.carousel-btn {
  background: var(--carosel-btn);
  color: var(--white);
  border: none;
  margin: 10px;
  border-radius: 50%;
  padding: 12px;
  cursor: pointer;
  z-index: 1;
  transition: background 0.3s ease;
}

.carousel-btn:hover {
  background: var(--accent-color);
}

.carousel-btn.left {
  margin-right: 10px;
}

.carousel-btn.right {
  margin-left: 10px;
}






.carousel-track .about-card {
  flex: 0 0 calc(100% / 3 - 20px);
  height: 380px;
  padding: 40px 20px;
  background: var(--whychooseus-card-bg);
  backdrop-filter: blur(15px);
  border-radius: 12px;
  color: var(--text-color);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  width: 100px;
}

.carousel-track .about-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 147, 209, 0.3);
}

.carousel-track .about-icon {
  height: 90px;
  width: 90px;
  margin: 0 auto 20px;
  background-color: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.carousel-track .about-icon img {
  width: 40px;
  height: 40px;
}

.carousel-track h3 {
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: white;
}

.carousel-track p {
  font-size: 1.4rem;
  color: hsl(0deg 0% 88.48%);
}


.hero-overlay {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, rgba(10, 10, 10, 0.85) 100%);
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero-services {
  font-size: 2.2rem;
  font-weight: bold;
  font-family: var(--ff-catamaran);
  color: rgb(138, 202, 251);
  height: 1.5em;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--primary-color);
  width: fit-content;
  margin-top: 1.5rem;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  50% {
    border-color: transparent;
  }
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(10px);
  /* 👈 blur the homepage behind */
  background: rgba(0, 0, 0, 0.2);
  /* optional dim */
  display: none;
  /* default: hidden */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.modal-content {
  width: 80%;
  max-width: 580px;
  height: 700px;
  background: var(--card-bg);
  backdrop-filter: blur(18px);
  /* 👈 optional inner blur */
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  animation: zoomIn 0.4s ease;

}


.modal-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}


@keyframes zoomIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.fadeIn {
  animation: zoomIn 0.3s forwards;
}

.fadeOut {
  animation: fadeOut 0.3s forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}


/*-----------------------------------*\
  #REUSED STYLE
\*-----------------------------------*/

.container {
  padding-inline: 15px;
}

.section {
  padding-block: var(--section-padding);

}

.bg-dark {
  background-color: var(--rich-black-fogra-29-1);
  color: var(--silver-metallic);
}

.has-bg-image {
  background-repeat: no-repeat;
  background-position: top left;
}

.has-before,
.has-after {
  position: relative;
  z-index: 1;
}

.has-before::before,
.has-after::after {
  content: "";
  position: absolute;
}

.h1,
.h2,
.h3 {
  font-family: var(--ff-catamaran);
  line-height: 1.25;
}

.h1 {
  color: var(--white);
  font-size: var(--fs-1);
  font-weight: var(--fw-900);
}

.h2,
.h3 {

  font-weight: var(--fw-800);
}

.h2 {
  font-size: var(--fs-2);
}

.h3 {
  font-size: var(--fs-4);
}

.section-text {
  font-size: var(--fs-7);
}

.btn {
  max-width: max-content;
  font-size: var(--fs-6);
  text-transform: uppercase;
  font-weight: var(--fw-500);
  padding: 0px 35px;
  border-radius: var(--radius-8);
  transition: var(--transition-1);
}

.btn-primary {
  background-color: var(--button-bg);
  color: var(--button-text);
}

.btn-primary:is(:hover, :focus) {
  background-color: #007BB3;
  color: white;
  border: none;
  transition: background 0.3s ease;
}

.highlight-box {
  background-color: #1F446A;
  color: #B8C8D9;
  padding: 0.5em 1em;
  border-radius: 4px;
}

.btn-secondary {
  background-color: var(--white);
  color: var(--primary-color);
}

.btn-secondary:is(:hover, :focus) {
  background-color: var(--rich-black-fogra-29-1);
}

.w-100 {
  width: 100%;
}

.circle,
.abs-img {
  position: absolute;
}

.circle {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -56%);
  width: 100%;
  z-index: -1;
  animation: rotate360 15s linear infinite;
}

@keyframes rotate360 {
  0% {
    transform: translate(-50%, -56%) rotate(0);
  }

  100% {
    transform: translate(-50%, -56%) rotate(1turn);
  }
}

.circle-2 {
  animation-direction: reverse;
}

.hero-subtitle,
.section-subtitle {
  font-family: var(--cursive-font);
  font-weight: bold;
  font-size: 150px;
  max-width: max-content;
}

.section-subtitle {
  color: var(--primary-color);

}

.section-title {
  margin-block: 18px 35px;

}

.btn-link {
  --color: var(--white);

  color: var(--color);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  text-transform: uppercase;
  max-width: max-content;
  transition: var(--transition-1);
}

.btn-link::before {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color);
  transition: var(--transition-1);
}

.btn-link:is(:hover, :focus) {
  --color: var(--primary-color);
}

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

.img-holder {
  aspect-ratio: var(--width) / var(--height);
  background-color: var(--light-gray);
  overflow: hidden;
}

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.has-scrollbar {
  display: flex;
  gap: 25px;
  overflow-x: auto;
  padding-block-end: 30px;
  scroll-snap-type: inline mandatory;
}

.scrollbar-item {
  min-width: 100%;
  scroll-snap-align: start;
}

.has-scrollbar::-webkit-scrollbar {
  height: 10px;
}

.has-scrollbar::-webkit-scrollbar-track,
.has-scrollbar::-webkit-scrollbar-thumb {
  border-radius: 50px;
}

.has-scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-color);
}

.has-scrollbar::-webkit-scrollbar-button {
  width: calc(25% - 25px);
}





/*-----------------------------------*\
  #HEADER
\*-----------------------------------*/

.header .btn {
  display: none;
  transition: all 0.3s ease;
  &:hover{
          background-color: transparent;
        border: 1px solid white;
        box-shadow: inset -5px -4px #0093d1;
  }
}


.header {
  background-color: #010b14;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 10px;
  box-shadow: var(--shadow-1);
  z-index: 4;
}

.header>.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  color: var(--white);
  font-family: var(--ff-catamaran);
  font-size: 3.5rem;
  font-weight: var(--fw-900);
  display: flex;
  align-items: center;
  margin-inline-start: -8px;
}

.logo ion-icon {
  color: var(--primary-color);
  font-size: 40px;
  transform: rotate(90deg) translate(-2px, -5px);
}

.nav-open-btn {
  background-color: var(--primary-color);
  padding: 20px 15px;
  border-radius: var(--radius-8);
}

.nav-open-btn .line {
  background-color: var(--white);
  width: 30px;
  height: 3px;
}

.nav-open-btn .line:not(:last-child) {
  margin-block-end: 6px;
}

.nav-open-btn .line:nth-child(2) {
  width: 25px;
  margin-inline-start: auto;
}

.navbar {
  background-color: var(--primary-color);
  color: var(--white);
  position: fixed;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  visibility: hidden;
  transition: 0.25s var(--cubic-in);
}

.navbar.active {
  visibility: visible;
  transform: translateY(-100%);
  transition: 0.5s var(--cubic-out);
}

.nav-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background-color: var(--rich-black-fogra-29-1);
  color: var(--white);
  font-size: 40px;
  padding: 10px;
  border-radius: var(--radius-8);
}

.navbar-link {
  font-family: var(--ff-catamaran);
  font-size: var(--fs-4);
  text-align: center;
  padding-block: 10px;
  margin-block-end: 20px;
  transition: var(--transition-1);
  color: white;
}

.navbar-link:is(:hover, :focus, .active) {
  color: var(--rich-black-fogra-29-1);
}





/*-----------------------------------*\
  #HERO
\*-----------------------------------*/







.hero::after {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 240px;

  z-index: -1;
}

.hero-content {
  margin-block-end: 90px;
}

.hero-subtitle {
  background-color: var(--white_10);
  color: var(--white);
  margin-inline: auto;
  padding: 5px;
  padding-inline-end: 15px;
  border-radius: var(--radius-8);
}

.hero-subtitle .strong {
  display: inline-block;
  background-color: var(--primary-color);
  padding: 2px 15px;
  margin-inline-end: 15px;
  border-radius: var(--radius-5);
}

.hero-title {
  margin-block: 30px 8px;
}

.hero .section-text {
  margin-block-end: 40px;
}

.hero .btn {
  margin-inline: auto;
}

.hero-banner {
  position: relative;
}

.abs-img-1 {
  top: 20px;
  right: -50px;
  width: 190px;
}

.abs-img-2 {
  bottom: -50px;
  left: -40px;
  width: 280px;
}

.hero .abs-img {
  animation: move 3s linear infinite alternate;
}

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(-5px, 10px);
  }

  100% {
    transform: translate(5px, 20px);
  }
}

.hero .abs-img-2 {
  animation-direction: alternate-reverse;
}





/*-----------------------------------*\
  #ABOUT
\*-----------------------------------*/

.about-title {
  color: var(--about-text);
}

.about-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.about-content {
  flex: 1 1 45%;
}

.about-animation {
  flex: 1 1 45%;
  text-align: center;
}

#about-lottie {
  width: 100%;
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
}

.about-features {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
}

.about-features li {
  margin-bottom: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.about-flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.about-content {
  flex: 1 1 45%;
}

.about-animation {
  flex: 1 1 45%;
  text-align: center;
}

#about-lottie {
  width: 100%;
  max-width: 400px;
  height: 400px;
  margin: 0 auto;
}

.about-features {
  list-style: none;
  padding-left: 0;
  margin-top: 1.5rem;
}

.about-features li {
  margin-bottom: 10px;
  font-weight: 500;

  display: flex;
  align-items: center;
  gap: 8px;
}

.about {
  overflow: hidden;

}

.about-banner {
  margin-block-end: 50px;
}

.about-banner::after {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: var(--primary-color);
  border-radius: var(--radius-10);
  z-index: -2;
}

.about-banner .abs-img {
  bottom: 0;
  left: 0;
  z-index: -1;
  animation: moveUp 2.5s ease infinite;
}

@keyframes moveUp {

  0%,
  30%,
  60%,
  100% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-30px);
  }

  40% {
    transform: translateY(-15px);
  }
}

.about .section-text:not(:last-of-type) {
  margin-block-end: 15px;
}

.about .wrapper {
  margin-block-start: 30px;
}

.about-coach {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-block-end: 30px;
}

.about .coach-avatar {
  overflow: hidden;
  border-radius: 50%;
}

.about .coach-name {
  font-weight: var(--fw-700);
  margin-block-end: 5px;
}

.about .coach-title {
  font-size: var(--fs-6);
}

.about .btn-primary:is(:hover, :focus) {
  background-color: var(--rich-black-fogra-29-1);
  color: var(--white);
  box-shadow: none;
}

.about-features li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 14px;
  font-weight: 500;
  color: var(--feature-text);
  overflow: hidden;
}

.about-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #3299ff;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.4s ease;
}

.about-features li.aos-animate::before {
  transform: scaleY(1);
}


.section-title {
  font-family: var(--ff-catamaran);
}

/*-----------------------------------*\
  #HISTORY
\*-----------------------------------*/

/* === Leadership Section Base === */
.leadership-vision-section {
  padding-block: 80px;
  border-top: 3px dashed var(--accent-color) ;
  background:var(--background-color);
  color: var(--text-color);
}

.leadership-vision-section .section-subtitle {
  color: var(--primary-color);
  text-align: center;
  margin-left: 45rem;
}

.leadership-vision-section .section-title {
  font-size: var(--fs-2);
  font-weight: var(--fw-800);
  margin-bottom: 8.5rem;
  text-align: center;
}

.vision-split {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 60px;
}

/* === Left Spotlight (Mother/CEO) === */
.vision-left {
  flex: 1 1 45%;
  display: flex;
  justify-content: center;
}

.spotlight-rotator {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3/4;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow:inset 3px 3px 0px 0px rgb(0 191 255);
  background: var(--card-bg);
}

.rotator-wrapper {
  height: 100%;
  position: relative;
}

.rotator-item {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 16px;
  box-sizing: border-box;
}

.rotator-item.active {
  opacity: 1;
  z-index: 2;
}

.rotator-item img {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  
}

.ceo-vision {
  margin-top: 14px;
  background: var(--card-bg);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.ceo-name {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--foreground-color);
}

.ceo-title {
  font-size: 1.1rem;
  color: var(--primary-color);
  margin-bottom: 8px;
  font-weight: 600;
}

.vision-quote {
  font-size: 1.2rem;
  font-style: italic;
  color: var(--light-text);
  margin-top: 10px;
  line-height: 1.6;
}

.ceo-sign {
  font-family: 'Dancing Script', cursive;
  color: var(--primary-color);
  margin-top: 8px;
  font-size: 1.2rem;
}

/* === Right: Team Carousel === */
.vision-right {
  flex: 1 1 48%;
  position: relative;
}

.team-heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--foreground-color);
  margin-bottom: 8px;
}

.team-subtext {
  font-size: 1.1rem;
  color: var(--light-text);
  margin-bottom: 24px;
}

.slide-carousel {
  position: relative;
  height: auto;
  overflow: hidden;
  min-height: 400px;
}

.team-row {
  position: absolute;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.8s ease-in-out;
  pointer-events: none;
}

.team-row.active {
  opacity: 1;
  transform: translateX(0);
  z-index: 2;
}

.team-row.exit-left {
  transform: translateX(-100%);
  opacity: 0;
  z-index: 1;
}


/* Team Member Card */
.mini-lead {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--card-bg);
  padding: 14px 18px;
  border-left: 4px solid var(--primary-color);
  border-radius: 12px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mini-lead:hover {
  transform: translateX(5px);
  box-shadow: 0 0 16px rgba(0, 147, 209, 0.2);
}

.mini-lead img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.mini-lead h4 {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

.mini-lead .role {
  font-size: 1.1rem;
  color: var(--primary-color);
  font-weight: 600;
}

.mini-lead .desc {
  font-size: 1.1rem;
  color: var(--light-text);
  margin-top: 4px;
}

/* === Responsive === */
@media (max-width: 768px) {
  .vision-split {
    flex-direction: column;
    align-items: center;
  }

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

  .team-row {
    position: relative;
    left: 0;
    opacity: 1;
    transform: none;
  }

  .mini-lead {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .mini-lead img {
    margin-bottom: 10px;
  }
}




/*-----------------------------------*\
  #WHY CHOOSE US
\*-----------------------------------*/
.section-chose-us {
  position: relative;
  width: 100%;
  height: 95vh;
  overflow: hidden;
  background: var(--whychooseus-bg);
  opacity: 0.95;
  background-size: 400% 400%;
  background-position: 0% 50%;
  animation: gradientBG2 15s ease infinite;
}

@keyframes gradientBG2 {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.3;
  /* LOWERED */
  filter: grayscale(0.4) brightness(1) contrast(1.2);
  /* LESS washout */
}


.video-bg::after {
  content: "";
  position: absolute;
  bottom: 0;
  height: 30%;
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.042), transparent);
  z-index: 2;
}

.chose-up-container,
.container-cards {
  position: relative;
  z-index: 2;
}

.chose-up-container {
  text-align: center;
}

.chose-up-container h3 {
  padding: 10px;
  color: var(--white);

}

.chose-up-container p {
  padding-top: 50px;
  color: var(--whychooseus-title);
}

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

.about-card {
  width: 300px;
  height: 300px;
  border: 2px solid black;
  margin: 20px;
  text-align: center;
  padding: 40px;
  color: var(--white);
}


.about-icon {
  height: 90px;
  width: 90px;
  overflow: hidden;
  /* border: 2px solid rebeccapurple; */
  border-radius: 50%;
  display: flex;
  align-items: center;
  margin: auto;
  background-color: var(--primary-color);
}

.about-icon:hover {
  background-color: var(--white);
}

.about-icon img {
  width: 40px;
  height: 40px;
  margin: auto;
}

.about-icon h3 {
  padding-top: 30px;
}

.about-icon p {
  padding: 20px;
}

/* 
.video {
  padding-block: 0;
  margin-block-end: -250px;
}

.video-card {
  background-color: var(--light-gray);
  background-size: cover;
  background-position: center;
  height: 500px;
  border-radius: var(--radius-10);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.video-card::before {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--rich-black-fogra-29_50);
  z-index: -1;
}

.video-card .card-title {
  color: var(--white);
  font-size: var(--fs-3);
}

.play-btn {
  background-color: var(--primary-color);
  color: var(--white);
  width: max-content;
  font-size: 30px;
  padding: 25px;
  border-radius: 50%;
  margin-block: 25px 35px;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--primary-color); }
  100% { box-shadow: 0 0 0 40px transparent; }
}
 */

/*-----------------------------------*\
  #ACHIEVEMENTS
\*-----------------------------------*/


.projects-section {
  position: relative;
  background-color: var(--background-color);
  color: var(--text-color);
  padding: var(--section-padding) 0;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.1);
  z-index: 2;

}

body.light-theme .projects-section {
  box-shadow: 0 20px 60px -10px rgba(0, 0, 0, 0.2);
}

.projects-section .container {
  position: relative;
  z-index: 2;

}

.projects-section .section-header .section-subtitle {
  font-size: 2.2rem;
  margin-left: 32rem;
}

.section-header .section-title {
  font-size: var(--fs-2);
  font-weight: var(--fw-800);
  margin-bottom: 0.5rem;
}

.premium-timeline .section-header .section-subtitle {
  margin-bottom: 5.5rem;


}

.projects-grid {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  /* bigger base width */
  margin-top: 10rem;
}

.project-card {
  background-color: var(--card-bg);
  border: 1px solid var(--primary-color_20);
  border-radius: var(--radius-10);
  padding: 2rem 2rem;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
  position: relative;
  padding-left: 1.5rem;
  --mouse-x: 50%;
  --mouse-y: 50%;
  --spotlight-color: rgba(255, 255, 255, 0.08);

}

.hover-card {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 1rem;
  height: 350px;
  background-image: url('assets/images/achievements\ image\ 1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  color: white;
  text-align: center;
  border-radius: var(--radius-10);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease-in-out;
  cursor: pointer;

}

.hover-card::before {
  content: "hello";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 1.2s ease;
  z-index: 0;

}

.hover-card:nth-child(1)::before {
  background-image: url('assets/images/KK\ FITNESS\ PROJECT.jpg');
  background-size: cover;
  background-repeat: no-repeat;

}

.hover-card:nth-child(2)::before {
  background-image: url('assets/images/Project-2.png');
  background-size: cover;
  background-repeat: no-repeat;
}

.hover-card:nth-child(3)::before {
  background-image: url('assets/images/word-lane-tech.png');

}

.hover-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 20%, rgba(0, 0, 0, 0.9));
  transition: opacity 0.5s ease;
  z-index: 1;


}

.hover-card:hover {
  transform: scale(1.05);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  filter: drop-shadow(3px 3px 1px rgb(0, 79, 163));

}


.hover-card:hover::before {
  transform: scale(0);
  backdrop-filter: blur(2px);
}

.hover-card .content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateY(60%);
  transition: transform 0.5s ease;
  width: 100%;


}


.hover-card .title {
  font-size: 2.5rem;
  font-weight: bold;
  margin-top: 10rem;
}

.hover-card .copy {
  font-family: var(--ff-rubik, sans-serif);
  font-size: 1rem;
  margin: 1rem 0;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.hover-card .btn {
  background: var(--primary-color, #0093D1);
  border: none;
  color: white;
  padding: 0.6rem 1.2rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.hover-card:hover .content {
  transform: translateY(0);
}

.hover-card:hover .copy,
.hover-card:hover .btn {
  opacity: 1;
}

.project-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(600px circle at var(--mouse-x) var(--mouse-y),
      var(--spotlight-color),
      transparent 40%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 0;

}

.project-card:hover::before {
  opacity: 1;

}

.accent-strip {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 5px;
  background: var(--primary-color);
  border-radius: 5px 0 0 5px;
}

.project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.project-badge img {
  width: 30px;
  margin-bottom: 8px;
  filter: invert(1);
}

.project-title {
  font-size: var(--fs-3);
  font-weight: var(--fw-800);
  margin-bottom: 1rem;
  color: var(--foreground-color);
}

.project-desc {
  font-size: var(--fs-6);
  line-height: 1.8;
  color: var(--text-color);
  margin-top: auto;
}

.projects-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/path/to/subtle-pattern.png');
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
}

body.light-theme .project-card {
  background-color: #f6f9fc;
  border-color: rgba(0, 147, 209, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.light-theme .project-title {
  color: #111;
}

body.light-theme .project-desc {
  color: #333;
}



/*-----------------------------------*\
  #CLASS
\*-----------------------------------*/
.top-fade-overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
  z-index: 0;
  pointer-events: none;
}

.sexy-services {
  background: var(--services-bg);
  position: relative;
  padding-block: var(--section-padding);
  overflow: hidden;
  z-index: 1;
}

.sexy-services::before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  width: 100%;
  height: 40px;
  background: var(--background-color);
  z-index: -1;
}


.services-glow-bg::before {
  content: "";
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background:
    radial-gradient(circle at 40% 40%, rgba(0, 147, 209, 0.15), transparent 70%),
    radial-gradient(circle at 60% 60%, rgba(255, 255, 255, 0.05), transparent 80%);
  z-index: 0;
  pointer-events: none;
  animation: rotateGlow 20s linear infinite;
  transform-origin: center;
  filter: blur(80px);
}

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

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

/* Default = Dark Mode Glow */
body.dark-theme .services-glow-bg::before {
  background: radial-gradient(circle at center, rgba(0, 147, 209, 0.15), transparent);
  filter: blur(100px);
  animation: rotateGlow 20s linear infinite;
  transform-origin: center;
  z-index: 0;
}

/* Light Mode Version – softer, whiter, subtle */
body.light-theme .services-glow-bg::before {
  background: radial-gradient(circle at center, rgba(0, 147, 209, 0.05), transparent);
  filter: blur(60px);
  animation: rotateGlow 20s linear infinite;
  transform-origin: center;
  z-index: 0;
}


.services-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.sexy-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border-radius: 20px;
  padding: 20px 20px 30px;
  text-align: center;
  color: var(--text-color);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease, background 0.4s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 rgba(0, 147, 209, 0);

}



.sexy-card:hover {
  transform: translateY(-10px) scale(1.03);
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 30px rgba(0, 147, 209, 0.2);

}

.sexy-card .icon-wrap {
  width: 60px;
  height: 60px;
  margin: 15px auto 15px;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  position: relative;
  z-index: 2;
}

.card-image {
  margin-bottom: 10px;
}


.sexy-card:hover .icon-wrap {
  background: #ffffff;

}

.sexy-card .icon-wrap img {
  width: 30px;
  height: 30px;
  filter: brightness(0) invert(1);
  transition: filter 0.3s;
}

.sexy-card:hover .icon-wrap img {
  filter: none;
}

.card-title {
  opacity: 0.7;
  transform: translateY(0);
  transition: opacity 0.4s ease;
}

.card-desc {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.sexy-card:hover .card-title {
  opacity: 1;
}

.sexy-card:hover .card-desc {
  opacity: 1;
  transform: translateY(0);
}

.sexy-card h3 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.sexy-card p {
  font-size: 1.5rem;
  color: var(--text-color);
}

.card-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 20px;
}

.services-carousel-wrapper {
  position: relative;
  overflow: hidden;
  margin-inline: auto;
  padding-inline: 20px;
  /* creates space for arrows */
}


.services-carousel {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 20px 10px;
  scrollbar-width: none;
}

.services-carousel::-webkit-scrollbar {
  display: none;
}

.sexy-card {
  flex: 0 0 auto;
  width: 300px;
  scroll-snap-align: start;
}

.arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: rgba(0, 0, 0, 0.3);
  border: none;
  color: white;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}


.arrows:hover {
  background: var(--primary-color);
  color: #fff;
}

.arrows.left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.arrows.right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

/* --------------
#EVENTSSSSSS*
------------- */


.events-section {
  position: relative;
  background: linear-gradient(to bottom right, #2f2f2f, #363636);
  color: var(--text-color);
  padding: var(--section-padding) 0;

  z-index: 1;
  overflow: hidden;
}


body.light-theme .events-section {
  background: linear-gradient(to bottom right, #f5faff, #e7f0f8);
}

.events-glow-bg::before {
  content: "";
  position: absolute;
  top: -30%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle at center, rgba(0, 147, 209, 0.12), transparent);
  z-index: 0;
  pointer-events: none;
  animation: rotateGlow 30s linear infinite;
  filter: blur(120px);
}

.events-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-top: 3rem;
  padding-inline: 20px;
}

.events-carousel-container {
  overflow: hidden;
  flex: 1;
}

.events-track {
  display: flex;
  transition: transform 0.4s ease;
  gap: 30px;
}

.event-card {
  flex: 0 0 340px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
  box-shadow: 0 10px 30px rgba(0, 147, 209, 0.15);
  min-height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translateY(30px);
  opacity: 0;
  animation: slideInCard 0.8s forwards;
}

.event-card:nth-child(1) {
  animation-delay: 0.1s;
}

.event-card:nth-child(2) {
  animation-delay: 0.3s;
}

.event-card:nth-child(3) {
  animation-delay: 0.5s;
}

@keyframes slideInCard {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.event-caption-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: linear-gradient(to top, rgb(14, 14, 14), transparent);
  color: #fff;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.event-card:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow: 0 20px 60px rgba(0, 147, 209, 0.35);

}

.event-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}


.event-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
  display: block;
}

.event-card:hover .event-img {
  transform: scale(1.05);
}



.event-card:hover .event-caption-overlay {
  opacity: 1;
}

.event-caption {
  font-size: 2.3rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
}

.event-date {
  font-size: 1.2rem;
  color: #ccc;
}

.event-tag {
  font-size: 0.85rem;
  background: rgba(0, 147, 209, 0.2);
  color: #0cf;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  display: inline-block;
  width: fit-content;
}

.event-btn {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  background: var(--primary-color);
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  align-self: start;
  transition: background 0.3s ease;
}

.event-btn:hover {
  background: #007bb2;
}

.carousel-btn {
  background: var(--about-icon-bg);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  padding: 0.8rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
  transition: background 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(4px);
}

.carousel-btn:hover {
  background: rgba(0, 147, 209, 0.4);
  transform: scale(1.1);
}

.carousel-btn.left {
  margin-right: 15px;
}

.carousel-btn.right {
  margin-left: 15px;
}

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

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

.events-animated-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 30% 30%, rgba(0, 0, 0, 0.6), transparent),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, 0.4), transparent);
  animation: bgPulse 12s infinite ease-in-out;
}

body.light-theme .events-animated-bg {
  background: linear-gradient(135deg, #f8fcff, #dde7f2);
  animation: bgSlide 20s linear infinite;
}

@keyframes bgPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

@keyframes bgSlide {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 100% 100%;
  }
}


.caption-content {
  transform: translateY(20px);
  transition: transform 0.4s ease;
}

.event-card:hover .caption-content {
  transform: translateY(0);
}

/* -------------------- */
/* #TESTIMONIALSSSS *
---------------------
*/
.testimonial-feature {
  background: linear-gradient(-45deg, #1F446A, #0A1D2E, #132e39, #0A1D2E);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: var(--white);
  padding-block: 100px;
  position: relative;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.testimonial-feature>* {
  position: relative;
  z-index: 2;
}

.testimonial-blob-bg {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 1000px;
  height: 1000px;
  opacity: 0.1;
  z-index: 0;
  pointer-events: none;
}


@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.ticker-scroll-wrapper {
  overflow: hidden;
  width: 100%;
  position: relative;
  margin-top: 50px;
}

.ticker-track {
  display: flex;
  gap: 30px;
  width: max-content;
  animation: scrollTicker 40s linear infinite;
}

.ticker-scroll-wrapper:hover .ticker-track {
  animation-play-state: paused;
}

.testimonial-card-glass {
  min-width: 300px;
  max-width: 300px;
  padding: 25px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  color: var(--white);
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.testimonial-card-glass:hover {
  transform: scale(1.03);
}

.testimonial-card-glass .quote {
  font-style: italic;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: hsl(210, 28%, 85%);
}

.testimonial-card-glass h3 {
  font-size: 1.3rem;
  font-weight: bold;
  margin-bottom: 5px;
}

.testimonial-card-glass span {
  font-size: 1.1rem;
  color: var(--primary-color);
}

@keyframes scrollTicker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.testimonial-img-box {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--primary-color);
  box-shadow: 0 0 8px rgba(0, 147, 209, 0.3);
}

.testimonial-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-text-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center horizontally */
  text-align: center;
  /* Center text */
  gap: 8px;
  color: var(--white);
}


.testimonial-text-box .quote {
  font-style: italic;
  color: hsl(210, 28%, 85%);
  font-size: 2rem;
}

.split-layout {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 350px;
  max-width: 400px;
  padding: 20px;
  border-left: 4px solid var(--primary-color);
  height: 400px;
}

.testimonial-scroll-container {
  display: flex;
  overflow-x: auto;
  gap: 20px;
  scroll-snap-type: x mandatory;
  padding: 0 20px;
  margin-top: 60px;
  max-width: 100%;
  scroll-behavior: smooth;

}

.text-center {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.testimonial-scroll-container::-webkit-scrollbar {
  height: 4px;
}

.testimonial-scroll-container::-webkit-scrollbar-thumb {
  background-color: var(--primary-color);
  border-radius: 50px;
}

.testimonial-card {
  flex: 0 0 300px;
  scroll-snap-align: center;
  border-radius: 16px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1994' height='918' preserveAspectRatio='none' viewBox='0 0 1994 918'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1737%26quot%3b)' fill='none'%3e%3crect width='1994' height='918' x='0' y='0' fill='url(%26quot%3b%23SvgjsLinearGradient1738%26quot%3b)'%3e%3c/rect%3e%3cpath d='M1656.11 241.62 a288.59 288.59 0 1 0 577.18 0 a288.59 288.59 0 1 0 -577.18 0z' fill='rgba(0%2c 22%2c 54%2c 0.64)' class='triangle-float3'%3e%3c/path%3e%3cpath d='M1064.447%2c398.337C1114.291%2c400.817%2c1165.018%2c379.381%2c1189.364%2c335.817C1213.234%2c293.105%2c1200.76%2c241.487%2c1175.535%2c199.56C1151.216%2c159.139%2c1111.55%2c130.76%2c1064.447%2c128.189C1012.269%2c125.341%2c954.84%2c140.105%2c930.164%2c186.168C906.333%2c230.653%2c932.36%2c281.732%2c959.349%2c324.375C983.904%2c363.171%2c1018.59%2c396.056%2c1064.447%2c398.337' fill='rgba(0%2c 22%2c 54%2c 0.64)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M1690.3415777118853 420.74941212322534L1927.5379185388779 541.6069843015324 1811.1991498901923 183.5530712962327z' fill='rgba(0%2c 22%2c 54%2c 0.64)' class='triangle-float1'%3e%3c/path%3e%3cpath d='M939.36 788.89 a276.22 276.22 0 1 0 552.44 0 a276.22 276.22 0 1 0 -552.44 0z' fill='rgba(0%2c 22%2c 54%2c 0.64)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M567.55 248.59 a212.61 212.61 0 1 0 425.22 0 a212.61 212.61 0 1 0 -425.22 0z' fill='rgba(0%2c 22%2c 54%2c 0.64)' class='triangle-float2'%3e%3c/path%3e%3cpath d='M372.057%2c875.549C432.159%2c879.405%2c502.264%2c872.111%2c530.914%2c819.136C558.874%2c767.436%2c519.14%2c710.351%2c488.537%2c660.17C459.796%2c613.042%2c427.252%2c559.451%2c372.057%2c558.652C316.011%2c557.841%2c275.632%2c607.078%2c249.584%2c656.71C225.651%2c702.312%2c219.824%2c755.848%2c244.975%2c800.79C270.7%2c846.756%2c319.49%2c872.176%2c372.057%2c875.549' fill='rgba(0%2c 22%2c 54%2c 0.64)' class='triangle-float3'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1737'%3e%3crect width='1994' height='918' fill='white'%3e%3c/rect%3e%3c/mask%3e%3clinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' gradientUnits='userSpaceOnUse' id='SvgjsLinearGradient1738'%3e%3cstop stop-color='rgba(44%2c 69%2c 94%2c 1)' offset='0'%3e%3c/stop%3e%3cstop stop-color='rgba(0%2c 13%2c 30%2c 1)' offset='1'%3e%3c/stop%3e%3c/linearGradient%3e%3cstyle%3e %40keyframes float1 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-10px%2c 0)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float1 %7b animation: float1 5s infinite%3b %7d %40keyframes float2 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(-5px%2c -5px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float2 %7b animation: float2 4s infinite%3b %7d %40keyframes float3 %7b 0%25%7btransform: translate(0%2c 0)%7d 50%25%7btransform: translate(0%2c -10px)%7d 100%25%7btransform: translate(0%2c 0)%7d %7d .triangle-float3 %7b animation: float3 6s infinite%3b %7d %3c/style%3e%3c/defs%3e%3c/svg%3e");

  backdrop-filter: blur(6px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}


.testimonial-text {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.testimonial-photo {
  flex: 1;
  min-height: 100%;
  max-height: 500px;
}

.testimonial-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote-icon {
  width: 30px;
  margin-bottom: 20px;
}

.testimonial-message {
  font-size: 1.6rem;
  line-height: 1.8;
  color: hsl(210deg 28.73% 68.84%);
  margin-bottom: 30px;
}

.testimonial-name {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 5px;
}

.testimonial-role {
  color: var(--sonic-silver);
  font-size: 1.4rem;
}

/* ARROWS */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 2rem;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background 0.3s;
}

.arrow:hover {
  background: rgba(255, 255, 255, 0.4);
}

.left-arrow {
  left: 10px;
}

.right-arrow {
  right: 10px;
}

@media (max-width: 768px) {
  .testimonial-card {
    flex-direction: column;
    height: auto;
  }

  .testimonial-photo {
    max-height: 300px;
  }
}

.star-rating {
  margin-top: 10px;
  display: flex;
  gap: 4px;
  justify-content: start;
  align-items: center;
}

.star-rating img {
  width: 20px;
  height: 20px;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
}

/*-----------------------------------*\
  #COURSES
\*-----------------------------------*/

.popular-courses-section h2 {
  text-align: center;
}

.popular-courses-section p.section-subtitle {
  margin-left: 45rem;
  font-size: 30px;
}

.popular-courses-section {
  padding-block: 100px;
  /* background: var(--background-color); */
  background-image: var(--courses-bg);
  color: var(--text-color);
}

.popular-courses-grid {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 40px;
}

.popular-course-card {
  background: var(--courses-cardbg);

  /* background: var(--about-text); */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;

}

.popular-course-card:hover {
  transform: translateY(-6px);
}

.course-thumb {
  position: relative;
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.course-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duration {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--primary-color);
  color: white;
  padding: 4px 10px;
  font-size: 0.75rem;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.course-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;

}

.course-category {
  color: var(--primary-color);
  font-size: 1.3rem;
  font-weight: 600;
}

.course-title {
  font-size: 2rem;
  font-weight: bold;
  color: var(--background-color);
}

.course-desc {
  font-size: 1.2rem;
  color: var(--light-text);
}

.course-rating {
  font-size: 1.3rem;
  display: flex;
  gap: 6px;
  color: var(--primary-color);
  align-items: center;
}

.course-footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.instructor {
  display: flex;
  gap: 10px;
  align-items: center;
}

.instructor img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.instructor-name {
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--background-color);
}

.enrolled {
  font-size: 1.3rem;
  color: var(--cadet-gray);
}

.price {
  font-size: 2rem;
  font-weight: bold;
  color: var(--primary-color);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

.covered {
  position: relative;
  overflow: hidden;
}

.covered::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  transition: transform 0.6s ease;
  transform: translateX(0%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 8px;
  margin-left: 6px;

  /* Premium Touches */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0.05)
  );
  box-shadow: 0 0 12px rgba(0, 170, 255, 0.2);
  animation: shimmerEffect 2s infinite ease-in-out;
}



.price:hover .covered::after {
  transform: translateX(100%);
}





.courses-button-center {
  text-align: center;
  margin-top: 40px;
}

.btn-explore {
  padding: 10px 22px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.btn-explore:hover {
  background-color: var(--primary-color-dark);
}



/*-----------------------------------*\
  #DOWNLOAD OUR APP
\*-----------------------------------*/

.app-section {
  position: relative;

  background: radial-gradient(at 31% 6%, #092635 0px, transparent 50%), radial-gradient(at 9% 60%, #1b4242 0px, transparent 50%), radial-gradient(at 34% 8%, #5c8374 0px, transparent 50%), radial-gradient(at 94% 17%, #9ec8b9 0px, transparent 50%), #092635;

  padding: var(--section-padding) 0;
  overflow: hidden;
  color: var(--foreground-color);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  /* ✅ Soft outer shadow */
  border-radius: var(--radius-10);
  /* optional: rounded corners */
}


.app-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/images/airplane doodle.png');
  background-repeat: repeat;
  background-position: center center;
  /* ✅ Center it */
  background-size: contain;
  /* ✅ Show full image */
  opacity: 0.2;
  /* ✅ Subtle */
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: lighten;
  /* Optional: blend softly */
}

/* ✅ Ensure your content sits on top */
.app-layout {
  position: relative;
  z-index: 2;
}



.app-layout {
  display: flex;
  gap: 10rem;
  justify-content: space-around;

}

.app-text-content {
  flex: 1 1 50%;
}

.app-text-content .section-subtitle {
  font-family: var(--cursive-font);
  font-size: 3.5rem;
  color: var(--about-icon-bg);
  margin-bottom: 10px;

}

.app-text-content .section-title {
  font-size: var(--fs-2);
  font-weight: var(--fw-700);
  margin-bottom: 20px;
  font-family: var(--ff-catamaran);
}

.app-text-content .section-description {
  font-size: var(--fs-6);
  color: var(--background);
  margin-bottom: 30px;
}

.store-buttons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.store-btn {
  display: flex;
  align-items: center;
  background-color: var(--background-color);
  border: 1px solid white;
  color: white;
  padding: 12px 20px;
  border-radius: var(--radius-8);
  font-weight: var(--fw-700);
  transition: all 0.3s ease-in-out;
  text-decoration: none;
}

.store-btn img {
  width: 24px;
  margin-right: 10px;
  filter: invert(1);

  &:hover {
    filter: invert(0);
  }

}


.store-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  /* light translucent */
  backdrop-filter: blur(8px) saturate(180%);
  color: #fff;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
  animation: borderMaker 0.4s forwards ease-in-out;
}

.app-image-content {
  flex: 1 1 45%;
  text-align: center;
}

.app-image {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius-10);
  position: relative;
  overflow: hidden;
  transition: transform 0.6s ease;
  z-index: 1;
  filter: grayscale(10%) contrast(1);

}

/* 🔥 Shine effect */
.app-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg,
      rgba(255, 255, 255, 0.05) 0%,
      rgba(255, 255, 255, 0.6) 50%,
      rgba(255, 255, 255, 0.05) 100%);
  transform: skewX(-20deg);
  transition: left 0.8s ease;
  pointer-events: none;
}

/* 🔁 Subtle scanlines for retro look */
.app-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.02),
      rgba(255, 255, 255, 0.02) 1px,
      transparent 1px,
      transparent 2px);
  pointer-events: none;
  z-index: 2;
}

/* 🎯 On hover: pop + swipe + grayscale punch */
.app-image:hover {
  transform: scale(1.05) rotate(1deg);
  filter: grayscale(0%) contrast(1.1) brightness(1.05);

}

.app-image:hover::before {
  left: 130%;
}



/* Light theme override */
body.light-theme .app-section {
  background-color: #496989;
  background-image: radial-gradient(at 14% 32%, #496989 0%, transparent 60%), radial-gradient(at 21% 85%, #58a399 0%, transparent 50%), radial-gradient(at 12% 62%, #a8cd9f 0%, transparent 40%), radial-gradient(at 54% 50%, #e2f4c5 0%, transparent 30%);
  color: var(--foreground-color);
}

body.light-theme .store-btn {
  color: #333;
  border: 1px solid #333;
  border-radius: var(--radius-8);
  transition: all 0.2s ease-in-out;
}

body.light-theme .store-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
  /* light translucent */
  backdrop-filter: blur(8px) saturate(180%);
  color: white;
  border-radius: 20px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.25);
  animation: borderMaker 0.4s forwards ease-in-out;
}

@keyframes borderMaker {
  0% {
    border-top: 2px solid #fff;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
  }

  20% {
    border-top: 2px solid #fff;
    border-right: 2px solid transparent;
  }

  40% {
    border-right: 2px solid #fff;
    border-bottom: 2px solid transparent;
  }

  60% {
    border-bottom: 2px solid #fff;
    border-left: 2px solid transparent;
  }

  80% {
    border-left: 2px solid #fff;
  }

  100% {
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    border-left: 2px solid #fff;
  }
}



body.light-theme .store-btn img {
  filter: invert(0);

  &:hover {
    filter: invert(1);
  }
}


/*-----------------------------------*\
  #BLOG
\*-----------------------------------*/

.blog .section-subtitle {
  margin-inline: auto;
}

.blog-card {
  background-color: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-10);
  height: 100%;
  overflow: hidden;
}

.blog-card .card-banner {
  position: relative;
}

.blog-card .card-banner img {
  transition: var(--transition-2);
}

.blog-card:is(:hover, :focus) .card-banner img {
  transform: scale(1.1);
}

.blog-card .card-meta {
  background-color: var(--primary-color);
  color: var(--white);
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 8px 20px;
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  text-transform: uppercase;
}

.blog-card .card-content {
  padding: 25px;
  color: var(--background);
}

.blog-card .card-title {
  transition: var(--transition-1);
}

.blog-card .card-title:is(:hover, :focus) {
  color: var(--primary-color);
}

.blog-card .card-text {
  font-size: var(--fs-6);
  margin-block: 8px 12px;
}

.blog-card .btn-link {
  --color: var(--primary-color);
}

.blog-card .btn-link:is(:hover, :focus) {
  --color: var(--rich-black-fogra-29-1);
}





/*-----------------------------------*\
  #CONTACT
\*-----------------------------------*/

/* .contact { padding-block-start: calc(var(--section-padding) + 50px); } */
/* .contact{margin-block-end: 250px;} */

.contact .containetr {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 100px 0;
  /* margin: 30px; */
  /* border: 2px solid rgb(0, 128, 117); */
  background-color: var(--black);


}

.contact-box {
  /* border: 2px solid rgb(128, 0, 6); */
  width: 50%;
  padding: 30px;
}

.contact-box input {
  border-color: var(--white);
  padding: 10px;
  color: var(--white);
  border: 1px solid var(--white);
  margin-top: 20px;
  outline: none;
}

.contact-box textarea {
  margin-top: 20px;
  background-color: var(--background);
  border: 1px solid var(--white);
  outline: none;
  color: var(--white);
  padding: 10px;

}

.contact-box button {
  padding: 10px;
  color: var(--white);
  background-color: var(--primary-color);
  border-radius: 10px;
  margin-top: 20px;
}

.contact-box button:hover {
  background-color: var(--background);
  color: var(--white);
}


/* Smooth fade-ins */
[data-aos] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-aos].aos-animate {
  opacity: 1;
  transform: none;
}

/* Card hover animation */
.about-card,
.class-card,
.blog-card {
  transition: transform 0.4s ease, box-shadow 0.3s ease;
  transform: translateY(0);
}

.about-card:hover,
.class-card:hover,
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0, 147, 209, 0.3);
}

/* Animated glow effect for buttons */
.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.btn-primary::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 147, 209, 0.4), transparent 60%);
  animation: glow-pulse 2s infinite;
  z-index: -1;
}

@keyframes glow-pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.3;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Glassmorphism effect */
.glass-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.37);
}


#typewriter-text::after {
  content: "|";
  animation: blink 1s step-start infinite;
  color: var(--primary-color);
  /* optional */
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}





.map-box {
  /* border: 2px solid purple; */
  width: 40%;
  margin-right: 30px;

}

.map-box iframe {
  width: 100%;
  
}


/*-----------------------------------*\
  #FOOTER
\*-----------------------------------*/

.footer {
  font-size: var(--fs-6);
  background: linear-gradient(-45deg, #1F446A, #0A1D2E, #132e39, #0A1D2E);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: var(--white);

  position: relative;

  @keyframes gradientBG {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }
}

.footer-top .container {
  display: grid;
  gap: 50px;
}

.footer .logo {
  color: var(--white);
}

.footer-brand-text {
  margin-block: 25px;
}

.footer-top .wrapper {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 20px;
}

.footer-brand-list li:not(:last-child) {
  margin-block-end: 15px;
}

.footer-brand-title,
.footer-list-title {
  color: var(--white);
  font-family: var(--ff-catamaran);
}

.footer-list-title {
  font-size: var(--fs-4);
  font-weight: var(--fw-800);
  margin-block-end: 28px;
}

.footer-list-title-location {
  font-size: var(--fs-4);
  font-weight: var(--fw-800);
  font-family: var(--ff-catamaran);
  color: var(--white);
  margin-block-end: 16px;

}

.footer-list-title::before {
  bottom: 0;
  width: 70px;
  height: 1px;
  background-color: var(--primary-color);
}

.footer-list-title-location::before {
  bottom: 0;
  width: 70px;
  height: 1px;
  background-color: var(--primary-color);
}


.footer-list>li:not(:first-child) {
  margin-block-start: 12px;
}

.footer-link {
  transition: var(--transition-1);
}

.footer-link:not(.address):is(:hover, :focus) {
  color: var(--primary-color);
}

.footer-list-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
}

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

.footer-list-item .icon {
  background-color: var(--primary-color);
  color: var(--white);
  font-size: 24px;
  padding: 8px;
  border-radius: 50px;
}

.footer-form {
  position: relative;
  margin-block-end: 30px;
}

.footer-form .input-field {
  background-color: var(--white);
  color: var(--rich-black-fogra-29-1);
  padding-block: 18px;
  padding-inline: 30px 80px;
  border-radius: var(--radius-10);
}

.footer-form .btn {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  padding: 0;
  font-size: 26px;
  padding-inline: 12px;
}

.footer-form .btn-primary:is(:hover, :focus) {
  background-color: var(--rich-black-fogra-29-1);
  color: var(--white);
  box-shadow: none;
}

.social-list {
  display: flex;
  gap: 15px;
}

.social-link {
  background-color: var(--white_20);
  color: var(--white);
  padding: 13px;
  border-radius: 50%;
  transition: var(--transition-1);
}

.social-link:is(:hover, :focus) {
  background-color: var(--primary-color);
}

.footer-bottom {
  background-color: var(--background-color);
  color: var(--white);
  text-align: center;
  padding: 15px;
}

.footer-bottom .container .copyright p {
  text-align: center;
}

.container .copyright {
  margin: auto;
  color: var(--copyright-text);

}

.copyright-link {
  display: inline-block;
  color: var(--primary-color);
}

/* .footer-bottom-list {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-block-start: 10px;
}

.footer-bottom-link {
  padding-inline-start: 20px;
  transition: var(--transition-1);
}

.footer-bottom-link::before {
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 10px;
  height: 10px;
  background-color: var(--primary-color);
  border-radius: 50%;
}

.footer-bottom-link:is(:hover, :focus) { color: var(--primary-color); } */





/*-----------------------------------*\
  #BACK TO TOP
\*-----------------------------------*/

.back-top-btn {
  position: fixed;
  bottom: 20px;
  right: 40px;
  background-color: var(--primary-color);
  color: var(--rich-black-fogra-29-1);
  font-size: 20px;
  padding: 11px;
  border-radius: 50%;
  border: 2px solid var(--rich-black-fogra-29-1);
  visibility: hidden;
  opacity: 0;
  transition: var(--transition-1);
  z-index: 4;
}

.back-top-btn.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(-10px);
}





/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 575px screen
 */

@media (min-width: 575px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 5.8rem;
    --fs-2: 4rem;

  }



  /**
   * REUSED STYLE
   */

  .container {
    max-width: 540px;
    width: 100%;
    margin-inline: auto;
  }

  .hero-subtitle,
  .section-subtitle {
    font-size: var(--fs-5);
  }



  /**
   * HEADER
   */

  .header .container {
    max-width: unset;
    padding-inline: 30px;

  }



  /**
   * HERO
   */

  .hero-content {
    padding-inline: 40px;
  }

  .hero-subtitle .strong {
    padding-block: 6px;
  }

  .hero::after {
    height: 340px;
  }

  .abs-img-1 {
    top: 130px;
    right: -10px;
    width: 230px;
  }

  .abs-img-2 {
    bottom: 20px;
    left: -40px;
    width: 310px;
  }



  /**
   * ABOUT
   */

  .about .wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
  }

  .about-coach {
    margin-block-end: 0;
  }

  .dynamic-bg {
    position: relative;
    overflow: hidden;
    z-index: 1;
    background: linear-gradient(-45deg, #0A1D2E, #132e39, #1F446A, #0A1D2E);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
  }

  @keyframes gradientShift {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .code-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    background-image: linear-gradient(rgba(0, 23, 33, 0.725) 1px,
        transparent 1px),
      linear-gradient(90deg,
        rgba(0, 147, 209, 0.04) 1px,
        transparent 1px);
    background-size: 20px 20px;
    animation: scrollMatrix 40s linear infinite;
    opacity: 0.5;
    z-index: 0;
  }

  @keyframes scrollMatrix {
    0% {
      transform: translateY(0) translateX(0);
    }

    100% {
      transform: translateY(-100px) translateX(-100px);
    }
  }

  .tech-dots {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(#0093D1 1px, transparent 0);
    background-size: 40px 40px;
    opacity: 0.05;
    animation: driftDots 90s linear infinite;
    z-index: 1;
    pointer-events: none;
  }

  @keyframes driftDots {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(-100px, -100px);
    }
  }

  .code-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 300%;
    height: 300%;

    background-image:
      linear-gradient(rgba(73, 90, 97, 0.603) 1px, transparent 1px),
      linear-gradient(90deg, rgba(6, 97, 136, 0.684) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: matrixScroll 10s linear infinite;
    z-index: 0;
    opacity: 0.15;
  }

  @keyframes matrixScroll {
    0% {
      transform: translate(0, 0);
    }

    100% {
      transform: translate(-500px, -500px);
    }
  }



  /**
   * VIDEO
   */

  .video-card .card-title {
    --fs-3: 3.5rem;
  }



  /**
   * FOOTER
   */

  .footer-top .container {
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
  }

}





/**
 * responsive for larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-2: 4.5rem;

  }



  /**
   * REUSED STYLE
   */

  .container {
    max-width: 720px;
  }

  .scrollbar-item {
    min-width: calc(50% - 12.5px);
  }



  /**
   * HERO
   */



  .abs-img-1 {
    top: 140px;
    right: 50px;
  }



  /**
   * FOOTER
   */

  .footer-bottom .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .footer-bottom-list {
    margin-block-start: 0;
  }

}





/**
 * responsive for larger than 992px screen
 */

@media (min-width: 992px) {

  /**
   * REUSED STYLE
   */

  .container,
  .header .container {
    max-width: 960px;
  }



  /**
   * HEADER
   */

  .nav-open-btn,
  .nav-close-btn {
    display: none;
  }

  .header .btn {
    display: block;
  }

  .header {
    background-color: transparent;
    box-shadow: none;
    padding-block: 30px;
    transition: var(--transition-1);
  }

  .header.active {
    transform: translateY(-100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: linear-gradient(120deg, rgba(20, 20, 30, 0.459), rgba(10, 10, 20, 0.3));
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 20px rgba(0, 147, 209, 0.1);
    transition: all 0.4s ease;
    padding-block: 15px;
    box-shadow: var(--shadow-1);
    animation: slideIn 0.5s ease-in-out forwards;
  }

  @keyframes slideIn {
    0% {
      transform: translateY(-100%);
    }

    100% {
      transform: translateY(0);
    }
  }

  .header .container {
    gap: 30px;
  }

  .header .logo {
    color: var(--white);
  }

  .header.active .logo {
    color: var(--white);
  }

  .navbar,
  .navbar.active {
    all: unset;
    margin-inline-start: auto;
  }

  .navbar-list {
    display: flex;
    gap: 10px;
  }

  .navbar-link {
    font-size: unset;
    padding: 0 10px;
    margin-block-end: 0;
  }

  .header.active .navbar-link {
    color: var(--white);
  }

  .header .navbar-link:is(:hover, :focus, .active) {
    color: var(--primary-color);

  }

  .header.active .btn {
    background-color: var(--primary-color);
    color: var(--white);
  }

  .header.active .btn:is(:hover, :focus) {
    background-color: var(--rich-black-fogra-29-1);
  }



  /**
   * HERO
   */

  .hero {
    background-size: contain;
    text-align: left;
  }

  .hero::before {
    content: "";
    position: absolute;
    top: -1000px;
    left: -500px;
    width: 1500px;
    height: 1500px;
    background-image: radial-gradient(circle, var(--primary-color_20) 20%, transparent 70% 100%);
    z-index: -1;
  }

  .hero .container {

    align-items: center;
    justify-content: center;
  }

  .hero-content {
    padding-inline: 0;
    margin-block-end: 0;
  }

  .hero-subtitle,
  .hero .btn {
    margin-inline: 0;
  }

  .hero::after {
    width: 330px;
    height: 100%;
    left: auto;
    right: 0;
  }

  .hero {
    min-height: 100vh;
    /* Full screen height */
    display: flex;
    align-items: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  #home {
    transition: background-image 1s ease-in-out;
    background-size: cover;
    background-position: center;
  }

  /**
   * ABOUT
   */

  .about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
  }

  .about-banner {
    margin-block-end: 0;
  }

  .about .wrapper {
    gap: 30px;
  }



  /**
   * FOOTER
   */

  .footer-top .container {
    grid-template-columns: 0.85fr 0.5fr 1fr 0.85fr 1fr;
    column-gap: 30px;
  }

}





/**
 * responsive for larger than 1200px screen
 */

@media (min-width: 1200px) {

  /**
   * CUSTOM PROPERTY
   */

  :root {

    /**
     * typography
     */

    --fs-1: 7rem;
    --fs-2: 5.5rem;
    --fs-4: 2.2rem;
    --fs-5: 2rem;

    /**
     * spacing
     */

    --section-padding: 120px;

  }



  /**
   * REUSED STYLE
   */

  .container,
  .header .container {
    max-width: 1140px;
  }

  .btn {
    padding: 18px 45px;
    border-radius: var(--radius-10);
  }

  .section-subtitle {
    --fs-5: 4.2rem;
  }

  .has-scrollbar {
    gap: 30px;
  }

  .scrollbar-item {
    min-width: calc(33.33% - 20px);
  }



  /**
   * HEADER
   */

  .header .container {
    padding-inline: 0;
  }



  /**
   * HERO
   */

  .hero::after {
    width: 420px;
  }

  .hero .section-text {
    --fs-6: 1.8rem;
  }

  .abs-img-1 {
    top: 170px;
    right: -30px;
    width: 260px;
  }

  .abs-img-2 {
    bottom: 60px;
    left: -80px;
    width: 360px;
  }

  .Ourservices-text {
    color: var(--ourservices-text);
  }

  /**
   * ABOUT
   */

  .about .wrapper {
    gap: 40px;
  }



  /**
   * CLASS, BLOG
   */

  :is(.class-card, .blog-card) .card-content {
    padding: 30px;
  }

  .blog-card .card-meta {
    padding: 15px 30px;
  }



  /**
   * FOOTER
   */

  .footer-top .container {
    grid-template-columns: 1fr 0.6fr 0.9fr 1fr 1fr;
    column-gap: 10px;
  }

}

@media (max-width: 768px) {
  .modal-content {
    width: 90%;
    height: 90%;
  }
}

/* ========================================
   MOBILE RESPONSIVENESS - PRESERVING THEMES
   ======================================== */

/* Mobile Styles (480px and below) */
@media (max-width: 480px) {
  .container {
    padding-inline: 15px;
    max-width: 100%;
  }

  /* Header Mobile */
  .header .container {
    padding: 10px 15px;
    gap: 10px;
  }

  .navbar-logo {
    gap: 8px;
  }

  .navbar-logo span {
    font-size: 1rem !important;
    margin-left: 0.5rem !important;
  }

  .logo-only,
  .logo-only-2 {
    width: 35px;
    height: 35px;
  }

  .nav-open-btn {
    width: 35px;
    height: 35px;
  }

  .nav-open-btn .line {
    width: 20px;
    height: 2px;
  }

  .header .btn {
    padding: 8px 16px;
    font-size: 0.8rem;
  }

  /* Hero Mobile */
  .hero {
    min-height: 80vh;
    padding: 20px 0;
  }

  .hero-content {
    text-align: center;
    padding: 20px 15px;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 15px;
  }

  .hero-title {
    font-size: 2rem;
    line-height: 1.2;
    margin-bottom: 15px;
  }

  .hero .section-text {
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  .hero-services {
    font-size: 0.8rem;
  }

  /* About Mobile */
  .about-flex {
    flex-direction: column;
    gap: 30px;
  }

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

  .about-title {
    font-size: 1.8rem;
  }

  .about-features {
    gap: 15px;
  }

  .about-features li {
    font-size: 0.9rem;
    padding: 10px 15px;
  }

  /* Leadership Mobile */
  .vision-split {
    flex-direction: column;
    gap: 30px;
  }

  .vision-left {
    width: 100%;
  }

  .spotlight-rotator {
    height: 300px;
  }

  .rotator-item img {
    height: 200px;
  }

  .ceo-vision {
    padding: 15px;
  }

  .ceo-name {
    font-size: 1.2rem;
  }

  .vision-quote {
    font-size: 0.9rem;
  }

  .vision-right {
    width: 100%;
  }

  .team-heading {
    font-size: 1.5rem;
  }

  .mini-lead {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .mini-lead img {
    width: 60px;
    height: 60px;
  }

  /* Why Choose Us Mobile */
  .chose-up-container {
    text-align: center;
    padding: 20px 15px;
  }

  .chose-up-container p {
    font-size: 1.5rem;
  }

  .chose-up-container h2 {
    font-size: 1.8rem;
  }

  .carousel-wrapper {
    padding: 0 10px;
  }

  .carousel-track {
    gap: 15px;
  }

  .about-card {
    min-width: 250px;
    padding: 20px 15px;
  }

  .about-card h3 {
    font-size: 1.1rem;
  }

  .about-card p {
    font-size: 0.8rem;
  }

  .carousel-btn {
    width: 35px;
    height: 35px;
  }

  /* Projects Mobile */
  .projects-section {
    padding: 40px 15px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .project-card {
    height: 250px;
  }

  .hover-card .content {
    padding: 20px;
  }

  .hover-card .title {
    font-size: 1.3rem;
  }

  .hover-card .copy {
    font-size: 0.8rem;
  }

  /* Services Mobile */
  .sexy-services {
    padding: 40px 15px;
  }

  .services-carousel {
    gap: 15px;
  }

  .sexy-card {
    min-width: 280px;
    padding: 20px 15px;
  }

  .sexy-card h3 {
    font-size: 1.1rem;
  }

  .sexy-card p {
    font-size: 0.8rem;
  }

  .arrows {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  /* Events Mobile */
  .events-section {
    padding: 40px 15px;
  }

  .events-carousel-container {
    padding: 0 10px;
  }

  .events-track {
    gap: 15px;
  }

  .event-card {
    min-width: 280px;
  }

  .event-img {
    height: 180px;
  }

  .event-caption {
    font-size: 0.9rem;
  }

  .event-date {
    font-size: 0.8rem;
  }

  /* Testimonials Mobile */
  .testimonial-feature {
    padding: 40px 15px;
  }

  .testimonial-card-glass {
    min-width: 300px;
    padding: 20px 15px;
  }

  .split-layout {
    flex-direction: column;
    gap: 15px;
  }

  .testimonial-img-box {
    width: 80px;
    height: 80px;
  }

  .testimonial-img-box img {
    width: 60px;
    height: 60px;
  }

  .testimonial-text-box .quote {
    font-size: 0.9rem;
  }

  .testimonial-card-glass h3 {
    font-size: 1rem;
  }

  .testimonial-card-glass span {
    font-size: 0.8rem;
  }

  /* Courses Mobile */
  .popular-courses-section {
    padding: 40px 15px;
  }

  .popular-courses-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .popular-course-card {
    padding: 15px;
  }

  .course-thumb {
    height: 180px;
  }

  .course-title {
    font-size: 1.1rem;
  }

  .course-desc {
    font-size: 0.8rem;
  }

  .course-footer {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .instructor {
    gap: 10px;
  }

  .instructor img {
    width: 40px;
    height: 40px;
  }

  /* App Mobile */
  .app-section {
    padding: 40px 15px;
  }

  .app-layout {
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }

  .app-text-content .section-title {
    font-size: 1.8rem;
  }

  .app-text-content .section-description {
    font-size: 0.9rem;
  }

  .store-buttons {
    flex-direction: column;
    gap: 15px;
    align-items: center;
  }

  .store-btn {
    width: 100%;
    max-width: 250px;
    padding: 12px 20px;
  }

  .app-image {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  /* Blog Mobile */
  .blog {
    padding: 40px 15px;
  }

  .blog-list {
    gap: 20px;
  }

  .blog-card {
    padding: 15px;
  }

  .blog-card .card-banner {
    height: 180px;
  }

  .blog-card .card-title {
    font-size: 1.1rem;
  }

  .blog-card .card-text {
    font-size: 0.8rem;
  }

  /* Footer Mobile */
  .footer-top .container {
    grid-template-columns: 1fr;
    gap: 30px;
    text-align: center;
  }

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

  .footer-top .wrapper {
    justify-content: center;
  }

  .footer-list-item {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .footer-list-item .icon {
    margin: 0 auto;
  }

  .social-list {
    justify-content: center;
    gap: 15px;
  }

  .footer-bottom .container {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }

  /* Back to Top Mobile */
  .back-top-btn {
    width: 45px;
    height: 45px;
    right: 15px;
    bottom: 15px;
  }

  /* Modal Mobile */
  .modal-content {
    width: 95%;
    height: 95%;
    margin: 2.5%;
  }

  .modal-close-btn {
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
  }
}

/* Tablet Styles (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .container {
    padding-inline: 20px;
  }

  /* Header Tablet */
  .header .container {
    padding: 15px 20px;
  }

  .navbar-logo span {
    font-size: 1.2rem !important;
  }

  .logo-only,
  .logo-only-2 {
    width: 40px;
    height: 40px;
  }

  /* Hero Tablet */
  .hero-content {
    padding: 30px 20px;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  /* About Tablet */
  .about-flex {
    gap: 40px;
  }

  .about-title {
    font-size: 2rem;
  }

  /* Leadership Tablet */
  .vision-split {
    gap: 40px;
  }

  .spotlight-rotator {
    height: 350px;
  }

  .rotator-item img {
    height: 250px;
  }

  .mini-lead {
    gap: 15px;
  }

  .mini-lead img {
    width: 70px;
    height: 70px;
  }

  /* Projects Tablet */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  /* Services Tablet */
  .services-carousel {
    gap: 20px;
  }

  .sexy-card {
    min-width: 320px;
  }

  /* Events Tablet */
  .events-track {
    gap: 20px;
  }

  .event-card {
    min-width: 320px;
  }

  /* Testimonials Tablet */
  .testimonial-card-glass {
    min-width: 350px;
  }

  .split-layout {
    gap: 20px;
  }

  /* Courses Tablet */
  .popular-courses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }

  /* App Tablet */
  .app-layout {
    gap: 40px;
  }

  .store-buttons {
    flex-direction: row;
    justify-content: center;
    gap: 20px;
  }

  .store-btn {
    width: auto;
    max-width: none;
  }

  /* Blog Tablet */
  .blog-list {
    gap: 25px;
  }

  /* Footer Tablet */
  .footer-top .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}

/* Small Desktop (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    padding-inline: 30px;
  }

  /* Projects Small Desktop */
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* Services Small Desktop */
  .services-carousel {
    gap: 25px;
  }

  .sexy-card {
    min-width: 350px;
  }

  /* Events Small Desktop */
  .events-track {
    gap: 25px;
  }

  .event-card {
    min-width: 350px;
  }

  /* Testimonials Small Desktop */
  .testimonial-card-glass {
    min-width: 400px;
  }

  /* Courses Small Desktop */
  .popular-courses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }

  /* Footer Small Desktop */
  .footer-top .container {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .btn,
  .carousel-btn,
  .arrows,
  .nav-open-btn,
  .nav-close-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .navbar-link {
    padding: 12px 16px;
  }

  /* Improve scrolling */
  .services-carousel,
  .events-track,
  .ticker-track {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 60vh;
  }

  .hero-content {
    padding: 15px 20px;
  }

  .hero-title {
    font-size: 1.8rem;
  }

  .section {
    padding: 30px 15px;
  }

  .vision-split {
    flex-direction: row;
    gap: 20px;
  }

  .vision-left {
    width: 50%;
  }

  .vision-right {
    width: 50%;
  }

  .spotlight-rotator {
    height: 200px;
  }

  .rotator-item img {
    height: 150px;
  }
}