/* ==========================================================
   Panyapath brand overlay — modernizes the base theme and
   replaces the original orange palette with logo-derived
   navy + green. Loaded AFTER main.css so it wins.
   ========================================================== */

:root {
    /* Logo-derived palette */
    --brand-navy: #1B3A6F;          /* primary — bars in logo */
    --brand-navy-deep: #0E2A5C;     /* darker navy for depth */
    --brand-navy-soft: #2E5AA8;     /* tagline blue */
    --brand-blue-light: #4F7EB3;    /* light bar accent */
    --brand-green: #3FB94A;         /* arrow swoosh */
    --brand-green-deep: #2E9B3A;
    --brand-green-soft: #E8F7EA;

    /* Override base theme variables */
    --theme: var(--brand-navy);
    --theme2: var(--brand-green);
    --theme3: var(--brand-navy-soft);
    --header: #0A1A33;
    --text: #4A5568;
    --border: #E2E8F0;
    --bg: #F7F9FC;
    --box-shadow: 0 10px 30px rgba(15, 30, 70, 0.08);
    --box-shadow-lg: 0 20px 50px rgba(15, 30, 70, 0.12);

    /* Brand gradients */
    --grad-primary: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-navy-soft) 100%);
    --grad-accent: linear-gradient(135deg, var(--brand-green) 0%, var(--brand-green-deep) 100%);
    --grad-mixed: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-green-deep) 100%);
    --grad-soft: linear-gradient(180deg, #F7F9FC 0%, #EEF3FB 100%);
}

/* ---------- Typography refinements ---------- */
body {
    color: var(--text);
    font-feature-settings: "ss01", "cv01";
}

h1, h2, h3, h4, h5, h6,
.section-title h2,
.section-title h1 {
    color: var(--header);
    letter-spacing: -0.02em;
    font-weight: 700;
}

.section-title h2 {
    font-size: clamp(28px, 3.5vw, 46px);
    line-height: 1.15;
}

.section-title span {
    color: var(--brand-green-deep) !important;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px;
    background: var(--brand-green-soft);
    padding: 6px 14px;
    border-radius: 999px;
    display: inline-block;
}

p, li {
    color: var(--text);
    line-height: 1.7;
}

/* ---------- Buttons: gradient with green hover lift ---------- */
.main-button .theme-btn,
.theme-btn {
    background: var(--grad-primary) !important;
    color: #fff !important;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(27, 58, 111, 0.25);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.main-button .arrow-btn,
.theme-btn .arrow-btn {
    background: var(--grad-primary) !important;
    color: #fff !important;
}

.main-button:hover .theme-btn,
.main-button:hover .arrow-btn,
.theme-btn:hover {
    background: var(--grad-accent) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(63, 185, 74, 0.35);
}

/* Secondary "outline" buttons keep navy outline, fill green on hover */
.main-button.bg-2 .theme-btn,
.main-button.bg-2 .arrow-btn {
    background: transparent !important;
    color: var(--brand-navy) !important;
    border: 2px solid var(--brand-navy) !important;
    box-shadow: none;
}

.main-button.bg-2:hover .theme-btn,
.main-button.bg-2:hover .arrow-btn {
    background: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #fff !important;
}

/* ---------- Header polish ---------- */
.header-section .header-top {
    background: var(--grad-primary);
    color: #fff;
}

.header-section .header-top a,
.header-section .header-top li {
    color: rgba(255,255,255,0.92) !important;
}

#header-sticky {
    backdrop-filter: blur(12px);
    background: rgba(255,255,255,0.92);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .3s ease;
}

#header-sticky.sticky {
    box-shadow: 0 6px 24px rgba(15, 30, 70, 0.08);
}

.header-main .main-menu ul li > a,
.sticky.header-1 .main-menu ul li > a {
    color: var(--header);
    font-weight: 600;
}

.header-main .main-menu ul li.active > a,
.header-main .main-menu ul li:hover > a {
    color: var(--brand-green-deep) !important;
}

/* Navbar is white-translucent at all times, so swap the white logo
   for the dark one and darken the hamburger icon by default
   (main.css only does this once .sticky is added). */
.header-1 .header-logo {
    display: none;
}
.header-1 .header-logo-2 {
    display: block;
}
.header-1 .header-right .sidebar__toggle {
    color: var(--header);
}

