/* ================= GLOBAL RESET ================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* Firefox */
*{
  scrollbar-width: thin;
  scrollbar-color: #5b2d8b rgba(0,0,0,0.08);
}
::-webkit-scrollbar-track{
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(6px);
}

html {
  scroll-behavior: smooth;
}

body{
  font-family: "Inter", sans-serif;
  background: transparent;
  color: #111;
  overflow-x: hidden;

  /* REMOVE THESE */
  position: static;
  z-index: auto;
}

/* ================= COLORS SYSTEM ================= */

:root {
  --primary: #5b2d8b;      /* Purple (logo inspired) */
  --secondary: #00bcd4;    /* Cyan */
  --gold: #d4af37;         /* Gold */
  --dark: #0b1026;
  --light: #ffffff;
  --glass: rgba(255, 255, 255, 0.25);
  --gradient: linear-gradient(135deg, #5b2d8b, #00bcd4, #d4af37);
}

/* ================= MOBILE MENU BUTTON ================= */

.mobile-menu-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}

.mobile-menu-btn span {
  inline-size: 26px;
  block-size: 3px;
  background: linear-gradient(90deg,#d4af37,#00bcd4);
  border-radius: 4px;
  transition: 0.4s;
}
/* ================= MOBILE MENU PANEL ================= */

.mobile-menu {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: -100%;
  inline-size: 70%;
  block-size: 100vh;

  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(18px);

  display: flex;
  flex-direction: column;
  padding: 120px 40px;
  gap: 25px;

  transition: 0.5s ease;
  z-index: 9998;
}

.mobile-menu a {
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 600;
  color: #222;
}

/* OPEN STATE */
.mobile-menu.active {
  inset-inline-end: 0;
}

/* ================= MOBILE NAV RESPONSIVE ================= */

@media (max-width: 992px) {

  .nav-links {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
  }

}

/* ================= HERO VIDEO SECTION ================= */

.hero-video {
  position: relative;
  block-size: 100vh;
  inline-size: 100%;
  overflow: hidden;
}

.bg-video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;

  /* 🔥 Desktop cinematic crop */
  object-position: center center;

  transform: scale(1.15);
  filter: brightness(0.95) contrast(1.08) saturate(1.05);
}


