.flex {
    display: flex;
    gap: var(--gap, 1rem);
  }

  @font-face {
    font-family: 'bubbler_oneregular';
    src: url('../Fonts/bubblerone_regular_macroman/bubblerone-regular-webfont.woff') format('woff');

    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'sf_cartoonist_handregular';
  src: url('../Fonts/sfcartoonisthand_regular_macroman/SF_Cartoonist_Hand-webfont.woff') format('woff');

  font-weight: normal;
  font-style: normal;

} 

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
  }
  
  html {
    /* color-scheme: dark light; */
    color: white;
    font-size: 62.9%;
  }
  
  body {
    min-height: 100vh;
    scroll-behavior: smooth;
    background-color: #1a1a1a;

    overflow-x: hidden;
    
    overflow-x: hidden;
  }
  
  h1, h2, h3 {
    
    letter-spacing: 2px;
   
  }
  
  img, picture, svg, video {
    display: block;
    max-width: 100%;
    
  }

 
  
  .logo {
    margin: 2rem;
    width: 25rem;
  }

  .primary-header {
    
    align-items: center;
    justify-content: space-between;
  }

  .mobile-nav-toggle {
    display: none;
  }

  .primary-navigation {
    list-style: none;
      
    background: hsl(0, 0%, 0% , 0.75);
    
  }


  .primary-navigation a:hover {
    color: #fff;
  }

  @supports (backdrop-filter: blur(1rem)) {
    .primary-navigation {
      background: hsl(0, 0%, 10% , 0.4);
      backdrop-filter: blur(1rem);
    }
  }

  .primary-navigation a {
    text-decoration: none;
    color: #ff0891;
    font-size: 2.8rem;
    letter-spacing: 1px;

    transition: color .25s ease;
    font-family: 'sf_cartoonist_handregular';
    
  }

  @media (max-width:50em) {
    .primary-navigation {
      --gap: 3em;

      position: fixed;
      z-index: 1000;
      inset: 0 0 0 30%;

      flex-direction: column;
      

      align-items: center;

      transform: translateX(100%);
      transition: transform 350ms ease-out;     
    }

    .primary-navigation[data-visible="true"] {
      transform: translateX(0%);
    }

    .mobile-nav-toggle {
      display: block;
      position: absolute;
      z-index: 9999;
      background-image: url("../Img/SVG/Hamburger_icon.svg");
      background-color: transparent;
      background-repeat: no-repeat;
      border: 0;
      
      width: 3rem;
      aspect-ratio: 1;
      top: 4rem;
      right: 2rem;
    }

    .mobile-nav-toggle[aria-expanded="true"] {
      background-image: url("../Img/SVG/Close_Icon.svg");
    }
  }

  @media (min-width: 35em) {
    .primary-navigation {

      --gap:3rem;
      padding-block: 3rem;
      padding-inline: clamp(3rem, 5vw,10rem);
    }
  }

  @media (max-width: 35em) {
    .primary-navigation {

      padding-block-start: 10rem;
    }
  }

  .about-us {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .about-us__our-team {
    display: flex;
    justify-content: center;
    align-items: center;  
    
  }
  .about-us__our-team p {
    font-size: 5rem;
    font-family: 'bubbler_oneregular';
  }
  .about-us__desc {
    fonts
  }

  .about-us__desc h2 {
    font-family: "bubbler_oneregular";
    
  }

  .about-us__desc p {
    
    text-align: center;
    font-family: 'sf_cartoonist_handregular';
    font-size: clamp(2rem, 2vw, 2.8rem);

    padding-inline: clamp(2rem, 2vw, 2.8rem);
    margin-block-start: 5rem;
    line-height: 1.5;
  }

  @media (max-width: 700px) {
    .about-us__desc {
      display: flex;
      justify-content: center;
      text-align: center;
      margin-block-start: 2rem;
    }

    .about-us__desc h2 {
      display: none;      
    }
    .about-us__desc p {
      font-size: 1.8rem;

    }
    .about-us__our-team p {
      font-size: 3.5rem;
    }
  }

.spacer {
  height: 60vh;
  margin-block-start: 5rem;
  background-image: url(/Img/assets/Family\ Holiday.jpg);
  background-size: cover;
  background-position: center center;
}

.quote {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  min-height:40vh;
}
.quote__paragraph{
  display: grid;
  
  place-items: center;
  position: relative;
}

.quote__paragraph p {
  font-size: 3rem;
  font-family: 'bubbler_oneregular';
  font-style: italic;
  text-align: center;
  width: 75%; 
}

.quote__team-work {
  padding: 5rem;
}
@media (max-width:90rem) {
  .quote {
    min-height: 30vh;
  }
  .quote__paragraph {
    margin-block-start: 5rem;
  }
}
.team {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
  min-height: 80vh;
}

.team__pictures img {
  width: 30%;
  aspect-ratio: 6/7;
  object-fit: cover;
}
.team__paragraph {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.team__paragraph h2 {
  font-family: 'bubbler_oneregular';
    font-size: 4rem;
}
.team__paragraph p {
    width: 75%;
    font-family: 'sf_cartoonist_handregular';
    font-size: 2rem;
}

.team__pictures {
  position: relative;
}

.team__pictures--1 {
  position: absolute;
  top: 0;
  left: 17%;
}
.team__pictures--2 {
  position: absolute;
  top: 0;
  right: 17%;
  transform: translateY(50%);
}
.team__pictures--3 {
  position: absolute;
  top: 0;
  left: 17%;
  transform: translateY(115%);
}

@media (max-width:1000px) {
  .team {
    grid-template-columns: 1fr;
  }
  .team__pictures {
    padding-inline: 4rem;
    display: flex;
    gap: 4rem;
  }
  .team__pictures img {
    width: 100%;
    position: static;
    transform: translateY(0);
  }
  .team__paragraph {
    text-align: center;
    padding-inline: 5rem;
    margin-block-start: 5rem;
  }
  .team__paragraph p {
    width: 100%;
  }
  
}
@media (max-width:700px) {
  .team__pictures {
    flex-direction: column;
  }
  
}

.footer {
  display: flex;
  justify-content: space-between;
  padding-block: 4rem;
  padding-inline: 8rem;
}
.footer__logo {
  display: flex;
  align-items: center;
}
.footer__logo img {
  width: 25rem;
}
.footer__links {
  align-items: center;
  display: flex;
  align-items: center;
}
.footer__links a {
  font-size: 2.5rem;
  font-family: "sf_cartoonist_handregular";
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
  margin-right: 2rem;
}
.footer__links a:hover {
  color: #ff0891;
}
.footer__social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
.footer__social img {
  width: 6rem;
}

@media (max-width: 1000px) {
  .footer {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }
  .footer__links {
    flex-direction: column;
    gap: 3rem;
    padding: 5rem;
  }
}
.credits {
  min-height: 5rem;
  background-color: #fff;
  align-items: center;
  justify-content: center;
}
.credits p {
  color: #000;
  font-family: "sf_cartoonist_handregular";
  font-size: 2rem;
  text-align: center;
}
.credits p a {
  color: #ff0891;
}