/* CSS CUSTOM PROPERTIES */

:root {
    --clr-accent-400: hsl(216, 100%, 64%);
    --clr-accent-600: hsl(0, 0%, 20%);
    --clr-neutral-400: hsl(240, 10%, 96%);
    --clr-primary-400: hsl(0, 0%, 100%);
    --clr-primary-700: hsl(240, 7%, 8%);

    --ff-primary: 'Poppins', sans-serif;

    --fs-100: .625rem;
    --fs-200: .875rem;
    --fs-400: 1rem;
    --fs-500: 1.125rem;
    --fs-600: 1.25rem;
    --fs-650: 1.5rem;
    --fs-700: 1.75rem;
    --fs-750: 2rem;
    --fs-800: 2.25rem;
    --fs-850: 3rem;
    --fs-900: 4rem;

    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
}

/* CSS RESET */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul,
ol {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeSpeed;
    line-height: 1.6;
  }
  
  /* A elements that don't have a class get default styles */
  a:not([class]) {
    text-decoration-skip-ink: auto;
  }

  a {
    text-decoration: none;
  }
  
  /* Make images easier to work with */
  img,
  picture {
    max-width: 100%;
    display: block;
  }
  
  /* Inherit fonts for inputs and buttons */
  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
     scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* GENERAL-BASE STYLES */

  body {
    font-family: var(--ff-primary);
    font-size: var(--fs-400);
    background: var(--clr-primary-400);
    overflow-x: hidden;
    color: var(--clr-primary-700);
  }

  /* NAVIGATION */

  .nav {
    background: var(--clr-primary-400);
    padding: 20px;
  }
 
  .nav .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .main__nav ul {
    display: flex;
  }

  .nav ul li a {
    display: block;
    padding: .625rem 1.25rem;
    font-weight: var(--fw-500);
    transition: 0.5s;
    color: var(--clr-primary-700);
  }

  .nav ul li a:hover,
  .nav ul li a:focus {
    color: var(--clr-accent-400);
  }

  .nav ul li a i {
    margin-right: .625rem;
  }

  .nav ul li:last-child a {
    margin-left: .625rem;
  }

  /* HERO SECTION */

  .hero {
    margin-bottom: 3.125rem;
  }

  .hero .wrapper {
    background: url('../images/hero-bg.png') no-repeat;
    background-size: contain;
    background-position: center bottom;
    height: 40rem;
  }

  .hero .hero__content {
    width: 70%;
  }

  .hero .hero__text {
    width: 70%;
    margin-bottom: 1.25rem;
  }

  .hero--buttons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }

  /* VIDEO SECTION*/

  .video {
    padding: .625rem 0 2.5rem;
  }

 .video__content {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .video__preview {
    margin-bottom: 2.5rem;
  }

  /* TESTIMONIALS SECTION*/

  .testimonials {
    padding: 2.5rem 0;
  }

  .testimonials .testimonials__heading {
    width: 43.75rem;
    margin-bottom: 2.5rem;
  }

  .testimonials__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.875rem;
  }

  .testimonials .card p:nth-child(2) {
    margin-top: 1.5rem;
    font-weight: var(--fw-600);
  }

  /* PRICING SECTION */

  .pricing .pricing__grid {
    display: grid;
    grid-template-columns:  repeat(2, 1fr);
    gap: 1.875rem;
    margin-top: 3.125rem;
  }

  .pricing .pricing__card--subheading {
    margin-bottom: 1.875rem;
  }

  .pricing .pricing__card--price {
    margin-bottom: 1.875rem;
    padding: 1.25rem;
    border-bottom: 1px solid #ccc;
  }

  .pricing ul {
    margin: 1.875rem 0;
  }

  .pricing ul li {
    margin-bottom: 1.25rem;
  }

  .pricing ul li i {
    margin-right: .8rem;
  }

  .pricing__footer {
    margin: 1.875rem 0;
  }

   /* FAQ SECTION */

   .faq {
    padding: 2.5rem 0;
   }

   .faq .faq__group {
    border-bottom: 1px solid hsl(0, 0%, 80%);
    padding-bottom: 1.25rem;
   }

   .faq .faq__group .faq__group--header {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.25rem 0;
   }

   .faq .faq__group .faq__group--header h4 {
    width: 95%;
    font-weight: var(--fs-600);
   }

   .faq .faq__group .faq__group--header i {
    position: absolute;
    right: 0;
    top: 2.7rem;
    font-size: var(--fs-600);
    cursor: pointer;
   }

   .faq .faq__group .faq__group--body {
    display: none;
   }

   .faq .faq__group .faq__group--body.open {
    display: block;
   }

   .faq ul.faq__menu {
    max-width: 24rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    background:  hsl(0, 0%, 87%);
    padding: .625rem 1.25rem;
    border-radius: .625rem;
    font-weight: var(--fw-600);
    cursor: pointer;
   }

   .faq ul.faq__menu li {
    padding: .625rem 1.25rem;
    text-align: center;
    border-radius: .3125rem;
   }

   .faq ul.faq__menu li.active {
    background-color: var(--clr-accent-400);
    color: var(--clr-neutral-400);
   }

   /* FOOTER SECTION */

   .footer {
    padding: 2.5rem 0;
   }

   .footer h4 {
    margin-bottom: .625rem;
   }

   .footer ul li {
    line-height: 2.5;
   }

   .footer a {
    color: var(--clr-neutral-400);
   }

   .footer i {
    font-size: var(--fs-650);
    margin-right: .625rem;
   }

   .footer__grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 1.875rem;
    justify-content: center;
    align-items: center;
   }

   .footer .card {
    margin: 1.25rem 1.875rem 1.875rem 0;
   }

   .footer input[type='email'] {
    width: 100%;
    margin: 1.25rem 0;
    padding: .625rem;
    border: 1px solid #ccc;
    border-radius: 7px;
   }

   /* COMPONENTS */

  .card {
    background-color: var(--clr-primary-400);
    color: var(--clr-primary-700);
    border-radius: 1rem;
    padding: 1.25rem;
  }

  .btn {
    display: inline-block;
    padding: .75rem 1.25rem;
    background: var(--clr-neutral-400);
    color: var(--clr-accent-600);
    font-weight: var(--fw-600);
    text-decoration: none;
    text-align: center;
    border: none;
    border-radius: .625rem;
    transition: 0.5s;
    cursor: pointer;
  }

  .btn i {
    margin-right: .625rem;
  }

  .btn:hover,
  .btn:focus {
    opacity: 0.8;
  }

  .btn-primary {
    background-color: var(--clr-accent-400);
    color: var(--clr-neutral-400);
  }

  .btn-dark {
    background-color: var(--clr-primary-700);
    color: var(--clr-neutral-400);
  }

  .btn-block {
    display: block;
    width: 100%;
  }

  /* UTILITY CLASSES */

  .wrapper {
    max-width: 68.75rem;
    margin: 0 auto;
    padding: 0 .9375rem;
  }

  .wrapper--sm {
    max-width: 55rem;
    margin: 0 auto;
    max-width: 0 .9375rem;
  }

  .flow-content > * + * {
    margin-top: var(--flow-spacer, 1em);
  }

  .text-xxl {
    font-size: var(--fs-900);
    line-height: 1.1;
    font-weight: var(--fw-500);
    margin: 2.5rem 0 1.25rem;
  }

  .text-xl {
    font-size: var(--fs-850);
    line-height: 1.2;
    font-weight: var(--fw-500);
    margin: 2.5rem 0 1.25rem;
  }

  .text-lg {
    font-size: var(--fs-700);
    line-height: 1.4;
    margin: 1.875rem 0 1.25rem;
  }

  .text-md {
    font-size: var(--fs-600);
    line-height: 1.5;
    margin: 1.25rem 0 .625rem;
    font-weight: var(--fw-400);
  }

  .text-sm {
    font-size: var(--fs-200);
    line-height: 1.5;
    margin: .625rem 0 .3125rem;
  }

  .bg-primary {
    background-color: var(--clr-accent-400);
    color: var(--clr-primary-400);
  }

  .bg-light {
    background-color: var(--clr-neutral-400);
    color: var(--clr-accent-600);
  }

  .bg-dark {
    background-color: var(--clr-primary-700);
    color: var(--clr-primary-400);
  }

  .text-center {
    text-align: center;
  }

  .section-divider {
    border: 1px solid var(--clr-neutral-400);
    width: 90%;
    margin: 0 auto;
    opacity: .3;
  }

  .section-divider-accent {
    border: 1px solid var(--clr-accent-600);
    width: 90%;
    margin: 0 auto;
    opacity: .3;
  }

  .spacer {
    margin-bottom: 3rem;
  }

  /* HAMBURGER MENU */
  
  .hamburger-button {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: .625rem;
    z-index: 1000;
  }

  .hamburger-button .hamburger-line {
    width: 1.875rem;
    height: .1875rem;
    background: var(--clr-accent-600);
    margin: .375rem 0;
  }

  /* MOBILE NAV */

  .mobile__nav {
    position: fixed;
    top: 0;
    right: -18.75rem;
    width: 15.625rem;
    height: 100%;
    z-index: 100;
    background: var(--clr-primary-400);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
  }

  .mobile__nav.active {
    right: 0;
  } 

  .mobile__nav ul {
    margin-top: 6.25rem;
    padding-right: .625rem;
  }

  .mobile__nav ul li {
    margin: .625rem 0;
  }

  .mobile__nav ul li a {
    font-size: var(--fs-600);
    transition: 0.3s;
  }

  @media (max-width: 60rem) {
    .text-xxl {
        font-size: 2.5rem;
    }
  }

