@media(min-width: 300px) {

  .hero {

    height: 45vh;

  }


  .hero-content {

    height: auto;

  }

  .hero-content h1 {

    font-size: 3.5rem;

  }

}

@media (min-width: 600px) {



.hero-content h1 {

  font-size: rem;

}

/* Why Us */


    .container01 {

    width: 80%;
    margin: 0 auto;

  }


/* Template Section */

.template-showcase-header span {

    font-size: 1.4rem;

}

.template-card {

  width: 70%;

}

.column01 {

  width: 80%;

}

.template-button {

  font-size: 1.5rem;
  padding: 1.5rem 3.3rem;

}


  /* Features Section */

.features-section h2 {

  font-size: 2rem;

}

.features-grid {

justify-self: center;

}

.feature-card h3 {

  font-size: 1.5rem;

}

.feature-card p {
  font-size: 1.25rem;

}

#feature-span {

  font-size: 1.125rem;

}

/* Carousel Section */

.carousel-frame {

max-width: 50%;


}

.carousel-subtext {

  font-size: 1.25rem;
  display: block;
  max-width: 90%;

}

/* FAQ SECTION */

.faq-question {

  font-size: 1.375rem;

}

.faq-wrapper {

  justify-self: center;

}

.faq-heading {
  font-size: 2.25rem;
}

/* Contact Section */


  .contact-label02 {

    font-size: 1.125rem !important;

  }


  .contact-header02 h2 {

    font-size: 2.25rem;

  }

   .contact-header02 p {

    font-size: 1.125rem;

   }


   .contact-form02 h3 {

    font-size: 1.4rem;

   }

  .contact-form02 label {

    font-size: 1.125rem !important;

   }

   .submit-btn02 {

    padding: 1.5rem 3rem;
    font-size: 1.1875rem;

   }

}

@media (min-width: 900px) {


  /* Hero */

.hero-content {

  max-width: none;
  width: 50%;

}

.hero-content h1 {

  font-size: 4rem;

}

.hero-content p {

  font-size: 1.75rem;

}

.hero-content button {

  font-size: 1.6rem;
  padding: 1.5rem 3rem;

}

/* 3 Step Process */

.steps-grid {

  padding-top: 5rem;

  display: flex;
  flex-direction: row;
  max-width: 90%;
  margin: 0 auto;
  gap: 5rem;

}



/* Why us */

.bullet-list {

  text-align: center;
  border-left: none;
  margin-bottom: 2.5rem;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  text-align: left;
  padding-right: 2rem;

}

.comparison-grid01 {

  display: flex;
  flex-direction: row;

}



  /* Carousel */

  .carousel-heading {

    font-size: 2.6rem;

  }

  .carousel-subtext {

    font-size: 1.5rem;
    display: block;
    width: 70%;

  }

  .carousel-frame {

max-width: 30%;


}

/* Features */

.features-grid {

  display: grid;
  grid-template-columns: 50% 50%;

}

#feature-span {

  margin-top: 3rem;

}

/* CTA */

.cta-heading {

  font-size: 2.6rem;

}

.cta-text {

  font-size: 1.5rem;

}

.cta-button {

  font-size: 1.625rem;
  padding: 1.5rem 3.75rem;

}

.cta-subtext {

  font-size: 1.125rem;

}

.cta-scroll-cue {

    font-size: 1.125rem;

}



/* FAQ */


  .faq-wrapper {

    width: 65%;

  }

  /* About */

  .about-wrapper {

    max-width: none;

    width: 75%;

  }


  /* Contact */

  .contact-container02 {

    max-width: none;
    width: 75%;

  }

  /* CTA */

  .section-cta {

    display: none;


  }

  .section-cta02 {

    display: flex;
    justify-content: center;
    align-items: center;
    gap:10rem;
    

    background-color: #0e0e1a;
  padding: 3.5rem 1.5rem;
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.08);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  text-align: left;
  }

  .cta-wrapper {

    margin: 0;

  }




}


@media (min-width: 1000px) {


  /* Template Showcase */

  .template-showcase-header h2 {

    font-size: 3.5rem;

  }

  .template-showcase-header span {

    font-size: 1.6rem;

  }

  .template-card {

    display: none;

  }

  .template-grid {

    display: grid;
    grid-template-columns: 25% 25% 25%;
    gap: 10rem;
    justify-content: center;


  }

  .template-card02 {

background-color: #1e2530;
border-radius: 2rem;
margin-top: -1rem;
display: block;
transition: transform 0.3s ease;
  }

  .template-card02:hover {

    transform: scale(1.05);

  }

  .template-card02 img {

    border-top-left-radius: 2rem;
    border-top-right-radius: 2rem;

  }



/* FAQ SECTION */

.faq-wrapper {

  width: 70%;



}

.faq-parent {

    background: #171e29;
  padding: 3rem 2rem;
  border-radius: 16px;
box-shadow: 0 0 30px rgba(0, 140, 255, 0.05); /* instead of a tight drop */

  margin: 0 auto;

}

/* About Section */ 

.about-wrapper {

  width: 90%;

}

/* Contact Section */

.contact-container02 {

  width: 90%;

}

}