/*==========================================
LAPTOPS
==========================================*/

@media(max-width:1200px) {

    .contact-section .container {

        grid-template-columns: repeat(2, 1fr);

    }

}

/*==========================================
TABLETS
==========================================*/

@media(max-width:992px) {

.banner {

        height: 180px;

    }

    .overlay h1 {

        font-size: 2rem;

    }

    .overlay p {

        font-size: .95rem;

    }

    .help-content {

        padding: 45px;

    }

    .help-content ul {

        grid-template-columns: 1fr;

        text-align: left;

    }

}

/*==========================================
MOBILE MENU
==========================================*/

@media(max-width:768px) {

    .navbar {

        height: 70px;

        padding: 0 20px;

    }

    .menu-toggle {

        display: block;

        font-size: 30px;

        color: #5D4037;

        z-index: 1001;

    }

    .nav-links {

        position: fixed;

        top: 70px;

        right: -100%;

        width: 280px;

        height: calc(100vh - 70px);

        background: white;

        display: flex;

        flex-direction: column;

        align-items: flex-start;

        padding: 20px 30px;

        gap: 25px;

        transition: .35s ease;

        box-shadow: -8px 0 25px rgba(0, 0, 0, .15);

    }

    .nav-links.active {

        right: 0;

    }

    .contact-section .container {

        grid-template-columns: 1fr;

    }

.banner {

    height: 150px;

}

.overlay {

    padding: 15px;

}

.overlay h1 {

    font-size: 1.6rem;

    margin-bottom: 8px;

}

.overlay p {

    font-size: .85rem;

    line-height: 1.5;

}

    .hours {

        padding: 10px 20px;

    }

    .help {

        padding: 2px 10px;

    }
        .help-content h2 {
    
            font-family: 'Playfair Display', serif;
    
            font-size: clamp(2rem, 4vw, 2rem);
    
            color: #5D4037;
    
            margin-bottom: 15px;
    
        }

    .map {

        padding: 10px 10px;

    }

    .cta {

        padding: 20px 20px;

    }

}

/*==========================================
SMALL TABLETS
==========================================*/

@media(max-width:600px) {

    .logo h2 {

        font-size: 22px;

    }

    .logo small {

        font-size: 12px;

    }

    .overlay h1 {

        font-size: 2rem;

    }

    .overlay p {

        font-size: .95rem;

    }

    .contact-card {

        padding: 30px 20px;

    }

    .contact-card h3 {

        font-size: 1.3rem;

    }

    .hours-card {

        padding: 15px 25px;

    }

    .hours-card h2 {

        font-size: 2rem;

    }
        .hours-time {
    
            display: inline-block;
    
            padding: 10px 35px;
    
            background: #FFF5EB;
    
            border: 2px dashed #E67E22;
    
            border-radius: 18px;
    
            font-weight: 600;
    
            color: #5D4037;
    
            font-size: 20px;
    
            line-height: 1.7;
    
        }
    
        .hours-time span {
    
            display: block;
    
            color: #E67E22;
    
            font-size: 20px;
    
            font-weight: 700;
    
        }

    .help-content {

        padding: 35px 25px;

    }

    .help-content h2 {

        font-size: 2rem;

    }

    .map h2 {

        font-size: 2rem;

    }

    .cta h2 {

        font-size: 2.1rem;

    }

}

/*==========================================
MOBILE
==========================================*/

@media(max-width:480px) {

    .navbar {

        padding: 0 15px;

    }

    .logo {

        gap: 8px;

    }

    .logo h2 {

        font-size: 18px;

    }

    .logo small {

        font-size: 11px;

    }

    .overlay {

        padding: 20px;

    }

    .overlay h1 {

        font-size: 1.7rem;

    }

    .overlay p {

        font-size: 14px;

        line-height: 1.6;

    }

    .contact-card {

        border-radius: 15px;

    }

    .contact-card i {

        font-size: 36px;

    }

    .help-content li {

        font-size: 15px;

    }

    .btn {

        width: 100%;

        text-align: center;

    }

    .map-container iframe {

        height: 320px;

    }

    footer {

        padding: 30px 15px;

    }

}

/*==========================================
VERY SMALL DEVICES
==========================================*/

@media(max-width:360px) {

    .overlay h1 {

        font-size: 1.5rem;

    }

    .overlay p {

        font-size: 13px;

    }

    .hours-card h3 {

        font-size: 1.5rem;

    }

    .help-content {

        padding: 25px 18px;

    }

    .cta h2 {

        font-size: 1.7rem;

    }

}