/*
Theme Name: Kagra Travels
Theme URI: https://kagratravels.com
Author: Tanish Chauhan
Author URI: https://kagratravels.com
Description: Custom WordPress theme for Kagra Travels — Cab Booking in Ambala Cantt
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: kagra-travels
*/

/* ======= BASIC STYLES ======= */
* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
}

/* === Fix Sticky Header Overlap === */
body {
  scroll-padding-top: 80px; /* ensures anchor links don’t hide behind header */
}

.hero {
  padding-top: 100px; /* adjust if the banner image starts too high */
}

/* ======= HEADER ======= */
.site-header { background: #fff; padding: 0; }

/* ======= NAVBAR (Responsive) ======= */
img.custom-logo {
  height: 45px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* === Hero Section === */
.hero {
  color: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fixed height card images */
#ourFleet .card-img-top,
#popularTrips .card-img-top {
  height: 220px;
  object-fit: cover;
  width: 100%;
}

/* Dark labels */
form .form-label {
  color: #000 !important;
  font-weight: 600;
}

/* === Booking Form Card === */
#booking {
  transition: all 0.3s ease;
}
#booking .form-label {
  font-weight: 600;
}
#booking input,
#booking select {
  border-radius: 6px;
}
#booking button {
  background: #ffcc00;
  color: #000;
  border: none;
  transition: background 0.2s ease;
}
#booking button:hover {
  background: #e0b600;
}

/* === Fleet Carousel === */
#ourFleet .card img {
  height: 220px;
  object-fit: cover;
  border-radius: .3rem .3rem 0 0;
}
#ourFleet .carousel-control-prev-icon,
#ourFleet .carousel-control-next-icon {
  background-size: 40%, 40%;
}
#ourFleet .carousel-control-prev,
#ourFleet .carousel-control-next {
  width: 5%;
}
@media (max-width: 767px) {
  #ourFleet .carousel-control-prev,
  #ourFleet .carousel-control-next {
    width: 10%;
  }
}

#popularTrips .card img {
  height: 180px;
  object-fit: cover;
  border-radius: .3rem .3rem 0 0;
}

#whyChooseUs i {
  transition: transform 0.3s ease;
}
#whyChooseUs i:hover {
  transform: scale(1.1);
}

#testimonials .card {
  transition: transform 0.3s ease;
}
#testimonials .card:hover {
  transform: translateY(-5px);
}
#testimonials img {
  object-fit: cover;
}
#testimonials .text-warning {
  letter-spacing: 1px;
}


/* ===== One Way Packages ===== */
.page-template-page-one-way-packages .card {
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.page-template-page-one-way-packages .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.page-template-page-one-way-packages .btn-warning {
  background-color: #ffcc00;
  color: #000;
  border: none;
  font-weight: 600;
}
.page-template-page-one-way-packages .btn-warning:hover {
  background-color: #e6b800;
}

/* ===== About us ======= */
.page-template-page-about-us .bi {
  transition: transform 0.3s ease;
}
.page-template-page-about-us .bi:hover {
  transform: scale(1.1);
}

.page-template-page-about-us section {
  scroll-margin-top: 80px;
}

/* ===== Contact Us Page ===== */
.page-template-page-contact-us .form-control,
.page-template-page-contact-us textarea {
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.page-template-page-contact-us .form-control:focus,
.page-template-page-contact-us textarea:focus {
  border-color: #ffcc00;
  box-shadow: 0 0 0 0.15rem rgba(255, 204, 0, 0.25);
}

.page-template-page-contact-us .btn-warning {
  background-color: #ffcc00;
  color: #000;
  border: none;
}

.page-template-page-contact-us .btn-warning:hover {
  background-color: #e6b800;
}

/* ===== Our Fleet Page ===== */
/* ===== Fleet Page Modern Styling ===== */
.page-template-page-our-fleet .fleet-filter {
  border: 2px solid #ffcc00;
  color: #222;
  background: transparent;
  font-weight: 500;
  border-radius: 50px;
  padding: 8px 20px;
  transition: all 0.3s ease;
  cursor: pointer;
  transform: translateY(0);
}

.page-template-page-our-fleet .fleet-filter:hover {
  background: rgba(255, 204, 0, 0.15);
  color: #000;
  border: 2px solid #ffcc00;
  box-shadow: 0 3px 8px rgba(255, 204, 0, 0.25);
}

.page-template-page-our-fleet .fleet-filter.active {
  background: #ffcc00;
  color: #000;
  border-color: #ffcc00;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(255, 204, 0, 0.4);
  transform: translateY(-2px);
}

/* Fleet cards */
.fleet-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.fleet-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Image styling */
.fleet-image-wrapper {
  height: 200px;
  overflow: hidden;
}
.fleet-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.fleet-card:hover img {
  transform: scale(1.05);
}

/* Animations */
.fade-in {
  animation: fadeIn 0.3s forwards;
}
.fade-out {
  animation: fadeOut 0.2s forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.95); }
}