/* =========================
   GLOBAL STYLE
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:'Poppins', sans-serif;
  background:#f5f8fc;
  color:#1f2937;
  overflow-x:hidden;
  line-height:1.8;
}

/* =========================
   CONTAINER
========================= */
.container{
  width:100%;
  max-width:1200px;
  margin:auto;
}

/* =========================
   NAVBAR
========================= */
.navbar{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 7%;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(15px);
  box-shadow:0 4px 20px rgba(0,0,0,0.05);
  z-index:999;
  transition:0.3s ease;
}

/* Logo */
.logo{
  display:flex;
  align-items:center;
  gap:14px;
}

.logo-img{
  width:60px;
  height:60px;
  object-fit:cover;
  border-radius:50%;
  border:2px solid #dbe7f4;
}

.logo-text h1{
  font-size:24px;
  color:#12376b;
  font-weight:800;
  margin:0;
}

.logo-text p{
  font-size:12px;
  color:#12376b;
  margin-top:2px;
}

/* =========================
   NAVIGATION
========================= */
nav ul{
  display:flex;
  align-items:center;
  gap:35px;
  list-style:none;
}

nav li{
  position:relative;
}

nav a{
  text-decoration:none;
  color:#12376b;
  font-weight:600;
  font-size:15px;
  transition:0.3s ease;
  position:relative;
  padding-bottom:5px;
}

nav a:hover,
nav a.active{
  color:#5d9ce0;
}

/* Underline */
nav a::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:#5d9ce0;
  transition:0.3s ease;
}

nav a:hover::after,
nav a.active::after{
  width:100%;
}

/* =========================
   DROPDOWN
========================= */
.dropdown-content{
  position:absolute;
  top:130%;
  left:0;
  min-width:220px;
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,0.08);
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:0.3s ease;
}

.dropdown-content li{
  border-bottom:1px solid #f1f1f1;
}

.dropdown-content li:last-child{
  border:none;
}

.dropdown-content a{
  display:block;
  padding:14px 18px;
  font-size:14px;
}

.dropdown-content a:hover{
  background:#f7f9fc;
}

.dropdown:hover .dropdown-content{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* =========================
   HERO SECTION
========================= */
.hero{
  position:relative;
  width:100%;
  min-height:100vh;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:130px 8%;
  background:#7da1c3;
}

/* Background image */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      90deg,
      rgba(125,161,195,0.96) 0%,
      rgba(125,161,195,0.90) 45%,
      rgba(125,161,195,0.45) 72%,
      rgba(125,161,195,0.05) 100%
    ),
    url('image/Logo.jpeg') right center/cover no-repeat;
  z-index:1;
}

/* Blur effect */
.hero::after{
  content:'';
  position:absolute;
  top:0;
  right:35%;
  width:280px;
  height:100%;
  background:linear-gradient(
    to right,
    rgba(125,161,195,0.95),
    rgba(125,161,195,0)
  );
  filter:blur(30px);
  z-index:2;
}

.hero-overlay{
  position:relative;
  z-index:3;
  max: width 1200px;
  color:white;
  animation:fadeUp 1.2s ease;
}

.hero-overlay h3{
  color:#D0A239;
  letter-spacing:4px;
  text-transform:uppercase;
  font-size:14px;
  font-weight:600;
}

.hero h1{
  font-size:78px;
  line-height:1.1;
  font-weight:600;
  font-family:Georgia, serif;
  margin-bottom:25px;
}

.hero p{
  font-size:24px;
  font-style:italic;
  margin-bottom:22px;
  font-weight:300;
}

/* =========================
   BUTTON
========================= */
.btn-daftar{
  display:inline-block;
  margin-top:25px;
  padding:15px 38px;
  border-radius:50px;
  background:white;
  color:#12376b;
  text-decoration:none;
  font-weight:700;
  transition:0.3s ease;
  box-shadow:0 8px 25px rgba(0,0,0,0.12);
}

.btn-daftar:hover{
  transform:translateY(-4px);
  background:#12376b;
  color:white;
}

/* =========================
   SECTION STYLE
========================= */
.about-section,
.history-section,
.team-section,
.admission-section{
  padding:110px 8%;
}

.team-section{
  background:#f1f6fc;
}

.about-container,
.history-container,
.team-container{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:70px;
  flex-wrap:wrap;
}

.about-text,
.history-text,
.team-text{
  flex:1;
  min-width:320px;
}

.about-text h2,
.history-text h2,
.team-text h2,
.team-members h2,
.admission-title{
  font-size:44px;
  color:#12376b;
  margin-bottom:25px;
  font-weight:800;
  line-height:1.2;
}

.about-text h3,
.history-text h3{
  color:#12376b;
  margin-bottom:15px;
  font-size:24px;
}

.about-text p,
.history-text p,
.team-text p{
  color:#555;
  font-size:17px;
}

/* =========================
   SECTION TAG
========================= */
.section-tag{
  display:inline-block;
  padding:8px 18px;
  background:#dce8f6;
  color:#12376b;
  border-radius:50px;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:20px;
}

/* =========================
   VISION MISSION CARD
========================= */
.vision-card,
.mission-card{
  background:white;
  padding:38px;
  border-radius:28px;
  margin-top:30px;
  box-shadow:0 10px 35px rgba(0,0,0,0.05);
}

.vision-card h3,
.mission-card h3{
  color:#12376b;
  margin-bottom:20px;
  font-size:28px;
}

.mission-item{
  display:flex;
  align-items:flex-start;
  gap:18px;
  margin-bottom:28px;
}

.mission-item:last-child{
  margin-bottom:0;
}

.mission-item span{
  min-width:52px;
  height:52px;
  border-radius:50%;
  background:#12376b;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:16px;
}

.mission-item p{
  margin:0;
  color:#555;
}

/* =========================
   HISTORY LIST
========================= */
.history-list{
  margin-top:20px;
  padding-left:20px;
}

.history-list li{
  margin-bottom:12px;
  color:#444;
}

/* =========================
   IMAGES
========================= */
.about-image,
.history-image,
.team-image{
  flex:1;
  min-width:320px;
}

.about-image img,
.history-image img,
.team-image img{
  width:100%;
  border-radius:28px;
  box-shadow:0 15px 40px rgba(0,0,0,0.08);
  transition:0.4s ease;
}

.about-image img:hover,
.history-image img:hover,
.team-image img:hover{
  transform:scale(1.02);
}

/* =========================
   TEAM MEMBERS
========================= */
.team-members{
  padding:110px 8%;
  background:#f8fbff;
  text-align:center;
}

.members-container{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:35px;
  margin-top:50px;
}

.member-card{
  width:280px;
  background:white;
  border-radius:28px;
  overflow:hidden;
  padding:22px;
  transition:0.4s ease;
  box-shadow:0 8px 30px rgba(0,0,0,0.05);
}

.member-card:hover{
  transform:translateY(-10px);
  box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.member-card img{
  width:100%;
  height:280px;
  object-fit:cover;
  border-radius:20px;
  margin-bottom:18px;
}

.member-card h4{
  color:#12376b;
  font-size:22px;
  margin-bottom:8px;
}

.member-card p{
  color:#777;
  font-size:15px;
}

/* =========================
   ADMISSION CARD
========================= */
.admission-card{
  background:white;
  padding:35px;
  border-radius:28px;
  margin-top:30px;
  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.admission-card h3{
  color:#12376b;
  margin-bottom:15px;
  font-size:24px;
}

.admission-card ul{
  padding-left:20px;
}

.admission-card li{
  margin-bottom:12px;
  color:#555;
}
/* =========================
   ADMISSION HERO
========================= */
.admission-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:140px 8%;
  overflow:hidden;
  background:#12376b;
}

/* Background */
.admission-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to right,
      rgba(10,35,70,0.92) 15%,
      rgba(10,35,70,0.72) 45%,
      rgba(10,35,70,0.35) 70%,
      rgba(10,35,70,0.1) 100%
    ),
    url('image/student.jpg') center/cover no-repeat;
  z-index:1;
}

/* Decorative circle */
.admission-hero::after{
  content:'';
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  top:-150px;
  right:-120px;
  z-index:2;
}

.admission-overlay{
  position:relative;
  z-index:3;
  max-width:700px;
  color:white;
  animation:fadeUp 1.2s ease;
}

/* Badge */
.hero-badge{
  display:inline-block;
  padding:10px 18px;
  border-radius:50px;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
  font-size:13px;
  letter-spacing:1px;
  margin-bottom:28px;
  font-weight:600;
}

/* Title */
.admission-overlay h1{
  font-size:74px;
  line-height:1.1;
  margin-bottom:24px;
  font-weight:800;
  color:white;
}

/* Description */
.hero-desc{
  font-size:20px;
  line-height:1.9;
  opacity:0.92;
  max-width:620px;
  margin-bottom:35px;
}

/* Info Boxes */
.hero-info{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:40px;
}

.hero-box{
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.15);
  padding:18px 22px;
  border-radius:20px;
  min-width:180px;
}

.hero-box h3{
  font-size:16px;
  margin-bottom:6px;
  color:white;
}

.hero-box p{
  font-size:14px;
  opacity:0.85;
  margin:0;
}

/* =========================
   HERO BUTTONS
========================= */
.hero-buttons{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  align-items:center;
}

/* PRIMARY BUTTON */
.btn-daftar{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:220px;
  height:64px;

  padding:0 38px;

  border-radius:50px;

  background:white;
  color:#12376b;

  text-decoration:none;
  font-weight:700;

  transition:0.3s ease;

  box-shadow:
    0 8px 25px rgba(0,0,0,0.12);
}

.btn-daftar:hover{
  transform:translateY(-4px);

  background:#12376b;
  color:white;
}

/* SECONDARY BUTTON */
.btn-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:220px;
  height:64px;

  padding:0 38px;

  border-radius:50px;

  border:2px solid rgba(255,255,255,0.55);

  color:white;

  text-decoration:none;
  font-weight:700;

  transition:0.3s ease;

  backdrop-filter:blur(8px);
}

.btn-secondary:hover{
  background:white;
  color:#12376b;
}
/* =========================
   RESPONSIVE
========================= */
@media(max-width:768px){

  .admission-hero{
    padding:130px 7% 90px;
  }

  .admission-overlay h1{
    font-size:46px;
  }

  .hero-desc{
    font-size:17px;
  }

  .hero-info{
    flex-direction:column;
  }

  .hero-box{
    width:100%;
  }

  .hero-buttons{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* =========================
   FOOTER
========================= */
footer{
  background:#0c2a57;
  color:white;
  padding:60px 8% 30px;
}

.footer-content{
  max-width:1200px;
  margin:auto;
  text-align:center;
}

.footer-content h3{
  font-size:30px;
  margin-bottom:12px;
}

.footer-content p{
  opacity:0.9;
}

.footer-socials{
  margin:25px 0 40px;
}

.footer-socials a{
  color:white;
  text-decoration:none;
  margin:0 14px;
  transition:0.3s ease;
}

.footer-socials a:hover{
  color:#9ec3ec;
}

/* =========================
   FOOTER MAP
========================= */
.footer-map{
  margin-top:35px;
}

.footer-map h3{
  margin-bottom:20px;
  font-size:24px;
}

.footer-map iframe{
  width:100%;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.25);
}

/* Copyright */
.copyright{
  margin-top:35px;
  font-size:14px;
  opacity:0.7;
}

/* =========================
   ANIMATION
========================= */
@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(40px);
  }

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

/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){

  .hero h1{
    font-size:58px;
  }

  nav ul{
    gap:20px;
  }

  .about-text h2,
  .history-text h2,
  .team-text h2,
  .team-members h2,
  .admission-title{
    font-size:36px;
  }
}

