/* ============================================================
   EXAMVIBE - Final Optimized Homepage CSS (No Design Change)
   ============================================================ */

/* ---------- Global ---------- */
:root {
  --primary:#0d6efd;
  --secondary:#00bcd4;
  --dark:#0f172a;
  --light-bg:#f8f9fa;
  --gradient:linear-gradient(135deg,#0d6efd,#0056b3);
  --radius:12px;
  --shadow-sm:0 3px 10px rgba(0,0,0,.08);
  --shadow:0 6px 20px rgba(0,0,0,.10);
}

body{
  font-family:'Poppins',Arial,sans-serif;
  margin:0;padding:0;
  background:var(--light-bg);
  color:#222;
  scroll-behavior:smooth;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

.page-container{
  padding:20px;
  max-width:1200px;
  margin:auto;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section-dark{
  background:linear-gradient(120deg,#0f172a,#1e293b);
  padding:80px 20px;
  color:#f1f5f9;
  position:relative;
  text-align:left;
  overflow:hidden;
}

/* Background blobs: optimized for GPU */
.hero-section-dark::before,
.hero-section-dark::after{
  content:"";
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  animation:floatLight 10s ease-in-out infinite alternate;
  will-change:transform;
}
.hero-section-dark::before{width:150px;height:150px;top:8%;left:10%;}
.hero-section-dark::after{width:220px;height:220px;bottom:8%;right:10%;}

@keyframes floatLight{
  0%{transform:translate3d(0,0,0);}
  100%{transform:translate3d(0,-18px,0);}
}

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

.hero-text{
  flex:1;
  animation:fadeInLeft .7s ease-out forwards;
}
.hero-text h1{
  font-size:2.8rem;
  font-weight:700;
  margin-bottom:20px;
  color:#fff;
}
.hero-text p{
  font-size:1.1rem;
  line-height:1.6;
  color:#cbd5e1;
  margin-bottom:25px;
}

/* CTA – optimized hover without layout shift */
.btn-cta{
  display:inline-block;
  padding:14px 32px;
  background:var(--gradient);
  color:#fff;
  border-radius:10px;
  font-size:1rem;
  font-weight:600;
  text-decoration:none;
  position:relative;
  transition:transform .25s ease, box-shadow .25s ease;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.btn-cta::after{
  content:"";
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:rgba(255,255,255,.18);
  transition:transform .45s ease;
}
.btn-cta:hover::after{transform:translateX(100%);}
.btn-cta:hover{
  transform:translateY(-4px);
  box-shadow:0 0 20px rgba(13,110,253,.6);
}

.hero-image{
  flex:1;
  text-align:center;
  animation:fadeInRight .7s ease-out forwards;
}
.hero-image img{
  max-width:100%;
  height:auto;
  animation:floatHero 3s ease-in-out infinite;
  will-change:transform;
}
@keyframes floatHero{
  0%,100%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(0,-10px,0);}
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-us-section{
  background:#fff;
  padding:80px 20px;
  text-align:center;
}

.about-us-section h2{
  font-size:2.2rem;
  margin-bottom:25px;
  font-weight:700;
  color:var(--primary);
}

.about-us-section p{
  max-width:850px;
  margin:0 auto 35px;
  font-size:1.1rem;
  line-height:1.7;
  color:#444;
}

/* Cards optimized for CLS: stable height */
.about-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:22px;
}

.about-box{
  background:#fff;
  border-radius:var(--radius);
  padding:30px 25px;
  width:320px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease, box-shadow .25s ease;
}
.about-box:hover{
  transform:translateY(-6px);
  box-shadow:0 10px 22px rgba(13,110,253,.22);
}

.about-box i{
  font-size:40px;
  color:var(--primary);
  margin-bottom:12px;
  transition:transform .25s ease;
}
.about-box:hover i{transform:scale(1.12);}

.about-box h3{
  font-size:1.2rem;
  margin-bottom:10px;
}

.about-box p{
  font-size:.95rem;
  color:#555;
}

/* ============================================================
   CATEGORY SECTION
   ============================================================ */
.section{
  margin:70px auto;
  max-width:1200px;
  text-align:center;
}

.section h2{
  font-size:2rem;
  font-weight:700;
  margin-bottom:15px;
  color:var(--primary);
  display:inline-block;
  position:relative;
}

.section h2::after{
  content:"";
  height:3px;
  width:50%;
  background:var(--gradient);
  display:block;
  margin:8px auto 0;
  border-radius:2px;
}

.box-container{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
  justify-content:center;
}

/* CLS-SAFE small boxes */
.small-box{
  flex:1 1 240px;
  padding:28px 20px;
  background:#f5f5f5;
  border-radius:var(--radius);
  text-decoration:none;
  color:#333;
  transition:transform .25s ease, background .25s ease, color .25s ease;
  box-shadow:var(--shadow-sm);
}
.small-box:hover{
  transform:translateY(-5px);
  background:var(--primary);
  color:#fff;
}

/* ============================================================
   REVIEWS SECTION — optimized animations
   ============================================================ */
.reviews-slider{
  background:#f1f6ff;
  padding:80px 20px;
  text-align:center;
  overflow:hidden;
}

.review-track{
  display:flex;
  gap:25px;
  animation:scrollReviews 18s linear infinite;
  will-change:transform;
}

@keyframes scrollReviews{
  0%{transform:translate3d(0,0,0);}
  100%{transform:translate3d(-50%,0,0);}
}

.reviews .review-box{
  background:#fff;
  padding:22px 18px;
  border-radius:var(--radius);
  min-width:280px;
  max-width:340px;
  box-shadow:var(--shadow-sm);
  transition:transform .25s ease;
  font-style:italic;
}
.reviews .review-box:hover{
  transform:translateY(-5px);
}

/* ============================================================
   ANIMATIONS (GPU-optimized)
   ============================================================ */
@keyframes fadeInLeft{
  0%{opacity:0;transform:translate3d(-25px,0,0);}
  100%{opacity:1;transform:translate3d(0,0,0);}
}
@keyframes fadeInRight{
  0%{opacity:0;transform:translate3d(25px,0,0);}
  100%{opacity:1;transform:translate3d(0,0,0);}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:992px){
  .hero-content{flex-direction:column;text-align:center;gap:20px;}
  .hero-text h1{font-size:2.2rem;}
  .about-box{width:45%;}
  .small-box{flex:1 1 45%;}
}

@media (max-width:600px){
  .hero-section-dark{padding:55px 15px;text-align:center;}
  .hero-text h1{font-size:1.8rem;line-height:1.4;}
  .btn-cta{padding:12px 22px;font-size:.9rem;}
  .about-box{width:100%;padding:20px;}
  .section h2{font-size:1.6rem;}
  .small-box{flex:1 1 100%;}
  .reviews .review-box{min-width:90%;}
}