/* ----------------------------------

Template Name: Buildu - Construction HTML Template
Author: validtheme
Description:
Version: 1.0

Main Font    : Hanken
Main Color   : #E3572B

-------------------------------------

[Typography]

Body copy:    15px 'Hanken', sans-serif
Header:     36px 'Manrope', sans-serif
Input, textarea:  16px 'Hanken', sans-serif
Sidebar heading:  22px 'Hanken', sans-serif

>>> TABLE OF CONTENTS:
=======================
        
    01. Template default css
        - Animations
        - General
        - Section Title
        - Video Button
        - Typography
        - Tables
        - Forms
        - Buttons
        - Pagination
        - Colors
        - Accordion
        - Tabs
    02. Preloader
    03 Navbar
        - Navbar Default
        - Navbar Transparent
        - Navbar Sticky
        - Navbar Box
    04. Banner
        - Banner Slider
        - Banner Video
    05. Services
        - Version One
        - Version Two
        - Service Single
	06. About
        - Version One
        - Version Two
    07. Project
        - Version One
        - Version Two
        - Project Single
    08. Why Choose Us
    09. Team
        - Version One
        - Version Two
        - Team Single
    10. Testimonials
		- Version One
        - Version Two
    11. Why Choose Us
    12. Faq
    13. Process
    14. Brand / Partner
    15. Feature
    16. What We Offer
    17. Blog
        - Standard
        - Grid
        - Left Sidebar
        - Right Sidebar
        - Single
    18. Error 404
    19. Footer
    20. PHP Contact Form
    21. Others

*/

/*
** General Styles for HTML tags
*/

/* ════════════════════════════════════════════
   PTPL Custom Mobile Nav Bar
   Shows on ≤1023px — fully custom, no validnavs conflict
   ════════════════════════════════════════════ */
:root {
    --ptpl-blue:   #1C6090;
    --ptpl-orange: #E04E1F;
    --ptpl-navy:   #0D2D4F;
}

.ptpl-mob-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    height: 64px;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Logo box */
.ptpl-mob-logo {
    display: flex;
    align-items: center;
    background: #fff;
    padding: 6px 10px 4px;
    border-radius: 0 0 6px 6px;
    text-decoration: none;
    flex-shrink: 0;
}
.ptpl-mob-logo img {
    height: 42px;
    width: auto;
    display: block;
    object-fit: contain;
}

/* Burger button */
.ptpl-mob-burger {
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ptpl-navy);
    font-size: 26px;
    cursor: pointer;
    padding: 0;
    transition: color .25s;
    flex-shrink: 0;
    line-height: 1;
}
.ptpl-mob-burger:hover,
.ptpl-mob-burger:active {
    color: var(--ptpl-orange);
}

@media (max-width: 1023px) {
    .ptpl-mob-nav { display: flex; }
    /* Hide original validnavs header bar on mobile */
    nav.navbar.validnavs .navbar-header { display: none !important; }
    nav.navbar.validnavs .attr-right    { display: none !important; }
}

/* ── All side nav overrides — mobile/tablet only (≤1023px) ── */
@media (max-width: 1023px) {

    /* Close button — restyle only, don't break absolute position */
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse > .navbar-toggle {
        color: var(--ptpl-navy) !important;
        background: transparent !important;
        box-shadow: none !important;
        border-color: rgba(28,96,144,0.3) !important;
    }

    /* Push nav list below the absolute close button */
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile ul.nav {
        margin-top: 70px !important;
    }

    /* Dropdown arrow: Unicode, no font dependency */
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse li.dropdown a.dropdown-toggle::before {
        content: "\203A" !important;
        font-family: sans-serif !important;
        font-weight: 400 !important;
        font-size: 22px !important;
        line-height: 1.4;
        float: right;
        color: var(--ptpl-navy) !important;
        background: none !important;
        border: none !important;
        width: auto !important;
        height: auto !important;
    }
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse li.dropdown.on > a.dropdown-toggle::before {
        content: "\25BE" !important;
        font-size: 16px !important;
        line-height: 1.8 !important;
        color: var(--ptpl-orange) !important;
    }

    /* Nav link text — dark on white side panel */
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse .nav > li > a,
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse .nav > li > a:hover,
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse .dropdown-menu li a {
        color: var(--ptpl-navy) !important;
    }
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse .nav > li.active > a,
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse .nav > li > a:hover {
        color: var(--ptpl-orange) !important;
    }

    /* Side panel slides from RIGHT */
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile {
        left: auto !important;
        right: -485px !important;
        -webkit-transition: right 0.9s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
        transition: right 0.9s cubic-bezier(0.785, 0.135, 0.15, 0.86) !important;
        animation: none !important;
    }
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile.show {
        left: auto !important;
        right: 0 !important;
    }
}

@media (max-width: 399px) {
    nav.navbar.validnavs.mobile-sidenav .navbar-collapse.collapse.collapse-mobile {
        right: -320px !important;
    }
}