@media(max-width:768px){

  .navbar{
    padding:15px 5%;
  }

  nav{
    display:none;
  }

  .hero{
    padding:150px 7% 90px;
  }

  .hero::before{
    background:
      linear-gradient(
        rgba(125,161,195,0.92),
        rgba(125,161,195,0.92)
      ),
      url('image/student.jpg') center/cover no-repeat;
  }

  .hero::after{
    display:none;
  }

  .hero h1{
    font-size:44px;
  }

  .hero p{
    font-size:18px;
  }

  .about-container,
  .history-container,
  .team-container{
    flex-direction:column;
    text-align:center;
  }

  .mission-item{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

  .members-container{
    flex-direction:column;
    align-items:center;
  }

  .member-card{
    width:100%;
    max-width:340px;
  }

  .footer-socials a{
    display:inline-block;
    margin:8px;
  }
}

/* =========================
   MODERN VISION SECTION
========================= */
.vision-modern{
  position:relative;
  padding:120px 8%;

  /* BACKGROUND PREMIUM */
  background:
    linear-gradient(
      135deg,
      #2163b3 0%,
      #edf4fb 100%
    );

  overflow:hidden;
}

/* =========================
   WATERMARK FULL RIGHT
========================= */
.vision-watermark{
  position:absolute;

  /* POSISI */
  top:50%;
  right:-120px;

  transform:translateY(-50%);

  /* SIZE BESAR */
  width:950px;
  height:auto;

  opacity:0.05;

  pointer-events:none;
  z-index:0;
}

/* =========================
   CONTAINER
========================= */
.vision-container{
  position:relative;
  z-index:2;
  max-width:850px;
}

/* =========================
   TAG
========================= */
.foundation-tag{
  display:inline-flex;
  align-items:center;
  gap:10px;

  background:white;

  padding:14px 24px;

  border-radius:50px;

  color:#1d4c91;

  font-weight:700;
  font-size:14px;

  margin-bottom:40px;

  box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

/* =========================
   CARD
========================= */
.modern-card{
  background:#12376b;

  border-radius:30px;

  padding:45px;

  margin-bottom:35px;

  box-shadow:
    0 18px 50px rgba(20,60,120,0.12);

  position:relative;

  overflow:hidden;
}

/* EFFECT */
.modern-card::before{
  content:'';

  position:absolute;

  top:-120px;
  right:-120px;

  width:280px;
  height:280px;

  border-radius:50%;

  background:rgba(255,255,255,0.05);
}

/* =========================
   HEADER
========================= */
.card-header{
  display:flex;
  align-items:center;
  gap:24px;

  margin-bottom:28px;

  position:relative;
  z-index:2;
}

/* TITLE */
.card-header h2{
  font-size:42px;

  color:white;

  font-weight:800;
}

/* =========================
   ICON
========================= */
.icon-circle{
  width:90px;
  height:90px;

  border-radius:50%;

  background:#edf4ff;

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

  font-size:38px;

  box-shadow:
    0 10px 30px rgba(255,255,255,0.12);
}

/* =========================
   TEXT
========================= */
.modern-card p{
  color:rgba(255,255,255,0.88);

  line-height:2;

  font-size:19px;

  position:relative;
  z-index:2;
}

/* =========================
   TIMELINE
========================= */
.timeline{
  position:relative;

  margin-top:20px;
}

/* LINE */
.timeline::before{
  content:'';

  position:absolute;

  left:24px;
  top:10px;

  width:2px;
  height:88%;

  background:rgba(255,255,255,0.25);
}

/* =========================
   ITEM
========================= */
.timeline-item{
  position:relative;

  display:flex;

  gap:25px;

  margin-bottom:38px;
}

.timeline-item:last-child{
  margin-bottom:0;
}

/* =========================
   NUMBER
========================= */
.timeline-number{
  min-width:50px;
  height:50px;

  border-radius:50%;

  background:white;

  color:#12376b;

  font-weight:700;

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

  position:relative;
  z-index:2;

  box-shadow:
    0 10px 20px rgba(18,55,107,0.25);
}

/* =========================
   DOTS
========================= */
.dots{
  position:absolute;

  width:120px;
  height:120px;

  background-image:
    radial-gradient(#8fb5ea 2px, transparent 2px);

  background-size:18px 18px;

  opacity:0.4;
}

.dots-top{
  top:40px;
  left:20px;
}

.dots-bottom{
  right:40px;
  bottom:40px;
}

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

  .vision-watermark{
    width:650px;

    right:-180px;

    opacity:0.04;
  }

  .card-header h2{
    font-size:36px;
  }

}

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

  .vision-modern{
    padding:90px 6%;
  }

  .vision-watermark{
    width:420px;

    right:-140px;

    top:55%;

    opacity:0.03;
  }

  .modern-card{
    padding:30px;

    border-radius:24px;
  }

  .card-header{
    flex-direction:column;

    align-items:flex-start;

    gap:16px;
  }

  .card-header h2{
    font-size:30px;
  }

  .icon-circle{
    width:70px;
    height:70px;

    font-size:28px;
  }

  .modern-card p{
    font-size:16px;

    line-height:1.9;
  }

  .timeline-item{
    gap:18px;
  }

  .timeline-number{
    min-width:42px;
    height:42px;

    font-size:13px;
  }

}
/* =========================
   HISTORY MODERN
========================= */
.history-modern{
  position:relative;
  padding:120px 8%;
  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #eef4fb 100%
    );
  overflow:hidden;
}

/* GLOW */
.history-glow{
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  background:rgba(33,99,179,0.08);
  top:-150px;
  right:-150px;
  filter:blur(50px);
}

/* WRAPPER */
.history-wrapper{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:80px;
}

/* IMAGE SIDE */
.history-image-side{
  position:relative;
  flex:1;
}

.history-image-side img{
  width:100%;
  height:700px;
  object-fit:cover;
  border-radius:36px;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* FLOATING CARD */
.history-floating-card{
  position:absolute;
  bottom:40px;
  left:-30px;

  background:#D0A239;
  padding:28px 30px;
  border-radius:28px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.12);

  max-width:260px;
}

.history-floating-card h3{
  font-size:36px;
  color:#12376b;
  margin-bottom:10px;
}

.history-floating-card p{
  color:#666;
  line-height:1.8;
}

/* CONTENT */
.history-content{
  flex:1;
  max-width:620px;
}

.history-content h2{
  font-size:64px;
  line-height:1.1;
  color:#12376b;
  margin:25px 0;
}

.history-desc{
  font-size:19px;
  line-height:2;
  color:#5b6472;
  margin-bottom:50px;
}

/* TIMELINE */
.history-timeline{
  position:relative;
}

.history-item{
  display:flex;
  gap:28px;
  margin-bottom:35px;
}

.history-year{
  min-width:90px;
  height:90px;
  border-radius:24px;

  background:#12376b;
  color:white;

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

  font-weight:700;
  font-size:20px;

  box-shadow:
    0 15px 35px rgba(18,55,107,0.18);
}

.history-text-box{
  background:white;
  padding:28px;
  border-radius:26px;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.05);

  flex:1;
}

.history-text-box h4{
  color:#12376b;
  margin-bottom:12px;
  font-size:22px;
}

.history-text-box p{
  color:#667085;
  line-height:1.9;
}

/* QUOTE */
.history-quote{
  margin-top:45px;

  background:#12376b;
  color:#D0A239;

  padding:35px;
  border-radius:30px;

  box-shadow:
    0 20px 50px rgba(18,55,107,0.16);
}

.history-quote span{
  display:inline-block;
  margin-bottom:16px;
  font-size:13px;
  letter-spacing:1px;
  opacity:0.7;
}

.history-quote p{
  font-size:24px;
  line-height:1.8;
  font-style:italic;
  color:#D0A239;
}

/* RESPONSIVE */
@media(max-width:1100px){

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

  .history-image-side img{
    height:500px;
  }

  .history-content{
    max-width:100%;
  }

}

@media(max-width:768px){

  .history-modern{
    padding:90px 6%;
  }

  .history-content h2{
    font-size:42px;
  }

  .history-desc{
    font-size:16px;
  }

  .history-item{
    flex-direction:column;
  }

  .history-year{
    width:80px;
    height:80px;
    font-size:18px;
  }

  .history-floating-card{
    left:20px;
    right:20px;
    bottom:20px;
    max-width:none;
  }

  .history-quote p{
    font-size:18px;
  }

}
/* =========================
   TEAM MODERN
========================= */
.team-modern{
  position:relative;
  padding:120px 8%;
  background:#ffffff;
  overflow:hidden;
}

/* GLOW */
.team-glow{
  position:absolute;
  width:500px;
  height:500px;
  border-radius:50%;
  background:rgba(33,99,179,0.08);
  left:-200px;
  bottom:-200px;
  filter:blur(60px);
}

/* WRAPPER */
.team-wrapper{
  position:relative;
  z-index:2;

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

  gap:80px;
}

/* LEFT */
.team-left{
  flex:1;
  max-width:620px;
}

.team-left h2{
  font-size:64px;
  line-height:1.1;
  color:#12376b;
  margin:25px 0;
}

.team-desc{
  font-size:19px;
  line-height:2;
  color:#667085;
  margin-bottom:45px;
}

/* FEATURES */
.team-features{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.team-feature-card{
  display:flex;
  gap:22px;

  background:#f8fbff;

  padding:28px;

  border-radius:28px;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.04);
}

.feature-icon{
  min-width:70px;
  height:70px;

  border-radius:22px;

  background:#12376b;
  color:white;

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

  font-size:30px;
}

.team-feature-card h4{
  font-size:22px;
  color:#12376b;
  margin-bottom:10px;
}

.team-feature-card p{
  color:#667085;
  line-height:1.8;
}

/* RIGHT */
.team-right{
  position:relative;
  flex:1;
}

.team-right img{
  width:100%;
  height:720px;
  object-fit:cover;

  border-radius:36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* FLOATING */
.team-floating{
  position:absolute;

  bottom:40px;
  left:-40px;

  background:#D0A239;

  padding:30px;

  border-radius:30px;

  max-width:260px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.12);
}

.team-floating h3{
  font-size:42px;
  color:white;
  margin-bottom:10px;
}

.team-floating p{
  color:#335D92;
  line-height:1.8;
}

/* =========================
   TEAM MEMBERS MODERN
========================= */
.team-members-modern{
  padding:120px 8%;
  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #eef4fb 100%
    );

  text-align:center;
}

.team-members-modern h2{
  font-size:58px;
  color:#12376b;
  margin:25px 0 15px;
}

.member-subtitle{
  max-width:700px;
  margin:auto;

  font-size:18px;
  line-height:1.9;
  color:#667085;
}

/* GRID */
.members-grid{
  display:grid;
  grid-template-columns:
    repeat(auto-fit, minmax(320px,1fr));

  gap:35px;

  margin-top:70px;
}

/* CARD */
.modern-member-card{
  background:white;

  border-radius:32px;

  overflow:hidden;

  text-align:left;

  transition:0.4s ease;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.05);
}

