*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  list-style:none;
  text-decoration:none;
}

body{
  font-family:'Poppins', sans-serif;
  background:#FDECEF;
}

/* ==================== Navbar ====================== */
.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 4%;
  background:#FFFFFF;
  border: #383737;
  box-shadow:0 0 15px rgba(0,0,0,0.5);
  position:relative;
  z-index:1000;
}

.logo img{
    width: 3rem;
}

.nav-links{
  display:flex;
  gap:35px;
}

.nav-links li{
  list-style:none;
}

.nav-links li a{
  color:#5C4033;
  font-size:16px;
  font-weight:500;
  position:relative;
  transition:0.3s;
}

.nav-links li a::after{
  content:"";
  position:absolute;
  width:0%;
  height:2px;
  left:0;
  bottom:-5px;
  background:#D4AF37;
  transition:0.4s;
}

.nav-links li a:hover::after{
  width:100%;
}

.nav-links li a:hover{
  color:#6B8E6E;
}

.menu-toggle{
  display:none;
  font-size:28px;
  color:#6B8E6E;
  cursor:pointer;
}

/* =================== Video Hero Section ========================= */
.video-hero{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}

.bg-video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.45);
}

.hero-content{
  position:relative;
  z-index:2;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  color:#fff;
  padding:0 20px;
}

.hero-content h1{
  font-family:'Playfair Display', serif;
  font-size:60px;
  margin-bottom:20px;
  letter-spacing:2px;
}

.hero-content p{
  max-width:650px;
  font-size:18px;
  margin-bottom:30px;
  line-height:1.6;
}

.hero-btn{
  padding:12px 35px;
  background:#D4AF37;
  color:#fff;
  border-radius:30px;
  font-weight:500;
  transition:0.3s;
}

.hero-btn:hover{
  background:#6B8E6E;
}

/* ================= WHY CHOOSE US ================= */

.why-choose{
  padding:80px 8%;
  background:#FFF8F2;
  text-align:center;
}

.section-title{
  font-family:'Playfair Display', serif;
  font-size:40px;
  color:#6B8E6E;
  margin-bottom:15px;
}

.section-subtitle{
  color:#5C4033;
  max-width:600px;
  margin:0 auto 50px;
  font-size:16px;
}

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.card{
  background:#ffffff;
  padding:35px 25px;
  border-radius:15px;
  box-shadow:0 8px 25px rgba(0,0,0,0.05);
  transition:0.4s ease;
}

.card i{
  font-size:35px;
  color:#D4AF37;
  margin-bottom:20px;
}

.card h3{
  font-size:20px;
  margin-bottom:15px;
  color:#6B8E6E;
}

.card p{
  font-size:14px;
  color:#5C4033;
  line-height:1.6;
}

.card:hover{
  transform:translateY(-8px);
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

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

.about-section{
padding:90px 8%;
background:#FDECEF;
}

.about-container{
display:grid;
grid-template-columns: 420px 1fr;
align-items:center;
gap:35px;
max-width:1200px;
margin:auto;
}

/* IMAGE FIX FOR PORTRAIT */
.about-image{
width:100%;
height:520px;
overflow:hidden;
border-radius:20px;
}

.about-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* CONTENT */

.about-content h2{
font-family:'Playfair Display', serif;
font-size:38px;
color:#6B8E6E;
margin-bottom:20px;
}

.about-content p{
font-size:16px;
color:#5C4033;
line-height:1.7;
margin-bottom:15px;
}

.about-btn{
display:inline-block;
margin-top:15px;
padding:12px 32px;
background:#D4AF37;
color:#fff;
border-radius:30px;
font-weight:500;
transition:0.3s;
}

.about-btn:hover{
background:#6B8E6E;
}

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

.services-section{
padding:90px 8%;
background:#FFF8F2;
}

.services-container{
max-width:1200px;
margin:auto;
}

/* heading */

.section-header{
text-align:center;
margin-bottom:60px;
}

.small-title{
color:#D4AF37;
font-size:18px;
font-weight:600;
letter-spacing:2px;
}

.section-header h2{
font-family:'Playfair Display', serif;
font-size:40px;
color:#6B8E6E;
margin-top:5px;
}

/* grid */

.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}
.service-card{
background:#fff;
border-radius:15px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,0.05);
text-align:center;
}

.service-card img{
width:100%;
height:350px;
display:block;
border-radius:10px;
}

.service-card h3{
padding:18px;
font-size:18px;
color:#5C4033;
}

