@media (max-width: 768px) {
    h1 {
        font-size: 40px;
    }
    h2 {
        font-size: 24px;
    }

    /* NAVBAR */
    .navbar {
        .logo {
            width: 100px;
        }

        .items {
            display: none;
        }

        .btn-menu {
            display: block;
            font-size: 24px;
            background-color: transparent;
            border: none;
            cursor: pointer;
            color: #000;
        }

        .sidebar {
            position: fixed;
            z-index: 5;
            top: 80px;
            right: -60%;
            width: 60%;
            height: calc(100% - 80px);
            background: #fff;
            color: #000;
            transition: right 0.3s ease-in-out;
            padding: 20px 10%;
            display: flex;
            flex-direction: column;
            gap: 40px;
            border-top: 1px solid #ccc;

            a {
                color: #000;
                /* text-align: center; */
                text-decoration: none;
                font-size: 1rem;
            }

            .btn-action {
                position: absolute;
                bottom: 80px;
                left: 50%;
                transform: translateX(-50%);

                button {
                    width: 150px;
                    padding: 10px;
                    background-color: #212468;
                    color: #fff;
                    border-radius: 50px;
                }
            }

            .social-media {
                position: absolute;
                bottom: 20px;
                left: 0;
                display: flex;
                gap: 10px;
                justify-content: center;
                width: 100%;

                a {
                    font-size: 24px;
                    color: #212468;
                }
            }
        }
        .sidebar.active {
            right: 0;
        }
    }

    /* MAIN */
    .main {
        background-image: url("../src/assets/background-mobile.webp");
        padding: 0;

        .content {
            backdrop-filter: blur(4px);
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: 0 30px;
            width: 100%;
            height: 100%;
            text-shadow: 1px 1px 4px #2e2e2e;
            color: #fff;
            .description {
                color: #fff;
                font-size: 18px;
            }

            .btn-whatsapp {
                background-color: transparent;
                color: #fff;
                border-color: #fff;
                backdrop-filter: blur(15px);
                font-size: 14px;
            }
        }
    }

    /* ABOUT */
    .about {
        height: fit-content;
        padding: 40px 20px;
        align-items: center;
        img {
            display: none;
        }

        .content {
            width: 100%;
            padding: 0 30px;
        }
    }

    /* BANNER */
    .banner {
        display: grid;
        grid-template-columns: 1fr 1fr;
        justify-items: center;
        gap: 40px;
        padding: 50px;
    }

    /* SERVICES */
    .services {
        background-image: url("../src/assets/service.webp");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        img {
            display: none;
        }

        .content {
            backdrop-filter: blur(4px);
            padding: 50px 30px;
            color: #fff;
            width: 100%;

            p {
                font-size: 18px;
            }

            .items {
                .item {
                    border-color: #fff;
                    font-size: 14px;
                }
            }
        }
    }

    /* CONTACT */
    .contact {
        height: auto;
        flex-direction: column;
        p {
            font-size: 18px;
        }
        .forms {
            width: 100%;
            padding: 50px 30px;

            form {
                width: 80%;
                input {
                    padding: 10px;
                    width: 100%;
                }
            }
        }

        .divisor {
            height: 1px;
            width: 80%;
        }

        .content {
            width: 100%;
            padding: 50px 30px;
        }
    }

    /* FOOTER */
    footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
        padding: 0 30px;

        .content{
            .logo{
                margin: 0 auto;
            }
        }
    }
}