@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:wght@400;700&display=swap");

* {
    /* Changed font-family for a more premium feel */
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    border: none;
    text-decoration: none;
    text-transform: capitalize;
    transition: 0.3s ease-in-out; /* Slightly longer transition for smoother effects */
}
html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
}

section {
    padding: 5rem 9%;
}

/* Button styles updated for a premium look */
.btn {
    margin-top: 1.5rem; /* Increased margin for better spacing */
    display: inline-block;
    border: 0.2rem solid #2c3e50; /* Darker, more refined border color */
    color: #2c3e50; /* Dark text color */
    cursor: pointer;
    background: none;
    font-size: 1.8rem; /* Slightly larger font size */
    padding: 1.2rem 3.5rem; /* Increased padding */
    border-radius: 50px; /* More rounded corners for a modern feel */
    font-weight: 500; /* Added font-weight */
    letter-spacing: 0.05rem; /* Added subtle letter-spacing */
}
.btn:hover {
    background: #2c3e50; /* Dark background on hover */
    color: #ffffff; /* White text on hover */
    transform: translateY(-3px); /* Subtle lift effect */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
}

/* Heading style updated */
.heading {
    text-align: center;
    margin-bottom: 4rem; /* Increased bottom margin for more breathing room */
    font-size: 4.5rem; /* Slightly larger heading font size */
    color: #1a2a3a; /* Darker, more sophisticated color */
    font-family: "Playfair Display", serif; /* More elegant font for headings */
    font-weight: 700;
    letter-spacing: 0.1rem;
}

/* Header styles */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 2rem 9%;
    z-index: 1000;
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.95); /* Slightly translucent background */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08); /* Softer shadow */
}
.header.active {
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12); /* Slightly stronger shadow when active */
}
.header .logo {
    margin-right: auto;
    font-size: 3rem; /* Larger logo font size */
    color: #1a2a3a; /* Darker logo color */
    font-weight: 700; /* Bolder */
    font-family: "Playfair Display", serif; /* Elegant font for logo */
}

/* Contact form wrapper */
.wrapper1 {
    margin-left: auto;
    margin-right: auto;
    /* top: 50%; Remove fixed positioning that might break layout */
    /* left: 50%; Remove fixed positioning that might break layout */
    width: 100%;
    max-width: 600px; /* Slightly wider form */
    padding: 40px; /* More padding */
    border-radius: 10px; /* More rounded corners */
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); /* Softer, more spread out shadow */
    background: #ffffff; /* White background for the form */
    margin-top: 5rem; /* Added top margin for spacing */
}

.wrapper1 .title1 h1 {
    color: #007bff; /* A professional blue for the contact title */
    text-align: center;
    margin-bottom: 35px; /* Increased bottom margin */
    font-size: 4rem; /* Larger font size */
    font-family: "Playfair Display", serif;
    font-weight: 700;
}

.contact-form {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping for better responsiveness */
    justify-content: space-between; /* Space out elements */
}

.uil {
    height: 50px;
    width: 50px;
    font-size: 2.5rem; /* Adjust icon size if needed */
}

.input-fields {
    display: flex;
    flex-direction: column;
    margin-right: 4%; /* Keep existing margin */
    flex: 1 1 48%; /* Flex basis for two columns with space */
}

.input-fields,
.msg {
    width: 100%; /* Reset width to be managed by flex */
}

.input-fields .input,
.msg textarea {
    margin: 12px 0; /* Slightly more vertical margin */
    background: #f8f9fa; /* Light grey background for input fields */
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Rounded corners for inputs */
    padding: 15px 20px; /* Increased padding */
    color: #333; /* Darker text color */
    width: 100%;
    font-size: 1.7rem; /* Larger font size for input text */
}

