/* =========================================================
    TROPICAL TWINS TOURISM
    RESPONSIVE FIX
    CONTACT / GET IN TOUCH IMAGE FIX
    ========================================================= */

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* =========================================================
    CONTACT SECTION
    ========================================================= */

    .contact {
        position: relative !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        min-height: 620px !important;
    }

    /* =========================================================
    HUMAN / TRAVELLER IMAGE
    ========================================================= */

    .contact_background {
        position: absolute !important;

        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        height: 100% !important;

        background-repeat: no-repeat !important;

        /*
        IMPORTANT:
        Do NOT use cover.
        cover crops the traveller on smaller screens.
        */
        background-size: auto 100% !important;

        /*
        Human remains on left side.
        */
        background-position: left bottom !important;

        z-index: 0 !important;

        pointer-events: none !important;
    }

    /* =========================================================
    CONTACT CONTENT
    ========================================================= */

    .contact > .container {
        position: relative !important;
        z-index: 5 !important;

        width: 100% !important;
        max-width: 100% !important;
    }

    /* Empty column - keep it as image space */
    .contact .contact_image {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Form above image */
    .contact_form_container {
        position: relative !important;
        z-index: 10 !important;

        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;
    }

    /* =========================================================
    LARGE DESKTOP
    1200px+
    ========================================================= */

    @media (min-width: 1200px) {

        .contact {
            min-height: 620px !important;
        }

        .contact_background {
            background-size: auto 100% !important;
            background-position: left bottom !important;
        }

        .contact > .container > .row {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: stretch !important;

            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Human image area */
        .contact > .container > .row > .col-lg-5 {
            display: block !important;

            width: 35% !important;
            max-width: 35% !important;
            flex: 0 0 35% !important;

            min-width: 0 !important;
        }

        /* Form area */
        .contact > .container > .row > .col-lg-7 {
            display: block !important;

            width: 65% !important;
            max-width: 65% !important;
            flex: 0 0 65% !important;

            min-width: 0 !important;
        }

        .contact_form_container {
            width: 100% !important;
            max-width: 100% !important;

            padding-left: 40px !important;
            padding-right: 40px !important;
        }
    }


    /* =========================================================
    SMALL DESKTOP / TABLET LANDSCAPE
    992px - 1199px
    ========================================================= */

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

        .contact {
            min-height: 620px !important;
        }

        .contact_background {
            background-size: auto 100% !important;
            background-position: left bottom !important;
        }

        .contact > .container {
            width: 100% !important;
            max-width: 100% !important;
        }

        .contact > .container > .row {
            display: flex !important;
            flex-wrap: nowrap !important;
            align-items: stretch !important;

            width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Human image area */
        .contact > .container > .row > .col-lg-5 {
            display: block !important;

            width: 35% !important;
            max-width: 35% !important;
            flex: 0 0 35% !important;

            min-width: 0 !important;
        }

        /* Form area */
        .contact > .container > .row > .col-lg-7 {
            display: block !important;

            width: 65% !important;
            max-width: 65% !important;
            flex: 0 0 65% !important;

            min-width: 0 !important;
        }

        .contact_form_container {
            padding-left: 35px !important;
            padding-right: 35px !important;
        }
    }


    /* =========================================================
    TABLET / DESKTOP MODE
    768px - 991px
    ========================================================= */

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

        .contact {
            min-height: 600px !important;
        }

        .contact_background {
            background-size: auto 100% !important;
            background-position: left bottom !important;
        }

        .contact > .container {
            width: 100% !important;
            max-width: 100% !important;

            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .contact > .container > .row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;

            width: 100% !important;

            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Human side */
        .contact > .container > .row > .col-lg-5 {
            display: block !important;

            width: 32% !important;
            max-width: 32% !important;
            flex: 0 0 32% !important;

            min-width: 0 !important;
        }

        /* Form side */
        .contact > .container > .row > .col-lg-7 {
            display: block !important;

            width: 68% !important;
            max-width: 68% !important;
            flex: 0 0 68% !important;

            min-width: 0 !important;
        }

        .contact_form_container {
            padding-left: 25px !important;
            padding-right: 25px !important;
        }

        .contact_title {
            font-size: clamp(28px, 4vw, 38px) !important;
        }
    }


    /* =========================================================
    TABLET PORTRAIT
    576px - 767px
    ========================================================= */

    @media (min-width: 576px) and (max-width: 767px) {

        .contact {
            min-height: 560px !important;
            overflow: hidden !important;
        }

        .contact_background {
            position: absolute !important;

            top: 0 !important;
            left: 0 !important;

            width: 100% !important;
            height: 100% !important;

            background-size: auto 100% !important;
            background-position: left bottom !important;
            background-repeat: no-repeat !important;

            z-index: 0 !important;
        }

        .contact > .container {
            width: 100% !important;
            max-width: 100% !important;

            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .contact > .container > .row {
            display: flex !important;
            flex-direction: row !important;
            flex-wrap: nowrap !important;

            width: 100% !important;

            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        /* Human area */
        .contact > .container > .row > .col-lg-5 {
            display: block !important;

            width: 28% !important;
            max-width: 28% !important;
            flex: 0 0 28% !important;

            min-width: 0 !important;
        }

        /* Form area */
        .contact > .container > .row > .col-lg-7 {
            display: block !important;

            width: 72% !important;
            max-width: 72% !important;
            flex: 0 0 72% !important;

            min-width: 0 !important;
        }

        .contact_form_container {
            position: relative !important;
            z-index: 10 !important;

            width: 100% !important;
            max-width: 100% !important;

            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .contact_title {
            font-size: 30px !important;
        }

        .contact_form .input_field,
        .contact_form .text_field {
            max-width: 100% !important;
        }
    }


    /* =========================================================
    MOBILE
    0px - 575px
    ========================================================= */

    @media (max-width: 575px) {

        .contact {
            min-height: auto !important;
            overflow: hidden !important;
        }

        .contact_background {
            position: absolute !important;

            top: 0 !important;
            left: 0 !important;

            width: 100% !important;
            height: 100% !important;

            background-size: auto 100% !important;
            background-position: left bottom !important;
            background-repeat: no-repeat !important;

            z-index: 0 !important;
        }

        .contact > .container {
            width: 100% !important;
            max-width: 100% !important;

            padding-left: 10px !important;
            padding-right: 10px !important;
        }

        .contact > .container > .row {
            display: block !important;

            width: 100% !important;

            margin-left: 0 !important;
            margin-right: 0 !important;
        }

        .contact > .container > .row > .col-lg-5,
        .contact > .container > .row > .col-lg-7 {

            width: 100% !important;
            max-width: 100% !important;

            flex: 0 0 100% !important;
        }

        .contact_form_container {
            position: relative !important;
            z-index: 10 !important;

            width: 100% !important;
            max-width: 100% !important;

            margin: 0 !important;

            padding-left: 20px !important;
            padding-right: 20px !important;
        }

        .contact_title {
            font-size: 27px !important;
        }
    }


    /* =========================================================
    VERY SMALL PHONES
    ========================================================= */

    @media (max-width: 380px) {

        .contact_form_container {
            padding-left: 15px !important;
            padding-right: 15px !important;
        }

        .contact_title {
            font-size: 25px !important;
        }
    }
    /* =========================================
    FOOTER SOCIAL MEDIA ICONS - SIZE UPDATE
    ========================================= */

    .footer_social_item a i {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    /* Icons ke beech thoda proper gap */
    .footer_social_item {
        margin-right: 12px !important;
    }

    /* Mobile responsive */
    @media only screen and (max-width: 767px) {
        .footer_social_item a i {
            font-size: 24px !important;
        }

        .footer_social_item {
            margin-right: 10px !important;
        }
    }

    /* =========================================
    FOOTER SOCIAL MEDIA ICONS - SIZE UPDATE
    ========================================= */

    .footer_social_item a i {
        font-size: 24px !important;
        line-height: 1 !important;
    }

    .footer_social_item {
        margin-right: 12px !important;
    }


    /* Mobile Responsive */
    @media only screen and (max-width: 767px) {

        .footer_social_item a i {
            font-size: 24px !important;
        }

        .footer_social_item {
            margin-right: 10px !important;
        }

    }

    /* =========================================================
    FINAL FIX - KEEP BOTH HEADER BARS VISIBLE WHILE SCROLLING
    ========================================================= */

    /* The original theme hides .top_bar when .header gets .scrolled.
    Override that behavior explicitly. */
    .header,
    .header.scrolled {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
    }

    .header .top_bar,
    .header.scrolled .top_bar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: 36px !important;
        min-height: 36px !important;
        max-height: 36px !important;
        overflow: visible !important;
        position: relative !important;
        width: 100% !important;
        z-index: 100000 !important;
    }

    .header .main_nav,
    .header.scrolled .main_nav {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        z-index: 99999 !important;
        margin-top: 0 !important;
    }

    /* Keep the white navigation height stable instead of shrinking/expanding
    when the .scrolled class is added. */
    .header .main_nav_col,
    .header.scrolled .main_nav_col {
        height: 100px !important;
        min-height: 100px !important;
    }

    /* Desktop: 36px purple bar + 100px white navigation = 136px */
    body {
        padding-top: 136px !important;
    }

    /* Tablet */
    @media only screen and (max-width: 991px) {
        .header .top_bar,
        .header.scrolled .top_bar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: 36px !important;
            min-height: 36px !important;
            max-height: 36px !important;
        }

        .header .main_nav_col,
        .header.scrolled .main_nav_col {
            height: 85px !important;
            min-height: 85px !important;
        }

        body {
            padding-top: 121px !important;
        }
    }

    /* Mobile: keep purple top bar visible too */
    @media only screen and (max-width: 767px) {
        .header .top_bar,
        .header.scrolled .top_bar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: 36px !important;
            min-height: 36px !important;
            max-height: 36px !important;
        }

        .header .main_nav_col,
        .header.scrolled .main_nav_col {
            height: 75px !important;
            min-height: 75px !important;
        }

        body {
            padding-top: 111px !important;
        }
    }

    /* Small phones */
    @media only screen and (max-width: 575px) {
        .header .top_bar,
        .header.scrolled .top_bar {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            height: 36px !important;
            min-height: 36px !important;
            max-height: 36px !important;
        }

        .header .main_nav_col,
        .header.scrolled .main_nav_col {
            height: 70px !important;
            min-height: 70px !important;
        }

        body {
            padding-top: 106px !important;
        }
    }

    @media only screen and (max-width: 400px) {
        .header .main_nav_col,
        .header.scrolled .main_nav_col {
            height: 70px !important;
            min-height: 70px !important;
        }

        body {
            padding-top: 106px !important;
        }
    }

    @media only screen and (max-width: 360px) {
        .header .main_nav_col,
        .header.scrolled .main_nav_col {
            height: 68px !important;
            min-height: 68px !important;
        }

        body {
            padding-top: 104px !important;
        }
    }