/* GLOBAL */
* {
    font-family:            'Kanit', sans-serif;
}
:root {
    --azulOscuro:           #010D26;
    --azulClaro:            #4390FF;    
    --azulFuerte:           #001AFF;
}
.paddingBlocks {
    padding-top:            100px;
    padding-bottom:         100px;
}
.halfPaddingBlocks {
    padding-top:            50px;
    padding-bottom:         50px;
}
h2 {
    font-size:              45px;
    color:                  var(--azulOscuro);
    font-weight:            400;
}
h5 {
    font-size:              23px;
    font-weight:            300;
}
p {
    font-size:              18px;
    font-weight:            300;
}
a {
    text-decoration:        none;
    opacity:                1;
    transition:             opacity 0.2s ease-in-out;
}
a:hover {
    opacity:                0.7;
}
.masInformacion:hover {
    cursor:                 pointer;
    opacity:                0.7;
}

/* NAV */
nav .topbar {
    display:                flex;
    position:               relative;
    justify-content:        space-between;
    width:                  100%;
    height:                 auto;
    padding:                50px;   
    background:             white;    
}
nav .topbar .leftNav {
    display:                flex;
    gap:                    30px;
    align-items:            center;
}
nav .topbar .leftNav img {
    height:                 60px;
}
nav .topbar .leftNav > a {
    font-weight:            400;
    color:                  var(--azulOscuro);
}
nav .topbar .rightNav {
    display:                flex;
    gap:                    30px;
    align-items:            center;
}
nav .topbar .rightNav > a {
    position:               relative;
    padding:                10px 40px;
    background:             var(--azulClaro); 
    color:                  white;
}
nav .topbar .rightNav .socialContainer {
    display:                flex;
    gap:                    10px;
    align-items:            center;
}
nav .topbar .rightNav .socialContainer a:hover {
    opacity:                unset;
}
nav .topbar .rightNav .socialContainer svg {
    display:                block;
    position:               relative;
    width:                  30px;    
}
nav .topbar .rightNav .socialContainer svg:hover > .fillIcon {
    fill:                   var(--azulFuerte);
}
nav .mainNav {
    display:                flex;
    position:               relative;
    justify-content:        center;
    gap:                    30px;
    width:                  100%;
    height:                 auto;
    padding-bottom:         25px;
}
nav .mainNav a {
    font-size:              18px;
    font-weight:            400;
    color:                  var(--azulOscuro);
}
nav .mainNav a:hover {
    color:                  var(--azulFuerte);
}

/* BANNER */
.carouselContainer,
.bannerContainer {
    display:                block;
    position:               relative;
}
.carouselContainer .slideContainer {
    display:                block;
    position:               relative;
    width:                  100%;
    height:                 70vh;
}
.carouselContainer .slideContainer > img {
    display:                block;
    position:               absolute;
    width:                  100%;
    height:                 100%;
    object-fit:             cover;     
    z-index:                -999; 
}
.bannerContainer .textSlide {
    display:                block;
    position:               absolute;
    width:                  30%;
    left:                   10%;
    top:                    10%;
    border-left:            5px solid var(--azulOscuro);
    padding-left:           30px;
    z-index:                9999;
}
.bannerContainer .textSlide h4{
    font-size:              32px;
    color:                  var(--azulFuerte);
    font-weight:            300;
    margin-bottom:          0;
}
.bannerContainer .textSlide h3{
    font-size:              45px;
    color:                  var(--azulOscuro);
    font-weight:            400;
}
.bannerContainer .textSlide > a {
    position:               relative;
    padding:                10px 40px;
    color:                  white;
    background:             var(--azulFuerte);
    top:                    25px;   
}
.carouselContainer .slideContainer::after
 {
    display:                block;
    position:               absolute;
    content:                "";
    bottom:                 0px;
    left:                   0px;
    height:                 250px;
    width:                  100%;    
    background:             linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
}
.carouselContainer .slideContainer::before
 {
    display:                block;
    position:               absolute;
    content:                "";
    top:                    0px;
    left:                   0px;
    height:                 250px;
    width:                  100%;    
    background:             linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
}