.modern-member-card:hover{
  transform:translateY(-10px);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* IMAGE */
.member-image{
  overflow:hidden;
}

.member-image img{
  width:100%;
  height:380px;
  object-fit:cover;

  transition:0.5s ease;
}

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

/* CONTENT */
.member-content{
  padding:30px;
}

.member-content span{
  display:inline-block;

  margin-bottom:14px;

  color:#2163b3;

  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
}

.member-content h3{
  font-size:30px;
  color:#12376b;
  margin-bottom:14px;
}

.member-content p{
  color:#667085;
  line-height:1.9;
}

/* RESPONSIVE */
@media(max-width:1100px){

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

  .team-right img{
    height:500px;
  }

}

@media(max-width:768px){

  .team-modern,
  .team-members-modern{
    padding:90px 6%;
  }

  .team-left h2,
  .team-members-modern h2{
    font-size:42px;
  }

  .team-desc,
  .member-subtitle{
    font-size:16px;
  }

  .team-feature-card{
    flex-direction:column;
  }

  .team-right img{
    height:400px;
  }

  .team-floating{
    left:20px;
    right:20px;
    bottom:20px;
    max-width:none;
  }

  .member-image img{
    height:320px;
  }

}

/* =========================
   ABOUT PREVIEW MODERN
========================= */
.about-preview-modern{
  position:relative;
  padding:120px 8%;
  background:
    linear-gradient(
      135deg,
      #f7fbff 0%,
      #edf4fb 100%
    );
  overflow:hidden;
}

/* CONTAINER */
.about-preview-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:90px;
  position:relative;
  z-index:2;
}

/* TEXT */
.about-preview-text{
  flex:1;
  max-width:620px;
}

/* BADGE */
.section-badge{
  display:inline-block;
  padding:10px 18px;
  border-radius:50px;
  background:white;
  color:#12376b;
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:28px;
  box-shadow:0 10px 25px rgba(0,0,0,0.06);
}

/* TITLE */
.about-preview-text h2{
  font-size:64px;
  line-height:1.05;
  color:#12376b;
  margin-bottom:28px;
  font-weight:800;
}

/* DESC */
.about-preview-text p{
  font-size:20px;
  line-height:1.9;
  color:#555;
  margin-bottom:40px;
}

/* STATS */
.about-stats{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:40px;
}

.stat-box{
  background:white;
  padding:22px 24px;
  border-radius:24px;
  min-width:160px;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.stat-box h3{
  color:#12376b;
  font-size:34px;
  margin-bottom:6px;
}

.stat-box span{
  font-size:14px;
  color:#666;
}

/* BUTTONS */
.about-buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

/* OUTLINE BUTTON */
.btn-outline{
  display:inline-block;
  padding:15px 34px;
  border-radius:50px;
  border:2px solid #12376b;
  color:#12376b;
  text-decoration:none;
  font-weight:700;
  transition:0.3s ease;
}

.btn-outline:hover{
  background:#12376b;
  color:white;
}

/* IMAGE */
.about-preview-image{
  flex:1;
  position:relative;
  display:flex;
  justify-content:center;
}

.about-preview-image img{
  width:100%;
  max-width:650px;
  height:560px;
  object-fit:cover;
  border-radius:38px;
  box-shadow:0 25px 60px rgba(0,0,0,0.15);
}

/* FLOATING CARD */
.floating-card{
  position:absolute;
  bottom:30px;
  left:-40px;
  background:white;
  padding:24px;
  border-radius:24px;
  width:280px;
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.floating-card h4{
  color:#12376b;
  margin-bottom:10px;
  font-size:22px;
}

.floating-card p{
  color:#555;
  font-size:15px;
  line-height:1.7;
}

/* BLUR EFFECT */
.about-blur{
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  opacity:0.3;
}

.about-blur-1{
  width:300px;
  height:300px;
  background:#9ec3ec;
  top:-80px;
  left:-100px;
}

.about-blur-2{
  width:260px;
  height:260px;
  background:#b8d4f3;
  bottom:-80px;
  right:-80px;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:992px){

  .about-preview-container{
    flex-direction:column;
    text-align:center;
  }

  .about-preview-text h2{
    font-size:48px;
  }

  .about-preview-text p{
    font-size:18px;
  }

  .about-stats{
    justify-content:center;
  }

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

  .floating-card{
    position:relative;
    left:0;
    bottom:0;
    margin-top:20px;
    width:100%;
    max-width:320px;
  }

}

@media(max-width:768px){

  .about-preview-modern{
    padding:90px 6%;
  }

  .about-preview-text h2{
    font-size:38px;
  }

  .about-preview-image img{
    height:auto;
  }

  .stat-box{
    width:100%;
  }

}
/* =========================
   CTA MODERN
========================= */
.cta-modern{
  position:relative;
  padding:120px 8%;

  background:
    linear-gradient(
      135deg,
      #dfeefd 0%,
      #edf5ff 45%,
      #cfe4fb 100%
    );

  overflow:hidden;
}

/* =========================
   GLOW EFFECT
========================= */
.cta-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:0.35;
}

.cta-glow-1{
  width:320px;
  height:320px;
  background:#9ec3ec;

  top:-80px;
  left:-100px;
}

.cta-glow-2{
  width:260px;
  height:260px;
  background:#ffffff;

  bottom:-100px;
  right:-80px;
}

/* =========================
   CONTAINER
========================= */
.cta-container{
  position:relative;
  z-index:2;

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

  gap:80px;
}

/* =========================
   LEFT CONTENT
========================= */
.cta-content{
  flex:1;
  max-width:620px;
}

/* TITLE */
.cta-content h2{
  font-size:64px;
  line-height:1.1;

  color:#12376b;

  margin:25px 0;
}

/* DESC */
.cta-content p{
  color:#5f6b7a;

  font-size:19px;
  line-height:2;

  margin-bottom:40px;
}

/* =========================
   FEATURES
========================= */
.cta-features{
  display:flex;
  flex-direction:column;
  gap:18px;

  margin-bottom:40px;
}

.cta-feature{
  display:flex;
  align-items:center;
  gap:14px;

  color:#12376b;

  font-weight:600;
  font-size:16px;
}

/* CHECK ICON */
.cta-feature span{
  width:34px;
  height:34px;

  border-radius:50%;

  background:#12376b;
  color:white;

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

  font-size:14px;
  font-weight:700;

  box-shadow:
    0 8px 20px rgba(18,55,107,0.18);
}

/* =========================
   BUTTONS
========================= */
.cta-buttons{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

/* PRIMARY BUTTON */
.cta-modern .btn-daftar{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-width:220px;
  height:64px;

  padding:0 38px;

  border-radius:50px;

  border:2px solid rgba(255,255,255,0.55);

  color: #12376b;

  text-decoration:none;
  font-weight:700;

  transition:0.3s ease;

  backdrop-filter:blur(8px);
}
.cta-modern .btn-daftar:hover{
  background:#12376b;
  color: white;
}

/* OUTLINE BUTTON */
.cta-modern .btn-outline{
  display:inline-block;

  padding:15px 34px;

  border-radius:50px;

  border:2px solid #12376b;

  color:#12376b;

  text-decoration:none;

  font-weight:700;

  transition:0.3s ease;
}

.cta-modern .btn-outline:hover{
  background:#12376b;
  color:white;
}

/* =========================
   IMAGE
========================= */
.cta-image{
  position:relative;
  flex:1;
}

/* IMAGE STYLE */
.cta-image img{
  width:100%;
  height:580px;

  object-fit:cover;

  border-radius:36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* =========================
   FLOATING CARD
========================= */
.cta-floating-card{
  position:absolute;

  bottom:30px;
  left:-30px;

  background:white;

  padding:28px;

  border-radius:28px;

  max-width:260px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.12);
}

/* TITLE */
.cta-floating-card h3{
  font-size:38px;
  color:#12376b;

  margin-bottom:10px;
}

/* TEXT */
.cta-floating-card p{
  color:#667085;

  line-height:1.8;
  font-size:15px;
}

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

  .cta-container{
    flex-direction:column;
  }

  .cta-content{
    max-width:100%;
  }

  .cta-image img{
    height:450px;
  }

}

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

  .cta-modern{
    padding:90px 6%;
  }

  .cta-content h2{
    font-size:42px;
  }

  .cta-content p{
    font-size:16px;
  }

  .cta-buttons{
    flex-direction:column;
    align-items:flex-start;
  }

  .cta-image img{
    height:350px;
  }

  .cta-floating-card{
    left:20px;
    right:20px;
    bottom:20px;

    max-width:none;
  }

}

/* =========================
   ADMISSION FORM
========================= */
.admission-form{
  background:white;

  padding:40px;

  border-radius:32px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.08);

  display:flex;
  flex-direction:column;
  gap:20px;
}

.form-group{
  display:flex;
  flex-direction:column;
}

.form-group label{
  margin-bottom:10px;

  font-weight:600;
  color:#12376b;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;

  padding:16px 18px;

  border-radius:16px;

  border:1px solid #d6e2f0;

  font-family:'Poppins', sans-serif;

  font-size:15px;

  outline:none;

  transition:0.3s ease;

  background:#f8fbff;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#12376b;

  background:white;

  box-shadow:
    0 0 0 4px rgba(18,55,107,0.08);
}

.admission-form .btn-daftar{
  width:100%;
  margin-top:10px;
}

/* =========================
   DAILY ROUTINE MODERN
========================= */
.routine-modern{
  position:relative;
  padding:120px 8%;

  background:
    linear-gradient(
      rgba(230,238,248,0.92),
      rgba(230,238,248,0.92)
    ),
    url('image/qualityed.jpg') center/cover no-repeat;

  overflow:hidden;
}

/* OVERLAY */
.routine-overlay{
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top left,
      rgba(33,99,179,0.10),
      transparent 35%
    );

  z-index:1;
}

/* CONTAINER */
.routine-container{
  position:relative;
  z-index:2;

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

  gap:90px;
}

/* IMAGE */
.routine-image{
  position:relative;
  flex:1;
}

.routine-image img{
  width:100%;
  height:700px;

  object-fit:cover;

  border-radius:36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.15);
}

/* FLOATING CARD */
.routine-floating{
  position:absolute;

  bottom:30px;
  left:-30px;

  background:rgba(255,255,255,0.92);

  backdrop-filter:blur(12px);

  padding:28px;

  border-radius:28px;

  max-width:260px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.12);
}

.routine-floating h3{
  font-size:34px;
  color:#12376b;

  margin-bottom:10px;
}

.routine-floating p{
  color:#667085;
  line-height:1.8;
}

/* RIGHT */
.routine-content{
  flex:1;
  max-width:620px;
}

.routine-content h2{
  font-size:64px;
  line-height:1.1;

  color:#12376b;

  margin:25px 0;
}

.routine-desc{
  font-size:18px;
  line-height:2;
  color:#667085;

  margin-bottom:45px;
}

/* TIMELINE */
.routine-timeline{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* ITEM */
.routine-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

/* TIME */
.routine-time{
  min-width:85px;
  height:85px;

  border-radius:24px;

  background:#12376b;
  color:white;

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

  font-weight:700;
  font-size:20px;

  box-shadow:
    0 12px 30px rgba(18,55,107,0.18);
}

/* CARD */
.routine-card{
  background:rgba(255,255,255,0.92);

  backdrop-filter:blur(10px);

  padding:26px;

  border-radius:26px;

  flex:1;

  box-shadow:
    0 10px 35px rgba(0,0,0,0.06);

  transition:0.3s ease;
}

.routine-card:hover{
  transform:translateY(-5px);
}

.routine-card h4{
  color:#12376b;
  margin-bottom:10px;

  font-size:22px;
}

.routine-card p{
  color:#667085;
  line-height:1.8;
}

/* QUOTE */
.routine-quote{
  margin-top:40px;

  background:#12376b;
  color:white;

  padding:35px;

  border-radius:30px;

  box-shadow:
    0 20px 50px rgba(18,55,107,0.18);
}

.routine-quote span{
  display:inline-block;

  margin-bottom:16px;

  font-size:12px;
  letter-spacing:1px;

  opacity:0.7;
}

.routine-quote p{
  font-size:24px;
  line-height:1.8;

  font-style:italic;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1100px){

  .routine-container{
    flex-direction:column;
  }

  .routine-content{
    max-width:100%;
  }

  .routine-image img{
    height:500px;
  }

}

@media(max-width:768px){

  .routine-modern{
    padding:90px 6%;
  }

  .routine-content h2{
    font-size:42px;
  }

  .routine-desc{
    font-size:16px;
  }

  .routine-item{
    flex-direction:column;
  }

  .routine-time{
    width:80px;
    height:80px;

    font-size:18px;
  }

  .routine-floating{
    left:20px;
    right:20px;
    bottom:20px;

    max-width:none;
  }

  .routine-image img{
    height:380px;
  }

  .routine-quote p{
    font-size:18px;
  }

}

/* =========================
   CURRICULUM MODERN
========================= */
.curriculum-modern{
  position:relative;

  padding:120px 8%;

  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #edf4fb 100%
    );

  overflow:hidden;
}

