body{
  font-family: Arial, sans-serif;
  margin:0;
  background:#f4f6f9;
}

header{
  background:#0f766e;
  }
.page-header{	
  background:linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
  url('../assets/banner.jpg');
  background-size: cover;
  background-position: center;
  color:white;
  text-align:center;
  padding:120px 20px;
  }
.container{
  width:90%;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

nav a{
  color:white;
  text-decoration:none;
  margin-left:15px;
}

.hero{
  background:
    linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
    url('../assets/banner.jpg');
  background-size: cover;
  background-position: center;
  color:white;
  text-align:center;
  padding:120px 20px;
}

.content{
  width:90%;
  margin:40px auto;
  background:white;
  padding:30px;
  border-radius:10px;
}

footer{
  background:#0f172a;
  color:white;
  text-align:center;
  padding:20px;
  margin-top:40px;
}

.btn{
  display:inline-block;
  margin-top:20px;
  background:#ffffff;
  color:#0f766e;
  padding:12px 24px;
  border-radius:8px;
  text-decoration:none;
  font-weight:bold;
}

.btn:hover{
  background:#e2e8f0;
}

.info-boxes{
  width:90%;
  margin:40px auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.box{
  background:white;
  padding:25px;
  border-radius:15px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transition:0.3s;
}

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

.box h3{
  margin-top:0;
  color:#0f766e;
}



.profile-top{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:30px;
  align-items:start;
}

.profile-top img{
  width:100%;
  border-radius:15px;
  box-shadow:0 6px 18px rgba(0,0,0,0.15);
}

.visi-misi{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:25px;
}

.visi{
  background:#f8fafc;
  padding:25px;
  border-radius:15px;
}

.stats{
  width:90%;
  margin:30px auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;
}

.stat-box{
  background:#0f766e;
  color:white;
  text-align:center;
  padding:30px 20px;
  border-radius:15px;
}

.stat-box h3{
  font-size:38px;
  margin:0;
}

.stat-box p{
  margin-top:10px;
  font-size:16px;
}

@media(max-width:768px){

  .profile-top{
    grid-template-columns:1fr;
  }

  .visi-misi{
    grid-template-columns:1fr;
  }

}

.gallery-container{
  width:90%;
  margin:40px auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;
}

.gallery-item{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  box-shadow:0 8px 24px rgba(0,0,0,0.12);
  background:white;
}

.gallery-item img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
  transition:transform 0.5s ease;
}

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

.overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(transparent, rgba(0,0,0,0.75));
  color:white;
  padding:22px 18px;
  font-size:18px;
  font-weight:600;
}

.gallery-item::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(15,118,110,0.12);
  opacity:0;
  transition:opacity 0.3s ease;
}

.gallery-item:hover::after{
  opacity:1;
}

.news-container{
  width:90%;
  margin:40px auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:25px;
}

.news-card{
  background:white;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,0.08);
  transition:0.3s;
}

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

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

.news-content{
  padding:22px;
}

.news-date{
  display:inline-block;
  background:#0f766e;
  color:white;
  padding:6px 12px;
  border-radius:20px;
  font-size:13px;
  margin-bottom:12px;
}

.news-content h3{
  margin:0 0 10px;
  color:#0f172a;
}

.news-content p{
  color:#475569;
  line-height:1.6;
}

.news-content a{
  color:#0f766e;
  text-decoration:none;
  font-weight:600;
}

.wa-float{
  position:fixed;
  width:60px;
  height:60px;
  bottom:25px;
  right:25px;
  background:#25d366;
  color:white;
  border-radius:50%;
  text-align:center;
  line-height:60px;
  font-size:28px;
  text-decoration:none;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  z-index:999;
}

.contact-container{
  width:90%;
  margin:40px auto;
  display:grid;
  grid-template-columns:350px 1fr;
  gap:30px;
}

.contact-info{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.contact-card{
  background:white;
  padding:22px;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.contact-card h3{
  margin-top:0;
  color:#0f766e;
}

.contact-map{
  background:white;
  padding:12px;
  border-radius:18px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.contact-map iframe{
  border-radius:14px;
}

@media(max-width:900px){
  .contact-container{
    grid-template-columns:1fr;
  }
}

.footer{
  background:#0f172a;
  color:#e2e8f0;
  margin-top:60px;
}

.footer-container{
  width:90%;
  margin:auto;
  padding:50px 0 30px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:30px;
}

.footer-col h3{
  color:#ffffff;
  margin-bottom:18px;
}

.footer-col p{
  line-height:1.7;
  color:#cbd5e1;
}

.footer-col a{
  display:block;
  color:#cbd5e1;
  text-decoration:none;
  margin-bottom:10px;
}

.footer-col a:hover{
  color:#14b8a6;
}

.footer-bottom{
  border-top:1px solid #334155;
  text-align:center;
  padding:18px;
  color:#94a3b8;
}

.logo-area{
  display:flex;
  align-items:center;
  gap:15px;
}

.logo{
  width:70px;
  height:70px;
  object-fit:contain;
}

.logo-text h2{
  margin:0;
  color:white;
  font-size:22px;
}

.logo-text p{
  margin:4px 0 0;
  color:#d1fae5;
  font-size:14px;
}

.btn-facebook{ 
  display:inline-flex; 
  align-items:center; 
  gap:8px; 
  background:#0f172a; 
  color:#fff; 
  padding:10px 15px; 
  border-radius:8px; 
  text-decoration:none; 
  font-weight:600; } 

.btn-facebook img{ 
  width:20px; 
  height:20px; }