/*==================================================
CONSTRUCTORES Y ASESORES MYD S.A.S.
MOBILE FIRST
Versión 1.0
==================================================*/

/*==================================================
TABLET
==================================================*/

@media (max-width:992px){

    .container{

        width:92%;

    }

}

/*==================================================
MÓVIL
==================================================*/

@media (max-width:768px){

    .container{

        width:92%;

        padding-left:12px;

        padding-right:12px;

    }

}

/*==================================================
HEADER
==================================================*/

@media (max-width:768px){


    .navbar-container{

        display:flex;

        justify-content:space-between;

        align-items:center;

        min-height:72px;

    }

    .logo img{

        width:78px;

        height:auto;

    }


.navbar ul{

    width:85%;

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:0;

}


    .btn-nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:46px;

        height:46px;

        border-radius:10px;

        background:rgba(255,255,255,.08);

        font-size:32px;

        cursor:pointer;

    }
    
    
    

}
/*==================================================
HERO MOBILE
==================================================*/

@media (max-width:768px){

.hero{

    min-height:auto;

    padding-top:110px;

    padding-bottom:60px;

    background-position:center center;

    background-size:cover;

}

.hero-container{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    gap:35px;

}

.hero-tag{

    font-size:12px;

    letter-spacing:2px;

}

.hero h1{

    font-size:40px;

    line-height:1.2;

    margin-bottom:18px;

}

.hero p{

    font-size:17px;

    line-height:1.8;

    max-width:100%;

}

.hero-buttons{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.hero-buttons .btn{

    width:100%;

}

.hero-stats{

    display:grid;

    grid-template-columns:1fr;

    gap:18px;

    width:100%;

}

.about-grid{

    gap:30px;

}

 .about{

        padding:90px 0;

    }
    
    .about-content h2{

        font-size:38px;

    }

    .about-content p{

        font-size:17px;

    }

.stat-card{

    padding:28px 22px;

    border-radius:18px;

}

.stat-card h2{

    font-size:36px;

}

.stat-card p{

    font-size:15px;

}

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

.services{

    padding:90px 0;

}

.services-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.service-card{

    border-radius:20px;

}

.service-card img{

    height:220px;

}

.service-info{

    padding:22px;

}

.service-info h3{

    font-size:24px;

    margin-bottom:12px;

}

.service-info p{

    font-size:16px;

    line-height:1.7;

    min-height:auto;

    margin-bottom:18px;

}

.service-info a{

    font-size:16px;

}

/*==================================================
POR QUÉ ELEGIRNOS MOBILE
==================================================*/

.why-us{

    padding:80px 0;

}

.why-grid{

    gap:20px;

}

.why-card{

    padding:30px 24px;

    border-radius:18px;

}

.why-icon{

    width:70px;

    height:70px;

    margin-bottom:18px;

}

.why-icon i{

    font-size:28px;

}

.why-card h3{

    font-size:22px;

    margin-bottom:12px;

}

.why-card p{

    font-size:16px;

    line-height:1.7;

}

/*==================================================
PROYECTOS MOBILE
==================================================*/

.projects{

    padding:80px 0;

}

.projects-grid{

    grid-template-columns:1fr;

    gap:22px;

}

.project-item{

    height:300px;

    border-radius:20px;

}

.project-overlay{

    padding:24px;

}

.project-overlay span{

    padding:8px 16px;

    font-size:11px;

    letter-spacing:1px;

}

.project-overlay h3{

    font-size:28px;

    margin:14px 0 10px;

    line-height:1.15;

}

.project-overlay p{

    font-size:15px;

    line-height:1.6;

    margin-bottom:16px;

}

.project-overlay a{

    font-size:15px;

}

/*==================================================
CLIENTES MOBILE
==================================================*/

.clients{

    padding:80px 0;

}

.clients-slider{

    margin:35px 0;

}

.slider-track{

    gap:18px;

}

.slider-track img{

    width:150px;

    height:90px;

    padding:16px;

    border-radius:16px;

}

.clients-slider::before,
.clients-slider::after{

    width:45px;

}

.clients-message{

    margin-top:40px;

}

.clients-message h3{

    font-size:20px;

    line-height:1.5;

    padding:0 10px;

}

.slider-left{

    animation:sliderLeft 45s linear infinite;

}

.slider-right{

    animation:sliderRight 45s linear infinite;

}


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

.contact{

    padding:80px 0;

}

.contact-grid{

    gap:30px;

}

.contact-info{

    gap:16px;

}

.info-card{

    padding:20px;

    gap:16px;

    border-radius:16px;

}

.info-card i{

    width:50px;

    height:50px;

    font-size:20px;

}

.info-card h3{

    font-size:20px;

}

.info-card p{

    font-size:15px;

    line-height:1.6;

}

.contact-form{

    padding:24px;

    border-radius:18px;

}

.form-row{

    gap:16px;

    margin-bottom:16px;

}

.contact-form input,
.contact-form textarea{

    padding:16px 18px;

    font-size:16px;

}

.contact-form textarea{

    min-height:160px;

}

.contact-form button{

    width:100%;

    min-height:54px;

    font-size:16px;

}

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

.footer{

    padding:70px 0 25px;

}

.footer-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:35px;

    text-align:center;

}

.footer-logo{

    width:140px;

    height:auto;

    margin:0 auto;

}

.footer-slogan{

    font-size:17px;

    margin:18px 0;

}

.footer-text{

    font-size:15px;

    line-height:1.7;

}

.footer h3{

    font-size:22px;

    margin-bottom:18px;

}

.footer ul{

    padding:0;

}

.footer ul li{

    margin-bottom:12px;

}

.footer-contact li{

    justify-content:center;

}

.footer-social{

    display:flex;

    justify-content:center;

    gap:16px;

    margin-top:20px;

}

.footer-social a{

    width:46px;

    height:46px;

}

.footer-bottom{

    margin-top:40px;

    padding-top:20px;

}

.footer-bottom p{

    font-size:14px;

    line-height:1.6;

}

.developer{

    display:flex;

    flex-direction:column;

    gap:6px;

    margin-top:12px;

}


.navbar{

    position:fixed;

    top:72px;

    right:0;

    width:100%;

    height:calc(100vh - 72px);

    background:#111;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:30px 25px;

    transform:translateX(100%);

    transition:transform .40s ease;

    z-index:9998;

}


.navbar.active{

    transform:translateX(0);

}


.navbar li{

    width:100%;

    opacity:0;

    transform:translateX(60px);

    transition:
        opacity .45s ease,
        transform .45s ease;

}

.navbar.active li{

    opacity:1;

    transform:translateX(0);

}

.navbar.active li:nth-child(1){ transition-delay:.08s; }
.navbar.active li:nth-child(2){ transition-delay:.16s; }
.navbar.active li:nth-child(3){ transition-delay:.24s; }
.navbar.active li:nth-child(4){ transition-delay:.32s; }
.navbar.active li:nth-child(5){ transition-delay:.40s; }
.navbar.active li:nth-child(6){ transition-delay:.48s; }

.navbar a{

    display:flex;

    align-items:center;

    width:100%;

    padding:18px 0;

    color:#FFFFFF;

    font-size:18px;

    font-weight:600;

    text-decoration:none;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:all .30s ease;
    
    position:relative;
    
   

}

.navbar a:active{

    color:#C8102E;

    transform:translateX(10px);

}


.navbar a:hover{

    color:#C8102E;

    padding-left:12px;

}


.navbar a:hover::after,
.navbar a:active::after{

    width:40px;

}


.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:8px;

    width:0;

    height:2px;

    background:#C8102E;

    transition:.35s;

}








}