/*
* ----------------------------------------------------------------------------------------
Author       : wordpressboss
Template Name: Travas - OnePage Travel Agency Template
Version      : 1.0                                          
* ----------------------------------------------------------------------------------------
*/

/* Medium Layout: 1280px. */

@media only screen and (min-width: 992px) and (max-width: 1280px) {}


/* Tablet Layout: 768px. */


/* Mobile Layout: 320px. */


@media only screen and (max-width: 767px) {

    /* — Header‐top flex & social icons — */
    .row.header-top {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
    }

    .row.header-top>[class*="col-xs-"] {
        float: none !important;
        display: inline-block !important;
        width: auto !important;
    }

    .tour-social {
        text-align: right;
    }

    /* — Hide the nav column entirely — */
    .row.align-with-logo>.col-xs-12.col-sm-8.col-md-9 {
        display: none !important;
    }

    .default-logo {
        margin-top: 30px;
    }

    /* — Center & space the logo column — */
    .row.align-with-logo {
        display: block !important;
        text-align: center !important;
    }

    .row.align-with-logo .lll {
        display: inline-block !important;
        float: none !important;
        width: auto !important;
        margin: 2px auto !important;
        /* default big gap */
        transition: margin 0.2s ease;
    }

    /* — Logo image swap (default vs. scrolled) — */
    .lll .default-logo,
    .lll .scrolled-logo {
        display: inline-block;
        width: auto;
        vertical-align: middle;
    }

    /* hide the “scrolled” version at first */
    .lll .scrolled-logo {
        display: none;
        max-height: 80px;
    }

    /* when your JS adds “.scrolled” on .lll… */
    .lll.scrolled {
        margin: 5px auto !important;
        /* collapse the gap */
    }

    .lll.scrolled .default-logo {
        display: none !important;
        /* hide old logo */
    }

    .lll.scrolled .scrolled-logo {
        display: inline-block !important;
        /* show new logo */
        max-height: 50px !important;
        /* tweak size */
    }


    /* Nav link sizing */
    .mainmenu .navbar-nav li a {
        padding: 10px;
        font-size: 14px;
    }

    /* Hero text smaller */
    .header-text {
        /* margin-top: 5px; */
        text-align: center;
    }

    .header-text h2 {
        font-size: 3.5rem;
        /* ~32px */
    }

    .header-text p {
        padding: 0 20px;
        margin-top: 15px;
        font-size: 1.4rem;
    }

    /* About section text */
    .about-text h2 {
        font-size: 3.5rem;
        /* ~24px */
    }

    .about-text p {
        padding: 0 15px;
        font-size: 1.2rem;
    }

    /* Buttons full‐width */
    .btn {
        display: block;
        width: 90%;
        margin: 10px auto;
    }

    /* Force all Bootstrap cols to stack */
    .row [class*="col-"] {
        width: 100% !important;
        display: block !important;
    }

    /* Spacing tweaks */
    .desti-place,
    .project-item,
    .single-contact-details {
        margin-bottom: 20px;
    }

    .faq-image {
        padding-bottom: 20px;
    }

    /* Responsive video embed */
    .video-area iframe {
        width: 100%;
        height: auto;
    }
}


/* Wide Mobile Layout: 480px to 767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

    /* Center & shrink your logo */
    .logo {
        text-align: center;
        margin: 0 auto 10px;
    }

    .logo-img {
        max-height: 140px;
        /* width: auto; */
    }

    /* Collapse navbar links into vertical stack */
    .navbar-nav {
        float: none !important;
        margin: 0;
        text-align: center;
    }

    .navbar-nav>li {
        display: inline-block;
        float: none;
    }

    /* Hero text smaller, padded */
    .hero-area .header-text h1 {
        font-size: 2rem;
        padding: 0 15px;
    }
}

/* Mobile phones: <480px */
@media only screen and (max-width: 479px) {

    /* Make buttons full‐width */
    .btn {
        display: block;
        width: 90%;
        margin: 10px auto;
    }

    /* Stack cards or feature boxes */
    .feature-box,
    .single-room {
        width: 100%;
        margin-bottom: 20px;
    }

    /* Adjust footer padding & text sizing */
    .footer-area {
        padding: 30px 0;
    }

    .footer-area .footer-text p {
        font-size: 0.85rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {

    /* Header text */
    .header-text {
        margin-top: 80px;
    }

    .header-text h2 {
        font-size: 2.5rem;
    }

    .header-text p {
        padding: 0 20px;
        font-size: 1rem;
    }

    /* Logo */
    .logo-img {
        max-height: 120px;
    }

    /* Navbar links centered */
    .navbar-nav {
        width: 100%;
        text-align: center;
    }

    .navbar-nav li {
        float: none;
        display: inline-block;
    }

    .mainmenu .navbar-nav li a {
        padding: 15px 10px;
        font-size: 14px;
    }

    /* Make images & video fluid */
    .project-item img,
    .single-blog img {
        width: 100%;
        height: auto;
    }

    .video-area iframe {
        width: 100%;
        height: auto;
    }

    /* Tighten up margins */
    .about-text {
        margin-top: 30px;
    }

    .desti-place,
    .faq-image,
    .single-project-complete {
        margin-bottom: 30px;
    }
}

.row.align-with-logo {
    display: flex;
    align-items: center;
    /* vertical centering */
    justify-content: space-between;
    /* pushes logo to left, menu to right */
}