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

:root{

    --primary:#1E63E9;
    --primary-dark:#174FC0;
    --secondary:#F5F9FF;

    --text:#1E293B;
    --text-light:#64748B;

    --white:#FFFFFF;

    --border:#E5E7EB;

    --shadow:0 15px 45px rgba(15,23,42,.08);

    --radius:22px;

    --transition:.35s ease;

}

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

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

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

    font-size:16px;

    color:var(--text);

    background:#fff;

    line-height:1.7;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

    height:auto;

}

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

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

.container{

    width:100%;

    max-width:1280px;

    margin:auto;

    padding:0 25px;

}

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

section{

    padding:110px 0;

}

.section-header{

    max-width:760px;

    margin:0 auto 70px;

    text-align:center;

}

/*
====================================================
BADGE
====================================================
*/

.section-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:999px;

    border:2px solid rgba(30,99,233,.15);

    background:#F7FAFF;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    margin-bottom:22px;

}

.section-badge i{

    font-size:14px;

}

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

.section-title{

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

    color:var(--text);

}

.section-title span{

    color:var(--primary);

}

.section-description{

    font-size:18px;

    color:var(--text-light);

    max-width:700px;

    margin:auto;

}

/*
====================================================
BOUTONS
====================================================
*/

.btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

    background:var(--primary);

    color:#fff;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

    box-shadow:0 12px 30px rgba(30,99,233,.25);

}

.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-3px);

}

.btn-outline{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:17px 34px;

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

    color:var(--primary);

    background:#fff;

    border-radius:999px;

    font-weight:600;

    transition:var(--transition);

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}

/*
====================================================
CARDS
====================================================
*/

.card{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:35px;

    transition:var(--transition);

}

.card:hover{

    transform:translateY(-8px);

}

/*
====================================================
ICONS
====================================================
*/

.icon-circle{

    width:68px;

    height:68px;

    border-radius:50%;

    background:#EEF5FF;

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

}

/*
====================================================
RESPONSIVE
====================================================
*/

@media(max-width:992px){

    section{

        padding:90px 0;

    }

    .section-title{

        font-size:40px;

    }

}

@media(max-width:768px){

    .container{

        padding:0 20px;

    }

    .section-header{

        margin-bottom:50px;

    }

    .section-title{

        font-size:34px;

    }

    .section-description{

        font-size:16px;

    }

    .btn-primary,

    .btn-outline{

        width:100%;

    }

}

@media(max-width:576px){

    section{

        padding:70px 0;

    }

    .section-title{

        font-size:30px;

    }

}