/* screen >= 560px */
@media (min-width: 35em) {
  .site-header {
    margin-top: 10rem;
  }

  .nav {
    height: 10rem;
  }

  .header-imgs {
    height: 20rem;
  }

  .nav .grunge-bg img {
    display: block;
  }

  .menu-box .nav__menu.main-menu {
    margin-top: 10rem;
  }
  .nav__menu.main-menu img {
    display: block;
  }

  .nav__contact-menu {
    top: 10rem;
    background: url('/img/background/purple-glitter-opacity-5-nav.jpg');
  }

  h1 {
    text-align: left;
  }

  .hero__item .hero__content {
    width: 320px;
    align-items: start;
  }

  .hero__item .hero__content-box {
    align-items: start;
  }

  .hero__item .hero__content p {
    text-align: left;
  }

  .hero__nav {
    display: block;
  }

  .hero__nav img {
    position: absolute;
  }

  .hero__nav .content {
    display: flex;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    padding: 1.4rem;
  }

  .hero__nav .content .counter {
    display: flex;
    align-items: baseline;
  }

  .hero__nav .content .counter .item-num {
    color: var(--text-color-tertiary);
    font-size: 4.4rem;
  }

  .hero__nav .content .counter .seperator {
    color: var(--accent-color);
    margin-right: 0.4rem;
  }

  .hero__nav .content .counter .item-total {
    color: var(--accent-color);
    font-size: 2.4rem;
  }

  .services-section .container,
  .why-us-section .container {
    width: 56rem;
    margin: 0 auto;
  }

  .services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .services .box:last-child {
    grid-column: span 2;
  }

  .services .box:not(.box:last-child) .service {
    align-items: start;
    padding: 2.4rem;
  }

  .services .box:not(.box:last-child) .service h3,
  .services .box:not(.box:last-child) .service p {
    text-align: left;
  }

  .service p {
    margin: 0;
  }

  .about-content-box {
    flex-direction: row;
  }

  .about-content {
    width: 70%;
  }

  .about-section__controls {
    width: 30%;
  }

  .about-content {
    align-items: start;
    padding-bottom: 0;
  }

  .about-content .about-us-lg {
    display: block;
  }

  .about-content .about-us-sm {
    display: none;
  }

  .about-content .content-box {
    height: 36.5rem;
    align-items: start;
  }

  .about-section .info {
    align-items: start;
    gap: 2.4rem;
  }

  .about-content header h2,
  .about-content p {
    text-align: left;
  }

  .about-content header h2 {
    width: max-content;
  }

  .about-content p {
    line-height: 2;
  }

  .about-section__controls .btn {
    flex: 1;
  }

  .why-us-section .content {
    padding: 4.8rem;
    padding-top: 3.2rem;
  }

  .swiper-why-us .swiper-pagination-why-us {
    gap: 1.2rem;
  }

  .why-us-section .swiper-slide .circle {
    top: 24rem;
  }

  .get-in-touch-section .content {
    height: 24rem;
  }

  .projects-section .container {
    margin-left: 0;
    margin-right: 0;
  }

  .projects-section .projects {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-group dd {
    height: 100%;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */

  #aboutPage section .container {
    width: 56rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin: 0 auto;
  }

  #aboutPage .about-section .container {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  #aboutPage .about-content-box {
    flex-direction: column-reverse;
    width: 100%;
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 56rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin: 0 auto;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 56rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin: 0 auto;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 56rem;
    padding-left: 1.6rem;
    padding-right: 1.6rem;
    margin: 0 auto;
  }
}

/* screen >= 600px */
@media (min-width: 37.5em) {
  .hero__item .hero__img {
    height: 60vh;
  }

  .hero__item .hero__content {
    gap: 3.2rem;
  }

  .services-section .container,
  .why-us-section .container {
    width: 60rem;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */
  #aboutPage section .container {
    width: 60rem;
  }

  #aboutPage .team-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 60rem;
  }

  #contactPage .btn--styled {
    width: 28rem;
  }

  #contactPage .left-column h3 {
    text-align: left;
  }

  .any-page .right-column {
    flex-direction: row;
    justify-content: center;
  }

  .any-page .right-column h5,
  .any-page .right-column p {
    text-align: left;
  }

  .any-page .right-column .social-list,
  .any-page .right-column .info {
    justify-content: left;
  }

  .any-page .right-column .list-group {
    width: 100%;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 60rem;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 60rem;
  }

  #servicePage .contacts .lists {
    display: flex;
  }
}

