/* ===== GLOBAL ===== */

html {
    scroll-behavior: smooth;
}

body {
    background: linear-gradient(180deg, #FFF6E5 0%, #FFE7B3 45%, #FFD6A1 100%);
    color: var(--text-dark);
    font-family: 'Poppins', sans-serif;
    
}
h1, h2, .section-title {
    font-family: 'Poppins';
}
/* ===== COLORS =====
   Single source of truth for the site's theme, taken from the homepage.
   Every other page/section should use these variables instead of its
   own one-off hex colors, so the whole site stays visually consistent. */

:root {
    --primary: #fba931;        /* gold accent */
    --primary-dark: #e8951f;
    --secondary: #3d422f;      /* olive */
    --maroon: #590c19;         /* headings on cream sections */
    --maroon-dark: #5A0B18;    /* top bar / footer */
    --cream-1: #FFF6E5;
    --cream-2: #FFE7B3;
    --cream-3: #FFD6A1;
    --cream-soft: #fff8ee;     /* card backgrounds on cream sections */
    --text-dark: #3d2b1f;      /* default body copy color */
    --text-muted: #6b5a4a;
}

/* ===== TOP HEADER ===== */

.top-header {
    color: #fff;
    background: #5A0B18;
    font-size: 14px;
    padding: 6px 0;
    top: 0;
    width: 100%;
    z-index: 1050;
     transition: transform 0.5s cubic-bezier(.4,0,.2,1),
                opacity 0.4s ease;
    will-change: transform, opacity;
}

.top-header a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
    transition: 0.3s;
}

.top-header a:hover {
    color: var(--primary);
}

.top-social a {
    margin-left: 12px;
}

/* Mobile Hide Top Bar */
@media (max-width: 768px) {
    .top-header {
        display: none;
    }
}
/* ===== NAVBAR ===== */

