/* ===================================================
   PACHAR GROUP - CENTRALIZED HEADER & COMMON STYLES
   Used across all hotels: abp, aba, abu, amu, hmpj, sps, abm, abmaheshwar
   Typography matched to Home Page (index.php):
   - Headings (h1..h6): 'Prata', serif | font-weight: 400 | color: #04142b
   - Body & Paragraphs (p): 'Roboto', sans-serif | font-weight: 300 | color: #595959
   =================================================== */

/* Body & Paragraph Typography */
body {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
    color: #595959 !important;
}

p, .p {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
    color: #595959 !important;
}

/* Headings Typography */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Prata', serif !important;
    font-weight: 400 !important;
    color: #04142b !important;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: #04142b !important;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    color: #9f8c5f !important;
}

/* Main title sections */
.main-title h1,
.main-title h2,
.main-title h3,
.main-title h4,
.main-title h5,
.main-title h6 {
    font-family: 'Prata', serif !important;
    font-weight: 400 !important;
    color: #04142b !important;
}

.main-title p {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
    color: #595959 !important;
}

/* Preserve White Text on Dark Sections / Overlays / Banners / Footers */
.main-title-white h1,
.main-title-white h2,
.main-title-white h3,
.main-title-white span,
.sub-banner .detail h1,
.sub-banner .detail span,
.sub-banner .detail ul li a,
.welcome-hotel .welcome-detail .text h1,
.welcome-hotel .welcome-detail .text p,
.customer-words .testi-sec p,
.customer-words .testi-sec span,
.footer-hotel-dark .foot-detail,
.footer-hotel-dark .foot-detail h1,
.footer-hotel-dark .foot-detail h2,
.footer-hotel-dark .foot-detail h3,
.footer-hotel-dark .foot-detail h4,
.footer-hotel-dark .foot-detail h5,
.footer-hotel-dark .foot-detail h6,
.footer-hotel-dark .foot-detail p,
.footer-hotel-dark .foot-detail a,
.footer-hotel-dark .foot-detail span,
.footer-hotel-dark .foot-detail strong,
.footer-hotel-dark .foot-detail li,
.footer-hotel-dark .foot-detail i,
.footer-hotel-dark .copyrights,
.footer-hotel-dark .copyrights p,
.footer-hotel-dark .copyrights a,
.footer-hotel-dark .copyrights span,
.booking-steps .reservation,
.booking-steps .reservation h1,
.booking-steps .reservation h2,
.booking-steps .reservation h3,
.booking-steps .reservation h4,
.booking-steps .reservation h5,
.booking-steps .reservation h6,
.booking-steps .reservation p,
.booking-steps .reservation span,
.booking-steps .reservation strong,
.room-detail .booking-form,
.room-detail .booking-form span,
.room-detail .booking-form a,
.tp-caption,
.tp-caption h1,
.tp-caption h2,
.tp-caption h3,
.tp-caption h4,
.tp-caption h5,
.tp-caption h6,
.tp-caption p,
.tp-caption a,
.tp-caption span,
.tp-caption div {
    color: #fff !important;
}

.main-title-white h1,
.sub-banner .detail h1,
.welcome-hotel .welcome-detail .text h1,
.footer-hotel-dark .foot-detail h5 {
    font-family: 'Prata', serif !important;
    font-weight: 400 !important;
}

/* Hotel Get In Touch Section (Phone, Address, E-mail on White Background) */
.hotel-get-touch,
.footer-hotel .hotel-get-touch,
.footer-hotel-dark .hotel-get-touch {
    background: #fff !important;
    text-align: center !important;
    padding: 60px 0 !important;
}

.hotel-get-touch .get-touch-sec i,
.footer-hotel .hotel-get-touch .get-touch-sec i,
.footer-hotel-dark .hotel-get-touch .get-touch-sec i {
    color: #222 !important;
    display: inline-block !important;
    border-radius: 100% !important;
    font-size: 58px !important;
    text-align: center !important;
}

.hotel-get-touch .get-touch-sec .text,
.footer-hotel .hotel-get-touch .get-touch-sec .text,
.footer-hotel-dark .hotel-get-touch .get-touch-sec .text {
    margin-top: 26px !important;
}

