/* General Body Styling for Home Page */
body {
    font-family: 'Roboto', sans-serif;
    background: linear-gradient(180deg, #f9f6ee 0%, #f6e4d2 100%);
    background-attachment: fixed;
    margin: 0;
    padding: 0;
}

/* Header Styling */
header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav {
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding: 0 20px;
    background-color: #f9f6ee !important;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

nav .brand-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 32px;
    color: #333333 !important;
    font-size: 1.5rem;
    font-weight: bold;
}

.logo {
    height: 50px;
    width: auto;
    margin-right: 5px;
}

nav .nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav .nav-wrapper ul li a {
    /* Adjust the radius as per your preference */
    border-radius: 10px;
    /* Smooth hover effect */
    transition: background-color 0.3s ease;
}

nav .nav-wrapper ul li a:hover {
    /* Ensure hover state remains rounded */
    border-radius: 10px;
}

nav .right {
    margin-left: auto;
}

nav .right a {
    margin-left: 20px;
    color: #333333 !important;
    font-weight: bold;
    font-size: 1.3rem;
}

/* Hide the dropdown for large screens and show it only for mobile */
@media only screen and (max-width: 768px) {
    #nav-mobile {
        /* Hide the regular menu on mobile */
        display: none;
    }

    .dropdown-trigger {
        /* Show the dropdown menu */
        display: block;
        /* Move the hamburger a bit from the right */
        margin-right: 15px;
    }
}

/* For landscape mode (device width between 768px and 992px) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
    #nav-mobile {
        /* Show the regular menu (About Us & Contact Us) */
        display: block;
    }

    .dropdown-trigger {
        /* Hide the hamburger menu */
        display: none;
    }
}

/* For larger screens (desktop view) */
@media only screen and (min-width: 993px) {
    #nav-mobile {
        /* Show the regular menu */
        display: block;
    }

    .dropdown-trigger {
        /* Hide the hamburger menu */
        display: none;
    }
}

/* Add Materialize styling to the nav links */
.nav-wrapper {
    padding-left: 15px;
    padding-right: 15px;
}

.dropdown-trigger i {
    /* Increase size of the hamburger icon */
    font-size: 30px;
    /* Ensure the icon color contrasts well */
    color: #333333 !important;
}

/* Ensure About Us & Contact Us links are black */
.nav-wrapper .black-text {
    color: black !important;
}

/* Material Design Styling for the Dropdown Menu */
.dropdown-content {
    /* Light background color for dropdown */
    background-color: #f9f6ee !important;
    /* Dark text color for dropdown */
    color: #333333 !important;
    /* Rounded corners */
    border-radius: 8px;
}

/* Grid Layout for Cards */
.grid-container {
    display: grid;
    /* Responsive column layout */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Spacing between cards */
    gap: 20px;
    /* Padding around the grid */
    padding: 20px;
}

/* Card Styling for Home Page */
.card {
    /* Adjust the top margin */
    margin-top: 40px;
    /* Ensure consistent bottom margin */
    margin-bottom: 40px;
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #f9f6ee;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: left;
    /* Set a fixed height for the card */
    height: 350px;
    width: 100%;
    box-sizing: border-box;
}

.card .card-action a:not(.btn):not(.btn-large):not(.btn-small):not(.btn-large):not(.btn-floating) {
    color: #333333 !important;
}

/* Card Hover Effect */
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.15);
}

/* Card Image Styling */
.card-image {
    width: 100%;
    /* Set a fixed height for the image */
    height: 200px;
    /* Hide any excess parts of the image */
    overflow: hidden;
    /* Rounded top corners */
    border-radius: 8px 8px 0 0;
}

.card-image img {
    /* Ensure the image takes up the full width */
    width: 100%;
    /* Set a fixed height for consistency */
    height: 12rem;
    /* Ensures the image fully covers the area */
    object-fit: cover
}

/* Card Title Styling */
.card-title {
    color: #333333;
    font-size: 1.6rem;
    font-weight: bold !important;
    margin-bottom: 10px;
}

/* Button Styling */
button.btn {
    background-color: #faf5e7 !important;
    width: 100%;
    border-radius: 8px;
    padding: 12px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

/* Button Hover Effect */
button.btn:hover {
    background-color: #f5eede !important;
}

/* Input Field Styling */
.input-field {
    margin-bottom: 20px;
}

/* Footer Styling */
.page-footer {
    /* Add rounded corners */
    border-radius: 10px;
    /* Set smaller height for the footer */
    height: 50px;
    /* Optional: add some padding on the sides */
    padding: 0 20px;
    /* Background color */
    background-color: #f9f6ee !important;
    /* Add shadow to the footer */
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    /* Text color */
    color: #333333 !important;
    /* Add some space at the bottom */
    margin-bottom: 10px;
    /* Center text in footer */
    text-align: center;
}

.page-footer .copyright {
    /* Enable flexbox */
    display: flex;
    /* Horizontally center text */
    justify-content: center;
    /* Vertically center text */
    align-items: center;
    /* Set full width */
    width: 100%;
}

/* Flash Message Styling */
.card-panel {
    border-radius: 8px;
    padding: 12px;
    font-size: 1rem;
}

.card-panel.teal,
.card-panel.success {
    background-color: #f9f6ee !important;
    color: #333333 !important;
}

.card-panel.error {
    background-color: #d32f2f !important;
    color: white !important;
}

/* Responsive Adjustments for Home Page */
@media only screen and (max-width: 600px) {
    .card {
        margin-bottom: 20px;
        /* Remove max-width constraint on smaller screens */
        max-width: 100%;
    }

    .page-footer .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    button.btn {
        padding: 15px;
    }
}

/* Aligning Cards in a Grid Layout */
.row {
    display: flex;
    /* Allow wrapping to next row on smaller screens */
    flex-wrap: wrap;
    /* Align cards in a row */
    justify-content: space-between;
    /* Remove extra space from left side */
    margin-left: -10px;
    /* Remove extra space from right side */
    margin-right: -10px;
    /* Add padding to the bottom to prevent footer overlap */
    margin-bottom: 50px;
}

/* Adjust card column sizing */
.col.s12.m6.l4 {
    /* Reduce padding between columns */
    padding-left: 10px;
    padding-right: 10px;
    /* 3 cards in a row */
    width: 32%;
    /* Ensure padding is considered in the width */
    box-sizing: border-box;
    height: 400px;
}

/* Optional: Ensure cards have same height and are aligned */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card .card-action {
    display: inline-flex;
    border-top: 1px solid hsla(0, 0%, 88%, 0);
    margin-bottom: 10px;
}

.card .card-action:last-child {
    border-radius: 0% 0% 12px 12px;
}

.custom-row .col {
    /* Adds spacing between cards */
    padding: 10px;
}

@media only screen and (min-width: 601px) and (max-width: 992px) {

    /* For tablets: 2 cards per row */
    .custom-row .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media only screen and (min-width: 993px) {

    /* For desktops: 2 cards per row */
    .custom-row .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media only screen and (max-width: 600px) {

    /* For mobile: 1 card per row */
    .custom-row .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}