:root{
  --yellow:#f5b400;
  --yellow-dark:#d99d00;
  --dark:#17212b;
  --text:#26313a;
  --muted:#69747e;
  --light:#f6f7f8;
  --border:#e2e6e9;
  --white:#fff;
  --green:#168544;
  --radius:16px;
  --shadow:0 10px 30px rgba(23,33,43,.08);
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,Arial,sans-serif;
  color:var(--text);
  background:#fff;
  line-height:1.5;
}

a{
  text-decoration:none;
  color:inherit;
}

img{
  display:block;
  width:100%;
  object-fit:cover;
}

button,
input{
  font:inherit;
}

.container{
  width:min(1160px,calc(100% - 32px));
  margin:0 auto;
}


/* =========================
   HEADER
========================= */

.top-strip{
  background:var(--dark);
  color:#dce2e6;
  font-size:12px;
  padding:8px 0;
}

.top-strip .container{
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--border);
}

.header-inner{
  min-height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.logo{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:Manrope,sans-serif;
  font-size:22px;
  font-weight:800;
  white-space:nowrap;
}

.logo-mark{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--yellow);
  font-size:20px;
}

.logo span:last-child{
  color:#a77400;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:24px;
  font-size:13px;
  font-weight:600;
}

.main-nav a:hover{
  color:#a77400;
}

.header-actions{
  display:flex;
  gap:8px;
}


/* =========================
   BUTTONS
========================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:0;
  border-radius:10px;
  padding:11px 16px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:transform .2s ease,background .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
}

.btn-yellow{
  background:var(--yellow);
  color:#161616;
}

.btn-dark{
  background:var(--dark);
  color:#fff;
}

.btn-outline{
  border:1px solid var(--border);
  background:#fff;
}


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

.hero{
  min-height:620px;
  display:flex;
  align-items:center;
  color:#fff;
  background:
    linear-gradient(
      90deg,
      rgba(15,22,29,.88),
      rgba(15,22,29,.58) 50%,
      rgba(15,22,29,.18)
    ),
  	url("https://www.trawell.in/admin/images/upload/034229966Jodhpur_Mehrangarh_Fort_Main.jpg")
    center/cover no-repeat;
}

.hero-inner{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:70px 0;
}

.hero-label{
  display:inline-block;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.09);
  border-radius:30px;
  font-size:12px;
  font-weight:600;
}

.hero h1{
  max-width:700px;
  margin:17px 0 15px;
  font-family:Manrope,sans-serif;
  font-size:52px;
  line-height:1.06;
  letter-spacing:-1.5px;
}

.hero-text{
  max-width:620px;
  color:#e6ebee;
  font-size:16px;
}

.hero-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px 20px;
  margin-top:22px;
  font-size:13px;
  font-weight:600;
}


/* =========================
   BOOKING BOX
========================= */

.booking-box{
  color:var(--text);
  background:rgba(255,255,255,.98);
  border-radius:24px;
  padding:26px 24px 20px;
  box-shadow:0 18px 55px rgba(0,0,0,.22);
  border:1px solid rgba(226,230,233,.9);
  overflow:hidden;

  width:100%;
  max-width:900px;
  margin:0 auto;
  box-sizing:border-box;
}

/* =========================
   TRIP TABS
========================= */

.trip-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}

.trip-tab {
  min-height: 82px;
  padding: 12px 7px;
  border: 1px solid #e4e9ef;
  border-radius: 16px;
  background: #fff;
  color: #596574;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(30, 50, 70, 0.05);
  transition: 0.2s;
}

.trip-tab:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(30, 50, 70, 0.08);
}

.trip-tab.active {
  background: #1297df;
  color: #fff;
  border-color: #1297df;
  box-shadow: 0 11px 24px rgba(18, 151, 223, 0.25);
}

.trip-icon {
  display: block;
  font-size: 25px;
  line-height: 1;
  margin-bottom: 8px;
}

/* =========================
   BOOKING PANELS
========================= */

.booking-panel {
  display: none;
}

.booking-panel.active {
  display: block;
}

