:root {
    --color1: #2ECC71;
    --color2: #165516;
    --color3: #d6f8f6;
    --color4: #F6AA1C;

    
    
}

* {
    outline: none !important;
}

body {  
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
}

header {
    position: relative;
}

.paysage {
    width:70%;
    margin:20px;
}

header .container {
    position: relative;
    z-index: 1;
}

.bg-header {
    position: absolute;
    background-image: url(images/businessman-touch-cloud-computing-icon-network-cloud-technology-cloud-data-transfer.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 624px;
}

#logo {
    margin-top: 40px;
    width:230px;
}



h1 {
    font-family: 'Barlow', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size:38px;
    line-height: 64px;
    text-transform: uppercase;
    color: #F6AA1C;
    background-color: #fff;
    padding: 10px;
    margin-top: 22px;
    margin-bottom:0px;
    border-radius: 5px;
}

h2 {
    font-family: 'Barlow', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 42px;
    line-height: 50px;
}

h3 {
    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
}
h4 {
    font-family: 'Barlow', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size:33px;
    line-height: 64px;
    text-transform: uppercase;
    color: #ffffff;
    background-color: #F6AA1C;
    margin-top: 22px;
    margin-bottom:0px;
    border-radius: 5px;
}
.btn-get-started {
font-weight: 700;
cursor: pointer;
display: block;
border: 0;
border-radius: 10px;
padding: 25px 70px;
color: #fff;
text-transform: uppercase;
background: var(--color1);
box-shadow: 0px 3px 4px 1px rgba(0,0,0,0.2);

transition: all ease-in-out 0.25s;
text-decoration: none; /* Ajoutez cette ligne pour supprimer la soulignement */

}

/* Style pour la liste et les icônes */
ul {
    list-style-type: none; /* Enlève les puces par défaut */
    padding-left: 0;
    margin: 20px 0;
}

ul li {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}

ul li i {
    color: #2ECC71; /* Couleur de l'icône, changez selon vos besoins */
    margin-right: 10px;
}

/* Style pour l'icône */
.fa-solid.fa-check {
    font-size: 16px; /* Taille de l'icône */
}

  
.btn-get-started:hover {
background: #fff;
color: #6A4C93;
border:2px solid #6A4C93;
}
.container {
    max-width: 1024px !important;
}

#scroll_iframe {
    width: 750px;
    margin-top: 50px;
}

.img-fluid2 {
    max-width:62%;
    margin-top:100px;
    padding-right:50px;
}

#edi_iframe_form {
    width: 100%;
    border: 0;
}

.wrap-avantages {
    margin-top: 0px;
}

.wrap-avantages .fond {
    padding: 20px;
    background: #fff;
    width: 435px;
    border-radius: 20px;
    margin: 10px;
    text-align: center;
    height: 420px;
    box-shadow: 0px 2px 12px 2px rgb(0 0 0 / 15%);
}

.txt-picto {
    margin-top: 20px;
    font-size: 18px;
    line-height: 18px;
}

.wrap-picto {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.bg-gradient-top {
    background: rgb(232,255,155);
    background: #F6F6F6;
}

.bg-gradient-bottom {
    padding-bottom: 0px;
}

.encart {
    display: inline-block;
    padding: 16px 22px;
    font-weight: bold;
    background: #FF3E17;
    color: #fff;
    border-radius: 8px;
    margin: 40px 0;
}

.position-relative {
    overflow: hidden;
}

.element {
    position: absolute;
}

.element-1 { top: 650; right: 1640px; width:100px;}
.element-2 { top: 1350px; right: 810px; width:80px; }
.element-3 { top: 0; left: -109px; }
.element-4 { top: 0; right: -50px; }
.element-5 { top: 0; left: -109px; }
.element-6 { top: 80px; left: -120px; }
.element-7 { bottom: 0; right:0; }

.z-index-1 { position: relative; z-index:1;  }

.wrap-paris-prix {
    position: relative;
    padding: 60px 0 80px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.wrap-paris-prix .bloc {
    padding: 0 2% 30px 2%;
    max-width: 302px;
    flex: 1;
    box-sizing: border-box;
    background: #e4f5f3;
    font-size: 15px;
    line-height: 18px;
    margin: 0 15px;
    border-radius: 10px;
    z-index: 1;
}

.wrap-paris-prix .bloc-1 { margin-top: 85px; }
.wrap-paris-prix .bloc-3 { margin-top: 45px; }
.wrap-paris-prix .bloc-4 { margin-top: 15px; }

.wrap-paris-prix .bloc img {
    border-radius: 10px;
    position: relative;
    top: -20px;
    width: 100%;
}

footer {
    background: #ECECEC;
    font-size: 9px;
    line-height: 16px;
    text-align: center;
    font-weight: bold;
    padding: 15px 10px;
}

footer a, footer a:hover {
    color: #424242;
}

@media (min-width: 992px) {

    #ctamobile {
    display:none;
}

}


/*** viewport < 992px ***/
@media (max-width: 992px) {

    h1 {
        font-size: 30px;
        line-height: 40px;
    }

    .paysage {
        display:none;
    }

    h2 {
        font-size: 26px;
        line-height: 26px;
        padding-top:15px;
    }

    h3 {
        font-size: 20px;
        line-height: 26px;
    }

    .img-fluid {
        display:none;
    }

    .element-2 {
        display:none;
    }

    #scroll_iframe {
        width: 100%;
    }

    .wrap-avantages .fond {
        padding: 23px 10px;
        width: 100%;
        margin: 0px;
    }

    .wrap-paris-prix {
        flex-wrap: wrap;
        align-items: stretch;
        padding-bottom: 0;
    }

    .wrap-paris-prix .bloc-1 { margin-top: 0; }
    .wrap-paris-prix .bloc-3 { margin-top: 0; }
    .wrap-paris-prix .bloc-4 { margin-top: 0; }

    .wrap-paris-prix > .bloc {
        flex: 50%;
        margin-bottom: 50px;
    }

}

/*** viewport < 768px ***/
@media (max-width: 768px) {

    .wrap-avantages .fond {
        height: auto;
    }

    .wrap-paris-prix > .bloc {
        flex: 40%;
        margin-left: 5px;
        margin-right: 5px;
        margin-bottom: 40px;
    }

    .wrap-avantages {
        margin-top: 0px;
        margin: 0px 5px;
    }

    .bg-gradient-bottom {
        padding-bottom: 0px;
    }
}

/*** viewport < 576px ***/
@media (max-width: 576px) {

    body {
        font-size: 14px;
    }



    h1 {
        font-size: 22px;
        line-height: 34px;
        padding: 5px;
    }


    h4 {
        font-size: 22px;
        line-height: 34px;
       
    }

    .wrap-paris-prix > .bloc {
        flex: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 0 20px 20px 20px;
    }

    button {
        padding: 25px;
        width: 100%;
    }

    #logo {
    margin-top: 40px;
}

.btn-get-started {

font-size: 15px;
}
}