.msg textarea {
    height: 200px; /* Slightly taller textarea */
    resize: vertical; /* Allow vertical resizing */
}
.msg .btn1 {
    margin-top: 2rem; /* Increased top margin for the button */
    display: inline-block;
    border: 0.2rem solid #007bff; /* Blue border for the button */
    color: #007bff; /* Blue text */
    cursor: pointer;
    font-size: 1.8rem; /* Larger font size */
    padding: 1.2rem 3.5rem; /* Increased padding */
    border-radius: 50px; /* More rounded corners */
    background: none;
    font-weight: 600;
    transition: all 0.3s ease;
}
.btn1 button[type="submit"] {
    background-color: transparent;
    font-size: 1.8rem; /* Match parent font size */
    font-weight: 600;
    color: #007bff; /* Inherit color from parent */
    padding: 0; /* Remove default button padding */
    cursor: pointer;
}
.btn1:hover {
    background: #007bff; /* Blue background on hover */
    color: #ffffff; /* White text on hover */
    transform: translateY(-3px); /* Subtle lift */
    box-shadow: 0 8px 15px rgba(0, 123, 255, 0.2); /* Shadow for hover */
}
.btn1 button[type="submit"]:hover {
    color: #ffffff; /* White text on button hover */
}

i {
    color: #007bff; /* A consistent professional blue for icons */
}

/* Navbar Styles */
.header .navbar a {
    color: #333; /* Darker text for navigation links */
    font-size: 1.7rem; /* Slightly larger font size */
    text-transform: uppercase; /* Uppercase for a crisp, modern look */
    margin: 0 1.5rem; /* Increased horizontal margin */
    padding: 0.8rem 1.5rem; /* Adjusted padding */
    border-radius: 0.5rem; /* Soften corners */
    transition: all 0.3s ease;
    font-weight: 500; /* Added font-weight */
}

.header .navbar a:hover {
    background-color: #e0f2f7; /* Light blue tint on hover */
    color: #007bff; /* Blue text on hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Softer, more spread out shadow */
    transform: translateY(-2px); /* Subtle lift */
}

.header .navbar #nav-close {
    font-size: 5rem;
    cursor: pointer;
    color: #1a2a3a; /* Darker color for close icon */
    display: none;
}
.header .icons a,
.header .icons div {
    font-size: 2.8rem; /* Larger icon size */
    margin-left: 2.5rem; /* Increased margin */
    cursor: pointer;
    color: #1a2a3a; /* Darker icon color */
}

.header .icons a:hover, /* Corrected selector: removed missing dot */
.header .icons div:hover {
    color: #007bff; /* Blue on hover for icons */
}
.header #menu-btn {
    display: none;
}

/* Search Form Styles */
.search-form {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85); /* Darker overlay for focus */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.4s, opacity 0.4s ease-in-out; /* Slower transition */
}

.search-form.active {
    visibility: visible;
    opacity: 1;
}

.search-form form {
    width: 85%; /* Slightly wider search bar */
    max-width: 600px; /* Increased max-width */
    background: #ffffff; /* White background */
    padding: 30px; /* More padding */
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); /* Stronger, more defined shadow */
    display: flex;
    align-items: center;
    position: relative; /* For positioning close button */
}
.search-form input[type="search"] {
    width: 100%;
    padding: 15px 20px; /* Increased padding */
    font-size: 1.8rem; /* Larger font size */
    border: 1px solid #dcdcdc; /* Lighter border */
    border-radius: 8px; /* Rounded corners */
    outline: none;
    margin-right: 15px; /* More spacing */
    color: #333; /* Darker text color */
    background: #f8f9fa; /* Light background for input */
}

.search-form input[type="search"]::placeholder {
    color: #999; /* Softer placeholder color */
}

.search-form label {
    color: #007bff; /* Consistent blue for search icon */
    font-size: 2.2rem; /* Larger icon */
    cursor: pointer;
    transition: color 0.3s;
}

.search-form label:hover {
    color: #0056b3; /* Darker blue on hover */
}

