/* /////// 2000px nad above /////// */
@media (min-width: 125em) {
  .hero-container {
    max-width: 85vw;
  }
  .hero-block {
    width: 25vw;
  }
}

/* /////// 2500px nad above /////// */
@media (min-width: 156.25em) {
  /* ///////////// General */
  body {
    font-size: 0.96vw;
  }

  .link:is(:link, :visited) {
    font-size: 0.96vw;
  }
  .link.btn {
    gap: 0.96vw;
    font-size: 1.2vw;
    padding: 0.8vw 2.56vw;
    border-radius: 0.32vw;
  }

  .nav-link:is(:link, :visited) {
    padding: 0.4vw 0;
  }
  .nav-link::after {
    height: 0.2vw;
  }

  .section {
    padding: 5.12vw 3.2vw;
  }
  .section-heading-s {
    margin-bottom: 0.96vw;
    font-size: 0.96vw;
  }
  .section-heading-l {
    font-size: 1.76vw;
    margin-bottom: 2.56vw;
  }
  .main-nav.sticky {
    box-shadow: 0 0.32vw 0.8vw #00000020;
    height: 4.8vw;
  }

  /* ///////////// Navigation */
  .main-header {
    padding: 5.6vw 0;
  }
  .main-nav {
    height: 5.6vw;
    padding: 0 3.2vw;
  }
  .logo {
    width: 8vw;
  }
  .nav-list {
    gap: 1.28vw;
  }

  /* ///////////// Hero section */
  .section-hero {
    padding-left: 3.2vw;
  }
  .hero-container {
    padding: 7.68vw 5.12vw;
    border-top-left-radius: 0.64vw;
    border-bottom-left-radius: 0.64vw;
  }
  .hero-txt-box {
    width: 32vw;
  }
  .main-heading {
    font-size: 2.56vw;
    margin-bottom: 0.96vw;
  }
  .main-description {
    font-size: 0.96vw;
    margin-bottom: 1.92vw;
  }

  /* ///////////// About section */
  .about-container {
    width: 64vw;
  }
  .about-txt-box {
    max-width: 32vw;
  }
  .about-heading {
    font-size: 1.44vw;
    margin-bottom: 0.96vw;
  }
  .about-description {
    font-size: 0.96vw;
  }
  .about-feature-box {
    margin-top: 1.92vw;
  }
  .feature:not(:last-child) {
    margin-bottom: 0.96vw;
  }
  .feature ion-icon {
    font-size: 1.44vw;
    margin-right: 0.64vw;
  }
  .feature p {
    font-size: 0.96vw;
  }

  /* ///////////// Service section */
  .service-container {
    max-width: 64vw;
    min-height: 4vw;
    gap: 1.28vw;
  }
  .service-box {
    border-radius: 0.64vw;
    box-shadow: 0 0.4vw 0.8vw #00000010;
  }
  .service {
    padding: 1.92vw;
    font-size: 0.8vw;
  }
  .service-heading {
    margin-bottom: 0.96vw;
    font-size: 1.2vw;
  }
  .service-overlay {
    padding: 1.92vw;
  }
  .service-num {
    font-size: 5.12vw;
  }
  .overlay-heading {
    font-size: 1.44vw;
  }

  /* ///////////// CTA section */
  .cta-container {
    max-width: 64vw;
    gap: 5.12vw;
  }
  .cta {
    gap: 1.92vw;
    border-radius: 0.64vw;
    box-shadow: 0 0.4vw 0.8vw #00000010;
    padding: 1.92vw;
  }
  .label {
    font-size: 1.2vw;
  }

  .message-box .label {
    margin-bottom: 0.96vw;
  }
  .input {
    height: 1.92vw;
    padding: 0.48vw;
    font-size: 0.8vw;
    border-bottom: 0.12vw solid var(--col-lt);
  }
  .message {
    height: 4.8vw;
    border: 0.12vw solid var(--col-lt);
    border-radius: 0.64vw;
  }
  .cta-heading {
    font-size: 2.08vw;
    margin-bottom: 0.64vw;
  }
  .cta-description {
    font-size: 1.2vw;
    margin-bottom: 3.84vw;
  }
  .cta-point-box:not(:last-child) {
    margin-bottom: 1.92vw;
  }
  .cta-point-box span {
    width: 1.92vw;
    height: 1.92vw;
    margin-right: 0.96vw;
  }
  .cta-point {
    font-size: 0.96vw;
  }

  /* ///////////// Footer */
  .footer {
    padding: 3.84vw 3.2vw 3.2vw;
  }
  .footer-container {
    width: 64vw;
    gap: 1.92vw;
  }
  .footer-contact,
  .footer-location {
    font-size: 0.96vw;
  }
  .footer-contact {
    margin-bottom: 0.64vw;
  }
  .footer-contact-box p {
    margin-left: 0.96vw;
  }
  .footer-nav-list {
    gap: 0.64vw;
    font-size: 0.96vw;
  }
  .copyright-box {
    gap: 1.28vw;
  }
  .copyright {
    font-size: 0.96vw;
  }
}

/* /////// 1920px andd Bellow /////// */
/* //////////////////////////////// */
@media (max-width: 120em) {
  html {
    font-size: 50%;
  }
  .hero-container {
    max-width: 190rem;
  }
  .hero-block {
    width: 50rem;
  }
}