/* ═══════════════════════════════════════════════════════
   ABOUT US MEGA-DROPDOWN — Desktop only (≥1024px)
═══════════════════════════════════════════════════════ */
@media (min-width: 1024px) {

    /* ── Panel ── */
    .ptpl-mega-drop {
        width: 600px !important;
        min-width: 600px !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: 0 12px 32px rgba(13,45,79,.14) !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        background: #fff !important;
        left: 0 !important;
        transform: none !important;
    }

    /* All li — reset Bootstrap defaults */
    .ptpl-mega-drop > li {
        float: none !important;
        width: 100% !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        background: none !important;
    }

    /* ── Header strip ── */
    .mga-header-wrap {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 18px;
        border-bottom: 1px solid #eef2f7;
        background: #fff;
    }

    .mga-pill {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        background: #e8f2fa;
        color: #1C6090;
        font-family: 'DM Sans', sans-serif;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        padding: 5px 11px;
        border-radius: 100px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .mga-pill i { font-size: 12px; }

    .mga-pill-sub {
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        color: #8a9aac;
        font-weight: 400;
    }

    /* ── CSS Grid inside single li ── */
    .mga-grid-li > .mga-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        padding: 8px 8px !important;
        gap: 2px !important;
        background: #fff !important;
    }

    .mga-item {
        display: flex !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 13px 14px !important;
        text-decoration: none !important;
        border-radius: 8px !important;
        transition: background .18s !important;
        background: transparent !important;
    }

    .mga-item:hover { background: #f5f8fc !important; }

    /* ── Icon box ── */
    .mga-icon {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 1px;
    }

    .mga-icon i { font-size: 17px; }

    .mga-icon--blue   { background: #e8f2fa; } .mga-icon--blue i   { color: #1C6090; }
    .mga-icon--teal   { background: #e3f6f3; } .mga-icon--teal i   { color: #0d9e88; }
    .mga-icon--purple { background: #f0edf8; } .mga-icon--purple i { color: #7c5cbf; }
    .mga-icon--orange { background: #fff0eb; } .mga-icon--orange i { color: #E04E1F; }
    .mga-icon--green  { background: #edf7ee; } .mga-icon--green i  { color: #2e9e50; }
    .mga-icon--red    { background: #feecec; } .mga-icon--red i    { color: #d63b3b; }
    .mga-icon--pink   { background: #fce8f3; } .mga-icon--pink i   { color: #c2407e; }
    .mga-icon--amber  { background: #fff8e1; } .mga-icon--amber i  { color: #d48b0a; }

    /* ── Item text ── */
    .mga-text { flex: 1; min-width: 0; }

    .mga-title {
        display: block;
        font-family: 'DM Sans', sans-serif;
        font-size: 13.5px;
        font-weight: 700;
        color: #111827;
        line-height: 1.25;
        margin-bottom: 3px;
        transition: color .18s;
    }

    .mga-item:hover .mga-title { color: #1C6090; }

    .mga-desc {
        display: block;
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        color: #8a9aac;
        line-height: 1.4;
        font-weight: 400;
    }

    /* ── Footer bar ── */
    .mga-footer-li { border-top: 1px solid #eef2f7 !important; }

    .mga-footer-wrap {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 28px 18px !important;
        background: #fafbfc !important;
        text-decoration: none !important;
        transition: background .18s !important;
    }

    .mga-footer-wrap:hover { background: #f0f4f8 !important; }

    .mga-footer-left {
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        color: #8a9aac;
        font-weight: 400;
    }

    .mga-footer-cta {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        font-weight: 700;
        color: #E04E1F;
        white-space: nowrap;
        transition: gap .18s;
    }

    .mga-footer-wrap:hover .mga-footer-cta { gap: 8px; }
}

/* ---- Mobile side menu: mega submenus as a clean list ---- */
@media (max-width: 1023px) {
    nav.navbar.validnavs ul.nav li.dropdown > ul.dropdown-menu.ptpl-mega-drop { padding: 4px 0 12px !important; margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
    nav.navbar.validnavs .ptpl-mega-drop > li { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-header-li { display: none !important; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-grid { display: flex; flex-direction: column; }
    nav.navbar.validnavs .ptpl-mega-drop a.mga-item {
        display: flex !important; align-items: center; gap: 12px;
        padding: 11px 4px !important; margin: 0 !important;
        border: 0 !important; border-bottom: 1px dashed #e3e9f0 !important;
        text-transform: none !important; line-height: 1.3 !important; background: transparent !important;
    }
    nav.navbar.validnavs .ptpl-mega-drop a.mga-item:last-child { border-bottom: 0 !important; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-icon i { font-size: 16px; }
    .mga-icon--blue   { background: #e8f2fa; } .mga-icon--blue i   { color: #1C6090; }
    .mga-icon--teal   { background: #e3f6f3; } .mga-icon--teal i   { color: #0d9e88; }
    .mga-icon--purple { background: #f0edf8; } .mga-icon--purple i { color: #7c5cbf; }
    .mga-icon--orange { background: #fff0eb; } .mga-icon--orange i { color: #E04E1F; }
    .mga-icon--green  { background: #edf7ee; } .mga-icon--green i  { color: #2e9e50; }
    .mga-icon--red    { background: #feecec; } .mga-icon--red i    { color: #d63b3b; }
    .mga-icon--pink   { background: #fce8f3; } .mga-icon--pink i   { color: #c2407e; }
    .mga-icon--amber  { background: #fff8e1; } .mga-icon--amber i  { color: #d48b0a; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-text { display: flex; flex-direction: column; min-width: 0; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-title { display: block; font-size: 15px; font-weight: 600; color: #0D2D4F; text-transform: none; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-desc { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: #7a8794; text-transform: none; line-height: 1.4; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-footer-li { border-top: 0 !important; margin-top: 8px !important; }
    nav.navbar.validnavs .ptpl-mega-drop a.mga-footer-wrap {
        display: flex !important; flex-direction: column; gap: 2px;
        padding: 12px 14px !important; border: 0 !important; border-radius: 8px;
        background: #f3f6fa !important; text-transform: none !important; line-height: 1.35 !important;
    }
    nav.navbar.validnavs .ptpl-mega-drop .mga-footer-left { font-size: 12.5px; font-weight: 500; color: #7a8794; }
    nav.navbar.validnavs .ptpl-mega-drop .mga-footer-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #E04E1F; }
}