/* screen >= 752px */
@media (min-width: 47em) {
  .hero__item .hero__img {
    height: 70vh;
  }

  .hero__item .hero__content {
    gap: 4.8rem;
  }

  .services .box:not(.box:last-child) .service {
    padding: 4.8rem;
  }

  .services-section .container,
  .why-us-section .container {
    width: 75rem;
  }

  .about-section__info {
    display: flex;
  }

  .about-img-bg {
    display: flex;
    clip-path: polygon(0 0, 84% 0, 100% 26%, 88% 100%, 0% 100%);
    width: 30%;
  }

  .about-content-box {
    width: 70%;
  }

  .footer-group dt {
    text-align: left;
  }

  .footer-group dd .links,
  .footer-group dd .contact-info {
    align-items: start;
    text-align: left;
  }

  .footer-group dd .contact-info li {
    justify-content: start;
  }

  .footer-bottom .container {
    display: flex;
    justify-content: space-around;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */
  #aboutPage section .container {
    width: 75rem;
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 75rem;
  }

  .contact-form .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem;
  }

  .contact-form .row .col:last-child {
    grid-column: span 2;
  }

  .contact-form .row .col:not(:last-child) {
    margin-bottom: 0;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 75rem;
  }

  .project-box .project-info-section {
    align-items: start;
  }

  .project-box .project-info-section .text h3 {
    text-align: left;
  }

  .project-box .project-info-section .text p {
    text-align: left;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 75rem;
  }
}

