html{

    scroll-behavior:smooth;

}

html,
body{

    width:100%;

    overflow-x:hidden;

}

/*======================================================
  CONTENEUR GLOBAL
======================================================*/

.container{

    width:100%;

    max-width:1300px;

    margin-inline:auto;

    padding-inline:16px;

    box-sizing:border-box;

}

@media (min-width:768px){

    .container{

        padding-inline:24px;

    }

}

@media (min-width:1200px){

    .container{

        padding-inline:32px;

    }

}

*,
*::before,
*::after{

    box-sizing:border-box;

}

img{

    max-width:100%;

    display:block;

}

/*======================================================
  JSG DESIGN SYSTEM
======================================================*/

:root{

    /* Container */

    --container-max:1300px;

    --container-padding-desktop:24px;

    --container-padding-mobile:18px;

    /* Sections */

    --section-space:120px;

    --section-space-tablet:90px;

    --section-space-mobile:70px;

    /* Grid */

    --grid-gap:30px;

    --grid-gap-mobile:20px;

    /* Cards */

    --card-padding:30px;

    --card-padding-mobile:22px;

    --card-radius:22px;

    /* Images */

    --image-radius:22px;

    /* Buttons */

    --button-height:56px;

    --button-radius:50px;

}

.container{

    width:100%;

    max-width:var(--container-max);

    margin-inline:auto;

    padding-inline:var(--container-padding-desktop);

}

@media(max-width:768px){

    .container{

        padding-inline:var(--container-padding-mobile);

    }

}

@media(max-width:992px){

    section{

        padding:var(--section-space-tablet) 0;

    }

}

@media(max-width:768px){

    section{

        padding:var(--section-space-mobile) 0;

    }

}

gap:var(--grid-gap);

gap:var(--grid-gap-mobile);

.service-card,
.project-card,
.product-card,
.why-card{

    padding:var(--card-padding);

    border-radius:var(--card-radius);

}

@media(max-width:768px){

.service-card,
.project-card,
.product-card,
.why-card{

    padding:var(--card-padding-mobile);

}

}

img{

    display:block;

    max-width:100%;

    height:auto;

    border-radius:var(--image-radius);

}

.btn{

    height:var(--button-height);

    border-radius:var(--button-radius);

}