/* Responsive Styles */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    .home-hero {
        padding: 6rem 0 3rem 0 !important;
        text-align: center;
    }

    .home-hero .col-lg-7 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .hero-cta .btn {
        display: block;
        width: 100%;
        margin-bottom: 1rem;
    }

    .hero-cta .btn + .btn {
        margin-left: 0 !important;
    }

    /* Add spacing between product cards in mobile view */
    .featured-products .col-md-6:not(:last-child) {
        margin-bottom: 2rem;
    }

    .certifications {
        text-align: center;
        padding: 3rem 0;
    }

    .certifications .col-md-6 {
        text-align: center;
    }

    .certifications .cert-badges {
        margin-top: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .certifications .cert-badges img {
        max-width: 100%;
        height: auto;        
    }

    .certifications .cert-badges .cert-badge-container {
        align-self: center; /* Prevents the container from stretching */
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .hero-section h1 {
        font-size: 3rem;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .navbar-brand img.logo {
        height: 35px;
    }

    .product-card {
        padding: 1.5rem;
    }
}

/* Mobile Navigation Fixes */
@media (max-width: 991.98px) {
    .navbar-nav {
        text-align: center;
    }
    
    /* Center headings on mobile, except for features */
    h2:not(.feature-heading):not(.text-start) {
        text-align: center;
    }
    
    h2:not(.feature-heading):not(.text-start)::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .navbar-nav .dropdown-toggle {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .navbar-nav .dropdown-toggle::after {
        margin-left: 0.5em;
    }
    
    .navbar-nav .nav-item.dropdown {
        width: 100%;
    }
    
    .navbar-nav .dropdown-menu {
        text-align: center;
        border: none;
        background-color: transparent;
    }
}

/* News Section Responsive Styles */
@media (max-width: 991.98px) {
    .news-item .object-fit-cover {
        height: 250px;
    }
    
    .featured-news .object-fit-cover {
        border-radius: 12px 12px 0 0 !important;
    }
}

@media (max-width: 767.98px) {
    .news-item .object-fit-cover {
        height: 200px;
        border-radius: 12px 12px 0 0 !important;
    }
    
    .news-item .card-body {
        padding: 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .news-item {
        margin-bottom: 1.5rem;
    }
    
    .featured-badge {
        top: 10px;
        left: 10px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .date-badge {
        font-size: 0.8rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1.5rem !important;
        padding-left: 1.5rem !important;
    }

    .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

/* Print styles */
@media print {
    .navbar,
    .hero-cta,
    .footer {
        display: none;
    }

    .hero-section {
        background: none;
        color: #000;
        padding: 0;
    }

    .hero-section::before {
        display: none;
    }

    .container {
        max-width: 100%;
        padding: 0;
    }
}