.service-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.08);
}

/* ================= OUR WORK ================= */
.work-section{
padding:80px 8%;
background:#f7f7f7; 
}

.work-container{
max-width:1200px;
margin:auto;
}

.work-heading{
text-align:center;
margin-bottom:50px;
}

.work-heading h2{
font-family:'Playfair Display', serif;
font-size:38px;
color:#6B8E6E;
margin-bottom:10px;
}

.work-heading p{
color:#5C4033;
font-size:15px;
}

.work-gallery{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:15px;
}

.work-img{
overflow:hidden;
border-radius:10px;
animation:fadeUp 1s ease forwards;
}

.work-img img{
width:100%;
height:240px;
border-radius:8px;
transition:0.4s;
}

.work-img:hover img{
transform:scale(1.1);
}

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

/* ================= FOOTER ================= */
.footer{
background:#6B8E6E;
color:#fff;
padding:60px 8% 20px;
text-align:center;
}

.footer-container{
max-width:1200px;
margin:auto;
}

.footer-logo img{
width:140px;
margin-bottom:20px;
}

.footer-nav{
margin-bottom:25px;
}

.footer-nav a{
color:#fff;
margin:0 15px;
font-size:15px;
transition:0.3s;
}

.footer-nav a:hover{
color:#D4AF37;
}

.footer-contact{
margin-bottom:25px;
}

.footer-contact p{
margin:8px 0;
font-size:15px;
}

.footer-contact i{
margin-right:8px;
color:#D4AF37;
}

.footer-social{
margin-bottom:25px;
}

.footer-social a{
display:inline-block;
margin:0 8px;
width:38px;
height:38px;
line-height:38px;
background:#D4AF37;
color:#fff;
border-radius:50%;
font-size:16px;
transition:0.3s;
}

.footer-social a:hover{
background:#fff;
color:#6B8E6E;
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,0.2);
padding-top:15px;
font-size:14px;
}

/* ========================= Responsive ========================= */

/* 1024px */
@media(max-width:1024px){
  .nav-links{
    gap:25px;
  }

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

  .cards{
    grid-template-columns:repeat(2,1fr);
  }

  .about-container{
grid-template-columns:350px 1fr;
gap:50px;
}

.about-image{
height:480px;
}

.services-grid{
grid-template-columns:repeat(2,1fr);
}

.work-gallery{
grid-template-columns:repeat(3,1fr);
}

}

/* 768px */
@media(max-width:768px){
  
  .nav-links{
    position:absolute;
    top:100%;
    right:0;
    width:100%;
    background:#fff;
    flex-direction:column;
    align-items:center;
    display:none;
    padding:30px;
    gap:1.5rem;
    box-shadow:0 10px 20px rgba(0,0,0,0.05);
  }

  .nav-links.active{
    display:flex;
  }

  .menu-toggle{
    display:block;
  }

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

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

  .section-title{
    font-size:32px;
  }

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

  .about-container{
grid-template-columns:1fr;
text-align:center;
}

.about-image{
height:420px;
}

.section-header h2{
font-size:32px;
}

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

.work-gallery{
grid-template-columns:repeat(2,1fr);
}

.work-img img{
height:140px;
}

.footer-nav a{
display:block;
margin:8px 0;
}
}

/* 480px */
@media(max-width:480px){
  .logo{
    font-size:22px;
  }

  .navbar{
    padding:15px 5%;
  }

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

  .hero-content p{
    font-size:14px;
  }

  .hero-btn{
    padding:10px 25px;
    font-size:14px;
  }

  .why-choose{
    padding:60px 5%;
  }

  .section-title{
    font-size:26px;
  }

  .section-subtitle{
    font-size:14px;
  }

  .card{
    padding:25px 20px;
  }

  .about-section{
    padding:60px 5%;
  }

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

  .about-content p{
    font-size:14px;
  }
  
  .about-section{
padding:60px 5%;
}

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

.about-content p{
font-size:14px;
}

.about-image{
height:350px;
}

.services-section{
padding:60px 5%;
}

.section-header h2{
font-size:26px;
}

.service-card img{
height: 320px;
}

.service-card h3{
font-size:16px;
}

.work-section{
padding:60px 5%;
}

.work-heading h2{
font-size:26px;
}

.work-gallery{
grid-template-columns:1fr;
}

.work-img img{
height:340px;
}

.footer{
padding:50px 5% 20px;
}

.footer-logo img{
width:110px;
}

.footer-bottom{
font-size:13px;
}
}