/* =========================
   BOOKING GRID
========================= */

.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}

.booking-field {
  width: 100%;
}

.booking-field label {
  display: block;
  margin: 0 0 7px 1px;
  color: #39465a;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.15px;
}

.booking-field input,
.booking-field select {
  width: 100%;
  height: 48px;
  padding: 0 13px;
  border: 1px solid #d9dfe7;
  border-radius: 9px;
  outline: none;
  background: #fff;
  color: #4a5667;
  font-size: 14px;
  box-sizing: border-box;
}

.booking-field input::placeholder {
  color: #9aa5b4;
}

.booking-field input:focus,
.booking-field select:focus {
  border-color: #1297df;
  box-shadow: 0 0 0 3px rgba(18, 151, 223, 0.10);
}

/* =========================
   CHECK FARE BUTTON
========================= */

.fare-btn {
  width: 100%;
  height: 49px;
  margin-top: 16px;
  border: 0;
  border-radius: 9px;
  background: #f2b900;
  color: #111;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: 0.2s;
}

.fare-btn:hover {
  background: #e4ad00;
  transform: translateY(-1px);
}

.fare-btn:disabled {
  background: #e4eaf1;
  color: #a9b3c0;
  cursor: not-allowed;
  transform: none;
}

/* =========================
   ROUND TRIP
========================= */

.round-extra {
  margin-top: 14px;
  width: 100%;
}

.round-extra label {
  display: block;
  margin: 0 0 7px 1px;
  color: #39465a;
  font-size: 11px;
  font-weight: 800;
}

.stop-row {
  display: flex;
  gap: 9px;
  margin-bottom: 9px;
  width: 100%;
}

.stop-row select {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 13px;
  border: 1px solid #d9dfe7;
  border-radius: 9px;
  background: #fff;
  color: #4a5667;
  font-size: 14px;
}

.remove-stop {
  width: 46px;
  flex-shrink: 0;
  border: 1px solid #d9dfe7;
  border-radius: 9px;
  background: #fff;
  color: #8b95a3;
  font-size: 19px;
  cursor: pointer;
}

.add-stop {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 0;
  background: none;
  color: #008bd4;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  padding: 2px 0;
  margin-top: 1px;
}

.add-stop:hover {
  text-decoration: underline;
}

/* =========================
   RATING STRIP
========================= */

.rating-strip {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 13px;
  margin-top: 20px;
  color: #39475a;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.rating-strip span + span {
  border-left: 1px solid #ccd2da;
  padding-left: 13px;
}

/* =========================
   BOOKING NOTE
========================= */

.booking-note {
  margin: 8px 0 0;
  text-align: center;
  color: #89929a;
  font-size: 10px;
}

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

@media (max-width: 768px) {

  .booking-box {
    width: calc(100% - 30px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 16px 18px;
    border-radius: 20px;
  }

  .trip-tabs {
    gap: 8px;
    margin-bottom: 20px;
  }

  .trip-tab {
    min-height: 70px;
    font-size: 11px;
  }

  .trip-icon {
    font-size: 21px;
    margin-bottom: 6px;
  }

  .booking-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .rating-strip {
    flex-direction: column;
    gap: 7px;
  }

  .rating-strip span + span {
    border-left: 0;
    padding-left: 0;
  }
}

/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 480px) {

  .booking-box {
    width: calc(100% - 20px);
    padding: 16px 12px;
  }

  .trip-tabs {
    gap: 6px;
  }

  .trip-tab {
    min-height: 64px;
    padding: 8px 4px;
    font-size: 10px;
  }

  .trip-icon {
    font-size: 19px;
  }

  .booking-field input,
  .booking-field select,
  .stop-row select {
    height: 46px;
    font-size: 13px;
  }

  .fare-btn {
    height: 47px;
    font-size: 15px;
  }
}
/* =========================
   GENERAL SECTIONS
========================= */

.section{
  padding:76px 0;
}

.section.grey{
  background:var(--light);
}

.section-heading{
  max-width:680px;
  margin-bottom:28px;
}