.search-form #close-search {
    position: absolute;
    top: -40px; /* Position above the form */
    right: -40px; /* Position to the right */
    font-size: 4rem; /* Larger close icon */
    color: #ffffff; /* White color for visibility against dark overlay */
    cursor: pointer;
    transition: color 0.3s, transform 0.3s;
}

.search-form #close-search:hover {
    color: #e6e6e6; /* Slight change on hover */
    transform: rotate(90deg); /* Rotate effect */
}

/* Original form (inside search-form) should not be overridden by this generic rule */
/* This rule is problematic as it overrides the specific search-form rule. Removed to avoid conflict. */
/* form {
    width: 90vw;
    margin: 0 2rem;
    padding-bottom: 2rem;
    border-bottom: 0.2rem solid white;
    display: flex;
    align-items: center;
} */
/* form input {
    width: 100%;
    font-size: 2rem;
    color: white;
    text-transform: none;
    background: none;
    padding-right: 2rem;
}

form input::placeholder {
    color: #aaa;
}

form label {
    font-size: 3rem;
    cursor: pointer;
    color: white;
}
form label:hover {
    color: green;
} */

.home {
    padding: 0;
}
.home .box {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-size: cover !important;
    background-position: center !important;
    justify-content: flex-end; /* Align content to the right */
    padding: 2rem 9%;
}

.home .content {
    width: 60rem; /* Slightly wider content area */
    text-align: right; /* Align text to the right for a modern layout */
    padding-right: 2rem; /* Add some padding to the right */
}
.home .content span {
    font-size: 4.5rem; /* Larger subheading */
    color: #333; /* Darker, sophisticated color */
    font-weight: 500;
    display: block; /* Ensures it takes its own line */
    margin-bottom: 0.5rem;
}
.home .content h3 {
    font-size: 7rem; /* Larger, more impactful heading */
    color: #007bff; /* Professional blue for main heading */
    padding-top: 0.5rem;
    text-transform: uppercase;
    line-height: 1.1; /* Tighter line height */
    font-family: "Playfair Display", serif; /* Elegant font */
    font-weight: 700;
}
.home .content p {
    line-height: 1.8; /* Tighter line height for readability */
    color: #555; /* Softer text color */
    font-size: 1.6rem; /* Slightly larger paragraph text */
    padding: 1.5rem 0; /* More padding */
    max-width: 50rem; /* Limit paragraph width for better readability */
    margin-left: auto; /* Align paragraph to the right with content */
}

/* Category section (Adventure Idea) */
.category .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr)); /* Slightly larger min-width */
    gap: 2.5rem; /* Increased gap */
}

.category .box-container .box {
    text-align: center;
    padding: 3rem 2rem; /* More padding */
    border-radius: 1rem; /* Rounded corners */
    background: #ffffff; /* White background */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); /* Softer shadow */
    transition: all 0.3s ease;
}
.category .box-container .box:hover {
    transform: translateY(-8px); /* More pronounced lift effect */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
}
.category .box-container .box img {
    height: 22rem; /* Slightly larger image */
    width: 22rem; /* Slightly larger image */
    border-radius: 50%;
    margin-bottom: 2rem; /* More margin */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Softer, more pronounced shadow */
    object-fit: cover; /* Ensure image covers the area */
}
.category .box-container .box h3 {
    font-size: 2.5rem; /* Larger heading */
    /* Changed gradient colors for a more premium, subtle feel */
    background: linear-gradient(to right, #007bff, #0056b3);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    font-weight: 600;
    margin-bottom: 1rem;
}

.category .box-container .box p {
    font-size: 1.6rem; /* Slightly larger paragraph text */
    color: #555; /* Softer text color */
    padding: 1rem 0;
    line-height: 1.8; /* Tighter line height */
}

/* Packages section (Popular Packages) */
.packages {
    background: #f7f7f7; /* Lighter background for the section */
}

.packages .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr)); /* Larger package cards */
    gap: 2.5rem; /* Increased gap */
}