/* GLOW */
.curriculum-glow{
  position:absolute;

  border-radius:50%;

  filter:blur(90px);

  opacity:0.25;
}

.curriculum-glow-1{
  width:320px;
  height:320px;

  background:#9ec3ec;

  top:-100px;
  left:-100px;
}

.curriculum-glow-2{
  width:260px;
  height:260px;

  background:#b8d4f3;

  bottom:-100px;
  right:-100px;
}

/* CONTAINER */
.curriculum-container{
  position:relative;
  z-index:2;
}

/* HEADER */
.curriculum-header{
  text-align:center;

  max-width:850px;

  margin:auto auto 70px;
}

.curriculum-header h2{
  font-size:64px;

  line-height:1.1;

  color:#12376b;

  margin:25px 0;
}

.curriculum-header p{
  font-size:19px;

  line-height:2;

  color:#667085;
}

/* GRID */
.curriculum-grid{
  display:grid;

  grid-template-columns:
    1.1fr 1fr;

  gap:60px;

  align-items:center;
}

/* IMAGE */
.curriculum-image{
  position:relative;
}

.curriculum-image img{
  width:100%;

  height:650px;

  object-fit:cover;

  border-radius:36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* FLOATING */
.curriculum-floating{
  position:absolute;

  bottom:30px;
  left:-30px;

  background:white;

  padding:28px;

  border-radius:28px;

  max-width:260px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.12);
}

.curriculum-floating h3{
  color:#12376b;

  margin-bottom:12px;

  font-size:28px;
}

.curriculum-floating p{
  color:#667085;

  line-height:1.8;
}

/* CONTENT */
.curriculum-content{
  display:flex;

  flex-direction:column;

  gap:24px;
}

/* CARD */
.curriculum-card{
  display:flex;

  gap:22px;

  background:white;

  padding:30px;

  border-radius:30px;

  transition:0.3s ease;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.05);
}

.curriculum-card:hover{
  transform:translateY(-6px);

  box-shadow:
    0 20px 45px rgba(0,0,0,0.08);
}

/* ICON */
.curriculum-icon{
  min-width:70px;
  height:70px;

  border-radius:22px;

  background:#12376b;

  color:white;

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

  font-size:30px;
}

/* TEXT */
.curriculum-card h4{
  color:#12376b;

  font-size:24px;

  margin-bottom:10px;
}

.curriculum-card p{
  color:#667085;

  line-height:1.9;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1100px){

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

  .curriculum-image img{
    height:500px;
  }

}

@media(max-width:768px){

  .curriculum-modern{
    padding:90px 6%;
  }

  .curriculum-header h2{
    font-size:42px;
  }

  .curriculum-header p{
    font-size:16px;
  }

  .curriculum-card{
    flex-direction:column;
  }

  .curriculum-floating{
    left:20px;
    right:20px;

    bottom:20px;

    max-width:none;
  }

  .curriculum-image img{
    height:380px;
  }

}

/* =========================
   PROGRAM MODERN
========================= */
.program-modern{
  position:relative;

  padding:120px 8%;

  background:white;

  overflow:hidden;
}

/* GLOW */
.program-glow{
  position:absolute;

  width:450px;
  height:450px;

  border-radius:50%;

  background:
    rgba(158,195,236,0.18);

  filter:blur(80px);

  top:-150px;
  right:-150px;
}

/* HEADER */
.program-header{
  text-align:center;

  max-width:850px;

  margin:auto auto 70px;

  position:relative;
  z-index:2;
}

.program-header h2{
  font-size:64px;

  line-height:1.1;

  color:#12376b;

  margin:25px 0;
}

.program-header p{
  font-size:19px;

  line-height:2;

  color:#667085;
}

/* GRID */
.program-grid{
  display:grid;

  grid-template-columns:
    repeat(auto-fit,minmax(320px,1fr));

  gap:35px;

  position:relative;
  z-index:2;
}

/* CARD */
.program-card{
  background:#f8fbff;

  border-radius:36px;

  overflow:hidden;

  transition:0.4s ease;

  box-shadow:
    0 15px 40px rgba(0,0,0,0.05);
}

.program-card:hover{
  transform:translateY(-10px);

  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* IMAGE */
.program-image{
  height:320px;
  background:white;

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

  overflow:hidden;
}

.program-image img{
  max-width:100%;
  max-height:100%;

  object-fit:contain;

  transition:0.5s ease;
}

/* CONTENT */
.program-content{
  padding:35px;
}

/* TAG */
.program-tag{
  display:inline-block;

  padding:8px 16px;

  border-radius:50px;

  background:#dce9f8;

  color:#12376b;

  font-size:12px;

  font-weight:700;

  letter-spacing:1px;

  margin-bottom:18px;
}

/* TITLE */
.program-content h3{
  font-size:34px;

  color:#12376b;

  margin-bottom:16px;
}

/* DESC */
.program-content p{
  color:#667085;

  line-height:1.9;

  margin-bottom:28px;
}

/* FEATURES */
.program-features{
  display:flex;

  flex-direction:column;

  gap:14px;
}

/* FEATURE */
.program-feature{
  display:flex;

  align-items:center;

  gap:12px;

  color:#12376b;

  font-weight:600;
}

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

  .program-modern{
    padding:90px 6%;
  }

  .program-header h2{
    font-size:42px;
  }

  .program-header p{
    font-size:16px;
  }

  .program-image img{
    height:260px;
  }

  .program-content{
    padding:28px;
  }

  .program-content h3{
    font-size:28px;
  }

}

/* =========================
   PARENTS SECTION
========================= */
.parents-modern{
  position:relative;
  padding:120px 8%;

  background:
    linear-gradient(
      135deg,
      #f8fbff 0%,
      #eef4fb 100%
    );

  overflow:hidden;
}

/* GLOW */
.parents-glow{
  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  background:rgba(33,99,179,0.08);

  top:-180px;
  right:-180px;

  filter:blur(60px);
}

/* CONTAINER */
.parents-container{
  position:relative;
  z-index:2;

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

  gap:80px;
}

/* LEFT */
.parents-content{
  flex:1;
  max-width:620px;
}

.parents-content h2{
  font-size:64px;
  line-height:1.1;

  color:#12376b;

  margin:25px 0;
}

.parents-desc{
  font-size:19px;
  line-height:2;

  color:#667085;

  margin-bottom:45px;
}

/* LIST */
.parents-list{
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* ITEM */
.parents-item{
  display:flex;
  gap:22px;

  background:white;

  padding:28px;

  border-radius:28px;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.05);
}

/* ICON */
.parents-icon{
  min-width:70px;
  height:70px;

  border-radius:22px;

  background:#12376b;
  color:white;

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

  font-size:30px;
}

/* TEXT */
.parents-item h4{
  font-size:22px;
  color:#12376b;

  margin-bottom:10px;
}

.parents-item p{
  color:#667085;
  line-height:1.8;
}

/* RIGHT */
.parents-image{
  position:relative;
  flex:1;
}

.parents-image img{
  width:100%;
  height:650px;

  object-fit:cover;

  border-radius:36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.12);
}

/* FLOATING CARD */
.parents-floating{
  position:absolute;

  bottom:35px;
  left:-35px;

  background:#D0A239;

  padding:28px;

  border-radius:28px;

  max-width:260px;

  box-shadow:
    0 20px 50px rgba(0,0,0,0.12);
}

.parents-floating h3{
  font-size:42px;
  color:#12376b;

  margin-bottom:10px;
}

.parents-floating p{
  color:#335D92;
  line-height:1.8;
}

/* RESPONSIVE */
@media(max-width:1100px){

  .parents-container{
    flex-direction:column;
  }

  .parents-image img{
    height:500px;
  }

}

@media(max-width:768px){

  .parents-modern{
    padding:90px 6%;
  }

  .parents-content h2{
    font-size:42px;
  }

  .parents-desc{
    font-size:16px;
  }

  .parents-item{
    flex-direction:column;
  }

  .parents-image img{
    height:380px;
  }

  .parents-floating{
    left:20px;
    right:20px;
    bottom:20px;

    max-width:none;
  }

}

/* =========================
   CONTACT HERO
========================= */
.contact-hero{
  position:relative;

  height:65vh;

  background:
    url("image/YPCA.jpeg")
    center/cover no-repeat;

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

  text-align:center;

  overflow:hidden;
}

.contact-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      rgba(10,25,48,0.75),
      rgba(10,25,48,0.75)
    );
}

.contact-hero-content{
  position:relative;
  z-index:2;

  max-width:850px;

  padding:20px;
}

.contact-hero-content h1{
  font-size:72px;
  line-height:1.1;

  color:white;

  margin:25px 0;
}

.contact-hero-content p{
  color:rgba(255,255,255,0.85);

  font-size:18px;
  line-height:2;
}

/* =========================
   CONTACT SECTION
========================= */
.contact-modern{
  position:relative;

  padding:120px 8%;

  background:#f8fbff;

  overflow:hidden;
}

.contact-glow{
  position:absolute;

  width:500px;
  height:500px;

  border-radius:50%;

  background:rgba(18,55,107,0.06);

  top:-150px;
  right:-150px;

  filter:blur(60px);
}

.contact-container{
  position:relative;
  z-index:2;

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

  gap:70px;
}

/* LEFT */
.contact-left{
  flex:1;
}

.contact-left h2{
  font-size:58px;
  line-height:1.1;

  color:#12376b;

  margin:25px 0;
}

.contact-desc{
  font-size:18px;
  line-height:2;

  color:#667085;

  margin-bottom:45px;
}

/* ITEMS */
.contact-items{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.contact-card{
  display:flex;
  gap:22px;

  background:white;

  padding:28px;

  border-radius:28px;

  box-shadow:
    0 12px 35px rgba(0,0,0,0.05);
}

.contact-icon{
  min-width:70px;
  height:70px;

  border-radius:20px;

  background:#12376b;

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

  color:white;

  font-size:30px;
}

.contact-card h4{
  font-size:22px;

  color:#12376b;

  margin-bottom:10px;
}

.contact-card p{
  color:#667085;

  line-height:1.8;
}

/* RIGHT */
.contact-right{
  flex:1;
}

.contact-form-box{
  background:white;

  padding:45px;

  border-radius:36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.08);
}

.contact-form-box h3{
  font-size:36px;

  color:#12376b;

  margin-bottom:35px;
}

.input-group{
  margin-bottom:22px;
}

.input-group input,
.input-group textarea{
  width:100%;

  padding:18px 22px;

  border:none;

  border-radius:18px;

  background:#f4f7fb;

  font-size:16px;

  font-family:'Poppins', sans-serif;

  outline:none;
}

.input-group textarea{
  resize:none;
}

/* =========================
   MAP SECTION
========================= */
.map-section{
  padding:100px 8%;

  background:white;
}

.map-title{
  text-align:center;

  margin-bottom:50px;
}

