/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* 1366px and above Landscape*/
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
@media (min-width: 81.25em) and (orientation: landscape) {
  /* General Style */
  .sec-s-head {
    font-size: 1.2vw;
  }
  .sec-l-head {
    font-size: 2.4vw;
  }
  .paragraph {
    font-size: 1.2vw;
  }

  /* Animation Style */
  .work-box {
    transform: translate(0, 9.6vw);
  }
  .box-up {
    transform: translate(0, 0);
  }
  .img-work--link::after {
    font-size: 1.8vw;
  }
  .img-up {
    transform: translate(0, -3.2vw);
  }

  .service-box:hover {
    transform: translate(0, -1.2vw);
  }

  /* Header Style */
  .main-header {
    padding: 0 3.2vw;
    height: 4.68vw;
  }
  .logo {
    font-size: 1.5vw;
  }
  .header-nav ul {
    gap: 3.2vw;
  }
  .no-flexbox-gap.header-nav ul li:not(:last-child) {
    margin-right: 3.2vw;
  }

  .nav-link:is(:link, :visited) {
    font-size: 1.2vw;
  }

  .sticky {
    height: 4.8vw;
  }

  /* Hero Style */
  .section-hero {
    height: calc(100vh - 3.2vw);
  }
  .hero-sub-heading {
    font-size: 2.6vw;
  }
  .heading-primary {
    font-size: 3.7vw;
    max-width: 55.24vw;
    margin-top: 2.4vw;
    margin: 0 3.2vw;
  }
  .btn-primary:is(:link, :visited) {
    gap: 1.2vw;
    padding: 1.2vw 2.4vw;
    margin-top: 4.79vw;
    font-size: 1.2vw;
  }
  .no-flexbox-gap.btn-primary .btn-primary-icon {
    margin-left: 1.2vw;
  }

  .btn-primary-icon {
    width: 1.6vw;
    height: 1.6vw;
  }

  /* Work Style */
  .work-container {
    width: 85vw;
    margin: 9.6vw 3.2vw;
    gap: 12.8vw;
  }
  .no-flexbox-gap.work-container div:not(:last-child) {
    margin-bottom: 12.8vw;
  }

  .work-box {
    gap: 4.8vw;
  }
  .no-flexbox-gap.work-box div:not(:last-child) {
    margin-right: 4.8vw;
  }

  .work-img-box {
    width: 40vw;
    height: 22.5vw;
    padding: 3.2vw 3.2vw 0 3.2vw;
  }
  .work-img-box a {
    width: 33.6vw;
    height: 22.5vw;
  }
  .work-text-box {
    max-width: 35.07vw;
  }
  .btn-work:is(:link, :visited) {
    font-size: 1.2vw;
    gap: 1.2vw;
  }
  .no-flexbox-gap.btn-work .btn-work--icon {
    margin-left: 1.2vw;
  }

  .btn-work--icon {
    height: 1.5vw;
    width: 1.5vw;
  }
  .project-heading {
    font-size: 1.8vw;
    margin-bottom: 1.09rem;
  }

  /* Service Style */
  .section-service {
    padding: 4.8vw 0;
  }
  .service-container {
    margin-top: 6.4vw;
    gap: 3.2vw;
    padding: 0 3.2vw;
  }
  .no-flexbox-gap.service-container div:not(:last-child) {
    margin-right: 3.2vw;
  }

  .service-box {
    max-width: 20vw;
    padding: 2.4vw;
    box-shadow: 0 0.35vw 0.75vw #00000015;
  }
  .service-heading {
    margin-top: 1.6vw;
    font-size: 1.2vw;
  }
  .service-description {
    margin-top: 1.09rem;
    font-size: 1vw;
  }
  .service-icon-box {
    width: 5vw;
    height: 5vw;
  }

  /* Contact Style */
  .section-contact {
    padding: 4.8vw 0;
  }
  .contact-form {
    gap: 2.4vw;
    width: 50vw;
    margin-top: 6.4vw;
  }
  .no-flexbox-gap.contact-form .contactEl:not(:last-child) {
    margin-bottom: 2.4vw;
  }

  .name-email {
    gap: 2.4vw;
  }
  .no-flexbox-gap.name-email .form-el:not(:last-child) {
    margin-right: 2.4vw;
  }

  .form-el {
    height: 3.2vw;
    padding: 1.09rem;
  }
  .input-message {
    height: 9.6vw;
    padding: 0.4vw;
  }
  .btn-cta {
    padding: 1.2vw 2.4vw;
    margin-top: 1.6vw;
    border-radius: 5vw;
    font-size: 1.2vw;
  }

  /* Footer Style */
  .footer {
    /* padding: 3.2vw 3.2vw; */
    padding: 3.2vw 3.2vw 1.6vw 3.2vw;
  }
  /* .no-flexbox-gap.footer-nav {
    margin-right: 4.8vw;
  } */

  .footer-link-list {
    gap: 1.6vw;
  }
  .no-flexbox-gap.footer-link-list li:not(:last-child) {
    margin-right: 1.6vw;
  }

  .footer-link-list .nav-link:is(:link, :visited) {
    font-size: 1.2vw;
  }
  .email {
    font-size: 1.5vw;
  }
  .social-list {
    gap: 3.2vw;
    /* margin-top: 2.4vw; */
  }
  .no-flexbox-gap.social-list li:not(:last-child) {
    margin-right: 3.2vw;
  }

  .social-link img {
    height: 2.4vw;
  }
  .copyright {
    /* margin-top: 2.4vw; */
    font-size: 1vw;
  }
}

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/*\\\\\\\\\\\\ 1366px and below \\\\\\\\\\\\*/
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
@media (max-width: 81.25em) {
  /* General Style */
  .sec-s-head {
    font-size: 1.63rem;
  }
  .sec-l-head {
    font-size: 3.27rem;
  }
  .paragraph {
    font-size: 1.63rem;
  }

  /* Animation Style */
  .work-box {
    transform: translate(0, 13.11rem);
  }
  .box-up {
    transform: translate(0, 0);
  }

  .img-work--link::after {
    font-size: 2.45rem;
  }
  .img-up {
    transform: translate(0, -4.37rem);
  }

  .service-box:hover {
    transform: translate(0, -1.63rem);
  }

  /* Header Style */
  .main-header {
    padding: 0 3.2rem;
    height: 6.4rem;
  }
  .logo {
    font-size: 2.04rem;
  }
  .header-nav ul {
    gap: 4.37rem;
  }
  .no-flexbox-gap.header-nav ul li:not(:last-child) {
    margin-right: 4.37rem;
  }

  .nav-link:is(:link, :visited) {
    font-size: 1.63rem;
  }

  .sticky {
    height: 6rem;
  }

  /* Hero Style */
  .section-hero {
    height: calc(100vh - 4.37rem);
  }
  .hero-sub-heading {
    font-size: 3.55rem;
  }
  .heading-primary {
    font-size: 5.05rem;
    max-width: 75.45rem;
  }
  .btn-primary:is(:link, :visited) {
    gap: 1.63rem;
    padding: 1.63rem 3.27rem;
    margin-top: 6.54rem;
    font-size: 1.63rem;
  }
  .no-flexbox-gap.btn-primary .btn-primary-icon {
    margin-left: 1.63rem;
  }

  .btn-primary-icon {
    width: 2.18rem;
    height: 2.18rem;
  }

  /* Work Style */
  .work-container {
    width: 100%;
    margin: 13.11rem 0;
    padding: 0 4.8rem;
    gap: 19.2rem;
  }
  .no-flexbox-gap.work-container div:not(:last-child) {
    margin-bottom: 19.2rem;
  }

  .work-box {
    gap: 6.4rem;
  }
  .no-flexbox-gap.work-box div:not(:last-child) {
    margin-right: 6.4rem;
  }

  .work-img-box {
    width: 54.64rem;
    height: 30.73rem;
    padding: 4.37rem 4.37rem 0 4.37rem;
  }
  .work-img-box a {
    width: 45.89rem;
    height: 30.73rem;
  }
  .work-text-box {
    max-width: 47.9rem;
  }
  .btn-work:is(:link, :visited) {
    font-size: 1.63rem;
    gap: 1.63rem;
  }
  .no-flexbox-gap.btn-work .btn-work--icon {
    margin-left: 1.63rem;
  }

  .btn-work--icon {
    height: 2.04rem;
    width: 2.04rem;
  }
  .project-heading {
    font-size: 2.45rem;
    margin-bottom: 1.09rem;
  }

  /* Service Style */
  .section-service {
    padding: 6.55rem 0;
  }
  .service-container {
    margin-top: 8.74rem;
    gap: 4.37rem;
    padding: 0 4.37rem;
  }
  .no-flexbox-gap.service-container div:not(:last-child) {
    margin-right: 4.37rem;
  }

  .service-box {
    max-width: 27.32rem;
    padding: 3.27rem;
    box-shadow: 0 0.47rem 1.024rem #00000015;
  }
  .service-heading {
    margin-top: 2.18rem;
    font-size: 1.63rem;
  }
  .service-description {
    margin-top: 1.09rem;
    font-size: 1.366rem;
  }
  .service-icon-box {
    width: 6.83rem;
    height: 6.83rem;
  }

  /* Contact Style */
  .section-contact {
    padding: 6.55rem 0;
  }
  .contact-form {
    gap: 3.27rem;
    width: 68.3rem;
    margin-top: 8.74rem;
  }
  .no-flexbox-gap.contact-form .contactEl:not(:last-child) {
    margin-bottom: 3.27rem;
  }

  .name-email {
    gap: 3.27rem;
  }
  .no-flexbox-gap.name-email .form-el:not(:last-child) {
    margin-right: 3.27rem;
  }
  .form-el {
    height: 4.37rem;
    padding: 1.09rem;
  }
  .input-message {
    height: 13.11rem;
    padding: 0.54rem;
  }
  .btn-cta {
    padding: 1.63rem 3.27rem;
    margin-top: 2.18rem;
    border-radius: 6.83rem;
    font-size: 1.63rem;
  }

  /* Footer Style */
  .footer {
    /* padding: 3.2rem 3.2rem; */
    padding: 4.37rem 4.37rem 1.63rem 4.37rem;
  }
  /* .no-flexbox-gap.footer-nav {
    margin-right: 6.55rem;
  } */

  .footer-link-list {
    gap: 2.18rem;
  }
  .no-flexbox-gap.footer-link-list li:not(:last-child) {
    margin-right: 2.18rem;
  }

  .footer-link-list .nav-link:is(:link, :visited) {
    font-size: 1.63rem;
  }
  .email {
    font-size: 2.04rem;
  }
  .social-list {
    gap: 4.37rem;
    /* margin-top: 3.27rem; */
  }
  .no-flexbox-gap.social-list li:not(:last-child) {
    margin-right: 4.37rem;
  }

  .social-link img {
    height: 3.27rem;
  }
  .copyright {
    /* margin-top: 3.27rem; */
    font-size: 1.366rem;
  }
}

