*{margin:0;padding:0;box-sizing:border-box}

html {
  scroll-behavior: smooth;

  scroll-margin-top: 100px;
}
/* .hero { background: linear-gradient(...) } */
.hero { background: url('images/katha.jpg') }
body{
font-family:'Poppins',sans-serif;
background:#f8faf9;
}

h2{
font-size:32px;
margin-bottom:30px;
position:relative;
display:inline-block;
}

h2::after{
content:"";
width:60%;
height:3px;
background:#f4c20d;
position:absolute;
left:20%;
bottom:-8px;
}

/* HEADER */
header{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
padding:15px 40px;
background:rgba(0,0,0,0.3);
z-index:1000;
}

header a{
color:white;
margin:0 10px;
text-decoration:none;
}

.logo{height:50px;border-radius:50%}

/* HERO */
/* HERO FIXED */
.hero {
  position: relative;
  height: 100vh;
  background: url('https://t4.ftcdn.net/jpg/01/64/62/13/360_F_164621341_vA1ZtJNeXpctAy7ASvEMtl5R6RG1pzOa.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* LIGHTER OVERLAY (important fix) */

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.1),
    rgba(0,0,0,0.2)
  );
}

/* CONTENT */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 20px;
  animation: fadeUp 1s ease;
}

/* LOGO */
.hero-logo {
  width: 90px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: white;
  padding: 6px;
}

/* TITLE */
.hero h1 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* SUBTEXT */
.hero p {
  font-size: 18px;
  margin-bottom: 25px;
  color: #eee;
}

/* BUTTON */
.hero-btn {
  display: inline-block;
  padding: 14px 32px;
  background: #f4c10f;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.hero-btn:hover {
  background: #ffd84d;
  transform: scale(1.05);
}

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

/* SECTION */
.section{padding:80px 20px;text-align:center}

.about{max-width:700px;margin:auto}

/* SERVICES */
.services {
  padding: 80px 10%;
  background: #f8f9fa;
  text-align: center;
}