.map-title h2{
  font-size:52px;

  color:#12376b;

  margin-top:20px;
}

.map-box{
  overflow:hidden;

  border-radius:36px;

  box-shadow:
    0 25px 60px rgba(0,0,0,0.1);
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:1000px){

  .contact-container{
    flex-direction:column;
  }

}

@media(max-width:768px){

  .contact-hero-content h1{
    font-size:46px;
  }

  .contact-left h2{
    font-size:42px;
  }

  .map-title h2{
    font-size:38px;
  }

  .contact-modern,
  .map-section{
    padding:90px 6%;
  }

  .contact-form-box{
    padding:30px;
  }

}

/* =========================================
   YPCA BRAND SYSTEM OVERRIDE
   Pendidikan Cahaya Asa
========================================= */

/* IMPORT FONT */
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* =========================
   ROOT COLORS
========================= */
:root{
  --primary-dark:#0F2F4F;
  --primary-blue:#335D92;

  --accent-gold:#D0A239;
  --warm-white:#F5F0E7;

  --text-dark:#1E293B;
  --text-soft:#667085;

  --shadow-soft:
    0 15px 40px rgba(15,47,79,0.08);

  --shadow-medium:
    0 20px 50px rgba(15,47,79,0.12);

  --radius-xl:32px;
}

/* =========================
   GLOBAL TYPOGRAPHY
========================= */
body{
  font-family:'Poppins', sans-serif;
  color:var(--text-dark);
  background:var(--warm-white);
}

/* =========================
   HEADING STYLE
========================= */
h1,
h2,
h3,
.logo-text h1,
.hero h1,
.admission-overlay h1,
.contact-hero-content h1{
  font-family:'Libre Baskerville', serif !important;
  font-weight:700;
  letter-spacing:-1px;
  color:var(--primary-dark);
}

/* HERO WHITE TEXT */
.hero h1,
.admission-overlay h1,
.contact-hero-content h1{
  color:white;
}

/* =========================
   SECTION TITLE
========================= */
.about-text h2,
.history-text h2,
.team-text h2,
.team-members h2,
.admission-title,
.history-content h2,
.team-left h2,
.curriculum-header h2,
.program-header h2,
.parents-content h2,
.contact-left h2,
.map-title h2{
  color:var(--primary-dark);
  font-family:'Libre Baskerville', serif;
  font-weight:700;
}

/* =========================
   PARAGRAPH
========================= */
p{
  color:var(--text-soft);
}

/* =========================
   NAVBAR
========================= */
.navbar{
  background:rgba(245,240,231,0.92);
  border-bottom:1px solid rgba(15,47,79,0.06);
  box-shadow:
    0 10px 30px rgba(15,47,79,0.04);
}

nav a{
  color:var(--primary-dark);
  font-weight:600;
}

nav a:hover{
  color:var(--accent-gold);
}

nav a::after{
  background:var(--accent-gold);
}

/* =========================
   LOGO
========================= */
.logo-text h1{
  color:var(--primary-dark);
}

.logo-text p{
  color:var(--primary-blue);
}

/* =========================
   HERO SECTION
========================= */
.hero{
  background:var(--primary-blue);
}

.hero::before{
  background:
    linear-gradient(
      90deg,
      rgba(15,47,79,0.96) 0%,
      rgba(15,47,79,0.88) 45%,
      rgba(15,47,79,0.45) 72%,
      rgba(15,47,79,0.05) 100%
    ),
    url('image/Logo.jpeg') right center/cover no-repeat;
}

.hero p{
  color:rgba(255,255,255,0.88);
}

/* =========================
   BUTTON SYSTEM
========================= */
.btn-daftar,
.btn-outline,
.btn-secondary{
  border-radius:999px;
  font-weight:600;
  transition:all .35s ease;
}

/* PRIMARY BUTTON */
.btn-daftar{
  background:var(--accent-gold);
  color:white;
  border:none;

  box-shadow:
    0 10px 30px rgba(208,162,57,0.25);
}

.btn-daftar:hover{
  background:var(--primary-dark);
  transform:translateY(-4px);
}

/* OUTLINE BUTTON */
.btn-outline{
  border:2px solid var(--primary-dark);
  color:var(--primary-dark);
}

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

/* SECONDARY BUTTON */
.btn-secondary{
  border:2px solid rgba(255,255,255,0.4);
}

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

/* =========================
   CARD SYSTEM
========================= */
.modern-card,
.vision-card,
.mission-card,
.history-text-box,
.team-feature-card,
.curriculum-card,
.program-card,
.parents-item,
.contact-card,
.contact-form-box,
.admission-form,
.member-card,
.modern-member-card{
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-soft);
}

/* HOVER */
.program-card:hover,
.modern-member-card:hover,
.member-card:hover{
  box-shadow:var(--shadow-medium);
}

/* =========================
   BLUE SECTIONS
========================= */
.modern-card,
.history-quote,
.routine-quote{
  background:var(--primary-dark);
}

/* =========================
   GOLD TAGS
========================= */
.section-tag,
.section-badge,
.program-tag,
.foundation-tag{
  background:rgba(208,162,57,0.12);
  color:var(--accent-gold);
  border:1px solid rgba(208,162,57,0.2);
}

/* =========================
   ICON SYSTEM
========================= */
.icon-circle,
.feature-icon,
.curriculum-icon,
.parents-icon,
.contact-icon,
.program-feature span,
.timeline-number{
  background:var(--primary-dark);
  color:white;
}

/* =========================
   TIMELINE YEAR
========================= */
.history-year,
.routine-time{
  background:var(--primary-dark);
}

/* =========================
   SECTION BACKGROUND
========================= */
.about-preview-modern,
.curriculum-modern,
.parents-modern,
.team-members-modern,
.history-modern{
  background:
    linear-gradient(
      135deg,
      #fcf9f4 0%,
      #f5f0e7 100%
    );
}

/* =========================
   FOOTER
========================= */
footer{
  background:var(--primary-dark);
  color:white;
  position:relative;
  overflow:hidden;
}

/* GLOW */
footer::before{
  content:'';

  position:absolute;

  width:400px;
  height:400px;

  border-radius:50%;

  background:
    rgba(208,162,57,0.08);

  top:-200px;
  right:-120px;

  filter:blur(60px);
}

.footer-content{
  position:relative;
  z-index:2;
}

.footer-content h3{
  font-family:'Libre Baskerville', serif;
  font-size:36px;
  color:white;
}

.footer-content p{
  color:rgba(255,255,255,0.75);
}

.footer-socials a{
  color:white;
}

.footer-socials a:hover{
  color:var(--accent-gold);
}

/* =========================
   MAP
========================= */
.footer-map iframe,
.map-box{
  border-radius:30px;
  overflow:hidden;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.25);
}

/* =========================
   COPYRIGHT
========================= */
.copyright{
  color:rgba(255,255,255,0.6);
  letter-spacing:0.5px;
}

/* =========================
   FORM
========================= */
.input-group input,
.input-group textarea,
.form-group input,
.form-group textarea,
.form-group select{
  border:1px solid rgba(15,47,79,0.08);
  background:#fff;
}

.input-group input:focus,
.input-group textarea:focus,
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
  border-color:var(--accent-gold);

  box-shadow:
    0 0 0 4px rgba(208,162,57,0.12);
}

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

  h1{
    line-height:1.2 !important;
  }

  .hero h1,
  .admission-overlay h1,
  .contact-hero-content h1{
    font-size:42px !important;
  }

  .history-content h2,
  .team-left h2,
  .curriculum-header h2,
  .program-header h2,
  .parents-content h2,
  .contact-left h2{
    font-size:38px !important;
  }

}

.navbar.scrolled{
  padding:14px 7%;

  background:rgba(255,255,255,0.98);

  box-shadow:
    0 10px 30px rgba(0,0,0,0.08);
}
.hero-school-buttons{
  display:flex;
  gap:20px;
  margin-top:40px;
  flex-wrap:wrap;
}

.school-btn{
  display:flex;
  align-items:center;
  gap:15px;

  padding:16px 22px;

  background:rgba(255,255,255,0.08);

  border:1px solid rgba(255,255,255,0.2);

  backdrop-filter:blur(12px);

  border-radius:18px;

  text-decoration:none;

  transition:.35s ease;

  min-width:260px;
}

.school-btn:hover{
  transform:translateY(-5px);
  background:rgba(255,255,255,0.14);
  border-color:#D0A239;
}

.school-btn img{
  width:58px;
  height:58px;
  border-radius:14px;
  object-fit:cover;
  background:#fff;
  padding:5px;
}

.school-btn-text span{
  font-size:12px;
  color:#d6d6d6;
  letter-spacing:1px;
}

.school-btn-text h4{
  margin-top:4px;
  color:#fff;
  font-size:17px;
  font-weight:600;
  line-height:1.3;
}
/* =========================
   LEARNING EXPERIENCE
========================= */

.learning-experience{
  padding:100px 8%;
  background:#fff;
  position:relative;
}

.experience-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:30px;
  margin-top:60px;
}

.experience-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.08);
  transition:0.4s;
}

.experience-card:hover{
  transform:translateY(-8px);
}

.experience-card img{
  width:100%;
  height:240px;
  object-fit:cover;
}

.experience-card h3{
  font-size:22px;
  padding:24px 24px 10px;
  color:#0F172A;
}

.experience-card p{
  padding:0 24px 28px;
  color:#475569;
  line-height:1.8;
}
/* =========================
   DAYCARE PAGE
========================= */

.daycare-page{
  background:#F8F0DE;
}

/* SECTION BASE */
.daycare-section{
  padding:100px 8%;
  position:relative;
  overflow:hidden;
}

/* CONTAINER */
.daycare-container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:60px;
  flex-wrap:wrap;
}

/* TEXT */
.daycare-content{
  flex:1;
  min-width:320px;
}

.daycare-content h2{
  font-size:52px;
  line-height:1.2;
  color:#5F785D;
  margin-bottom:24px;

  font-family:'Libre Baskerville', serif;
}

.daycare-content p{
  font-size:17px;
  line-height:1.9;
  color:#555;
  margin-bottom:20px;
}

/* IMAGE */
.daycare-image{
  flex:1;
  min-width:320px;
  position:relative;
}

.daycare-image img{
  width:100%;
  border-radius:28px;
  object-fit:cover;

  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

/* FLOATING CARD */
.daycare-floating{
  position:absolute;
  bottom:25px;
  left:25px;

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

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

  max-width:260px;

  box-shadow:0 10px 25px rgba(0,0,0,0.12);
}

.daycare-floating h3{
  color:#769A72;
  margin-bottom:10px;
  font-size:22px;
}

.daycare-floating p{
  font-size:14px;
  line-height:1.7;
  color:#666;
  margin:0;
}

/* TAG */
.daycare-tag{
  display:inline-block;

  padding:10px 18px;
  border-radius:999px;

  background:#B5C79B;
  color:#fff;

  font-size:13px;
  font-weight:600;
  letter-spacing:1px;

  margin-bottom:22px;
}

/* VISION MISSION */
.daycare-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:30px;
  margin-top:50px;
}

.daycare-card{
  background:#fff;
  padding:40px;
  border-radius:28px;

  box-shadow:0 10px 30px rgba(0,0,0,0.06);

  transition:0.4s ease;
}

.daycare-card:hover{
  transform:translateY(-8px);
}

.daycare-card h3{
  color:#769A72;
  margin-bottom:20px;
  font-size:28px;
}

.daycare-card p{
  color:#666;
  line-height:1.9;
}

/* MISSION LIST */
.daycare-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.daycare-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.daycare-number{
  min-width:45px;
  height:45px;

  border-radius:50%;

  background:#769A72;
  color:#fff;

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

  font-weight:700;
}

