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

/* Basic Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    font-family: 'Roboto', sans-serif;
    background-color: #000000;
    color: white;
}

/* Navbar styling */
#navbar {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
    padding: 1.5rem;
    font-family: 'Italiana', serif;
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Italiana', serif;
}

/* Text elements */
p, a, button, input, textarea {
    font-family: 'Roboto', sans-serif;
    text-align: left;
}

a:hover {
    background-image: linear-gradient(90deg, #6b4500, #ffffbd);
    color: black; /* Optional: Change the text color on hover */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Logo image styling */
.logo img {
    height: 1.5rem;
    max-width: auto;
}

/* Navbar links styling */
.navbar-links a {
    font-family: 'Italiana', serif;
    font-size: 1.25rem;
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.navbar-links a:last-child {
    border-bottom: none;
}

.navbar-links a:hover {
    font-weight: bold;
    color: white;
    background-color: transparent;
    background-image: none;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff; /* Glowing effect */
}

/* Hamburger menu styling */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    height: 25px;
    width: 35px;
}

.hamburger-menu span {
    display: block;
    height: 3px;
    width: 100%;
    background: linear-gradient(90deg, #6b4500, #ffffbd);
    margin: 5px 0;
    z-index: 1001;
}

/* Video styling */
header video {
    width: 100%;
    height: auto;
    z-index: 1;
}

/* Featured Destinations styling */
.destinations {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1rem;
}

.destination {
    width: calc(50% - 1rem);
    text-align: center;
    margin-bottom: 1rem;
}

section h2 {
    font-family: 'Italiana', serif;
    font-size: 1.75rem;
    font-weight: normal;
}

/* Apply the same style to all h2, h3, h4, h5, and h6 elements within sections */
section h3, 
section h4, 
section h5, 
section h6 {
    font-family: 'Italiana', serif;
    color: white;
    background-color: transparent;
    background-image: none;
    font-weight: normal;
}

section h3 {
    font-size: 1.25rem;
}

.destination img {
    width: 100%;
    height: auto;
}

.destination a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: rgb(95, 183, 255); /* Replace #your-color with your desired color code */
}

.view-all-link {
    display: block;
    text-align: center;
    margin-top: 1rem;
    color: #fff;
    text-decoration: underline;
    font-weight: bold;
    background-image: none; /* Ensure no background image is applied */
}

/* Override hover effect for 'view all' links to keep them unchanged */
.view-all-link:hover {
    color: white; /* Keep the text color white on hover */
    text-decoration: underline; /* Keep the underline on hover */
    background-image: none; /* Remove background image */
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: initial;
}


/* Team Members styling */
.team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 1rem;
}

.team-member {
    width: calc(50% - 1rem);
    text-align: center;
    margin-bottom: 1rem;
}

.team-member h3, 
.team-member h4 {
    text-align: center;
}

.team-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 1rem;
    object-fit: cover;
}

/* About Section styling */
#about {
    padding: 1rem 1rem 0.5rem 1rem;
    text-align: center;
    padding-bottom: 0;
}

#about h2 {
    margin-bottom: 1rem;
}

.about-content video {
    max-height: 14rem;
}

/* Featured Destinations Section styling */
#featured {
    padding: 1rem;
    text-align: center;
    background-color: #111111;
}

#featured h2 {
    margin-bottom: 1rem;
}

.destinations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.destination {
    width: calc(50% - 1rem);
    margin: 0.5rem;
    text-align: center;
}

.destination img {
    width: 100%;
    height: auto;
}

.destination-page {
    background-color: #000000; /* Slightly less black */
    color: #000000; /* Slightly more cream */
    font-family: 'Roboto', sans-serif;
    padding: 20px; /* Same padding as mobile version */
}

.card {
    background-color: rgb(254, 255, 246);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px; /* Space between cards */
}

.card a {
    color: rgb(50, 151, 233);
    text-decoration: none;
}

.card-title {
    font-weight: bold;
}

.card h2 {
    font-family: 'Italiana', serif;
    padding: 0 1rem 1rem 1rem;
}

.card img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

.card-text {
    padding: 0.5rem;
}

.featured .products {
    background-color: #000;
}

.product-section-header {
    text-align: center;
}

.blog-post {
    padding: 1.5rem;
}

.post-image img {
    max-width: 100%;
    height: auto;
}

.blog-post-back-link {
    text-align: center;
    font-family: 'Italiana', sans-serif;
    color: rgb(255, 255, 255);
}

/* Team Section styling */
#team {
    padding: 1rem;
    text-align: center;
    background-color: #111111;
}

.team-members {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.team-member {
    width: calc(50% - 1rem);
    margin: 0.5rem;
    text-align: center;
}

.team-member img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-bottom: 1rem;
}

/* Contact Section styling */
#contact {
    padding: 1rem;
    text-align: center;
    background-color: #000;
}

#contact p {
    margin-bottom: 1rem; /* Add some space between the text and the icons */
}

/* Social Media Icons */
.social-media-icons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Adjust the space between icons as needed */
}

.social-media-icons img {
    width: 40px; /* Adjust the size of the icons as needed */
    height: auto;
}

/* Social Media Icons */
.social-media-icons {
    display: flex;
    justify-content: center;
    gap: 20px; /* Adjust the space between icons as needed */
}

.social-media-icons img {
    width: 5rem; /* Adjust the size of the icons as needed */
    height: auto;
}

/* Footer styling */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #111111;
    color: #fff;
    /*border-top: 2mm ridge rgb(255, 255, 255);*/
}