/* 1190px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media (max-width: 73em) {
  .img-up {
    transform: translate(0, -3.67vw);
  }
  .work-img-box {
    width: 46.08vw;
    height: 25.83vw;
    padding: 3.67vw 3.67vw 0 3.67vw;
  }
  .work-img-box a {
    width: 38.61vw;
    height: 25.83vw;
  }
}

/* 1024px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media (max-width: 64em) {
  .nav-link:active {
    color: var(--col-pr);
  }
  .nav-link:hover.nav-link::after {
    width: 0;
  }

  .section-hero {
    max-height: 61.93rem;
  }

  /* Work Style */
  .work-box {
    flex-direction: column;
  }
  .no-flexbox-gap.work-box div:not(:last-child) {
    margin-right: 0;
    margin-bottom: 6.4rem;
  }

  .work-box:nth-of-type(even) {
    flex-direction: column;
  }
  .img-up {
    transform: translate(0, -3.75rem);
  }
  .work-img-box {
    width: 51.2rem;
    height: 33.15rem;
    padding: 3.75rem 3.75rem 0 3.75rem;
  }
  .work-img-box a {
    width: 100%;
    height: 33.15rem;
  }
  .work-text-box {
    max-width: 51.2rem;
  }
}

/* 880px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*/
@media (max-width: 55em) {
  /* Header Style */
  .header-nav {
    position: absolute;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    display: flex;
    align-items: center;
    justify-content: center;
    background: #fffffff1;

    /* Hiding navigation */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translatex(100%);
    /* backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px); */
    transition: all 0.5s ease-in;
  }
  .nav-open .header-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translatex(0);
  }
  .nav-open .icon-mobile-nav[name='close-outline'] {
    display: block;
  }
  .nav-open .icon-mobile-nav[name='menu-outline'] {
    display: none;
  }

  .header-nav ul {
    flex-direction: column-reverse;
    align-items: center;
  }
  .no-flexbox-gap.header-nav ul li:not(:last-child) {
    margin-right: 0;
    margin-top: 4.37rem;
  }

  .nav-link:is(:link, :visited) {
    font-size: 2.4rem;
  }

  .window-nav {
    display: flex;
  }
  .mobile-nav {
    display: block;
  }

  /* Hero Style */
  .section-hero {
    justify-content: flex-start;
  }
  .heading-primary {
    max-width: 60.36rem;
    margin: 3.27rem 4.37rem 0 4.37rem;
  }
  .hero-sub-heading {
    margin-top: 6.54rem;
  }
  .btn-primary:is(:link, :visited) {
    margin-bottom: 6.54rem;
  }

  /* Work Style */
  .img-up.img-work--link::after {
    opacity: 1;
  }

  .img-up .img-work {
    transform: scale(1.2);
  }
  .img-work:hover {
    transform: none;
  }
  .img-work--link:hover.img-work--link::after {
    opacity: 0;
  }
  .img-work--link::after {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Service Style */
  .service-container {
    flex-direction: column;
  }
  .no-flexbox-gap.service-container div:not(:last-child) {
    margin-right: 0;
    margin-bottom: 4.37rem;
  }

  .service-box {
    max-width: 51.2rem;
  }
  .service-description {
    font-size: 1.63rem;
  }

  /* Contact Style */
  .contact-form {
    max-width: 51.2rem;
    gap: 2.4rem;
  }
  .no-flexbox-gap.contact-form .contactEl:not(:last-child) {
    margin-bottom: 2.4rem;
  }
  .name-email {
    flex-direction: column;
    width: 100%;
    gap: 2.4rem;
  }
  .no-flexbox-gap.name-email .form-el:not(:last-child) {
    margin-bottom: 2.4rem;
  }

  .input-email {
    width: 100%;
  }

  /* Footer Style */
  .footer {
    flex-direction: column;
    padding: 3.2rem 6.4rem 2.4rem;
  }
  .footer-nav {
    flex-direction: row;
    margin-bottom: 4.8rem;
  }
  .email {
    display: none;
  }
  .email-portrait {
    display: inline-block;
  }

  .footer-link-list {
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 0;
  }
  .footer-link-list .nav-link:hover.nav-link::after {
    width: 0;
  }
}

