@media (max-width: 576px) {
  .kard {
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }

  .kard.odd {
    animation: card-slide-odd linear;
  }

  .kard.even {
    animation: card-slide-even linear;
  }

  @keyframes kard-slide-odd {
    0% {
      transform: translateX(-100vw);
      opacity: 0;
    }
    50% {
      opacity: 0.25;
    }
    100% {
      transform: translateX(0vw);
      opacity: 1;
    }
  }

  @keyframes kard-slide-even {
    0% {
      transform: translateX(100vw);
      opacity: 0;
    }
    50% {
      opacity: 0.25;
    }
    100% {
      transform: translateX(0vw);
      opacity: 1;
    }
  }

  /* NAVBAR STYLES */
  nav {
    width: 100vw;
    padding: 1em 3em;
    margin-top: 0;
    position: relative;
    justify-content: flex-start;
    gap: 2em;
    position: sticky;
    top: 0;
    background-color: rgba(231, 241, 251, 1);
    z-index: 9;
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.2); /* Shadow at the bottom */
    border-radius: 0 0 0.5em 0.5em;
  }

  nav .logo {
    width: 8em;
  }

  nav .links {
    display: none;
  }

  nav .nav-btn {
    display: none;
  }

  /* MOBILE NAVBAR */

  .responsive-nav-bar {
    position: absolute;
    background: var(--light-gradient);
    color: var(--blue);
    padding: 3em 2em;
    width: 100vw;
    min-height: 100vh;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex; /* Ensure items are displayed in a column */
    flex-direction: column;
    text-align: left;
  }

  .menu-toggle {
    display: block;
    font-size: 2em;
    color: var(--blue);
    padding: 0.25em;
    border: none;
    background-color: var(--light);
    position: absolute;
    right: 1em;
  }

  .close-menu {
    display: block;
    position: absolute;
    background: none;
    border: 1px solid var(--blue);
    border-radius: 0.25em;
    color: var(--blue);
    padding: 0.5em;
    font-size: 2em;
    cursor: pointer;
    top: 2em;
    right: 2em;
  }

  .responsive-logo {
    max-width: 150px;
    margin-bottom: 20px;
  }

  .nav-items {
    display: flex;
    flex-direction: column;
    list-style: none;
    align-items: flex-start;
    gap: 0.5em;
    width: 100%;
    padding: 0;
    margin: 0;
    align-self: center;
  }

  .nav-item {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    padding: 0.5em 0;
    font-size: 1.5em;
    text-align: left;
    color: var(--blue);
    text-decoration: none;
    width: 100%;
    position: relative;
  }

  .nav-item.active {
    background-color: #bfdbf9;
    width: 80svw;
    padding: 0.5em 0 0.5em 0.5em;
    overflow: hidden;
    color: var(--blue);
    /* border: 1px solid var(--blue); */
    border-radius: 0.25em;
  }

  .nav-item::before {
    content: "";
    position: absolute;
    width: 80vw;
    height: 1px;
    background-color: #bfdbf9;
    bottom: 0;
  }

  .nav-item.last::before {
    display: none;
  }

  .dropdown-icon {
    margin-left: 5px;
  }

  .services-dropdown {
    display: none; /* Hide dropdown by default */
  }

  .quote-button {
    padding: 0.8em;
    font-size: 1.25em;
    width: 100%;
    margin-top: 2em;
    position: relative;
    border-radius: 0.25sem;
  }

  .quote-button::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0.25em;
    background-color: var(--blue);
    top: -1.5em;
    left: 50%;
    transform: translateX(-50%);
  }

  /* ALT HERO FOR OTHER PAGES */

  .alt-hero.contact-us {
    height: 45vh;
  }

  .alt-hero.services,
  .alt-hero.our-gallery {
    height: 50vh;
  }

  .alt-hero.faqs {
    height: 60vh;
  }

  /* HERO STYLES */

  .hero {
    /* justify-content: center; */
    height: auto;
    background-position: 20%;
    padding: 1em 0 1.5em 0;
  }

  .hero .content {
    width: 100%;
    padding: 1em;
    text-align: center;
    justify-content: flex-start;
  }

  .hero .content h1 {
    font-size: 3em;
  }

  .hero .content button {
    align-self: center;
  }

  /* STATS STYLES */

  .stats {
    flex-direction: column;
    align-items: center;
    gap: 0.75em;
  }

  .stats .stat-card {
    width: 80%;
  }

  /* ABOUT US STYLES */
  .about-us {
    flex-direction: column;
  }

  .about-us .graphic {
    width: 100%;
  }

  .about-us .content {
    width: 90%;
  }

  /* SERVICES STYLES */
  .our-services .card-container {
    flex-direction: column;
    gap: 5em;
  }

  /* WHY US STYLES */
  .why-us {
    flex-direction: column;
  }

  .why-us .graphic {
    width: 100%;
  }

  .why-us .info {
    width: 90%;
  }

  /* PRICING STYLES */

  .pricing .content {
    flex-direction: column-reverse;
    gap: 1em;
  }

  .pricing .content .main-info {
    font-size: 2.5em;
  }

  .pricing .break {
    display: block;
  }

  /* HOW WE WORK STYLES */
  .how-we-work {
    flex-direction: column;
    gap: 2em;
    margin-bottom: 0;
  }

  .how-we-work .graphic {
    width: 95%;
  }

  .how-we-work .info {
    width: 85%;
    align-self: flex-end;
  }

  .how-we-work .service-steps {
    justify-self: flex-end;
  }

  /* GET IN TOUCH STYLES */
  .get-in-touch {
    flex-direction: column;
    align-items: center;
  }

  .get-in-touch .content {
    width: 100%;
  }

  .get-in-touch .content .info {
    font-size: 1.25em;
    font-weight: 375;
  }

  .get-in-touch .btn-4 {
    font-size: 1.25em;
  }

  /* FOOTER STYLES */

  footer .footer-top {
    flex-direction: column;
    margin-bottom: 0;
    align-items: flex-start;
    width: 100%;
  }

  footer .footer-section.main {
    display: flex;
    flex-direction: column;
    /* align-self: center; */
    gap: 0.5em;
    margin-bottom: 0.5em;
  }

  footer .footer-section.main p {
    font-size: 1.25em;
  }

  /* footer .footer-section.main .socials {
    padding: 0;
    margin: 1em 0;
  } */

  footer .footer-section.text.socials .social-item {
    padding: 0.5em;
    width: 100%;
    font-size: 1.3em;
  }

  footer .footer-section.main .socials img {
    height: 2em;
  }

  footer .footer-section.text {
    height: auto;
    gap: 1em;
    margin: 1em 0;
  }

  footer .footer-section.text h3 {
    font-size: 1.5em;
    margin: 0.5em;
  }

  footer .footer-section.text .link-item {
    font-size: 1.25em;
  }

  footer .footer-section.form {
    align-self: center;
    margin-bottom: 1em;
    width: 100%;
  }

  footer .footer-section.form h3 {
    font-size: 2em;
  }

  footer .footer-section.form p {
    font-size: 1.3em;
  }

  footer .footer-section.form .inputs {
    font-size: 1.25em;
  }

  footer .footer-section.form button {
    font-size: 1.25em;
  }

  footer .footer-top .logo {
    width: 12em;
  }

  .footer .footer-bottom {
    flex-direction: column;
    gap: 0.25em;
  }

  /* PAGES -- SERVICES */

  .service-item {
    display: flex;
    flex-direction: column;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.2);
    margin: 1em;
    border-radius: 0.5em;
  }

  .service-item::before {
    /* bottom border */
    content: "";
    position: absolute;
    bottom: 0;
    width: 70%;
    height: 1px;
    background-color: var(--blue);
    display: none;
  }

  .service-item.even {
    flex-direction: column;
    background-color: #bfdbf9;
  }

  .service-item .graphic {
    width: 100%;
    height: auto;
  }

  .service-item .info {
    width: 100%;
  }

  /* PAGES -- GALLERY */
  .about-us.gallery-sec {
    margin: 0;
    padding: 1em 0;
  }

  .slideshow-container {
    height: auto;
    padding: 1em 0;
    margin: 0 0 1em 0;
  }

  /* PAGES -- QUOTATION */
  .container-quote {
    margin: 2em 1em;
  }

  .container-quote h1 {
    margin: 0 0 1em 0;
  }

  .container-quote .quote-inputs {
    font-size: 1.25em;
  }

  .container-quote label {
    font-size: 1.25em;
  }

  .container-quote button {
    font-size: 1.25em;
    margin-top: 1em;
  }

  /* PAGES -- FAQSs */

  .container {
    margin-top: 0;
    background-color: var(--light);
  }

  .faq-answer h3 {
    text-align: center;
  }

  /* PAGES -- CONTACT PAGE */
  .contact-us-section {
    flex-direction: column;
    height: auto;
    justify-self: center;
    margin: 1em;
    overflow: hidden;
    justify-content: center;
  }

  .contact-us-section .inputs-side {
    width: 100%;
    gap: 0.25em;
  }

  .contact-us-section .inputs-side .personal-details,
  .contact-us-section .inputs-side .personal-contacts {
    flex-direction: column;
    font-size: 1.25em;
    gap: 0.25em;
  }

  .contact-us-section label {
    font-size: 1em;
  }

  .contact-us-section input {
    font-size: 1em;
    width: 100%;
    border-radius: 0.25em;
  }

  .contact-us-section .details-side {
    display: none;
  }

  .contact-us-section button {
    width: 100%;
  }

  .contact-us-section textarea {
    width: 100%;
    font-size: 1em;
  }
}

/* Small tablets */
@media (min-width: 576px) and (max-width: 768px) {
}

@media (min-width: 768px) and (max-width: 992px) {
}