.service-rotation-container {
    height: 30px; /* Adjust based on your font size */
    overflow: hidden;
    display: flex;
    align-items: center;
}

.service-rotate-item {
    display: block;
    color: #ffcc00; /* Use your NeighborSun brand yellow */
    font-weight: 600;
    text-decoration: none;
    transition: all 0.5s ease-in-out;
    opacity: 0;
    transform: translateY(10px);
}

.service-rotate-item.active {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 1024px) {
    .design-data{
        justify-content: space-between !important;
    }
    .header .logo-data {
    position: relative;
    left: 0;
   }

   .header .logo-data img{
    width: 200px;
   }
}
@media (max-width: 768px) {

    .logo-data img {
        max-width: 160px !important; /* Ajusta este valor según la forma de tu logo */
        height: auto !important;

    }
    .logo-data {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: flex;
        align-items: center;
        left: 0 !important;
    }
    .li-nav{
            font-size: 8px !important; 
            line-height: 1.2;
            margin-bottom: 15px;
        }

    .close-btn {
            width: 60px !important; /* Tamaño del área de clic */
            height: 35px !important;
            display: flex !important;
            align-items: flex !important;
            justify-content: flex-end !important;
            cursor: pointer;
            margin-left:450px !important;       
        }
    .data-close .docts-responsive img {
            width: 16px !important;
            height: auto !important;
        }

    .contact-data{
            font-size: 8px !important; 
            line-height: 0.5 !important;
            margin-bottom: 5px !important;
        }


    h1 {
        font-size: 48px !important; 
        line-height: 1.2;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 26px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 22px !important; 
    }

    p {
        font-size: 16px !important;
    }
 .font-exper.count {
    text-align:left /* Asegura que el texto interno también apunte a la derecha */
}
    .rounded-about {
        right: 50px;
        top: -5%;
        width: 70px;
        height: 70px;
    }
    .count {
        font-size: 90px !important; 
        font-weight: 700 !important; 
        margin-left: 0px;
        line-height: 0.4 !important;   
        color: var(--primary-color); 
        margin-top: 8px;
        margin-right: -40px !important;
        display: block;
    }
    .year-exper{ 
        display: flex;
        top: 4px;
        line-height: 1 !important;   
        color: var(--primary-color); 
        margin-top: 8px;
        margin-right: -40px !important;
    }

}


@media (max-width: 426px) {
   .logo-data img {
        max-width: 160px !important; 
        height: auto !important;
    }

    .logo-data{
        width: 100%;
        display: flex;
        justify-content: space-between;
    }
    
    .close-btn {
            width: 60px !important;
            height: 35px !important;
            display: flex !important;
            align-items: flex !important;
            justify-content: flex-end !important;
            cursor: pointer;
            margin-left:10px !important;       
        }
    .data-close .docts-responsive img {
            width: 16px !important;
            height: auto !important;
        }

    h1 {
        font-size: 48px !important; 
        line-height: 1.2;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 26px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 22px !important; 
    }

    p {
        font-size: 16px !important;
    }
    .rounded-about {
        right: 50px;
        top: -5%;
        width: 70px;
        height: 70px;
    }
    .count {
        font-size: 90px !important; 
        font-weight: 700 !important; 
        margin-left: 0px;
        line-height: 0.6 !important;   
        color: var(--primary-color); 
        margin-top: 8px;
        margin-right: -30px !important;
        display: block;
    }
    .year-exper{ 
        display: flex;
        top: 4px;
        line-height: 1 !important;   
        color: var(--primary-color); 
        margin-top: 8px;
        margin-right: -40px !important;
    }


}
@media (max-width: 376px) {
   .logo-data img {
        max-width: 160px !important; 
        height: auto !important;
    }

    .logo-data {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        display: flex;
        align-items: center;
    }
    .li-nav{
            font-size: 8px !important; 
            line-height: 1.2;
            margin-bottom: 15px;
        }
    .contact-data{
            font-size: 8px !important; 
            line-height: 0.5 !important;
            margin-bottom: 5px !important;
        }


    h1 {
        font-size: 40px !important; 
        line-height: 1.2;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 20px !important; 
    }

    p {
        font-size: 14px !important;
    }

    .font-exper.count {
        font-size: 75px !important; /* Ajusta este valor según qué tan grande lo desees */
        font-weight: 700 !important; /* Lo hace más grueso y llamativo */
        line-height: 1 !important;   /* Evita espacios extraños arriba y abajo del número */
        color: var(--primary-color); /* O el color principal de tu marca */
        margin-top: 8px;
        margin-right: -25px !important;
    }

    .year-exper{ 
        top: 4px;
        line-height: 1 !important;   
        color: var(--primary-color); 
        margin-top: 8px;
        margin-right: -60px !important;
    }

} 


 @media (max-width: 320px) {
.logo-data-footer {
    width: 25%!important;        /* Ocupa el ancho del contenedor */
    max-width: 120px!important;   /* Pero no deja que crezca más de 120px */
    height: auto!important;
   }
    .logo-data img {
        max-width: 160px !important; 
        height: auto !important;      
    }
    .logo-data {
        height: auto !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .data-close.docts-responsive{
            margin-bottom: 10px;
        }

    .li-nav{
            font-size: 8px !important; 
            line-height: 1.2;
            margin-bottom: 15px;
        }
    .contact-data{
            font-size: 8px !important; 
            line-height: 0.5!important;
            margin-bottom: 5px !important;
        }   


    h1 {
        font-size: 48px !important; 
        line-height: 1.2;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 24px !important;
        line-height: 1.3;
    }

    h3 {
        font-size: 20px !important; 
    }

    p {
        font-size: 14px !important;
    }
 }