/* =====================================================
   VARIABLES
===================================================== */

:root{

    --amarillo:#ffd400;
    --amarillo2:#ffb800;
    --naranja:#ff6b00;

    --negro:#121212;

    --gris:#667085;

    --gris-claro:#f5f7fa;

    --blanco:#ffffff;

}


/* =====================================================
   GENERAL
===================================================== */

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    margin:0;

    font-family:'Montserrat',sans-serif;

    color:#172033;

    background:#fff;

    overflow-x:hidden;

}

section{
    scroll-margin-top:90px;
}

.section-padding{
    padding:90px 0;
}

.section-tag{

    color:#d99300;

    font-size:.78rem;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.section-title{

    font-size:clamp(2rem,4vw,3rem);

    font-weight:900;

    margin-top:8px;

}

.section-description{

    color:var(--gris);

    max-width:720px;

    margin:15px auto 0;

    line-height:1.7;

}


/* =====================================================
   NAVBAR
===================================================== */

.navbar{

    background:var(--amarillo);

    padding:9px 0;

    box-shadow:
        0 3px 20px
        rgba(0,0,0,.12);

}


/* LOGO */

.navbar-brand{

    display:flex;

    align-items:center;

    gap:10px;

    color:#111!important;

    font-weight:900;

    font-size:1.25rem;

    text-decoration:none;

    padding:0;

}

.nav-logo{

    width:58px;
    height:58px;

    object-fit:contain;

    transition:
        transform .25s ease;

}

.navbar-brand:hover .nav-logo{
    transform:scale(1.05);
}

.nav-brand-name{

    white-space:nowrap;

    font-weight:900;

    letter-spacing:-.3px;

}


/* LINKS */

.navbar-nav .nav-link{

    position:relative;

    color:#111;

    font-weight:700;

    font-size:.86rem;

    margin:0 1px;

    transition:.2s;

}

.navbar-nav .nav-link::after{

    content:"";

    position:absolute;

    left:.5rem;
    right:.5rem;

    bottom:4px;

    height:2px;

    background:#111;

    border-radius:2px;

    transform:scaleX(0);

    transform-origin:left;

    transition:
        transform .25s ease;

}

.navbar-nav .nav-link:hover::after{
    transform:scaleX(1);
}


/* LOGIN */

.login-link{

    font-weight:800!important;

    color:#111!important;

}


/* COTIZAR */

.btn-cotizar{

    background:#111;

    color:var(--amarillo);

    font-weight:800;

    border:none;

    border-radius:11px;

    padding:11px 16px;

    white-space:nowrap;

    transition:.2s;

}

.btn-cotizar:hover{

    background:#2a2a2a;

    color:var(--amarillo);

    transform:translateY(-1px);

}


/* MENÚ MÓVIL */

.navbar-toggler{

    border:2px solid #111;

}

.navbar-toggler:focus{

    box-shadow:
        0 0 0 .2rem
        rgba(0,0,0,.2);

}


/* =====================================================
   HERO
===================================================== */

.hero{

    min-height:92vh;

    display:flex;

    align-items:center;

    padding:
        140px
        0
        80px;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(255,212,0,.23),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #fff,
            #fafafa
        );

    position:relative;

    overflow:hidden;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    background:#fff4b3;

    color:#664f00;

    padding:8px 15px;

    border-radius:30px;

    font-weight:700;

    margin-bottom:18px;

}

.hero h1{

    font-size:
        clamp(2.5rem,5vw,4.6rem);

    font-weight:900;

    line-height:1.04;

    letter-spacing:-2px;

}

.hero h1 span{
    color:#e59b00;
}

.hero p{

    color:var(--gris);

    font-size:1.08rem;

    line-height:1.8;

    max-width:650px;

    margin-top:22px;

}


/* BOTONES */

.btn-main{

    background:#111;

    color:white;

    border:none;

    border-radius:11px;

    padding:14px 23px;

    font-weight:800;

}

.btn-main:hover{

    background:#292929;

    color:white;

}

.btn-outline-main{

    border:2px solid #d0d5dd;

    background:#fff;

    color:#344054;

    border-radius:11px;

    padding:12px 22px;

    font-weight:700;

}

.btn-outline-main:hover{

    border-color:var(--amarillo2);

    color:#111;

}


/* =====================================================
   HERO CARD
===================================================== */

.hero-card{

    background:#fff;

    border-radius:30px;

    padding:45px 30px;

    box-shadow:
        0 25px 70px
        rgba(0,0,0,.13);

    position:relative;

}

