@media(max-width: 900px) {

    .resort-about-wrapper {
    flex-direction: column;
  }

  .resort-about-heading {
    font-size: 32px;
  }
    .about-container {
        flex-direction: column;
    }

    .about-right h2 {
        font-size: 2rem;
    }

    .why-container {
        flex-direction: column;
    }

    .why-content,
    .why-boxes {
        width: 100%;
    }

    .contact-section {
        flex-direction: column;
        height: auto;
    }

    .contact-map {
        height: 350px;
        width: 100%;
    }

    .contact-form {
        width: 100%;
    }

    .contact-form {
        padding: 50px 40px;
    }

    .filter-panel {
        flex-wrap: wrap;
        gap: 20px;
    }

    .filter-box {
        flex: 48%;
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .filter-btn {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .experience-wrapper {
        flex-direction: column;
        gap: 50px;
    }

    .experience-content,
    .experience-visual {
        width: 100%;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-brand p {
        max-width: 100%;
    }

    .footer-links,
    .footer-contact,
    .footer-newsletter {
        margin-top: 30px;
    }

    .footer-newsletter form {
        flex-direction: column;
    }

}

@media(max-width: 768px) {
    .cards-container {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 20px;
    }

    .features-container {
        gap: 20px;
    }

    .features-section h2 {
        font-size: 2.2rem;
        padding: 0px 10px;
    }

    .features-section p {

        padding: 0px 10px;
    }

    .gallery-container {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-auto-rows: 150px;
        gap: 15px;
    }

    .gallery-container .gallery-item:nth-child(odd),
    .gallery-container .gallery-item:nth-child(even) {
        grid-row: span 1;
    }

}

@media (max-width: 576px) {

    .service-intro-content {
        width: 90%;
    }

    .experience-content h2 {
        font-size: 32px;
    }

    .contact-form {
        padding: 40px 25px;
    }

    .filter-box {
        flex: 100%;
    }

}