/* Fonts */
@font-face {
    font-family: Poppins;
    src: url(../assets/Fonts/Poppins-Regular.ttf);
}

@font-face {
    font-family: Poppins;
    src: url(../assets/Fonts/Poppins-Bold.ttf);
    font-weight: bold;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Clases Generales */
h1,
h2,
h3,
h4,
h4,
h5,
h6,
a,
p,
body {
    font-family: Poppins;
}

/* Clases generales */
.text-blue {
    color: #182039;
}

.text-green {
    color: #A0F000;
}

.text-green-dark {
    color: #40AD48;
}


.text-gray {
    color: #A8A8A8;
}

.text-gray-dark {
    color: #767675;
}

.bg-blue {
    background: #182039;
}

.bg-white {
    background: white;
}

.text-white-nav{
    color: #182039 !important;
}
@media (max-width: 991px){
    .text-white-nav{
        color: white !important;
    }
}

h2 {
    font-size: 60px;
    font-weight: bold;
}


/* Botones */
.btn {
    font-weight: 500;
    font-size: 18px;
    line-height: 25px;
    text-align: center;
    padding: 1vh 2vw;
    border-radius: 4px;
}

.btn-principal {
    border: 1px solid #A0F000;
    background: #A0F000;
    color: #182039 !important;
}

.btn-principal:hover {
    color: white;
}

.btn-green {
    margin-top: 15px;
    border: 1px solid #A0F000;
    color: #A0F000;
}


/* Navbar */
.fixed-top.scrolled {
    background-color: white !important;
    transition: background-color 200ms linear;
}

/* Banner */
#banner {
    background: url('../assets/banner.png');
    background-position: center;
    background-size: cover;
    height: 80vh;
    padding: 0 5vw 10vh;
}

#banner h1 {
    font-weight: 600;
    font-size: 80px;
    line-height: 130%;
}

#banner p {
    font-size: 30px;
    line-height: 150%;
}

#banner .gradient {
    width: 100%;
    height: 80vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.53) 100%);
}

.banner__text {
    position: relative;
    z-index: 10;
}




/* Icons */
#icons {
    margin: -20px 7% 0 7%;
    position: relative;
    z-index: 10;
}

#icons svg {
    margin-right: 20px;
}

#icons p {
    font-size: 24px;
    margin: 0;
}

.icons-div {
    background-color: #182039;
    color: white;
    padding: 1% 0;
}

@media (max-width: 480px){
    #icons{
        -webkit-box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.22); 
        box-shadow: 0px 5px 15px 3px rgba(0,0,0,0.22);
    }
}


/* Somos */
#about {
    padding: 5% 4vw;
    background-image: url('../assets/lineas-amarillas.png');
    background-size: cover;
    background-repeat: no-repeat;
}

#about .w-75 {
    padding: 0% 3%;
}

#about p {
    font-size: 20px;
}


/* Servicios */
#servicios {
    padding: 0 4vw;
    background-image: url('../assets/lineas-verdes.png');
    background-size: cover;
    background-repeat: no-repeat;
}

.servicios__name,
.contacto__name {
    font-weight: 600;
    font-size: 18px;
    line-height: 121.5%;
}

.servicios__title {
    font-weight: 600;
    font-size: 60px;
    line-height: 121.5%;
    width: 60vw;
}

.servicios__description {
    font-size: 18px;
    line-height: 25px;
    color: #767675;
    width: 35vw;
}

.servicios__cnt {
    margin-bottom: 30px;
}

.servicios__box {
    margin: 0 6vw;
}

.box {
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2vh 3.5vw;
    height: 45vh;
    overflow: hidden;
    font-family: 'Roboto', sans-serif;
}

.box h3{
    font-weight: 700;
    font-size: 25px;
    line-height: 141%;
}

.box p {
    font-size: 18px;
    line-height: 147.66%;
}

.box-blue {
    background: #182039;
    color: white;
}

.accordion-cstm h2>button{
    font-weight: 700;
    font-size: 20px;
    line-height: 141%;
}

.accordion-cstm .accordion-header{
    border-radius: 10px;
}

.accordion-cstm .accordion-item{
    margin-bottom: 5vh;
}

.accordion-button::after{
    -webkit-filter: contrast(0.5); /* Safari 6.0 - 9.0 */
  filter: contrast(0.5);
}

#servicios .row-cols-lg-3>* {
    width: 31%;
    margin-bottom: 5vh;
    height: auto;
    min-height: 45vh;
}

.box-green {
    background: #A0F000;
}

#servicios .col>img {
    height: 45vh;
    object-fit: cover;
    border-radius: 10px;
}

.box-yellow {
    background: #FFE031;
}

.box-grey{
background: #FAFAFA;
}

.col-img {
    width: 66% !important;
    background: url('../assets/tecnico-panel.png');
    background-repeat: no-repeat;
    background-position: right;
    background-size: cover;
    border-radius: 10px;
}



/* Banner 2 */
#banner2 {
    background: url('../assets/banner2.png');
    background-position: center;
    background-size: cover;
    height: 64vh;
    position: relative;
    padding: 0 5vw 5vh;
}