/* overlay on video */
.hero-overlay {
  position: absolute;
  inset: 0;

  /* 🔥 Less fade — more cinematic */
  background:
    linear-gradient(
      180deg,
      rgba(0,0,0,0.35) 0%,
      rgba(0,0,0,0.25) 40%,
      rgba(0,0,0,0.45) 100%
    );

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.logo {
  inline-size:140px;
  margin-block-end:12px;
  animation: floatLogo 4s infinite ease-in-out;
}
@media(min-width:1200px){
  .logo{
    inline-size:180px;
  }
  @media(min-inline-size:1600px){
  .logo{
    inline-size:210px;
  }
}
}
.hero-title{
  font-family:"Sora",sans-serif;
  font-size:3.6rem;
  font-weight:800;

  background: linear-gradient(90deg,#ffffff,#d4af37,#00bcd4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
    text-shadow:
  0 0 10px rgba(212,175,55,0.25);
 /* text-shadow: 0 2px 6px rgba(0,0,0,0.25);*/
}
.hero-title{
  font-family:"Sora",sans-serif;
  font-size:3.6rem;
  font-weight:800;

  background: linear-gradient(90deg,#ffffff,#d4af37,#00bcd4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;

  transition: text-shadow 0.5s ease;
}

/* ⭐ MODE 1 — VIDEO MODE (Glow, No Dark Shadow) */
.hero-title.video-mode{
  text-shadow:
    0 0 12px rgba(212,175,55,0.35);
}

/* ⭐ MODE 2 — NORMAL MODE (Soft Shadow For Sections) */
.hero-title.normal-mode{
  text-shadow:
    0 2px 8px rgba(0,0,0,0.35),
    0 6px 18px rgba(0,0,0,0.25);
}

.hero-subtitle {
  margin-block-start: 14px;
  font-size: 1.15rem;
  color: #ffffff;
  text-shadow: 0 4px 15px rgba(0,0,0,0.8);
  font-weight: 500;
}


/* buttons */

.hero-buttons {
  margin-block-start: 30px;
  display: flex;
  gap: 15px;
}

.btn-primary,
.btn-outline {
  padding: 12px 28px;
  border-radius: 30px;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.4s ease;
  cursor: pointer;
}

.btn-primary {
  background: linear-gradient(90deg, #5b2d8b, #00bcd4);
  color: white;
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35);
}

.btn-outline {
  border: 2px solid #ffffff;
  color: #ffffff;
  background: rgba(0,0,0,0.25);
  backdrop-filter: blur(6px);
}

.btn-primary:hover {
  transform: translateY(-4px) scale(1.05);
}



.btn-outline:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-4px);
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 220px rgba(0,0,0,0.55);
  pointer-events: none;
}

/* ================= SECTION BASE STYLE ================= */

section {
  padding: 90px 8%;
}

h2 {
  font-family: "Sora", sans-serif;
  font-size: 2.4rem;
  margin-block-end: 25px;
  color: var(--dark);
  position: relative;
  text-align: center;   /* 🔥 CENTER TEXT */
}

h2::after {
  content: "";
  inline-size: 80px;
  block-size: 4px;
  background: var(--gradient);
  display: block;
  margin: 12px auto 0;   /* 🔥 CENTER LINE */
  border-radius: 10px;
}
/* ================= ABOUT SECTION ================= */

.about{
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(4px);
}


.about-image img {
  inline-size: 100%;
  border-radius: 25px;
  box-shadow: 0 25px 60px rgba(0,0,0,0.15);
  transition: 0.6s;
}

.about-image img:hover {
  transform: rotateY(12deg) rotateX(6deg) scale(1.03);
}

.about-content p {
  margin-block-start: 12px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #333;
}

/* ================= BRAND SECTION ================= */

/* ================= ABOUT ASTROVAFIT DARK SECTION ================= */

.brand {
  background: linear-gradient(135deg,#0b1026,#050814);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: 90px 8%;
}

/* ===== Premium Glow Texture ===== */
.brand::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 25%, rgba(0,188,212,0.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(212,175,55,0.08), transparent 45%);
  pointer-events:none;
}

/* ===== Heading ===== */
.brand h2{
  color:white;
}

/* ===== Paragraph Text ===== */
.brand p{
  color:#e4e9ff;
  max-inline-size: 750px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ================= BRAND GRID ================= */

.brand-grid {
  margin-block-start: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* ================= BRAND CARDS ================= */

.brand-card {
  padding: 28px;
  border-radius: 20px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);

  color:#e6ecff;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.6),
    inset 0 0 0 1px rgba(255,255,255,0.05);

  transition: all 0.45s ease;
}

/* ===== Hover ===== */
.brand-card:hover{
  transform: translateY(-10px) scale(1.03);
  background: rgba(0,188,212,0.12);

  box-shadow:
    0 30px 80px rgba(0,0,0,0.75),
    0 0 40px rgba(0,188,212,0.25);
}

/* ================= MOBILE ================= */

@media(max-width:900px){

  .brand{
    padding: 70px 6%;
  }

}

@media(max-width:600px){

  .brand-grid{
    gap: 18px;
  }

  .brand-card{
    padding: 22px;
  }

}

/* ================= SERVICES ================= */

.services{
  background: linear-gradient(
    135deg,
    rgba(248,249,255,0.92),
    rgba(255,255,255,0.92)
  );
}

.services-grid {
  margin-block-start: 40px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

.service-card {
  padding: 28px;
  border-radius: 22px;
  background: white;
  box-shadow: 0 15px 50px rgba(0,0,0,0.1);
  transition: 0.5s;
  transform-style: preserve-3d;
}

.service-card:hover {
  transform: rotateY(12deg) rotateX(6deg) scale(1.05);
  background: linear-gradient(135deg, #ffffff, #f1f4ff);
}

/* ================= YOGA SECTION ================= */

/* ================= YOGA & MINDFULNESS DARK SECTION ================= */

.yoga {
  background: linear-gradient(135deg,#0b1026,#050814);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* ===== Premium Glow Texture ===== */
.yoga::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 25%, rgba(0,188,212,0.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(212,175,55,0.08), transparent 45%);
  pointer-events:none;
}

/* ===== Heading ===== */
.yoga h2{
  color:white;
}

/* ===== LIST CONTAINER ===== */
.yoga-list {
  margin-block-start: 40px;
  max-inline-size: 900px;
  margin-inline-start: auto;
  margin-inline-end: auto;

  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  list-style: none;
  padding: 0;
}

/* ===== LIST ITEMS ===== */
.yoga-list li {

  padding: 16px 22px;
  border-radius: 14px;

  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);

  color:#e6ecff;
  text-align: start;

  border-inline-start: 4px solid #00bcd4;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.05);

  transition: all 0.35s ease;
}

/* ===== HOVER ===== */
.yoga-list li:hover{
  transform: translateX(6px);
  background: rgba(0,188,212,0.12);
  border-inline-start-color: #d4af37;
}

/* ===== BULLET CUSTOM DOT ===== */
.yoga-list li::marker{
  color:#00bcd4;
}

/* ===== RESPONSIVE ===== */

@media(max-width:768px){

  .yoga-list{
    max-inline-size: 100%;
  }

  .yoga-list li{
    font-size: 14px;
    padding: 14px 16px;
  }

}

/* ================= CORPORATE SECTION ================= */

.corporate{
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.92),
    rgba(247,249,255,0.92)
  );
}

.corporate-grid {
  margin-block-start: 35px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.corp-card {
  padding: 22px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  transition: 0.4s;
}

.corp-card:hover {
  transform: translateY(-8px);
  background: linear-gradient(135deg, #ffffff, #eef4ff);
}

/* ================= IMPACT SECTION ================= */

.impact {
  background: var(--dark);
  color: white;
}

.impact h2 {
  color: white;
}

.impact-grid {
  margin-block-start: 35px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.impact-grid div {
  padding: 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
  transition: 0.4s;
}

.impact-grid div:hover {
  transform: scale(1.05);
  background: rgba(0,188,212,0.2);
}

/* ================= CONTACT SECTION ================= */

.contact{
  background: rgba(255,255,255,0.95);
  text-align: center;
}

.contact form {
  margin: 30px auto 0;
  max-inline-size: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.contact input,
.contact textarea {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #ddd;
  font-size: 0.95rem;
  transition: 0.3s;
}

.contact input:focus,
.contact textarea:focus {
  border-color: var(--primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(91,45,139,0.15);
}

.contact button {
  margin-block-start: 10px;
  padding: 14px;
  border-radius: 30px;
  border: none;
  background: var(--gradient);
  color: white;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.4s;
}

.contact button:hover {
  transform: scale(1.05);
}

/* ================= FLOATING WHATSAPP ================= */

.whatsapp-float {
  position: fixed;
  inset-inline-end: 22px;
  inset-block-end: 28px;
  background: #25d366;
  color: white;
  font-size: 26px;
  padding: 14px 16px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  animation: floatBtn 2.5s infinite ease-in-out;
  z-index: 1000;
}

@keyframes floatBtn {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ================= ANIMATIONS ================= */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes glowText {
  from { filter: drop-shadow(0 0 5px rgba(0,188,212,0.4)); }
  to { filter: drop-shadow(0 0 20px rgba(212,175,55,0.6)); }
}

@keyframes floatLogo {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {

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

  section {
    padding: 70px 6%;
  }
}

@media (max-width: 500px) {
  .hero-title {
    font-size: 2.1rem;
  }

  .hero-buttons {
    flex-direction: column;
  }
}
/* ================= TESTIMONIALS ================= */

.testimonials {
  background: linear-gradient(135deg, #ffffff, #f7f9ff);
  text-align: center;
}

.testimonial-slider {
  margin-block-start: 40px;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: 10px;
}

.testimonial-card {
  min-inline-size: 300px;
  padding: 25px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
  scroll-snap-align: center;
  transition: 0.4s;
}

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

/* ================= YOUTUBE SECTION ================= */

.youtube {
  background: #ffffff;
  text-align: center;
}

.youtube-container {
  margin-block-start: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.youtube iframe {
  inline-size: 80%;
  max-inline-size: 700px;
  block-size: 380px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* ================= ARTICLES ================= */

.articles{
  background: rgba(255,255,255,0.94);
}

.articles-grid {
  margin-block-start: 40px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

.article-card {
  padding: 26px;
  border-radius: 18px;
  background: white;
  box-shadow: 0 15px 45px rgba(0,0,0,0.1);
  transition: 0.4s;
}

.article-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 70px rgba(0,188,212,0.25);
}

.article-link {
  display: inline-block;
  margin-block-start: 10px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

/* ================= ARTICLES MOBILE PDF PERFECT FIT ================= */

@media (max-width: 600px){

  .articles-grid{
    grid-template-columns: 1fr;
  }

  .article-card{
    padding: 16px;
  }

  .pdf-viewer{ inline-size: 100%; block-size: 65vw; /* ⭐ Responsive height based on screen */ min-block-size: 240px; max-block-size: 380px; border-radius: 12px; background: #f5f5f5; }

}

/* ================= FOOTER ================= */

.footer {
  background: var(--dark);
  color: white;
  padding: 70px 8% 20px;
}

.footer-container{
  max-inline-size: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

@media(min-width:1600px){

  .footer-container{
    max-inline-size: 1100px;
  }

}

.footer h3, .footer h4 {
  margin-block-end: 12px;
}

.footer-links a,
.footer-social a {
  display: block;
  color: #ddd;
  text-decoration: none;
  margin: 6px 0;
  transition: 0.3s;
}

.footer-links a:hover,
.footer-social a:hover {
  color: var(--secondary);
}

.footer-bottom {
  margin-block-start: 40px;
  text-align: center;
  font-size: 0.9rem;
  color: #aaa;
  border-block-start: 1px solid rgba(255,255,255,0.1);
  padding-block-start: 15px;
}
/* ================= LUXURY NAVBAR ================= */

.lux-navbar {
  position: fixed;
  inset-block-start: 0;
  inline-size: 100%;
  padding: 12px 6%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(18px);

  border-block-end: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 25px rgba(0,0,0,0.08);

  z-index: 9999;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: "Sora", sans-serif;
  font-weight: 700;
  font-size: 1.2rem;
}

.nav-logo img {
  inline-size: 36px;
}

.nav-links a {
  margin: 0 14px;
  text-decoration: none;
  color: #111;
  font-weight: 600;
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  inline-size: 0%;
  block-size: 2px;
  background: var(--gradient);
  inset-inline-start: 0;
  inset-block-end: -6px;
  transition: 0.3s;
}

.nav-links a:hover::after {
  inline-size: 100%;
}

.nav-btn {
  padding: 10px 22px;
  border-radius: 25px;
  background: var(--gradient);
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  transition: 0.3s;
  font-weight: 600;
}

.nav-btn:hover {
  transform: scale(1.05);
}


.nav-logo span{
  color:#111;
}

/* ================= CURSOR GLOW EFFECT ================= */

.cursor-glow {
  position: fixed;
  inline-size: 120px;
  block-size: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,188,212,0.25), transparent 60%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 999;
}
/* ================= LOGO SLIDER ================= */

.logos {
  background: rgba(255,255,255,0.95);
  text-align: center;
  overflow: hidden;
}

.logo-slider {
  margin-block-start: 30px;
  inline-size: 100%;
  overflow: hidden;
}

.logo-track {
  display: flex;
  gap: 60px;
  inline-size: max-content;
  animation: scrollLogos 18s linear infinite;
}
.logo-track img {
  block-size: 60px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s;
}

.logo-track img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.1);
}

@keyframes scrollLogos {

  0% {
    transform: translateX(0);
  }

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

}
@media(max-width:600px){

  .logo-track{
    animation: scrollLogos 12s linear infinite;
    gap: 40px;
  }

}
.logo-track img{
  block-size: 60px;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: 0.3s;

  padding-inline-end: 25px;
  border-inline-end: 1px solid rgba(0,188,212,0.15);
}
.logo-track img:last-child{
  border-inline-end: none;
}
@media(max-width:600px){

  .logo-track img{
    block-size: 45px;
  }

}
/* ================= TIMELINE ================= */

.timeline {
  background: rgba(255,255,255,0.95);
  text-align: center;
}

.timeline-container {
  margin-block-start: 40px;
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.timeline-item {
  padding: 25px;
  border-radius: 20px;
  background: white;
  box-shadow: 0 20px 50px rgba(0,0,0,0.12);
  transition: 0.4s;
  transform-style: preserve-3d;
}

.timeline-item:hover {
  transform: rotateY(15deg) rotateX(10deg) scale(1.05);
}

.timeline-item span {
  font-family: "Sora", sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
}
.hero-video::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 180px rgba(0,0,0,0.45);
  pointer-events: none;
}
section {
  padding: 90px 8%;
  position: relative;
}

/* 🔥 Section Divider Glow Line */
section::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 10%;
  inline-size: 80%;
  block-size: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,188,212,0.25),
    transparent
  );
}
/* ================= LARGE SCREEN ================= */

@media (min-width: 1600px) {

  body {
    font-size: 18px;
  }

 section {
  padding: 90px 8%;
  position: static;
}
  .hero-title {
    font-size: 4.5rem;
  }

}

/* ================= TABLET ================= */

@media (max-width: 992px) {

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

  .nav-links {
    display: none;
  }


  .hero-buttons {
    justify-content: center;
  }

}

/* ================= MOBILE ================= */

@media (max-width: 600px) {

  section {
    padding: 60px 5%;
  }

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

  .hero-subtitle {
    font-size: 0.95rem;
  }

  .hero-buttons {
    flex-direction: column;
    inline-size: 100%;
  }

  .btn-primary,
  .btn-outline {
    inline-size: 100%;
    text-align: center;
  }

  .youtube iframe {
    inline-size: 100%;
    block-size: 240px;
  }

}




@media (min-width: 1200px){

  .hero-video{
    block-size: 100vh;
  }

  .bg-video{
    transform: scale(1.25);
    object-position: center 40%;
  }

}


/* HERO VIDEO CINEMATIC FLOAT */


@media (max-width:768px){

  .bg-video{
    transform: scale(1.08);
    object-position: center 30%;
  }

}
.hero-video{
  margin-block-start: 10px;
}
/* =====================================================
   YOUTUBE SECTION – FULL FINAL PRODUCTION CSS
===================================================== */

.youtube{
  background: linear-gradient(135deg,#0b1026,#050814);
  color:#fff;
  text-align:center;
  position:relative;
  overflow:hidden;
  padding:90px 6%;
}

/* ===== BACKGROUND GLOW ===== */

.youtube::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,188,212,.08), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(212,175,55,.08), transparent 45%);
  pointer-events:none;
}

/* ================= HEADING ================= */

.youtube h2{
  color:#ffffff;
  font-weight:700;
  margin-block-end:25px;
}

/* ================= VIDEO GRID ================= */

.youtube-grid{
  display:grid;

  /* Desktop = 3 + 3 layout for 6 videos */
  grid-template-columns: repeat(3, 1fr);

  gap:32px;
  inline-size:100%;
  margin-block-start:50px;
}

/* ================= VIDEO CARD ================= */

.yt-card{
  inline-size:100%;
  border-radius:18px;
  overflow:hidden;
  background:#000;

  box-shadow:
    0 25px 60px rgba(0,0,0,.6);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.yt-card:hover{
  transform: translateY(-8px);
  box-shadow:
    0 35px 90px rgba(0,0,0,.8),
    0 0 35px rgba(0,188,212,.25);
}

/* ================= IFRAME ================= */

.yt-card iframe{
  inline-size:100%;
  aspect-ratio:16/9;
  border:none;
  display:block;
}

/* ================= BUTTON SPACING ================= */

.youtube-btn-wrap{
  margin-block-start:70px;
  display:flex;
  justify-content:center;
}

/* ================= BUTTON STYLE ================= */

.youtube-main-btn{
  padding:14px 34px;
  border-radius:30px;
  font-size:15px;
}

/* =====================================================
   MEDIA QUERIES
===================================================== */

/* ===== LARGE DESKTOP ===== */
@media(min-width:1600px){

  .youtube{
    padding:110px 8%;
  }

  .youtube-grid{
    gap:40px;
  }

}

/* ===== LAPTOP ===== */
@media(max-width:1200px){

  /* 2 column layout */
  .youtube-grid{
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ===== TABLET ===== */
@media(max-width:768px){

  .youtube{
    padding:70px 5%;
  }

  /* Single column */
  .youtube-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .youtube-btn-wrap{
    margin-block-start:55px;
  }

}

/* ===== SMALL MOBILE ===== */
@media(max-width:480px){

  .youtube{
    padding:60px 4%;
  }

  .youtube h2{
    font-size:22px;
  }

}

/* ===== STRONG CINEMATIC START ===== */

.yt-card{
  opacity:0;

  transform:
    perspective(1600px)
    translateY(220px)
    rotateX(45deg)
    scale(0.6);

  filter: blur(18px) brightness(0.6);

  transition:
    transform 1.4s cubic-bezier(.16,1,.3,1),
    opacity 1s ease,
    filter 1s ease;
}

/* ===== FINAL ===== */

.yt-card.show{
  opacity:1;

  transform:
    perspective(1600px)
    translateY(0)
    rotateX(0deg)
    scale(1);

  filter: blur(0) brightness(1);
}
/* MOBILE MENU LINK UNDERLINE ACTIVE */

.mobile-menu a{
  position: relative;
  padding-block-end: 4px;
}

.mobile-menu a.active::after{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-end:-4px;
  inline-size:100%;
  block-size:2px;
  background: linear-gradient(90deg,#5b2d8b,#00bcd4);
}
/* ================= ULTRA MOBILE TEXT CONTROL ================= */

@media (max-width: 600px) {

  body{
    font-size: 14px;
  }

  h1, .hero-title{
    font-size: 1.8rem !important;
    line-height: 1.2;
  }

  h2{
    font-size: 1.6rem !important;
  }

  h3{
    font-size: 1.3rem !important;
  }

  p{
    font-size: 0.95rem;
    line-height: 1.6;
  }

  .hero-subtitle{
    font-size: 0.9rem;
  }

  .btn-primary,
  .btn-outline{
    font-size: 0.85rem;
    padding: 10px 18px;
  }

}
@media (max-width: 400px){

  h1, .hero-title{
    font-size: 1.6rem !important;
  }

  h2{
    font-size: 1.4rem !important;
  }

  p{
    font-size: 0.9rem;
  }

}

@media(max-width:600px){

  .lux-navbar{
    padding:10px 4%;
  }

  .nav-logo span{
    font-size:0.9rem;
  }

  .nav-logo img{
    inline-size:28px;
  }

  .nav-btn{
    padding:8px 14px;
    font-size:0.75rem;
  }

}
.lux-navbar.scrolled{
  padding:8px 6%;
  background:rgba(255,255,255,0.98);
}
.service-card,
.corp-card,
.article-card,
.timeline-item{
  background:white;
}
section{
  scroll-margin-top: 100px;
}
@media(max-width:600px){
  section{
    scroll-margin-top: 80px;
  }
}




.social-icons{
  display:flex;
  gap:18px;
  margin-block-start:10px;
}

.social-icons a{
  inline-size:42px;
  block-size:42px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(255,255,255,0.08);
  color:white;
  font-size:18px;

  transition:.35s;
}

/* HOVER COLORS */

.social-icons .ig:hover{
  background:#E1306C;
}

.social-icons .fb:hover{
  background:#1877F2;
}

.social-icons .li:hover{
  background:#b6ddf3;
}

.social-icons .yt:hover{
  background:#FF0000;
}
@media(max-width:600px){

  .footer{
    text-align:center;
  }

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

  .social-icons{
    justify-content:center;
  }

}


.pdf-viewer{
  inline-size:100%;
  block-size:320px;
  border:none;
  border-radius:12px;
  margin-block-start:10px;
}

.pdf-card{
  padding:20px;
}

/* body{
  cursor:
  url("../assets/logo/cursor.png") 16 16,
  auto;
}
a,
button,
.btn-primary,
.btn-outline,
.nav-btn {
  cursor: url("../assets/logo/cursor.png") 16 16, pointer;
}
 */


/* ================= REVIEWS FINAL PRODUCTION ================= */

.reviews{
  background: linear-gradient(135deg,#0b1026,#050814);
  color:#fff;
  text-align:center;
  padding:90px 8%;
}

.reviews h2{
  color:#fff !important;
}

/* ================= SLIDER ================= */

.reviews-slider{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto;
  padding-block-end:14px;
  -webkit-overflow-scrolling:touch;
}

/* ================= TRACK ================= */

.reviews-track{
  display:flex;
  gap:28px;
  padding:6px 4px;
}

/* ================= CARD ================= */

.review-card{
  flex:0 0 auto;
  inline-size:320px;

  padding:24px;
  border-radius:18px;

  background: rgba(255,255,255,.05);
  backdrop-filter: blur(12px);

  box-shadow:
    0 18px 55px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.05);

  display:flex;
  flex-direction:column;

  backface-visibility:hidden;
  perspective:1000px;
}

/* ================= IMAGE ================= */

.review-img{
  inline-size:72px;
  block-size:72px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto 14px;
  border:3px solid #00bcd4;
}

/* ================= TEXT ================= */

.review-text{
  line-height:1.6;
  font-size:14.5px;
  color:#e4e9ff;
  margin-block-end:16px;
}

/* ================= READ BUTTON ================= */

.review-read{
  display:none;
}

/* ================= BOTTOM INFO ================= */

.review-bottom{
  margin-block-start:auto;
  padding-block-start:12px;
  border-block-start:1px solid rgba(255,255,255,.1);
}

.review-name{
  font-size:15px;
  font-weight:600;
}

.review-company{
  font-size:12px;
  color:#00bcd4;
}

/* ================= MOBILE ================= */

@media(max-width:600px){

  .reviews-slider{
    scroll-snap-type:x mandatory;
  }

  .reviews-track{
    gap:18px;
    padding:8px 6px;
  }

  .review-card{
    inline-size:85vw;
    flex:0 0 85vw;

    scroll-snap-align:center;

    backdrop-filter:none;
    background: rgba(20,25,55,0.85);
  }

  .review-text{
    max-block-size:7.5em;
    overflow:hidden;
  }

  .review-text.expanded{
    max-block-size:none;
  }

  .review-read{
    display:inline-block;
    color:#00bcd4;
    font-size:13px;
    cursor:pointer;
    margin-block-start:6px;
  }

}
.review-company{
  display:block;
  font-size:13px;
  color:#00bcd4;
  margin-block-start:2px;
}

.review-role{
  display:block;
  font-size:11.5px;
  color:#aab3ff;
  opacity:0.9;
}

/* Tablet */
@media (max-width: 992px) {
  .brand-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .brand-grid {
    grid-template-columns: 1fr;
  }
}
/* Tablet */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .services-grid {
    grid-template-columns: 1fr;
  }
}
/* Tablet */
@media (max-width: 992px) {
  .corporate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 600px) {
  .corporate-grid {
    grid-template-columns: 1fr;
  }
}
.about-container {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 768px) {
  .about-container {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.seo-hidden {
  position: absolute;
  inset-inline-start: -9999px;
}