.hero-car{

    height:260px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.hero-car i{

    font-size:9rem;

    color:#111;

}

.status-card{

    position:absolute;

    top:30px;

    right:20px;

    padding:13px 16px;

    border-radius:15px;

    background:var(--amarillo);

    color:#111;

    font-weight:800;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.12);

}


/* =====================================================
   SERVICIOS
===================================================== */

#servicios{
    background:var(--gris-claro);
}

.service-card{

    background:#fff;

    border:
        1px solid
        #eaecf0;

    border-radius:21px;

    padding:29px;

    height:100%;

    transition:.3s;

}

.service-card:hover{

    transform:translateY(-7px);

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.09);

}

.service-icon{

    width:62px;
    height:62px;

    border-radius:17px;

    background:var(--amarillo);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.7rem;

    margin-bottom:21px;

}

.service-card h4{

    font-weight:800;

    font-size:1.15rem;

}

.service-card p{

    color:var(--gris);

    font-size:.91rem;

    line-height:1.7;

}


/* =====================================================
   NOSOTROS
===================================================== */

.feature{

    display:flex;

    gap:16px;

    margin-bottom:28px;

}

.feature-icon{

    width:53px;
    height:53px;

    flex:0 0 53px;

    border-radius:50%;

    background:#fff2a3;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#111;

    font-size:1.3rem;

}

.feature h5{

    font-weight:800;

    margin-bottom:5px;

}

.feature p{

    color:var(--gris);

    margin:0;

}


/* TARJETA */

.why-card{

    min-height:430px;

    padding:45px;

    border-radius:30px;

    background:

        linear-gradient(
            135deg,
            #171717,
            #000
        );

    color:#fff;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

    overflow:hidden;

}

.why-card::after{

    content:"";

    position:absolute;

    width:250px;
    height:250px;

    border-radius:50%;

    border:
        45px solid
        rgba(255,212,0,.1);

    right:-80px;

    top:-70px;

}

.why-card .big-icon{

    color:var(--amarillo);

    font-size:5rem;

}


/* =====================================================
   PROCESO
===================================================== */

#proceso{
    background:#f7f7f7;
}

.step-card{

    text-align:center;

    padding:20px;

}

.step-number{

    width:72px;
    height:72px;

    margin:
        0
        auto
        20px;

    border-radius:50%;

    background:var(--amarillo);

    color:#111;

    border:
        3px solid
        #111;

    display:flex;

    justify-content:center;

    align-items:center;

    font-weight:900;

    font-size:1.5rem;

    transition:.25s;

}

.step-card:hover .step-number{
    transform:scale(1.08);
}

.step-card h5{
    font-weight:800;
}

.step-card p{

    color:var(--gris);

    font-size:.9rem;

}


/* =====================================================
   UBICACIÓN
===================================================== */

#ubicacion{
    background:#fff;
}


/* CONTENEDOR */

.location-container-new{

    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:30px;

    align-items:stretch;

}


/* TARJETAS */

.location-box-new{

    width:100%;

    height:100%;

    padding:28px;

    background:#fff;

    border:
        1px solid
        #e7e9ee;

    border-radius:25px;

    box-shadow:
        0 15px 45px
        rgba(0,0,0,.07);

    transition:.3s;

}

.location-box-new:hover{

    transform:translateY(-5px);

    border-color:
        rgba(255,204,0,.45);

    box-shadow:
        0 22px 55px
        rgba(0,0,0,.11);

}


/* HEADER */

.location-box-header-new{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:12px;

}

.location-icon-new{

    width:52px;
    height:52px;

    min-width:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    background:var(--amarillo);

    color:#111;

    font-size:23px;

}

.location-label-new{

    display:block;

    margin-bottom:3px;

    color:#c89400;

    font-size:11px;

    font-weight:900;

    letter-spacing:1.3px;

}

.location-box-new h3{

    margin:0;

    color:#111a31;

    font-size:22px;

    line-height:1.25;

    font-weight:900;

}

.location-description-new{

    margin:
        0
        0
        22px;

    color:#7d8799;

    font-size:14px;

    line-height:1.7;

}


/* VIDEO */

.video-wrapper-new{

    position:relative;

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    border-radius:20px;

    background:#080808;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.15);

}

.video-wrapper-new iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}


/* MAPA */

.map-wrapper-new{

    position:relative;

    width:100%;

    aspect-ratio:16 / 10;

    overflow:hidden;

    border-radius:20px;

    background:#f1f1f1;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.10);

}

.map-wrapper-new iframe{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    border:0;

}


/* YOUTUBE */

.youtube-button-new{

    width:100%;

    margin-top:16px;

    padding:14px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:12px;

    background:#111;

    color:#fff;

    font-size:13px;

    font-weight:800;

    text-decoration:none;

    transition:.25s;

}