.daycare-item p{
  margin:0;
}

/* ACTIVITIES */
.daycare-activities{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:25px;
  margin-top:50px;
}

.activity-card{
  background:#fff;
  border-radius:24px;
  overflow:hidden;

  box-shadow:0 10px 30px rgba(0,0,0,0.06);

  transition:0.4s ease;
}

.activity-card:hover{
  transform:translateY(-8px);
}

.activity-card img{
  width:100%;
  height:220px;
  object-fit:cover;
}

.activity-content{
  padding:24px;
}

.activity-content h4{
  color:#5F785D;
  margin-bottom:12px;
  font-size:22px;
}

.activity-content p{
  color:#666;
  line-height:1.8;
  font-size:15px;
}

/* QUOTE SECTION */
.daycare-quote{
  margin-top:80px;

  background:linear-gradient(
    135deg,
    #769A72,
    #5F785D
  );

  padding:60px;
  border-radius:32px;

  text-align:center;
  color:#fff;
}

.daycare-quote h3{
  font-size:42px;
  margin-bottom:20px;

  font-family:'Libre Baskerville', serif;
}

.daycare-quote p{
  max-width:800px;
  margin:auto;

  line-height:2;
  font-size:18px;
  color:rgba(255,255,255,0.9);
}

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

  .daycare-content h2{
    font-size:38px;
  }

  .daycare-section{
    padding:80px 6%;
  }

  .daycare-floating{
    position:relative;
    left:auto;
    bottom:auto;
    margin-top:20px;
  }

  .daycare-quote{
    padding:40px 25px;
  }

  .daycare-quote h3{
    font-size:30px;
  }

}
/* =========================
   CARE MODERN
========================= */

.care-modern{
  padding:110px 8%;
  background:#FFFFFF;
}

.care-container{
  display:flex;
  align-items:center;
  gap:70px;
  flex-wrap:wrap;
}

.care-image{
  flex:1;
  min-width:320px;
  position:relative;
}

.care-image img{
  width:100%;
  border-radius:30px;
  object-fit:cover;

  box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

.care-floating{
  position:absolute;
  bottom:25px;
  left:25px;

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

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

  max-width:240px;
}

.care-floating h3{
  color:#769A72;
  margin-bottom:10px;
}

.care-floating p{
  color:#666;
  font-size:14px;
  line-height:1.7;
}

.care-content{
  flex:1;
  min-width:320px;
}

.care-content h2{
  font-size:52px;
  line-height:1.2;
  margin:20px 0 35px;

  color:#5F785D;
  font-family:'Libre Baskerville', serif;
}

.care-box{
  margin-bottom:35px;
}

.care-box h3{
  color:#769A72;
  margin-bottom:18px;
  font-size:28px;
}

.care-box p{
  color:#666;
  line-height:1.9;
}

.care-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.care-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

.care-icon{
  width:52px;
  height:52px;

  border-radius:16px;

  background:#F8F0DE;

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

  font-size:24px;

  flex-shrink:0;
}

.care-item p{
  margin:0;
  color:#666;
  line-height:1.8;
}
/* =========================
   CARE CARDS
========================= */

.care-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;

  margin-top:35px;
}

.care-card{
  background:#769A72;

  padding:32px 28px;

  border-radius:26px;

  box-shadow:0 12px 30px rgba(0,0,0,0.06);

  transition:0.4s ease;

  border:1px solid rgba(118,154,114,0.08);
}

.care-card:hover{
  transform:translateY(-8px);

  box-shadow:0 18px 40px rgba(0,0,0,0.1);
}

.care-card-icon{
  width:65px;
  height:65px;

  border-radius:18px;

  background:#8593A9;

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

  font-size:30px;

  margin-bottom:22px;
}

.care-card h4{
  font-size:22px;
  color:#5F785D;

  margin-bottom:14px;
}

.care-card p{
  color:#666;
  line-height:1.8;
  font-size:15px;
}

/* =========================
   DAYCARE INTRO
========================= */

.daycare-intro{
  position:relative;

  padding:120px 8%;

  overflow:hidden;

  background:#F8F0DE;
}

/* BACKGROUND IMAGE */
.intro-bg{
  position:absolute;

  inset:0;

  background:
    linear-gradient(
     white
    ),
    url("image/playgroup.jpg");

  background-size:cover;
  background-position:center;

  opacity:0.45;

  z-index:1;
}

.daycare-intro-container{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:1fr 1fr;

  gap:70px;
  align-items:center;
}

.daycare-intro-text h2{
  font-size:56px;
  line-height:1.2;

  color:#5F785D;

  margin:22px 0;
}

.intro-main{
  font-size:20px;
  color:#769A72;

  font-weight:600;

  line-height:1.8;

  margin-bottom:35px;
}

.intro-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.intro-card{
  background:rgba(255,255,255,0.7);

  backdrop-filter:blur(12px);

  padding:24px;

  border-radius:24px;

  box-shadow:0 10px 30px rgba(0,0,0,0.06);
}

.intro-card h4{
  color:#5F785D;
  margin-bottom:12px;
}

.intro-card p{
  color:#666;
  line-height:1.7;
}

.daycare-intro-image{
  position:relative;
}

.daycare-intro-image img{
  width:100%;
  height:650px;

  object-fit:cover;

  border-radius:34px;

  box-shadow:0 20px 50px rgba(0,0,0,0.12);
}

.intro-floating-card{
  position:absolute;

  bottom:30px;
  left:-40px;

  background:#769A72;
  color:#fff;

  padding:28px;

  border-radius:24px;

  width:250px;

  box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

.intro-floating-card h3{
  margin-bottom:10px;
}
/* =========================
   HERO SCHOOL
========================= */

.school-hero{
  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  overflow:hidden;

  background:
  linear-gradient(
    135deg,
    rgba(13,48,79,0.92),
    rgba(13,48,79,0.75)
  ),

  url("image/school-bg.jpg");

  background-size:cover;
  background-position:center;

  padding:140px 8%;
}

/* WRAPPER */
.hero-wrapper{
  width:100%;

  display:grid;
  grid-template-columns:1.1fr 1fr;

  gap:70px;

  align-items:center;
}

/* LEFT */
.hero-content{
  color:white;
  z-index:2;
}

.hero-badge{
  display:inline-block;

  background:#D1A338;

  color:white;

  padding:10px 22px;

  border-radius:999px;

  font-size:13px;
  font-weight:600;
  letter-spacing:1px;

  margin-bottom:28px;
}

.hero-content h1{
  font-size:64px;
  line-height:1.1;

  font-weight:800;

  margin-bottom:28px;
}

.hero-content p{
  font-size:18px;
  line-height:1.9;

  color:rgba(255,255,255,0.85);

  max-width:650px;

  margin-bottom:40px;
}

/* BUTTON */
.hero-buttons{
  display:flex;
  gap:18px;

  margin-bottom:55px;
}

.btn-primary{
  background:#D1A338;
  color:white;

  padding:16px 32px;

  border-radius:14px;

  font-weight:600;
  text-decoration:none;

  transition:0.3s ease;
}

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

.btn-secondary{
  border:1px solid rgba(255,255,255,0.3);

  color:white;

  padding:16px 32px;

  border-radius:14px;

  text-decoration:none;

  backdrop-filter:blur(10px);

  transition:0.3s ease;
}

.btn-secondary:hover{
  background:white;
  color:#0D304F;
}

/* INFO */
.hero-info{
  display:flex;
  gap:18px;

  flex-wrap:wrap;
}

.info-card{
  background:rgba(255,255,255,0.08);

  backdrop-filter:blur(10px);

  padding:20px 24px;

  border-radius:20px;

  border:1px solid rgba(255,255,255,0.1);

  min-width:180px;
}

.info-card h3{
  font-size:20px;
  margin-bottom:6px;

  color:#D1A338;
}

.info-card span{
  font-size:14px;
  color:rgba(255,255,255,0.75);
}

/* RIGHT */
.hero-image-area{
  position:relative;
}

.hero-image-box{
  position:relative;

  border-radius:30px;

  overflow:hidden;

  box-shadow:
  0 30px 80px rgba(0,0,0,0.35);
}

.hero-image-box img{
  width:100%;
  height:700px;

  object-fit:cover;

  display:block;
}

/* FLOATING CARD */
.hero-floating-card{
  position:absolute;

  bottom:40px;
  left:-40px;

  background:white;

  padding:28px;

  border-radius:24px;

  width:320px;

  box-shadow:
  0 20px 60px rgba(0,0,0,0.18);
}

.hero-floating-card span{
  font-size:12px;
  letter-spacing:2px;

  color:#D1A338;

  font-weight:700;
}

.hero-floating-card h3{
  margin:12px 0;

  color:#0D304F;

  font-size:24px;
}

.hero-floating-card p{
  color:#555;
  line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:991px){

  .hero-wrapper{
    grid-template-columns:1fr;
  }

  .hero-content h1{
    font-size:46px;
  }

  .hero-image-box img{
    height:500px;
  }

  .hero-floating-card{
    position:relative;

    left:0;
    bottom:0;

    margin-top:-60px;
  }

}
/* =========================
   ABOUT SCHOOL
========================= */

.school-about{
  padding:100px 8%;
  background:#ffffff;
}

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

.school-about-content h2{
  font-size:48px;
  line-height:1.2;
  margin:20px 0;
  color:#0f172a;
}

.about-text{
  font-size:16px;
  line-height:1.9;
  color:#475569;
  margin-bottom:20px;
}

.about-features{
  margin-top:35px;
  display:flex;
  flex-direction:column;
  gap:20px;
}

.about-feature-card{
  background:#8593A9;
  padding:24px;
  border-radius:20px;
  border:1px solid #e2e8f0;
  transition:0.3s;
}

.about-feature-card:hover{
  transform:translateY(-5px);
  box-shadow:0 15px 30px rgba(0,0,0,0.08);
}

.about-feature-card h3{
  margin-bottom:10px;
  color:#0f172a;
}

.about-feature-card p{
  color:#64748b;
  line-height:1.7;
}

.school-about-image{
  position:relative;
}

.school-about-image img{
  width:100%;
  border-radius:30px;
  object-fit:cover;
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.about-floating-card{
  position:absolute;
  bottom:30px;
  left:-40px;
  background:#ffffff;
  padding:28px;
  width:320px;
  border-radius:24px;
  box-shadow:0 20px 40px rgba(0,0,0,0.12);
}

.about-floating-card span{
  font-size:12px;
  letter-spacing:2px;
  color:#2563eb;
  font-weight:600;
}

.about-floating-card h3{
  margin:12px 0;
  color:#0f172a;
  line-height:1.4;
}

.about-floating-card p{
  color:#64748b;
  line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:991px){

  .school-about-container{
    grid-template-columns:1fr;
  }

  .school-about-content h2{
    font-size:38px;
  }

  .about-floating-card{
    position:relative;
    left:0;
    bottom:0;
    width:100%;
    margin-top:20px;
  }

}
/* =========================
   CORE VALUES
========================= */

.core-values{
  padding:110px 8%;
  background:#8593A9;
  overflow:hidden;
}

.core-values-wrapper{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:70px;
  align-items:start;
}

.core-values-left{
  position:sticky;
  top:100px;
}

.core-values-left h2{
  font-size:50px;
  line-height:1.2;
  color:#0f172a;
  margin:20px 0;
}

.core-values-left p{
  color:#0D304F;
  line-height:1.9;
  margin-bottom:30px;
  font-size:16px;
}

.core-line{
  width:80px;
  height:4px;
  background:#2563eb;
  border-radius:20px;
  margin-bottom:30px;
}

.core-quote{
  font-size:22px;
  line-height:1.7;
  color:#1e293b;
  font-weight:500;
}

.core-values-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

.core-modern-card{
  background:white;
  padding:35px;
  border-radius:28px;
  transition:0.4s;
  border:1px solid #e2e8f0;
  position:relative;
  overflow:hidden;
}

.core-modern-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:5px;
  background:#2563eb;
  transform:scaleX(0);
  transition:0.4s;
}

.core-modern-card:hover::before{
  transform:scaleX(1);
}

.core-modern-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,0.08);
}

