/* 1273 */
/* 1em = 16px */
:root {
  --color-text: #1d1e1c;
  --color-background: #ffffff;
  --color-primary: #319bff;
}
@media (max-width: 80em) {
  .hero {
    max-width: 140rem;
  }
  .hero-h1 h1 {
    font-size: 4.4rem;
  }
  .hero-text-p p {
    font-size: 2rem;
  }
  .cta-btn:link,
  .cta-btn:visited {
    font-size: 1.6rem !important;
    padding: 2rem auto;
  }
  .cta-2 p {
    font-size: 2.4rem !important;
  }
}
/* 1024 */
@media (max-width: 64rem) {
  html {
    font-size: 56.25%;
  }
  .service-wrap {
    padding: 2rem;
  }
  .cta-1 div {
    justify-content: center;
  }
  .cta-wrap {
    /* gap: 0.5rem; */
  }
  .cta-2 {
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    flex-direction: column;
  }

  .cta-btn:link,
  .cta-btn:visited {
    padding: 1.8rem 4rem;
  }
}
/* 52.75 */
@media (max-width: 53em) {
  .service {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 5rem;
  }
  .service3 {
    width: 50%;
    grid-column: 1/-1;
    justify-self: center;
  }
  .about-context {
    text-align: start;
  }
  .grid--colums--2 {
    grid-template-columns: 1fr;
  }
  .testimonial-heading {
    margin: 6rem auto;
  }
  .why-heading {
    font-size: 4rem;
  }
  .why {
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-bottom: 10rem;
  }
  .service {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 5rem;
  }
  .grid--colums--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .affordable-wrap {
    grid-column: 1/-1;
    justify-self: center;
    align-items: center;
    padding: 0rem 10rem;
  }
  .service3 {
    width: 50%;
    grid-column: 1/-1;
    justify-self: center;
  }
  .testimonial-2 {
    transform: translateY(0rem);
  }
  .testimonial-3 {
    grid-column: 1/-1;
    justify-self: center;
    width: 50%;
  }
  .team-wrap {
    grid-template-columns: repeat(2, 1fr);
  }

  .icon-nav[name="menu"],
  .icon-nav[name="close"] {
    display: block;
  }
  body {
    position: relative;
  }
  .nav-icon-wrap {
    display: block;
    z-index: 11;
  }
  .navbar-wrap ul {
    position: absolute;
    background-color: var(--color-background);
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    font-size: 2.4rem;
    font-weight: 500;
    padding-left: 4rem;
    transform: translate(0);

    display: flex;
    flex-direction: column;
    gap: 4rem;
    align-items: center;
    justify-content: center;

    transition: all 1s ease-in;
  }
  .hidden {
    display: none !important  ;
  }
  .navbar-wrap {
    /* font-size: 1rem; */
  }
  .service-icon-wrap {
    margin: 2rem 0rem;
  }
  /* boxxxxx */
  .box {
    width: 10rem;
    height: 10rem;
  }
  .img-box {
    bottom: 15.7px;
  }
  .text span {
    font-size: 1.2rem;
    transform-origin: 0 5rem;
  }
}
/* ////////////////////48 */
@media (max-width: 32em) {
  .logo {
    width: 85%;
  }
  .hero {
    padding: 0 1rem;
  }
  .hero-h1 h1 {
    font-size: 4.4rem;
  }
  .hero-text-p p {
    font-size: 1.8rem;
    text-align: center;
  }
  .grid {
    display: grid;
    column-gap: 4.8rem;
    row-gap: 4rem;
  }
  .grid--colums--2,
  .grid--colums--3 {
    grid-template-columns: 1fr;
  }
  .affordable-wrap {
    padding: 0;
    width: 100%;
  }
  .why-section {
    margin: 4rem auto;
  }
  .why {
    grid-template-columns: 1fr;
  }
  .why-heading {
    text-align: center;
    margin: 4rem auto;
  }
  .service {
    grid-template-columns: 1fr;
  }
  .service3 {
    width: 100%;
  }
  .about-title {
    font-size: 3.6rem;
  }
  .about-context {
    margin: 4rem auto;
    font-size: 2rem;
  }
  .why-heading {
  }
  .test-h1 {
    margin-top: 2rem;
    font-size: 4rem;
    text-align: center;
  }
  .testimonial-heading {
    margin: 6rem auto;
  }
  .text-testimonial-wrap {
    margin: 8rem auto;
  }
  .testimonial-3 {
    width: 100%;
  }
  .video {
    margin: 10rem auto;
  }
  .video-wrap iframe {
    width: 100%;
    height: 25rem;
    background-size: cover;
  }
  .team {
    margin: 10rem auto;
  }
  .team-wrap {
    gap: 2rem;
    row-gap: 2rem;
  }
  .team-text {
    padding: 2rem 0.5rem;
  }
  .team-text h2 {
    font-size: 2rem;
  }
  .team-text p {
    font-size: 1.6rem;
    text-align: center;
  }
  .cta {
    margin: 9rem 2rem;
  }
  .cta-head {
    margin-bottom: 2rem;
  }
  .cta-wrap {
    padding: 3rem;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .logo-footer-wrap img {
    width: 100%;
  }
  .footer-text a,
  .footer-text p {
    text-align: center;
  }
  .footer-text {
    grid-column: 1/-1;
    justify-self: center;
  }
}
/* SPACING SYSTEM (px) 2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 
/ 96 / 128
FONT SIZE SYSTEM (px) 10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 
/ 52 /
  62 / 74 / 86 / 98 */