/* QUIENES SOMOS */
#quienesSomos {
    position:               relative;     
}
#quienesSomos .texture01 {
    display:                block;
    position:               absolute;
    left:                   0px;
    top:                    0px;
    width:                  100%;
    z-index:                -9999;
    opacity:                0.2;  
}
#quienesSomos h2 {
    display:                block;
    position:               relative;
    padding-bottom:         25px;
    border-bottom:          1px solid var(--azulFuerte);
}
#quienesSomos .col-lg-3 {
    border-bottom:          1px solid #CCCCCC;
}
#quienesSomos h3 > img {
    height:                 40px;
    margin-right:           10px;
}
#quienesSomos .clientesContainer .col-lg-2 {
    display:                flex;
    align-items:            center;
    margin-top:             50px;
    background-color:       white;
}
#quienesSomos .clientesContainer .slick-track {
    display:                flex;
    background:           white;
    margin-top:             50px;
}
#quienesSomos .clientesContainer img {
    filter:                 grayscale(1);
    display:                flex;
    height:                 auto;
    align-items:            center;
    justify-content:        center;
    object-fit:             contain;
}
#quienesSomos .masInformacionContent {
    visibility:             hidden;
    opacity:                0;
    transition:             0.2s ease-in-out all;
    max-height:             0px;
}
#quienesSomos .masInformacionContent.active {
    visibility:             visible;
    opacity:                1;
    max-height:             1000px;
}

/* SERVICIOS */
.serviciosContainer h2 {
    display:                flex;
    gap:                    20px;
    position:               relative;
    margin-bottom:          50px;
    align-items:            center;
}
.serviciosContainer h2 > span {
    display:                block;
    position:               relative;
    width:                  200px;
    height:                 1px;
    background:             var(--azulFuerte);
}
.servicioContainer > img{
    display:                block;
    position:               relative;
    width:                  100%;
    height:                 250px;
    object-fit:             cover;
}
.servicioContainer > h5 {
    margin-top:             20px;
    margin-bottom:          20px;
}
.servicioContainer span {
    display:                block;
    position:               relative;
    color:                  var(--azulFuerte);
    font-size:              12px;
}
.servicioContainer .masInformacionContent {
    visibility:             hidden;
    opacity:                0;
    transition:             0.2s ease-in-out all;
    max-height:             0px;
}
.servicioContainer .masInformacionContent.active {
    visibility:             visible;
    opacity:                1;
    max-height:             1000px;
}

/* PROYECTOS */
#proyectosContainer {
    position:               relative;
}
#proyectosContainer h2 {
    display:                flex;
    gap:                    20px;
    position:               relative;
    margin-bottom:          50px;
    align-items:            center;
}
#proyectosContainer h2 > span {
    display:                block;
    position:               relative;
    width:                  200px;
    height:                 1px;
    background:             var(--azulFuerte);
}
#proyectosContainer .proyectosFlex {
    display:                flex;
    position:               relative;
    width:                  100%;
    gap:                    20px;
}
#proyectosContainer .proyectoSingle {
    flex:                   1 0 0;
    transition:             flex 0.5s ease-in-out;
}
#proyectosContainer .proyectoSingle:hover {
    flex:                   0 0 50%;
}
#proyectosContainer .proyectoSingle > img {
    display:                block;
    position:               relative;
    width:                  100%;
    height:                 450px;
    margin-bottom:          20px;
    object-fit:             cover;
}
#proyectosContainer .proyectoSingle > span {
    display:                block;
    position:               relative;
    font-size:              18px;
    font-weight:            300;
    color:                  var(--azulFuerte);
}
#proyectosContainer .proyectoSingle > h6 {
    display:                block;
    position:               relative;
    font-size:              18px;
    font-weight:            400;
    color:                  var(--azulOscuro);
}

