#sec-2{
    display: flex;
    height: auto;
    min-height: auto;
    padding: 3% 6%;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg1);
}
#sec-3{
    display: flex;
    height: auto;
    padding: 3% 6%;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg2);
}
#sec-4{
    display: flex;
    min-height: auto;
    height: auto;
    padding: 3% 6%;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg1);
}
#sec-5{
    display: flex;
    min-height: auto;
    height: auto;
    padding: 3% 6%;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg2);
}
#sec-6{
    display: flex;
    height: auto;
    min-height: auto;
    padding: 3% 6%;
    justify-content: center;
    align-items: center;
    background-color: var(--color-bg1);
}

a{
    text-decoration: none;
}
h3{
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem; /* 120% */
    letter-spacing: -0.05rem;
    background: linear-gradient(90deg, #FF0000, #8F00FF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.cat_p{
    color: var(--color1);
  
    /* Heading Details/Small */
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5rem; /* 171.429% */
    letter-spacing: 0.07rem;
    text-transform: uppercase;
}

/* ----- SECTION 2 ----- */
.sec2-frame{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    flex-shrink: 0;
}
.sec2-text{
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    align-self: stretch;
}
.sec2-text-titre{
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.sec2-text-info{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2rem;
    width: 50%;
    flex: 1 0 0;
}  
.sec2-box{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    flex-wrap: wrap;
    gap: 2rem;
}
.sec2-boite{
    height: 26rem;
    width: 35rem;
    min-width: 25rem;
    display: flex;
    padding: 2.5rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 2.5rem;
    flex: 1 0 0;
    border-radius: 0.75rem;
    background-color: var(--color-bg2);
}
.sec2-boite-header{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
}
.box-icon, .box-tag{
    display: flex;
    padding: 1rem;
    align-items: flex-start;
    gap: 0.625rem;
    border-radius: 0.5rem;
    background: var(--color-bg1);
    height: fit-content;
}
.box-tag{
    padding: 0.8rem 1.3rem;
    height: fit-content;
    border-radius: 3rem;
    background: var(--color4);
}
.box-icon p{
    color: var(--color4);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3.5rem; /* 116.667% */
    letter-spacing: -0.06rem;
}
.box-tag p{
    color: var(--color-bg1);
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: -0.02rem;
}
.box-text{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    align-self: stretch;
}
.sec2-boite h4{
    color: var(--color2);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.5rem; /* 125% */
    letter-spacing: -0.04rem;
}
.box-text p{
    color: var(--color4);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 2rem; /* 177.778% */
    letter-spacing: -0.0225rem;
}
.des_p{
    color: var(--color-text1);
}
  
/*.sec2-boite:hover{
    background: linear-gradient(90deg, #FF0000, #8F00FF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    border: 2px solid var(--color3);
}*/


/* ----- SECTION 3 ----- */
.sec3-frame{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    flex-shrink: 0;
}
.sec3-text{
    display: flex;
    align-items: flex-start;
    gap: 8.625rem;
    align-self: stretch;
}
.sec3-text-titre{
    display: flex;
    width: 35.1875rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
.sec3-box{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    gap: 2rem;
}
.sec3-boite{
    display: flex;
    width: 50%;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.8125rem;
}
/*.sec3-boite img{
    height: 21.25rem;
    width: auto;
    align-self: stretch;
    border-radius: 0.5rem;
    background:  lightgray 50% / cover no-repeat;
}
 Zoom In #1 */
figure {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow: hidden;
    height: 21.25rem;
    align-self: stretch;
    border-radius: 0.5rem;
}
figure:hover+span {
	bottom: -36px;
	opacity: 1;
}
.sec3-boite figure img {
    width: 100%;
    height: 21.25rem;
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
    background:  lightgray 50% / cover no-repeat;
    object-fit: cover;
}
.sec3-boite figure:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}
.sec3-boite h4{
    color: var(--color2);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.5rem; /* 125% */
    letter-spacing: -0.04rem;
}
.sec3-boite-date{
    color: var(--color4);
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem; /* 150% */
    letter-spacing: -0.03rem;
}
.sec3-boite-bt{
    display: flex;
    flex-direction: row;
    gap: 0.8rem;
}

/* ----- SECTION 4 ----- */
.sec4-frame{
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    flex-shrink: 0;
}
.sec4-text{
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.sec4-text h3{
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem; /* 120% */
    letter-spacing: -0.05rem;
    background: linear-gradient(90deg, #FF0000, #8F00FF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    text-align: center;
}
.sec4-text-bt{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}


/* ----- SECTION 5 ----- */
.sec5-frame{
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 3rem;
    flex-shrink: 0;
}
.sec5-text{
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.sec5-text h3{
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem; /* 120% */
    letter-spacing: -0.05rem;
    background: linear-gradient(90deg, #FF0000, #8F00FF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    text-align: center;
}



/* ----- SECTION 6 ----- */
.sec6-frame{
    display: flex;
    width: 100%;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 3rem;
    flex-shrink: 0;
}
.sec6-text{
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-content: center;
    flex-wrap: wrap;
    justify-content: center;
}
.sec6-text h3{
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem; /* 120% */
    letter-spacing: -0.05rem;
    background: linear-gradient(90deg, #FF0000, #8F00FF);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
}
.sec6-img{
    width: 60rem;
    height: 30rem;
    border-radius: 15px;
    overflow: hidden;
}
.sec6-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media screen and (max-width: 700px) {
    section{
        padding: 6% 6% !important;
    }
    .sec2-boite {
        height: auto;
        min-width: auto;
    }
    .sec2-text{
        flex-direction: column;
    }
    .sec2-text-titre{
        width: 100%;
    }
    .sec2-text-info{
        width: 100%;
    }


    .sec3-box{
        flex-direction: column;
        gap: 3rem;
    }
    .sec3-boite{
        width: 100%;
        gap: 1rem;
    }

    #sec-4, #sec-5{
        height: auto;
        min-height: auto;
    }

    .sec4-text-bt{
        flex-direction: column;
    }

    .sec6-frame{
        flex-direction: column;
    }
    .sec6-text{
        align-items: center;
        width: 100%;
    }
    h3{
        text-align: left !important;
        width: 100%;
    }
    .sec6-img{
        width: 100%;
    }
}