/*- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/********************/
/* 1) Below 1100px */
/********************/
@media (max-width: 68.75rem) {
  /* Section-Hero */
  .heading-primary {
    font-size: 4.8rem;
  }
  .hero-description {
    font-size: 3.2rem;
  }
  .section-hero {
    height: 50rem;
  }
  .hero {
    top: 50%;
  }
  /* Grid */
  .grid {
    column-gap: 5.4rem;
    row-gap: 4.6rem;
  }

  /* Section CTA */
  /* .cta-form-box {
    padding: 6.4rem 8.2rem;
  } */
  .cta-form-box {
    padding-inline: min(8vh, 3.4rem);
  }
  .cta-text-box {
    padding-inline: min(8vh, 3.2rem);
  }
  /* Section Portfolio */
  .section-portfolio .grid {
    padding-inline: 3.4rem;
  }
  .portfolio-external-btn:link,
  .portfolio-external-btn:visited {
    padding: 0;
    transform: translateX(8px);
  }
}
/********************/
/* 2) Below 1000px */
/********************/
@media (max-width: 62.5rem) {
  /* General */
  .heading-primary {
    font-size: 4.2rem;
  }
  .heading-secondary {
    font-size: 3.2rem;
  }
  .subheading {
    font-size: 1.5rem;
    margin-bottom: 1.4rem;
  }
  .heading-tertiary {
    font-size: 2.8rem;
  }

  /* Section-Hero */
  .custom-shape-divider-bottom-1652342433 svg {
    height: 270px;
  }
  .section-hero {
    height: 46rem;
  }
  .hero {
    top: 46%;
  }
  .hero-description {
    font-size: 2.8rem;
  }
  .btn:link,
  .btn:visited {
    font-size: 1.8rem;
    padding: 1.4rem 2.8rem;
  }

  /* Section About Me */
  .about-me-text {
    font-size: 2.1rem;
    line-height: 1.7;
  }
  .highlight {
    font-size: 2.6;
  }

  /* Section Skills */
  .skills-grid {
    grid-template-columns: repeat(5, 1fr);
  }

  /* Section Features */
  .feature-icon svg {
    height: 28px;
    width: 28px;
  }

  /* Section How it Works(process) */
  .process-grid {
    row-gap: 7rem;
  }
  .process-description {
    font-size: 2.2rem;
  }

  /* Section CTA */
  /* .cta-form-box {
    padding: 6.4rem 6.4rem;
  } */

  /* Section Portfolio */
  .section-portfolio .grid {
    column-gap: 4.4rem;
    padding-inline: 0;
  }
  .portfolio-external-btn:link,
  .portfolio-external-btn:visited {
    padding: 0;
    transform: translateX(20px);
  }

  /* Section Footer */
  .footer-grid {
    column-gap: 9.2rem;
  }
  .footer-temp-logo {
    font-size: 4rem;
  }
}

