:root {
--main-bg-color: #141414;
--logo-color: #ffdd00;
--logo-color-hover: #fbff00;
--second-color-hover: #147ec5;
--third-color: #fbff00;
--third-color-hover: #004370;
--default-text-color: #555555;
--prez-bg-color: #fdd000;
--first-bg-color: #ffffff;
--second-bg-color: #ebebeb;
--h1-color: #ffffff;
--first-color: #ffdd00;
--dark-text: #141414;
--header-bg-color: #3b3b3b;
--light-text: #ffffff;
}@import url(https://fonts.googleapis.com/css?family=Raleway:400,200,300,800);
    
    * {
        margin: 0;
        box-sizing: border-box;
    }
    
    
    html {
        font: normal 18px sans-serif;
        color: var(--dark-text);
    }
    
    .main-nav,
    .hero,
    .services,
    .descriptif,
    .footer,
    .hero-single {
        margin: 0 auto;
    }
    
    h2 {
        color: var(--dark-text);
        font-size: 50px;
        text-transform: capitalize;
        margin-bottom: 40px;
    }
    
    h3 {
        font-size: 20px;
        text-transform: capitalize;
    }
    
    ul, li, nav {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    li {
        font-size: 18px;
    }
    
    a {
        text-decoration: none;
        color: var(--logo-color);
        font-weight: 700;
        cursor: pointer;
        padding: 0;
        margin: 0;
    }
    
    a:hover {
        color: var(--logo-color-hover);
    }
    
    a.btn {
        color: #fff;
        border-radius: 15px;
        text-transform: uppercase;
        background-color: var(--logo-color);
        padding: 10px 30px;
        width: fit-content;
        text-align: center;
        font-weight: 700;
        opacity: 1;
        transition: 0.5s;
    }
    
    a.btn:hover {
        background-color: var(--logo-color-hover);
    }
    
    /* ***************************************************************** */
    
    header {
        width: 100%;
        display: flex;
        flex-direction: column;
        background-color: var(--main-bg-color);
    }
    
    .main-nav {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 50px 150px ;
        background-color: var(--header-bg-color);
    }
    
    .logo a {
        position: relative;
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 30px;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--logo-color);
        opacity: 1;
    }
    
    .logo a::after {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        content: "";
        background-color: var(--logo-color);
    }
    
    header nav {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    
    header nav li {
        position: relative;
        margin-left: 40px;
    }
    
    header nav li a:hover {
        color: var(--logo-color-hover);
    }
    
    header nav li .active::after {
        position: absolute;
        margin-bottom: -5px;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 3px;
        content: "";
        background-color: var(--logo-color);
    }
    
    header nav .btn {
        padding: 20px 30px;
        color: var(--dark-text);
        background-color: var(--logo-color);
        font-size: 18px;
        
    }
    
    header nav .btn:hover {
        color: var(--dark-text);
        background-color: var(--logo-color-hover);
    }
    
    
    header nav .btn::before {
        position: relative;
        font-family: FontAwesome;
        content: '\f10b';
        font-size: 44px;
        vertical-align: middle;
        margin-right: 20px;
    }
    
    /* ********************************************************************* */
    .bg-hero {
        background-color: var(--main-bg-color);
    }
    
    .hero {
        display: flex;
        justify-content: space-between;
        height: auto;
        min-height: 70vh;
        width: 100%;
        padding: 150px 150px 150px 150px;
    }
    
    .hero .main-hero {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 50%;
    }
    
    .hero .main-hero h1 {
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 54px;
        color: var(--h1-color);
        text-transform: uppercase;
        margin-bottom: 0px;
        z-index: 100;
    }
    
    .hero .main-hero .baseline {
        position: relative;
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 30px;
        letter-spacing: 2px;
        color: var(--h1-color);
        font-weight: 900;
        text-transform: capitalize;
        margin-bottom: 100px;
        z-index: 100;
    }
    
    .hero .main-hero .baseline:before {
        position: absolute;
        margin-bottom: -30px;
        left: 0;
        bottom: 0;
        width: 30%;
        height: 4px;
        content: "";
        background-color: var(--first-color);
    }
    
    .hero .main-hero a.btn {
        background-color: transparent;
        border: 3px solid var(--first-color);
        color: var(--first-color);
        font-size: 20px;
        z-index: 10000000000;
    }
    
    .hero .main-hero a.btn:hover {
        color: var(--dark-text);
        background-color: var(--first-color);
        border: 3px solid var(--first-color);
        transition: 1s;
    }
    
    /* ****************************************************************** */
    
    .hero .topsvg {
        position: relative;
        width: 50%;
    }
    
    .hero .topsvg img {
        width: 50%;
        position: absolute;
        top: 50%;
        right: 0px;
        transform: translate(0%, -50%);
        border-radius: 10px;
        z-index: 10;
    }
    
    .hero .topsvg svg {
        width: 66%;
        position: absolute;
        top: 40%;
        right: 5px;
        transform: translate(0%, -50%);
        border-radius: 20px;
        z-index: 5;
    }
    
    .hero .presentation {
        position: absolute;
        top: 50%;
        right: 55%;
        width: 50%;
        background-color: var(--prez-bg-color);
        border-radius: 5px;
        padding: 20px;
        z-index: 100;
    }
    
    .hero .presentation .nom {
        font-size: 20px;
        font-weight: 600;
    }
    
    
    
    .hero .presentation .profession {
        font-size: 14px;
        font-weight: 500;
    }
    
    .hero .presentation p {
        font-size: 16px;
        margin-top: 20px;
    }
    
    
    /* ******************************************************************* */
    
    .bg1 {
        background-color: var(--first-bg-color);
    }
    
    .bg2 {
        background-color: var(--second-bg-color);
    }
    
    .container-3 {
        background-color: var(--main-bg-color);
        box-shadow: 0px -7px 4px 0px #d2d2d2;
    }
    
    /* ************************************************************************ */
    
    .services {
        padding: 100px 150px;
    }
    
    .services h2 {
        text-align: center;
    }
    
    .services p {
        text-align: center;
        max-width: 60%;
        margin: auto;
    }
    
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        margin-top: 50px;
    }
    
    .cards .card {
        max-width: 22%;
        text-align: center;
        background-color: var(--main-bg-color);
        border-radius: 20px;
        box-shadow: 0px 0px 20px 0px #353535;
    }
    
    .cards-4blocs .card {
        max-width: 48%;
        text-align: center;
        background-color: var(--main-bg-color);
        border-radius: 20px;
        box-shadow: 0px 0px 20px 0px #353535;
        margin-bottom: 100px;
    }
    
    .cards .card img {
        width: 70%;
        padding: 50px 30px;
        
    }
    
    .cards .card .text {
        color: var(--logo-color);
        background-color: var(--main-bg-color);
        margin-top: -4px;
        padding: 0px 5px 30px;
        border-radius: 0px 0px 20px 20px;
    }
    
    .cards .card .text .sous-titre {
        color: var(--light-text);
        font-size: 14px;
    }
    
    .bottom svg {
        position: absolute;
        margin-top: -30px;
    }
    
    /* ***************************************************************** */
    .descriptif {
        padding: 100px 150px;
    }
    
    .descriptif h3 {
        font-size: 30px;
        color: var(--dark-color);
        margin-bottom: 20px;
    }
    
    .descriptif p {
        margin-bottom: 50px;
        color: var(--dark-color);
    }
    
    .descriptif .content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 80px;
    }
    
    .descriptif .content-text {
        width: 60%;
    }

    .img-right {
        padding-right: 60px;
    }
    
    .img-left {
        padding-left: 60px;
    }
    
    .descriptif .content-image img {
        border-radius: 10%;
    }
    
    .descriptif img {
        max-width: 100%;
        height: auto;
    }

    .descriptif a {
        text-decoration: none;
        color: var(--dark-text);
        font-weight: 700;
        cursor: pointer;
    }

    .desktop-phone {
        position: sticky;
        top: 0;
        float: right;
        width: 300px;
    }

    .footer-tarif {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        background-color: #e7e7e7;
        padding: 8px 25px;
        width: auto;
        height: auto;
        cursor: pointer;
        max-width: 100%;
    }

    .footer-tarif {
        font-size: 20px;
        color: #000;
        font-weight: bold;
        text-decoration: none;
    }

    .footer-tarif .fa {
        color: #000;
        margin-right: 15px;
    }

    .footer-btn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        align-content: center;
        background-color: #15cd17;
        padding: 10px 25px;
        width: auto;
        height: auto;
        cursor: pointer;
        max-width: 100%;
    }

    .footer-btn:hover {
        background-color: #45a049;
        color: #000;
    }

    .footer-btn a {
        font-size: 30px;
        color: #fff;
        font-weight: bold;
        text-decoration: none;
    }

    .footer-btn .fa {
        color: #fff;
        margin-right: 15px;
    }
    
    /* ***************************************************************** */
    
    .bloc {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding-bottom: 80px;
    }
    
    .bloc .content-image {
        margin-right: 90px;
    }
    
    .bloc .content-image img {
        border-radius: 10%;
    }
    
    .bloc .content-title {
        min-width: 60%;
    }
    
    
    /* ********************************************************************* */
    .footer {
        display: flex;
        justify-content: space-between;
    }
    
    .footer .main-footer h3 {
        font-size: 30px;
        color: var(--dark-color);
        margin-bottom: 40px;
    }
    
    .footer .main-footer p {
        color: var(--main-bg-color);
        font-weight: bold;
    }
    
    .footer .col-footer h3 {
        font-size: 24px;
        color: var(--light-text);
        margin-bottom: 40px;
    }
    
    .footer .main-footer {
        text-align: center;
        max-width: 40%;
        background-color: var(--first-color);
        min-height: 100%;
        padding: 100px 60px;
    }
    
    .footer .col-footer-1 {
        padding-top: 100px;
        padding-left: 150px;
        width: 25%;
        min-width: 20%;
    }
    
    .footer .col-footer-2 {
        padding-top: 100px;
        padding-right: 150px;
        width: 25%;
        min-width: 20%;
    }
    
    /* ********************* SINGLE *************************** */
    .hero-single {
        display: flex;
        justify-content: space-between;
        height: auto;
        min-height: 20vh;
        width: 100%;
        padding: 150px 150px 0px 150px;
    }
    
    .hero-single .single h1 {
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 54px;
        color: var(--light-text);
        text-transform: uppercase;
        margin-bottom: 20px;
    }
    
    .hero-single .single .breadcrumb {
        position: relative;
        font-family: 'Raleway', Arial, sans-serif;
        font-size: 14px;
        color: var(--light-text);
        font-weight: 600;
        text-transform: capitalize;
        margin-bottom: 100px;
    }
    
    .hero-single .single .breadcrumb:before {
        position: absolute;
        margin-bottom: -30px;
        left: 0;
        bottom: 0;
        width: 30%;
        height: 4px;
        content: "";
        background-color: var(--first-color);
    }
    
    .hero-single .single .breadcrumb .sep {
        color: var(--light-text);
        font-size: 1rem;
        margin: 10px;
    }
    
    
    
    
    
    
    @media (max-width: 1500px) {
        .main-nav {
            padding: 20px 80px ;
        }
        .logo a {
            font-size: 26px;
            font-weight: 700;
        }
        .hero {
            padding: 150px 80px;
        }
        .services {
            padding: 100px 80px;
        }
        .descriptif {
            padding: 100px 80px;
        }
        .hero-single {
            padding: 100px 80px 0px;
        }
    }
    
    
    
    @media (max-width: 1250px) {
        h2 {
            font-size: 50px;
        }
        .main-nav {
            padding: 20px 40px ;
        }
        .logo a {
            font-size: 22px;
            font-weight: 700;
        }
        header nav .btn {
            display: none;
        }
        header nav li:last-child {
            margin-left: 0px;
        }
        .hero {
            padding: 70px 40px;
            min-height: 100%;
        }
        .hero .topsvg svg {
            display: none;
        }
        .hero .presentation {
            top: 70%;
            width: 60%;
        }
        .hero .presentation p {
            font-size: 12px;
            margin-top: 10px;
        }
        .hero .main-hero h1 {
            font-size: 40px;
        }
        .hero .main-hero .baseline {
            font-size: 22px;
        }
        .hero .main-hero .baseline:before {
            position: absolute;
            margin-bottom: -30px;
            left: 0;
            bottom: 0;
            width: 30%;
            height: 4px;
            content: "";
            background-color: var(--first-color);
        }
        .hero .main-hero  a.btn {
            background-color: transparent;
            font-size: 20px;
        }
        
        .hero .main-hero a.btn:hover {
            background-color: var(--second-color);
            transition: 0.5s;
        }
    
        .services {
            padding: 70px 40px;
        }
        
        .services h2 {
            font-size: 70px;
            text-align: center;
            margin-bottom: 30px;
        }
    
        .descriptif {
            padding: 80px 40px;
        }
    
        .footer {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
        
        .footer .main-footer h3 {
            font-size: 50px;
        }
        
        .footer .col-footer h3 {
            font-size: 26px;
        }
        
        .footer .main-footer {
            order: 1;
            text-align: center;
            min-width: 100%;
            min-height: 100%;
            padding: 100px 60px;
        }
        
        .footer .col-footer-1 {
            order: 2;
            padding: 100px;
            width: 45%;
            min-width: 45%;
        }
        
        .footer .col-footer-2 {
            order: 3;
            padding: 100px;
            width: 45%;
            min-width: 45%;
        }
        .hero-single {
            padding: 100px 40px 0px;
            min-height: 100%;
        }
        .hero-single .single h1 {
            font-size: 40px;
        }
    }
    
    @media (max-width: 1060px){
        .hero .main-hero .baseline {
            font-size: 20px;
            max-width: 22ch;
        }
        
        .hero .topsvg img {
            min-width: 280px;
            top: 50%;
            right: 0%;
        }
        
        .hero .presentation {
            top: 10%;
            right: 10%;
            width: 60%;
        }
        
        .hero .presentation hr {
            max-width: 50%;
        }
        
        .hero .presentation p {
            font-size: 12px;
        }
    
        .cards {
            justify-content: space-around;
        }
        .cards .card {
            max-width: 40%;
            text-align: center;
            background-color: var(--main-bg-color);
            border-radius: 20px;
            margin: 25px;
        }
        .cards .card img {
            width: 70%;
            padding: 30px 10px;
            
        }
        .cards .card .text {
            background-color: var(--main-bg-color);
            margin-top: -4px;
            padding: 0px 5px 30px;
            border-radius: 0px 0px 20px 20px;
        }
        .cards .card .text h3 {
            font-size: 24px;
        }
        .cards .card .text .sous-titre {
            font-size: 14px;
        }
    
        .bloc {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .bloc .content-image {
            margin: auto;
            padding-bottom: 50px;
        }
        
        .bloc .content-image img {
            border-radius: 20px;
            width: 100%;
        }
    
        .descriptif {
            padding: 80px 40px;
        }
    
        .descriptif .content {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            width: 100%;
        }
        
        .descriptif .content-text {
            width: 60%;
        }
        
        .descriptif .content-image img {
            border-radius: 6%;
        }
        
        .descriptif img {
            max-width: 100%;
            height: auto;
        }
    }
    
    @media (max-width: 900px){
        .main-nav {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 30px 30px;
        }
    
        .logo {
            margin-bottom: 30px;
        }
    
        header nav {
            margin-right: 30px;
        }
    
        .hero .main-hero {
            width: 100%;
        }
        .hero .main-hero .baseline {
            font-size: 20px;
            max-width: 100%;
        }
    
        .hero .topsvg {
            position: relative;
            width: 100%;
        }
    
        .hero .topsvg img {
            position: absolute;
            min-width: 250px;
            top: 120px;
            right: 0%;
        }
        
        .hero .presentation {
            top: 90px;
            left: -40px;
            width: 60%;
        }
    
        .services {
            padding: 100px 40px;
        }
        
        .services p {
            font-size: 20px;
            max-width: 100%;
            text-align: center;
        }
    
        .hero-single .single {
            width: 100%;
            text-align: center;
        }
    }
    
    @media (max-width: 760px){
        .hero {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: auto;
            width: 100%;
            padding: 50px 40px 120px 40px;
        }
        .hero .main-hero {
            width: 100%;
        }
        .hero .main-hero .baseline {
            font-size: 20px;
            max-width: 100%;
        }
    
        .hero .topsvg {
            position: relative;
            width: 100%;
        }
    
        .hero .topsvg img {
            position: absolute;
            max-width: 250px;
            top: -80px;
            right: 0%;
        }
        
        .hero .presentation {
            top: 60px;
            left: 0px;
            width: 60%;
        }
    
        .services {
            padding-top: 100px;
        }
    
        .descriptif {
            padding: 50px 40px;
        }
    
        .descriptif h3 {
            font-size: 30px;
            color: var(--main-bg-color);
            margin-bottom: 20px;
        }
    
        .descriptif p {
            margin-bottom: 50px;
        }
    
        .descriptif .content {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 100%;
        }
        
        .descriptif .content-text {
            width: 100%;
            margin-top: 40px;
        }

        .img-right {
            padding-right: 0px;
        }
        
        .img-left {
            padding-left: 0px;
        }
        
        .descriptif .content-image {
            width: 100%;
            text-align: center;
        }
        
        .descriptif .content-image img {
            border-radius: 4%;
        }
        
        .descriptif img {
            max-width: 500px;
            height: auto;
        }
    
        .footer {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        
        .footer .main-footer h3 {
            font-size: 30px;
        }
        
        .footer .main-footer {
            order: 1;
            text-align: center;
            min-width: 100%;
            min-height: 100%;
            padding: 100px 40px;
        }
        
        .footer .col-footer-1 {
            order: 2;
            padding: 40px;
            width: 100%;
            text-align: center;
        }
        
        .footer .col-footer-2 {
            order: 3;
            padding: 40px;
            width: 100%;
            text-align: center;
        }
    
        .hero-single {
            padding: 50px 20px 0px 20px;
        }
    }
    
    
    @media (max-width: 600px){
        .hero .main-hero h1,
        .bg-hero .hero-single .single h1 {
            font-size: 30px;
        }
        header nav li {
            font-size: 16px;
            margin-left: 15px;
        }
        .cards {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
        }
        .cards .card {
            max-width: 100%;
            text-align: center;
            background-color: var(--main-bg-color);
            border-radius: 20px;
            margin: 25px;
        }
        .cards .card img {
            width: 70%;
            padding: 30px 10px;
            
        }
        .cards .card .text {
            background-color: var(--main-bg-color);
            margin-top: -4px;
            padding: 0px 5px 30px;
            border-radius: 0px 0px 20px 20px;
        }
        .cards .card .text h3 {
            font-size: 24px;
        }
        .cards .card .text .sous-titre {
            font-size: 14px;
        }
    
        .bottom svg {
            display: none;
        }
    
        .descriptif {
            padding: 50px 40px;
        }
    
        .services h2,
        .descriptif h2 {
            font-size: 40px;
        }
    
        .descriptif .content-image img {
            border-radius: 4%;
        }
        
        .descriptif img {
            max-width: 100%;
            height: auto;
        }
    
        .hero-single .single h1 {
            font-size: 50px;
        }

        .desktop-phone {
            display: none;
            }

        .mobile-phone {
            display: block;
            position: sticky;
            left: 0;
            bottom: 0;
        }

        .footer-tarif {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            align-content: center;
            background-color: #e7e7e7;
            padding: 8px 25px;
            width: auto;
            height: auto;
            cursor: pointer;
            max-width: 100%;
        }

        .footer-tarif {
            font-size: 20px;
            color: #000;
            font-weight: bold;
            text-decoration: none;
        }

        .footer-tarif .fa {
            color: #000;
            margin-right: 15px;
        }

        .footer-btn {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            align-content: center;
            background-color: #15cd17;
            padding: 10px 25px;
            width: auto;
            height: auto;
            cursor: pointer;
            max-width: 100%;
        }
    
        .footer-btn:hover {
            background-color: #45a049;
            color: #000;
        }
    
        .footer-btn a {
            font-size: 30px;
            color: #fff;
            font-weight: bold;
            text-decoration: none;
        }

        .footer-btn .fa {
            color: #fff;
            margin-right: 15px;
        }
    }

    @media (min-width: 600px){
        .mobile-phone {
        display: none;
        }
    }
    
    
    @media (max-width: 430px){
        .descriptif img {
            max-width: 100%;
            height: auto;
        }
    
        .descriptif {
            padding: 50px 20px;
        }
    }