.hotel-get-touch .get-touch-sec .text span,
.footer-hotel .hotel-get-touch .get-touch-sec .text span,
.footer-hotel-dark .hotel-get-touch .get-touch-sec .text span {
    font-size: 20px !important;
    display: block !important;
    color: #222 !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 300 !important;
    line-height: 28px !important;
}

.hotel-get-touch .get-touch-sec .text span strong,
.footer-hotel .hotel-get-touch .get-touch-sec .text span strong,
.footer-hotel-dark .hotel-get-touch .get-touch-sec .text span strong {
    font-family: 'Prata', serif !important;
    font-weight: 700 !important;
    font-size: 22px !important;
    text-transform: uppercase !important;
    color: #04142b !important;
    display: block !important;
    margin-bottom: 5px !important;
}

/* Links inside get-touch-sec: View on Map & E-mail should be blue as in original */
.hotel-get-touch .get-touch-sec .text span a,
.footer-hotel .hotel-get-touch .get-touch-sec .text span a,
.footer-hotel-dark .hotel-get-touch .get-touch-sec .text span a {
    color: #0000ee !important;
    text-decoration: none !important;
}

.hotel-get-touch .get-touch-sec .text span a:hover,
.footer-hotel .hotel-get-touch .get-touch-sec .text span a:hover,
.footer-hotel-dark .hotel-get-touch .get-touch-sec .text span a:hover {
    color: #0066cc !important;
    text-decoration: underline !important;
}

/* Tel / Phone links inside get-touch-sec stay dark */
.hotel-get-touch .get-touch-sec .text span a[href^="tel"],
.footer-hotel .hotel-get-touch .get-touch-sec .text span a[href^="tel"],
.footer-hotel-dark .hotel-get-touch .get-touch-sec .text span a[href^="tel"] {
    color: #222 !important;
    text-decoration: none !important;
}

.hotel-get-touch .get-touch-sec .text span a[href^="tel"]:hover,
.footer-hotel .hotel-get-touch .get-touch-sec .text span a[href^="tel"]:hover,
.footer-hotel-dark .hotel-get-touch .get-touch-sec .text span a[href^="tel"]:hover {
    color: #9f8c5f !important;
}

/* Header Base Container (Normal & Sticky State) */
.header-two,
.header-two.sticky,
header.header-two,
header.header-two.sticky {
    background: #fff !important;
    border-bottom: solid 1px #F3F3F3 !important;
    min-height: 98px !important;
    height: 98px !important;
    line-height: normal !important;
    box-sizing: border-box !important;
}

.header-two.sticky,
header.header-two.sticky {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 99990 !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08) !important;
}

.header-two .container,
.header-two.sticky .container {
    height: 98px !important;
    position: relative !important;
}

/* ===================================================
   LOGO HANDLING - STRICTLY EXACTLY ONE LOGO VISIBLE
   =================================================== */
.header-two .container > a,
.header-two.sticky .container > a {
    display: inline-block !important;
    float: left !important;
    height: 98px !important;
}

.header-two .logo2,
.header-two .logo-dark,
.header-two.sticky .logo2,
.header-two.sticky .logo-dark,
img.logo2,
img.logo-dark {
    width: 85px !important;
    max-width: 85px !important;
    max-height: 82px !important;
    height: auto !important;
    margin: 8px 0 !important;
    float: left !important;
    object-fit: contain !important;
}

/* In normal state: show ONLY the first logo link (logo2), hide the second (logo-dark) */
.header-two .container > a:first-of-type,
.header-two .logo2 {
    display: inline-block !important;
}
.header-two .container > a:nth-of-type(2),
.header-two .logo-dark,
.header-two a:has(> .logo-dark) {
    display: none !important;
}

/* In sticky state: hide the first logo link (logo2), show ONLY the second (logo-dark) */
.header-two.sticky .container > a:first-of-type,
.header-two.sticky .logo2,
.header-two.sticky a:has(> .logo2) {
    display: none !important;
}
.header-two.sticky .container > a:nth-of-type(2),
.header-two.sticky .logo-dark,
.header-two.sticky a:has(> .logo-dark) {
    display: inline-block !important;
}