.section-heading h2{
  margin:0 0 7px;
  font-family:Manrope,sans-serif;
  font-size:34px;
  line-height:1.15;
  letter-spacing:-.7px;
}

.section-heading p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}


/* =========================
   ROUTES
========================= */

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

.route{
  padding:20px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.route-name{
  font-weight:700;
  font-size:15px;
}

.route-price{
  margin-top:13px;
  color:#9a6d00;
  font-size:13px;
  font-weight:700;
}

.route-info{
  margin-top:5px;
  color:var(--muted);
  font-size:11px;
}


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

.why{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:35px;
  align-items:stretch;
}

.why-photo{
  min-height:430px;
  overflow:hidden;
  position:relative;
  border-radius:18px;
}

.why-photo img{
  height:100%;
}

.support-badge{
  position:absolute;
  right:18px;
  bottom:18px;
  padding:15px 18px;
  border-radius:13px;
  background:#fff;
  box-shadow:var(--shadow);
}

.support-badge strong{
  font-family:Manrope,sans-serif;
  font-size:26px;
}

.support-badge span{
  display:block;
  color:var(--muted);
  font-size:11px;
}

.benefits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.benefit{
  padding:17px;
  border:1px solid var(--border);
  border-radius:13px;
  background:#fff;
}

.benefit-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  margin-bottom:9px;
  border-radius:9px;
  background:#fff3c4;
  font-size:18px;
}

.benefit h3{
  margin:0 0 5px;
  font-size:14px;
}

.benefit p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}


/* =========================
   FLEET
========================= */

.fleet{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.car-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}

.car-card img{
  height:205px;
}

.car-content{
  padding:18px;
}

.car-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.car-top h3{
  margin:0;
  font-size:18px;
}

.car-tag{
  height:max-content;
  padding:5px 8px;
  border-radius:20px;
  background:#eaf7ef;
  color:var(--green);
  font-size:10px;
  font-weight:700;
}

.car-meta{
  display:flex;
  gap:15px;
  margin:11px 0 15px;
  color:var(--muted);
  font-size:12px;
}


/* =========================
   DESTINATIONS
========================= */

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

.place{
  height:240px;
  overflow:hidden;
  position:relative;
  border-radius:15px;
  color:#fff;
}

.place img{
  height:100%;
  transition:transform .3s;
}

.place:hover img{
  transform:scale(1.04);
}

.place:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(
    transparent 40%,
    rgba(0,0,0,.78)
  );
}

.place strong{
  position:absolute;
  left:16px;
  bottom:15px;
  z-index:1;
  font-size:17px;
}


/* =========================
   B2B PARTNER
========================= */

.partner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:42px;
  border-radius:20px;
  background:var(--dark);
  color:#fff;
}

.partner h2{
  margin:0 0 6px;
  font-family:Manrope,sans-serif;
  font-size:30px;
}

.partner p{
  margin:0;
  color:#cbd3d8;
  font-size:13px;
}


/* =========================
   BRANCHES
========================= */

.branches{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}

.branch{
  padding:23px;
  border:1px solid var(--border);
  border-radius:15px;
  background:#fff;
}

.branch-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  margin-bottom:13px;
  border-radius:50%;
  background:#fff3c4;
}

.branch h3{
  margin:0 0 9px;
  font-size:18px;
}

.branch-address{
  min-height:70px;
  margin:0 0 12px;
  color:var(--muted);
  font-size:12px;
}

.branch-phone{
  display:block;
  margin-bottom:12px;
  font-size:13px;
  font-weight:700;
}

.branch-services{
  margin:0;
  color:#777;
  font-size:11px;
  line-height:1.6;
}

.branch .whatsapp{
  margin-top:15px;
  padding:9px 14px;
  border-radius:8px;
  background:var(--yellow);
  display:inline-block;
  font-size:12px;
  font-weight:700;
}


/* =========================
   REVIEWS
========================= */

.reviews{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px;
}

