/* General Reset */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body Styles */
body {
    /* Ensure "Winky Rough" and "Oswald" fonts are properly loaded in your HTML head */
    font-family: "Winky Rough", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

/* Background Font */
.bg-font {
    font-family: "Oswald", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

/* Logo */
.logo {
    width: 70px;
    height: auto;
}

/* Images */
img {
    max-width: 100%;
    height: auto;
}

/* Dropdown Menu */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    display: none;
}

.dropdown-submenu:hover .dropdown-menu {
    display: block;
}

/* Slider Section */
.slider-section {
    background: url(./img/banner1.jpg) no-repeat center center;
    padding: 200px 0;
    background-size: cover;
    position: relative;
    z-index: 15;
}

.slider-section::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: -10;
}

/* Slider Caption */
.slider-caption h2 {
    margin-bottom: 40px;
    font-size: 40px;
}

.slider-caption h4 {
    margin-bottom: 31px;
}

/* Form Control */
.form-control {
    padding: 18px 20px;
}

/* --- General Button Styles --- */
.btn {
    padding: 18px 70px; /* Default padding for larger buttons */
    background: #032c5a;
    color: white;
    font-weight: bold;
    border: none; /* Ensure no default border */
    border-radius: 5px; /* Consistent border-radius */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions */
    text-decoration: none; /* Ensure links acting as buttons don't have underline */
    display: inline-flex; /* Use flex to center icon/text if any */
    align-items: center;
    justify-content: center;
    gap: 8px; /* Space between text and icon */
    cursor: pointer; /* Indicate it's clickable */
}

.btn:hover {
    background-color: rgba(4, 60, 117, 255);
    color: #fff;
    transform: translateY(-2px); /* Slight lift on hover */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow on hover */
}

/* Specific styling for the 'Buy Now' button in the header */
.navbar .btn-outline-primary {
    border-color: #0d6efd; /* Bootstrap primary color */
    color: #0d6efd;
    background-color: transparent;
    padding: 12px 25px; /* Adjust padding for a typical header button */
    font-size: 1.1em;
}

.navbar .btn-outline-primary:hover {
    background-color: #0d6efd;
    color: #fff;
    transform: none; /* No lift for this button on hover */
    box-shadow: none;
}