/********************/
/* 3) Below 832px */
/********************/
@media (max-width: 52rem) {
  /* General */
  .heading-primary {
    font-size: 3.8rem;
  }
  .heading-secondary {
    font-size: 2.7rem;
  }
  .subheading {
    font-size: 1.4rem;
    margin-bottom: 1.4rem;
  }
  .heading-tertiary {
    font-size: 2.6rem;
  }

  /* Section-Hero */
  .custom-shape-divider-bottom-1652342433 svg {
    height: 200px;
  }
  .section-hero {
    height: 35rem;
  }
  .hero {
    top: 45%;
    padding: 0 2.4rem;
  }
  .hero-description {
    font-size: 2.4rem;
  }
  .btn:link,
  .btn:visited {
    font-size: 1.6rem;
    padding: 1.2rem 2.6rem;
  }

  /* Section About Me */
  .about-me-text {
    font-size: 1.8rem;
    line-height: 1.7;
  }
  .highlight {
    font-size: 2.2rem;
  }
  .section-about-me .grid {
    column-gap: 2.4rem;
  }

  /* Section Skills */
  .section-skills svg {
    height: 64px;
    width: 64px;
  }
  .section-skills .portfolio-title {
    font-size: 2.2rem;
  }
  .skills-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Section Features */
  .feature-description {
    font-size: 1.8rem;
  }
  .feature-box {
    gap: 2.4rem;
  }
  .feature-icon svg {
    height: 24px;
    width: 24px;
  }
  .section-features .grid {
    row-gap: 3.6rem;
  }

  /*Section How it works(process)  */
  .process-grid {
    row-gap: 6.4rem;
    padding: 0;
  }
  .process-description {
    font-size: 2rem;
  }
  .process-number {
    font-size: 7.6rem;
  }

  /* Section-CTA */
  .cta-subheading {
    font-size: 2.2rem;
  }
  .cta-heading {
    font-size: 8rem;
  }

  /* Section Portfolio */
  .section-portfolio .grid {
    column-gap: 4.4rem;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 5.4rem;
  }
  .section-portfolio .flex {
    flex-direction: column;
    gap: 3.2rem;
  }
  .portfolio-external-btn:link,
  .portfolio-external-btn:visited {
    padding: 0;
    transform: translateX(0);
  }

  /* Section Footer */
  .footer-grid {
    column-gap: 7.2rem;
  }
  .footer-link:link,
  .footer-link:visited {
    font-size: 2rem;
  }
  .footer-temp-logo {
    font-size: 3.2rem;
  }
}

/***************/
/* 4) Below 708px */
/***************/
@media (max-width: 44.25rem) {
  /* Section Hero */
  .section-hero {
    height: 59rem;
  }
  .hero {
    grid-template-columns: 1fr;
    top: 57%;

    padding: 0 3.4rem;
    text-align: center;
    gap: 5.4rem;
  }

  .hero-img-box {
    position: relative;
    grid-row: 2/3;
  }
  .hero-img-box img {
    width: 47%;
  }

  /* Section About Me */
  /* Test-General */
  .container {
    padding: 0 3.2rem;
  }
  .section-about-me .grid {
    column-gap: 5.4rem;
    row-gap: 4.6rem;
  }
  .section-about-me .grid-col-2 {
    grid-template-columns: 1fr;
  }
  .section-about-me .about-me-img-box {
    text-align: center;
    grid-row: 2/3;
  }
  .section-about-me .about-me-img-box img {
    width: 66%;
  }

  /* Section Skills */
  .section-skills svg {
    height: 6rem;
    width: 6rem;
  }
  .skills-grid {
    column-gap: 1.2rem;
  }

  /* Section Features */
  .section-features .grid-col-2 {
    grid-template-columns: 1fr;
  }
  .section-features .container {
    padding: 0px 3.2rem;
  }

  /* Section How it works(process) */
  .responsiveFix{
    grid-row: 1;
  }
  .process-grid {
    row-gap: 8rem;
  }

  .section-process .grid {
    row-gap: 5.5rem;
  }
  .process-text-box {
    display: flex;
    gap: 4.4rem;
    margin: 0 auto;
  }
  .process-img-box {
    text-align: center;
  }
  .section-process .grid-col-2 {
    grid-template-columns: 1fr;
  }
  .process-img-box img {
    width: 80%;
  }
  .step-2__text {
    grid-row: 1/2;
  }
  .step-4__text {
    grid-row: 1/2;
  }
  .step-6__text {
    grid-row: 1/2;
  }

  /* Section CTA */
  .section-cta .grid-col-2 {
    grid-template-columns: 1fr;
  }
  .cta-text-box {
    padding: 4.4rem;
    border-bottom-left-radius: 0;
    border-top-right-radius: 12px;
  }
  .cta-lets {
    margin-top: 4.4rem;
    margin-bottom: 5.4rem;
  }
  .cta-form-box {
    border-top-right-radius: 0;
    border-bottom-left-radius: 12px;
    padding-inline: 5.6rem;
  }
  .section-cta .grid {
    padding-inline: 3.2rem;
  }

  /* Section Portfolio */
  .section-portfolio .grid {
    padding-inline: 0;
    column-gap: 3.2rem;
  }

  /* Section Footer */
  .footer-grid {
    column-gap: 4.2rem;
  }
}