.navbar {
    position: fixed;
    /* Real height of .top-header above it, measured in JS (assets/js/main.js)
       and written to this CSS variable — no more guessing a fixed px value
       that drifts out of sync with the actual rendered top bar height. */
    top: var(--top-header-height, 32px);
    left: 0;
    width: 100%;
    background: white;

    transition: top 0.4s cubic-bezier(.4,0,.2,1),
                padding 0.4s ease,
                box-shadow 0.4s ease;
    z-index: 1040;
}
.navbar.scrolled {
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    padding: 6px 0;
}
.header-scrolled .top-header {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Once scrolled, the navbar always lands exactly at the very top of the
   viewport — no transform math, so it can never get "stuck" partway. */
.header-scrolled .navbar {
    top: 0;
    padding: 12px 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Below 768px .top-header is hidden entirely (see media query further down),
   so the navbar must always sit at top:0, scrolled or not. */
@media (max-width: 768px) {
    .navbar {
        top: 0;
    }
}
.navbar-brand img {
    height: 65px;
}

.navbar a {
    color: black;
    font-weight: 500;
}

.navbar a:hover {
    color: var(--primary) !important;
}
.dropdown-menu {
    border-radius: 8px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.dropdown-item {
    padding: 10px 18px;
}

.dropdown-item:hover {
    background-color: #f5f5f5;
    color: var(--primary);
}

/* Hover Dropdown for Desktop */
@media (min-width: 992px) {
    .navbar .dropdown:hover .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

/* Center spacing */
.navbar-nav {
    font-size: 16px;
}

/* Extra gap handled by Bootstrap gap-4 */

/* Call Button Style */
.btn-call {
    background: var(--primary);
    color: #fff !important;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    transition: 0.3s ease;
    text-decoration: none;
}

.btn-call:hover {
    background: black;
    color: white !important;
}
/* ===== HERO LAYOUT ===== */

.hero {
    display: flex;
    height: 100vh;
}

/* ===== LEFT CONTENT ===== */

.hero-content {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    padding: 80px 0px 80px 200px;
    /* background: linear-gradient(180deg, #6b7d48, #111); Change if you want */
    background: #5A0B18;
}

/* ===== RIGHT VIDEO ===== */

.hero-video {
    width: 50%;
    height: 100%;
    overflow: hidden;
    background-color: #5A0B18;
    padding-top: 50px;
}

.hero-video img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ===== TEXT ===== */

.hero h1 {
    font-size: 45px;
    color: var(--primary);
    font-weight: 700;
}

.hero p {
    max-width: 500px;
    color: #e5e5e5;
    line-height: 1.6;
}

/* ===== BUTTON ===== */

.btn-main {
    background: var(--primary);
    color: black;
    padding: 12px 30px;
    border: none;
    font-weight: 600;
    border-radius: 10px;
    transition: 0.3s;
}

.btn-main:hover {
    background: white;
}

/* ===== RESPONSIVE ===== */

@media(max-width: 900px){
     
    .hero{
        flex-direction: column;
    }

    .hero-content,
    .hero-video{
        width: 100%;
        height: 50vh;
    }

    .hero-content{
        justify-content: center;
        padding: 200px 40px 40px 40px;
    }
    .hero-video img {
    
    height: 100%;
    
}

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

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

.section {
    padding: 80px 0;
     background: linear-gradient(180deg, #FFD6A1 0%, #FFE7B3 45%, #FFD6A1 100%);
}

.section-title {
    color: var(--primary);
    text-align: center;
    margin-bottom: 40px;
    text-shadow: 0 0 20px rgba(255,169,49,1);
    font-size: 3rem;
}

/* ===== SERVICES ===== */

.service-card {
    background: #1a1a1a;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    transition: 0.4s;
    border: 1px solid transparent;
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary);
    box-shadow: 0 0 20px rgba(251, 169, 49, 0.4);
}

.service-card h5 {
    margin-top: 15px;
    color: var(--primary);
}

/* ===== BLOG ===== */
.blogs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.blog-card {
    background: #1a1a1a;
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
        text-align: center;
}
.blog-card a{
    text-decoration: none;
}

.blog-card:hover {
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.blog-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.blog-card h5 {
    color: var(--primary);
}

.insights-btn {
    text-align: center;
    margin-top: 30px;
}

/* Tablet */
@media (max-width: 992px) {
    .blogs {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 576px) {
    .blogs {
        grid-template-columns: 1fr;
    }
}

/* ===== CTA ===== */

.cta {
    background: linear-gradient(45deg, #3d422f, #000);
    text-align: center;
    padding: 70px 20px;
}

.cta h2 {
    color: var(--primary);
    text-shadow: 0 0 20px rgba(255,169,49,1);
    font-size: 3rem;
}

/* ===== FOOTER ===== */

footer {
    background: black;
    padding: 30px;
    text-align: center;
    color: gray;
}

/* ===== SERVICES MEGA DROPDOWN (Categories -> right-flyout Sub-Categories) ===== */

.pt_mega_dropdown {
    position: relative;
}

.pt_mega_toggle {
    display: none; /* mobile-only tap target, shown in the media query below */
}

/* ----- Level 1: Categories panel ----- */
.pt_mega_menu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 250px;
}

/* ----- Level 2: Sub-categories flyout ----- */
.pt_mega_submenu {
    list-style: none;
    margin: 0;
    padding: 10px 0;
    min-width: 260px;
}

/* ----- Scrollable panel (sub-categories only) -----
   With 10-14+ sub-services under some categories, the list can run
   taller than the viewport (desktop flyout) or than the collapsed
   mobile menu has room for. Capping the height and scrolling keeps
   the panel usable and fully on-screen at any screen size. The main
   category panel (.pt_mega_menu) is left as it was — short enough
   to never need this. */
.pt_mega_submenu {
    max-height: min(60vh, 420px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(251, 169, 49, 0.5) transparent;
}

.pt_mega_submenu::-webkit-scrollbar {
    width: 6px;
}

.pt_mega_submenu::-webkit-scrollbar-track {
    background: transparent;
}

.pt_mega_submenu::-webkit-scrollbar-thumb {
    background: rgba(251, 169, 49, 0.5);
    border-radius: 10px;
}

.pt_mega_submenu::-webkit-scrollbar-thumb:hover {
    background: rgba(251, 169, 49, 0.8);
}

.pt_mega_link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
    color: var(--text-dark, #3d2b1f);
    text-decoration: none;
    white-space: nowrap;
    font-size: 14.5px;
    transition: 0.2s;
}

.pt_mega_link i {
    font-size: 11px;
    color: var(--text-muted, #6b5a4a);
}

.pt_mega_submenu li a {
    display: block;
    padding: 9px 20px;
    white-space: normal;
    color: var(--text-dark, #3d2b1f);
    text-decoration: none;
    font-size: 14px;
    transition: 0.2s;
}

.pt_mega_link:hover,
.pt_mega_item:hover > .pt_mega_link,
.pt_mega_submenu li a:hover {
    background: rgba(251, 169, 49, 0.12);
    color: var(--maroon, #590c19);
}

/* ===== DESKTOP: hover flyouts ===== */
@media (min-width: 992px) {

    .pt_mega_menu,
    .pt_mega_submenu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff8ee;
        border: 1px solid rgba(251, 169, 49, 0.25);
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(89, 12, 25, 0.15);
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        z-index: 1060;
    }

    .pt_mega_item {
        position: relative;
    }

    /* Sub-categories flyout opens to the RIGHT of its parent category */
    .pt_mega_submenu {
        top: -11px; /* aligns with the top of the panel padding */
        left: 100%;
        transform: translateX(10px);
        max-width: 300px; /* keeps long names (which now wrap) from stretching the flyout too wide */
    }

    .pt_mega_dropdown:hover > .pt_mega_menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .pt_mega_item:hover > .pt_mega_submenu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    /* Small hover bridge so the cursor can travel from category to flyout
       without the menu closing in the gap between them */
    .pt_mega_item::after {
        content: "";
        position: absolute;
        top: 0;
        left: 100%;
        width: 12px;
        height: 100%;
    }
}

/* ===== MOBILE: tap accordion inside the collapsed navbar ===== */
@media (max-width: 991px) {

    /* Remove the large Bootstrap gap-4 spacing between stacked menu items */
    .navbar-nav {
        gap: 0 !important;
    }

    .nav-item {
        width: 100%;
    }

    .pt_mega_toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 0;
        right: 0;
        width: 46px;
        height: 46px;
        cursor: pointer;
        color: var(--maroon, #590c19);
        z-index: 5;         /* sits above the nav-link so taps always hit it */
        pointer-events: auto;
    }

    .pt_mega_dropdown {
        position: relative;
        text-align: center;
    }

    .pt_mega_dropdown > .nav-link {
        padding-right: 46px; /* reserve space so the link's own text/hitbox never sits under the toggle */
    }

    .pt_mega_item > .pt_mega_link {
        padding-right: 46px;
    }

    .pt_mega_menu,
    .pt_mega_submenu {
        list-style: none;
        display: none;
        position: static;
        background: rgba(0, 0, 0, 0.03);
        border-radius: 8px;
        margin: 6px 0 0 0;
        padding: 6px 0;
    }

    .pt_mega_item {
        position: relative;
    }

    .pt_mega_dropdown.pt_open > .pt_mega_menu,
    .pt_mega_item.pt_open > .pt_mega_submenu {
        display: block;
    }

    .pt_mega_link i.fa-chevron-right {
        display: none; /* the dedicated toggle button handles this on mobile */
    }

    .pt_mega_submenu li a {
        padding-left: 34px;
    }
}