@media (max-width: 768px) {

    /* GLOBAL */

        button.nav-toggle {
            display: inline-flex; 
            align-items: center; 
            justify-content: center;
        }

        .nav-links {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            flex-direction: column;
            gap: 0;
            background: #fff;
            padding: 16px 24px 24px;
            box-shadow: 0 10px 30px rgba(0,0,0,.08);
            z-index: 99;
            display: flex;                
            opacity: 0;                   
            transform: translateY(-8px);  
            transition: opacity .25s ease, transform .25s ease;
            visibility: hidden;
            pointer-events: none;
        }

        .nav-links li { 
            border-bottom: 1px solid #f3f5f9;
        }

        .nav-links li:last-child { 
            border-bottom: 0; 
        }
        
        .nav-links a {
            display: block;
            padding: 14px 4px;
            font-size: 16px; 
        }

        .navbar.is-open .nav-links { 
            opacity: 1;
            transform: translateY(0);
            visibility: visible;
            pointer-events: auto;
        }

        .navbar.is-open .nav-toggle .icon-burger { display: none; }
        .navbar.is-open .nav-toggle .icon-close { display: block; }

        a.logo img { width: 80px;}

        footer {
            padding: 20px;
        }

        .footer-container {
            /* grid-template-columns: 1fr; 
            justify-items: center; */
            flex-direction: column;
            align-items: center;
            gap: 50px;
        }

        .footer-container .logo-container img {
            width: 120px;
        }

    /* HOME */

        .hero-title-home {
            font-size: 32px;
        }

        .btn-hero {
            width: 100%;
        }

        .book-home-btn, .contact-home-btn {
            width: 80%;
        }
        
        .section-title {
            font-size: 28px;
        }
            
        .offers-grid,
        .testimonials-grid,
        .problems-grid {
            grid-template-columns: 1fr;
        }

        .problem-item {
            align-items: center;
            gap: 20px;
        }

    /* SERVICES */

        .hero-services {
            padding: 80px 0 60px;
        }

        .hero-title-services {
            font-size: 24px;
        }

        .hero-nav ul{
            grid-template-columns: 1fr;
        }

        .offer-badge {
            top: -18px;
            left: 35%;
            transform: translateX(-50%);
        }

        .container-offers {
            padding: 0 20px; 
        }

        .offer-card {
            padding: 24px; 
        }

        .b2b-features {
            grid-template-columns: 1fr;
            margin: 80px 0;
        }

        .btn-cta-services, .contact-services-btn {
            width: 86%; 
        }

    /* ABOUT */
        .container-about {
            padding: 0 20px;
        }
    
        .hero-about h1 {
            font-size: 32px;
        }

        .profile-photo-container {
            width: 180px;
            height: 180px;
            border-radius: 50%;
        }

        .profile-photo-container img {
            width: 180px;
            height: auto;
        }
        
        .content-grid,
        .beliefs-grid {
            grid-template-columns: 1fr;
        }

        .birka-story {
            padding: 40px 40px 60px;
        }


        .cta-btn-about {
            width: 86%;
        }
        
    /* TESTIMONIALS */

        .categories-nav ul {
            grid-template-columns: 1fr;
        }

        .container-testimonials {
            padding: 0 20px;
        }

        .container-testimonials h1 {
            font-size: 30px;
        }

        .container-testimonials h2 {
            font-size: 28px;
        }

        .cta-btn-testimonials {
            width: 86%;
        }

    /* CONTACT */

        .container-contact {
            padding: 0 20px;
        }


        .hero-contact h1 {
            font-size: 32px;
        }

        .container-contact h2 {
            text-align: center;
        }

        .content-grid {
            grid-template-columns: 1fr;
        }            
}