/*Styles 2024*/

/*NavBar Styles General*/

.btn-logoImgcustom {
    padding: 0%;
}

.logoImgcustom {
    width: auto;
    height: 70px;
}

.aa {
    background: rgb(0, 179, 207);
    background: linear-gradient(0deg, rgba(0, 179, 207, 1) 0%, rgba(95, 34, 184, 1) 80%, rgba(117, 2, 178, 1) 100%);
}

.aa2 {
    background: rgb(0, 179, 207);
    background: linear-gradient(0deg, rgba(183, 232, 246, 1) 0%, rgba(130, 200, 245, 1) 50%, rgba(177, 168, 247, 1) 100%);



}

.aa3 {
    background: rgb(0, 179, 207);
    background: linear-gradient(0deg, rgba(183, 232, 246, 1) 0%, rgba(130, 200, 245, 1) 50%, rgba(177, 168, 247, 1) 100%);
    padding-top: 5%;
}
.aa4 { 
  
    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(123, 44, 191, 0.8) 0%,
            rgba(123, 44, 191, 0) 50%
        ),
        radial-gradient(
            circle at 80% 20%,
            rgba(232, 121, 249, 0.7) 0%,
            rgba(232, 121, 249, 0) 50%
        ),
        linear-gradient(
            180deg,
            rgba(90, 30, 156, 1) 0%,
            rgba(123, 44, 191, 1) 40%,
            rgba(192, 38, 211, 1) 70%,
            rgba(232, 121, 249, 1) 100%
        );

    background-attachment: fixed;
    color: #ffffff;
}
.aa5{

    background:
        radial-gradient(
            circle at 15% 25%,
            rgba(99, 102, 241, 0.55) 0%,
            rgba(99, 102, 241, 0) 55%
        ),
        radial-gradient(
            circle at 90% 80%,
            rgba(244, 114, 182, 0.35) 0%,
            rgba(244, 114, 182, 0) 60%
        ),
        linear-gradient(
            180deg,
            #1E0B4F 0%,
            #3B0764 35%,
            #5B21B6 65%,
            #9333EA 85%,
            #E9A8D4 100%
        );

    background-attachment: fixed;
    color: #ffffff;
}




.restosSection {
    background-color: transparent;
}

.footerCustmContainer {
    padding-top: 1% !important;
}

.footerCustmRow {
    display: flex;
    flex-direction: row;
    margin-bottom: 2%;
    align-items: center;
}

.footerIconContCustm {
    background-color: #373299;
    border-radius: 10px;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1.1%;
    padding-right: 1.1%;
    margin-right: 2%;
}

.footerIconContCustm2 {
    background-color: #373299;
    border-radius: 10px;
    padding-top: 1%;
    padding-bottom: 1%;
    padding-left: 1.3%;
    padding-right: 1.3%;
    margin-right: 2%;
}

.logos-container {
    display: flex;
    /* Activa flexbox */
    justify-content: center;
    /* Centra las imágenes horizontalmente */
    align-items: center;
    /* Centra las imágenes verticalmente si es necesario */
    flex-wrap: wrap;
    /* Permite que las imágenes se ajusten a nuevas filas si no caben */
    gap: 20px;
    /* Espacio entre imágenes */
}

.logo {
    max-width: 150px;
    /* Controla el tamaño máximo de las imágenes */
    height: auto;
    /* Mantiene la proporción de las imágenes */
}

/*HomePage Styles*/

.Stiky-SocialMedia {
    position: -webkit-sticky !important;
    position: sticky ;
    top: 40% !important;
    background-color: transparent;
    width: 60px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    z-index: 100 !important;
    margin-bottom: -18%;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.37);
    border-radius: 40px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.bb {
    margin-top: 0% !important;
}

.rowSticky {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 5%;
    padding-top: 2%;
    padding: 10%;
    border-radius: 20%;
    background-color: #4400A3;
}

.rowSticky:hover {
    background-color: #f1f1f1;
}


.socialMediaIconsCustm {
    border-radius: 20px;
}

.custmSMIconInst {
    color: #f1f1f1;
    font-size: 3.1rem;
}

.custmSMIconInst:hover {
    color: #4400A3;
}

.custmSMIcon {
    color: #f1f1f1;
    font-size: 2.9rem;
}

.custmSMIcon:hover {
    color: #4400A3;
}

.custmSMIconYou {
    color: #f1f1f1;
    font-size: 2.5rem;
}

.custmSMIconYou:hover {
    color: #4400A3;
}

/*home styles*/

/* #i4snq {
    margin-top: 60px !important;
    margin-bottom: 60px !important;
} */
#i4s5nq {
    margin-top: 5%;
}