/* 720px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
@media (max-width: 45em) {
  .hero-sub-heading {
    font-size: 4.93vw;
  }
  .heading-primary {
    font-size: 7.01vw;
    max-width: 104.23vw;
    margin: 4.54vw 4.37rem 0 4.37rem;
  }

  /* Work Style */
  .work-container {
    padding: 0;
  }

  /* Contact Style */
  .section-contact {
    padding: 6.55rem 3.75rem;
  }
}

/* 576px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
@media (max-width: 36em) {
  .work-img-box {
    width: 100%;
  }
  .work-text-box {
    max-width: 100%;
    padding: 0 3.75rem;
  }
  .contact-form {
    max-width: 100%;
  }
}

/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\ 540px \\\\\\\\\\\\\\\\\\ */
/* \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
@media (max-width: 33.75em) {
  /* General Style */
  .sec-s-head {
    font-size: 3.01vw;
  }
  .sec-l-head {
    font-size: 6.05vw;
  }
  .work-box {
    transform: translate(0, 0);
  }
  .hidden {
    display: none;
  }
  .read-more-btn {
    display: inline;
  }

  .main-header {
    padding: 0 5.92vw;
  }
  /* Hero Style */
  .section-hero {
    height: auto;
  }
  .hero-sub-heading {
    font-size: 4.92vw;
  }
  .heading-primary {
    letter-spacing: -1.5px;
  }
  .service-box:hover {
    transform: translate(0, 0);
  }

  /* Work  Style */
  .work-img-box {
    height: 61.38vw;
  }
  .work-img-box a {
    height: 61.38vw;
  }

  /* Footer Style */
  .footer {
    padding: 3.2rem 3.2rem 2.4rem;
  }
  .footer-nav {
    padding: 0;
  }
  .footer-link-list .nav-link:is(:link, :visited) {
    font-size: 3.01vw;
  }
  .email {
    font-size: 3.77vw;
  }
  .copyright {
    margin-top: 6.05vw;
    font-size: 2.52vw;
  }
}

/* 400px \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ */
@media (max-width: 25em) {
  .hero-sub-heading {
    font-size: 1.96rem;
  }
  .heading-primary {
    font-size: 2.8rem;
    margin: 4.54vw 8.5vw 0 8.5vw;
  }
}