@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
    /* New Color Palette inspired by the RedLotus example */
    --primary-color: #2C3E50; /* Dark Navy Blue for buttons, headings */
    --secondary-color: #ffffff; /* Clean White background */
    --text-dark: #333333; /* Standard body text color */
    --text-light: #ffffff; /* Text color for dark backgrounds */
    --bg-light: #f8f9fa; /* A very light gray for subtle contrast */
    --font-family-base: 'Poppins', sans-serif; /* The new font family */
}

body {
    font-family: var(--font-family-base);
    color: var(--text-dark);
    background-color: var(--secondary-color);
    line-height: 1.6;
}

/* --- 2. NAVBAR --- */
/* Make the navbar white with navy links */
.navbar {
    background-color: var(--secondary-color) !important;
    box-shadow: 0 2px 15px rgba(0,0,0,0.05); /* Soft, modern shadow */
    padding-top: 15px;
    padding-bottom: 15px;
}

.navbar-brand {
    font-weight: 700;
    color: var(--primary-color) !important;
    font-size: 1.5rem;
}

.nav-link {
    color: var(--primary-color) !important;
    font-weight: 500;
    margin-left: 15px;
    transition: color 0.3s;
}

.nav-link:hover {
    color: #1a252f !important; /* Slightly darker on hover */
}

/* --- 3. BUTTONS --- */
/* Redefine buttons to be rounded and use the new navy color */
.btn {
    border-radius: 50px; /* Fully rounded corners */
    padding: 10px 25px; /* Larger, more comfortable padding */
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Primary button (used for "Book Now", etc.) */
.btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--text-light);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: #1a252f !important; /* Darker navy on hover */
    border-color: #1a252f !important;
    box-shadow: 0 5px 15px rgba(44, 62, 80, 0.3); /* Add glow on hover */
}

/* Outline button */
.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

/* Update other button types to match the rounded style */
.btn-warning, .btn-success, .btn-secondary, .btn-outline-secondary {
    border-radius: 50px;
}


/* --- 4. TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-color);
    font-weight: 700; /* Bold headings */
}

.text-muted {
    color: #7f8c8d !important; /* A cleaner, softer gray */
}

.display-6 {
    font-weight: 700;
    color: var(--primary-color);
}


/* --- 5. CAROUSEL / HERO SECTION --- */
.hero-image {
    height: 650px; /* Taller to make a bigger impact */
    object-fit: cover;
    filter: brightness(0.85); /* Slightly brighter so it's not too dark */
}

/* A cleaner, more modern caption box */
.carousel-caption {
    bottom: 25%; /* Adjust vertical position */
    background: transparent; /* REMOVED the dark box */
    backdrop-filter: none; /* REMOVED the blur effect */
    box-shadow: none; /* REMOVED the box shadow */
    border-radius: 0;
    padding: 0;
    max-width: 100%; /* Allow it to span full width */
    left: 10%;
    right: 10%;
    text-align: center;
}
.carousel-caption h5 {
    font-size: 4rem; /* Bigger, bolder text like the example */
    font-weight: 700;
    margin-bottom: 10px;
    color: #ffffff;
    /* This shadow makes the text pop without a box */
    text-shadow: 2px 2px 10px rgba(248, 244, 244, 0.6); 
}

.carousel-caption p {
    font-size: 1.5rem;
    font-weight: 500;
    color: #f8f9fa;
    text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6);
    margin-bottom: 30px;
}

/* Update the button inside the slider to stand out */
.carousel-caption .btn {
    background-color: var(--primary-color);
    color: #ffffff;
    border: none;
    padding: 12px 35px;
    font-size: 1.1rem;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.carousel-caption .btn:hover {
    background-color: #ffffff;
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* --- 6. CARDS (Popular Destinations & Hotel List) --- */
.card {
    border: none; /* Remove default borders */
    border-radius: 20px; /* Soft, rounded corners */
    background-color: var(--secondary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Soft, modern shadow */
    overflow: hidden;
}

.card-body {
    padding: 25px;
}

.card-title {
    color: var(--primary-color);
    font-weight: 700;
}

/* Popular Destinations Cards (Vertical) */
.hotel-card {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.hotel-card:hover {
    transform: translateY(-10px); /* Lift up more on hover */
    box-shadow: 0 20px 40px rgba(44, 62, 80, 0.15) !important; /* Deeper navy shadow */
}

.popular-hotel-img {
    height: 250px;
    object-fit: cover;
}

/* Hotel List Cards (Horizontal - on hotels.html) */
.hotel-list-card {
    border-radius: 20px;
}

.hotel-list-card .card-body {
    padding: 30px;
}

.hotel-list-card h3.card-title, 
.hotel-list-card h2.text-dark {
    color: var(--primary-color) !important;
}

.object-fit-cover {
    object-fit: cover;
    min-height: 100%;
}


/* --- 7. FORMS & INPUTS --- */
.form-control, .form-select {
    border-radius: 50px; /* Rounded inputs like the buttons */
    border: 1px solid #e0e0e0;
    padding: 15px 25px; /* More padding for a modern feel */
    background-color: var(--bg-light);
}

.form-control:focus, .form-select:focus {
    background-color: var(--secondary-color);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(44, 62, 80, 0.1); /* Soft navy glow */
}



.row.mb-5 .card.shadow-sm.p-4.bg-light {
    background: rgba(255, 255, 255, 0.9) !important; /* Highly transparent white */
    backdrop-filter: blur(20px); /* Strong frosted glass effect */
    border-radius: 50px; /* Pill shape */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1) !important;
    padding: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.5); /* Subtle white border */
}

.row.mb-5 .card h4 {
    display: none;
}


.row.mb-5 .form-control-lg {
    background-color: transparent;
    border: none;
    border-radius: 0;
    border-bottom: 2px solid transparent;
    padding-left: 0;
}
.row.mb-5 .form-control-lg:focus {
    box-shadow: none;
    border-bottom-color: var(--primary-color);
}

/* --- FULL WIDTH SLIDER & NATURAL TEXT --- */

/* 1. Prevent Horizontal Scrollbar */
body {
    overflow-x: hidden; /* Essential when forcing full-width elements */
}

/* --- FORCE CLEAN CAROUSEL (No Box, No Blur, Full Width) --- */

/* 1. Ensure the slider touches the edges */
#heroCarousel {
    width: 100vw;
    margin-left: -50vw;
    left: 50%;
    position: relative;
}

/* 2. The Caption Container - STRIPPED CLEAN */
.carousel-caption {
    bottom: 30%;
    left: 5%;
    right: 5%;
    text-align: center;
    
    /* "Nuclear" option to remove any box/shadow/blur */
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    border: none !important;
}

/* 3. The Text - Clean and Crisp */
.carousel-caption h5 {
    font-size: 4.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    
    /* Very subtle shadow just for readability, no "glow" */
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4); 
}

.carousel-caption p {
    font-size: 1.5rem;
    font-weight: 400;
    color: #f8f9fa;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
    margin-bottom: 30px;
}

/* 4. The Button */
.carousel-caption .btn {
    padding: 12px 40px;
    font-size: 1.1rem;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Soft shadow for button only */
}

/* --- FOOTER STYLES --- */
.footer-custom {
    background-color: #1a252f; /* Darker shade of your Primary Navy */
    color: #ffffff;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.1);
}

.footer-link {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.7);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-link:hover {
    color: #ffffff;
    transform: translateX(5px); /* Slide right slightly on hover */
}

/* Social Icons */
.btn-social {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Circle shape */
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-social:hover {
    background-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-3px); /* Pop up effect */
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.6) !important;
}