/* --- Feedback Form Submit Button Styles --- */
.btn-feedback-submit {
    align-self: center; /* Keeps it centered as per original inline style */
    padding: 15px 60px; /* Specific padding for this button */
    background: #032c5a;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-feedback-submit:hover {
    background-color: rgba(4, 60, 117, 255);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- WhatsApp Button Styles --- */
.btn-whatsapp {
    background-color: #25D366 !important; /* WhatsApp green */
    border-color: #25D366 !important;
    color: white !important;
    font-size: 1.2em;
    padding: 12px 30px; /* Slightly adjusted padding for consistency */
    border-radius: 50px; /* Pill-shaped button */
    text-decoration: none;
    display: inline-flex; /* Use flex to center content */
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-whatsapp:hover {
    background-color: #1DA851 !important; /* Darker green on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.btn-whatsapp i {
    margin-right: 8px; /* Space between icon and text */
}

/* About Section */
.about {
    background: #f7f9ff;
}

.about-item {
    margin-top: 120px;
}

.about-item .lead {
    font-size: 18px;
    line-height: 2.1rem;
}

/* Feature Section (Tour Packages) */
.package-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

.package-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.package-img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    height: 200px;
    object-fit: cover;
    flex-shrink: 0;
}

.package-content {
    padding: 1rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.row.g-4 > div {
    display: flex; /* Ensures inner flex items align for card height consistency */
}

.feature-item {
    box-shadow: 4px 5px 30px 10px rgba(64, 87, 191, 0.1);
    display: flex; /* Use flexbox for image and text layout */
    border-radius: 5px;
    overflow: hidden; /* Important for border-radius on children */
    margin-bottom: 20px; /* Add some space between items */
    height: 300px; /* Consider min-height for mobile or auto */
}

.feature-left-img {
    width: 40%; /* Desktop width */
    overflow: hidden;
    border-radius: 5px 0 0 5px; /* Apply to container */
    flex-shrink: 0; /* Prevent shrinking if content is large */
}

.feature-left-img img {
    height: 100%;
    width: 100%; /* Fill the container */
    object-fit: cover; /* Crop to fit, maintaining aspect ratio */
    object-position: left center; /* Adjust if the interesting part of the image is not centered */
    max-width: none; /* Override previous max-width if necessary */
    position: static; /* Remove fixed negative positioning */
    left: auto; /* Reset left property */
}

.feature-left-text {
    width: 60%; /* Desktop width */
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
}

.flag {
    width: 50px;
    height: auto;
    vertical-align: middle;
    margin-right: 10px;
}

.Air-Ticket {
    height: 300px;
    box-shadow: 4px 5px 30px 10px rgba(64, 87, 191, 0.1);
}

/* --- Ready to Apply Section Styles --- */
.contact-cta-banner {
    background-color: #f0f8ff; /* Light blue background */
    border-radius: 15px; /* Rounded corners */
    padding: 30px 20px; /* Padding inside the banner */
    text-align: center; /* Center align text */
    max-width: 800px; /* Max width for larger screens */
    margin: 40px auto; /* Center the banner on the page with vertical margin */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Soft shadow */
}

.contact-cta-banner h3 {
    color: #0056b3; /* Darker blue for heading */
    font-size: 2.2em; /* Larger font size for headline */
    margin-bottom: 15px;
}

.contact-cta-banner p {
    color: #333;
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Call direct number styling */
.contact-cta-banner .mt-3 {
    margin-top: 15px !important; /* Ensure margin top is applied */
}

/* --- Meet Our Team Section Styles --- */
.team {
    padding: 60px 0; /* Add top and bottom padding for the section */
    background-color: #f8f9fa; /* Light background for the section */
}

.team h1 {
    color: #032c5a; /* Consistent heading color */
    margin-bottom: 50px; /* Space below the heading */
    font-size: 2.5em; /* Default large font size for desktop */
}

.team .card {
    border: none; /* Remove default card border if you prefer */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Soft shadow for cards */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    height: 100%; /* Ensure cards in a row have equal height */
    display: flex;
    flex-direction: column;
}

.team .card:hover {
    transform: translateY(-5px); /* Lift card slightly on hover */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}

.team .card-img-top {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 50%; /* Ensure perfect circle */
    margin: 20px auto 10px auto; /* Centered with top/bottom margin */
    border: 3px solid #032c5a; /* Small border around image */
}

.team .card-body {
    padding: 1.5rem; /* Standard Bootstrap padding for card body */
    flex-grow: 1; /* Allows card-body to take available space */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center text vertically within body if needed */
}

.team .card-title {
    color: #032c5a;
    font-size: 1.4em;
    font-weight: 700;
    margin-bottom: 5px;
}

.team .card-text {
    color: #555;
    font-size: 1em;
}

/* --- Basic container responsiveness (if not handled by a framework like Bootstrap) --- */
/* (Your HTML indicates Bootstrap is used, so these might be redundant if Bootstrap's .container works fully) */
.container {
    width: 100%; /* Take full width */
    padding-right: 15px; /* Add padding to the sides */
    padding-left: 15px;
    margin-right: auto; /* Center container */
    margin-left: auto;
}
@media (min-width: 768px) {
    .container {
        max-width: 720px; /* Typical container max-width for md screens */
    }
}
@media (min-width: 992px) {
    .container {
        max-width: 960px; /* Typical container max-width for lg screens */
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1140px; /* Typical container max-width for xl screens */
    }
}


/* --- Combined Responsive Adjustments for ALL Sections --- */

@media (max-width: 991px) { /* Tablets and smaller desktops */
    /* General Buttons */
    .btn {
        padding: 15px 50px; /* Reduce general button padding */
        font-size: 0.95em; /* Slightly smaller font */
    }
    .btn-feedback-submit {
        padding: 12px 40px; /* Adjust feedback button padding */
        font-size: 0.9em;
    }
    .btn-whatsapp {
        font-size: 1.1em; /* Adjust WhatsApp button font */
        padding: 10px 25px; /* Adjust WhatsApp button padding */
    }
    .navbar .btn-outline-primary {
        padding: 10px 20px;
        font-size: 1em;
    }

    /* Ready to Apply Section */
    .contact-cta-banner h3 {
        font-size: 1.8em; /* Adjust font size for smaller screens */
    }
    .contact-cta-banner p {
        font-size: 1em; /* Adjust paragraph font size */
    }

    /* Meet Our Team Section */
    .team h1 {
        font-size: 2.2em; /* Slightly smaller heading */
        margin-bottom: 40px;
    }
}

@media (max-width: 767px) { /* Small tablets and large phones */
    /* General Buttons */
    .btn {
        padding: 12px 30px; /* Further reduce general button padding */
        font-size: 0.9em; /* Smaller font for general buttons */
    }
    .btn-feedback-submit {
        width: 100%; /* Make feedback button full width on small screens */
        padding: 12px 20px; /* Adjust padding for full width button */
        font-size: 1em;
    }
    .btn-whatsapp {
        width: 90%; /* WhatsApp button takes more width */
        margin: 0 auto 15px auto; /* Center and add bottom margin */
        padding: 10px 20px; /* Adjusted padding */
        font-size: 1.05em;
        display: block; /* Ensure it stacks */
    }
    .navbar .btn-outline-primary {
        display: block; /* Make "Buy Now" button full width in collapsed nav */
        width: 100%;
        margin-top: 15px;
        text-align: center; /* This centers the text inside the full-width button */
    }

    /* Ready to Apply Section */
    .contact-cta-banner {
        padding: 25px 15px; /* Reduce padding */
        margin: 20px 15px; /* Add horizontal margin to container */
    }
    .contact-cta-banner .mt-3 {
        margin-top: 10px !important;
    }

    /* Feature Section Responsiveness */
    .feature-item {
        flex-direction: column; /* Stack image and text vertically */
        height: auto; /* Allow height to adjust based on content */
    }
    .feature-left-img {
        width: 100%; /* Image takes full width */
        height: 200px; /* Give a fixed height for mobile image aspect */
        border-radius: 5px 5px 0 0; /* Adjust border radius */
    }
    .feature-left-img img {
        object-position: center center; /* Center the image in its new container */
    }
    .feature-left-text {
        width: 100%; /* Text content takes full width */
        padding: 15px; /* Adjust padding */
    }

    /* Meet Our Team Section */
    .team {
        padding: 40px 0; /* Reduce section padding */
    }
    .team h1 {
        font-size: 2em; /* Smaller heading for tablets/phones */
        margin-bottom: 30px;
    }
    .team .card-img-top {
        width: 120px; /* Slightly smaller image on smaller screens */
        height: 120px;
        margin-top: 15px; /* Adjust top margin */
    }
    .team .card-body {
        padding: 1rem; /* Reduce card body padding */
    }
    .team .card-title {
        font-size: 1.3em;
    }
    .team .card-text {
        font-size: 0.95em;
    }
}

@media (max-width: 575px) { /* Small phones (Bootstrap's 'xs' breakpoint) */
    /* General Buttons */
    .btn {
        padding: 10px 25px;
        font-size: 0.85em;
    }
    .btn-feedback-submit {
        padding: 10px 15px;
        font-size: 0.9em;
    }
    .btn-whatsapp {
        font-size: 0.95em;
        padding: 8px 15px;
    }
    /* Updated 'Buy Now' button in Navbar for very small screens - FURTHER REDUCED */
    .navbar .btn-outline-primary {
        padding: 4px 8px !important; /* Even more reduced padding (top/bottom 4px, left/right 8px) */
        font-size: 0.8em !important; /* Even smaller font size */
        margin-top: 8px; /* Slightly less margin-top if needed */
    }

    /* Ready to Apply Section */
    .contact-cta-banner {
        padding-left: 10px; /* Reduce side padding even further */
        padding-right: 10px;
        margin-left: 10px; /* Reduce side margin */
        margin-right: 10px;
    }
    .contact-cta-banner h3 {
        font-size: 1.4em; /* Even smaller font for headline */
        word-wrap: break-word; /* Ensure long words break */
    }
    .contact-cta-banner p {
        font-size: 0.95em; /* Even smaller paragraph font */
        word-wrap: break-word;
    }
    
    /* Feature Section small mobile adjustments */
    .feature-item {
        height: 150px; /* Smaller fixed height for very small mobile screens */
    }
    .feature-left-img {
        height: 150px; /* Smaller fixed height for very small mobile screens */
    }
    .feature-left-text {
        padding: 10px; /* Even less padding */
    }

    /* Meet Our Team Section */
    .team {
        padding: 30px 0; /* Further reduce section padding */
    }
    .team h1 {
        font-size: 1.8em; /* Even smaller heading for small phones */
        margin-bottom: 25px;
    }
    .team .card-img-top {
        width: 100px; /* Make image even smaller for very small screens */
        height: 100px;
        margin-top: 10px;
    }
    .team .card-body {
        padding: 0.8rem; /* Further reduce card body padding */
    }
    .team .card-title {
        font-size: 1.2em;
    }
    .team .card-text {
        font-size: 0.9em;
    }
}

@media (max-width: 400px) { /* NEW: Extra small phones (e.g., iPhone SE/5, very compact Androids) */
    .navbar .btn-outline-primary {
        padding: 3px 6px !important; /* Extremely reduced padding */
        font-size: 0.75em !important; /* Tiny font size */
        margin-top: 5px; /* Minimal margin */
    }
    /* You might want to adjust other elements for these very small screens too */
    .btn {
        padding: 8px 20px; /* General button slightly smaller */
        font-size: 0.8em;
    }
    .btn-feedback-submit {
        padding: 8px 10px;
        font-size: 0.85em;
    }
    .btn-whatsapp {
        font-size: 0.9em;
        padding: 6px 12px;
    }
}