* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #fff;
}

header{
    position: absolute;
    top: 5rem;
    left: 0;
    z-index: 10;
    width: 100%;
    padding: 1rem 6rem;
}

.logo {
    width: 250px;
}

.hero{
    padding: 5rem;
    height: 100vh;
    position: relative;
    z-index: 1;
}

.heroWrapper{
    background: #ce6b4c;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 10rem;
    padding-left: 2rem;
    padding-right: 2rem;
    gap: 2rem;
    height: 100%;
    width: 100%;
    clip-path: polygon(0 0, calc(100% - 100px) 0, 100% calc(0% + 100px), 100% 100%, calc(0% + 40px) 100%, 0 calc(100% - 40px));
    border-radius: 10px 0;
    overflow: hidden;
    &::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url('../img/photo-population-afriquaine.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center right;
        z-index: 1;
        opacity: 0.7;
        mix-blend-mode: luminosity;
    }
    &::after{
        content: "";
        position: absolute;
        top: -10%;
        right: -10%;
        width: 900px;
        height: 100%;
        background-image: url('../img/honey-shape.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top right;
        z-index: 1;
        mix-blend-mode: luminosity;
    }
}

.heroVisual{
    width: calc(50% - 1rem);
    height: 100%;
    position: relative;
    z-index: 2;
    padding-bottom: 2rem;
    & img{
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}
.heroContent{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    width: calc(50% - 1rem);
    position: relative;
    z-index: 2;
    color: #fff;
    padding-bottom: 5rem;
    & .title{
        font-size: 4rem;
        color: #efc500;
        text-transform: uppercase;
    }
    & .text{
        & p{
            width: 500px;
            max-width: 100%;
        }
    }
}

.network{
    position: relative;
    &:before{
        content: '';
        width: 50%;
        height: 100%;
        position: absolute;
        top: -40%;
        left: -20%;
        background-image: url('../img/honey-shape-yellow.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: top left;
    }
}
.networkMap{
    display: flex;
    justify-content: center;
    align-items: center;
    div{
        position: relative;
        width: 400px;
        max-width: 100%;
        & img{
            width: 100%;
        }
        & p{
            position: absolute;
            right: -40%;
            bottom: -1rem;
            z-index: 1;
            font-size: 2rem;
            font-weight: bold;
        }
    }
}

.researchAxes{
    background-color: #a65339;
    padding-bottom: 25rem;
    margin-top: 25rem;
    & .row{
        margin-top: -20rem;
    }
}
.swiperAxis{
    width: 100%;
    margin-top: 3rem;
    & .swiper-slide{
        padding: 0 1rem;
    }
    & .tranding-slider-control .swiper-button-next svg, & .tranding-slider-control .swiper-button-prev svg {
        stroke: #ffffff;
    }

    & .tranding-slider-control .swiper-pagination-bullet {
    border: 1px solid #ffffff;
    }
    & .tranding-slider-control .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #ffffff;
    }
}
.axisCard{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    
}
.axisVisual{
    height: 300px;
    width: 100%;
    background: rgba(206, 106, 76, 1);
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    & img{
        width: 100%;
        height: auto;
        object-fit: cover;
        mix-blend-mode: soft-light;
    }
    & h3{
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: flex;
        align-items: flex-end;
        color: #efc500;
        padding: 1rem;
        font-size: 1.3rem;
        font-weight: bold;
        z-index: 1;
    }
}
.axisContent{
    margin-top: 1rem;
    color: #fff;
}

.training{
    .row{
        margin-top: -20rem;
    }
    & .col-12{
        margin-bottom: 3rem;
    }
}
.trainingBlock{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.trainingVisual{
    width: 100%;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    clip-path: polygon(0 0, calc(100% - 40px) 0, 100% calc(0% + 40px), 100% 100%, calc(0% + 40px) 100%, 0 calc(100% - 40px));
    & img{
        width: 100%;
        height: 100%;
        vertical-align: middle;
        object-fit: cover;
    }
}
.trainingContent{
    padding: 1rem 5%;
    max-width: 100%;
    & h3{
        font-size: 1.3rem;
        font-weight: bold;
        color: #efc500;
    }
}

.swiperKey{
    width: 1200px;
    max-width: 100%;
    margin: 3rem auto 0 auto;
    & .swiper-slide{
        width: 25%;
        padding: 0 1rem;
    }
    & .swiper-wrapper{
        justify-content: center;
    }
}
.keyCard{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    text-align: center;
}
.keypicto{
    width: 130px;
    height: 130px;
    border-radius: 50%;
    padding: 2rem;
    position: relative;
    & img{
        width: auto;
        height: auto;
        object-fit: contain;
    }
    & svg{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}
.keyNumber{
    margin-top: .5rem;
    font-size: 2rem;
    font-weight: bold;
}
.keyText{
    margin-top: 0.5rem;
    font-size: 1rem;
}

.video{
    margin-top: 3rem;
    & .row{
        justify-content: center;
    }
    & .block{
        .secondTitle{
            & br{
                display: none;
            }
        }
    }
}
.videoWrapperContainer{
    max-width: 100%;
}
.videoWrapper{
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
    & iframe{
        max-width: 100%;
    }
}
.logos{
    margin-top: 3rem;
}
.swiperLogos{
    width: 100%;
    & .swiper-wrapper{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    & .swiper-slide:nth-child(1),
    & .swiper-slide:nth-child(2),
    & .swiper-slide:nth-child(3),
    & .swiper-slide:nth-child(4),
    & .swiper-slide:nth-child(5),
    & .swiper-slide:nth-child(6),
    & .swiper-slide:nth-child(7) {
        width: calc((100% / 7) - 1rem);
    }
    & .swiper-slide:nth-child(8),
    & .swiper-slide:nth-child(9),
    & .swiper-slide:nth-child(10),
    & .swiper-slide:nth-child(11) {
        width: calc((100% / 4) - 1rem);
    }
}
.logoItem{
    display: flex;
    align-items: center;
    justify-content: center;
    & img{
        width: 120px;
        max-width: 100%;
        object-fit: contain;
        object-position: center;
    }
}

footer{
    width: calc(100% - 10%);
    margin: 3rem auto 2rem auto;
    background-color: #ce6b4c;
    padding: 2rem 5%;
    display: flex;
    justify-content: center;
    align-items: center;
    clip-path: polygon(0 0, calc(100% - 30px) 0, 100% calc(0% + 30px), 100% 100%, calc(0% + 30px) 100%, 0 calc(100% - 30px));
}

@media screen and (max-width: 1600px) {
    header{
        top: 3rem;
        padding: 1rem calc(5% + 1rem);
    }
    .logo{
        width: 200px;
    }
    .hero{
        padding: 3rem 5%;
    }
    .heroWrapper {
        &::after {
            width: 570px;
        }
    }
    .networkMap {
        & div {
            position: relative;
            width: 320px;
            & p {
                right: -30%;
                bottom: -2rem;
                font-size: 1.6rem;
            }
        }
    }
    .axisVisual {
        height: 250px;
    }
    .trainingVisual {
        height: 300px;
    }
}

@media screen and (max-width: 1300px){
    .video{
        & .block{
            .secondTitle{
                & br{
                    display: block;
                }
            }
        }
    }
}

@media screen and (max-width: 1100px) {
    .networkMap {
        & div {
            & p {
                right: -20%;
            }
        }
    }
    .researchAxes {
        padding-bottom: 20rem;
    }
}

@media screen and (max-width: 1023px){
    .hero{
        height: auto;
    }
    .heroWrapper {
        &::after {
            width: 380px;
            max-width: 70%;
        }
    }

    .heroVisual {
        width: calc(40% - 1rem);
        display: flex;
        align-items: flex-end;
    }
    .heroContent{
        width: calc(60% - 1rem);
        & .title{
            font-size: 3rem;
        }
    }
    .network {
        &:before {
            width: 70%;
            top: -20%;
            left: -30%;
        }
    }
    .networkMap {
        display: flex;
        & div {
            display: flex;
            align-items: center;
            width: 570px;
            max-width: 100%;
            img{
                width: 300px;
                max-width: 50%;
            }
            & p {
                position: initial;
                margin-left: 2rem;
            }
        }
    }
    .trainingVisual {
        height: 250px;
    }
    .video {
        & .block {
            flex: 0 0 100%;
            margin-bottom: 2rem;
            text-align: center;
            align-items: center;
            &.basicAppear.-xLeft{
                transform: translate(0, 50px) scale(1);
            }
            & .title, & .secondTitle{
                align-items: center;
                text-align: center;
                text-align: center;
            }
        }
        & .videoWrapperContainer{
             &.basicAppear.-xRight{
                transform: translate(0, 50px) scale(1);
            }
        }
    }
}
@media screen and (max-width: 991px){
    .network{
        & .basicAppear{
            &.-xLeft, &.-xRight {
                transform: translate(0, 50px) scale(1);
            }
        }
    }
    .researchAxes{
        margin-top: 20rem;
    }
}
@media screen and (max-width: 767px) {
    .heroWrapper {
        padding-top: 9rem;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 2rem;
    }
    .heroVisual{
        align-items: center;
        padding-bottom: 0;
    }
    .heroContent{
        padding-bottom: 0;
        & .text{
            margin: 0;
        }
    }
    .trainingBlock.basicAppear.-xLeft, .trainingBlock.basicAppear.-xRight {
        transform: translate(0, 50px) scale(1);
    }
    .networkMap {
        & div {
            & p {
                font-size: 1.1rem;
                line-height: 1.1;
            }
        }
    }
    .swiperKey{
        width: 100%;
        & .swiper-wrapper {
            justify-content: flex-start;
        }
        & .swiper-slide{
            width: 100%;
        }
    }
    .swiperLogos{
        width: 100%;
        & .swiper-wrapper{
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 0;
        }
        & .swiper-slide:nth-child(1),
        & .swiper-slide:nth-child(2),
        & .swiper-slide:nth-child(3),
        & .swiper-slide:nth-child(4),
        & .swiper-slide:nth-child(5),
        & .swiper-slide:nth-child(6),
        & .swiper-slide:nth-child(7) {
            width: 100%;
        }
        & .swiper-slide:nth-child(8),
        & .swiper-slide:nth-child(9),
        & .swiper-slide:nth-child(10),
        & .swiper-slide:nth-child(11) {
            width: 100%;
        }
    }
    .video, .logos{
        margin-top: 0;
    }
}
@media screen and (max-width: 620px) {
    header{
        top: 1rem;
    }
    .hero{
        padding: 1rem;
    }
    .heroWrapper{
        clip-path: polygon(0 0, calc(100% - 50px) 0, 100% calc(0% + 50px), 100% 100%, calc(0% + 20px) 100%, 0 calc(100% - 20px));
        &:after{
            content: none;
        }
         &::before {
            background-size: cover;
            background-position: center center;
            opacity: 0.5;
        }
    }
    .heroVisual{
        display: none;
    }
    .heroContent{
        width: 100%;
        & .title{
            font-size: 2.2rem;
        }
    }
    .network {
        &:before {
            content: none;
        }
    }
    .networkMap {
        & div {
            & p {
                font-size: 1rem;
                line-height: 1.1;
                margin-left: 1rem;
            }
        }
    }
}
@media screen and (max-width: 420px) {
    .networkMap {
        & div {
            justify-content: center;
            flex-wrap: wrap;
            & img{
                max-width: 100%;
                width: 300px;
            }
            & p {
                width: 100%;
                margin-top: 1rem;
                text-align: center;
                margin-left: 0;
                font-size: 1.2rem;
            }
        }
    }
    .swiperAxis {
        & .swiper-slide {
            padding: 0 0.1rem;
        }
    }
}