.core-letter{
  width:65px;
  height:65px;
  background:#0F2F4F;
  color:#D0A239;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  font-weight:700;
  margin-bottom:25px;
}

.core-modern-card h3{
  font-size:22px;
  color:#0f172a;
  margin-bottom:15px;
}

.core-modern-card p{
  color:#64748b;
  line-height:1.8;
}

/* RESPONSIVE */
@media(max-width:991px){

  .core-values-wrapper{
    grid-template-columns:1fr;
  }

  .core-values-left{
    position:relative;
    top:0;
  }

  .core-values-left h2{
    font-size:38px;
  }

  .core-values-grid{
    grid-template-columns:1fr;
  }

}
/* =========================
   LEARNING EXPERIENCE
========================= */

.learning-modern{
  padding:110px 8%;
  background:linear-gradient(
    to bottom,
    #ffffff,
    #f8fafc
  );
  overflow:hidden;
}

.learning-wrapper{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

/* IMAGE AREA */
.learning-visual{
  position:relative;
}

.learning-visual img{
  width:100%;
  border-radius:32px;
  object-fit:cover;
  box-shadow:0 25px 50px rgba(15,23,42,0.12);
}

/* FLOATING CARD */
.learning-floating-card{
  position:absolute;
  bottom:30px;
  right:-35px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(10px);
  padding:30px;
  width:320px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.6);
  box-shadow:0 20px 40px rgba(15,23,42,0.12);
}

.learning-floating-card span{
  font-size:11px;
  letter-spacing:2px;
  font-weight:700;
  color:#2563eb;
}

.learning-floating-card h3{
  margin:15px 0;
  font-size:28px;
  line-height:1.3;
  color:#0f172a;
}

.learning-floating-card p{
  color:#64748b;
  line-height:1.8;
}

/* CONTENT */
.learning-content h2{
  font-size:50px;
  line-height:1.2;
  margin:22px 0;
  color:#0f172a;
}

.learning-desc{
  color:#64748b;
  line-height:1.9;
  margin-bottom:40px;
  max-width:580px;
}

/* GRID */
.learning-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

/* CARD */
.learning-card{
  background:#ffffff;
  padding:30px;
  border-radius:26px;
  border:1px solid #e2e8f0;
  transition:0.4s;
  position:relative;
  overflow:hidden;
}

.learning-card::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:4px;
  background:linear-gradient(
    to right,
    #2563eb,
    #60a5fa
  );
  transform:scaleX(0);
  transform-origin:left;
  transition:0.4s;
}

.learning-card:hover::before{
  transform:scaleX(1);
}

.learning-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(15,23,42,0.08);
}

/* ICON */
.learning-icon{
  width:58px;
  height:58px;
  border-radius:20px;

  background:linear-gradient(
    135deg,
    #eff6ff,
    #dbeafe
  );

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

  color:#2563eb;
  font-size:24px;
  margin-bottom:22px;
}

.learning-card h3{
  font-size:21px;
  margin-bottom:12px;
  color:#0f172a;
}

.learning-card p{
  color:#64748b;
  line-height:1.8;
}

/* SECTION BADGE */
.section-badge{
  display:inline-block;
  padding:10px 18px;
  border-radius:999px;

  background:#0D304F;
  color:#D1A338;

  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
}

/* RESPONSIVE */
@media(max-width:991px){

  .learning-wrapper{
    grid-template-columns:1fr;
    gap:60px;
  }

  .learning-content h2{
    font-size:38px;
  }

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

  .learning-floating-card{
    position:relative;
    width:100%;
    right:0;
    bottom:0;
    margin-top:20px;
  }

}

/* =========================
   STUDENT ACTIVITIES
========================= */

.activities-modern{
  padding:110px 8%;
  background:#f8fafc;
}

.activities-top{
  text-align:center;
  max-width:760px;
  margin:0 auto 70px;
}

.activities-top h2{
  font-size:52px;
  line-height:1.2;
  margin:20px 0;
  color:#0f172a;
}

.activities-top p{
  color:#64748b;
  line-height:1.9;
  font-size:16px;
}

/* GRID */
.activities-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}

/* CARD */
.activity-modern-card{
  position:relative;
  height:420px;
  border-radius:32px;
  overflow:hidden;
  cursor:pointer;
  box-shadow:0 20px 40px rgba(15,23,42,0.08);
  transition:0.4s ease;
}

/* HAPUS LARGE */
.activity-modern-card.large{
  height:420px;
}

/* IMAGE */
.activity-modern-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:0.6s;
}

/* OVERLAY */
.activity-overlay{
  position:absolute;
  inset:0;

  background:linear-gradient(
    to top,
    rgba(15,23,42,0.88),
    rgba(15,23,42,0.15),
    transparent
  );
}

/* CONTENT */
.activity-content{
  position:absolute;
  bottom:0;
  left:0;
  padding:35px;
  z-index:2;
}

.activity-content span{
  display:inline-block;
  padding:8px 14px;
  border-radius:999px;

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

  color:#ffffff;
  font-size:12px;
  letter-spacing:1px;
  margin-bottom:18px;
}

.activity-content h3{
  font-size:30px;
  color:#ffffff;
  margin-bottom:14px;
}

.activity-content p{
  color:rgba(255,255,255,0.85);
  line-height:1.8;
  max-width:320px;
}

/* HOVER */
.activity-modern-card:hover img{
  transform:scale(1.08);
}

.activity-modern-card:hover{
  transform:translateY(-8px);
  transition:0.4s;
}

/* RESPONSIVE */
@media(max-width:991px){

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

  .activities-top h2{
    font-size:40px;
  }

  .activity-modern-card,
  .activity-modern-card.large{
    height:420px;
  }

}

/* =========================
   SUPPORT HERO MODERN
========================= */

.support-hero-modern{
  padding:140px 8% 100px;

  background:
  linear-gradient(
  135deg,
  #f9fbff 0%,
  #eef4ff 100%
  );
}

.support-container{
  display:grid;

  grid-template-columns:
  1.1fr 1fr;

  gap:70px;

  align-items:center;
}

.support-left h1{
  font-size:64px;

  line-height:1.1;

  color:#0D304F;

  margin:25px 0;
}

.support-left p{
  font-size:17px;

  line-height:1.9;

  color:#555;

  margin-bottom:35px;

  max-width:600px;
}

.support-buttons{
  display:flex;

  gap:16px;

  flex-wrap:wrap;

  margin-bottom:45px;
}

.btn-outline{
  padding:14px 28px;

  border-radius:12px;

  border:1px solid #0D304F;

  color:#0D304F;

  text-decoration:none;

  font-weight:600;
}

.impact-row{
  display:flex;

  gap:40px;

  flex-wrap:wrap;
}

.impact-item h3{
  color:#0D304F;

  margin-bottom:6px;
}

.impact-item span{
  color:#777;

  font-size:14px;
}

.support-right{
  position:relative;
}

.support-right img{
  width:100%;

  height:600px;

  object-fit:cover;

  border-radius:30px;

  box-shadow:
  0 20px 50px rgba(0,0,0,.15);
}

.floating-impact{
  position:absolute;

  bottom:25px;
  left:-40px;

  background:#fff;

  padding:24px;

  border-radius:20px;

  width:280px;

  box-shadow:
  0 15px 35px rgba(0,0,0,.12);
}

.floating-impact h3{
  color:#0D304F;

  margin-bottom:10px;
}

.floating-impact p{
  color:#666;

  line-height:1.7;
}

@media(max-width:991px){

  .support-container{
    grid-template-columns:1fr;
  }

  .support-left h1{
    font-size:46px;
  }

  .floating-impact{
    left:20px;
  }

} 

/* =========================
   SUPPORT SECTION
========================= */

.support-section{
  padding:110px 8%;
  background:#f8fafc;
}

.section-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 70px;
}

.section-header h2{
  font-size:52px;
  line-height:1.2;
  color:#0f172a;
  margin:20px 0;
}

.section-header p{
  color:#64748b;
  line-height:1.9;
  font-size:16px;
}

/* GRID */
.support-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* CARD */
.support-card{
  background:#ffffff;
  padding:45px 35px;
  border-radius:32px;

  border:1px solid #e2e8f0;

  transition:0.4s;
  position:relative;
  overflow:hidden;
}

.support-card::before{
  content:'';

  position:absolute;
  top:0;
  left:0;

  width:100%;
  height:4px;

  background:linear-gradient(
    to right,
    #2563eb,
    #60a5fa
  );

  transform:scaleX(0);
  transform-origin:left;
  transition:0.4s;
}

.support-card:hover::before{
  transform:scaleX(1);
}

.support-card:hover{
  transform:translateY(-10px);

  box-shadow:
    0 20px 40px rgba(15,23,42,0.08);
}

/* ICON */
.support-icon{
  width:72px;
  height:72px;

  border-radius:24px;

  background:linear-gradient(
    135deg,
    #eff6ff,
    #dbeafe
  );

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

  font-size:32px;

  margin-bottom:28px;
}

.support-card h3{
  font-size:24px;
  margin-bottom:15px;
  color:#0f172a;
}

.support-card p{
  color:#64748b;
  line-height:1.8;
}

/* =========================
   CAREER SECTION
========================= */

.career-section{
  padding:110px 8%;
  background:#ffffff;
}

/* GRID */
.career-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}

/* CARD */
.career-card{
  background:#ffffff;

  border-radius:32px;
  overflow:hidden;

  border:1px solid #e2e8f0;

  transition:0.4s;
}

.career-card:hover{
  transform:translateY(-10px);

  box-shadow:
    0 20px 40px rgba(15,23,42,0.08);
}

/* IMAGE */
.career-card img{
  width:100%;
  height:260px;
  object-fit:cover;
}

/* CONTENT */
.career-content{
  padding:32px;
}

.career-content h3{
  font-size:24px;
  margin-bottom:14px;
  color:#0f172a;
}

.career-content p{
  color:#64748b;
  line-height:1.8;
}

/* =========================
   CTA SECTION
========================= */

.support-cta{
  padding:120px 8%;

  background:linear-gradient(
    135deg,
    #eff6ff,
    #ffffff
  );
}

.support-cta .cta-container{
  max-width:900px;
  margin:auto;

  text-align:center;

  background:#ffffff;

  padding:70px 50px;

  border-radius:40px;

  border:1px solid #dbeafe;

  box-shadow:
    0 25px 50px rgba(15,23,42,0.06);
}

.support-cta h2{
  font-size:54px;
  line-height:1.2;
  color:#0f172a;
  margin:25px 0;
}

.support-cta p{
  color:#64748b;
  line-height:1.9;
  max-width:700px;
  margin:0 auto 40px;
}

/* =========================
   BADGE
========================= */

.section-badge{
  display:inline-block;

  padding:10px 18px;

  border-radius:999px;

  background:#eff6ff;
  color:#2563eb;

  font-size:13px;
  font-weight:600;
  letter-spacing:1px;
}

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

.btn-daftar{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:15px 30px;

  border-radius:999px;

  background:#2563eb;
  color:#ffffff;

  text-decoration:none;
  font-weight:600;

  transition:0.3s;
}

