@import url(https://db.onlinewebfonts.com/c/77d394fa0c1103c648f880b77cb4a32f?family=Futura+LT+W01+Medium);


@font-face {
    font-family: "FuentePrincipal";
    src: url("https://db.onlinewebfonts.com/t/77d394fa0c1103c648f880b77cb4a32f.eot");
    src: url("https://db.onlinewebfonts.com/t/77d394fa0c1103c648f880b77cb4a32f.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/77d394fa0c1103c648f880b77cb4a32f.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/77d394fa0c1103c648f880b77cb4a32f.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/77d394fa0c1103c648f880b77cb4a32f.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/77d394fa0c1103c648f880b77cb4a32f.svg#Futura LT W01 Medium")format("svg");
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
    font-family: "FuentePrincipal", Arial, Helvetica, sans-serif;
}

.navbar{
    background-color: rgb(36, 49, 97);
}

.logo{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px;
    width: 11rem;
    height: auto;
}

.likes {
    position: relative; /* Cambia esto si tienes un contenedor padre */
    background-image: url(./img/imgMain.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; /* Esto se mantendrá */
    padding: 200px 0;
    border-top: 1px solid #fff;  
    overflow: hidden; /* Asegúrate de que no esté causando problemas */
}

.likes-gruop{
    display: flex;
} 

.likes-content h1{
    font-family: Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.2em;
    letter-spacing: 4px;
    color: #fff; 
    margin: 10px;
}

.likes-content p{
    font-family:  sans-serif;
    color: #fff;
    max-width: 417px;
    margin: 10px;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.8em; 

}

.btn{
    cursor: pointer;
    background-color: rgb(36, 49, 97);
    color: #fff;
    padding: 10px 20px;
    border: 1px solid rgb(36, 49, 97);
    margin: 10px;
    transition-duration: .1s;
    max-width: 15rem;
}

.btn:hover{
    color: rgb(36, 49, 97);
    background-color: #fff;
    border: 1px solid rgb(36, 49, 97);
}

.btn-invert{
    cursor: pointer;
    background-color: #fff;
    color: rgb(36, 49, 97);
    padding: 10px 20px;
    border: 1px solid rgb(36, 49, 97);
    margin: 10px;
    transition-duration: .1s;
    width: 250px;
}

.container-1 hr{ 
    width: 999px;
    display: grid;
    margin: 0 auto;
}

.container-1{
    margin-bottom: 52px;
}

.container{
    padding: 20px 3.5rem 10px 3.5rem;
    margin: 20px 10px 0 10px;
}

.btn-invert:hover{
    color: #fff;
    background-color: rgb(36, 49, 97);
    border: 1px solid #fff;
}
 
.div-span{
    margin: 0 auto;
    padding: 20px;
    width: 500px;
    text-align: center;
}

.div-span span{
    font-size: 30px;
    font-weight: 300;
    color: #484444;
    letter-spacing: 2px;
}

 
.container ul li{
    text-decoration: solid;
    list-style: disc;
    margin: 0 auto;
    max-width: 450px;
    text-align: left;
    padding: 10px;
    font-size: 15px;
    color: #707070;
}

.div-span-p{
    font-weight: bold;
    color: #484444; 
    width: 600px;
    margin: 0 auto;
}

.div-span-p p{
    padding: 10px;
    font-size: 15px;
    text-align: center;
}

.btn-div{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
}

.contenido{    
    display: flex;
    height: 600px;
} 

.slider-content-img{    
    width: 100%;
    height: 100%;
    background-image: url(./img/AND3-CO-MGP-CNJ-FOTO_156_DIC_2022-E2_V011.jpg); 
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed; 
 
} 

.servicios{  
    width: 2500px;
    height: auto;
    display: block;
    place-content: center;
    margin: 0 auto;
}

.servicios{ 
    display: grid;
    place-content: center;
    height: 100%;
    border-bottom: 1px solid rgba(36, 49, 97, .1);
}

.servicios .servicios-h2{
    color: rgb(36, 49, 97); 
    letter-spacing: normal;     
    text-align: center;
    line-height: normal;
    font-size: 30px;
    padding: 10px;
    
}

.servicios-div-h2{
    width: 440px;
    max-height: 250px;
    font-weight: 100 ;
}

.servicios-div-h2 h2{
    color: #707070;
    letter-spacing: .05em;
    line-height: 1.8em;
    font-size: 15px;
    text-align: left; 
    font-weight: 100;
}

ul li {
    text-decoration: solid;
    list-style: disc;
}

.servicios span{
    letter-spacing: .2em;
    font-weight: bold;
    font-size: 16px;
    line-height: normal;
    color: #707070;
    width: 500px;
}

.services{
   margin: 20px;
}
 
/*CARRUSEL*/
 
.contenido-slider{  
    display: flex;
    align-items: center;
    justify-content: center;  
    min-height: 100vh;
    background-color: #edeaea;
    padding-bottom: 20px;
} 

.slider-wrapper{  
    overflow: hidden;
    max-width: 1700px;
    margin: 0 70px 55px; 
} 
  
.card-list .card-item{ 
    display: flex; 
    width: 650px !important;
    height: 600px;
    align-items: center;
    justify-content: center;  
    margin: 0 10px;
    overflow: hidden;
}
 
.card-list .card-item .user-image{
    width: 100%;
    height: 100%;  
    transition: 1s ease;
}  

.card-list .card-item .user-image:hover{
    width: 110%;
    height: 110%;  
    transition: 1s ease;
}  
 

.slider-wrapper .swiper-slide-button{
    color: #000;
    margin-top: -50px;
    transition: .2s ease;
}

.slider-wrapper .swiper-slide-button:hover{
    color: #000;
    transition: .2s ease;
}
  
/*SECTION ATTACH*/
.section-tanks{
    width: 100%;
    height: 600px;
    display: grid;
    place-content: center;
    padding: 20px;
    font-family: sans-serif;
    margin: 0 auto;
    
}

.section-tanks{
    text-align: left;
}

.section-text span{
    color: #243161; 
    font-size: 26px;
    line-height: normal;
    font-weight: bold;
    padding: 10px;
}

.section-tanks p{
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    padding: 10px;
    width: 700px;
}

.section-tanks h4 span{
    text-transform: uppercase;
}

.section-tanks h5{
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    padding: 10px;
}

footer{
    color: #fff;
    background-color: rgb(36, 49, 97);
    height: 17.5rem;   
}

.footer-div{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 50px 10px 50px;
}

.footer-h4{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}
 
.footer-redes{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 10px;
}

.redes{
    margin: 5px; 
}

.redes1 img { 
    width: 40px;
    height: auto;
}

.redes2 img{ 
    width: 40px;
    height: auto;
}

.redes3 img{ 
    width: 40px;
    height: auto;
}

 @media screen and (max-width: 768px) { 
    .likes{
        background-image: url(./img/imgMain.jpg);
        background-attachment: initial;
    }

    .likes-content h1{
        font-size: 17px;
        line-height: 1.2em;
        letter-spacing: 4px;
        color: #fff; 
        margin: 10px;
    }
    
    .likes-content p{
        font-family:  sans-serif;
        color: #fff;
        max-width: 417px;
        margin: 10px;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.8em; 
    
    }

    .likes-1{
        max-width: 700px ;
    }
 
    .div-span{
        display: block;
    }
    .servicios{
        display: flex;
        flex-wrap: wrap;
        min-width: 375px;
        margin: 0 auto; 
        text-align: center;
        
    }

    .servicios-div-h2 ul{
        display: grid;
        place-content: center;
    }

    .contenido-slider{ 
        min-height: 300px;
        padding: 30px;
     }

    .slider-content-img{
        display: none;
        background-image: none;
    }  

     .slider-wrapper{
        margin: 0 10px 40px;
   
     }

     .card-list .card-item{
        width: 350px !important;
        height: 300px;   
     }

    .card-list .card-item .user-image{
        width: 350px;
        height: 300px;    
    }

    .card-list .card-item .user-image:hover{
        width: 350px;
        height: 300px;  
        transition: .2s ease;
    }  

    .swiper-slide-button{
        display: none;  
    }

    .container{
        display: flex;
        flex-wrap: wrap;
        margin: 10px;
        padding: 10px;
    }

    .div-span-p{ 
        min-width: 300px;
    }

    .container-1 hr{ 
       display: none;
    }

    .section-tanks div{
        
        display: flex;
        flex-wrap: wrap;
        min-width: 350px;
    }
 
    footer{
        height: 25rem;
    }

    .footer-div{
        flex-direction: column;
    }
 
 }