/* ===================================================
   DESKTOP TOP NAVIGATION (min-width: 992px)
   =================================================== */
@media (min-width: 992px) {
    .header-two .cont-right,
    .header-two.sticky .cont-right {
        float: right !important;
        position: relative !important;
        height: 98px !important;
        display: block !important;
    }

    .header-two .nav,
    .header-two.sticky .nav {
        margin: 0 !important;
        padding: 0 !important;
        float: left !important;
        display: block !important;
        height: 98px !important;
    }

    /* Top Navbar List (Direct Children Only) */
    .header-two .nav > ul.wtf-menu,
    .header-two.sticky .nav > ul.wtf-menu {
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
        display: block !important;
    }

    .header-two .nav > ul.wtf-menu > li,
    .header-two.sticky .nav > ul.wtf-menu > li {
        float: left !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 98px !important;
        position: relative !important;
        display: block !important;
    }

    /* Top Nav Links - Centered at 98px */
    .header-two .nav > ul.wtf-menu > li > a,
    .header-two.sticky .nav > ul.wtf-menu > li > a {
        color: #222 !important;
        text-transform: uppercase !important;
        font-weight: 400 !important;
        font-size: 15px !important;
        font-family: 'Prata', serif !important;
        padding: 0 !important;
        margin: 0 12px !important;
        line-height: 98px !important;
        height: 98px !important;
        display: block !important;
        border-bottom: none !important;
        transition: color 0.3s ease !important;
    }

    .header-two .nav > ul.wtf-menu > li > a:hover,
    .header-two.sticky .nav > ul.wtf-menu > li > a:hover {
        color: #e9b947 !important;
    }

    .header-two .nav > ul.wtf-menu > li.select-item > a,
    .header-two.sticky .nav > ul.wtf-menu > li.select-item > a {
        color: #222 !important;
        border-bottom: solid 2px #222 !important;
    }

    /* Phone Icon in Nav */
    .header-two .nav > ul.wtf-menu > li > a i.fa-phone,
    .header-two.sticky .nav > ul.wtf-menu > li > a i.fa-phone {
        font-size: 16px !important;
        line-height: 98px !important;
    }

    /* Book Now Button */
    .header-two .book_btn,
    .header-two.sticky .book_btn,
    button.book_btn {
        font-family: 'Prata', serif !important;
        border: 1px solid #9f8c5f !important;
        background: #9f8c5f !important;
        color: #fff !important;
        padding: 0 15px !important;
        height: 34px !important;
        line-height: 32px !important;
        text-transform: uppercase !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        margin-top: 32px !important;
        margin-left: 10px !important;
        cursor: pointer !important;
        border-radius: 2px !important;
        display: inline-block !important;
        vertical-align: middle !important;
        transition: all 0.3s ease !important;
        outline: none !important;
    }

    .header-two .book_btn:hover,
    .header-two.sticky .book_btn:hover,
    button.book_btn:hover {
        background: #000 !important;
        border-color: #000 !important;
        color: #fff !important;
    }

    /* ===================================================
       DROPDOWN / SUBMENU - VERTICALLY STACKED & COMPACT
       =================================================== */
    .wtf-menu ul.submenu {
        position: absolute !important;
        top: 98px !important;
        left: 0 !important;
        width: 275px !important;
        padding: 4px 0 !important;
        margin: 0 !important;
        background: #fff !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.12) !important;
        border-top: solid 2px #e9b947 !important;
        z-index: 999999 !important;
        display: none;
    }

    /* Show submenu on hover */
    .wtf-menu > li:hover > ul.submenu,
    .wtf-menu ul.submenu li:hover > ul.submenu {
        display: block !important;
    }

    .wtf-menu ul.submenu ul.submenu {
        top: 0 !important;
        left: 100% !important;
        border-top: none !important;
        border-left: solid 2px #e9b947 !important;
    }

    /* Submenu items must NEVER float and must have 0 padding */
    .wtf-menu ul.submenu li,
    .header-two .nav ul.wtf-menu ul.submenu li,
    .header-two.sticky .nav ul.wtf-menu ul.submenu li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        border-bottom: 1px solid #f2f2f2 !important;
        list-style: none !important;
    }

    .wtf-menu ul.submenu li:last-child {
        border-bottom: none !important;
    }

    /* Submenu links - Clean line-height and padding */
    .wtf-menu ul.submenu li a,
    .header-two .nav ul.wtf-menu ul.submenu li a,
    .header-two.sticky .nav ul.wtf-menu ul.submenu li a {
        float: none !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 38px !important;
        padding: 0 16px !important;
        margin: 0 !important;
        font-family: 'Prata', serif !important;
        font-size: 13px !important;
        color: #222 !important;
        text-transform: capitalize !important;
        border: none !important;
        border-bottom: none !important;
        text-align: left !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
        background: #fff !important;
        transition: background-color 0.2s ease, color 0.2s ease !important;
    }

    .wtf-menu ul.submenu li:hover,
    .wtf-menu ul.submenu li:hover > a,
    .wtf-menu ul.submenu li a:hover,
    .header-two .nav ul.wtf-menu ul.submenu li:hover > a,
    .header-two .nav ul.wtf-menu ul.submenu li a:hover,
    .header-two.sticky .nav ul.wtf-menu ul.submenu li:hover > a,
    .header-two.sticky .nav ul.wtf-menu ul.submenu li:hover > a {
        background-color: #e9b947 !important;
        color: #fff !important;
    }
}

