@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Elms+Sans:ital,wght@0,100..900;1,100..900&display=swap');
@import url("../js/vendor/bootstrap/css/bootstrap.css");
@import url("../js/vendor/aos/aos.css");
@import url("../js/vendor/fontawesome/css/all.min.css");

/*
font-family: "Elms Sans", sans-serif;
font-family: "Bricolage Grotesque", sans-serif;
 */

html,
body {
    overflow-x: hidden;
}

body {
    font-family: "Elms Sans", sans-serif;
    color: #112234;
    --bg-green-dark: #1D5953;
    --bg-green:#2D734B;
    --bg-green-light: #66A663;
    --bg-green-fosfo:#D8F279;
    --bg-yellow:#e1dec9;

}

header {
     background: #1b5756;
}

.dropdown-lang {
    color: #ffffff;
    text-decoration: none;
    padding-top: 5px;
    padding-left: 20px;
    display: inline-block;
}

.navbar_mj {
    border: none;
    box-shadow: none !important;
}

.navbar_mj .navbar-nav {
    padding-right: 30px;
}

.navbar_mj .navbar-nav a.nav-link {
    color: #ffffff;
    font-size: 1em;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 500;
    padding: 0 20px;
}

.navbar_mj .navbar-nav a.nav-link:hover {
    color: var(--bg-green-fosfo);
}

.navbar_mj .navbar-collapse {
   position: relative;
   z-index: 5;
}

.dropdown.dropdown-lang {
    border-left: 1px solid #ffffff;
    padding-left: 30px;
     text-transform: uppercase;

}

.dropdown.dropdown-lang a {
    text-decoration: none;
    color: #ffffff;
}

.dropdownlang {
    background: transparent !important;
    border: none;
   

}

.dropdownlang .dropdown-item {
   margin-top: 10px;
    text-transform: uppercase;
    color: #ffffff;
}

.dropdownlang  .dropdown-item.active{
    background: transparent !important;
    color: var(--bg-green-fosfo);
}

.dropdownlang  .dropdown-item:hover{
      background: transparent !important;
    color: var(--bg-green-fosfo);
}

.banner {
    background: url(../img/banner1.png) ;
    background-size: cover;
    background-position: center;
    padding: 5% 0;
    color: #ffffff;
    position: relative;
}

.banner .overlay {
    background: #1D5953;
    background: linear-gradient(180deg, rgba(29, 89, 83, 1) 0%, rgba(29, 89, 83, 0.77) 45%, rgba(255, 255, 255, 0) 100%);
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 0;
    bottom: 0;
    
}

.banner h3 {
    font-size: 3em;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 800;
    position: relative;
    z-index: 4;
}

.banner .subtitle {
    font-size: 1.4em;
      position: relative;
    z-index: 4;
   
}

.text_yellow {
    color: var(--bg-yellow);
}

.text_fosfo {
    color: var(--bg-green-fosfo);
}

.text_green_dark {
    color: var(--bg-green-dark);
}

.text_green_light {
    color: var(--bg-green-light);
}

.text-justify {
    text-align: justify;
}



.title {
    color: var(--bg-green-dark);
    letter-spacing: 6px;
    font-size: .9rem;
    text-transform: uppercase;
    font-weight: 700;
      margin-bottom: 0;
    margin-left: 5px;
   
}




.nosotros {
    background: var(--bg-yellow);
    padding: 5% 0;
    font-size: 1.1rem;
}

.nosotros h1 {
    font-size: 4rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    margin-top: 0;
    line-height: 1em;
    
}

h2 {
     font-size: 4rem;
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 600;
    margin-top: 0;
    line-height: 1em;
}


.nosotros h1 span {
    display: block;
    color: var(--bg-green-light);
    letter-spacing: 4px;
    text-transform: uppercase;
    font-size: 1.9rem;
    margin-top: 0;
    line-height: 1em;
    
}