.btn-daftar:hover{
  background:#1d4ed8;
  transform:translateY(-3px);
}

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

@media(max-width:991px){

  .support-content h1{
    font-size:46px;
  }

  .section-header h2,
  .support-cta h2{
    font-size:38px;
  }

  .support-grid,
  .career-grid{
    grid-template-columns:1fr;
  }

  .support-cta .cta-container{
    padding:50px 30px;
  }

}
/* =========================
   SCHOOL PURPOSE
========================= */

.school-purpose{
    padding:120px 8%;
    background:#f8fafc;
}

.school-purpose-container{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:40px;
    align-items:start;
}

.purpose-card{
    background:#fff;
    border-radius:30px;
    padding:45px;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
}

.vision-card h2{
    color:#0D304F;
}

.vision-card p{
    color:#5f6d7a;
    line-height:1.9;
}

.purpose-label{
    display:inline-block;
    padding:8px 18px;
    border-radius:50px;

    background:#fff8e8;
    color:#D1A338;

    border:1px solid rgba(209,163,56,.2);

    font-size:.8rem;
    font-weight:600;
    letter-spacing:1px;
}

.vision-card h2,
.mission-card h2{
    margin-top:20px;
    margin-bottom:20px;
    font-size:2rem;
    line-height:1.3;
}

.vision-card p{
    color:rgba(255,255,255,.9);
    line-height:1.9;
}

.mission-card{
    background:#fff;
}

.mission-list{
    display:flex;
    flex-direction:column;
    gap:25px;
    margin-top:30px;
}

.mission-item{
    display:flex;
    gap:20px;
    align-items:flex-start;
    padding-bottom:20px;
    border-bottom:1px solid #e8edf3;
}

.mission-item:last-child{
    border:none;
    padding-bottom:0;
}

.mission-item h3{
    min-width:55px;
    height:55px;
    border-radius:15px;
    background:#D1A338;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1rem;
}

.mission-item p{
    margin:0;
    color:#5f6d7a;
    line-height:1.8;
}

@media(max-width:992px){

    .school-purpose-container{
        grid-template-columns:1fr;
    }

}

/* =====================================================
   RESPONSIVE FIX PACK — TAMBAHAN PERBAIKAN
   Ditambahkan agar website tampil rapi di HP & tablet.
   Diletakkan paling akhir supaya jadi penentu akhir (override).
===================================================== */

/* ---------------------------------------------------
   1. NAVBAR MOBILE — Hamburger Menu
   Sebelumnya: nav{ display:none; } di bawah 768px
   tanpa pengganti apapun, jadi menu hilang total di HP.
   Sekarang: nav jadi panel geser dari kanan + tombol hamburger.
--------------------------------------------------- */

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  border:none;
  background:transparent;
  cursor:pointer;
  z-index:1100;
  padding:6px;
}

.hamburger span{
  display:block;
  width:100%;
  height:2px;
  background:var(--primary-dark, #12376b);
  border-radius:2px;
  transition:0.3s ease;
}

.hamburger.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2){
  opacity:0;
}

.hamburger.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,20,35,0.45);
  z-index:1040;
}

.nav-overlay.open{
  display:block;
}

@media(max-width:768px){

  .navbar{
    padding:14px 6%;
  }

  .hamburger{
    display:flex;
  }

  nav{
    display:block;
    position:fixed;
    top:0;
    right:-100%;
    width:min(300px, 80vw);
    height:100dvh;
    background:#fff;
    box-shadow:-10px 0 40px rgba(0,0,0,0.15);
    transition:right 0.35s ease;
    overflow-y:auto;
    padding:90px 24px 40px;
    z-index:1050;
  }

  nav.open{
    right:0;
  }

  nav ul{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  nav ul li{
    width:100%;
  }

  nav a{
    display:block;
    padding:12px 6px;
    font-size:15px;
    width:100%;
  }

  /* Dropdown jadi statis (langsung terlihat di bawah menu utama) di mobile */
  .dropdown-content{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    background:#f7f9fc;
    border-radius:12px;
    margin:4px 0 10px 10px;
    display:none;
  }

  .dropdown.open .dropdown-content{
    display:block;
  }

  .dropdown-content a{
    font-size:14px;
    padding:10px 16px;
  }
}

/* ---------------------------------------------------
   2. SCROLLED NAVBAR DI MOBILE
--------------------------------------------------- */
@media(max-width:768px){
  .navbar.scrolled{
    padding:12px 6%;
  }
}

/* ---------------------------------------------------
   3. FLOATING CARD YANG BELUM PUNYA BREAKPOINT
   Semua kartu "melayang" dengan posisi negatif (left/right minus)
   dipaksa jadi elemen biasa (relative, lebar penuh) di HP
   supaya tidak terpotong / menyebabkan scroll horizontal.
--------------------------------------------------- */
@media(max-width:768px){

  .about-floating-card,
  .hero-floating-card,
  .intro-floating-card,
  .learning-floating-card,
  .floating-impact,
  .floating-card{
    position:relative;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    max-width:100%;
    margin-top:18px;
  }

  .hero-floating-card{
    margin-top:24px;
  }
}

/* Cegah SEMUA floating card horizontal-scroll di lebar manapun di bawah 480px,
   sebagai jaring pengaman tambahan untuk class floating yang mungkin terlewat */
@media(max-width:480px){

  [class*="floating"]{
    max-width:100% !important;
  }
}

/* ---------------------------------------------------
   4. GRID 3 KOLOM — tablet besar terlalu sempit
   activities-grid, support-grid, career-grid: 3 kolom
   baru pecah di 991px. Ditambah breakpoint tengah.
--------------------------------------------------- */
@media(max-width:1100px) and (min-width:769px){

  .activities-grid,
  .support-grid,
  .career-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* ---------------------------------------------------
   5. INTRO CARD GRID (2 kolom) — tidak ada breakpoint sama sekali
--------------------------------------------------- */
@media(max-width:600px){

  .intro-card-grid{
    grid-template-columns:1fr;
  }

  .daycare-intro-text h2{
    font-size:36px;
  }

  .intro-main{
    font-size:17px;
  }
}

@media(max-width:768px){

  .daycare-intro-container{
    grid-template-columns:1fr;
    gap:40px;
  }

  .daycare-intro-image img{
    height:380px;
  }

  .intro-floating-card{
    position:relative;
    left:0;
    bottom:0;
    width:100%;
    margin-top:16px;
  }
}

/* ---------------------------------------------------
   6. HEADING / FONT SIZE — penyesuaian tambahan untuk HP kecil (≤480px)
   Banyak heading masih 38-46px setelah breakpoint 768px/991px,
   yang masih besar untuk layar 360-414px. Diturunkan lagi sedikit.
--------------------------------------------------- */
@media(max-width:480px){

  .hero h1,
  .admission-overlay h1,
  .contact-hero-content h1,
  .support-left h1,
  .hero-content h1{
    font-size:34px !important;
  }

  .hero p,
  .hero-desc{
    font-size:15px !important;
  }

  .history-content h2,
  .team-left h2,
  .curriculum-header h2,
  .program-header h2,
  .parents-content h2,
  .contact-left h2,
  .about-preview-text h2,
  .cta-content h2,
  .routine-content h2,
  .team-members-modern h2,
  .school-about-content h2,
  .core-values-left h2,
  .learning-content h2,
  .activities-top h2,
  .section-header h2,
  .support-cta h2,
  .map-title h2,
  .daycare-content h2,
  .care-content h2,
  .daycare-intro-text h2{
    font-size:30px !important;
    line-height:1.25 !important;
  }

  .about-text h2,
  .history-text h2,
  .team-text h2,
  .team-members h2,
  .admission-title,
  .card-header h2{
    font-size:26px !important;
  }

  .history-floating-card h3,
  .team-floating h3,
  .parents-floating h3{
    font-size:26px;
  }
}

/* ---------------------------------------------------
   7. GRID 2 KOLOM YANG BELUM TURUN DI HP KECIL
   (school-about, core-values, learning, daycare-intro
   sudah turun di 991px, ini hanya memastikan gap & padding rapi)
--------------------------------------------------- */
@media(max-width:480px){

  .school-about,
  .core-values,
  .learning-modern,
  .daycare-intro,
  .school-purpose{
    padding:70px 6%;
  }

  .school-about-container,
  .core-values-wrapper,
  .learning-wrapper{
    gap:32px;
  }
}

/* ---------------------------------------------------
   8. GAMBAR TINGGI FIXED — terlalu tinggi di HP kecil
   Beberapa img height masih 380-500px setelah breakpoint 768px.
   Diturunkan lagi untuk HP kecil agar proporsional.
--------------------------------------------------- */
@media(max-width:480px){

  .history-image-side img,
  .team-right img,
  .parents-image img,
  .curriculum-image img,
  .routine-image img,
  .cta-image img,
  .daycare-intro-image img,
  .support-right img,
  .hero-image-box img{
    height:280px !important;
  }

  .member-card img,
  .member-image img{
    height:240px !important;
  }
}

/* ---------------------------------------------------
   9. TABEL/FORM INPUT — pastikan tidak overflow di HP kecil
--------------------------------------------------- */
@media(max-width:480px){

  .admission-form,
  .contact-form-box{
    padding:24px;
  }

  .form-group input,
  .form-group select,
  .form-group textarea,
  .input-group input,
  .input-group textarea{
    padding:14px 16px;
    font-size:14px;
  }
}

/* ---------------------------------------------------
   10. MENCEGAH OVERFLOW HORIZONTAL GLOBAL
   Beberapa elemen dekoratif (glow, dots, watermark) memakai
   width besar dengan posisi absolute negatif yang bisa memicu
   scrollbar horizontal pada body di perangkat sempit.
--------------------------------------------------- */
html, body{
  max-width:100%;
  overflow-x:hidden;
}

img{
  max-width:100%;
}

/* =====================================================
   NAVBAR MOBILE — sesuai struktur HTML index.html
   (.menu-toggle, #navbar-menu, class "active")
===================================================== */

.menu-toggle{
  display:none;
  font-size:28px;
  line-height:1;
  color:var(--primary-dark, #12376b);
  cursor:pointer;
  z-index:1100;
  padding:4px 8px;
  user-select:none;
}

.nav-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,20,35,0.45);
  z-index:1040;
}

.nav-overlay.active{
  display:block;
}

@media(max-width:768px){

  .navbar{
    padding:14px 6%;
  }

  .menu-toggle{
    display:block;
  }

  #navbar-menu{
    position:fixed;
    top:0;
    right:-100%;
    width:min(300px, 80vw);
    height:100dvh;
    background:#fff;
    box-shadow:-10px 0 40px rgba(0,0,0,0.15);
    transition:right 0.35s ease;
    overflow-y:auto;
    padding:90px 24px 40px;
    z-index:1050;
  }

  #navbar-menu.active{
    right:0;
  }

  #navbar-menu ul{
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
  }

  #navbar-menu ul li{
    width:100%;
  }

  #navbar-menu nav a,
  #navbar-menu a{
    display:block;
    padding:12px 6px;
    font-size:15px;
    width:100%;
  }

  /* Dropdown jadi statis di mobile, tampil di bawah link utamanya */
  #navbar-menu .dropdown-content{
    position:static;
    opacity:1;
    visibility:visible;
    transform:none;
    box-shadow:none;
    background:#f7f9fc;
    border-radius:12px;
    margin:4px 0 10px 10px;
    display:none;
  }

  #navbar-menu .dropdown.open .dropdown-content{
    display:block;
  }

  #navbar-menu .dropdown-content a{
    font-size:14px;
    padding:10px 16px;
  }
}

@media(max-width:768px){
  .navbar.scrolled{
    padding:12px 6%;
  }
}