/* Nav-Styles */
@media (max-width: 1024px) {
  main {
    padding-inline: 2rem;
  }

  @media (max-width: 768px) {
    .bg-element {
      display: none;
    }

    @media (max-width: 575px) {
      html {
        scroll-padding-block-start: 3.5rem;
      }
    }
  }
}

@media (max-width: 1024px) {
  .nav-logo {
    display: block;
    /* overflow: hidden;  */
    position: relative;
    z-index: 11;
    font-size: 24px;
    color: var(--current-secondary);
    /* width: 50px; */
    transition: 0.5s;
  }

  .nav-logo h1 {
    /* display: none; */
    /* font-family: "Nothing You Could Do"; */
    opacity: 0;
    transform: translateY(100%);
    transition: 0.5s;
  }

  header.scrolled .nav-logo h1 {
    display: inline-flex;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-toggle {
    display: block;
    position: relative;
    z-index: 11;
  }

  .nav-toggle.active .bar:nth-child(1) {
    transform: translateY(4.5px) rotate(45deg);
  }

  .nav-toggle.active .bar:nth-child(2) {
    transform: translateY(-4.5px) rotate(-45deg);
  }

  .nav-menu {
    position: fixed;
    top: 0;
    left: -100%;
    height: 100vh;
    /* height: 100svh; */
    /* problem */
    background: var(--current-primary);
    flex-direction: column;
    padding-block: 4rem;
    /* overflow-y: scroll; */
    /* problem */
    transition: left 0.5s ease-out;
  }

  .nav-menu.active {
    left: 0;
  }

  .min_nav-menu {
    flex-direction: column;
  }

  nav ul {
    flex-direction: column;
    gap: 32px;
    padding: 100px 80px;
    /* problem */
    width: 100%;
  }

  nav ul li .link_wrapper i,
  nav ul li .link_wrapper h1 {
    font-size: 32px;
  }

  nav ul li .nav-link:hover h1 {
    margin-left: 2.5rem;
  }

  .link_wrapper {
    overflow: hidden;
    display: block;
  }

  .nav-menu .social-links-text {
    display: flex;
  }

  .main_link {
    opacity: 0;
    transform: translateX(100%);
  }

  nav .nav-menu.active:not(.closing) ul li .main_link {
    animation: fadeInFromBottom 0.4s ease-out forwards;
  }

  nav .nav-menu.active:not(.closing) ul li:nth-child(1) .main_link {
    animation-delay: 0.5s;
  }

  nav .nav-menu.active:not(.closing) ul li:nth-child(2) .main_link {
    animation-delay: 0.6s;
  }

  nav .nav-menu.active:not(.closing) ul li:nth-child(3) .main_link {
    animation-delay: 0.7s;
  }

  nav .nav-menu.active:not(.closing) ul li:nth-child(4) .main_link {
    animation-delay: 0.8s;
  }

  nav .nav-menu.active:not(.closing) ul li:nth-child(5) .main_link {
    animation-delay: 0.9s;
  }

  .nav-toggle.active .bar {
    background: var(--current-secondary);
  }

  .nav-menu.active ul li .nav-link {
    color: var(--current-secondary);
  }

  .book_now {
    font-size: 20px;
    max-width: calc(100% - 20%);
    padding: 20px 12px;
  }
}

@media (max-width: 990px) {
  .cursor {
    display: none;
  }

  @media (max-width: 768px) {
    .nav-logo {
      font-size: 20px;
    }
  }

  @media (max-width: 575px) {
    .navbar {
      padding-block: 15px;
    }

    .nav-logo {
      font-size: 14px;
    }

    .nav-logo.active {
      transform: translateX(17px) scale(1.2);
    }

    nav ul {
      padding: 80px 32px;
      /* problem */
    }

    .back-top-btn {
      width: 60px;
      height: 60px;
      font-size: 14px;
    }

  }
}

/* Home-Styles */
@media (max-width: 1280px) {
  #home .vector-one {
    left: -40px;
  }

  @media (max-width: 1024px) {
    .small1 {
      top: 36%;
      right: 20%;
    }

    .small2 {
      top: 60%;
      left: 5%;
    }

    .scroll_btn {
      font-size: 20px;
    }

    .scroll_btn svg {
      width: 40px;
      height: 30px;
    }
  }
}

@media (min-width: 768px) {
  #home {
    background-position: 50% 13%;
  }
}

@media (max-width: 768px) {
  .role {
    padding-inline: 8px 35px;
  }
}

@media (max-width: 575px) {
  .home-section {
    padding-block: 80px 10px;
  }

  .role {
    padding-inline: 8px 30px;
  }

  .role h6 {
    font-size: 18px;
  }

  .small1 {
    top: 23%;
    right: 20%;
  }

  .small2 {
    top: 28%;
    left: 5%;
  }

  .scroll_btn {
    font-size: 16px;
  }

  .scroll_btn svg {
    width: 32px;
    height: 24px;
  }

  .scroll_btn svg rect {
    stroke-width: 2px;
  }
}

