:root{
    --white: #FFFFFF;
    --dark-grey: #1C1A16DD;
    --alpha-white: #24211D00;
    --dark-blue: #0C2A65;
    --alpha-grey: #0000005D;
    --blue: #255AC6;
    --yellow: #FEBE55;
    --grey: #707070;
    --red: #E40E37;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Light.otf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Regular.otf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Italic.otf") format("truetype");
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Bold.otf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-BoldItalic.otf") format("truetype");
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-Black.otf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: "Poppins";
    src: url("../fonts/Poppins-BlackItalic.otf") format("truetype");
    font-weight: 900;
    font-style: italic;
}

.btn-red{
    background-color: var(--red);
    color: #ffffff;
    font-size: 22px;
    line-height: 1.2;
    padding: 12px 40px;
}

.btn-red:hover{
    color: #ffffff;
    background-color: #cb0b30;
}
.bg-yellow{background-color: var(--yellow);}
.bg-blue{background-color: var(--blue);}
.bg-dark-blue{background-color: var(--dark-blue);}
.text-dark-blue{color: var(--dark-blue);}

body{
    font-size: 17.5px;
    font-family: "Poppins", sans-serif;
    line-height: 1.3;
}

.fs-15{font-size: 15px}
.fs-18{font-size: 18px}
.fs-21{font-size: 21px}
.fw-black{font-weight: 900;}

/*.container{max-width: 1140px;}*/

@media screen and (min-width: 768px) {
    /*.btn-red{font-size: 28px;}*/
}
@media screen and (min-width: 991px) {

}
@media screen and (min-width: 1200px) {
    /*.head .container{max-width: 1840px;}*/
    /*.container{max-width: calc(1840px - (80px + 80px));}*/
}

@media screen and (min-width: 1600px) {
    .head .container{max-width: 1540px;}
    .container{max-width: calc(1540px - (80px + 80px));}
}

@media screen and (min-width: 1900px) {
    .head .container{
        max-width: 1840px;
    }
    .container{
        max-width: calc(1840px - (80px + 80px));
    }
}

