.elementor-43 .elementor-element.elementor-element-dcc7546{--display:flex;}/* Start custom CSS for html, class: .elementor-element-e26824d */:root{
  --dark:#005c83;
  --primary:#00b3b7;
  --light:#5ec8e5;
  --white:#ffffff;
}

/* GENERAL */
body{
  margin:0;
  font-family:'Poppins',sans-serif;
  background:#f4f9fb;
  color:#1f2937;
}

.container{
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
}

h2{
  font-size:2.4rem;
  margin-bottom:20px;
}

/* ================= HERO ================= */

/* ================= HERO 16:9 ================= */

.sem-hero{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;   /* ini bikin rasio 16:9 */
  background:url("https://cdna.uns.ac.id/wp-content/uploads/sites/47/2025/08/CPN-6258MKD2-4645-scaled.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:white;
  overflow:hidden;
}


.sem-hero .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(0,92,131,.85), rgba(0,179,183,.75));
}

.hero-content{
  position:relative;
  z-index:2;
  max-width:800px;
}

.hero-content h1{
  font-size:3.2rem;
  font-weight:800;
  line-height:1.2;
}

.hero-content p{
  font-size:1.2rem;
  opacity:.9;
}

.badge{
  display:inline-block;
  background:var(--light);
  color:var(--dark);
  padding:6px 18px;
  border-radius:50px;
  font-size:.8rem;
  font-weight:600;
  margin-bottom:25px;
}

/* ================= ABOUT ================= */

.sem-about{
  padding:110px 20px;
  background:linear-gradient(180deg,#ffffff,#eef9fc);
  text-align:center;
}

.sem-about h2{
  color:var(--dark);
}


.about-text{
  max-width:800px;
  margin:0 auto;
  font-size:1.05rem;
  color:#4b5563;
  text-align: justify;
  text-align-last: center; /* biar baris terakhir tetap rata tengah */
}

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

.feature{
  background:white;
  padding:35px;
  border-radius:20px;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  transition:.4s ease;
}

.feature:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,.1);
}

.feature h3{
  color:var(--primary);
}

/* ================= ACHIEVEMENT (FIXED CLEAN LOOK) ================= */

.sem-achievement{
  padding:120px 20px;
  background:#f4fbfd;
  text-align:center;
}

.sem-achievement h2{
  color:var(--dark);
}

.achievement-grid{
  display:flex;
  justify-content:center;
  gap:50px;
  margin-top:70px;
  flex-wrap:wrap;
}

.achievement-card{
  background:white;
  padding:45px;
  border-radius:24px;
  min-width:280px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  border-top:6px solid var(--primary);
  transition:.4s ease;
}

.achievement-card:hover{
  transform:translateY(-10px);
  box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.year{
  font-size:.85rem;
  color:var(--primary);
  display:block;
  margin-bottom:15px;
  font-weight:600;
}

/* ================= GALLERY ================= */

.sem-gallery{
  padding:110px 20px;
  background:#ffffff;
  text-align:center;
}

.sem-gallery h2{
  color:var(--dark);
}

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

.gallery-grid img{
  width:100%;
  border-radius:20px;
  transition:.5s ease;
  box-shadow:0 20px 50px rgba(0,0,0,.1);
}

.gallery-grid img:hover{
  transform:scale(1.08);
}


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

@media(max-width:768px){
  .hero-content h1{
    font-size:2.2rem;
  }

  h2{
    font-size:1.8rem;
  }
}/* End custom CSS */