/* =========================================================
   Kashi Travels – Homepage (HTML/CSS version of kashitravels.com)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lexend:wght@400;600&display=swap');

:root{
  --maroon:#780000;
  --red:#dd183b;
  --red-dark:#c50023;
  --peach:#ffede6;
  --heading:#0f172a;
  --text:#3a3a3a;
  --border:#222222;
  --grey:#f0f0f0;
  --footer-bottom:#140609;
  --font-body:'DM Sans',sans-serif;
  --font-head:'Lexend',sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text);background:#fff;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,h5,h6{font-family:var(--font-head);font-weight:600;color:var(--heading)}
h1{font-size:45px;line-height:1.1}
h2{font-size:35px;line-height:1.2}
h3{font-size:26px;line-height:1.3}
h6{font-size:18px;line-height:1.6}

.container{max-width:1200px;margin:0 auto}
.container-1140{max-width:1140px;margin:0 auto}
.text-center{text-align:center}
.justify{text-align:justify}

/* Buttons */
.btn{display:inline-block;font-family:var(--font-body);font-size:18px;font-weight:700;line-height:1;padding:18px 24px;border-radius:8px;border:2px solid var(--red);background:var(--red);color:#fff;text-decoration:none;transition:.3s}
.btn:hover{background:#fff;color:var(--red)}
.btn-white{background:#fff;color:var(--red)}
.btn-white:hover{background:var(--red);color:#fff;border-color:#fff}

/* ================= HEADER ================= */
.site-header{position:absolute;top:0;left:0;width:100%;z-index:100;background:var(--maroon);padding:0 20px}
.header-inner{max-width:1240px;margin:0 auto;padding:0 20px;height:137px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px}
.logo img{width:125px;height:auto;padding:16px 0}
.main-nav ul{list-style:none;display:flex}
.main-nav a{display:block;padding:0 16px;font-weight:700;color:#fff;text-decoration:none;font-size:16px;line-height:26px;transition:.3s}
.main-nav a:hover,.main-nav a.active{color:#ffd1bf}
.header-right{display:flex;justify-content:flex-end}
.call-btn{display:inline-block;background:#fff;color:#ffd1bf;border:2px solid #fff;border-radius:8px;padding:18px 24px;font-size:18px;font-weight:700;line-height:1;text-decoration:none;transition:.3s}
.call-btn:hover{background:transparent;color:#fff}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:28px;cursor:pointer}

/* ================= HERO ================= */
.hero{position:relative;background:url('https://kashitravels.com/wp-content/uploads/2025/06/126_15052024175423_0-scaled.jpg') center top/cover no-repeat;padding:0 40px}
.hero::before{content:"";position:absolute;inset:0;background:#090909;opacity:.65}
.hero-inner{position:relative;max-width:1080px;margin:0 auto;padding:190px 0 220px;text-align:center}
.hero h1{color:#fff;padding:0 50px 20px}
.hero p{color:#fff;font-size:20px;line-height:30px;padding:0 54px;margin-bottom:40px}

/* ================= FEATURE STRIP ================= */
.features{padding:0 40px}
.features-box{max-width:1200px;margin:-80px auto 0;position:relative;z-index:2;display:flex;background:var(--peach);border:1px solid var(--border);border-radius:20px}
.feature{flex:1;padding:32px 40px 36px}
.feature h3{margin-bottom:10px}

/* ================= ROUTES ================= */
.routes{padding:40px 10px 0}
.routes .container-1140{padding:10px;display:flex;flex-direction:column;gap:20px}
.routes .body{padding:0 20px}
.routes .body p{margin-bottom:0}
.routes img{width:100%;border-radius:30px}

/* ================= ABOUT ================= */
.about{padding:30px 0}
.about .container{padding:30px;display:flex;flex-direction:column;gap:24px}
.about p a{color:var(--text)}

/* ================= SERVICE CARDS ================= */
.service-cards{background:#fff}
.service-cards .grid{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr}
.service-card{display:flex;flex-direction:column;gap:18px;padding-bottom:30px}
.service-card.purple{background:#e4c8ff}
.service-card.orange{background:#ffd9c1}
.service-card img{width:100%;height:342px;object-fit:cover}
.service-card h3,.service-card p{padding:0 20px}
.service-card .btn{margin:0 20px;align-self:flex-start}

/* ================= TAXI TYPES ================= */
.taxi-types{padding:30px 40px 0;background:#fff}
.taxi-types .head{padding-top:36px}
.taxi-types .head p{margin-top:10px}
.types-box{margin-top:20px;display:flex;justify-content:center;background:var(--peach);border:1px solid var(--border);border-radius:20px}
.type{flex:1;padding:0 56px 56px;display:flex;flex-direction:column;justify-content:center}
.type img{width:100%;height:300px;object-fit:cover;border-radius:16px;margin-top:25px}
.type h3{margin-top:32px;margin-bottom:10px}

/* ================= EXPERIENCE / WHY CHOOSE ================= */
.peach-section{background:var(--peach);padding:30px 40px 50px}
.peach-section .head{padding:36px 180px 0;text-align:center}
.peach-section .head p{margin-top:10px}
.points{display:grid;grid-template-columns:repeat(3,1fr);gap:60px 45px;margin-top:60px}
.point h3{padding-bottom:15px}
.point .line{width:48px;border-top:3px solid var(--red);margin-bottom:18px}
.why{padding:50px 40px}
.why .head{padding:0 180px}

/* ================= CTA BAR ================= */
.cta-wrap{background:var(--peach);padding:0 40px}
.cta-bar{max-width:1200px;margin:0 auto;background:var(--red-dark);border-radius:16px;padding:48px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.cta-bar h3,.cta-bar p{color:#fff}

/* ================= COUNTERS ================= */
.counters{background:var(--grey);padding:50px 40px}
.counters .container{display:flex;justify-content:center}
.counter{flex:1;max-width:300px;display:flex;flex-direction:column-reverse;align-items:center;gap:8px}
.counter .num{font-size:48px;line-height:1;font-weight:700;color:var(--heading)}
.counter .label{font-size:19px;line-height:2.5}

/* ================= REVIEWS ================= */
.reviews{padding:30px 20px}
.reviews-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:24px;font-family:var(--font-head)}
.reviews-head .rating-word{font-size:22px;font-weight:600;color:var(--heading)}
.stars{color:#f6bb06;font-size:20px;letter-spacing:2px}
.reviews-head small{color:#555}
.reviews-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;scrollbar-width:thin}
.review{flex:0 0 280px;scroll-snap-align:start;background:#f4f4f4;border-radius:10px;padding:20px}
.review-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.review .name{font-weight:700;color:#000}
.review .g{margin-left:auto;font-weight:700;color:#4285f4;font-size:18px}
.review p{font-size:15px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

/* ================= DESTINATIONS TEXT ================= */
.destinations{padding:20px 20px}
.destinations .container-1140{display:flex;flex-direction:column;gap:20px}

/* ================= BOOK CTA ================= */
.book-cta{position:relative;background:url('https://kashitravels.com/wp-content/uploads/2025/06/Ertiga-Kerala-1.jpg') left center/cover no-repeat;padding:0 40px}
.book-cta::before{content:"";position:absolute;inset:0;background:#353535;opacity:.65}
.book-cta .inner{position:relative;max-width:750px;margin:0 auto;padding:100px 0;text-align:center}
.book-cta h2,.book-cta p{color:#fff}
.book-cta p{font-size:20px;line-height:32px;margin:12px 0 32px}

/* ================= CONTACT ================= */
.contact{position:relative;background:#f6f6f6 url('https://kashitravels.com/wp-content/uploads/2025/06/2-1.png') center/cover;padding:20px 0}
.contact::before{content:"";position:absolute;inset:0;background:#424242;opacity:.95}
.contact .inner{position:relative;max-width:1000px;margin:0 auto;display:grid;grid-template-columns:400px 1fr;gap:7px}
.contact-info{padding:20px 20px 20px 0;display:flex;flex-direction:column;justify-content:center;gap:20px}
.contact-info .title{color:#fff;font-size:15px;font-weight:700}
.contact-info ul{list-style:none}
.contact-info li{display:flex;gap:12px;align-items:flex-start;color:#f5f5f5;padding-bottom:7.5px}
.contact-info li i{color:#fff;margin-top:5px;width:16px}
.contact-info li a{color:#f5f5f5;text-decoration:none}
.contact-info iframe{width:100%;height:150px;border:0}
.social{display:flex;gap:10px}
.social a{width:45px;height:45px;background:#fff;color:#69727d;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:20px;text-decoration:none;transition:.3s}
.social a:hover{background:var(--red);color:#fff}
.form-card{background:#212121;border-radius:7px;padding:30px 35px 35px;box-shadow:0 10px 20px rgba(0,0,0,.07)}
.form-card h3{color:#fff;text-align:center}
.form-card>p{color:#bdbdbd;text-align:center;margin:8px 0 20px}
.form-box{background:#fff;border-radius:20px;padding:30px}
.form-box form{display:flex;flex-wrap:wrap;gap:18px 16px}
.field{width:calc(50% - 8px)}
.field.full{width:100%}
.field label{display:block;font-weight:500;color:#1e1e1e;line-height:24px}
.field label span{color:#dc2626}
.field .help{font-size:14px;line-height:20px;color:rgba(30,30,30,.65);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;height:44px;padding:10px 12px;font-family:var(--font-body);font-size:16px;border:1px solid rgba(30,30,30,.25);border-radius:6px;background:rgba(30,30,30,.02);box-shadow:0 1px 2px rgba(0,0,0,.05);outline:none}
.field textarea{height:117px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:#111c44}
.phone-wrap{position:relative}
.phone-wrap .code{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text)}
.phone-wrap input{padding-left:52px}
.submit{background:#111c44;color:#fff;border:1px solid #111c44;border-radius:6px;padding:10px 14px;font-family:var(--font-body);font-size:16px;font-weight:500;cursor:pointer}
.submit:hover{opacity:.9}

/* ================= FAQ ================= */
.faq{padding:70px 30px 50px}
.faq .container-1140{display:flex;flex-direction:column;gap:20px}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:10px;border:1px solid #b4b4b4;border-radius:20px}
.faq-col{padding:10px;display:flex;flex-direction:column}
.faq details{margin-bottom:0}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--peach);padding:20px;border:1px solid #d5d8dc;border-radius:20px;color:#1f2124;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;line-height:1;color:#1f2124}
.faq details[open] summary::after{content:"−"}
.faq .answer{background:#fff;padding:20px 30px;border:1px solid #d5d8dc;border-radius:20px}
.locations{padding-top:50px}
.locations h3{text-align:center}
.loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:10px;margin-top:20px}
.loc-grid a{text-decoration:none}
.loc-grid a:hover h6{color:var(--red)}

/* ================= FOOTER ================= */
.site-footer .top{background:linear-gradient(#d7d7d7,#d7d7d7);padding:45px 35px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:0 30px}
.footer-grid h3{font-size:22px;line-height:1.5;margin-bottom:15px}
.footer-logo{display:flex;justify-content:center;margin-bottom:15px}
.footer-logo img{width:113px}
.footer-grid ul{list-style:none}
.footer-grid li a{text-decoration:none;color:var(--text)}
.footer-grid li a:hover{color:var(--red)}
.footer-social{display:flex;gap:14px;margin-top:4px}
.footer-social a{color:var(--heading);font-size:18px}
.site-footer .bottom{background:var(--footer-bottom);padding:20px 40px;text-align:center;color:#fff}

/* WhatsApp floating button */
.wa-float{position:fixed;right:15px;bottom:15px;width:66px;height:66px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;font-size:36px;z-index:999;box-shadow:0 4px 12px rgba(0,0,0,.25);text-decoration:none}

/* ================= RESPONSIVE ================= */
@media (max-width:1024px){
  .header-inner{grid-template-columns:auto 1fr auto}
  .main-nav a{padding:0 10px}
  .peach-section .head,.why .head{padding:36px 40px 0}
  .type{padding:0 24px 40px}
  .contact .inner{grid-template-columns:1fr;padding:0 20px}
  .contact-info{padding:20px 0}
  .footer-grid{grid-template-columns:1fr 1fr;gap:30px}
}
@media (max-width:767px){
  h1{font-size:32px}
  h2{font-size:26px}
  h3{font-size:22px}
  .site-header{position:relative;padding:0 16px}
  .header-inner{height:auto;padding:0;grid-template-columns:auto auto;justify-content:space-between}
  .logo img{width:90px;padding:10px 0}
  .menu-toggle{display:block}
  .main-nav{grid-column:1/-1;display:none}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;padding-bottom:12px}
  .main-nav a{padding:10px 0}
  .header-right{display:none}
  .hero{padding:0 16px}
  .hero-inner{padding:80px 0 130px}
  .hero h1{padding:0 0 16px}
  .hero p{font-size:17px;line-height:1.6;padding:0}
  .features,.taxi-types,.peach-section,.cta-wrap,.counters,.book-cta{padding-left:16px;padding-right:16px}
  .features-box,.types-box{flex-direction:column}
  .feature{padding:24px}
  .routes,.destinations,.reviews{padding-left:16px;padding-right:16px}
  .routes .body{padding:0}
  .routes img{border-radius:16px}
  .about .container{padding:16px}
  .service-cards .grid{grid-template-columns:1fr}
  .service-card img{height:auto}
  .type{padding:0 24px 32px}
  .peach-section .head,.why .head{padding:20px 0 0}
  .points{grid-template-columns:1fr;gap:30px;margin-top:30px}
  .cta-bar{flex-direction:column;align-items:flex-start;padding:32px 24px}
  .counters .container{flex-wrap:wrap}
  .counter{flex:0 0 50%}
  .counter .num{font-size:36px}
  .counter .label{font-size:16px}
  .book-cta .inner{padding:60px 0}
  .book-cta p{font-size:17px;line-height:1.6}
  .field{width:100%}
  .form-card{padding:24px 16px}
  .form-box{padding:20px}
  .faq{padding:40px 16px}
  .faq-grid{grid-template-columns:1fr;gap:0;padding:0}
  .loc-grid{grid-template-columns:1fr;gap:4px}
  .footer-grid{grid-template-columns:1fr}
  .site-footer .top{padding:40px 16px}
}

/* ================= GENERATED PAGES (all inner pages) ================= */
body.hdr-static .site-header{position:relative}
.pg h1,.pg h2,.pg h3,.pg h4,.pg h5,.pg h6{font:inherit;color:inherit;margin:0}
.pg p,.pg ul,.pg ol,.pg figure,.pg blockquote{margin:0;padding:0}
.pg a{color:inherit}
.pg img{max-width:100%}
.pg table{border-collapse:collapse;width:100%}
.pg input,.pg select,.pg textarea,.pg button{font:inherit}
.pg summary{cursor:pointer;list-style:none}
.pg summary::-webkit-details-marker{display:none}
.pg .has-ov{position:relative}
.pg .has-ov>*:not(.ov){position:relative;z-index:1}
.pg .ov{position:absolute;inset:0;z-index:0;pointer-events:none}
.pg{overflow-x:hidden}
.pg .kt-form{display:flex;flex-wrap:wrap;gap:18px 16px;text-align:left}
@media (max-width:1024px){
  .pg .fr{flex-wrap:wrap!important}
  .pg .fr>*{min-width:45%}
}
@media (max-width:767px){
  .pg .fr{flex-direction:column!important;flex-wrap:nowrap!important}
  .pg .fr>*{width:100%!important;max-width:100%!important;min-width:0}
  .pg .fg{grid-template-columns:minmax(0,1fr)!important}
  .pg summary.fr{flex-direction:row!important}
  .pg summary.fr>*{width:auto!important}
  .pg .px{padding-left:16px!important;padding-right:16px!important}
  .pg div[style*="padding"]:not(.px){padding-left:min(12px,4vw)!important;padding-right:min(12px,4vw)!important}
  .pg>div>*>*>div[style*="padding"]{padding-left:16px!important;padding-right:16px!important}
  .pg .f1{font-size:32px!important;line-height:1.2!important}
  .pg .f2{font-size:26px!important;line-height:1.25!important}
  .pg .f3{font-size:22px!important;line-height:1.3!important}
  .pg img{height:auto!important}
  .pg table{display:block;overflow-x:auto}
  .pg iframe{max-width:100%}
  .pg .fg>*{min-width:0}
  .pg input,.pg select,.pg textarea{max-width:100%}
}