#banner2 .gradient {
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 64vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.banner2__cnt {
    position: relative;
    z-index: 10;
    color: white;
    width: 45vw;
}

.banner2__cnt h2 {
    font-weight: 700;
    font-size: 55px;
    line-height: 130%;
}

.banner2__cnt p {
    font-size: 22px;
    line-height: 150%;
}

/* Marquee */
.marquee-div {
    height: 70px;
    overflow: hidden;
    position: relative;
    background-color: #FAFAFA;
    margin: 0 0 3% 0;
}

.marquee-div h2 {
    font-weight: bold;
    font-size: 40px;
    position: absolute;
    width: 100%;
    height: 100%;
    line-height: 70px;
    text-align: center;
    -moz-transform: translateX(100%);
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -moz-animation: scroll-left 2s linear infinite;
    -webkit-animation: scroll-left 2s linear infinite;
    animation: scroll-left 20s linear infinite;
}

@-moz-keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
    }

    100% {
        -moz-transform: translateX(-100%);
    }
}

@-webkit-keyframes scroll-left {
    0% {
        -webkit-transform: translateX(100%);
    }

    100% {
        -webkit-transform: translateX(-100%);
    }
}

@keyframes scroll-left {
    0% {
        -moz-transform: translateX(100%);
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    100% {
        -moz-transform: translateX(-80%);
        -webkit-transform: translateX(-80%);
        transform: translateX(-80%);
    }
}


/* Contacto */
#contacto {
    background: url('../assets/fondo-circulos.png');
    background-position: center;
    background-size: cover;
    height: 64vh;
}

.contacto__title {
    font-weight: 600;
    font-size: 60px;
    line-height: 121.5%;
}

#contacto .form-control {
    border: none;
    border-bottom: 2px solid #A8A8A8;
    border-radius: 0;
    font-family: 'Poppins';
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgb(148 221 5 / 42%);
}


/*Footer*/

.border-footer {
    border-top: 8px solid #A0F000;
}

.border-footer2 {
    border-top: 2px solid #A0F000;
}

footer a {
    text-decoration: none;
    font-weight: bold;
}

.navbar-nav-footer{
    margin-top: 25px;
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

footer li {
    margin: 0 3%;
    padding-bottom: 2%;
}

@media (max-width: 1080px){
    .navbar-nav-footer {
        margin-top: 0px;
        flex-direction: column !important;
        padding-left: 25%;
    }

    footer li {
        margin: 0 ;
    }
}

@media (max-width: 768px){
    .navbar-nav-footer {
        padding-left: 0%;
        margin: 30px 0 !important;
    }
}

.politics:hover {
    color: #A0F000;
    transition: all 300ms linear;
}

.links:hover {
    color: #40AD48;
    transition: color 300ms linear;
}

#icons svg {
    width: 30px;
    height: 30px;
}

#about .text-cnt{
    padding: 5% 3rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
}

#about .btn{
    width: 150px;
    text-align: center;
    padding: 1vh 0;
}

#about .row{
    height: 80vh;
    overflow: hidden;
}


/* Medias */

@media screen and (max-width: 1500px) {
    h2 {
        font-size: 40px;
    }

    /* Banner */
    #banner h1 {
        font-size: 60px;
    }

    #banner p {
        font-size: 24px;
    }

    /* Icons */
    

    #icons p {
        font-size: 18px;
    }

    /* Servicios */
    .servicios__title {
        font-size: 40px;
    }

    .servicios__description {
        width: 40vw;
    }

    .box {
        padding: 2vh 2.5vw;
    }

    .box h3 {
        font-size: 22px;
    }

    .box p {
        font-size: 16px;
    }

    /*Banner 2 */
    .banner2__cnt h2 {
        font-size: 50px;
    }

    .banner2__cnt p {
        font-size: 22px;
    }

    /* Contacto */
    .contacto__title {
        font-size: 40px;
    }

}

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

    /* Servicios */
    .box h3 {
        font-size: 20px;
    }

    .box p {
        font-size: 14px;
    }

    /*Banner 2 */
    .banner2__cnt {
        width: 45vw;
    }

    .banner2__cnt h2 {
        font-size: 42px;
    }

    .banner2__cnt p {
        font-size: 20px;
    }

    #banner2{
        height: 100vh !important;
    }
    #banner2 .gradient{
        height: 100vh !important;
    }

    /* Contacto */
    .contacto__title {
        font-size: 40px;
    }

    #contacto {
        height: 100vh !important;
    }


}


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

    /* Servicios */
    .servicios__description {
        width: 45vw;
    }

    .box {
        padding: 2vh 4.5vw;
    }

    #servicios .row-cols-lg-3>* {
        width: 47%;
    }

    .col-img {
        width: 100% !important;
        height: 48vh;
    }


    /*Banner 2 */
    #banner2 {
        height: 70vh;
    }

    #banner2 .gradient {
        height: 70vh;
    }

    /* Contacto */
    #contacto {
        height: 54vh;
    }

}