/* screen >= 840px */
@media (min-width: 52.5em) {
  .toggler-box,
  .toggler-box.contact {
    display: none;
  }

  .nav {
    padding-right: 2.4rem;
    background-color: transparent;
  }

  .header-imgs {
    height: 24rem;
  }

  .main-menu-open .nav {
    overflow: hidden;
  }

  .menu-box {
    position: relative;
  }

  .menu-box .nav__menu.main-menu {
    padding-top: 0;
    left: 50%;
    top: 50%;
    right: unset;
    bottom: unset;
    transform: translate(-60%, -50%);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: unset;
    width: unset;
    box-shadow: unset;
    visibility: visible;
    opacity: 1;
    margin-top: 0;
    background-color: transparent;
  }

  .nav__contact-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
  }

  .nav__menu.main-menu img {
    display: none;
  }

  .menu-box .nav__menu.main-menu .menu-item .menu-item__link {
    padding: 1.6rem;
  }

  .menu-box,
  .nav__contact-menu {
    display: flex;
  }

  .nav__contact-menu {
    position: relative;
    right: 0;
    bottom: 0;
    top: 47.5%;
    background: unset;
    box-shadow: unset;
  }

  .contact-menu {
    max-width: 48rem;
    display: flex;
    gap: 0.4rem;
  }

  .contact-item {
    position: absolute;
    transform: translateY(-50%);
  }

  .contact-item div {
    gap: 0;
  }

  .contact-item:nth-child(1) {
    top: 0;
    right: 12.9rem;
  }

  .contact-item:nth-child(2) {
    top: 0;
    right: 7rem;
  }

  .contact-item:nth-child(3) {
    top: 0;
    right: 1.2rem;
  }

  .contact-item div {
    display: flex;
    flex-direction: row;
    align-items: center; /* Center items vertically */
    padding: 1rem;
    border: 1px solid var(--text-color-tertiary);
    cursor: pointer;
    overflow: hidden; /* Ensure content doesn't overflow the item */
    background-color: transparent;
    transition: background-color 0.3s ease;
  }

  @keyframes expandDetails {
    0% {
      width: 0;
      opacity: 0;
      visibility: hidden;
      color: #ffffff;
    }
    99% {
      /* Changed to 100% for full visibility */
      width: auto; /* or a specific width */
      opacity: 1;
      visibility: visible;
      color: var(--text-color-primary);
    }
  }

  .contact-item div span.details {
    white-space: nowrap; /* Prevent text wrapping */
    color: #ffffff; /* Default color */
    width: 0; /* Start with width 0 */
    opacity: 0; /* Initially hidden */
    visibility: hidden; /* Initially hidden */
    animation: expandDetails 0.3s ease forwards; /* Use keyframes */
    transition: margin-right 0.3s ease; /* Smooth transition for margin-right */
  }

  .contact-item div:hover {
    background-color: #ffffff; /* Default color */
  }

  .contact-item div:hover span.details {
    width: auto; /* Allow the width to expand */
    opacity: 1; /* Make it visible */
    visibility: visible; /* Make it visible */
    color: var(--text-color-primary);
    margin-right: 2.4rem; /* Space between the text and the icon */
    animation: expandDetails 0.3s ease forwards; /* Ensure animation runs on hover */
  }

  .contact-item div img {
    width: 2.4rem;
  }

  .hero__items {
    padding-left: 10%; /* Match slidesOffsetBefore if needed */
    overflow: visible;
  }

  /* .hero__item .hero__img img {
    width: calc(100% / 1.25);
  } */

  .hero__item .hero__content {
    background-color: transparent;
  }

  .hero__item .hero__content img {
    display: block;
  }

  .hero-footer {
    height: 10rem;
  }

  .hero-footer .swiper-pagination-hero {
    display: none;
  }

  .hero__nav .content {
    gap: 2.4rem;
  }

  .hero__nav {
    width: 28rem;
    height: 10rem;
  }

  .nav-buttons {
    display: flex;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 84rem;
  }

  .get-in-touch-section .box {
    flex-direction: row;
    justify-content: space-between;
    margin: 0 auto;
  }

  .any-page .about-section__controls {
    align-items: start;
    flex: 0.6;
  }

  .any-page .about-section__controls h2 {
    text-align: left;
  }

  .any-page .about-section__controls .btn-container {
    flex-direction: column;
  }

  .any-page .left-column {
    flex: 1.4;
    margin-bottom: 0;
    margin-right: 7.2rem;
  }

  .any-page .right-column {
    padding-left: 3.2rem;
    flex-direction: column;
    justify-content: start;
    border-left: 1px solid #e1e1e1;
    flex: 0.6;
  }

  .any-page .contact-info:not(.site-footer .contact-info) {
    border-top: 1px solid #e1e1e1;
  }

  .any-page .list-group:first-child .contact-info:first-child {
    border-top: none;
    padding-top: 0;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */

  #aboutPage section .container {
    width: 84rem;
  }

  #aboutPage .about-content-box {
    flex-direction: row;
    gap: 3.2rem;
  }

  #aboutPage .about-content {
    flex: 1.4;
    padding: 0;
  }

  #aboutPage .team-list {
    grid-template-columns: repeat(2, 1fr);
  }

  #aboutPage .team-member {
    transition: all 0.3s ease;
  }

  #aboutPage .team-member:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-14px);
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 84rem;
    flex-direction: row;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 84rem;
  }

  .projects-section.page .project-box {
    flex-direction: row;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 84rem;
  }

  #servicePage .service-box {
    flex-direction: row;
  }

  #servicePage .left-column {
    margin-right: 0;
  }

  #servicePage h3 {
    text-align: left;
  }

  #servicePage .right-column {
    align-items: start;
  }

  #servicePage .about-section__controls {
    flex: 0;
  }

  #servicePage .about-section__controls .btn-container {
    align-items: start;
  }

  #servicePage .about-section__controls .btn-container .link {
    text-align: left;
  }

  #servicePage .contacts h3 {
    margin-bottom: 3.2rem;
  }

  #servicePage .contacts .lists {
    flex-direction: column;
  }
}