/* CONTACT */
#contactoContainer {
    margin-top:             50px;
    background:             white;
}
#contactoContainer .col-lg-10 {
    display:                flex;
    position:               relative;
    justify-content:        end;
    box-shadow:             5px 5px 20px rgb(0,0,0,0.05);
}
#contactoContainer .col-lg-10::after
 {
    display:                block;
    position:               absolute;
    content:                "";
    bottom:                 0px;
    left:                   0px;
    height:                 100px;
    width:                  100%;    
    background:             linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%), linear-gradient(0deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
}
#contactoContainer .col-lg-10 > img {
    position:               absolute;
    left:                   0px;
    bottom:                 0px;
    height:                 105%;
    max-width:              50%;
    object-fit:             contain;
    object-position:        bottom;
}
#contactoContainer .contactForm {
    padding:                100px 50px;
}
#contactoContainer .contactForm > span {
    color:                  var(--azulFuerte);
    font-size:              16px;
    font-weight:            300;
}
#contactoContainer .contactForm form{
    display:                block;
    position:               relative;
    width:                  300px;
}
#contactoContainer .contactForm .formInput{
    display:                block;
    position:               relative;
    width:                  100%;
    height:                 auto;
    padding:                5px 10px;
    font-size:              16px;
    font-weight:            300;
    margin-top:             10px;
    border-style:           unset;
    border-width:           unset;
    border-style:           unset;
    border-color:           unset;
    border-image:           unset;
    border-bottom:          1px solid #eaeaea;
}
#contactoContainer .contactForm .formSubmit{
    display:                block;
    position:               relative;
    padding:                5px 10px;
    font-size:              16px;
    font-weight:            300;
    margin-top:             35px;
    border-width:           unset;
    border-style:           unset;
    border-color:           unset;
    border-image:           unset;
    background-color:       unset;
    text-align:             left;
    font-size:              16px;
    font-weight:            400;
    color:                  var(--azulFuerte);
}
#contactoContainer .contactForm .formSubmit > img {
    margin-left:            10px;
}

/* LOCATIONS */
#locationsContainer {
    position:               relative;
}
#locationsContainer h5 {
    display:                flex;
    gap:                    20px;
    position:               relative;
    margin-bottom:          50px;
    align-items:            center;
    font-weight:            500;
    justify-content:        center;
}
#locationsContainer h5 > span {
    display:                block;
    position:               relative;
    width:                  100px;
    height:                 1px;
    background:             var(--azulFuerte);
}
#locationsContainer .flexContainer {
    display:                flex;
    gap:                    20px;
    justify-content:        center;
}
#locationsContainer > .texture01 {
    display:                block;
    position:               absolute;
    left:                   0px;
    bottom:                 0px;
    width:                  100%;
    z-index:                -9999;
    opacity:                0.2;  
}
#locationsContainer .flexContainer .contactItem {
    align-items:            center;
    flex-grow:              1;
    width:                  33%;
    text-align:             center;
}


/* FOOTER */
footer {
    display:                block;
    position:               relative;
    width:                  100%;
    height:                 auto;
    padding:                20px 0;
    background:             #FAFAFA;
}
footer .sitemap {
    display:                flex;
    gap:                    30px;
    justify-content:        center;
}
footer .sitemap > a {
    color:                  #333;
}
footer .flexContainer {
    display:                flex;
    justify-content:        space-between;
    width:                  100%;
    height:                 auto;
    padding:                15px 0;
}
footer .flexContainer > span {
    font-size:              16px;
    color:                  #666;
}
footer .socialContainer a:hover {
    opacity:                unset;
}
footer .socialContainer svg:hover > .fillIcon {
    fill:                   var(--azulFuerte);
}

/* MEDIA QUERIES */
@media screen and (max-width: 992px) {
    .bannerContainer .textSlide {
      width: 80%;
    }
    .carouselContainer .slideContainer {
        height:             50vh;
    }
    nav .topbar {
        flex-direction:     column;
        justify-content:    center;
    }
    nav .topbar .rightNav {
    	flex-direction:     column;
    }
    nav .topbar .rightNav,
    nav .topbar .leftNav {
        justify-content:    center;
    }
    #locationsContainer .flexContainer {
        flex-direction:     column;
        gap:                30px;
    }
    #locationsContainer .flexContainer .contactItem {
        width:              100%;
        padding:            20px;
    }
    #proyectosContainer .proyectosFlex {
        flex-direction:     column;
    }
    .clientesContainer {
        margin-top:         30px;
    }
    #contactoContainer .contactForm {
    	padding: 	 		25px 0px 200px 0px;
    }
    .paddingBlocks {
    	padding-top: 		50px;
        padding-bottom:  	50px;
    }
    #contactoContainer .col-lg-10 {
    	justify-content: 	center;
    }
  }