@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Bai Jamjuree', sans-serif;
    font-weight: 300;
}

.bgHeader {
    background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.0));
}

.bgBanner {
    background-image: url(/assets/Img/bgbanner-principal.svg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
}

.bgCarrouselBanner {
    margin-left: auto;
    margin-right: auto;
    height: 85vh;
    margin-bottom: 10rem;
}

.txtBannerCenter {
    color: white;
    text-align: center;
    font-size: 2.2rem;
}

.bgServices {
    margin: 0;
    padding: 0;
}

.bgCarrouselCenter {
    background-image: url(/assets/Img/bg-carrousel-2.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-left: auto;
    margin-right: auto;
    height: 100vh;
}

.txtCarrouselCenter {
    color: white;
    text-align: center;
    letter-spacing: 1rem;
    font-size: 2.2rem;
    text-transform: uppercase;
}

.txtDescription {
    color: white;
    font-size: 1.8rem;
    font-weight: 400;
}

.bgSection {
    background-image: url(/assets/Img/bgSection.svg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}

.linkFuture {
    color: white;
    text-decoration: none;
}

.linkFuture:hover {
    color: #a2a2a2;
    text-decoration: none;
}

.imgMisc1 {
    position: relative;
    left: -20rem;
    padding-left: .6rem;
    padding-right: .6rem;
}

.imgMisc2 {
    position: relative;
    right: -20rem;
    padding-left: .6rem;
    padding-right: .6rem;
}

.miscRight {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    animation-name: miscTeam;
    animation-duration: 30s;
    animation-fill-mode: both;
    animation-timing-function: linear;
}

.miscLeft {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    animation-name: miscMission;
    animation-duration: 30s;
    animation-fill-mode: both;
    animation-timing-function: linear;
}

.rowAnimate {
    view-timeline-name: --rowAnimate;
    view-timeline-axis: block;
    animation-range: entry 20% cover 45%;
    animation-timeline: --rowAnimate;
    animation-fill-mode: both;
    animation-name: AnimateApoloSection;
}

.colmRight {
    view-timeline-name: --colmRight;
    view-timeline-axis: block;
    animation-range: entry 20% cover 45%;
    animation-timeline: --colmRight;
    animation-fill-mode: both;
    animation-name: colmRight;
}

.colmLeft {
    view-timeline-name: --colmLeft;
    view-timeline-axis: block;
    animation-range: entry 20% cover 45%;
    animation-timeline: --colmLeft;
    animation-fill-mode: both;
    animation-name: colmLeft;
}

.borderBottom {
    border-bottom: 1px solid #383838;
}

.FadeIn {
    animation: FadeIn 2s both;
}

.dropdownLanguage {
    min-width: 0;
    background-color: black;
}

.icoLanguage {
    width: 26px;
    height: 26px;
}

.off {
    display: none;
}

.dropdown-toggle::after {
    display: none;
}

.btn {
    --bs-btn-padding-x: 1rem;
}

.dropdown-item {
    margin-top: 5px;
}

@keyframes AnimateApoloSection {
    from {opacity: 0; scale: 85%;}
    to {opacity: 1; scale: 100%;}
}

@keyframes colmRight {
    from {opacity: 0; translate: 500px 0;}
    to {opacity: 1; translate: 0 0;}
}

@keyframes colmLeft {
    from {opacity: 0; translate: -500px 0;}
    to {opacity: 1; translate: 0 0;}
}

@keyframes FadeIn {
    from {opacity: 0; translate: -50px 50px;}
    to {opacity: 1; translate: 0 0;}
}

@keyframes miscTeam {
    from {rotate: 0;}
    to {rotate: 360deg;}
}

@keyframes miscMission {
    from {rotate: 0;}
    to {rotate: -360deg;}
}

@media only screen and (max-width: 1450px) {
    .imgMisc1 {
        position: relative;
        left: -23rem;
        padding-left: .6rem;
        padding-right: .6rem;
    }
    
    .imgMisc2 {
        position: relative;
        right: -29rem;
        padding-left: .6rem;
        padding-right: .6rem;
    }
}

@media only screen and (max-width: 960px) {
    .bgCarrouselCenter {
        background-image: url(/assets/Img/bg-carrousel-2.png);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        margin-left: auto;
        margin-right: auto;
        height: 100vh;
    }
    
    .txtCarrouselCenter {
        color: white;
        text-align: center;
        letter-spacing: .4rem;
        font-size: 1.2rem;
    }

    .linkFuture {
        color: white;
        text-decoration: none;
    }
    
    .linkFuture:hover {
        color: #a2a2a2;
        text-decoration: none;
    }

    .txtDescription {
        color: white;
        font-size: 1.4rem;
        font-weight: 400;
    }

    .txtBannerCenter {
        color: white;
        text-align: center;
        font-size: 1.8rem;
    }

    .itemMobile1 {
        order: 2;
    }
    .itemMobile2 {
        order: 3;
    }
    .itemMobile3 {
        order: 1;
    }
    .itemMobile4 {
        order: 4;
    }
    .itemMobile5 {
        order: 5;
    }

    .imgMisc1 {
        display: none;
    }
    
    .imgMisc2 {
        display: none;
    }
}