.youtube-button-new i{

    color:#ff0033;

    font-size:18px;

}

.youtube-button-new:hover{

    background:#222;

    color:var(--amarillo);

    transform:translateY(-2px);

}


/* MAPS */

.maps-button-new{

    width:100%;

    margin-top:16px;

    padding:14px 20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:12px;

    background:var(--amarillo);

    color:#111;

    font-size:13px;

    font-weight:900;

    text-decoration:none;

    transition:.25s;

}

.maps-button-new:hover{

    color:#111;

    background:var(--amarillo2);

    transform:translateY(-2px);

}


/* FOOTER DE TARJETA */

.location-footer-new{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:18px;

    padding:13px 15px;

    border-radius:12px;

    background:#f8f8f8;

    color:#70798b;

    font-size:12px;

    font-weight:600;

}

.location-footer-new i{

    color:#c69300;

    font-size:16px;

}


/* =====================================================
   CTA
===================================================== */

.cta{

    background:#111;

    color:white;

    border-radius:28px;

    padding:55px;

}

.cta h2{
    font-weight:900;
}


/* =====================================================
   CONTACTO
===================================================== */

#contacto{
    background:#f7f7f7;
}

.contact-card{

    background:#fff;

    border:
        1px solid
        #eaecf0;

    border-radius:25px;

    padding:35px;

    height:100%;

    box-shadow:
        0 10px 35px
        rgba(0,0,0,.05);

}

.contact-item{

    display:flex;

    gap:15px;

    margin-bottom:25px;

}

.contact-item i{

    color:#d99b00;

    font-size:1.5rem;

}

.contact-item strong{
    display:block;
}

.contact-item span{

    color:var(--gris);

    font-size:.9rem;

    line-height:1.7;

}

.contact-link{

    color:inherit;

    text-decoration:none;

    transition:.2s;

}

.contact-link:hover{
    color:#c38d00;
}


/* FORMULARIO */

.form-control,
.form-select{

    border-radius:11px;

    padding:13px 15px;

}

.form-control:focus,
.form-select:focus{

    border-color:var(--amarillo2);

    box-shadow:
        0 0 0 .2rem
        rgba(255,212,0,.18);

}


/* =====================================================
   FOOTER
===================================================== */

footer{

    background:#090909;

    color:#cbd5e1;

    padding:
        60px
        0
        25px;

}

.footer-logo{

    width:60px;

    height:60px;

    object-fit:contain;

}

footer h5{

    color:#fff;

    font-weight:900;

}

footer p{

    color:#aeb7c4;

    line-height:1.7;

}

footer a{

    color:#cbd5e1;

    text-decoration:none;

    transition:.2s;

}

footer a:hover{
    color:var(--amarillo);
}


/* INFO */

.footer-info{

    display:flex;

    align-items:center;

    gap:9px;

    margin-bottom:10px;

    font-size:.86rem;

}

.footer-info i{
    color:var(--amarillo);
}


/* LINKS */

.footer-links{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:18px;

}

.footer-links a{

    font-size:.88rem;

}


/* =====================================================
   SUSCRIPCIÓN FOOTER
===================================================== */

.footer-subscription-text{

    color:#aeb7c4;

    font-size:.9rem;

    line-height:1.6;

    margin-top:15px;

    margin-bottom:15px;

}

.footer-subscription{

    width:100%;

}

.subscription-box{

    display:flex;

    align-items:center;

    gap:10px;

    background:#171717;

    border:
        1px solid
        #303030;

    border-radius:13px;

    padding:
        6px
        6px
        6px
        15px;

    transition:.25s;

}

.subscription-box:focus-within{

    border-color:var(--amarillo);

    box-shadow:
        0 0 0 3px
        rgba(255,212,0,.08);

}

.subscription-box > i{

    color:var(--amarillo);

    font-size:1.1rem;

}

.subscription-box input{

    flex:1;

    min-width:0;

    border:0;

    outline:0;

    background:transparent;

    color:white;

    padding:10px 3px;

    font-size:.82rem;

}

.subscription-box input::placeholder{
    color:#7f8996;
}

.subscription-box button{

    width:45px;

    height:45px;

    flex:0 0 45px;

    border:0;

    border-radius:10px;

    background:var(--amarillo);

    color:#111;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.25s;

}

.subscription-box button:hover{

    background:var(--amarillo2);

    transform:scale(1.04);

}

#subscriptionMessage{

    display:block;

    margin-top:9px;

    min-height:18px;

    font-size:.75rem;

}

#subscriptionMessage.success{
    color:#4ade80;
}

