/* Astra By IconicThemes - Personalizado para Sazz® */

/* ==========================================================================
    Table of Contets
    ==========================================================================
    
    1.0 Common Styles
    2.0 Header Section
    3.0 Hero Section
    4.0 Feature Section
    5.0 Content Section
    6.0 How It Works Section
    7.0 Screenshot Section
    8.0 Team Section
    9.0 Testimonial Section
    10.0 Pricing Section
    11.0 Blog Section
    12.0 Download Section
    13.0 Subscribe Section
    14.0 Footer Section
    15.0 Scrool To Top
    
    ==========================================================================
    Astra App Landing Page - Sazz® Edition
    ========================================================================== */

    @import url('https://fonts.googleapis.com/css?family=Poppins:400,600,700');
    
/* ==========================================================================
    1.0 Common Styles
    ========================================================================== */
*{
    padding: 0;
    margin: 0;
}
body{
    background-color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 17px;
    line-height: 28px;
    color: #666;
    letter-spacing: -0.3px;
    font-weight: 400;
    position: relative;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6{
    font-family: 'Poppins', sans-serif;
    -webkit-font-smoothing:antialiased;
    color: #222;
}
h1{
    font-size: 52px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 25px;
    color: #fff;
    letter-spacing: -3px;
}
h2{
    font-size: 38px;
    color: #333;
    margin: 0 0 25px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.5px;
    text-transform: capitalize;
}
h3,h4{
    margin: 0 0 10px;
    font-weight: 600;
    line-height: 1.7;
    color: #222;
    letter-spacing: -0.025rem;
}
h3{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.025rem;
    line-height: 1.2;
}
h4{
    font-size: 16px;
}
h5,h6{
    font-size: 14px;
    margin: 0 0 10px;
}
img{
    border: none;
    outline:none;
    max-width: 100%;
}
ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
p, li, a, span{}
p{
    font-size: 17px;
    color: #666;
    margin-bottom: 15px;
}
a, a:hover{
    text-decoration: none;
}
a:focus{
    outline: 0;
    text-decoration: none;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder{
   color: #f5f5f5 !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder{ /* Firefox 18- */
   color: #f5f5f5 !important;  
}

input::-moz-placeholder,
textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #f5f5f5 !important;  
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder{  
   color: #f5f5f5 !important;  
}
button{
    border: none;
    background: none;
}
/* Helper Class */
.padding{
    padding: 100px 0;
}
.no-padding{
    padding: 0;
}
.padding-15{padding: 15px;}
.padding-20{padding: 20px;}

.bg-white{ background-color: #fff; }
.bg-grey{ background-color: #f4f9ff;}
.bg-dark{ background-color: #232323;}
.bd-top{ border-top: 1px solid #eaeaea;}
.bd-bottom{ border-bottom: 1px solid #eaeaea;}

.mb-10{ margin-bottom: 10px; }
.mb-15{ margin-bottom: 15px; }
.mb-20{ margin-bottom: 20px; }
.mb-25{ margin-bottom: 25px; }
.mb-30{ margin-bottom: 30px; }
.mb-35{ margin-bottom: 35px; }
.mb-40{ margin-bottom: 40px; }
.mb-45{ margin-bottom: 45px; }
.mb-50{ margin-bottom: 50px; }
.mb-55{ margin-bottom: 55px; }
.mb-60{ margin-bottom: 60px; }
.ml-15{ margin-left: 15px; }
.ml-20{ margin-left: 20px; }
.ml-25{ margin-left: 25px; }
.ml-30{ margin-left: 30px; }
.ml-35{ margin-left: 35px; }
.fz-28{ font-size: 28px; }
.fz-24{ font-size: 24px; }
.fz-22{ font-size: 22px; }
.fz-20{ font-size: 20px; }
.fz-18{ font-size: 18px; }
.fz-16{ font-size: 16px; }
.mt-20{ margin-top: 20px; }
.mt-30{ margin-top: 30px; }
.mt-40{ margin-top: 40px; }
.text-black{
    color: #333;
}
.text-white{
    color: #ffffff;
}
.align-left{
    text-align: left;
}
.align-right{
    text-align: right;
}
.align-center{
    text-align: center;
}
.fl-right{
    float: right;
}
.fl-left{
    float: left;
}
.display-table{
    width: 100%;
    height: 100%;
    display: table;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}

.overlay{
    width: 100%;
    position: relative;
    z-index: 1;
}
.overlay:before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* Preloader Styles */
#preloader{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #e84a1d;
    height: 100%;
    width: 100%;
    -webkit-transition: all .5s .5s ease;
    -moz-transition: all .5s .5s ease;
    transition: all .5s .2s ease;
}
.loader{
    position:absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 60px;
    height: 60px;
    display: block;
    margin: auto;
    margin-top: -30px;
}
body.loaded #preloader{
    opacity: 0;
    visibility: hidden;
}
/*Battery*/
.battery{
    width: 28px;
    height: 14px;
    border: 1px #fff solid;
    border-radius: 2px;
    position: relative;
    -webkit-animation: charge 5s linear infinite;
       -moz-animation: charge 5s linear infinite;
            animation: charge 5s linear infinite;
    top: 40px;
    margin: 0 auto;
}
.battery:after{
    width: 2px;
    height: 7px;
    background-color: #fff;
    border-radius: 0px 1px 1px 0px;
    position: absolute;
    content: "";
    top: 2px;
    right: -4px;
}
@-webkit-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@-moz-keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
@keyframes charge{
    0%{box-shadow: inset 0px 0px 0px #fff;}
    100%{box-shadow: inset 30px 0px 0px #fff;}
}
/* Button Style */
.btn_group{}
.btn_group a{
    margin: 5px;
}
.btn_group_left a{
    margin-right: 15px;
    margin-bottom: 15px;
}
.default-btn{
    background: linear-gradient(to right, #e84a1d 0%, #ff734d 100%);
    font-size: 10px;
    font-weight: 600; letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    padding: 15px 20px;
    border-radius: 2px;
    display: inline-block;
}
.default-btn:hover{
    background: linear-gradient(to left, #e84a1d 0%, #ff734d 100%);
    color: #fff;
}

/* Section Heading */
.section-heading h2 {
    color: #444;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -1.3px;
    line-height: 1.2;
    text-transform: capitalize;
    margin: 0 0 8px;
}
.section-heading p{
    font-size: 17px;
    font-weight: 400;
    margin: 0;
}

/* Transition Effect */
a,a:hover, .overlay, img, .form-control,  .form-control:hover, button{
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
/* ==========================================================================
   2.0 Header Section
   ========================================================================== */
.header-section{
    background-color: transparent;
    width: 100%;
    height: 80px;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
    transition: background-color 0.3s ease-in-out !important;
}
.navbar-fixed-top.header-section{
    background-color: #e84a1d;
    box-shadow: 0px 16px 28px 0px rgba(0, 0, 0, 0.05);
    height: 70px;
    border-bottom: 0;
    padding: 0;
}

.navbar-fixed-top ul.nav > li > a{
    color: #f0f0f0;
}
.navbar-fixed-top ul.nav > li > a:hover,
.navbar-fixed-top ul.nav > li > a:focus,
.navbar-fixed-top ul.nav > li.active > a{
    color: #fff;
}
.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section{
    transition: all 0.3s ease-in-out;
}
.navbar{
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    padding: 0;
}
.navbar-header {
    padding: 17px 0;
}
.navbar-header .brand{
    font-size: 25px;
    color: #333;
    font-family: 'Poppins', sans-serif;
    letter-spacing: -1px;
    font-weight: 600;
    margin-left: 13px;
}
.navbar-header .nav-btn{
    padding: 8px;
    border-radius: 1px;
}
.navbar-header .nav-btn .icon-bar{
    background-color: #fff;
    width: 18px;
}
.navbar-fixed-top .navbar-header .nav-btn .icon-bar{
    background-color: #777;
}
.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus{
    opacity: 0.8;
}

/* Nav Menu */
#navbar{
    z-index: 999;
    padding: 0 15px;
}
ul.nav{}
ul.nav > li{}
ul.nav > li > a {
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Poppins', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 10px;
    letter-spacing: 1px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 70px;
    z-index: 1;
}
ul.nav > li > a:hover,
ul.nav > li > a:focus,
ul.nav > li > a.active{
    background: none;
    color: #fff;
    opacity: 1;
}
.menu-btn{
    margin-left: 10px;
    margin-top: 10px;
}

/*Mobile Menu */
.menu-wrap{
    position: relative;
}
.slicknav_menu {
    background: none;
    padding: 4px 0;
    display:none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}
.slicknav_nav {
    background-color: #fff;
}
.slicknav_btn{
    background-color: transparent;
    margin: 17px 5px 19px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row, 
.slicknav_nav a,
.slicknav_nav a:hover{
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}
.slicknav_nav .slicknav_row, 
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #777;
}
.slicknav_nav a .caret{
    display: none;
}
.slicknav_nav ul{
    margin: 0;
}
.slicknav_nav ul li a{
    padding-left: 30px;
    font-size: 12px;
}
.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover{
    background-color: transparent;
    color: #333;
}

/* ==========================================================================
   3.0 Hero Section
   ========================================================================== */
.hero-section{
    background-image: url(../img/hero.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
    width: 100%;
    height: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
}
.hero-section:before{
    background: linear-gradient(to top, #e84a1d 0%, #ff734d 100%);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.8;
    z-index: -1;
}
.hero-content h1{
    margin-bottom: 10px;
}
.hero-content p{
    color: #fff;
    line-height: 1.5;
    margin: 0 0 25px;
}

/* Botones Tiendas Simétricos Sazz® */
.hero-btn, .download-content .hero-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}
.download-btn img {
    height: 60px !important;
    width: auto !important;
    transition: all 0.3s ease-in-out;
    filter: drop-shadow(0px 5px 15px rgba(0,0,0,0.2));
}
.download-btn:hover img {
    transform: translateY(-3px) scale(1.05);
    filter: drop-shadow(0px 8px 20px rgba(0,0,0,0.3));
}

/* Ajuste específico para que el celular salga en móviles */
@media (max-width: 767px) {
    .feature-section {
        padding-bottom: 400px; /* Espacio extra para que el celular no tape el texto de abajo */
    }

    .feature-mock {
        display: block !important; /* Forzamos que se muestre */
        position: relative; /* Cambiamos a relative para que empuje el contenido */
        top: 20px;
        height: 350px; /* Altura controlada para móvil */
        margin-bottom: 40px;
    }

    /* Ajustamos el tamaño del iPhone y la imagen interna para pantallas chicas */
    .feature-mock::after, 
    .feature-mock::before {
        width: 150px !important; /* Más angosto para que quepa bien */
        height: 320px !important;
        background-size: contain;
    }
    
    /* El contenedor de los iconos (feature-wrap) debe bajar */
    .feature-wrap {
        margin-top: 0 !important; 
    }
}
/* ==========================================================================
   4.0 Feature Section
   ========================================================================== */
.feature-section{
    position: relative;
}
.feature-mock{
    background-image: url(../img/feature-mockup.png);
    background-repeat: no-repeat;
    background-position: top center;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: -100px;
    animation-name: mock-animation;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: mock-animation;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    z-index: 5;
}

/* INSERCIÓN IMAGEN CONDUCTORES (TAMAÑO REDUCIDO) */
.feature-mock::before {
    content: "";
    background-image: url(../assets/icons/conductores.png);  
    background-repeat: no-repeat;
    background-size: contain; /* Cambiado a contain para que no se corte */
    background-position: center;
    position: absolute;
    width: 180px;  /* Reducido de 235px */
    height: 390px; /* Reducido de 510px */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -46%); /* Reajuste del centrado */
    z-index: 10;
    border-radius: 15px;
    display: block;
}

.feature-content{
    margin-bottom: 20px;
}
.feature-content:last-child{
    margin-bottom: 0;
}
.feature-content h3{
    font-size: 22px;
    text-transform: capitalize;
}
.feature-content .icon{
    font-size: 45px;
    transition: all 0.2s ease-in-out;
}
.feature-content i{
    background-image: linear-gradient(to top, #e84a1d 0%, #ff734d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}
.feature-content p{
    font-size: 13px;
    line-height: 24px;
    margin: 0;
}

 @keyframes mock-animation {
     0% { transform: translateY(-20px); }
     50% { transform: translateY(-10px); }
     100% { transform: translateY(-20px); }
}
 
/* ==========================================================================
   5.0 Content Section (PASAJEROS)
   ========================================================================== */
.content-section{}
.content-wrap{
    display: flex;
    align-items: center;
}

.content-wrap img{
    width: 100%;      /* Ajusta este tamaño a tu gusto */
    height: auto;
    display: block;  /* Obligatorio para que funcione el centrado */
    margin: 0 auto;  /* Centra la imagen horizontalmente */
}

.content-details{}
.content-details h2{
    margin-bottom: 15px;
}
/* ==========================================================================
   6.0 How It Works Section
   ========================================================================== */
.how-it-works-section{
    background-image: url(../img/how-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    z-index: 1;
}
.how-it-works-section:before{
    background: linear-gradient(to top, #e84a1d 0%, #ff734d 100%);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.9;
    z-index: -1;
}
.how-content{
    position: relative;
}
.arrow{
    position: absolute;
    background-image: url(../img/arrow.png);
    background-repeat: no-repeat;
    content: "";
    width: 100%;
    height: 100%;
    left: 270px;
    top: 30px;
}
.how-content i{
    color: #fff;
    font-size: 50px;
    margin-bottom: 15px;
}
.how-content h3{
    font-size: 20px;
    margin-bottom: 5px;
    color: #fff;
}
.how-content p{
    color: #ddd;
    margin-bottom: 0;
}

/* ==========================================================================
   7.0 Screenshot Section (FIX SAZZ)
   ========================================================================== */
.screenshots-section{
    padding-bottom: 53px;
}
.swiper-container {
    padding: 3.58rem 0 7rem 0;
    display: flex;
    align-items: center;
    position: relative;
}
.swiper-container .swiper-slide{
    transform: scale(.65);
    opacity: 0.2;
    transition: all .3s ease;
}
.swiper-container .swiper-slide-active{
    opacity: 1;
    transform: scale(1);
    z-index: 100;
}
.swiper-container .screen{
    width: 258px !important;
    height: 520px !important;
    margin: 45px auto 0 !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: #000 !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .03);
}

/* ==========================================================================
   8.0 Team Section
   ========================================================================== */
.team-section{}
.team-thumb{
    margin-bottom: 30px;
    position: relative;
}
.team-thumb img{
    border: 10px solid transparent;
    border-image: linear-gradient(to top, #e84a1d 0%, #ff734d 100%);
    border-image-slice: 1;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1);
    width: 150px;
    height: 150px;
}

/* ==========================================================================
   9.0 Testimonial Section
   ========================================================================== */
.review-section{
    background-image: url(../img/how-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 120px 0;
    position: relative;
    z-index: 1;
}
.review-section:before{
    background: linear-gradient(to top, #e84a1d 0%, #ff734d 100%);
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    opacity: 0.9;
    z-index: -1;
}
.review-content h3{
    color: #fff;
}
.review-text p{
    color: #fff;
}

/* ==========================================================================
   10.0 Pricing Section
   ========================================================================== */
.pricing-section{}
.pricing-box{
    background: linear-gradient(to top, #e84a1d 0%, #ff734d 100%);
    padding: 40px 0;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}
.pricing-head h2, .pricing-head h3, .pricing-info li{
    color: #fff;
}

/* ==========================================================================
   11.0 Blog Section
   ========================================================================== */
.blog-section{}
.blog-content a:hover{
    color: #e84a1d;
}
.post-meta i{
    color: #e84a1d;
}
.blog-content .read-more{
    background-color: #e84a1d;
}

/* ==========================================================================
   12.0 Download Section (SIN ONDAS - ESTILO SÓLIDO)
   ========================================================================== */
.download-section {
    background: linear-gradient(to top, #e84a1d 0%, #ff734d 100%); /* O solo #e84a1d para sólido */
    padding: 100px 0; /* Ajustado para que sea simétrico sin la onda */
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.download-section:before {
    display: none; /* Esto mata la imagen wave.png por completo */
}

.download-content h2, 
.download-content p {
    color: #fff;
}

/* ==========================================================================
   13.0 Subscribe Section
   ========================================================================== */
.subscribe-section{
    padding: 50px 0 100px;
}
.subscribe-form .form-input{
    background: linear-gradient(to right, #e84a1d 0%, #ff734d 100%);
    color: #fff;
    border-radius: 30px;
}
.social-share li a{
    color: #e84a1d;
    border: 2px solid #e84a1d;
}
.social-share li a:hover{
    background-color: #e84a1d;
    color: #fff;
}

/* ==========================================================================
   14.0 Footer Section (AJUSTE DE SIMETRÍA)
   ========================================================================== */
.footer-section { 
    background-color: #111 !important; 
    color: #fff; 
    padding: 80px 0 40px; /* Un poco más de aire arriba */
    text-align: left; 
}

.footer-section h4 { 
    color: #fff; 
    margin-bottom: 25px; 
    font-weight: 700; 
    text-transform: uppercase; 
    font-size: 14px; /* Un poco más pequeña para elegancia */
    letter-spacing: 1px;
}

.footer-section p { 
    color: #bbb; 
    font-size: 14px; 
    line-height: 1.6;
}

/* Reducción de la letra de Países y Enlaces Legales */
.footer-section ul li {
    margin-bottom: 8px;
}

.footer-section ul li a, 
.footer-section ul li { 
    color: #bbb; 
    font-size: 13px; /* Letra más pequeña como pediste */
    transition: 0.3s;
}

.footer-section ul li a:hover { 
    color: #e84a1d; 
    padding-left: 5px; 
}

/* Alineación simétrica de las columnas */
@media (min-width: 768px) {
    .footer-section .col-md-4 {
        padding: 0 30px; /* Crea un espacio uniforme entre bloques */
    }
}

.footer-bottom { 
    border-top: 1px solid #222; 
    margin-top: 50px; 
    padding-top: 25px; 
    text-align: center; 
    color: #555; 
    font-size: 12px; 
}
/* ==========================================================================
   15.0 Scroll To Top
   ========================================================================== */
#scroll-to-top{
    background-color: #e84a1d;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 45px;
    color: #fff;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
}
#scroll-to-top:hover{
    background-color: #333;
}

/* Ajuste de espacio para la nueva sección de Pasajeros */
#pasajeros .feature-content i {
    background-image: linear-gradient(to top, var(--sazz-orange) 0%, #ff734d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 40px;
    font-weight: 700;
}

@media (min-width: 992px) {
    .pasajeros-mock img {
        transform: scale(1.1); /* Hace el celular un poco más imponente */
        margin-top: 20px;
    }
}

/* Estilos para los iconos de la sección Nosotros */
.about-item .icon i {
    font-size: 50px;
    background-image: linear-gradient(to top, #e84a1d 0%, #ff734d 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.about-item h3 {
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 600;
}

.about-item p {
    font-size: 14px;
    line-height: 24px;
    color: #777;
    padding: 0 15px;
}

@media (max-width: 992px) {
    .slicknav_menu {
        background: none;
        padding: 0;
        margin-top: 15px;
    }
    .slicknav_btn {
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        padding: 8px 10px;
        transition: all 0.3s ease;
    }
    .slicknav_btn:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }
    .slicknav_nav {
        background-color: #fff;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        margin-top: 10px;
        padding: 10px 0;
        overflow: hidden;
        animation: slideIn 0.3s ease-out forwards;
    }
    .slicknav_nav a {
        padding: 12px 25px !important;
        font-size: 14px;
        font-weight: 500;
        color: #333 !important;
        border-bottom: 1px solid #f5f5f5;
    }
    .slicknav_nav a:hover {
        background-color: #fff9f7;
        color: #e84a1d !important;
        padding-left: 30px !important;
    }
    .slicknav_nav li:last-child a {
        border-bottom: none;
    }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}