/* /////// 1600px and Bellow /////// */
/* //////////////////////////////// */
@media (max-width: 100em) {
  html {
    font-size: 43.75%;
  }
}

/* /////// 1400px and Bellow /////// */
/* //////////////////////////////// */
@media (max-width: 87.5em) {
  html {
    font-size: 40.625%;
  }
}

/* /////// 1160px and Bellow /////// */
/* //////////////////////////////// */
@media (max-width: 72.5em) {
  .about-container {
    width: 100%;
  }
}

/* /////// 990px and Bellow /////// */
/* //////////////////////////////// */
@media (max-width: 61.875em) {
  .hero-block {
    width: 45rem;
  }

  .about-container {
    flex-direction: column;
    width: auto;
  }
  .about-img-box {
    width: 100%;
  }

  .about-txt-box {
    max-width: 100rem;
  }

  /* //////////// Section Service */
  .service-container {
    max-width: 100rem;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  /* ////////// Section CTA */
  .cta-container {
    max-width: 100rem;
    grid-template-columns: none;
    grid-template-rows: 1fr auto;
  }
  .cta {
    grid-column: 1;
  }
  .cta-txt-box {
    grid-column: 1;
    grid-row: 2;
  }

  /* /////////// Footer */
  .footer-container {
    max-width: 100rem;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
  }
  .copyright-box {
    grid-column: 1;
    grid-row: 1;
  }
  .footer-nav-box {
    grid-column: 2;
    grid-row: 1;
  }
  .footer-contact-box {
    grid-column: 1;
    grid-row: 2;
  }
}

/* /////// 850px and Bellow /////// */
/* //////////////////////////////// */
@media (max-width: 53.125em) {
  /* ///////// Section hero */
  .hero-container {
    padding: 12.8rem 8rem;
  }
  .hero-block {
    width: 40rem;
  }
}

/* /////// 720px and Bellow /////// */
@media (max-width: 45em) {
  /* /////// Hero section */
  .hero-container {
    padding: 9.6rem 8rem;
  }
  .main-header {
    padding: 12.8rem 0;
  }
  .main-nav {
    height: 12.8rem;
  }
  .logo {
    width: 17rem;
  }
  .main-nav.sticky {
    height: 9.6rem;
  }

  .service {
    padding: 3.2rem;
  }
  .service-heading {
    margin-bottom: 1.6rem;
  }

  .cta-description {
    margin-bottom: 6.4rem;
  }

  /* ////////////////////////////////// */
  /* ////////// Mobile Navigation ///// */
  /* //////// Implementing Mobile Navigation ////////// */
  .mobile-nav {
    display: block;
  }

  .nav-open ion-icon[name="close-outline"] {
    display: block;
  }

  .nav-open ion-icon[name="menu-outline"] {
    display: none;
  }
  .main-nav ul {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 3.2rem;
    background: var(--col-pr);
    height: 100vh;
    width: 60%;
    z-index: -1;
    transform: translateX(140%);
    transition: all 0.3s ease-in;
  }
  .nav-open .nav-list .link {
    font-size: 3.6rem;
  }

  .nav-open .main-nav {
    position: fixed;
  }

  .nav-open .nav-back {
    opacity: 1;
  }

  .nav-open .main-nav ul {
    opacity: 1;
    transform: translateX(67%);
  }

  .nav-list.style {
    margin: 0;
    color: var(--col-dr);
  }
}

/* /////// 620px and Bellow /////// */
@media (max-width: 38.75em) {
  .section {
    padding: 9.6rem 4.8rem;
  }
  .hero-block {
    width: 30rem;
  }
  .main-heading {
    font-size: 5.2rem;
  }
  .about-txt-box {
    max-height: 100%;
  }
  .service-container {
    grid-template-columns: 1fr;
    gap: 4.8rem;
  }
  .service {
    padding: 4.8rem;
  }

  .link.btn {
    font-size: 2.4rem;
    padding: 2rem 4.8rem;
  }

  .cta-container {
    width: 100%;
  }
  .cta {
    width: 100%;
  }
  .footer {
    padding: 9.6rem 4.8rem 4.8rem;
  }
}

/* /////// 530px and Bellow /////// */
@media (max-width: 33.125em) {
  .main-nav {
    padding: 0 4.8rem;
  }
  .section-hero {
    padding-left: 4.8rem;
  }
  .hero-container {
    padding: 9.6rem 4.8rem;
  }
}

/* /////// 440px and Bellow /////// */
@media (max-width: 27.5em) {
  .cta-heading {
    font-size: 4.4rem;
  }
  .footer-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .copyright-box {
    grid-column: 1;
    grid-row: 1;
  }
  .footer-nav-box {
    grid-column: 1;
    grid-row: 2;
  }
  .footer-nav-list {
    flex-direction: row;
    gap: 4.8rem;
  }
  .footer-contact-box {
    grid-column: 1;
    grid-row: 3;
  }
}

/* /////// 400px and Bellow /////// */
@media (max-width: 25em) {
  .hero-container {
    padding: 9.6rem 9.6rem 9.6rem 4.8rem;
  }
  .link.btn-primary {
    width: 100%;
  }
}