/* screen >= 1024px */
@media (min-width: 64em) {
  h1 {
    font-size: 3.6rem;
    line-height: 1.6;
  }

  h2 {
    font-size: 3rem;
  }

  h3 {
    font-size: 2.4rem;
  }

  .btn--styled {
    height: 9rem;
  }

  .nav {
    padding: 3.2rem;
  }

  .menu-box .nav__menu.main-menu .menu-item .menu-item__link {
    padding-left: 3.2rem;
    padding-right: 3.2rem;
  }

  .nav__contact-menu {
    top: 90%;
  }

  .hero__items {
    padding-left: 15%; /* Match slidesOffsetBefore if needed */
  }

  /* .hero__item .hero__img {
    height: 80vh;
  } */

  .hero__item .hero__content {
    width: 38rem;
    padding: 0 3.2rem;
  }

  /* .hero__item .hero__content-box {
    gap: 3.2rem;
  } */

  .hero__item .hero__content p {
    font-size: 1.8rem;
  }
  /* 
  .hero-footer {
    height: 12rem;
  } */

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 102rem;
  }

  .services {
    grid-template-columns: repeat(6, 1fr);
  }

  .services .box:nth-child(1),
  .services .box:nth-child(2),
  .services .box:nth-child(3) {
    grid-column: span 2;
  }

  .services .box:nth-child(4),
  .services .box:nth-child(5) {
    grid-column: span 3;
  }

  .services .box:last-child .service {
    align-items: start;
  }

  .services .box:last-child h3,
  .services .box:last-child p {
    text-align: left;
  }

  .about-section__info {
    height: 48rem;
  }

  .about-img-bg {
    width: 35%;
  }

  .about-content-box {
    width: 65%;
  }

  .why-us-section ul {
    gap: 3.2rem;
  }

  .why-us-section .swiper-slide .circle {
    top: 23.5rem;
  }

  .projects-section .projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-box {
    display: flex;
  }

  .footer-list {
    flex: 1.5;
  }

  .footer-box aside.map {
    flex: 1;
    border-top: none;
    border-left: var(--text-color-secondary) 0.5px solid;
    padding: 2.4rem;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */
  #aboutPage section .container {
    width: 102rem;
  }

  #aboutPage .about-content-box {
    gap: 4.8rem;
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 102rem;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 102rem;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 102rem;
  }

  #servicePage .contact-form {
    width: 88rem;
  }
}

/* screen >= 1220px */
@media (min-width: 76.2em) {
  h1 {
    font-size: 4.4rem;
  }

  h2 {
    font-size: 3.6rem;
  }

  .header-imgs {
    height: 28rem;
  }

  .menu-box .nav__menu.main-menu .menu-item .menu-item__link {
    padding-left: 4.8rem;
    padding-right: 4.8rem;
  }

  .hero__item .hero__img {
    height: 75vh;
  }

  .hero__item .hero__content {
    padding: 0 4.8rem;
    width: 48rem;
  }

  .hero__nav .content .counter .item-num {
    font-size: 5.2rem;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 122rem;
  }

  .why-us-section .swiper-slide .circle {
    top: 24rem;
  }

  .about-img-bg {
    width: 40%;
  }

  .about-content-box {
    width: 60%;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */
  #aboutPage section .container {
    width: 122rem;
  }

  #aboutPage .team-list {
    grid-template-columns: repeat(4, 1fr);
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 122rem;
  }

  #contactPage .left-column {
    margin-right: 8rem;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 122rem;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 122rem;
  }

  #servicePage .accordion {
    width: 100%;
  }

  #servicePage .extra {
    display: flex;
    flex-direction: row-reverse;
    gap: 6.4rem;
  }
}

/* screen >= 1300px */
@media (min-width: 81.25em) {
  .hero__item .hero__img {
    height: 79vh;
  }

  .hero__item .hero__content {
    padding: 0 6.4rem;
    width: 48rem;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 130rem;
  }

  .about-section__info {
    height: 54rem;
  }

  .about-content {
    padding: 6.4rem 4.8rem;
  }

  .projects-section .projects {
    grid-template-columns: repeat(8, 1fr);
  }

  .projects-section .project {
    grid-column: span 2;
  }

  .projects-section .project:nth-child(1),
  .projects-section .project:nth-child(2) {
    grid-column: span 4;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */
  #aboutPage section .container {
    width: 130rem;
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 130rem;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 130rem;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 130rem;
  }
}

/* screen >= 1450px */
@media (min-width: 90.625em) {
  .hero__item .hero__content {
    width: 57rem;
  }

  .get-in-touch-section .box,
  .services-section .container,
  .why-us-section .container {
    width: 145rem;
  }

  .why-us-section ul {
    gap: 4.8rem;
  }

  /* **************************************** 
  ABOUT PAGE 
  ****************************************** */
  #aboutPage section .container {
    width: 145rem;
  }

  /* **************************************** 
  CONTACT PAGE 
  ****************************************** */
  #contactPage .container:not(.footer-body .container) {
    width: 145rem;
  }

  /* **************************************** 
  PROJECT PAGE 
  ****************************************** */
  #projectPage .container:not(.footer-body .container) {
    width: 145rem;
  }

  /* **************************************** 
  SERVICE PAGE 
  ****************************************** */
  #servicePage .container:not(.footer-body .container) {
    width: 145rem;
  }
}