*{
    position: relative;
    box-sizing: border-box;
    margin: 0;
}

a{
    display: block;
    width: fit-content;
}

.section-1{
    width: 100%;
    position: relative;
    background: url("/dev/2023/wasserfest/wp-content/themes/wasserfest/images/womenforwomen/top-section-bg.jpeg");
    background-size: cover;
    box-sizing: border-box;
    opacity: 0;

}

@media (min-width: 1000px) {
    .section-1{
        min-height: 800px !important;

    }
}


.section-1::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1380px;
    height: 100%;
    background: linear-gradient(90deg, rgba(22, 32, 31, 0.90) 7.81%, rgba(36, 44, 43, 0.00) 100%);
    z-index: 1;
}

.section-1 .content{ 
    z-index:2;
    position: relative;
    max-width: 640px;
}

.section-1 .content p{
    margin-top: 16px;
    color: white;
}

.section-1 .content .button{
    color: #FFF;
    font-family: Mulish;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 50px;
    background: #F55C40;
    padding: 17.5px 40px;
}





/* h1{
    color: #28DFCD;
    font-family: Mulish;
    font-size: 64px;
    font-style: normal;
    font-weight: 900;
    line-height: 110%;
    text-transform: uppercase;
} */



.section-1 .bg-overlay{
    position: absolute;
    display: block;
    z-index: -1;
    width: 800px;
    height: 100%;
    left: 0;
    top:0;
    background: linear-gradient(90deg, rgba(22, 32, 31, 0.90) 7.81%, rgba(36, 44, 43, 0.00) 100%);
}


header{
    /* height: 100px; */
    height: fit-content;
    width: 100%;
    background-color:white;
    position: relative;
}


.section-2{
    height: fit-content;
    opacity: 0;
}

.fade-in-left{
    opacity: 0;
}


.section-2 .content{
    display: flex;
    flex-direction: row;
    column-gap: 80px;
}

.section-2 .content .text-wrapper{
    display:flex;
    flex-direction: column;
    row-gap: 30px;
}

.section-2 .content h2{
    color: #018374;
}

.section-2 .content p{
    color: #263F3D;
}

.section-2 .content .main-img{
    width: 814px;
    object-fit: contain;
}

.section-2 .content .button{
    color: #018374;
    font-family: Mulish;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 50px;
    border: 2px solid #018374;
    padding: 17.5px 40px;
}

.content .button{
    opacity: 0;
}

.section-3{
    height: fit-content;
    background: #1C4F69;
    width: 100%;
    padding: 120px 0;
}

.section-3 .content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 100%;
}

.section-3 .content h2{
    max-width: 520px;
    width: 100%;
    color: white;
}

.section-3 .cards-wrapper{
    display: flex;
    flex-direction: row;
    column-gap: 30px;
    flex-wrap: nowrap;
    max-width: 990px;
    width: 100%;
}

.section-3 .cards-wrapper .card{
    width: calc(33.33% - 20px);
    height: 100%;
    background: #01C5AF;
    padding: 20px;
    opacity: 0;
}

.section-3 .card .number{
    color: #FFF;
    font-family: Mulish;
    font-size: 60px;
    font-style: normal;
    font-weight: 800;
    line-height: 100%; /* 60px */
    margin-bottom: 12px;
}

.section-3 .card .text{
    color: #263F3D;
    font-family: Mulish;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
}

.section-4 .top-part{
    height: 215px;
    position: relative;
    z-index:5;
}

.section-5 svg{
    margin-top: 40px;
}


.section-4 .top-part .inner{
    background: #E6F9F7;
    width: 100%;
    height: fit-content;
    position: relative;
    top: 80px;
    padding-top: 32px;
    padding-bottom: 32px;
    padding-left: 48px;
    padding-right: 48px;
}

.section-4 .top-part .inner h2{
    width: 100%;
    text-align: center;
    color: #018374;
}

.section-4 .top-part .inner p{
    width: 100%;
    color: #263F3D;
    text-align: center;
    padding-top: 16px;
}

.section-4 .bottom-part{
    height: fit-content;
    z-index: 0;
    width: 100%;
    /* background: url("/dev/2023/wasserfest/wp-content/themes/wasserfest/images/womenforwomen/section-4-bg.png"); */
}