.header-two .logo-two {
    display: none !important;
}

/* ===================================================
   Mobile Media Query (max-width: 991px)
   - Hide desktop navigation completely
   - Centered Hamburger Icon (vertically centered in 98px header)
   - Fixed Position On Scroll (Doesn't Jump)
   - Switches to Cross (✕) On Open
   =================================================== */
@media (max-width: 991px) {
    /* STRICTLY HIDE ALL DESKTOP NAVIGATION ON MOBILE */
    .header-two .nav,
    .header-two.sticky .nav,
    .header-two .cont-right,
    .header-two.sticky .cont-right,
    .header-two ul.wtf-menu,
    .header-two.sticky ul.wtf-menu,
    #header-2 .nav,
    #header-2 .cont-right,
    header.header-two .nav,
    header.header-two .cont-right,
    header.header-two .wtf-menu,
    .header-two .book_btn,
    .header-two.sticky .book_btn,
    button.book_btn,
    nav:not(.mm-menu),
    nav:not(.mm-menu) ul.wtf-menu,
    #page nav:not(.mm-menu) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
    }

    #page .header,
    #page header.sticky {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        min-height: 0 !important;
        height: auto !important;
        z-index: 999999 !important;
        border-bottom: none !important;
        background: transparent !important;
    }

    #page .header a,
    #page header.sticky a {
        position: fixed !important;
        top: 28px !important;
        right: 15px !important;
        left: auto !important;
        margin: 0 !important;
        z-index: 999999 !important;
        width: 40px !important;
        height: 41px !important;
        border-radius: 5px !important;
    }

    /* Cross (✕) Icon when Mobile Menu is Open */
    html.mm-opened #page .header a,
    html.mm-opened #page header.sticky a,
    html.mm-opening #page .header a,
    html.mm-opening #page header.sticky a {
        background-image: none !important;
        background-color: #e9b947 !important;
    }

    html.mm-opened #page .header a:before,
    html.mm-opened #page .header a:after,
    html.mm-opening #page .header a:before,
    html.mm-opening #page .header a:after,
    html.mm-opened #page header.sticky a:before,
    html.mm-opened #page header.sticky a:after,
    html.mm-opening #page header.sticky a:before,
    html.mm-opening #page header.sticky a:after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 20px !important;
        height: 3px !important;
        background-color: #fff !important;
        margin-top: -1.5px !important;
        margin-left: -10px !important;
    }

    html.mm-opened #page .header a:before,
    html.mm-opening #page .header a:before,
    html.mm-opened #page header.sticky a:before,
    html.mm-opening #page header.sticky a:before {
        transform: rotate(45deg) !important;
    }

    html.mm-opened #page .header a:after,
    html.mm-opening #page .header a:after,
    html.mm-opened #page header.sticky a:after,
    html.mm-opening #page header.sticky a:after {
        transform: rotate(-45deg) !important;
    }
}