/* styles.css - JJ Holidays template*/

/* Root colors similar to Moliva style */
:root{
  --primary: #0d6efd;
  --dark: #0b2545;
  --muted: #6c757d;
  --accent: #ff7a59;
  --light: #f8f9fa;
}

/* Base */
*{box-sizing:border-box}
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#223;
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.p60{
	padding: 20px; 
	
}

/* Navbar */
.navbar-brand img{ border-radius:6px; object-fit:cover; }
.navbar .btn-primary{ padding: .45rem .9rem; }

/* HERO */
.hero-section {
    position: relative;
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed; /* PARALLAX */
    background-repeat: no-repeat;
    transition: background-image 1s ease-in-out; /* FADE BETWEEN IMAGES */
}

/* Top navigation default transparent */
.navbar {
    background-color: rgba(0, 0, 0, 0.55);
    transition: background 0.4s ease-in-out, padding 0.3s;
	z-index: 1030;
	position: fixed !important;
	
    align-items: center;
	width: 100%;
	color: #ffffff!important;
}
.navbar-brand {
	color: #ffffff!important;
}
.navbar-nav a{
	color: #ffffff!important;
}
.navbar-toggler {
    /* REMOVE BORDER */
    border: none !important; 
    
    /* REMOVE SHADOW */
    box-shadow: none !important;
}
.navbar-toggler-icon {
    /* You may need to ensure the icon color contrasts with the hero background. 
       If the icon is dark by default, you might need to force it white here. */
    filter: invert(1); /* Tries to invert the color (often making a dark icon white) */
}

.navbar-collapse {
    /* FIX: Semi-transparent background when toggled open on mobile */
     background-color: rgba(0, 0, 0, 0.85);
}
@media (max-width: 991px) {
    /* Apply semi-transparent background only on mobile/collapsed view */
    .navbar-collapse {
        /* Adjust the RGBA value (0.85 is slightly opaque, 0.5 is very transparent) */
        background-color: rgba(0, 0, 0, 0.85); /* Black with 85% opacity */
        /* Optional: Add slight blurring */
        backdrop-filter: blur(4px); 
        
        /* Ensure the dropdown content is visible over the hero */
        border-radius: 10px;
		padding: 20px;
    }
	.btn-theme-navy{
		padding-left: 0;
	}
}
@media (min-width: 992px) {
    /* Reset background transparency for desktop view */
    .navbar-collapse {
        background-color: transparent;
    }
}

/* Sticky state — semi transparent */
.navbar.scrolled {
    background: rgba(0, 0, 0, 0.55) !important;  /* adjust opacity if needed */
    backdrop-filter: blur(6px); /* smooth frozen-glass look */
	position: fixed !important;
}

/* Custom Button Style for CTA (Accent Color) */
/* Custom Button Style for CTA (Navy Color) */
.btn-theme-navy {
    background: #2973B2; /* Navy Blue */
    padding: 8px 18px;
    border-radius: 8px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border: none;
    transition: background 0.3s, color 0.3s;
}

.btn-theme-navy:hover {
    background: #48A6A7; /* Accent Green/Teal on Hover */
    color: #fff;
}

.navbar-nav .nav-link {
  position: relative;
  padding: 10px 15px;
  color: #333;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color:  #48A6A7; /* Your theme navy blue */
}

.navbar-nav .nav-link.active::after,
.navbar-nav .nav-link:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 2px;
  background:  #48A6A7; /* Theme color */
  border-radius: 2px;
}


/* Add ample spacing to navbar links */
.navbar-nav .nav-item {
    padding-left: .3rem;
    padding-right: .3rem;
}

/* Optional: increase spacing even more on desktops only */
@media (min-width: 992px) {
    .navbar-nav .nav-item {
        padding-left: .3rem;
        padding-right: .3rem;
    }
}
/* Dark overlay */
.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 850px;
    padding: 20px 30px;
}

.hero-content h1 {
    font-size: 4rem;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
}

/* Overlapping section styling */
section.overlap-section {
    margin-top: -120px;
    position: relative;
    z-index: 10;	
}

/* Navy background + rounded corners */
.bg-navy {
  background-color: #2973B2; /* deep navy blue */
  border-radius: 16px;
}

/* Box styling */
.overlap-item {
  padding: 28px 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* White icon */
.icon-white {
  color: #ffffff;
}

.about-us-section {
  background: #ffffff;
}

/* Experience text left vertical style */
.experience-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  position: absolute;
  left: -40px;
  top: 20%;
  font-size: 14px;
  font-weight: 600;
  color: #777;
  letter-spacing: 1px;
}