/* Home_Intro-Styles */
@media (max-width: 900px) {
  .home_intro-section .about-quote {
    font-size: 20px;
  }

  .stats-flex {
    grid-template-columns: repeat(2, 1fr);
    gap: 0px;
  }

  .stat:not(:nth-of-type(1), :nth-of-type(3)) {
    border-right: 1px solid transparent;
  }

  .stat:not(:nth-of-type(3), :nth-of-type(4)) {
    border-bottom: 1px solid var(--current-border-fade);
  }

  .stat h3 {
    font-size: 28px;
  }

  .stat h6 {
    font-size: 18px;
  }

  @media (max-width: 768px) {
    .intro h1 {
      font-size: 60px;
    }

    .dottie {
      display: none;
    }
  }

  @media (max-width: 575px) {
    .home_intro {
      padding-block: 50px;
    }

    .intro h1 {
      font-size: 56px;
    }

    .intro .extend {
      font-size: 18px;
      line-height: 18px;
    }

    .intro .typing {
      height: 18px;
      line-height: 18px;
    }

    @keyframes show {
      100% {
        transform: translateY(-71.5px);
      }
    }

    .home_intro-section .about-quote {
      font-size: 16px;
    }

    .btns .btn {
      padding: 12px 20px;
      font-size: 16px;
    }

    .btns .btn-fill,
    .btns .btn-outline {
      border: 1px solid var(--current-secondary);
    }
  }
}

/* Features-Styles */
@media (max-width: 1024px) {
  .featured-contents {
    gap: 30px;
  }

  .featured-head {
    max-width: 400px;
  }

  .featured-head h1 {
    font-size: 32px;
  }

  .featured-head p {
    font-size: 20px;
  }

  .featured .info h2 {
    font-size: 26px;
  }

  .featured .info p {
    font-size: 18px;
  }
}

@media (max-width: 880px) {
  .featured-head {
    max-width: 320px;
  }

  .featured-head p {
    font-size: 18px;
  }

  .featured-head h1 {
    font-size: 28px;
  }

  .featured .info h2 {
    font-size: 24px;
  }
}

@media (max-width: 675px) {
  .featured-contents {
    grid-template-columns: 1fr;
  }

  .featured-head {
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    margin-block-end: 30px;
  }

  .featured-head h1 {
    font-size: 32px;
  }

  .featured-head p {
    font-size: 20px;
  }

  .featured .info h2 {
    font-size: 28px;
  }

  .featured-right {
    margin-block-start: 0;
  }
}

@media (max-width: 575px) {
  #featured {
    padding-block: 50px;
  }

  .featured::before {
    height: 30%;
  }

  .featured-left .item2,
  .featured-right .item4 {
    margin-block-start: 30px;
  }

  .featured .info {
    padding: 0 0 20px 10px;
  }

  .featured .info h2 {
    font-size: 24px;
  }
}

/* Catalogue-Styles */
@media (max-width: 800px) {
  .catalogue-section {
    gap: 10px;
  }

  .catalogue-head h1 {
    font-size: 50px;
  }

  .catalogue-grid {
    grid-template-columns: 1fr 1fr;
  }

  .catalogue-item:nth-child(even) {
    margin: 0;
  }
}

@media (max-width: 575px) {
  #catalogue {
    padding-block: 50px 100px;
  }

  .catalogue-grid {
    grid-template-columns: 1fr;
  }

  .catalogue-card :is(.card-title, .card-tag) {
    transform: translateY(0);
    opacity: 1;
  }

  .catalogue-card_btn {
    transform: scale(1);
  }

  .catalogue-item:is(:hover, :focus-within) .catalogue-card {
    animation-play-state: running;
  }
}

@media (max-width: 480px) {
  .catalogue-head h1 {
    font-size: 40px;
  }

  .catalogue-card .card-title {
    font-size: 24px;
  }

  .catalogue-card .card-tag {
    font-size: 18px;
  }

  .catalogue-card_btn {
    width: 60px;
    height: 60px;
  }
}

/* Resume-Styles */
@media (max-width: 1024px) {
  .resume-head {
    max-width: 250px;
  }

  .resume-head h1 {
    font-size: 24px;
  }

  .resume-details {
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    gap: 30px;
    min-height: 500px;
  }
}

@media (max-width: 768px) {
  #resume {
    padding-block: 50px;
  }

  .resume-section {
    gap: 30px;
  }

  .resume-head {
    max-width: 100%;
    align-items: flex-start;
    text-align: left;
    bottom: 0;
  }

  .resume-head h1 {
    font-size: 32px;
  }

  .resume-details {
    grid-template-columns: 1fr;
  }

  .resume-details .tabs {
    flex-direction: row;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
  }

  .resume-details .tabs label {
    gap: 10px;
    padding: 8px 10px;
    font-size: 15px;
  }
}

@media (max-width: 675px) {
  .resume-head h1 {
    font-size: 26px;
  }
}

@media (max-width: 480px) {
  .resume-head {
    align-items: flex-start;
    text-align: left;
  }

  .resume-head h1 {
    font-size: 30px;
  }

  .all-info .title h2 {
    font-size: 24px;
  }

  .all-info p {
    font-size: 16px;
  }

  .list .item h4 {
    font-size: 18px;
  }
}