.main-menu ul li .submenu {
    border-radius: 14px;
    box-shadow: var(--box-shadow-lg);
    border: 1px solid var(--border);
    overflow: hidden;
}

/* ---------- Hero section ---------- */
.hero-section,
.hero-1,
.hero-2,
.hero-3 {
    background: var(--grad-soft) !important;
    position: relative;
}

.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 20%, rgba(63, 185, 74, 0.10), transparent 35%),
        radial-gradient(circle at 88% 75%, rgba(46, 90, 168, 0.12), transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.hero-section > * { position: relative; z-index: 1; }

.hero-section h1, .hero-section h2 {
    color: var(--header);
    font-size: clamp(34px, 4.5vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.hero-section h1 span,
.hero-section h2 span {
    background: var(--grad-mixed);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ---------- Cards (services, team, projects, news, products) ---------- */
.service-card, .service-box,
.team-card, .team-box,
.project-card, .project-box,
.news-card, .blog-card,
.product-card, .shop-card,
.choose-card, .feature-card,
.single-service-box, .single-team-box,
.single-project-box, .single-news-box,
.single-shop-box, .single-feature-box,
.service-card-items, .team-box-items,
.project-card-items, .news-card-items,
.product-card-items {
    background: #fff;
    border-radius: 18px !important;
    border: 1px solid var(--border);
    box-shadow: var(--box-shadow);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
    overflow: hidden;
}

.service-card:hover, .service-box:hover,
.team-card:hover, .team-box:hover,
.project-card:hover, .project-box:hover,
.news-card:hover, .blog-card:hover,
.product-card:hover, .shop-card:hover,
.choose-card:hover, .feature-card:hover,
.single-service-box:hover, .single-team-box:hover,
.single-project-box:hover, .single-news-box:hover,
.single-shop-box:hover, .single-feature-box:hover,
.service-card-items:hover, .team-box-items:hover,
.project-card-items:hover, .news-card-items:hover,
.product-card-items:hover {
    transform: translateY(-6px);
    box-shadow: var(--box-shadow-lg);
    border-color: rgba(63, 185, 74, 0.4);
}

/* Card images get rounded top */
.service-card img, .service-box img,
.team-card img, .team-box img,
.project-card img, .project-box img,
.news-card img, .blog-card img,
.product-card img, .shop-card img,
.service-card-items img, .team-box-items img,
.project-card-items img, .news-card-items img,
.product-card-items img {
    border-radius: 14px;
}

/* Numbered/iconed feature cards */
.icon, .service-icon, .feature-icon,
.choose-icon, .step-icon {
    color: var(--brand-green-deep);
}

/* ---------- Section background utilities ---------- */
.section-bg, .bg-1, .bg-2 {
    background: var(--grad-soft) !important;
}

footer.section-bg,
.footer-section {
    background: var(--header) !important;
    color: rgba(255,255,255,0.78);
    position: relative;
}

.footer-section h3,
.footer-section h4 {
    color: #fff;
    letter-spacing: -0.01em;
}

.footer-section a {
    color: rgba(255,255,255,0.78);
    transition: color .2s ease;
}

.footer-section a:hover {
    color: var(--brand-green) !important;
}

.footer-section .footer-input {
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
}

.footer-section .footer-input input {
    background: transparent;
    color: #fff;
}

.footer-section .footer-input input::placeholder {
    color: rgba(255,255,255,0.5);
}

.footer-section .newsletter-button {
    background: var(--grad-accent);
    color: #fff;
    border-radius: 999px;
}

.footer-section .social-icon a {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all .25s ease;
}

.footer-section .social-icon a:hover {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
}

/* ---------- CTA / banner sections ----------
   Background lives on the inner .cta-banner-wrapper. We add a soft
   outer glow so the pill blends into the surrounding page rather
   than sitting on it as a hard rectangle. */
.cta-section .cta-banner-wrapper,
.cta-banner-section .cta-banner-wrapper {
    background: var(--grad-mixed) !important;
    box-shadow:
        0 30px 60px -20px rgba(15, 31, 60, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.cta-section,
.cta-banner-section {
    position: relative;
}
.cta-section::after,
.cta-banner-section::after {
    content: "";
    position: absolute;
    inset: -40px 0 -60px 0;
    background: radial-gradient(ellipse at center,
                rgba(46, 90, 168, 0.10) 0%,
                rgba(46, 90, 168, 0) 70%);
    z-index: -1;
    pointer-events: none;
}

/* ---------- Forms ---------- */
input, textarea, select {
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

input:focus, textarea:focus, select:focus {
    border-color: var(--brand-navy-soft) !important;
    box-shadow: 0 0 0 4px rgba(46, 90, 168, 0.12) !important;
    outline: none;
}

/* ---------- Tables (cart, checkout) ---------- */
table {
    border-radius: 14px;
    overflow: hidden;
}

table thead {
    background: var(--grad-primary);
    color: #fff;
}

/* ---------- Misc small touches ---------- */
.back-to-top {
    background: var(--grad-accent) !important;
    border-radius: 50%;
    box-shadow: 0 10px 24px rgba(63, 185, 74, 0.35);
}

.preloader {
    background: var(--grad-soft);
}

/* Selection colour */
::selection {
    background: var(--brand-green);
    color: #fff;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* ---------- FAQ image: strip the orange swoosh baked into the PNG ----------
   The /assets/img/faq/faq-img.png asset has an orange background shape we
   can't edit without re-exporting. Desaturate it so the orange disappears,
   then tint subtly toward the brand navy via a layered drop-shadow. */
.faq-wrapper .faq-image img,
.faq-wrapper-3 .faq-image img {
    filter: grayscale(1) contrast(1.05) brightness(1.02);
}

/* ==========================================================
   FOOTER — fix text/icon contrast on dark navy background
   The base theme assumes a light footer, so contact spans,
   list items, bullets, dividers, and the bottom row all
   inherit dark colours that disappear against --header.
   ========================================================== */

/* Top divider between logo row and widgets */
.footer-section .footer-logo-area {
    border-bottom: 1px solid rgba(255,255,255,0.12);
    flex-wrap: wrap;
    gap: 16px;
}

.footer-section .footer-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}
.footer-section .footer-logo:hover {
    transform: translateY(-2px);
}
.footer-section .footer-logo img {
    display: block;
}

/* Section heading */
.footer-section .footer-widget-wrapper .single-footer-widget .wid-title h3 {
    color: #fff;
    font-size: 22px;
}

/* Contact widget — labels (Email/Phone/Location) and values */
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-contact li {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-contact li span,
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-contact li span a {
    color: #fff !important;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    word-break: break-word;
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-contact li span a:hover {
    color: var(--brand-green) !important;
}

/* Service list items */
.footer-section .footer-widget-wrapper .single-footer-widget .list-items li a {
    color: rgba(255,255,255,0.78);
}
.footer-section .footer-widget-wrapper .single-footer-widget .list-items li a::after {
    background-color: var(--brand-green);
}
.footer-section .footer-widget-wrapper .single-footer-widget .list-items li:hover a {
    color: var(--brand-green) !important;
}
.footer-section .footer-widget-wrapper .single-footer-widget .list-items li:hover a::after {
    background-color: var(--brand-green);
}

/* Newsletter widget — paragraph + input pill + send button */
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content p {
    color: rgba(255,255,255,0.78);
    margin-bottom: 16px;
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-input {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 999px;
    padding: 6px 6px 6px 20px;
    margin: 14px 0 24px;
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-input input {
    flex: 1;
    background: transparent;
    border: none !important;
    border-bottom: none !important;
    padding: 10px 0;
    color: #fff;
    font-size: 14px;
    box-shadow: none !important;
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-input input::placeholder {
    color: rgba(255,255,255,0.55);
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-input .newsletter-button {
    position: static;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: none;
    border-radius: 50%;
    background: var(--grad-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, box-shadow .25s ease;
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-input .newsletter-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(63,185,74,0.35);
}

/* Social icons — both the top logo row and the newsletter row.
   Override main.css's bordered-circle rule so they pick up the
   translucent dark-bg style consistently. */
.footer-section .footer-logo-area .social-icon a,
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .social-icon a {
    width: 40px;
    height: 40px;
    line-height: 1;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.16);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}
.footer-section .footer-logo-area .social-icon {
    gap: 12px;
}
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .social-icon {
    gap: 12px;
    flex-wrap: wrap;
}
.footer-section .footer-logo-area .social-icon a:hover,
.footer-section .footer-widget-wrapper .single-footer-widget .footer-content .social-icon a:hover {
    background: var(--brand-green);
    border-color: var(--brand-green);
    color: #fff;
    transform: translateY(-2px);
}

/* Footer bottom (copyright + menu) */
.footer-section .footer-bottom .footer-wrapper {
    border-top: 1px solid rgba(255,255,255,0.12);
    flex-wrap: wrap;
    gap: 12px;
}
.footer-section .footer-bottom .footer-wrapper p,
.footer-section .footer-bottom .footer-wrapper p a {
    color: rgba(255,255,255,0.78);
}
.footer-section .footer-bottom .footer-wrapper p a:hover {
    color: var(--brand-green);
}
.footer-section .footer-bottom .footer-wrapper .footer-menu li a {
    color: rgba(255,255,255,0.78);
    background-image: linear-gradient(var(--brand-green), var(--brand-green));
}
.footer-section .footer-bottom .footer-wrapper .footer-menu li a:hover {
    color: var(--brand-green);
}

/* ==========================================================
   RESPONSIVE — global overrides for phones, tablets, desktops
   The base theme has many media queries already; these top
   them up with the brand layout's specific needs and patch
   the common breakage points (overflow, headers, hero text,
   contact margins, tables, iframes, footer stacking).
   ========================================================== */

/* Prevent horizontal scroll caused by absolute-positioned
   decorative shapes used throughout the theme. */
html, body {
    overflow-x: hidden;
    max-width: 100%;
}

/* Make every image and embedded media fluid by default */
img, svg, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Tables (cart/checkout) get a horizontal scroll on small screens */
.table-responsive,
.cart-table,
.checkout-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Google maps / video iframes — keep aspect inside containers */
.google-map iframe,
iframe[src*="google.com/maps"],
iframe[src*="youtube.com"] {
    width: 100%;
    min-height: 300px;
    border: 0;
    border-radius: 14px;
}

/* Hero text — guard line-break <br>s on small screens by allowing
   normal wrapping (the theme inserts hard breaks in hero copy). */
@media (max-width: 767px) {
    .hero-section h1, .hero-section h2,
    .hero-content h1, .hero-content h2,
    .hero-content p {
        word-break: break-word;
    }
    .hero-section br,
    .hero-content br { display: none; }
    .hero-content h6 { font-size: 13px; }
    .hero-content h1 { font-size: clamp(28px, 8vw, 38px) !important; }
    .hero-content p { font-size: 14px; line-height: 1.6; }
}

/* Header logo — shrink on tablet/phone so it doesn't crowd the
   hamburger button. The blade sets width:100px inline; override. */
@media (max-width: 991px) {
    .header-section .logo img,
    .header-1 .logo img {
        width: 80px !important;
        height: auto;
    }
    .header-section .header-right .main-button {
        display: none;
    }
    .header-section .header-right .header__hamburger {
        display: block !important;
    }
}
@media (max-width: 575px) {
    .header-section .logo img,
    .header-1 .logo img {
        width: 70px !important;
    }
}

/* Container padding tightening — gives content breathing room
   right at the edge on phones. */
@media (max-width: 575px) {
    .container, .container-fluid {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* Section padding rhythm on phones */
@media (max-width: 767px) {
    .section-padding { padding: 60px 0 !important; }
    .section-title { margin-bottom: 22px; }
    .section-title h2 { font-size: clamp(24px, 6.5vw, 32px) !important; line-height: 1.2; }
    .section-title p { font-size: 14px; }
}

/* Contact page: the inline `margin-top:150px` blows out the layout
   when the absolute header collapses on mobile. Tame it. */
.contact-section-12 {
    margin-top: 150px;
}
@media (max-width: 991px) {
    .contact-section-12 { margin-top: 110px !important; }
}
@media (max-width: 575px) {
    .contact-section-12 { margin-top: 90px !important; }
    .contact-section-12 .contact-area .contact-item {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* Cards — make sure long titles don't overflow */
.service-box-items, .service-card, .service-card-items,
.team-box-items, .project-box-items, .news-card-items,
.product-card-items {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Service card grid — guarantee one column on small phones
   even if the markup uses col-md-6 only. */
@media (max-width: 575px) {
    .service-section .col-md-6,
    .team-section .col-md-6,
    .project-section .col-md-6,
    .news-section .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* CTA / banner — stop it bleeding off the viewport */
.cta-banner-section,
.cta-section {
    margin-left: 12px;
    margin-right: 12px;
}
@media (max-width: 991px) {
    .cta-banner-section,
    .cta-section {
        border-radius: 18px;
        margin-left: 12px;
        margin-right: 12px;
    }
    .cta-banner-wrapper {
        padding: 30px 20px !important;
    }
    .cta-list-items {
        flex-wrap: wrap;
    }
    .cta-list-items ul {
        flex: 1 1 50%;
    }
}
@media (max-width: 575px) {
    .cta-list-items ul {
        flex: 1 1 100%;
    }
}

/* Footer responsive stacking and centering */
@media (max-width: 991px) {
    .footer-section .footer-logo-area {
        padding: 50px 0 24px;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .footer-section .footer-widget-wrapper {
        padding: 30px 0 50px;
    }
    .footer-section .footer-widget-wrapper .single-footer-widget {
        margin-top: 24px;
    }
}
@media (max-width: 575px) {
    .footer-section .footer-logo-area {
        align-items: center;
        text-align: center;
    }
    .footer-section .footer-bottom .footer-wrapper {
        text-align: center;
        justify-content: center !important;
    }
    .footer-section .footer-bottom .footer-wrapper .footer-menu {
        justify-content: center;
        padding: 0;
    }
    .footer-section .footer-widget-wrapper .single-footer-widget .footer-content .footer-input {
        padding: 6px 6px 6px 16px;
    }
}

/* About / image sections — let content reflow under image on tablet+ */
@media (max-width: 991px) {
    .about-image-items {
        margin-bottom: 30px;
    }
    .about-image-items .video-box,
    .about-image-items .counter-shape {
        position: static !important;
        display: inline-flex;
        margin: 10px 8px 0 0;
    }
}

/* Forms on small screens — stack to full width and breathe */
@media (max-width: 575px) {
    .contact-form-items input,
    .contact-form-items textarea,
    .contact-form-items select,
    .contact-box input,
    .contact-box textarea {
        font-size: 14px;
        padding: 12px 16px;
    }
    .contact-box {
        padding: 20px !important;
    }
    .theme-btn {
        font-size: 14px;
        padding: 12px 22px;
    }
}

/* Offcanvas / mobile menu basic safety */
.offcanvas__info,
.offcanvas-info {
    max-width: 90vw;
}

/* Back-to-top button position on phones */
@media (max-width: 575px) {
    .back-to-top {
        right: 16px !important;
        bottom: 16px !important;
        width: 42px !important;
        height: 42px !important;
        line-height: 42px !important;
    }
}

/* Page header / breadcrumb section — common on inner pages */
@media (max-width: 767px) {
    .page-header,
    .breadcrumb-section,
    .breadcrumb-wrapper {
        padding: 100px 0 50px !important;
    }
    .page-header h1,
    .breadcrumb-wrapper h1,
    .breadcrumb-wrapper h2 {
        font-size: clamp(28px, 7vw, 38px) !important;
    }
}

/* News/blog/project detail pages — image + sidebar stack */
@media (max-width: 991px) {
    .blog-sidebar,
    .shop-sidebar,
    .service-sidebar {
        margin-top: 40px;
    }
}

/* Shop pages — products grid */
@media (max-width: 575px) {
    .product-card-items .product-thumb img,
    .shop-card img {
        width: 100%;
    }
}

/* Cart/checkout responsive */
@media (max-width: 767px) {
    .cart-wrapper, .checkout-wrapper {
        overflow-x: auto;
    }
    .cart-wrapper table,
    .checkout-wrapper table {
        min-width: 600px;
    }
}

/* Header top bar long text wrap on tablet */
@media (max-width: 1199px) and (min-width: 992px) {
    .header-top-wrapper ul {
        flex-wrap: wrap;
        gap: 10px 20px;
    }
}