#section-4-swiper{
    width: 100%;
    height: 100%;
}

#section-4-swiper .swiper-slide{
    position: relative;
    width: 100%;
    height: 100%;
    min-height:602px;
}


#section-4-swiper .swiper-slide .bg-image{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    z-index:-1;
}

#section-4-swiper .swiper-pagination{
    bottom: 28px;
}

#section-4-swiper .swiper-slide .bg-overlay{
    background: linear-gradient(90deg, rgba(22, 32, 31, 0.90) 0%, rgba(36, 44, 43, 0.00) 100%);
    display: block;
    width: 960px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}



#section-4-swiper .swiper-slide .content{
    display: flex;
    width: 720px;
    height: fit-content;
    padding: 100px 0;
    flex-direction: column;
    z-index:5;
    position: relative;
    /* background: linear-gradient(90deg, rgba(22, 32, 31, 0.90) 0%, rgba(36, 44, 43, 0.00) 100%); */
}

#section-4-swiper .swiper-slide .content h3 {
    color: #FFF;
    font-family: Mulish;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: 110%; /* 70.4px */
}

#section-4-swiper .swiper-slide .content h3:after{
    content: '“';
    position: absolute;
    left:-32px;
    top: 0;
    color: #FFF;
    font-family: Mulish;
    font-size: 64px;
    font-style: normal;
    font-weight: 800;
    line-height: 110%; /* 70.4px */
    display: none;
}

#section-4-swiper .swiper-slide .content p{
    color: #FFF;
    font-family: Mulish;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 28.8px */
    margin-top: 16px;
    opacity: 0;
}

#section-4-swiper .swiper-slide .button{
    color: #FFF;
    font-family: Mulish;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 50px;
    padding: 17.5px 40px;
    background: #F55C40;
    margin-top: 40px;
    transform: scale(0.9);
}

.button-single{
    opacity: 0;
}

#section-4-swiper .swiper-pagination-bullet {
    background: none;
    width: 28px;
    height:6px;
    background-color: white;
    border-radius: 5px !important;
    opacity: 0.25;
    transition: all 0.3s ease-out;
}

.swiper-pagination-bullet:hover{
    opacity: 0.6 !important;
}

#section-4-swiper .swiper-pagination-bullet-active{
    width: 48px;
    opacity: 1;
}

.section-5{
    background: #E6F9F7;
    padding-top: 135px;
    padding-bottom: 100px;
}

.section-5 h2{
    color: #018374;
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.section-5 p{
    color: #018374;
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    margin-top: 16px;
}

.section-5 .map{
    width: 1920px;
    margin: 0 auto;
    margin-top: 28px;
    height: 100%;
    left:50%;
    transform: translateX(-50%);
}

.section-5 .button{
    color: #018374;
    font-family: Mulish;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    border-radius: 50px;
    border: 2px solid #018374;
    padding: 17.5px 40px;
    margin: 0 auto;
    margin-top: 28px;

}


.map-country-burkina{
    z-index:5;
}


#map-svg text{ 
    font-family: Mulish;
    font-weight: 900;
}




#map-svg .map-group:hover path{
    fill: #20c7b7;
    cursor: pointer;
}

.map-path{
    fill: #28DFCD;
}


.crf-group .map-path{
    fill: #C9C73D;
}

.crf-group:hover path{
    fill: #b6b436 !important;
    cursor: pointer;
}


#map-svg .map-group:hover .text-group{
    opacity: 1;
}



#map-svg .map-group .text-group{
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s ease-out;
}

#map-svg .map-group path{
    /* fill: rgba(1, 197, 175); */
    transition: all 0.3s ease-out;
    /* opacity: 0; */
}

.map-group{
    opacity: 0;
}

