/*
Template Name: Tour Booking
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/

/*********************destination****************/
.center_dest {
background-image: url(../img/33.jpg);
background-position: center center;
background-size: cover;
}
.center_dest_dt{
background-position: center center;
background-size: cover;
 }
.center_cont{
 background-image: url(../img/96.jpg);
background-position: center center;
background-size: cover;
 }
 
.contact_1lil span{
width:60px;
height:60px;
line-height:60px; 
 }
.contact_1r .form-control:focus{
background:#fff; 
 }
/*********************destination_end****************/



@media screen and (max-width : 767px){
.dest_dt1l h1{
text-align:center; 
 }
.dest_dt1l1i  .pe-0{
padding-right:12px!important; 
 }
.dest_dt1l1i  img{
margin-top:10px;
 }
.dest_dt1r{
margin-top:15px; 
 }
.dest_dt1r1 {
text-align:center;  
 }
.dest_dt2  h2{
text-align:center; 
 }
.dest_dt2  h1{
text-align:center; 
 }
.tour_dt1 .ps-0{
padding-left:12px!important; 
 }
.tour_dt1 .pe-0{
padding-right:12px!important; 
 }
.tour_dt1 img{
min-height:auto;
 }
.tour_dt1r{
margin-top:15px; 
 }
.tour_dt1l {
margin-top:10px;  
 }
.contact_1l{
text-align:center; 
 }
.contact_1lir{
margin-top:10px; 
 }
.contact_1r {
margin-top:15px;  
 }
.detail_1l4b h2{
text-align:center; 
 }
 }


@media (min-width:576px) and (max-width:767px) {

 }
 
@media (min-width:768px) and (max-width:991px) {
.dest_dt1r .offer_1li1 h4{
font-size:16px;
 }
.dest_dt1r .offer_1li1 h5{
font-size:14px;
 }
.dest_dt1r .offer_1li1 h6{
font-size:12px;
 }
.dest_dt1r .offer_1li1 .button_1{
padding:10px!important;
font-size:12px;
 }

.contact_1lil span {
width: 35px;
height: 35px;
line-height: 35px;
font-size:14px!important;
}
 }

@media (min-width:992px) and (max-width:1200px) {
.contact_1lil span {
width: 45px;
height: 45px;
line-height: 45px;
font-size:18px!important;
}
 }
@media (min-width:1201px) and (max-width:1320px) {

 }



.dest_dt1l1i img {
  width: 100%;
  height: 250px; /* adjust height as you like (e.g., 220px, 300px) */
  object-fit: cover; /* ensures image fills area without distortion */
  border-radius: 8px; /* optional – for rounded corners */
}

.dest_dt1l1i .col-md-4 {
  padding: 5px; /* small gap between images */
}

.grid figure {
  margin: 0;
  overflow: hidden;
}
/* Move the whole right-side div slightly downward */
.dest_dt1r {
  margin-top: 30px; /* adjust: 20px–50px depending on layout */
}