.productos {
    padding: 1% 0 5% 0;
    background: var(--bg-yellow);
    font-size: 1.1rem;

}

.item-producto {
    border: 2px solid var(--bg-green-dark);
    text-align: center;
    padding: 5%;
    margin: 5%;
}

.item-producto:hover {
   
    background: #ffffff;    
    box-shadow: var(--bg-green-dark) 0px 0px 0px 1px inset, var(--bg-yellow) 10px -10px 0px -3px, var(--bg-green-dark) 10px -10px;
}

.item-producto:hover {
    background: #ffffff;
  
}

.item-producto:hover h4{
   
   color: var(--bg-green-dark);
}

.item-producto img{
    width: 100%;
   
}

.item-producto h4 {
    font-weight: 400;
    letter-spacing: 1px;
    font-size: 1.3rem;
    margin-top: 30px;
}

.servicios {
     background: var(--bg-green-light);
     padding: 5% 0;
      font-size: 1.1rem;
     
}



.item-servicios {
    border: 2px solid var(--bg-green-dark);
    padding: 5%;
     height: 100%;
     font-size: 1rem;
     margin-top: 5%;
    
   
}

.item-servicios:hover {
   
    background: #ffffff;    
    box-shadow: var(--bg-green-dark) 0px 0px 0px 2px inset, var(--bg-green-light) 10px -10px 0px -3px, var(--bg-green-dark) 10px -10px;
}

.icon-servicios {
    width: 80px;
    margin-bottom: 5%;
}

.item-servicios h2 {
    text-transform: uppercase;
     font-family: "Bricolage Grotesque", sans-serif;
     font-size: 1.4em;
     font-weight: 900;
     margin-bottom: 15px;

}


.presenciaen {
    padding: 5% 0;
    background: var(--bg-yellow);

}

.item-country {
    border: 2px solid var(--bg-green-light);
    padding: 3%;
     height: 100%;
    text-align: center;
    max-width: 200px;
    ;
    
   
    
   
}

.item-country:hover {
   
    background: #ffffff;    
    box-shadow: var(--bg-green-light) 0px 0px 0px 1px inset, var(--bg-yellow) 10px -10px 0px -3px, var(--bg-green-light) 10px -10px;
}

.btn-custom {
    border: 2px solid #112234;
    padding: 10px 30px;
    border-radius: 0;
    margin-top: 5%;
    background: var(--bg-green-light);
    font-weight: 800;
    text-transform: uppercase;
}

.btn-custom:hover {
    background: #ffffff;    
    box-shadow: #ffffff 0px 0px 0px 2px inset, var(--bg-green-light) 10px -10px 0px -3px, #112234 10px -10px;
}

.btn-custom.btn-yellow {
    border: 2px solid #112234;
    padding: 10px 30px;
    border-radius: 0;
    margin-top: 5%;
    background: var(--bg-yellow);
    font-weight: 800;
    text-transform: uppercase;
}

.btn-custom.btn-yellow:hover {
    background: #ffffff;    
    box-shadow: #ffffff 0px 0px 0px 2px inset, var(--bg-yellow) 10px -10px 0px -3px, #112234 10px -10px;
}

.item-country h5 {
    font-size: .9rem;
    text-transform: uppercase;
    margin-top: 10px;
}

.video {
    padding: 0;
    background: var(--bg-green);
}

.video video {
    width: 100%;
}

.footer {
    padding: 3% 0 1% 0;
     background: var(--bg-green-dark);
     color: var(--bg-yellow);

}

.footer a {
    color: var(--bg-yellow);
    text-decoration: none;
}

.footer h4 {
    color: #ffffff
}

.infocontacto {
    margin-top: 10px;
}

.infocontacto a {
    color: var(--bg-yellow);
    text-decoration: none;
    line-height: .9rem;
}

.infocontacto i {
    color: var(--bg-green-fosfo);
    margin-right: 10px;
}