#subscriptionMessage.error{
    color:#f87171;
}


/* MINI CONTACTO */

.footer-contact-mini{

    display:flex;

    flex-direction:column;

    gap:8px;

    margin-top:18px;

}

.footer-contact-mini a{

    display:flex;

    align-items:center;

    gap:8px;

    color:#cbd5e1;

    text-decoration:none;

    font-size:.78rem;

    word-break:break-word;

}

.footer-contact-mini a i{
    color:var(--amarillo);
}


/* COPYRIGHT */

.footer-bottom{

    text-align:center;

    color:#8993a4;

    font-size:.78rem;

}


/* =====================================================
   BOTONES FLOTANTES
===================================================== */

.floating-actions{

    position:fixed;

    right:22px;

    bottom:22px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    z-index:9998;

}


/* WHATSAPP */

.whatsapp-float{

    width:62px;
    height:62px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2rem;

    text-decoration:none;

    box-shadow:
        0 8px 25px
        rgba(0,0,0,.22);

    transition:.25s;

}

.whatsapp-float:hover{

    color:white;

    transform:scale(1.07);

}


/* ROBOT */

.robot-chat-button{

    width:76px;
    height:76px;

    border:none;

    padding:0;

    border-radius:50%;

    background:var(--amarillo);

    cursor:pointer;

    position:relative;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25);

    transition:.25s;

    overflow:hidden;

}

.robot-chat-button:hover{
    transform:scale(1.07);
}

.robot-chat-button img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.robot-fallback{

    width:100%;

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2.2rem;

    color:#111;

}

.chat-dot{

    position:absolute;

    top:2px;

    right:2px;

    width:20px;

    height:20px;

    border-radius:50%;

    background:#22c55e;

    border:
        3px solid
        white;

}


/* =====================================================
   CHATBOT
===================================================== */

.chatbot-window{

    position:fixed;

    right:22px;

    bottom:185px;

    width:380px;

    height:570px;

    max-width:
        calc(100vw - 30px);

    max-height:
        calc(100vh - 195px);

    background:white;

    border-radius:24px;

    overflow:hidden;

    z-index:9999;

    box-shadow:
        0 20px 70px
        rgba(0,0,0,.25);

    display:flex;

    flex-direction:column;

    opacity:0;

    visibility:hidden;

    transform:
        translateY(25px)
        scale(.96);

    transform-origin:
        bottom right;

    transition:.25s;

}

.chatbot-window.active{

    opacity:1;

    visibility:visible;

    transform:
        translateY(0)
        scale(1);

}


/* HEADER */