/* HEAD */
section.head{
    background-image: linear-gradient(to right, #1C1A16DD, #24211D00 100%), url(../img/head-bg-mobile.jpg);
    background-size: cover;
    background-position: center;
}
.head .container {
    padding-top: 290px;
    padding-bottom: 50px;
}
.head .logo{
    height: 110px;
    background-color: white;
    box-shadow: 0px 3px 6px #00000029;
    top: 0;
}
.head h1{
    font-weight: bold;
    line-height: 1;
    font-size: 40px;
}
.head .subtitle{
    font-size: 25px;
    font-weight: 500;
}
@media screen and (min-width: 768px){
    .head .container {
        padding-top: 415px;
        padding-bottom: 85px;
    }
    .head .logo{height: 167px;}
    .head h1{font-size: 58px;}
    .head .subtitle{font-size: 30px;}
}
@media screen and (max-width: 990px){
    .head .position-fixed{
        bottom: 0;
        left: 0;
        border-radius: 0!important;
        right: 0;
        border: 0;
        top: auto;
        padding: 22px 40px;
    }
}
@media screen and (min-width: 991px){
    .head .position-fixed{
        top: 20px;
        right: calc((100vw - 1140px) / 2);
    }
    .head .container{
        padding-top: 237px;
        padding-bottom: 255px;
    }
    section.head{background-image: linear-gradient(to right, #1C1A16DD, #24211D00 60%), url(../img/head-bg.jpg);}
    .head .row{padding: 0 80px;}
    .head h1{font-size: 78px;}
    .head .subtitle{font-size: 36px;}
}

@media screen and (min-width: 1400px){
    .head .position-fixed{
        right: calc((100vw - 1320px) / 2);
    }
}

@media screen and (min-width: 1600px){
    .head .position-fixed{
        right: calc((100vw - 1540px) / 2);
    }
}

@media screen and (min-width: 1900px){
    .head .position-fixed{right: calc((100vw - 1840px) / 2);}
}

/* INTRO */
.intro {
    padding-bottom: 30px;
    font-size: 16px;
    margin-top: 50px;
}
.intro  .bg-dark-blue{
    margin-bottom: 40px;
    box-shadow: 10px 13px 16px #0000005D;
    border-radius: 0px 40px 50px 50px;
    padding-top: 35px;
    font-size: 16px;
}
.intro .bg-dark-blue> *:not(.bg-blue) {padding: 0 16px;}
.intro .bg-blue{
    padding: 24px 16px 24px;
    font-size: 18px;
}
.intro h2 {font-size: 22px;}
.intro .bg-blue{border-radius: 0px 40px 40px 40px;}

@media screen and (min-width: 768px) {
    .intro{
        padding-bottom: 34px;
        margin-top: 40px;
        font-size: 24px;
    }
    .intro .bg-dark-blue{
        margin-bottom: 57px;
        border-radius: 0px 70px 80px 80px;
        font-size: 24px;
    }
    .intro .bg-blue{border-radius: 0px 70px 70px 70px;}
    .intro .bg-dark-blue> *:not(.bg-blue){padding: 0 42px;}
    .intro h2{font-size: 34px;}
    .intro .bg-blue{
        padding: 24px 42px 30px;
        font-size: 24px;
    }
}

@media screen and (min-width: 991px) {
    .intro{
        padding-bottom: 74px;
        margin-top: -143px;
    }
    .intro .bg-dark-blue{
        margin-bottom: 97px;
    }
    .intro .holder {padding: 0 132px;}
    .intro h2{font-size: 44px;}
    .intro .bg-dark-blue> *:not(.bg-blue){padding: 0 92px;}
    .intro .bg-blue{
        padding: 27px 92px 41px;
        font-size: 30px;
    }
}

/* BG LIGHT GREEN */
section.bg-light-green{padding: 73px 0 50px;}

/* YELLOW */
section.bg-yellow{
    padding-top: 40px;
    padding-bottom: 40px;
    color: var(--dark-blue);
    font-size: 16px;
}

section.bg-yellow h2,
section.bg-yellow h2+p{font-size: 24px;}
section.bg-yellow .lead{
    color: var(--blue);
    font-size: 18px;
    margin-top: 18px;
}
section.bg-yellow div.bg-white {
    padding: 24px 16px 16px 16px;
    border-radius: 0px 40px 40px 40px;
}
section.bg-yellow h2.chart-title {
    margin-top: 50px;
    margin-bottom: 28px;
}

@media screen and (min-width: 768px) {
    section.bg-yellow{
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 24px;
    }
    section.bg-yellow h2,
    section.bg-yellow h2+p{
        font-size: 34px;
    }
    section.bg-yellow .lead{
        color: var(--blue);
        font-size: 34px;
        margin-top: 38px;
    }
    section.bg-yellow div.bg-white{
        padding: 34px 17px 33px 35px;
        border-radius: 0px 81px 81px 81px;
    }
    section.bg-yellow h2.chart-title{
        margin-top: 50px;
        margin-bottom: 38px;
    }
}

@media screen and (min-width: 991px) {
    section.bg-yellow{
        padding-top: 100px;
        padding-bottom: 100px;
    }
    section.bg-yellow h2,
    section.bg-yellow h2+p{
        font-size: 44px;
    }
    section.bg-yellow h2.chart-title{
        margin-top: 100px;
    }
}

/* TESTIMONIAL */
section.testimonial {
    padding-top: 47px;
    padding-bottom: 50px;
}
section.testimonial h2{
    font-size: 24px;
    margin-bottom: 47px;
}
section.testimonial .chevron{
    font-size: 54px;
    color: var(--red);
    font-weight: bold;
    margin-right: 14px;
    line-height: .4;
}
section.testimonial .text{
    font-size: 18px;
    line-height: 1.6;
}
section.testimonial .text-end{
    font-size: 16px;
    margin-right: 16px;
}
section.testimonial img{
    height: 100px;
    box-shadow: 5px 5px var(--blue);
    border-radius: 100px;
}

@media screen and (min-width: 768px){
    section.testimonial h2{font-size: 34px;}
    section.testimonial{padding-top: 77px;}
    section.testimonial .text{font-size: 24px;}
    section.testimonial .text-end{
        font-size: 24px;
        margin-right: 29px;
    }
    section.testimonial img{height: 200px;}
    section.testimonial .chevron{
        font-size: 84px;
        margin-right: 24px;
    }
}

@media screen and (min-width: 991px){
    section.testimonial h2{font-size: 44px;}
    section.testimonial .text{font-size: 28px;}
}

/* PHOTO */
section.photo{
    background-image: url("../img/groupe.jpg");
    background-size: 350%;
    background-position: center 48%;
    height: 290px;
}

@media screen and (min-width: 768px) {
    section.photo{
        background-size: cover;
        background-position: center;
        height: 590px;
    }
}
/* CHART */
section.chart{
    padding: 60px 0 50px;
}
section.chart .img-holder{margin-top: 40px;}
section.chart .img-holder p{
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    line-height: .7;
}
section.chart .img-holder p span{
    font-size: 18px;
}
section.chart img{
    height: 100px;
}

/* FOOTER */
footer{
    padding-top: 16px;
    padding-bottom: 80px;
    font-size: 16px;
}
footer h2{
    margin-top: 24px;
    font-size: 24px;
}
footer .logo{
    height: 120px;
    margin: 0 auto;
    display: block;
}
footer .bg-dark-blue{
    padding: 16px 24px;
    border-radius: 0px 40px 40px 40px;
}
footer img.contact{
    height: 150px;
    box-shadow: 5px 5px var(--blue);
    border-radius: 140px;
}
footer .terms{
    text-decoration: none;
    color: var(--dark-blue);
}
footer .social{
    height: 47px;
}

@media screen and (min-width: 768px) {
    footer {
        padding-top: 29px;
        padding-bottom: 100px;
        font-size: 24px;
    }
    footer .logo{
        height: 170px;
    }
    footer h2{
        margin-top: 0;
        font-size: 34px;
    }
    footer .bg-dark-blue {
        padding: 54px 32px 59px 55px;
        border-radius: 0px 81px 81px 81px;
    }
    footer img.contact{
        height: 240px;
        margin-right: 38px;
    }
}

@media screen and (min-width: 991px) {
    footer h2{font-size: 44px;}
    footer {padding-bottom: 60px;}
    footer .logo{margin: 0;}
}