.redes {
    list-style: none;
    font-size: 1.6em;
    margin: 5% 0 0 0;
    padding: 0;
}

.redes li {
    width: 45px;
    height: 45px;
    border: 1px solid var(--bg-yellow);
    text-align: center;
    padding-top: 3px;
}

.redes a {
    color: var(--bg-yellow);
}

.redes li:hover {
    border: 1px solid var(--bg-green-fosfo);
}

.redes a:hover {
    color: var(--bg-green-fosfo);
}


.whatsappicon {
    background: #25D366;
    color: #ffffff;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    font-size: 3em;
    text-align: center;
    padding-top: 5px;
    z-index: 100;
}

.whatsappicon:hover {
    background: #075E54;
    color: #ffffff;
}


@media screen and (max-width: 991px) {

    .logo img {
        width: 60px;
    }

    .dropdownlang {
       position: absolute;
         right: 0;
    }

    .dropdownlang li {
        width: 50px;
    }

    .navbar_mj .navbar-collapse {
        position: absolute;
        width: 100%;
         top: 100%;
      
    }

    .navbar_mj .navbar-nav {
          background: var(--bg-green-light);
        padding: 10px 0;
       
    }

    .navbar_mj .navbar-collapse a.nav-link{
        padding: 5px 0;
        text-align: center;
    }

    .navbar-toggler {
        border-color: #D8F279;
        border-radius: 0;
         color: #D8F279;
         border: none;
         position: absolute;
         right: 24%;
    }

    .navbar-toggler:focus {
       box-shadow: none;
    }

    .navbar-toggler.collapsed .navbar-toggler-icon {
       
       background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='%23D8F279' viewBox='0 0 640 640'><path d='M64 160C64 142.3 78.3 128 96 128L480 128C497.7 128 512 142.3 512 160C512 177.7 497.7 192 480 192L96 192C78.3 192 64 177.7 64 160zM128 320C128 302.3 142.3 288 160 288L544 288C561.7 288 576 302.3 576 320C576 337.7 561.7 352 544 352L160 352C142.3 352 128 337.7 128 320zM512 480C512 497.7 497.7 512 480 512L96 512C78.3 512 64 497.7 64 480C64 462.3 78.3 448 96 448L480 448C497.7 448 512 462.3 512 480z'/></svg>");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

     .navbar-toggler .navbar-toggler-icon {
       
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' fill='%23D8F279'><path d='M183.1 137.4C170.6 124.9 150.3 124.9 137.8 137.4C125.3 149.9 125.3 170.2 137.8 182.7L275.2 320L137.9 457.4C125.4 469.9 125.4 490.2 137.9 502.7C150.4 515.2 170.7 515.2 183.2 502.7L320.5 365.3L457.9 502.6C470.4 515.1 490.7 515.1 503.2 502.6C515.7 490.1 515.7 469.8 503.2 457.3L365.8 320L503.1 182.6C515.6 170.1 515.6 149.8 503.1 137.3C490.6 124.8 470.3 124.8 457.8 137.3L320.5 274.7L183.1 137.4z'/></svg>");
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
    }

    .icon-servicios {
        width: 40px;
       
    }

    .item-country h5 {
        font-size: .6rem;
    }

}


@media screen and (max-width: 500px) {

        .navbar-toggler {
            right: 35%;
        }

        .item-footer {
            margin-top: 15%;
        }

      

        section {
            padding-right:10% !important;
            padding-left:10% !important;
        }

          section.banner {
             padding-right:0% !important;
            padding-left:0% !important;
        }

        .banner h3 {
            font-size: 2em;
            padding: 0 5%;
        }

        .banner .subtitle {
            padding: 0 5%;
            font-size: 1.2rem;
        }

        .nosotros h1, h2 {
            font-size: 3rem;
        }

        .servicios .btn-custom {
            margin-top: 30%;
        }

        .redes {
            text-align: center;
        }
       
}