/* Testimonials-Styles */
@media (max-width: 768px) {
  .testimonial-head h1 {
    font-size: 50px;
  }
}

@media (max-width: 480px) {
  .testimonial-head h1 {
    font-size: 32px;
  }

  .swiper-buttons {
    display: none;
  }
}

/* Contact-Styles */
@media (max-width: 990px) {
  #contact {
    padding-block: 100px;
  }

  .contact-img {
    display: none;
  }

  .contact-message h1 {
    font-size: 40px;
  }
}

@media (max-width: 575px) {
  #contact {
    padding-block: 100px 50px;
  }

  .contact-section {
    gap: 30px;
  }

  .contact-message h1 {
    font-size: 36px;
  }

  .contact-btn {
    width: 60px;
    height: 60px;
    padding: 10px;
    font-size: 26px;
  }

  @media (max-width: 480px) {
    .contact-title {
      font-size: 16px;
    }
  }
}

/* Footer-Styles */
@media (max-width: 768px) {
  .footer-section {
    flex-direction: column;
    gap: 20px;
  }

  .footer-section .link {
    order: 3;
  }

  @media (max-width: 480px) {
    .footer-logo span {
      font-size: 16px;
    }

    .footer-section .link {
      font-size: 16px;
    }
  }
}

/* Catalogue-page */
@media (min-width: 1025px) {
  .grid-wrapper {
    columns: 4;
    gap: 10px;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-wrapper {
    columns: 3;
    gap: 10px;
  }
}

@media (min-width: 768px) {
  .modal-img img {
    object-position: 50% 11%;
  }
}

@media (max-width: 1024px) {
  .catalog-title span {
    font-size: 64px;
  }

  .catalog-subtitle span {
    font-size: 36px;
  }

  .filter-controls {
    max-width: 900px;
    margin: 20px auto;
  }

  .modal_content {
    padding: 0 30px 40px;
  }

  .modal-img {
    max-height: 70vh;
  }

  .modal-details {
    padding: 30px;
  }

  .modal-details .client {
    font-size: 30px;
  }

  .modal-info .date {
    font-size: 18px;
  }

  .modal-info .deliverables {
    font-size: 18px;
  }

  .modal-info_title {
    margin-block-end: 5px;
  }

  @media (max-width: 768px) {
    .catalog {
      /* grid-template-columns: repeat(2, 1fr); */
      gap: 6px;
    }

    .filter-btn {
      gap: 10px;
      padding: 8px 15px;
    }

    .modal-details .client {
      font-size: 24px;
    }

    .modal-info {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      padding: 24px;
    }

    .modal-info .date {
      font-size: 16px;
      align-self: unset;
      transform: rotate(0deg) translate(0%);
    }

    .modal-info .deliverables {
      font-size: 18px;
    }

    .modal-info_title {
      margin-block-end: 5px;
    }

    /* .modal-title {
      font-size: 32px;
    }

    .modal-info-grid {
      grid-template-columns: repeat(2, 1fr);
    } */

    .grid-wrapper {
      columns: 2;
      gap: 8px;
    }

    .grid-wrapper a {
      margin-bottom: 8px;
    }

    .fancybox__container {
      min-height: 100svh !important;
      min-height: 100dvh !important;
    }

    .fancybox__slide {
      padding: 0 !important;
      max-height: 100svh !important;
    }

    .fancybox__content {
      max-height: calc(100svh - 80px) !important;
      max-height: calc(100dvh - 80px) !important;
      max-width: 100vw !important;
    }

    .fancybox__toolbar {
      top: env(safe-area-inset-top, 10px) !important;
      padding: 10px !important;
    }

    .fancybox__caption {
      bottom: env(safe-area-inset-bottom, 10px) !important;
    }

    .fancybox__nav,
    .fancybox-custom-arrow {
      display: none !important;
    }
  }

  @media (max-width: 575px) {
    #catalog {
      padding-block: 40px;
    }

    .catalog-title span {
      font-size: 48px;
    }

    .catalog-subtitle span {
      font-size: 24px;
    }

    .photo::before {
      opacity: 1;
      background: var(--shadow-light);
    }

    .photo .info {
      opacity: 1;
      transform: translateY(0);
    }

    .modal_content {
      padding: 0 15px 30px;
    }

    .modal-body {
      gap: 20px;
    }

    .modal-img {
      max-height: 60vh;
    }

    .modal-details {
      padding: 15px;
    }

    .modal-details .client {
      font-size: 20px;
    }

    .modal-info .deliverables {
      font-size: 16px;
    }

    .modal-info_title {
      margin: 0;
      font-size: 15px;
    }

    .fancybox__footer {
      display: none !important;
    }
  }

  @media (max-width: 450px) {
    .modal-img {
      max-height: 50vh;
    }

    .fancybox__toolbar__column {
      flex-grow: 0 !important;
      justify-content: center !important;
      padding-block: 5px !important;
    }
  }
}