@media (max-width: 41rem) {
    .nav .main__nav {
        display: none;
    }

     .nav .hamburger-button {
        display: block;
    }

    .hero .wrapper {
        background: url(../images/hero-bg-mobile.png) no-repeat;
        background-size: 21.875rem 25rem;
        background-position: bottom;
        height: 48.125rem;
    }

    .hero .hero__content,
    .hero .hero__text {
        width: 100%;
        text-align: center;
    }

    .hero--buttons {
      flex-wrap: wrap;
    }

    .hero .hero--buttons .btn {
        margin-bottom: .625rem;
        display: block;
        width: 100%;
    }

    .testimonials .testimonials__heading {
        max-width: 100%;
        text-align: center;
    }

    .testimonials .testimonials__grid,
    .pricing .pricing__grid,
    .faq,
    .footer .footer__grid {
        grid-template-columns: 1fr;
        padding: 0 1rem;
    }

    .footer .card {
        margin-right: 0;
    }

    .footer .footer__grid > div {
        text-align: center;
    }

    .text-xl {
        font-size: var(--fs-750);
    }

    .text-lg {
        font-size: var(--fs-650);
    }

    .text-md {
        font-size: var(--fs-400);
    }
}

@media (max-width: 31.25rem) {
    .text-xxl {
        font-size: 2rem;
    }
}