/* ===== Mobile First (0-480px) ===== */
@media (max-width: 480px) {
    
    /* Navbar */
    .navbar .navbar-brand #logo {
        height: 60px;
    }

    .navbar .navbar-toggler {
        border: 2px solid #10528c !important;
    }

    .get-in-touch {
        margin-top: 20px;
    }

    .get-in-touch a {
        width: 100%;
        text-align: center;
    }

    .offcanvas-body .nav-link i {
        display: inline-block !important;
        width: 24px;
        text-align: center;
        margin-right: 12px;
    }

    /* Footer */
    .quick-links-column {
        display: none;
    }
    
    /* Modal */
    .modal-social {
        flex-direction: column;
        gap: 10px;
    }
    .modal-social a {
        justify-content: center;
    }

    /* Stats Container */
    .stats-container .stat-card-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 10px;
    }

    .stat-card {
        width: 200px;
    }


    /* Team & Trades */
    .team-container,
    .trades-container {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }
    
    .member-card,
    .trade-card {
        width: 100%;
        max-width: 300px;
        margin: 15px auto;
    }
    
    .member-image {
        height: 250px;
    }

    /* Other existing styles */
    .overlay h1 {
        font-size: 2rem;
    }
    .container {
        padding: 15px;
    }
}

/* ===== Small Tablets (481-767px) ===== */
@media (min-width: 481px) and (max-width: 767px) {
    /* Team & Trades */
    .team-container,
    .trades-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        max-width: 700px;
        margin: 0 auto;
    }
    
    .member-card,
    .trade-card {
        width: 100%;
        margin: 0;
    }

    /* Navbar */
    .navbar .navbar-brand #logo {
        height: 60px;
    }
    .navbar .navbar-brand {
        font-size: large;
        font-weight: bold;
    }

    .get-in-touch {
        margin-top: 20px;
    }

    .get-in-touch a {
        width: 100%;
        text-align: center;
    }

    .offcanvas-body .nav-link i {
        display: inline-block !important;
        width: 24px;
        text-align: center;
        margin-right: 12px;
    }

    /* Footer */
    .quick-links-column {
        display: none;
    }

    /* Stats Container */
    .stats-container .stat-card-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .stat-card {
        width: 200px;
    }


    /* Client Logos */
    .client-logos {
        gap: 15px;
    }
    .client-item {
        flex: 0 1 120px;
    }
    .client-item img {
        max-height: 60px;
    }
}

/* ===== Tablets (768-992px) ===== */
@media (min-width: 768px) and (max-width: 991px) {

    /* Navbar */
    .navbar .navbar-brand #logo {
        height: 60px;
    }

    .get-in-touch {
        margin-top: 20px;
    }

    .get-in-touch a {
        width: 100%;
        text-align: center;
    }

    .offcanvas-body .nav-link i {
        display: inline-block !important;
        width: 24px;
        text-align: center;
        margin-right: 12px;
    }

    /* Team & Trades */
    .team-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        max-width: 800px;
    }
    
    .trades-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        max-width: 600px;
        margin: 30px auto;
    }

    /* Stats Container */

    .stats-container .stat-card-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    /* Get-in-touch */
    .office-map {
        padding-bottom: 50%;
    }

}

/* ===== Desktop (992-1100px) ===== */
@media (min-width: 992px) and (max-width: 1100px) {

    /* navbar */
    .navbar .navbar-nav li:nth-child(1) {
        display: none;
    }
    
    .navbar-nav {
        gap: 3rem;
    }

    /* Team & Trades */
    .team-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }
    
    .trades-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 25px;
        max-width: 1200px;
    }

    .stats-container .stat-card-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    /* Get-in-touch */
    .office-map {
        padding-bottom: 45%;
        max-width: 700px;
    }

}


/* ===== Large Desktop (1350px+) ===== */
@media (min-width: 1350px) {
    /* Stats Container */
    .stats-container .stat-card-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .nav-link i {
        display: inline-block;
        width: 20px;
        text-align: center;
        margin-right: 8px;
    }
      
    .nav-link {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Get-in-touch */
    .office-map {
        padding-bottom: 45%;
        max-width: 700px;
    }
}


/* Keyframes */
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-50px); }
    to { opacity: 1; transform: translateY(0); }
}