.chat-header{

    background:var(--amarillo);

    color:#111;

    padding:16px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.chat-agent{

    display:flex;

    align-items:center;

    gap:11px;

}

.chat-agent-logo{

    width:48px;

    height:48px;

    border-radius:50%;

    background:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border:
        2px solid
        #111;

}

.chat-agent-logo img{

    width:100%;

    height:100%;

    object-fit:contain;

}

.chat-agent strong{

    display:block;

    font-weight:900;

}

.online{

    display:flex;

    align-items:center;

    gap:5px;

    font-size:.72rem;

    margin-top:2px;

}

.online::before{

    content:"";

    width:7px;

    height:7px;

    border-radius:50%;

    background:#22c55e;

}

.close-chat{

    width:35px;

    height:35px;

    border:0;

    border-radius:50%;

    background:
        rgba(0,0,0,.1);

}


/* CUERPO */

.chat-body{

    flex:1;

    overflow-y:auto;

    padding:18px;

    background:#f6f7f9;

    scroll-behavior:smooth;

}

.bot-row{

    display:flex;

    gap:8px;

    margin-bottom:13px;

    align-items:flex-end;

}

.bot-avatar{

    width:31px;

    height:31px;

    flex:0 0 31px;

    border-radius:50%;

    background:var(--amarillo);

    color:#111;

    display:flex;

    justify-content:center;

    align-items:center;

}

.bot-bubble{

    max-width:84%;

    background:#fff;

    padding:12px 14px;

    border-radius:
        16px
        16px
        16px
        4px;

    font-size:.84rem;

    line-height:1.55;

    box-shadow:
        0 3px 10px
        rgba(0,0,0,.05);

}


/* USUARIO */

.user-row{

    display:flex;

    justify-content:flex-end;

    margin:12px 0;

}

.user-bubble{

    max-width:82%;

    background:#111;

    color:white;

    padding:11px 14px;

    border-radius:
        16px
        16px
        4px
        16px;

    font-size:.84rem;

    line-height:1.5;

}


/* OPCIONES */

.chat-options{

    display:flex;

    flex-direction:column;

    gap:7px;

    margin:
        12px
        0
        15px
        38px;

}

.chat-options button{

    border:
        1px solid
        #e0e0e0;

    background:white;

    color:#111;

    padding:10px 12px;

    border-radius:10px;

    text-align:left;

    font-size:.78rem;

    font-weight:700;

    transition:.2s;

}

.chat-options button:hover{

    border-color:var(--amarillo2);

    background:#fff9d7;

    transform:translateX(2px);

}


/* INPUT */

.chat-footer{

    padding:
        11px
        12px
        8px;

    background:white;

    border-top:
        1px solid
        #eaecf0;

}

.chat-input-box{

    display:flex;

    align-items:center;

    background:#f3f4f6;

    border-radius:25px;

    padding:
        4px
        5px
        4px
        14px;

}

.chat-input-box input{

    flex:1;

    min-width:0;

    border:0;

    outline:0;

    background:transparent;

    padding:8px 3px;

    font-size:.83rem;

}

.chat-input-box button{

    width:38px;

    height:38px;

    flex:0 0 38px;

    border:0;

    border-radius:50%;

    background:var(--amarillo);

    color:#111;

}

.chat-footer small{

    display:block;

    text-align:center;

    color:#98a2b3;

    font-size:.62rem;

    margin-top:6px;

}


/* =====================================================
   ANIMACIÓN
===================================================== */

.reveal{

    opacity:0;

    transform:
        translateY(30px);

    transition:.7s ease;

}

.reveal.active{

    opacity:1;

    transform:
        translateY(0);

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1100px){

    .navbar-nav .nav-link{
        font-size:.78rem;
    }

    .btn-cotizar{

        font-size:.78rem;

        padding:10px 11px;

    }

}


@media(max-width:991px){


    .navbar-collapse{

        background:var(--amarillo);

        padding:18px;

        margin-top:10px;

        border-radius:15px;

    }


    .navbar-nav .nav-link::after{
        display:none;
    }


    .hero{

        text-align:center;

        padding-top:125px;

    }


    .hero p{

        margin-left:auto;

        margin-right:auto;

    }


    .hero-card{
        margin-top:45px;
    }


    .why-card{
        margin-top:25px;
    }


    .location-container-new{
        grid-template-columns:1fr;
    }


    footer .col-lg-4,
    footer .col-lg-2{
        margin-bottom:20px;
    }

}


@media(max-width:576px){


    .section-padding{
        padding:70px 0;
    }


    .nav-logo{

        width:48px;

        height:48px;

    }


    .navbar-brand{

        font-size:1rem;

        gap:7px;

    }


    .hero{

        padding:
            115px
            0
            65px;

    }


    .hero h1{
        letter-spacing:-1px;
    }


    .hero-car{
        height:210px;
    }


    .hero-car i{
        font-size:6rem;
    }


    .hero-card{

        padding:
            38px
            20px;

    }


    .why-card{

        padding:
            35px
            25px;

        min-height:380px;

    }


    /* UBICACIÓN */

    .location-box-new{

        padding:18px;

        border-radius:20px;

    }


    .location-box-header-new{
        align-items:flex-start;
    }


    .location-icon-new{

        width:45px;

        height:45px;

        min-width:45px;

        font-size:20px;

    }


    .location-box-new h3{
        font-size:18px;
    }


    .location-description-new{
        font-size:13px;
    }


    .video-wrapper-new,
    .map-wrapper-new{

        aspect-ratio:4 / 3;

        border-radius:15px;

    }


    /* CTA */

    .cta{

        padding:
            35px
            24px;

        text-align:center;

    }


    /* CONTACTO */

    .contact-card{

        padding:
            28px
            20px;

    }


    /* FOOTER */

    footer{

        padding:
            50px
            0
            22px;

    }


    .subscription-box input{
        font-size:.76rem;
    }


    /* FLOTANTES */

    .floating-actions{

        right:14px;

        bottom:14px;

    }


    .robot-chat-button{

        width:66px;

        height:66px;

    }


    .whatsapp-float{

        width:56px;

        height:56px;

        font-size:1.7rem;

    }


    /* CHAT */

    .chatbot-window{

        width:
            calc(100vw - 20px);

        height:
            calc(100vh - 110px);

        max-height:none;

        right:10px;

        bottom:85px;

        border-radius:19px;

    }

}


@media(max-width:390px){

    .nav-brand-name{
        font-size:.9rem;
    }

    .hero h1{
        font-size:2.35rem;
    }

    .location-box-new{
        padding:15px;
    }

    .location-box-new h3{
        font-size:16px;
    }

}