.first-section {
    position: relative;
    height: calc(100vh - 144px);
}

.first-section-img {
    width: 100vw;
    height:auto; 
    z-index: 25;
    position: absolute;
    bottom: 0px;
    left: 0px;
}

.first-section-gradient {
    background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 80%);
    width: 100vw;
    height: calc(100vh - 144px);
    position: absolute;
    top: -1px;
    left: 0px;
    z-index: 26;
}

.first-section-container {
    position: relative;
    z-index: 27;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 40%;
    margin-left: 30%;
    margin-right: 30%;
}

.first-section-container > .mega-title {
    color: var(--color2);
    text-align: center;
    margin-bottom: 3vh;
    margin-top: 15vh;
    font-family: "AbhayaLibre-Regular";

    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation-delay: 0.5s;
}

.first-section-container > .button-normal-white {
    margin-bottom: 2vh;
    height: 50px;
    width: 260px;

    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation-delay: 1s;
}

.first-section-container > .button-normal-black{
    margin-bottom: 2vh;
    height: 50px;
    width: 260px;

    -webkit-animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
	animation: fade-in 1.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation-delay: 1.5s;
}

.deco-first-section-container1 {
    position: absolute;
    top: 100px;
    left: 0px;
    z-index: 50;
}

.deco-first-section-container2 {
    position: absolute;
    bottom: -7px;
    right: calc(10vw - 16px);
    z-index: 50;
}

.deco-first-section1-path {
    stroke-dasharray: 600;
    animation: dash 4s ease-in forwards;
}

.deco-first-section2-path {
    stroke-dasharray: 600;
    animation: dash 4s ease-in forwards;
}

@-webkit-keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
@keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
}
  

@keyframes dash {
    from {
        stroke-dashoffset: 600;
      }
    to {
      stroke-dashoffset: 0;
    }
}

/* ECRAN 2K */
@media screen and (min-width: 2500px) and (min-height: 1400px) {
    .first-section-container > .button-normal-black{
        margin-bottom: 3vh;
        height: 75px;
        width: 350px;
    }
    .first-section-container > .button-normal-white{
        margin-bottom: 3vh;
        height: 75px;
        width: 350px;
    }
    .deco-first-section-container2 {
        position: absolute;
        bottom: -7px;
        right: 242px;
        z-index: 50;
    }
}

/* ECRAN 4K */
@media screen and (min-width: 3500px) and (min-height: 2000px) {
    .first-section-container > .button-normal-black{
        margin-bottom: 3.5vh;
        height: 100px;
        width: 450px;
    }
    .first-section-container > .button-normal-white{
        margin-bottom: 3.5vh;
        height: 100px;
        width: 450px;
    }
}

/* ECRAN +1920x1080 */
@media screen and (max-width: 1920px) and (max-height: 1080px) {

}

/* ECRAN 17 pouces large */
@media screen and (max-width: 1680px) and (max-height: 1100px) {

}

/* ECRAN 13 à 15 pouces standard */
@media screen and (max-width: 1400px) and (max-height: 1050px) {
    .first-section-img {
        width: auto;
        height: 100vw; 
    }
}


/* TRES GRAND MOBILE 1050x1370 */
@media screen and (max-width: 1050px ) and (max-height: 1370px ) {
    .first-section-img {
        width: auto;
        height: 100vh; 
        z-index: 25;
        position: absolute;
        bottom: 0px;
        left: 0px;
    }
    .deco-first-section-container1 {
        display: none;
    }
    
    .deco-first-section-container2 {
        display: none;
    }
    .first-section-container {
        position: relative;
        z-index: 27;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
}

/* GRAND MOBILE 500x900 */
@media screen and (max-width: 500px ) and (max-height: 1000px ) {
    .section-content-right-horiz {
        display: none;
    }
}

/* MOYEN petit 700 */
@media screen and (max-width: 400px ) and (max-height: 750px ) {

}