/* RESPONSIVE CSS FOR KELVIN SCALE */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

section {
    overflow: hidden;
}

/* Breakpoints */
/* Extra large devices (large desktops, 1200px and up) */
@media (max-width: 1199.98px) {
    .hero-section{padding:45px 0 0;}
}

/* Large devices (desktops, 992px and up) */
@media (max-width: 991.98px) {
    .footer-copyright {
        text-align: center;
    }

    .footer-bottom-logo {
        margin: 0 auto;
        display: block;
    }

    .section-padding {
        padding: 60px 0;
    }

    .section-heading {
        font-size: 2.2rem;
    }

    .gallery-heading {
        font-size: 2.2rem !important;
    }

    .announcement-bar .btn {
        font-size: 0.75rem;
        padding: 4px 12px !important;
    }

    .footer-column-header {
        font-size: 1.3rem;
    }

    .footer-column {
        margin-bottom: 2rem;
    }

    footer .col-lg-5 {
        text-align: center;
    }

    .hero-section img {
        height: auto;
        min-height: 400px;
        object-fit: cover;
    }

    /* Bento Grid Adjustments */
    #about .col-lg-4 {
        width: 100%;
    }

    #about .h-50 {
        height: auto !important;
        min-height: 250px;
    }

    #about .feature-card {
        margin-bottom: 20px;
    }

    .footer-contact-info,
    .footer-link {
        font-size: 12px;
        text-align: left;
    }

    footer .list-unstyled li {
        line-height: 14px;
    }

    .social-circle {
        width: 25px;
        height: 25px;
        font-size: 12px;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (max-width: 767.98px) {
    .modal.show .modal-dialog {
        width: 300px;
        margin: 0 auto;
    }

    .ks-contact-modal .modal-body {
        padding: 0px 15px 28px;
    }

    .footer-main {
        align-items: flex-start !important;
    }

    .social-icons-wrapper {
        gap: 5px;
    }

    .footer-socials {
        max-width: 115px;
        margin-left: auto;
    }

    footer .list-unstyled {
        text-align: left;
        padding: 0;
    }

    .footer-link {
        display: inline-block;
        text-align: left;
    }

    .section-heading {
        font-size: 2rem;
    }

    .feature-card {
        min-height: 280px !important;
    }

    .map-card {
        padding: 30px !important;
    }

    .map-card h1 {
        font-size: 2rem !important;
    }

    footer .text-start {
        text-align: center !important;
    }

    .footer-column {
        text-align: center;
        margin-bottom: 3.5rem;
    }

    .footer-column-header {
        font-size: 15px;
        margin-bottom: 10px;
        text-align: left;
    }

    .footer-column::after {
        display: none !important;
    }

    .floating-anim {
        max-height: 350px !important;
        margin-top: 1rem;
        margin-bottom: 2rem;
    }

    /* Better Product Grid on Mobile */
    .product-item {
        margin-bottom: 2rem;
    }

    .full-product-card h4 {
        font-size: 1.1rem !important;
    }

    /* Full Screen Mobile Menu Overlay */
    body:has(.navbar-collapse.show) {
        overflow: hidden;
    }

    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #fff;
        z-index: 1000;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding-top: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-10px);
        padding: 100px 0 0;
    }

    .navbar-collapse.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .navbar-nav {
        text-align: center;
        width: 100%;
    }

    .nav-item {
        margin-bottom: 1.5rem;
    }

    .nav-link {
        font-size: 1.8rem !important;
        font-weight: 700 !important;
        color: #003F66 !important;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .nav-link:hover,
    .nav-link:active {
        transform: scale(1.1);
        color: var(--ks-primary) !important;
    }

    /* Ensure Logo and Toggle stay on top of overlay */
    .navbar-brand,
    .navbar-toggler {
        position: relative;
        z-index: 1100;
    }

    /* Centered Filter Pills */
    .filter-pill-container {
        justify-content: center !important;
    }

    /* About Content Padding */
    .about-content {
        padding: 0 1rem;
    }

    /* Footer Social Alignment */
    .social-icons-wrapper {
        justify-content: center;
        margin-bottom: 0;
    }

    .footer-big-logo-container {
        text-align: center;
        margin-top: 1rem;
        padding-top: 0;
    }

    .footer-bottom-logo {
        max-width: 280px;
    }

    .footer-copyright {
        text-align: center;
        margin-top: 1.5rem;
        font-size: 0.8rem;
    }

    .mixer img {
        width: 170px !important;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 575.98px) {


    .product-card {
        padding: 0 !important;
    }

    footer p {
        font-size: 9px !important;
    }

    .product-card a {
        font-size: 13px;
        padding: 10px 0px;
    }

    .section-padding {
        padding: 40px 0;
    }

    .section-heading {
        font-size: 1.8rem;
    }

    .gallery-heading {
        font-size: 1.8rem !important;
    }

    .feature-title {
        font-size: 1.25rem;
    }

    .announcement-text {
        font-size: 0.75rem;
    }

    .hero-section img {
        height: 400px;
        object-fit: cover;
    }

    /* Ticker Text Sizing */
    .ticker-item {
        font-size: 1.2rem !important;
    }

    /* More Padding for Small Screens */
    .display-3 {
        font-size: 2.5rem !important;
        padding: 0 0 0 15px;
    }

    .display-4 {
        font-size: 2.2rem !important;
    }

    /* Contact Form Spacing */
    #contact input,
    #contact textarea {
        margin-bottom: 1rem;
    }
}