#t7b8me {
    font-size: 80px;
    line-height: 79px;
}

#i4snqm {
    background-image: url(/hombredigitalweb2.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#iubian {
    margin-bottom: 10%;
}


/*Styles Challenges Page */

.ChallengesCustomIcon {
    padding: 0%;
    width: 120px;
    height: 72;
    margin-bottom: 1%;
}

.custom-blackText {
    margin-top: 5%;
}

.peopleInfoSection {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: transparent;
}

.peopleInfoTitle {
    text-align: center;
}


.peopleInfoContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.peopleInfoCh {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 3%;
    padding: 2%;
    background-color: #fbfff8;
    border-radius: 70px;
    max-height: 363px;
}

.peopleInfoIcons {
    width: auto;
    height: 20rem;
    margin-bottom: 3%;
}

.peopleInfoText {
    color: #ffff;
    padding: 5%;
    text-align: center;
}



.highlightblueTxt {
    color: #00c5fc;
}


.SectionbannerImgs {
    background-color: #0a0656;
    padding-top: 5%;
    padding-bottom: 2%;
}

.bannerImgBtn {
    max-width: 100%;
    border-radius: 20px;
    margin-bottom: 3%;
}

.bannerImgBtn:hover {
    -webkit-box-shadow: -1px -1px 23px 24px rgba(120, 148, 141, 1);
    -moz-box-shadow: -1px -1px 23px 24px rgba(120, 148, 141, 1);
    box-shadow: -1px -1px 23px 24px rgba(120, 148, 141, 1);
}

.restosSectionContainer {
    background-color: transparent;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 0%;
    padding-bottom: 1%;
}

.knowAllChanSection {
    padding-top: 5%;
    background-color: transparent;
    /*margin-bottom: 5%; */
}


/*Styles Econova network*/

.titleBeforeMap {
    margin-bottom: 5%;
}

.custmMapInfo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.moveUsImg {
    width: 65%;
    margin: 3%;
}

.networkCustmRow {
    display: flex;
    flex-direction: row;
}

.networkCustmcol {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding-top: 5%;
    padding-bottom: 5%;
}

.networkCustmcol2 {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    padding-top: 5%;
    padding-bottom: 5%;
}

/* Carusel styles*/

@keyframes slides {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-115%);
    }
}

.logos {
    overflow: hidden;
    padding: 30px 0px;
    white-space: nowrap;
    position: relative;
    background-color: #fff;
    border-radius: 90px;
}

.logos:before,
.logos:after {
    position: absolute;
    top: 0;
    content: '';
    width: 250px;
    height: 100%;
    z-index: 2;
}

.logos:before {
    left: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logos:after {
    right: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(255, 255, 255));
}

.logo_items {
    display: inline-block;
    animation: 45s slides infinite linear;
}

.logos:hover .logo_items {
    animation-play-state: paused;
}

.logo_items img {
    height: 50px;
    padding-left: 0.5%;
    padding-right: 0%;
}

.logo_items .smallImgs {
    height: 80px !important;
    padding-left: 0.5%;
    padding-right: 0%;
}

.logo_items .midImgs {
    height: 55px !important;
    padding-left: 0.5%;
    padding-right: 0%;
}

.logo_items .bigImgs {
    height: 30px !important;
    padding-left: 0.5%;
    padding-right: 0%;
}

.customfooterRow {
    display: flex;
    justify-content: center;
}