/* Style for the info box */
.dest_dt1r1 {
  background: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

/* Image section styling */
.tour_1l1 img {
  width: 100%;
  height: 250px; /* same fixed height as other images */
  object-fit: cover; /* makes all images uniform */
  border-radius: 10px; /* optional rounded corners */
}

/* Optional hover effect for better presentation */
.tour_1l1 img:hover {
  transform: scale(1.03);
  transition: all 0.4s ease-in-out;
}

/* Keep figure clean and aligned */
.grid figure {
  margin: 0;
  overflow: hidden;
}
/* 🔹 Main section images uniform size */
.tour_dt1 img {
  width: 100%;
  height: 250px; /* You can adjust: 220px, 280px, etc. */
  object-fit: cover; /* crops images neatly without distortion */
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

/* 🔹 Large left image slightly taller for better balance */
.tour_dt1 > .col-md-6:first-child img {
  height: 510px; /* roughly double of 250px */
}

/* 🔹 Hover zoom effect */
.tour_dt1 img:hover {
  transform: scale(1.03);
}

/* 🔹 Adjust spacing and overflow handling */
.tour_dt1l,
.tour_dt1li {
  overflow: hidden;
  position: relative;
}

/* 🔹 Overlay alignment fix */
.tour_dt1li1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: all 0.3s ease-in-out;
}

.tour_dt1l:hover .tour_dt1li1 {
  opacity: 1;
}

/* 🔹 Optional: make overlay slightly transparent for better visibility */
.bg_back {
  background: rgba(0, 0, 0, 0.5);
}
/* 🔹 Make all trip images same size */
.profile6il1i img {
  width: 100%;
  height: 250px; /* adjust height as needed (e.g. 230px, 280px) */
  object-fit: cover; /* ensures image fills without distortion */
  border-radius: 10px;
  transition: all 0.4s ease-in-out;
}

/* 🔹 Add hover zoom for a modern touch */
.profile6il1i img:hover {
  transform: scale(1.05);
}

/* 🔹 Keep image container tidy */
.profile6il1i {
  overflow: hidden;
  position: relative;
}

/* 🔹 Overlay (top text like "1 WEEK" & location) positioning fix */
.profile6il1i1 {
  position: absolute;
  top: 10px;
  left: 10px;
}

/* 🔹 Add consistent spacing and balance to cards */
.profile6il {
  background: #fff;
  height: 100%;
  border-radius: 12px;
  transition: all 0.3s ease-in-out;
}

.profile6il:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* 🔹 Optional responsive tweak for mobile screens */
@media (max-width: 768px) {
  .profile6il1i img {
    height: 200px;
  }
}
.booking-card {
    width: 600px;
    background: #fff;
    border-radius: 15px;
    padding: 1.8rem 2rem;
    border: 2px solid #d4af37; /* gold border */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s, box-shadow 0.3s;
  }

  .booking-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  }

  h3 {
    color: #b8860b;
    font-weight: 700;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 0.3rem;
  }

  p {
    text-align: center;
    color: #555;
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
  }

  .nav-tabs {
    border-bottom: none;
    justify-content: center;
    margin-bottom: 1rem;
  }

  .nav-tabs .nav-link {
    border: none;
    color: #555;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    margin: 0 5px;
    transition: all 0.3s;
  }

  .nav-tabs .nav-link.active {
    background-color: #b8860b;
    color: #fff;
  }

  .form-label {
    font-weight: 500;
    
    color: #140000;
    font-size: 0.88rem;
  }

  .form-control {
    border-radius: 10px;
    font-size: 0.85rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid #ccc;
    transition: all 0.3s;
  }

  .form-control:focus {
    border-color: #b8860b;
    box-shadow: 0 0 5px rgba(184,134,11,0.3);
  }

  .btn {
    border-radius: 25px;
    font-weight: 600;
    padding: 0.5rem 0;
  }

  #totalPrice {
    color: #b8860b;
    font-weight: 600;
  }
/* ===== Contact Section ===== */
.contact_1 {
  display: flex;
  gap: 40px; /* Left aur right div ke beech ka space */
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Left Contact Info */
.contact_1l {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  width: 100%;
  max-width: 450px; /* Width set karke left side compact */
}

/* Right Booking Form */
.booking-card {
  width: 600px; /* Form width */
  background: #fff;
  padding: 25px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  position: relative; /* Fixed nahi, flex ke saath align ho */
  max-width: 100%;
}

/* Responsive: Small screens me stacked */
@media (max-width: 992px) {
  .contact_1 {
    flex-direction: column;
    gap: 20px;
  }

  .contact_1l,
  .booking-card {
    max-width: 100%;
  }
}
.contact_1 {
    display: flex;           /* Row ko flex container banaya */
    gap: 30px;               /* Left-right div ke beech gap */
    align-items: stretch;    /* Dono div same height me stretch honge */
}

.contact_1l,
.booking-card {
    flex: 1;                 /* Dono div equal width lene ke liye */
    display: flex;
    flex-direction: column;  /* Inner content column me arrange rahe */
}

/* Optional: agar max-width chahiye */
.booking-card {
    max-width: 600px;       /* Adjust according to your design */
}

/* Rounded border, padding already hai aapke HTML me, lekin height equal ke liye stretch zaruri hai */