@media (max-width: 801px){
    #navbar{
        /* Sidebar */
        #navigation{
            flex-direction: column;
            position: fixed;
            top: 0;
            right: -100%;
            height: 100dvh;
            width: min(15em, 100%);
            z-index: 10;
            background-color: var(--surface);

            li{
                width: 100%;
                padding-top: 10px;

                 a{
                    display: block;
                    width: 100%;
                    padding-left: 2.5em;
                    color: #000;
                }
            }
        }

        /* Menu mobile */
        .menu-mobile{
            display: block;
        }

        .cta-scheduling{
            display: none;
        }
    }

    /* Hero-section */
    #hero-section{
        flex-direction: column;
        margin-top: 3em;
        justify-content: center;
        align-items: center;

        .hero-text{
            align-items: center;
            text-align: center;
            width: max(80%, 320px);
        }
    }
}

@media (max-width: 768px){

    footer{
        .footer-content{
            grid-template-columns: 1fr;
            gap: 25px !important;
            text-align: center;
        }
    }
}


@media(max-width: 651px){

    main{
        #promotion{

            h2{
                text-align: center;
            }

            .cards{
                .card{
                    flex-direction: column;
                    border-bottom-left-radius: 30px;
    
                    .text-container{
                        width: 95%;
                        margin: 0 auto;
                        
                        .btn-container{
                            align-self: flex-start;
                            margin: var(--spacing-small) 0;
                        }

                        .description{
                            width: 100%;
                        }
                    }
        
                    img{
                        width: 100%;
                        border-bottom-left-radius: 0px;
                        border-top-right-radius: 10px;
                    }
                } 
            }
        }

        #benefits{

            .benefits-container{
                grid-template-columns: repeat(2, 1fr);
            }
        }
    }
}