/* Base Styles for Mobile Devices */
body {
    font-size: 16px; /* Base font size */
    line-height: 1.5; /* Line height for readability */
}

/* General Styles for Navigation Menu */
nav {
    display: flex; /* Flexbox for navigation layout */
    justify-content: space-between; /* Space between logo and menu */
    align-items: center; /* Center items vertically */
}

/* Hamburger Menu Styles */
.hamburger {
    display: none; /* Hide hamburger by default */
    flex-direction: column; /* Stack lines vertically */
    cursor: pointer; /* Pointer cursor for interactivity */
}

.hamburger div {
    width: 25px; /* Width of hamburger lines */
    height: 3px; /* Height of hamburger lines */
    background: #fff; /* White color for lines */
    margin: 4px 0; /* Space between lines */
}

/* Responsive Navigation Menu */
nav ul {
    display: flex; /* Flexbox for desktop */
}

nav.active ul {
    display: block; /* Show menu when active */
    position: absolute; /* Positioning for dropdown */
    top: 60px; /* Position below the header */
    left: 0; /* Align to left */
    background: #007BFF; /* Background color */
    width: 100%; /* Full width */
    z-index: 999; /* Above other content */
}

nav.active ul li {
    margin: 10px 0; /* Space between items in dropdown */
}

/* Media Queries for Tablet Devices */
@media (max-width: 1024px) {
    .highlight-card {
        width: calc(50% - 40px); /* 2 cards in a row */
    }

    nav ul {
        display: none; /* Hide menu by default */
    }

    .hamburger {
        display: flex; /* Show hamburger on tablet */
    }
}

/* Media Queries for Mobile Devices */
@media (max-width: 768px) {
    body {
        font-size: 14px; /* Adjust font size for mobile */
    }

    .hero {
        height: 300px; /* Reduce height for mobile */
    }

    .hero .cta-button {
        padding: 10px 20px; /* Adjust padding for mobile */
        font-size: 16px; /* Adjust font size */
    }

    .highlight-card {
        width: calc(100% - 40px); /* 1 card in a row */
    }

    nav {
        flex-direction: column; /* Stack items vertically */
        align-items: flex-start; /* Align to start */
    }

    nav ul {
        flex-direction: column; /* Stack menu items vertically */
        width: 100%; /* Full width */
        padding: 10px 0; /* Padding for dropdown */
    }

    nav ul li {
        margin: 5px 0; /* Space between items */
    }

    .hamburger {
        display: flex; /* Show hamburger on mobile */
    }
}

/* Media Queries for Large Desktop Devices */
@media (min-width: 1200px) {
    .highlight-card {
        width: calc(25% - 40px); /* 4 cards in a row */
    }
}

/* Additional Responsive Adjustments */
footer {
    display: flex; /* Flexbox for footer layout */
    flex-direction: column; /* Stack footer sections */
    align-items: center; /* Center align */
}

.footer-quick-links,
.footer-social-media,
.footer-contact {
    margin-bottom: 15px; /* Space between footer sections */
}

/* Responsive Footer Styles */
@media (max-width: 768px) {
    footer {
        padding: 20px; /* Padding for mobile footer */
    }
    
    .footer-quick-links,
    .footer-social-media,
    .footer-contact {
        text-align: center; /* Center text for smaller screens */
    }
}