.packages .box-container .box {
    text-align: center;
    background: #fff;
    border: none; /* Removed harsh border */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); /* Softer, more pronounced shadow */
    border-radius: 1rem; /* More rounded corners */
    overflow: hidden; /* Hide overflow for image border-radius */
    transition: all 0.3s ease;
}

.packages .box-container .box:hover {
    transform: translateY(-10px); /* More pronounced lift */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* Stronger shadow on hover */
    background: #fff; /* Keep white background on hover */
}

.packages .box-container .box:hover .content > * {
    color: #333; /* Maintain dark text color on hover */
}

.packages .box-container .box:hover .btn {
    border-color: #007bff; /* Blue border for button on hover */
    color: #007bff; /* Blue text for button on hover */
}

.packages .box-container .box:hover .btn:hover {
    background: #007bff; /* Blue background on button hover */
    color: #fff; /* White text on button hover */
}

.packages .box-container .box .image {
    height: 28rem; /* Taller image */
    overflow: hidden;
    padding: 0; /* Removed padding to let image fill */
    border-radius: 1rem 1rem 0 0; /* Rounded top corners */
}

.packages .box-container .box .image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 1rem 1rem 0 0; /* Rounded top corners for image */
    transition: transform 0.3s ease;
}
.packages .box-container .box:hover .image img {
    transform: scale(1.05); /* Slight zoom on image hover */
}

.packages .box-container .box .content {
    padding: 2.5rem; /* More padding */
    text-align: left; /* Align text to the left */
}

.packages .box-container .box .content h3 {
    font-size: 2.4rem; /* Larger heading */
    color: #1a2a3a; /* Darker heading color */
    margin-bottom: 1rem;
    font-family: "Playfair Display", serif; /* Elegant font */
    font-weight: 700;
}

.packages .box-container .box .content p {
    font-size: 1.6rem; /* Slightly larger paragraph text */
    color: #555; /* Softer text color */
    padding: 1rem 0;
    line-height: 1.8;
}

.packages .box-container .box .content .price {
    font-size: 2.4rem; /* Larger price */
    color: #007bff; /* Professional blue for price */
    font-weight: 700;
    margin-top: 1.5rem; /* More space */
}

/* Footer styles */
.footer {
    background: linear-gradient(rgba(26, 42, 58, 0.9), rgba(26, 42, 58, 0.9)), /* Darker, more opaque overlay */
        url(../images/footer-bg.jpg) no-repeat center center / cover; /* Ensure image covers */
    background-attachment: fixed;
    padding-top: 5rem; /* More padding at the top */
}

.footer .box-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); /* Slightly larger columns */
    gap: 3rem; /* More gap between columns */
}

.footer .box-container .box h3 {
    font-size: 2.2rem; /* Larger heading */
    padding: 1.8rem 0; /* More padding */
    color: #ffffff; /* White text */
    font-family: "Playfair Display", serif; /* Elegant font */
    font-weight: 700;
    margin-bottom: 1rem;
}

.footer .box-container .box a {
    display: block;
    font-size: 1.5rem; /* Slightly larger link text */
    color: #e0e0e0; /* Off-white for links */
    padding: 1.2rem 0; /* More padding */
    transition: color 0.3s, padding-left 0.3s; /* Smooth transition for hover effects */
}

.footer .box-container .box a i {
    color: #007bff; /* Professional blue for icons */
    padding-right: 1rem; /* More padding to the right of icon */
}

.footer .box-container .box a:hover {
    color: #007bff; /* Blue on hover */
    padding-left: 1rem; /* Slight indent on hover */
}

.footer .box-container .box a:hover i {
    padding-right: 1.5rem; /* More padding to the right of icon on hover */
}

