/* Adicione isso ao seu CSS existente */
.rotate-90 {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.rotate-0 {
    transform: rotate(0deg);
    transition: transform 0.3s ease;
}

.section-hidden {
    display: none;
}

.section-visible {
    display: table-row-group;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Mantenha seus media queries existentes */
@media(min-width:1735px) {
    #div-info-packet-service{
        height:10rem;
        
    }
    #title-packet-service{
        font-weight: bold;
        height:2rem
    }
}

@media(max-width:1735px) {
    #div-info-packet-service{
        height:10rem;
        font-size: 16px
    }
    #title-packet-service{
        font-size: 30px;
        height:4rem
    }
}

@media(max-width:1570px){
    #div-info-packet-service{
        height:10rem;
        font-size: 18px
    }
    #title-packet-service{
        font-size: 24px;
        height:4rem
    }
}

@media(max-width:1450px){
    #div-info-packet-service{
        height:15rem;
        font-size: 18px
    }
    #title-packet-service{
        font-size: 24px;
        height:4rem
    }
}

@media(max-width:1250px){
    #div-info-packet-service{
        height:22rem;
        font-size: 18px
    }
    #title-packet-service{
        font-size: 24px;
        height:6rem
    }
}

@media(max-width:768px){
    #div-info-packet-service{
        height:13rem;
        font-size: 18px
    }
    #title-packet-service{
        font-size: 24px;
        height:4rem
    }
}

/* Ajustes específicos para o carousel em telas md */
@media (min-width: 768px) and (max-width: 1023px) {
    #card-item-carousel{
        width: 300px !important;
    }
    #div-geral-carousel{
        
    }
    
    #div-info-packet-service{
        height:13rem;
        font-size: 18px
    }
    #div-info-packet-service-onDemand{
        height:6rem;
        font-size: 18px
    }
    #title-packet-service{
        font-size: 24px;
        height:4rem
    }
    
    @layer utilities {
        .td-center {
            @apply flex items-center justify-center;
        }
    }
    
    .w-\[280px\] {
        width: 280px;
    }
    
    /* Ajuste a altura dos cards no carousel se necessário */
    .min-h-\[700px\] {
        min-height: 700px;
    }
    
    /* Espaçamento entre os cards no carousel */
    .gap-4 {
        gap: 1rem;
    }
    
    /* Padding para não colar nas bordas */
    .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Espaço para scroll */
    .pb-6 {
        padding-bottom: 1.5rem;
    }
}