/* --- HERO SECTION --- */
.hero-section{
    /*padding-top: 85px;
    background-image: url('../../img/hero-home-bg.png');
    min-height:1302px;
    background-size: cover;
    background-position:center;
    background-color: transparent;
    min-height:1080px;*/ /* v1 */

    /*background-image: url('../../img/hero-home-bg-v2.png');*/
    height:980px;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:#fff;
}

.hero-section .container{
    padding-top:0;
}


.hero-section .hero-box{
    gap:0;
    flex-direction: column;
    align-items: center;
    justify-content: unset;
}

.hero-section .hero-image-home{
    width: 386px;
    height:auto;
}

.hero-section .hero-content{
    max-width:100%;
}

.hero-section h1{
    font-size:100px;
    line-height:1;
    text-align:center;
}

.hero-section .hero-content .hero-title{
    margin-top:20px;
    margin-bottom:50px;
}

.hero-section .hero-content .hero-title .titre-2{
    font-size:50px;
    display: block;
}

.hero-section .hero-content .hero-description{
    margin-left: 85px;
    margin-bottom:30px;
}

.hero-section .hero-content .hero-buttons .btn:nth-child(2) {
    /*border: 1px solid var(--color-blue);*/
    /*background-color: transparent;*/
}

.hero-section .hero-image-home{
    display:block;
}

.hero-section .hero-image img{
    display:none;
}

.hero-section .hero-buttons{
    height:auto;
    justify-content:center;
}

#design-hero1{
    display:block;
    position:absolute;
    left: 55px;
    bottom: -165px;
    width: 331px;
    height: auto;
}

#design-hero2{
    display:block;
    position:absolute;
    right: -120px;
    bottom: -275px;
    width: 567px;
    height: auto;
}

@media screen and (min-width: 1920px) {
    .hero-section{
        /*background-size: 100% 1302px;*/ /* v1 */
        background-size: 100% 980px;
    }
}

@media screen and (max-width: 1600px) {
    .hero-section{
        height: 925px;
        padding-top: 115px;
    }

    .hero-section .hero-content{
        margin-top: 0;
    }

    .hero-section .hero-image img{
        min-width: 680px;
        width: 100%;
        top: 0;
        margin-left:-60px;
    }

    #design-hero1, #design-hero2{
        display:none;
    }
}

@media screen and (max-width: 1400px) {
    .hero-section .hero-image img{
        margin-left:-100px;
    }
}

@media screen and (max-width: 1279px) {
    .hero-section{
        min-height:unset;
        height:unset;
    }

    .hero-section{
        background-image: none;
        background-color:var(--color-white);
    }

    .hero-section .hero-content .hero-title .titre-2{
        margin-left: 0;
    }

    .hero-section .hero-content .hero-description{
        margin-left: 0;
    }

    .hero-section .hero-image img{
        margin-left:0;
        width: 600px;
        min-width: 600px;
    }
}

@media (max-width: 992px) {
    .hero-section h1 {
        font-size: 80px;
    }
}

@media screen and (max-width: 800px) {
    .hero-section .hero-image img{
        width: 400px;
        min-width: 400px;
        margin-bottom: -75px;
    }
}

@media screen and (max-width: 575px) {
    .hero-section h1 {
        font-size: 45px;
    }

    .hero-section .hero-content .hero-title .titre-2{
        font-size:40px;
        display: block;
    }

    .hero-section .hero-image img{
        margin-bottom: -67px;
    }

    .hero-section .hero-image-home {
        width: 300px;
    }
}


/* --- COLOR BLOCK SECTION --- */
.color-block-section{
    /*margin-top: -275px;*/ /* v1 */
    z-index: -1;
    position: relative;
}

@media screen and (max-width: 1279px) {
    .color-block-section{
        margin-top: 0px;
        z-index: 0;
    }
}


/* Projet recherche */
.regular-section{
    background-image: url('/wp-content/themes/sante-reproductive/img/bg-section.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

/* Evenements */
.normal-section{
    background-image: url('/wp-content/themes/sante-reproductive/img/bg-section-2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
}

.normal-section .normal-box{
    gap:50px
}

.normal-section .normal-content{
    width:50%;
}

.normal-section .normal-image{
    width:50%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
}

.normal-section .normal-image > :first-child {
    max-width:330px;
}

.normal-section .normal-image > :nth-child(2) {
    max-width:330px;
    top:100px;
    position:relative;
}

.normal-section .normal-image > :nth-child(3) {
    max-width:231px;
    left: 120px;
    position: relative;
}

@media screen and (max-width: 1400px) {
    .normal-section .normal-image > :first-child {
        max-width:250px;
    }

    .normal-section .normal-image > :nth-child(2) {
        max-width:250px;
        top:30px;
        position:relative;
    }

    .normal-section .normal-image > :nth-child(3) {
        max-width:231px;
        left: 120px;
        position: relative;
    }
}

@media screen and (max-width: 1150px) {
    .normal-section .normal-image > :first-child {
        max-width:200px;
    }

    .normal-section .normal-image > :nth-child(2) {
        max-width:200px;
        top:30px;
        position:relative;
    }

    .normal-section .normal-image > :nth-child(3) {
        max-width:180px;
        left: 120px;
        position: relative;
    }
}

@media screen and (max-width: 992px) {
    .normal-section .normal-box .normal-image {
        justify-content: center;
    }

    .normal-section .normal-image > :first-child {
        max-width:200px;
    }

    .normal-section .normal-image > :nth-child(2) {
        max-width:200px;
        top:0px;
        position:relative;
    }

    .normal-section .normal-image > :nth-child(3) {
        max-width:180px;
        left: 0px;
        position: relative;
    }
}