.experience-text .year {
  color: #48A6A7;
  font-weight: 700;
}

/* Image styling */
.about-img-wrapper img {
  border-radius: 22px;
  object-fit: cover;
}

/* TripAdvisor badge */
.award-badge {
  position: absolute;
  right: -20px;
  top: 50px;
  width: 120px;
}

.award-badge img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}

/* Right Side Typography */
.section-subtitle {
  color: #48A6A7;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700;
}

.section-title {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 20px;
}

.about-desc {
  color: #555;
  line-height: 1.8;
}

/* Icon items */
.about-icon {
  font-size: 22px;
  color: #48A6A7;
  margin-right: 10px;
}

/* Button */
.btn-green {
  background: #48A6A7;
  padding: 12px 26px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.btn-green:hover {
  background: #2973B2;
	color: #fff;
}


/* Search card */
.search-card{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -36px;
  width: 92%;
  max-width: 1100px;
  background: #fff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(14,36,61,0.12);
  z-index: 20;
}

/* Tour cards */
.tour-card .card-img-top{
  height:190px;
  object-fit:cover;
  border-top-left-radius: .375rem;
  border-top-right-radius: .375rem;
}

.badge-wrap{
  position:absolute;
  top:12px;
  left:12px;
}
.badge-wrap .badge{ font-weight:600; padding:.45rem .6rem; border-radius:.6rem; }

/* Destinations */
.Destinations{
	background-color: #F2EFE7;
}
.destination-icons {
    border-top: 1px solid #e5e5e5;
    padding: 10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    
}

.destination-icons i {
    font-size: 20px;
    color: var(--bs-secondary-color)
}

.card-title{
	color: #2973B2; 
}
.card-bottom {
    padding-top: 10px;
    border-top: 1px solid #e5e5e5;

    /* Make both items aligned perfectly */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.price-text {
    font-size: 20px;
    font-weight: 700;
    color: #2973B2;
}

.dest-card {
    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid #eee;
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

/* Top image inherits radius */
.dest-card img {
    
}

.dest-icon {
  font-size: 20px;
  color: #48A6A7;   /* change if needed */
}
.dest-card .card-img-top{ height:200px; object-fit:cover; }
.tour-itinerary {
    display: flex;
    justify-content: flex-start;
    gap: 20px;
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.tour-itinerary span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tour-itinerary i {
    color: #48A6A7;
    font-size: 18px;
}

.btn-quote {
    background: #2973B2;
    color: white;
    padding: 8px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.btn-quote:hover {
    background: #48A6A7;
	color: white;
}

.desti2{
    background-color: #ffffff;
}

.services-section {
    background: #F2EFE7;
}

.section-subtitle {
    letter-spacing: 2px;
    font-size: 14px;
    color: #48A6A7;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.section-title {
    font-size: 32px;
    font-weight: 700;
}

.service-box {
    background: #ffffff;
    padding: 22px 28px;
    border-radius: 14px;
    border: 1px solid #e3e3e3;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transition: 0.3s;
}

.service-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

.service-box .icon {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    background: #F2EFE7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    color: #48A6A7;
    font-size: 22px;
}
/* Gallery */
.gallery-thumb{ cursor:pointer; border-radius:8px; object-fit:cover; height:160px; width:100%; }

/* Testimonials */
.testimonial{
	background-color: #F2EFE7;
}
.testimonial-card {
    background: #fff;
    padding: 35px 40px;
    max-width: 650px;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    text-align: center;
}

.testimonial-text {
    font-size: 18px;
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
}

.testimonial-name {
    font-weight: 700;
    margin-bottom: 0;
    color: #333;
}

.testimonial-city {
    margin-top: -4px;
}

/* Arrows */
.custom-arrow {
    background: #48A6A7;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
}

.custom-arrow i {
    font-size: 20px;
}

.carousel-control-prev {
    left: -60px;
}

.carousel-control-next {
    right: -60px;
}

/* For small screens */
@media (max-width: 767px) {
    .carousel-control-prev {
        left: 10px;
    }
    .carousel-control-next {
        right: 10px;
    }
}

.gallery-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
  z-index: 9999;
  padding: 20px;
}

/* Footer */
footer{ background:#0b1220; color:#cbd5e1; }
footer a{ text-decoration:none; color: white;}
footer .btn-primary{ background:var(--primary); border:0; }

/* Responsive tweaks */
@media (max-width: 991px){
  .search-card{ bottom:-50px; padding:12px; }
  .hero{ min-height:520px; height:62vh; }
  .carousel-item .container { padding-left: 1rem; padding-right: 1rem; }
}

.page-header {
  padding-top: 120px;
  padding-bottom: 30px;
  background-color: #2973B2!important;
	color: #ffffff;
}

.about{
	background-color: #F2EFE7;
}
.icon-custom-color { color: #48A6A7 !important; }

.contact-info .icon i {
  font-size: 1.4rem;
  color: #48A6A7;   /* Theme color */
  line-height: 1;
}

.contact-card .contact-info {
  align-items: flex-start;
}

.contact-card strong {
  color: #333;
}

/* Equal height for both cards on desktop */
@media (min-width: 992px) {
    .contact-card {
        max-width: 700px;
    }
}

/* Icon styling */
.contact-info .icon i {
  font-size: 1.3rem;
  color: #48A6A7; /* Your theme highlight color */
}

.contact-info .icon {
  width: 40px;
  height: 40px;
  background: rgba(72, 166, 167, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

/* Make rows equal height */
.row-equal {
  display: flex;
  flex-wrap: wrap;
}

.row-equal > [class*='col-'] {
  display: flex;
}

.row-equal .contact-card {
  flex: 1;
}
/* DESKTOP (default): price and button in same row */
.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 70px;
}
/* WhatsApp Quote Button */
.btn-quote {
    background: #2973B2;
    color: #fff !important;
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    transition: 0.3s ease;
    display: inline-block;
}

    .btn-quote:hover {
        background: #48A6A7;
    }

/* View More Button - Colored background with white text */
.btn-viewmore {
    background: #154360; /* Keep the background navy/dark blue */
    color: #ffffff !important; /* Make text white */
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none !important;
    transition: 0.3s ease;
    display: inline-block;
    border: none; /* remove border if any */
}

    .btn-viewmore:hover {
        background: #1d5a85; /* slightly lighter/darker navy on hover */
        color: #ffffff !important; /* ensure text stays white */
    }


/* Button spacing */
.card-bottom .d-flex {
    gap: 10px;
}


/* ----------------------------------------- */
/* MOBILE VIEW FIXES (max-width: 576px)      */
/* ----------------------------------------- */
@media (max-width: 576px) {

    /* Make card full width + increase height */
    .dest-card {
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important;
        margin-bottom: 20px;
        border-radius: 14px;
    }

        /* Bigger mobile image */
        .dest-card img {
            width: 100%;
            height: 230px !important; /* Increased image height */
            object-fit: cover;
        }

    /* Stack buttons vertically */
    .card-bottom {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 14px !important;
        width: 100%;
    }

        /* Buttons full width */
        .card-bottom .btn-quote,
        .card-bottom .btn-viewmore {
            width: 100% !important;
            display: block;
            text-align: center !important;
        }

    /* Ensure View More naturally goes to next row */
    .btn-viewmore {
        margin-top: 2px;
    }
    .card-bottom .d-flex {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
    }

    .card-bottom a {
        width: 100% !important;
        display: block !important;
    }
}

/* Desktop: buttons in row with proper gap */
@media (min-width: 577px) {
    .card-bottom .d-flex {
        flex-direction: row;
        gap: 50px; /* visible gap between buttons */
        flex-wrap: nowrap; /* keep in one row */
    }

    .card-bottom .btn-quote,
    .card-bottom .btn-viewmore {
        flex: none; /* prevent stretching */
        width: auto; /* natural width */
    }
}


/* Force mobile navbar dropdown background */
@media (max-width: 991px) {

    .navbar-collapse {
        background: rgba(0, 0, 0, 0.92) !important;
        backdrop-filter: blur(6px) !important;
        padding: 20px !important;
        border-radius: 12px !important;
    }

        .navbar-collapse.show,
        .navbar-collapse.collapsing {
            background: rgba(0, 0, 0, 0.92) !important;
        }

    .navbar-nav .nav-link {
        color: #fff !important;
        margin: 8px 0 !important;
        font-size: 17px !important;
    }
}
/* Responsive card widths */
@media (max-width: 767px) {
    .dest-card,
    .tour-card {
        width: 100%; /* full width on small screens */
        max-width: 100%; /* prevent shrinking */
        margin-bottom: 20px; /* spacing between stacked cards */
    }

        /* Optional: make card images scale properly */
        .dest-card img,
        .tour-card img {
            width: 100%;
            height: auto; /* maintain aspect ratio */
        }
}

/* Tablets: two cards per row */
@media (min-width: 768px) and (max-width: 991px) {
    .dest-card,
    .tour-card {
        width: 48%; /* two cards per row */
        margin-bottom: 20px;
    }
}