.footerImagesContainer {
    width: 50%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.footerimageCust img {
    width: 135px;
    height: 140px;
}

.contactTitle {
    text-align: center;
}

/*Responsive Area*/

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

    /*NAV*/
    .btn-logoImgcustom {
        margin-top: 10% !important;
    }

    /*Home Page*/
    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        overflow-x: hidden;
    }

    .colmMob {
        margin-top: -60%;
    }

    .mainTittle {
        font-size: 68px !important;
        line-height: 80px !important;
        font-weight: 600px !important;
    }
    .subtitles {
        font-size: 64px;
        line-height: 40px;
    }

    /*green section*/

    #icuqx {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: 40px;
        margin-right: 10%;
        line-height: normal;

    }

    #ig9ji {
        width: 370px;
        margin-top: -5%;
    }

    #i76cr {
        max-width: 370px;
        word-break: break-word;
        padding: 5%;
        margin-bottom: 8% !important;
    }

    .absolute-energy {
        width: 100%;
        border-radius: 10px !important;
        height: 350px;
    }

    .it41l {
        padding: 5%;
    }


    /*end green section*/

    /*Welcome Econova*/

    #i3bzm {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    #i3im6t {
        font-size: 50px;
    }


    /*end Welcome Econova*/

    /*Section new with power*/

    #ilg702 {
        padding: 2%;
        margin-top: -80px;
    }

    #iv1kmf {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        font-size: 50px;
        text-align: center;
    }

    .happend-div {
        height: 270px;
        width: 360px;
        border-radius: 10px;
        padding: 2% !important;
        background-color: var(--portalThemeOnColor15);
    }

    #iz1kro {
        height: 270px;
        width: 370px;
    }

    #il5s0w {
        margin-bottom: 8%;
    }

    #i17rc5 {
        max-width: 80%;
        padding-right: 50%;
    }

    #i1y3i7 {
        margin-top: 55px;
    }

    #iadx5g,
    #i17rc5 {
        padding-right: 2%;
    }

    /*end Section new with power*/

    /**/

    #iuxxt9 {
        max-width: 370px;
    }

    #iy8ucb {
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 370px;
        font-size: 50px;
        text-align: center;
    }

    #i1tz0h {
        text-align: center;
    }

    /**/

    /*logos*/
    .logos {
        padding: 10px 0px;
        border-radius: 10px;
        max-width: 370px;
        margin-bottom: 50px;
    }

    .logos:before {
        left: 0;
        background: transparent;
    }

    .logos:after {
        right: 0;
        background: transparent;
    }

    /*end logos*/

    /*Econova network*/

    .tronica-size {
        font-size: 50px;
    }
   
    }

    #ifx3g {
        font-size: 70px;
    }

    #t7b8me {
        font-size: 60px;
         font-weight: bold;
    }

    .colmMob2 {
        margin-top: -30% !important;
    }

    .networkCustmRow {
        flex-direction: column;
    }


    /*retos Page*/

    #iq489 {
        font-size: 5rem;
    }

    #gr6h8 {
        font-size: 5rem !important;
    }

    #i3fhi {
        margin-bottom: 15%;
        margin-top: -15%;
    }

    #igbem {
        width: 320px !important;
        height: 260px !important;
    }


    #gr6h8-2 {
        font-size: 70px !important;
    }

    .peopleInfoContainer {
        flex-direction: column;
    }

    .innovation-div h3.font-ben {
        font-size: 20px !important;
    }

    .cstmMobile {
        margin-right: 10% !important;
    }

    .peopleInfoTitle {
        font-size: 5rem !important;
    }

    .peopleInfoIcons {
        height: 10rem;

    }

    .know-div {
        border-radius: 80px !important;
        padding: 60px !important;
    }



.footerMainContCust {
    display: flex;
    flex-direction: column;
    max-width: 100%;
}


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

    .footerimageCust {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .certificationImg {
        max-width: 250px;

    }

    @media only screen and (max-width: 600px) {
        .Stiky-SocialMedia {
            position: relative; /* No fija */
            display: flex;
            flex-direction: row; /* En fila */
            justify-content: center;
            align-items: center;
            width: 100%;
            margin: 20px auto;
            padding: 0;
            background: none;
            border: none;
            border-radius: 0;
            box-shadow: none;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            gap: 0px; /* Espacio entre íconos */
        }
        .socialMediaIconsCustm {
            background: none;
    border: none;
    padding: 0;
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    text-decoration: none;
        }
    
        .rowSticky {
            margin: 0 5px;
            padding: 10px;
            border-radius: 50%;
            background-color: #4400A3;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .rowSticky:hover {
            background-color: #f1f1f1;
        }
    }
    
    /* Solo muestra la versión sticky vertical en pantallas grandes */
    @media only screen and (min-width: 601px) {
        .mobile-social-bar {
            display: none !important;
        }
    }
    
    /* Y oculta la versión sticky en móvil */
    @media only screen and (max-width: 600px) {
        .Stiky-SocialMedia:not(.mobile-social-bar) {
            display: none !important;
        }
    }

    @media screen and (min-width:990px) {
        #i2z1wj {
            height: 100%;
            align-content: center;
        }

        #i2z1wj {
            flex-direction: row;
        }

        #iuyr3k {
            flex-direction: row-reverse;
        }

        #izz2fl {
            flex-direction: row-reverse;
        }

    }

    }

    @media screen and (min-width:1200px) {
        .surveryContainer {
            margin-top: 10%;
        }
    }
    @media screen and (min-width:600px) {
        .footerImagesFirst {
            display: flex;
            gap: 25px;
        }

        .footerImagesSecond {
            display: flex;
            gap: 25px
        }

        .customfooterRow {
            width: 50%;
        }
       
        .footerMainContCust{
            flex-direction: row;
        }
        .footerimageCust img {
            width: 180px;
            height: 180px;
        }
}