/***************/
/* 5) Below 568px */
/***************/
@media (max-width: 35.5rem) {
  /* Section Hero */
  .hero-img-box img {
    width: 55%;
  }

  /* Section Skills */
  .skills-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .section-skills .portfolio-title {
    font-size: 2rem;
  }
  .skills-subheading {
    font-size: 1.5rem;
    margin-bottom: 5.2rem;
  }

  /* Section How It works */
  .process-text-box {
    display: block;
    margin: 0;
  }

  /*Section Portfolio  */
  .section-portfolio .grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .mb-1 {
    margin-bottom: 0;
  }
  /* Section Footer */
  .section-footer .flex {
    flex-direction: column;
    /* flex-direction: column-reverse; */
    gap: 3.2rem;
    align-items: center;
  }
  .footer-grid {
    column-gap: 10.2rem;
  }
}
/****************/
/*6) Below 480px */
/****************/
@media (max-width: 30rem) {
  /* General */
  .container {
    padding: 0 2.4rem;
  }
  .heading-tertiary {
    font-size: 2.4rem;
  }
  /* Section Hero */
  .hero-img-box img {
    width: 65%;
  }

  /* Section Skills */
  .section-skills svg {
    height: 5.2rem;
    width: 5.2rem;
  }
  .section-skills .portfolio-title {
    font-size: 1.8rem;
  }
  .skills-grid {
    column-gap: 1.2rem;
  }

  /* Section Featues */
  .section-features .container {
    padding: 0px 2.4rem;
  }
  .feature-icon svg {
    height: 22px;
    width: 22px;
  }
  .feature-box {
    gap: 1.2rem;
  }

  /* Section How it works (process) */
  .process-grid {
    padding: 0;
  }
  .process-number {
    font-size: 6.5rem;
  }
  .process-description {
    font-size: 1.8rem;
    line-height: 1.6;
  }

  /* Section CTA */
  .section-cta .grid {
    padding-inline: 2.4rem;
  }
  .cta-form-box {
    padding-inline: 3.2rem;
  }
  /* Section Footer */
  .footer-grid {
    column-gap: 8.2rem;
  }
  .footer-link:link,
  .footer-link:visited {
    font-size: 1.8rem;
  }
}

/**************/
/*7) Below 432px*/
/**************/
@media (max-width: 27rem) {
  /*Section Hero  */
  .hero-img-box img {
    width: 70%;
  }

  /* Section Skills */
  .section-skills svg {
    height: 4.4rem;
    width: 4.4rem;
  }
  .skills-grid {
    column-gap: 0.6rem;
    row-gap: 4.4rem;
  }

  /* Hero Wave */
  .custom-shape-divider-bottom-1652342433 svg {
    height: 170px;
  }
  .hero {
    padding: 0 2.4rem;
  }
  /* Section CTA */
  .cta-text-box {
    padding: 4.4rem 2.4rem;
  }

  /* Section Footer */
  .footer-grid {
    column-gap: 6.2rem;
  }
}

/****************/
/*8) Below 387px */
/****************/
@media (max-width: 24.1875rem) {
  /* Section Hero */
  .hero-img-box img {
    width: 75%;
  }
  /* Section CTA */
  .cta-form-box {
    padding: 4.4rem 2.2rem;
  }
  .cta-lets {
    margin-right: 7rem;
  }
  .cta-talk {
    margin-left: 7rem;
  }
  .cta-heading {
    font-size: 6rem;
  }
  .cta-text-box {
    padding: 4.4rem 2.4rem;
  }
}

/***************/
/*9) Below 323px */
/***************/
@media (max-width: 20.1875rem) {
  /* Hero Wave */
  .custom-shape-divider-bottom-1652342433 svg {
    height: 129px;
  }
}