.review{
  padding:20px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.stars{
  letter-spacing:2px;
  color:#c99100;
}

.review p{
  margin:10px 0 0;
  color:#59646d;
  font-size:13px;
  line-height:1.6;
}


/* =========================
   FAQ
========================= */

.faq{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 15px;
}

details{
  padding:15px 17px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#fff;
}

summary{
  cursor:pointer;
  font-size:13px;
  font-weight:700;
}

details p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:12px;
}



/* =========================
   MOBILE MENU
========================= */

.mobile-menu-btn{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fff;
  font-size:23px;
  cursor:pointer;
}

.mobile-menu{
  display:none;
}


/* =========================
   MOBILE BAR
========================= */

.mobile-bar{
  display:none;
}


/* =========================
   TABLET
========================= */

@media(max-width:980px){

  .main-nav{
    display:none;
  }

  .mobile-menu-btn{
    display:block;
  }

  .hero-inner{
    grid-template-columns:1fr;
    gap:30px;
  }

  .booking-box{
    max-width:600px;
  }

  .routes,
  .places{
    grid-template-columns:1fr 1fr;
  }

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

  .fleet,
  .reviews,
  .branches{
    grid-template-columns:1fr 1fr;
  }

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


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  .top-strip{
    display:none;
  }

  .container{
    width:min(100% - 24px,1160px);
  }

  .header-inner{
    min-height:62px;
  }

  .header-actions .btn-dark{
    display:none;
  }

  .mobile-menu-btn{
    display:block;
  }

  .mobile-menu{
    position:absolute;
    left:12px;
    right:12px;
    top:calc(100% + 5px);
    display:none;
    flex-direction:column;
    padding:10px;
    background:#fff;
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 14px 35px rgba(0,0,0,.14);
  }

  .mobile-menu.open{
    display:flex;
  }

  .mobile-menu a{
    padding:12px 13px;
    border-bottom:1px solid #eef0f2;
    font-size:13px;
    font-weight:700;
  }

  .mobile-menu a:last-child{
    border-bottom:0;
  }

  .mobile-menu-book{
    margin-top:6px;
    background:var(--yellow);
    border-radius:9px;
    text-align:center;
  }

  .logo{
    font-size:19px;
  }

  .logo-mark{
    width:34px;
    height:34px;
  }

  .hero{
    min-height:auto;
  }

  .hero-inner{
    padding:48px 0 70px;
  }

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

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

  .hero-list{
    font-size:11px;
    gap:8px 14px;
  }

  .booking-box{
    padding:16px;
    border-radius:15px;
  }

  .trip-tabs{
    gap:7px;
  }

  .trip-tab{
    min-height:70px;
    font-size:11px;
  }

  .trip-icon{
    font-size:22px;
  }

  .booking-form-grid{
    grid-template-columns:1fr;
    gap:13px;
  }

  .full-field,
  .stops-wrap{
    grid-column:auto;
  }

  .rating-strip{
    font-size:10px;
    gap:8px;
  }

  .rating-strip span+span{
    padding-left:8px;
  }

  .section{
    padding:60px 0;
  }

  .section-heading h2{
    font-size:28px;
  }

  .routes,
  .places,
  .fleet,
  .reviews,
  .branches,
  .benefits,
  .faq{
    grid-template-columns:1fr;
  }

  .place{
    height:220px;
  }

  .why-photo{
    min-height:330px;
  }

  .partner{
    display:block;
    padding:28px 23px;
  }

  .partner h2{
    font-size:25px;
  }

  .partner .btn{
    margin-top:18px;
  }

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

  footer{
    padding-bottom:100px;
  }

  .mobile-bar{
    position:fixed;
    left:9px;
    right:9px;
    bottom:9px;
    z-index:1500;
    display:grid;
    grid-template-columns:1fr 1fr 1.15fr;
    gap:6px;
    padding:7px;
    border-radius:14px;
    background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.2);
  }

  .mobile-bar a{
    padding:10px 5px;
    text-align:center;
    border-radius:8px;
    background:#f1f3f4;
    font-size:11px;
    font-weight:700;
  }

  .mobile-bar .book{
    background:var(--yellow);
  }
}

</style>