.footer .credit {
    text-align: center;
    margin-top: 5rem; /* More top margin */
    padding: 2.5rem 1rem; /* More padding */
    font-size: 1.8rem; /* Slightly larger font size */
    color: #f0f0f0; /* Off-white for credit text */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Subtle top border */
}

.footer .credit span {
    color: #007bff; /* Professional blue for the name */
    font-weight: 600;
}

/* Media Queries */
@media (max-width: 1200px) {
    .header {
        padding: 2rem;
    }
    section {
        padding: 3rem 2rem;
    }
    .home .content {
        width: 55rem; /* Adjust content width */
    }
    .home .content h3 {
        font-size: 6rem; /* Adjust heading size */
    }
}

@media (max-width: 991px) {
    html {
        font-size: 55%;
    }
    .home .box {
        padding: 2rem;
        justify-content: center;
        background-position: center !important; /* Center background on smaller screens */
    }
    .home .box .content {
        text-align: center; /* Center content on smaller screens */
        padding-right: 0; /* Remove right padding */
    }
    .home .box .content span {
        font-size: 3.5rem; /* Adjust subheading size */
    }
    .home .box .content h3 {
        font-size: 5rem; /* Adjust heading size */
    }
    .home .box .content p {
        margin-left: auto; /* Center paragraph */
        margin-right: auto;
    }
    .header .navbar a {
        font-size: 1.8rem; /* Slightly larger in mobile menu */
    }
}

@media (max-width: 768px) {
    .header #menu-btn {
        display: inline-block;
    }
    .header .navbar {
        position: fixed;
        top: 0;
        left: -110%;
        background: #ffffff; /* White background for mobile nav */
        z-index: 10000;
        width: 35rem;
        height: 100%;
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.7); /* Darker overlay */
    }
    .header .navbar.active {
        left: 0;
    }
    .header .navbar a {
        margin: 1.5rem 0; /* More margin for links */
        font-size: 3.5rem; /* Larger font size for readability */
        color: #1a2a3a; /* Dark text in mobile nav */
    }
    .header .navbar a:hover {
        background: #e0f2f7; /* Light background on hover */
        color: #007bff; /* Blue text on hover */
    }
    .header .navbar #nav-close {
        display: block;
        position: absolute;
        top: 2rem; /* Adjusted position */
        right: 2.5rem; /* Adjusted position */
        color: #1a2a3a; /* Dark close icon */
    }
    .contact-form {
        flex-direction: column;
    }
    .msg textarea {
        height: 120px; /* Slightly taller on mobile */
    }
    .input-fields,
    .msg {
        width: 100%;
        margin-right: 0; /* Remove right margin */
    }
    .input-fields .input,
    .msg textarea {
        width: 100%; /* Ensure inputs take full width */
    }
    .wrapper1 {
        padding: 25px; /* Adjust padding for mobile */
    }
    .wrapper1 .title1 h1 {
        font-size: 3.5rem; /* Adjust contact title size */
    }
    .search-form #close-search {
        top: 20px;
        right: 20px;
        font-size: 3.5rem;
    }
    .search-form form {
        width: 90%;
        padding: 25px;
    }
    .search-form input[type="search"] {
        font-size: 1.6rem;
    }
}

@media (max-width: 450px) {
    html {
        font-size: 50%;
    }
    .heading {
        font-size: 3.5rem; /* Adjusted heading size */
    }
    .home .content h3 {
        font-size: 4.5rem; /* Adjust home heading size */
    }
    .home .content span {
        font-size: 3rem; /* Adjust home subheading size */
    }
    .wrapper1 {
        padding: 15px; /* Further adjust padding */
    }
    .wrapper1 .title1 h1 {
        font-size: 3rem;
    }
    .input-fields .input,
    .msg textarea {
        font-size: 1.5rem; /* Smaller input font size */
    }
    .search-form #close-search {
        font-size: 3rem;
        top: 15px;
        right: 15px;
    }
    .search-form label {
        font-size: 2rem;
    }
}