@import url('./components/header.css');
@import url('./components/link.css');
@import url('./components/section.css');
@import url('./components/header.css');
@import url('./components/boxes.css');
@import url('./components/button.css');
@import url('./components/card-product.css');
@import url('./components/faq.css');
@import url('./components/form.css');
@import url('./components/map.css');
@import url('./components/footer.css');
@import url('./components/alerte.css');

@import url('./section/home.css ');
@import url('./section/produits.css ');
@import url('./section/service.css ');
@import url('./section/about.css ');
@import url('./section/contact.css ');

@font-face {
  font-family: 'Rajdhani--regular';
  font-weight: normal;
  font-style: normal;
  src: url('./fonts/rajdhani/Rajdhani-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Rajdhani--bold';
  font-weight: normal;
  font-style: normal;
  src: url('./fonts/rajdhani/Rajdhani-Bold.ttf') format('truetype');
}

:root {
  --color-primary: #d84674;
  --color-secondary: #74ccde;
  --color-tertiary: #6e266f;
  --color-success: #2ee934;
  --color-error: #fc2112;

  --background-dark: #1e1e1e;
  --background-light: #e2e2e2;

  --surface-light: #e8e8e8;

  --text-dark: #1e1e1e;
  --text-light: #e4e4e4;
  --text-grey-light: #e6e6e6;

  --grey: #434343;

  /* gap */
  --gap-sm: 0.5rem; /* 8px */
  --gap-df: 1rem; /* 16px */
  --gap-xl: 2rem; /* 32px */
  --gap-xxl: 3rem; /* 48px */
  --gap-xll: 4rem; /* 64px */

  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.875rem; /* 14px */
  --text-base: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.25rem; /* 20px */
  --text-2xl: 1.5rem; /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem; /* 36px */
  --text-5xl: 3rem; /* 48px */
  --text-6xl: 3.75rem; /* 60px */
  --text-big: 5rem; /* 80px */
}

html {
  width: 100%;
}

body {
  margin: 0;
  padding: 0;
  margin-top: 5.25rem;
  background-color: var(--background-dark);
  font-family: 'Rajdhani--regular', sans-serif;
}

main {
  width: 100%;
  box-sizing: border-box;
  max-width: 1920px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 1024px) {
  body {
    margin-top: 4.5rem;
  }
}

a {
  text-decoration: none;
  background-color: transparent;
  color: var(--text-dark);
  font-family: 'Rajdhani', sans-serif;
  padding: 0;
  margin: 0;
}

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Rajdhani--bold', sans-serif;
  font-weight: 700;
  margin: 0;
}

p {
  font-family: 'Rajdhani--regular', sans-serif;
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: var(--text-5xl);
}

h2 {
  font-size: var(--text-4xl);
}

h3 {
  font-size: var(--text-3xl);
}

h4 {
  font-size: var(--text-2xl);
}

p {
  font-size: var(--text-base);
}

label {
  font-size: var(--text-base);
  font-family: 'Rajdhani--bold', sans-serif;
}

input,
textarea {
  font-family: 'Rajdhani--regular', sans-serif;
  font-weight: 400;
  font-size: var(--text-base);
}

@media screen and (max-width: 768px) {
  h1 {
    font-size: var(--text-4xl);
  }

  h2 {
    font-size: var(--text-3xl);
  }

  h3 {
    font-size: var(--text-2xl);
  }

  h4 {
    font-size: var(--text-xl);
  }
}

footer * {
  text-stroke: black 3px;
  -webkit-text-stroke: black 3px;
  paint-order: stroke fill;
  font-weight: 900;
}

#socials {
  padding: 10px;
  padding-top: 15px;
  background-color: rgba(0, 0, 0, 0.8);
  width: 100%;
}