@media (max-width: 768px) {

    .navbar {
        padding: 20px;
    }
    .stays-navbar{
         padding: 20px;
         
    }

    .nav-links,
    .nav-actions {
        display: none;
    }

    .menu-btn {
        display: block;
    }

    .hero {
        min-height: 100vh;
    }

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

    .hero-description {
        font-size: 14px;
    }

    .search-bar {
        bottom: 20px;

        width: calc(100% - 40px);

        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .search-item {
        border-right: none;
        border-bottom: 1px solid #ddd;
    }

    .search-btn {
        grid-column: span 2;
        width: 100%;
    }
}


@media (max-width: 768px) {

    .intro-section {
        padding: 90px 20px;

        display: flex;
        flex-direction: column;

        gap: 50px;

        align-items: stretch;
    }

    .intro-content h2 {
        font-size: 52px;
    }

    .intro-text {
        font-size: 14px;
    }

    .intro-image {
        height: 500px;
    }

}

@media (max-width: 768px) {

    .featured-stays {
        padding: 90px 20px;
    }

    .section-header {
        display: block;
    }

    .section-header .text-link {
        margin-top: 30px;
    }

    .stays-grid {
        display: flex;

        overflow-x: auto;

        gap: 16px;

        padding-bottom: 20px;
    }

    .stay-card {
        min-width: 82vw;
    }

    .stay-image {
        height: 450px;
    }

    .stay-title h3 {
        font-size: 25px;
    }

}

@media (max-width: 768px) {

    .destinations-section {
        padding: 90px 20px;
    }

    .destinations-header {
        display: block;
    }

    .destinations-intro {
        margin-top: 25px;
    }

    .destinations-grid {
        display: flex;

        flex-direction: column;

        min-height: auto;

        gap: 16px;
    }

    .destination-card {
        min-height: 450px;
    }

    .destination-content h3 {
        font-size: 46px;
    }

}


@media (max-width: 768px) {

    .signature-property {
        padding: 90px 20px;

        display: flex;

        flex-direction: column;

        gap: 50px;

        align-items: stretch;
    }

    .signature-image {
        height: 550px;
    }

    .signature-content h2 {
        font-size: 54px;
    }

    .property-details {
        gap: 10px;
    }

    .property-details p {
        font-size: 11px;
    }

}

@media (max-width: 768px) {

    .services-section {
        padding: 90px 20px;
    }

    .services-header {
        margin-bottom: 60px;
    }

    .services-grid {
        display: block;
    }

    .service-item,
    .service-item:not(:first-child) {
        padding: 30px 0;

        min-height: auto;

        border-right: none;

        border-bottom: 1px solid rgba(36, 36, 33, 0.25);
    }

    .service-item:last-child {
        border-bottom: none;
    }

    .service-icon {
        margin-top: 30px;
    }
}

@media (max-width: 768px) {

    .cta-section {
        min-height: 550px;

        padding: 90px 20px;
    }

    .cta-content h2 {
        font-size: 65px;
    }

    .newsletter-section {
        padding: 90px 20px;

        display: block;
    }

    .newsletter-content h2 {
        font-size: 52px;
    }

    .newsletter-form {
        margin-top: 50px;
    }

    .footer {
        padding: 70px 20px 25px;
    }

    .footer-top {
        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 50px 30px;

        padding-bottom: 70px;
    }

    .footer-brand {
        grid-column: span 2;
    }

    .footer-bottom {
        display: block;

        line-height: 2;
    }

    .footer-bottom div {
        margin-top: 15px;
    }

}

@media (max-width: 768px) {

    .nav-links.active,
    .nav-actions.active {

        display: flex;

        position: absolute;

        left: 0;

        width: 100%;

        background-color: var(--ivory);

        color: var(--charcoal);

        flex-direction: column;

        align-items: center;

        padding: 30px;

        gap: 25px;

    }

    .nav-links.active {

        top: 80px;

    }

    .nav-actions.active {

        top: 250px;

    }

    .nav-links.active a,
    .nav-actions.active a {

        color: var(--charcoal);

    }

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

    .property-nav-links {
        display: none;
    }

    .property-header {
        padding: 70px 20px 40px;

        display: block;
    }

    .property-header h1 {
        font-size: 62px;
    }

    .property-rating {
        margin-top: 30px;

        text-align: left;
    }

    .property-gallery {
        margin: 0 20px;

        height: 500px;

        display: block;
    }

    .gallery-main {
        height: 100%;
    }

    .gallery-small {
        display: none;
    }

    .property-layout {
        padding: 80px 20px;

        display: block;
    }

    .booking-card {
        position: static;

        margin-top: 70px;
    }

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

}

@media (max-width: 768px) {


    .about-navbar {

        padding: 20px 5%;

    }


    .about-navbar nav {

        display: none;

    }


    .about-hero {

        padding: 100px 6%;

    }


    .about-introduction {

        display: flex;

        flex-direction: column;

        gap: 50px;

        padding: 80px 6%;

    }


    .about-image {

        width: 100%;

        height: 450px;

    }


    .why-velora {

        padding: 80px 6%;

    }


    .why-velora-grid {

        display: flex;

        flex-direction: column;

    }


    .why-card {

        min-height: auto;

        padding: 30px 0;

    }


    .why-card h3 {

        margin-top: 40px;

    }


    .velora-standard {

        min-height: 550px;

        padding: 80px 6%;

    }

}