.footer-text {
    text-align: center;
    font-family: 'Italiana', serif;
}

/* Responsive Navbar */
@media (max-width: 768px) {
    .hamburger-menu {
        display: block !important;
        flex-direction: column;
        justify-content: space-around;
        height: 25px;
        width: 35px;
    }

    .navbar-links {
        display: none;
    }

    /* Hide the dropdown content by default */
    .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #333;
        background-image: linear-gradient(90deg, #6b4500, #ffffbd); /* Apply the gradient background to the entire dropdown */
        width: 100%;
        z-index: 1000;
        border-top: 3px solid transparent;
    }

    /* Show the dropdown content when the .show class is added */
    .show {
        display: block;
    }

    .dropdown-content .dropdown-links {
        display: flex;
        flex-direction: column;
    }

    .dropdown-content .dropdown-links a {
        display: block;
        padding: 15px 20px;
        font-family: 'Italiana', serif;
        color: black;
        text-decoration: none;
        border-bottom: 1.5px solid #000000;
        text-align: center;
        background-color: transparent; /* Remove background color from individual links */
        border-top: 1.5px solid transparent;
        font-weight: bold;
    }

    /* Remove the hover effect for the dropdown links */
    .dropdown-content .dropdown-links a:hover {
        font-weight: normal;
        color: black;
    }

    section {
        padding: 2.75rem !important; /* Adjust the padding value as needed */
    }

    #about {
        padding-bottom: 0.5rem !important;
    }

    .view-all-link {
        padding-top: 2rem;
    }

    .destination, .team-member {
        width: 100%;
    }

    .contact-section-text {
        text-align: center;
    }
}


@media (min-width: 769px) {

    body, html {
        font-size: 20px; /* This increases the base font size from a typical 16px */
    }

    h1, h2, h3, h4, h5, h6 {
        font-size: calc(1.25 * 1em); /* Increase heading sizes proportionally */
    }

    p, a, button, input, textarea {
        font-size: 1em; /* Ensure text elements are also increased */
    }

    section {
        padding: 5rem !important; /* Adjust the padding value as needed */
    }

    #about {
        padding-bottom: 0.5rem !important;
    }

    .navbar-links {
        display: flex;
        /* Rest of the styling for navbar links */
    }

    .navbar-links a:hover {
        text-shadow: 0 0 1px #fff, 0 0 5px #fff, 0 0 1px #fff, 0 0 1px #fff; /* Adjust the glow radius */
    }

    .hamburger-menu, .dropdown-content {
        display: none;
    }

    header video {
        max-height: 1000px; /* Adjust the value as needed */
        object-fit: cover; /* Optional: to maintain aspect ratio */
    }

    .about-content video {
        max-height: 14rem;
    }
    
    .about-text {
        flex: 1; /* Assigns a flex grow factor of 1 */
        padding: 0 1rem; /* Adjusts the padding for the text */
        /* Sets a maximum width to prevent the text from getting too wide */
    }    
    
    #about h2 {
        margin-bottom: 1rem; /* Space between the header and paragraph */
    }

    #about p {
        width: 100%;
    }

    .destinations {
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .destination {
        width: auto;  /* Adjust the width to fit content */
        margin: 0 10px;  /* Provide some space between items */
    }

    #products .destinations {
        display: flex;
        justify-content: space-around; /* This spreads out the child elements evenly */
        align-items: start; /* Aligns items at the top */
        flex-wrap: wrap; /* Allows items to wrap onto the next line if needed */
    }

    #products .destination {
        width: 33%; /* Sets each product section to take up one-third of the container's width */
        margin: 0; /* Optional: adjust as necessary to control spacing */
        padding: 0 15px; /* Adds padding on the sides for spacing */
    }

    .view-all-products {
        padding-top: 3rem;
    }

    .team-member p {
        padding: 0.75rem;
    }

    .contact-section-text {
        text-align: center;
        padding: 0 8rem;
    }

    .card {
        text-align: center;
    }

    .card-section {
        padding: 0 5rem;
    }

    .blog-post {
        padding: 1rem;
    }

    footer {
        padding: 1rem;
    }
}

@media (min-width: 1000px) {

    body, html {
        font-size: 1.25rem; /* This increases the base font size from a typical 16px */
    }

    h1, h2 {
        font-size: 1.5rem;
    }

    .destination {
        padding: 1rem 8rem;
    }

    .about-text {
        padding: 0 6rem;
    }

    .about-text h2 {
        padding-bottom: 1.5rem;
    }

    .destination-page.card-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Creates 2 columns */
        gap: 20px; /* Adds space between the grid items */
        margin: 0 auto; /* Optional: Centers the grid in the section */
        max-width: 1200px; /* Optional: Restrict maximum width of the grid */
    }

    .card {
        width: auto; /* Reset width to auto to fill the grid column */
        margin: 10px; /* Provide some space around each card */
    }

    .team-member p {
        padding: 1rem;
    }
}

@media (min-width: 1300px) {
    .blog-post {
        padding: 10rem;
        padding-top: 2rem;
    }
}

@media (min-width: 1500px) {

    body, html {
        font-size: 1.25rem; /* This increases the base font size from a typical 16px */
    }

    h1, h2 {
        font-size: 1.5rem;
    }

    .destination {
        padding: 1rem 8rem;
    }

    .about-text {
        padding: 0 8rem;
    }

    .blog-post {
        padding: 2rem 20rem;
    }

    .team-member p {
        padding: 1rem 2rem;
    }
}