/*======================================
      DARA AFFILIATION
      STYLE.CSS PREMIUM
======================================*/


/* GOOGLE FONT */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');



/*======================================
              RESET
======================================*/


*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

    font-family:'Poppins',sans-serif;

    background:
    radial-gradient(
        circle at top left,
        rgba(0,140,255,.18),
        transparent 35%
    ),

    radial-gradient(
        circle at bottom right,
        rgba(0,198,255,.12),
        transparent 30%
    ),

    #050914;

    color:#ffffff;

    overflow-x:hidden;

}



/*======================================
              VARIABLES
======================================*/


:root{


    --primary:#008cff;

    --secondary:#00c6ff;

    --dark:#050914;

    --dark2:#0c1427;

    --white:#ffffff;

    --text:#b8c5d8;

    --radius:20px;

    --transition:.4s ease;


}





/*======================================
              CONTAINER
======================================*/


.container{

    width:90%;

    max-width:1300px;

    margin:auto;

}





/*======================================
              IMAGES
======================================*/


img{

    max-width:100%;

    display:block;

}





/*======================================
              LIENS
======================================*/


a{

    text-decoration:none;

    color:inherit;

}





ul{

    list-style:none;

}





/*======================================
          BACKGROUND LUMINEUX
======================================*/


body::before{


    content:"";


    position:fixed;


    top:-250px;


    left:-250px;


    width:500px;


    height:500px;


    background:#008cff;


    filter:blur(180px);


    opacity:.18;


    pointer-events:none;


    z-index:-2;


}





body::after{


    content:"";


    position:fixed;


    bottom:-250px;


    right:-250px;


    width:500px;


    height:500px;


    background:#00c6ff;


    filter:blur(180px);


    opacity:.15;


    pointer-events:none;


    z-index:-2;


}






/*======================================
          TITRES SECTIONS
======================================*/


.section-header{


    text-align:center;


    max-width:800px;


    margin:0 auto 70px;


}



.section-header span{


    color:var(--secondary);


    font-size:14px;


    font-weight:600;


    letter-spacing:3px;


    text-transform:uppercase;


}



.section-header h2{


    font-size:42px;


    margin:15px 0;


    color:white;


    font-weight:700;


}



.section-header h2 strong{


    color:var(--primary);


}



.section-header p{


    color:var(--text);


    font-size:17px;


    line-height:1.8;


}





/*======================================
              BOUTON
======================================*/


.btn{


    display:inline-block;


    padding:15px 35px;


    border-radius:50px;


    background:linear-gradient(

        135deg,

        var(--primary),

        var(--secondary)

    );


    color:white;


    font-weight:600;


    transition:var(--transition);


    box-shadow:

    0 10px 30px rgba(0,140,255,.35);


}



.btn:hover{


    transform:translateY(-5px);


    box-shadow:

    0 18px 40px rgba(0,140,255,.5);


}






/*======================================
          BOUTON OUTLINE
======================================*/


.btn-outline{


    display:inline-block;


    padding:15px 35px;


    border-radius:50px;


    border:2px solid var(--primary);


    color:white;


    transition:.4s;


}



.btn-outline:hover{


    background:var(--primary);


    transform:translateY(-5px);


}






/*======================================
          ANIMATIONS
======================================*/


.fade-up{


    opacity:0;


    transform:translateY(60px);


    animation:fadeUp 1s forwards;


}



@keyframes fadeUp{


    from{


        opacity:0;


        transform:translateY(60px);


    }



    to{


        opacity:1;


        transform:translateY(0);


    }


}






/*======================================
          SCROLLBAR PREMIUM
======================================*/


::-webkit-scrollbar{

    width:8px;

}


::-webkit-scrollbar-track{

    background:#050914;

}


::-webkit-scrollbar-thumb{


    background:linear-gradient(
        #0066ff,
        #00c6ff
    );


    border-radius:20px;

}





/*======================================
          SECTIONS
======================================*/


section{

    position:relative;

}





/*======================================
          SELECTION TEXTE
======================================*/


::selection{


    background:#008cff;


    color:white;


}

/* DARA AFFILIATION - Opportunity spacing fix */
#opportunite,
#opportunity,
.opportunite,
.opportunity{
    padding-top:56px !important;
    padding-bottom:56px !important;
}

#opportunite .container,
#opportunity .container,
.opportunite .container,
.opportunity .container{
    row-gap:20px !important;
}

#opportunite .card,
#opportunity .card,
.opportunite .card,
.opportunity .card{
    margin-bottom:16px !important;
}

@media (max-width:768px){
    #opportunite,
    #opportunity,
    .opportunite,
    .opportunity{
        padding-top:40px !important;
        padding-bottom:40px !important;
    }
}