@media screen and (max-width: 991px) {
    .navbar-collapse{
        transition: all 0.01s ease-in-out;
        visibility: hidden;
        padding: 0 0.75rem;
    }

    .navbar-toggler[aria-expanded="true"], .navbar-collapse.collapse.show {
        background-color: #182039;
        visibility: initial;
        padding: 20px 30px;
    }

    .container-fluid{
        padding: 0;
    }

    .navbar-toggler{
        margin-right: 0.75rem;
    }

    .navbar-light .navbar-toggler-icon:hover{
        background-image: url('../assets/hamburger-icon.svg');
    }

}

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

    h2 {
        font-size: 30px;
    }

    /* Banner */
    #banner h1 {
        font-size: 42px;
    }

    #banner p {
        font-size: 20px;
    }

    /* Icons */
    #icons svg {
        width: 30px;
        height: 30px;
    }

    #icons p {
        font-size: 14px;
    }

    /* Somos */
    #about img {
        width: 80% !important;
        margin-top: 35px;
    }

    #about .col-lg-5 {
        order: 1;
    }

    #about .w-75 {
        width: 80% !important;
    }

    #about p {
        font-size: 16px;
    }

    /* Servicios */
    .servicios__title {
        font-size: 30px;
        width: 100%;
    }

    .servicios__description {
        width: 100%;
    }

    .box {
        padding: 2vh 4.5vw;
    }

    .box h3 {
        font-size: 24px;
    }

    .box p {
        font-size: 18px;
    }

    #servicios .row-cols-lg-3>* {
        width: 80%;
    }

    #servicios .row {
        justify-content: center !important;
    }

    .col-img {
        width: 80% !important;
        height: 48vh;
    }

    /*Banner 2 */
    #banner2 {
        height: 60vh;
    }

    #banner2 .gradient {
        height: 60vh;
    }

    .banner2__cnt {
        width: 90%;
    }

    /* Contacto */
    #contacto {
        height: 54vh;
    }

    /* marquee */
    .marquee-div h2 {
        font-size: 24px;
        -moz-animation: scroll-left 1s linear infinite;
        -webkit-animation: scroll-left 1s linear infinite;
        animation: scroll-left 10s linear infinite;
    }

}

.navbar-nav-footer{
    display: flex;
    flex-direction: row;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}


@media screen and (max-width: 668px) {
    .navbar img {
        height: 40px;
    }

    /* Icons */
    #icons svg {
        margin: 0;
    }

    .w20 {
        width: 40%;
    }

    .w80 {
        width: 60%;
    }

    #icons .col-md-4:first-child {
        margin-top: 25px;
    }

    #icons .col-md-4 {
        margin-bottom: 25px;
    }

    /* Somos */
    #about img {
        width: 100% !important;
    }

    #about .w-75 {
        width: 100% !important;
    }



    /* Servicios */
    .box h3 {
        font-size: 20px;
    }

    .servicios__box {
        margin: 0;
    }

    .box p {
        font-size: 16px;
    }

    #servicios .row-cols-lg-3>* {
        width: 100%;
    }

    .col-img {
        width: 100% !important;
    }

    /*Banner 2 */
    .banner2__cnt h2 {
        font-size: 30px;
    }

    .banner2__cnt p {
        font-size: 18px;
    }

    /* Contacto */
    #contacto {
        height: 70vh;
        padding: 0 10%
    }

    .contacto__title {
        font-size: 30px;
    }

    #contacto .col-12:first-child {
        margin-bottom: 3rem !important;
    }

    /* marquee */
    .marquee-div h2 {
        font-size: 18px;
        -moz-animation: scroll-left 2s linear infinite;
        -webkit-animation: scroll-left 2s linear infinite;
        animation: scroll-left 7s linear infinite;
    }

    @-moz-keyframes scroll-left {
        0% {
            -moz-transform: translateX(100%);
        }

        100% {
            -moz-transform: translateX(-100%);
        }
    }

    @-webkit-keyframes scroll-left {
        0% {
            -webkit-transform: translateX(100%);
        }

        100% {
            -webkit-transform: translateX(-100%);
        }
    }

    @keyframes scroll-left {
        0% {
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
        }

        100% {
            -moz-transform: translateX(-100%);
            -webkit-transform: translateX(-100%);
            transform: translateX(-100%);
        }
    }

}


@media screen and (max-width: 400px) {
    #banner h1 {
        font-size: 36px;
    }

    /*Banner 2 */
    #banner2 {
        height: 80vh;
    }

    #banner2 .gradient {
        height: 80vh;
    }

}


/*accordion*/
.accordion-item, .accordion-button{
    background:transparent !important;
}

.accordion-button{
    color:white;
}
.text-blue-accordion{
    color: #182039;
}

.accordion-button, .accordion-body{
padding-left:0px;
padding-right:0px;
}

.language-flag{
    max-width:40px;
    margin-right: 15px;
    transition: transform .2s;
}
.language-flag:hover{
    transform: scale(1.2);
}

@media screen and (max-width: 991px) {
    .language-flag{
        max-width:30px;
        height:auto;
        margin-right: 15px;
    }
}