#section-4-swiper .swiper-slide .bg-image-mobile{
    display: none;
}



    @media (max-width: 1500px) {
        .section-2 .content .main-img{
            width: 600px;
            height: auto;
            object-fit: contain;
        }
    }
    

    @media (min-width: 1280px) and (max-width: 1599px) {

        .section-2 .content .main-img{
            width: 600px;
        }
    }



    @media (max-width: 1000px) {
        .section-3 .content{
            flex-direction: column;
        }

        .section-3 .cards-wrapper{
            flex-direction: column;
            row-gap: 30px;
        }

        .swiper-button-prev, .swiper-button-next{
            top: 45% !important;
        }

        .section-3 .content h2{
            font-size: 24px;
            margin-bottom: 48px;
        }

        .section-3 .cards-wrapper .card{
            width: 100% !important;
        }

        .section-3 .card .number{
            font-size: 48px;
        }

        .section-3 .card .text{
            font-size: 15px;
        }

        .section-4 .top-part .inner{
            top: 64px;
        }


        .section-4 .top-part .inner h2{
            color: #018374;
            font-family: Mulish;
            font-size: 24px;
            font-style: normal;
            font-weight: 900;
            line-height: 120%; /* 28.8px */
            text-transform: uppercase;
            text-align: left;
        }

        .section-4 .top-part .inner{
            padding: 20px !important;
        }

        .section-4 .top-part .inner p{
            color: #263F3D;
            font-family: Mulish;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 160%; /* 24px */
            text-align: left;
            padding-top: 8px;
        }

        .section-4 .top-part{
            padding-left:20px;
            padding-right: 20px;
            height: 165px;
        }

        #section-4-swiper .swiper-slide .content{
            background:#018374;
            padding: 20px 20px 64px 20px;
            width: 100%;
            min-height: 395px;
        }

        #section-4-swiper .swiper-slide .bg-image{
            position: relative;
            height: 360px;
        }

        .section-4 .bottom-part{
            margin-top: -20px;
        }

        #section-4-swiper .swiper-slide .bg-overlay{
            display: none;
        }

        #section-4-swiper .swiper-slide .bg-image{
            display: none;
        }

        #section-4-swiper .swiper-slide .bg-image-mobile{
            display:block;
            height: 360px;
            object-fit: cover;
            width: 100%;
        }

        #section-4-swiper .swiper-slide .content h3{
            color: #FFF;
            font-family: Mulish;
            font-size: 24px;
            font-style: normal;
            font-weight: 800;
            line-height: 120%; /* 28.8px */
        }

        #section-4-swiper .swiper-slide .content p{
            color: #FFF;
            font-family: Mulish;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%; /* 21px */
        }

        #section-4-swiper .width-container{
            padding-left: 0;
            padding-right: 0;
        }

        #section-4-swiper .swiper-slide .button{
            padding: 15.5px 40px;
            width: 100%;
            text-align: center;
            margin-top: 20px;
        }

        #section-4-swiper .swiper-pagination{
            bottom: 20px;
        }
        
        #section-4-swiper .swiper-pagination-bullet{
            width: 28px;
            height: 4px;
        }

  

        .section-5 h2{
            color: #018374;
            text-align: center;
            font-family: Mulish;
            font-size: 24px;
            font-style: normal;
            font-weight: 900;
            line-height: 120%; /* 28.8px */
            text-transform: uppercase;
        }

        .section-5 p{
            color: #263F3D;
            text-align: center;
            font-family: Mulish;
            font-size: 15px;
            font-style: normal;
            font-weight: 400;
            line-height: 140%; /* 21px */
        }

        #map-svg {
            height: 210px;
            transform: translateX(-60%);
            margin-top: 30px;
            margin-left: 50%;
        }

        .section-5 .button{
            width: 100%;
            text-align: center;
        }

        #map-svg .map-group:hover path{
            fill: #28DFCD;
        }
    
        
        .crf-group:hover path{
            fill: #C9C73D !important;
            cursor: pointer;
        }
        

        #map-svg text{
            font-size: 24px;
        }
        
        
        
        #map-svg .map-group .text-group{
            pointer-events: none;
            opacity: 1;
            transition: all 0.3s ease-out;
        }
    }


@media (min-width: 1350px) and (max-width: 1600px){
    .section-3 .content h2{
        max-width: 350px;
    }
}

.section-4 .swiper-button-next:after,
.section-4 .swiper-button-prev:after{
    background-image: url('https://womenforwomeninternational.de/wp-content/uploads/2024/01/arrow-slider-homepage.svg') !important;
    background-size: contain; /* or cover, depending on how you want to display it */
    background-repeat: no-repeat;
    width: 100px; /* Set a specific width */
    height: 100px; /* Set a specific height */
    content: '' !important;
}

.section-4 .swiper-button-prev:after{
    transform: scaleX(-1);
}