@charset "UTF-8";

/* Responsive Design */
@media (max-width: 1024px) {

    #burguer{
        display: block;
        font-size: 4rem;
        padding: 2.4rem;
    }

    #burguer:focus{
        transition: height 300ms ease-in-out;
    }

    #logo-header{
        margin-top: 2rem;
    }

    .cabecalho {
        flex-direction: column;
        padding: 1rem;
    }

    .cabecalho-menu {
        flex-direction: column;
        gap: 1rem;
        position: sticky;
        top: 80px;
        right: 0;
        width: 100%;
        text-align: center;
        z-index: 9;
        padding: 0 2rem;
        max-height: 0;
        overflow: hidden;
        transition: max-height .4s ease-in-out;
    }

    .cabecalho-menu.active{
        max-height: 500px;
    }

    .cabecalho-menu-item{
        padding: 15px;
    }

    .hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* height: 100vh; */
        /* padding: 2rem; */
    }

    .hero img{
        /* max-width: 100vw; */
        width: 108vw;
        margin-left: -7.6rem;
        margin-top: 6rem;
    }

    .hero-content{
        padding: 3rem;
        text-align: center;
    }

    .hero-title {
        font-size: 3.6rem;
    }

    .hero-subtitle {
        font-size: 2rem;
    }

    .hero-slogan {
        font-size: 2rem;
    }

    .hero-cta{
        font-size: 2rem;
    }

    .review-card {
        min-width: 260px;
    }

    .services, .about, .detailed-services, .extra-services, .contact {
        padding: 2rem 1rem;
    }

    .about-text{
        font-size: 1.6rem;
    }

    .section-title {
        font-size: 2.6rem;
    }

    .servic{
        padding: 4rem;
    }

    .carousel-container-servicos {
        /* padding: 0 1rem; */
    }

    .carousel-servicos {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 1rem;
        padding: 1rem 0;
    }

    .carousel-servicos::-webkit-scrollbar {
        display: none;
    }

    .service-card {
        /* width: 100vw;
        flex: 0 0 auto;
        scroll-snap-align: start;
        background-color: #fff;
        border-radius: 1rem;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; */
        /* box-sizing: border-box; */
        flex: 0 0 100%; 
        scroll-snap-align: start;
        box-sizing: border-box;
    }

    .service-title {
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
    }

    .service-text {
        font-size: 1.6rem;
        line-height: 1.6;
    }

    .carousel-btn {
        font-size: 2rem;
        padding: 0 0.3rem;
        color: #0071C1;
    }

    /* Botões de navegação (próximo/anterior) */
    .carousel-btn {
        font-size: 2rem;
        padding: 8px 14px;
        color: #0071C1;
    }

    .pricing {
        flex-direction: column; /* Stack cards vertically on smaller screens */
        align-items: center;
        gap: 30px; /* Increased gap for better spacing */
    }

    .subtitle-pricing{
        width: 100vw;
        font-size: 3rem;
        /* margin-top: 4.4rem; */
    }

    .pricing-plan {
        width: 100%; /* Cards ocupam a largura total em telas menores */
        /* padding: 15px; Reduced padding for very small screens */
        border-radius: 3rem;
    }

    .pricing-plan-title {
        font-size: 2rem; /* Even smaller font size for very small screens */
    }

    .pricing-plan__price {
        font-size: 2.6rem; /* Smaller price text for mobile */
    }

    .pricing-plan__features li {
        font-size: 1.6rem; /* Smaller feature text for mobile */
    }

    .contact{
        padding: 9.8rem 4rem;
    }

    .contact-paragraph{
        font-size: 1.6rem;
    }

    .cta-outro-site{
        font-size: 1.4rem;
    }

    .cta-outro-site a{
        font-size: 1.8rem;
    }

    .logo-footer{
        width: 16rem;
    }

    .footer-text{
        font-size: 1.4rem;
    }

    .email i{
        color: #143d58;
        font-size: 2.6rem;
    }
    
    .footer-text a{
        /* text-decoration: none; */
        color: #143d58;
        font-size: 1.6rem;
    }
    
    
    
}