.section-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 50px;
  position: relative;
}
@media(max-width:768px){
  .hero h1 {
    font-size: 28px;
  }

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

  .hero-logo {
    width: 70px;
  }
}
.section-title::after {
  content: "";
  width: 60px;
  height: 4px;
  background: #f4c10f;
  display: block;
  margin: 10px auto;
  border-radius: 2px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.service-card {
  background: white;
  padding: 30px 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  transition: 0.3s;
}

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

.service-card i {
  font-size: 32px;
  color: #0a5c36;
  margin-bottom: 15px;
}

.service-card h3 {
  font-size: 20px;
  margin-bottom: 10px;
}

.service-card p {
  font-size: 14px;
  color: #666;
}
/* BOOKING */
.booking-section{
background:url('images/background.jpg') center/cover;
padding:80px 20px;
display:flex;
justify-content:center;
}

.booking-box{
background:white;
padding:30px;
border-radius:10px;
max-width:500px;
}

.row{display:flex;gap:10px}

input,textarea{
width:100%;
padding:10px;
margin:8px 0;
}

.book-btn{
background:#f4c20d;
padding:10px;
border:none;
}

/* FLOAT */
.whatsapp,.call{
position:fixed;
right:20px;
width:50px;height:50px;
display:flex;align-items:center;justify-content:center;
border-radius:50%;
color:white;
}

.whatsapp{bottom:20px;background:#25D366}
.call{bottom:80px;background:#ff9800}
.contact{
background:#f8faf9;
padding:80px 20px;
}

.contact-wrapper{
max-width:1100px;
margin:auto;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

/* LEFT SIDE */
.contact-left{
text-align:left;
}

.contact-item{
display:flex;
align-items:center;
gap:12px;
margin-bottom:15px;
font-size:16px;
}

.contact-item i{
color:#0b5d3b;
font-size:18px;
}

/* SOCIAL */
.social-icons{
margin-top:20px;
}

.social-icons a{
font-size:22px;
margin-right:15px;
color:#0b5d3b;
transition:0.3s;
}

.social-icons a:hover{
color:#f4c20d;
}

/* RIGHT FORM */
.contact-right form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-right input,
.contact-right textarea{
padding:12px;
border-radius:8px;
border:1px solid #ddd;
font-size:14px;
}

.contact-right textarea{
min-height:120px;
}

.contact-right button{
background:#f4c20d;
border:none;
padding:12px;
border-radius:30px;
font-weight:500;
cursor:pointer;
}

/* MOBILE */
@media(max-width:768px){
.contact-wrapper{
grid-template-columns:1fr;
}
}

/* MOBILE FIX */
@media(max-width:768px){
.contact-container{
grid-template-columns:1fr;
}
}
.vehicle-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
max-width:1200px;
margin:auto;
}

.vehicle-card{
position:relative;
overflow:hidden;
border-radius:18px;
cursor:pointer;
}

.vehicle-card img{
width:100%;
height:260px;
object-fit:cover;
transition:0.4s;
}

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

.overlay{
position:absolute;
bottom:0;
left:0;
width:100%;
padding:20px;
background:linear-gradient(transparent,rgba(0,0,0,0.8));
color:white;
}

.overlay h3{
margin-bottom:5px;
}
/* FOOTER */
.footer{
background:#0b5d3b;
color:white;
padding:20px;
}

.footer-content{
max-width:1100px;
margin:auto;
display:flex;
justify-content:space-between;
align-items:center;
}

.footer-social a{
color:white;
margin-left:15px;
font-size:18px;
}

@media(max-width:768px){
.footer-content{
flex-direction:column;
gap:10px;
}
}

/* HERO ABOUT */
.about-hero{
position:relative;
height:70vh;
background:url('images/kuttanad.jpg') center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:white;
}

.about-overlay{
position:absolute;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
}

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

.about-btn{
margin-top:15px;
display:inline-block;
background:#f4c10f;
padding:10px 25px;
border-radius:25px;
text-decoration:none;
color:black;
font-weight:600;
}

/* DETAILS */
.about-details{
padding:80px 20px;
background:#fff;
}

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

.about-img img{
width:100%;
border-radius:12px;
}

.about-text h2{
margin-bottom:15px;
}

.about-text p{
color:#555;
line-height:1.7;
margin-bottom:10px;
}

.about-tagline{
margin-top:15px;
color:#f4c10f;
}

/* STATS */
.about-stats{
display:flex;
gap:30px;
margin-top:20px;
}

.about-stats h3{
color:#0b5d3b;
}

/* MOBILE */
@media(max-width:768px){
.about-container{
grid-template-columns:1fr;
}
}

/* updated */
.hero {
  position: relative;
  height: 100vh;
  background: url('images/kuttanad1.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* OVERLAY */
.hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(0,0,0,0.6),
    rgba(0,0,0,0.75)
  );
}

/* CONTENT */
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 20px;
}

/* LOGO */
.hero-logo {
  width: 90px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: white;
  padding: 8px;
}
.hero {
  position: relative;
  height: 100vh;
  background: url('images/kuttanade2.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
}

/* DARK OVERLAY */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.75)
  );
}
.about-hero {
  position: relative;
  height: 70vh;
  background: url('images/kuttanade.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}
.about-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

.about-hero-content {
  position: relative;
  z-index: 2;
}
/* CONTENT */
.hero-content {
  position: relative;
  z-index: 2;
}
/* BUTTON */
.hero-btn {
  display: inline-block;
  padding: 14px 30px;
  background: #f4c10f;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.hero-btn:hover {
  background: #ffd84d;
  transform: scale(1.05);
}

/* MOBILE */
@media(max-width:768px){
  .hero-content h1{
    font-size: 28px;
  }

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

  .hero-logo{
    width: 70px;
  }
}