@font-face {
  font-family: "Quicksand-Bold";
  src: url("../fonts/Quicksand-Bold.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Quicksand-Light";
  src: url("../fonts/Quicksand-Light.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Quicksand-Medium";
  src: url("../fonts/Quicksand-Medium.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Quicksand-Regular";
  src: url("../fonts/Quicksand-Regular.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Quicksand-SemiBold";
  src: url("../fonts/Quicksand-SemiBold.ttf") format("opentype");
  font-display: swap;
  }
  @font-face {
  font-family: "Quicksand-VariableFont_wght";
  src: url("../fonts/Quicksand-VariableFont_wght.ttf") format("opentype");
  font-display: swap;
  }
body
{
overflow-x: hidden;
margin:0;
padding:0 !important;
  --couleur-1: #000000;
  --couleur-2: #0f0f0f;
  --couleur-3: #aaaaaa;
  --couleur-4: #f0f0f0;
  --couleur-5: #f8f8f8;
  --couleur-6: #ffedf7;
  --couleur-7: #d81180;
  --couleur-8: #992686;
  --couleur-9: #5a3984;
  --couleur-10: #603689;
  --couleur-11: #ec0082;
  --couleur-12: #ffffff;
  --couleur-13: #c3c3c3;
  --couleur-14: #a7118a;


  --police-Quicksand-Bold: 'Quicksand-Bold';

  --police-Quicksand-Light: 'Quicksand-Light';

  --police-Quicksand-Medium: 'Quicksand-Medium';

  --police-Quicksand-Regular: 'Quicksand-Regular';

  --police-Quicksand-SemiBold: 'Quicksand-SemiBold';

  --police-Quicksand-VariableFont_wght: 'Quicksand-VariableFont_wght';
}

#loading,
.pop_up_add {
position: fixed;
z-index: 10000000;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
display: none;
align-items: center;
justify-content: center;
top: 0;
left: 0;
}

section{
background-position: center;
background-size: cover;
padding-top: clamp(50px, 10vw, 125px);
padding-bottom: clamp(50px, 10vw, 125px);
padding-right: 10%;
padding-left: 10%;
}

img {
max-width: 100%;
}


html {
scrollbar-width: auto;
scrollbar-width: thin;
}
h1 {
text-transform: uppercase;
}

h2 {
text-transform: uppercase;
}



a {
text-decoration: none;
}

  h1  {
    font-size: 50px;
    font-family: var(--police-Quicksand-Bold);
    color: var(--couleur-1);


  }
  h1 span
  {
    font-size: 50px;
    font-family: var(--police-Quicksand-Bold);
  }
    h2  {
    font-size: 40px;
    font-family: var(--police-Quicksand-Bold);
    color: var(--couleur-1);


  }
  h2 span
  {
    font-size: 40px;
    font-family: var(--police-Quicksand-Bold);
  }
    h3  {
    font-size: 35px;
    font-family: var(--police-Quicksand-Bold);
    color: var(--couleur-1);


  }
  h3 span
  {
    font-size: 35px;
    font-family: var(--police-Quicksand-Bold);
  }
    h4  {
    font-size: 20px;
    font-family: var(--police-Quicksand-Bold);
    color: var(--couleur-1);


  }
  h4 span
  {
    font-size: 20px;
    font-family: var(--police-Quicksand-Bold);
  }
    p  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }
  a  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }
  input  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }
  span  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Light);
    color: var(--couleur-1);


  }
  button  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Bold);
    color: var(--couleur-12);


  }
  tr  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }
  td  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }
  bdi  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }
  li  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }
  label  {
    font-size: 16px;
    font-family: var(--police-Quicksand-Regular);
    color: var(--couleur-1);


  }

@media screen and (max-width:1024px)
{
  h1  {
    font-size: 40px;
  }
  h1 span
  {
    font-size: 40px;
  }
    h2  {
    font-size: 35px;
  }
  h2 span
  {
    font-size: 35px;
  }
    h3  {
    font-size: 30px;
  }
  h3 span
  {
    font-size: 30px;
  }
    h4  {
    font-size: 18px;
  }
  h4 span
  {
    font-size: 18px;
  }
    p  {
    font-size: 15px;
  }
  a  {
    font-size: 15px;
  }
  input  {
    font-size: 15px;
  }
  span  {
    font-size: 15px;
  }
  button  {
    font-size: 15px;
  }
  tr  {
    font-size: 15px;
  }
  td  {
    font-size: 15px;
  }
  bdi  {
    font-size: 15px;
  }
  li  {
    font-size: 15px;
  }
  label  {
    font-size: 15px;
  }
}

@media screen and (max-width:768px)
{
section
{
padding-right:5%;
padding-left:5%;
}
  h1  {
    font-size: 30px;
  }
  h1 span
  {
    font-size: 30px;
  }
    h2  {
    font-size: 25px;
  }
  h2 span
  {
    font-size: 25px;
  }
    h3  {
    font-size: 22px;
  }
  h3 span
  {
    font-size: 22px;
  }
    h4  {
    font-size: 16px;
  }
  h4 span
  {
    font-size: 16px;
  }
    p  {
    font-size: 15px;
  }
  a  {
    font-size: 15px;
  }
  input  {
    font-size: 15px;
  }
  span  {
    font-size: 15px;
  }
  button  {
    font-size: 15px;
  }
  tr  {
    font-size: 15px;
  }
  td  {
    font-size: 15px;
  }
  bdi  {
    font-size: 15px;
  }
  li  {
    font-size: 15px;
  }
  label  {
    font-size: 15px;
  }
}

@media screen and (max-width:450px)
{
  h1  {
    font-size: 25px;

  }
  h1 span
  {
    font-size: 25px;
  }
    h2  {
    font-size: 20px;

  }
  h2 span
  {
    font-size: 20px;
  }
    h3  {
    font-size: 18px;

  }
  h3 span
  {
    font-size: 18px;
  }
    h4  {
    font-size: 16px;

  }
  h4 span
  {
    font-size: 16px;
  }
    p  {
    font-size: 14px;

  }
  a  {
    font-size: 14px;

  }
  input  {
    font-size: 14px;

  }
  span  {
    font-size: 14px;

  }
  button  {
    font-size: 14px;

  }
  tr  {
    font-size: 14px;

  }
  td  {
    font-size: 14px;

  }
  bdi  {
    font-size: 14px;

  }
  li  {
    font-size: 14px;

  }
  label  {
    font-size: 14px;

  }
}

h2 {
font-weight: 100;
}