/*
 * ============================================================
 *  COOLTECH — custom.css
 *
 *  This file is loaded AFTER the main compiled CSS.
 *  The main CSS (index-B9nDsNDj.css) already contains all the
 *  correct template styles. THIS file only:
 *
 *    1. Sets the CSS variables the template reads (colours, fonts)
 *    2. Fixes a few things that break without the React JS runtime
 *    3. Provides a safe space for YOUR custom overrides at the bottom
 *
 *  ✏️  To change the brand colour: edit --theme-color1 below.
 *  ✏️  To add your own styles:     scroll to Section 3.
 * ============================================================
 */


/* ============================================================
   1. CSS VARIABLES
   The compiled CSS reads these variables everywhere.
   Change them here to re-brand the whole site instantly.
   ============================================================ */
:root {
    /* ── Brand colours ─────────────────────────────────────── */
    --theme-color1              : #0B4A80;   /* primary orange  */
    --theme-color2              : #232331;   /* dark navy       */
    --theme-color3              : #0f2c49;   /* deep blue       */
    --theme-color4              : #0B4A80;   /* hover / accent  */
    --theme-color5              : #0B4A80;

    /* Background aliases */
    --bg-theme-color1           : var(--theme-color1);
    --bg-theme-color2           : var(--theme-color2);
    --bg-theme-color3           : var(--theme-color3);
    --bg-theme-color4           : var(--theme-color4);

    /* Border aliases */
    --border-theme-color1       : var(--theme-color1);
    --border-theme-color2       : var(--theme-color2);
    --border-theme-color3       : var(--theme-color3);
    --border-theme-color4       : var(--theme-color4);

    /* Text-on-colour aliases */
    --text-color-bg-theme-color1: #fff;
    --text-color-bg-theme-color2: #fff;
    --text-color-bg-theme-color3: #fff;
    --text-color-bg-theme-color4: #fff;
    --theme-color-light         : #ffffff;
    --theme-color-dark          : #000000;

    /* ── Typography ────────────────────────────────────────── */
    --text-color                : #767676;
    --headings-color            : var(--theme-color3);
    --link-color                : var(--theme-color1);
    --link-hover-color          : var(--theme-color1);
    --text-font                 : "Poppins", sans-serif;
    --title-font                : "DM Sans", sans-serif;
    --body-font-size            : 16px;
    --body-line-height          : 30px;
    --body-font-weight          : 400;

    /* Headings */
    --line-height-heading       : 1.2em;
    --line-height-heading-small : 1.4em;
    --h1-font-size              : 90px;
    --h2-font-size              : 48px;
    --h3-font-size              : 36px;
    --h4-font-size              : 24px;
    --h5-font-size              : 18px;
    --h6-font-size              : 14px;
    --h1-font-weight            : 700;
    --h2-font-weight            : 700;
    --h3-font-weight            : 700;
    --h4-font-weight            : 700;
    --h5-font-weight            : 700;
    --h6-font-weight            : 700;

    /* Section title */
    --sec-title-subtitle-color      : var(--text-color);
    --sec-title-subtitle-font-size  : 14px;
    --sec-title-subtitle-font-family: var(--title-font);
    --sec-title-subtitle-font-weight: 500;
    --sec-title-subtitle-line-height: 20px;
    --sec-title-color               : var(--theme-color3);
    --sec-title-font-size           : var(--h2-font-size);
    --sec-title-font-family         : var(--title-font);
    --sec-title-font-weight         : var(--h2-font-weight);

    /* ── Layout ─────────────────────────────────────────────── */
    --theme-light-background    : #f6f6f6;
    --theme-black               : #0b0b0b;
    --container-width           : 1200px;
    --small-container-width     : 1000px;
    --large-container-width     : 1550px;
    --container-pt              : 120px;
    --container-pb              : 120px;

    /* ── Review star colour ─────────────────────────────────── */
    --review-color              : #ffc737;
}


/* ============================================================
   2. FIXES — things broken without the React/Vite runtime
   ============================================================ */

/* Preloader */
#preloader {
    position        : fixed;
    inset           : 0;
    background      : #fff;
    display         : flex;
    align-items     : center;
    justify-content : center;
    z-index         : 99999;
    transition      : opacity 0.4s ease;
}
#preloader.out { opacity: 0; pointer-events: none; }

/* Mobile menu slide-in */
.mobile-menu {
    position   : fixed;
    inset      : 0;
    z-index    : 99999;
    visibility : hidden;
    opacity    : 0;
    transition : all 0.3s ease;
}
.mobile-menu.mobile-menu-visible { visibility: visible; opacity: 1; }

.menu-backdrop {
    position   : fixed;
    inset      : 0;
    background : rgba(0,0,0,0.6);
}
.menu-box {
    position   : fixed;
    top        : 0;
    left       : -320px;
    width      : 300px;
    height     : 100%;
    overflow-y : auto;
    background : #fff;
    z-index    : 1;
    transition : left 0.4s ease;
    padding-bottom: 30px;
}
.mobile-menu.mobile-menu-visible .menu-box { left: 0; }

/* Dropdown menus on hover (desktop) */
.main-menu .navigation li.dropdown { position: relative; }
.main-menu .navigation li.dropdown > ul {
    position   : absolute;
    top        : 100%;
    left       : 0;
    display    : none;
    z-index    : 9999;
    min-width  : 200px;
    background : #fff;
    box-shadow : 0 10px 30px rgba(0,0,0,0.12);
    border-top : 3px solid var(--theme-color1);
}
.main-menu .navigation li.dropdown:hover > ul { display: block; }
.main-menu .navigation li.dropdown > ul li.dropdown > ul { top: 0; left: 100%; }

/* Sticky header – initially hidden above viewport */
.sticky-header {
    position   : fixed;
    top        : -200px;
    left       : 0;
    width      : 100%;
    z-index    : 9998;
    background : #fff;
    box-shadow : 0 2px 20px rgba(0,0,0,0.1);
    transition : top 0.4s ease;
}
.sticky-header.fixed-header { top: 0; }

/* Search popup */
.search-popup {
    position   : fixed;
    inset      : 0;
    z-index    : 99998;
    display    : flex;
    align-items: center;
    justify-content: center;
    visibility : hidden;
    opacity    : 0;
    transition : all 0.3s ease;
}
.search-popup.popup-visible { visibility: visible; opacity: 1; }
.search-back-drop { position: absolute; inset: 0; background: rgba(0,0,0,0.85); }
.search-inner {
    position     : relative;
    z-index      : 1;
    background   : #fff;
    padding      : 40px;
    border-radius: 8px;
    min-width    : min(500px, 90vw);
}
.search-inner .form-group { display: flex; }
.search-inner .form-group input {
    flex        : 1;
    padding     : 14px 20px;
    border      : 2px solid var(--theme-color1);
    border-right: none;
    font-size   : 16px;
    outline     : none;
    border-radius: 30px 0 0 30px;
}
.search-inner .form-group button {
    padding      : 14px 24px;
    background   : var(--theme-color1);
    color        : #fff;
    border       : none;
    cursor       : pointer;
    border-radius: 0 30px 30px 0;
    font-size    : 16px;
}
.close-search {
    position  : absolute;
    top       : 12px;
    right     : 12px;
    background: none;
    border    : none;
    font-size : 20px;
    cursor    : pointer;
    color     : #999;
}

.main-header .logo img {
    max-width: 30% !important;
    height: auto;
}

.sticky-header .logo img {
    max-height: 60px;
}

.banner-section-one .home-ac-icon {
    height: 400px;
    max-width: 531px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.contact-section .bg-img4 {
    background-image: url(./getintouch.png) !important;
    height: 615px;
    left: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 850px;
}

.bottom-shape{
    background-image:url(./herobg.png) !important;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    bottom: 0;
    height: 172px;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}
.main-footer .about-widget .logo-box {
    margin-bottom: 28px;
    padding: 0 35px 0 0;
}

.about-section-two .text-column .text {
    margin-bottom: 5px;
}
/* Scroll-to-top button */
.scroll-to-top { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: none; }

/* appie-visible wrapper must be visible */
.appie-visible { display: block !important; opacity: 1 !important; visibility: visible !important; }

/* Mobile nav toggler visible on small screens */
@media (max-width: 480px) {
    .mobile-nav-toggler { display: block !important; }
    .main-menu .navigation { display: none !important; }
    .main-header .nav-outer .outer-box .info-btn { display: none; }
    .main-header .logo img {
        max-width: 100% !important;
        height: auto;
    }
    .logo-box {
        margin-bottom: 0;
        padding: 0 !important;
    }
    .about-section-two .title {
        font-size: 65px;
        margin: 50px 0;
    }
}

/* ============================================================
   3. YOUR CUSTOM OVERRIDES
   Add your own CSS below this line.
   Examples:
     - Change a colour:    .theme-btn.btn-style-one { background: #007bff; }
     - Change font size:   .banner-section-one .title { font-size: 60px; }
     - Add padding:        .about-section { padding: 80px 0; }
   ============================================================ */

/* — YOUR STYLES HERE — */







/* ============================================================
   SERVICE DETAIL PAGE — 2-column layout (image | info)
   No sidebar. Image fills left side fully, info on right.
   ============================================================ */

/* Page title banner */
.sd-page-title {
    background          : url('../assets/bg4-DGGsJ9o9.jpg') center / cover no-repeat;
    position            : relative;
    padding             : 80px 0 60px;
}
.sd-page-title::after {
    content    : '';
    position   : absolute;
    inset      : 0;
    background : rgba(11, 74, 128, 0.72);
}
.sd-page-title .auto-container { position: relative; z-index: 2; }
.sd-page-title h1 {
    color       : #fff;
    font-size   : 44px;
    font-weight : 700;
    margin      : 0 0 14px;
    line-height : 1.2;
}
.sd-breadcrumb {
    display    : flex;
    flex-wrap  : wrap;
    gap        : 6px;
    list-style : none;
    margin     : 0;
    padding    : 0;
    font-size  : 14px;
}
.sd-breadcrumb li             { color: rgba(255,255,255,.55); }
.sd-breadcrumb li::after      { content: ' /'; margin-left: 6px; }
.sd-breadcrumb li:last-child::after { display: none; }
.sd-breadcrumb li:last-child  { color: #fff; font-weight: 600; }
.sd-breadcrumb a              { color: rgba(255,255,255,.8); }
.sd-breadcrumb a:hover        { color: #fff; }

/* Section bg */
.sd-section {
    background : #f4f7fb;
    padding    : 60px 0 80px;
}

/* ── 2-column grid ── */
.sd-two-col {
    display               : grid;
    grid-template-columns : 1fr 1.1fr;  /* image | info, roughly equal */
    gap                   : 0;          /* no gap — they touch */
    align-items           : stretch;
    margin-bottom         : 32px;
    background            : #fff;
    border-radius         : 10px;
    overflow              : hidden;
    box-shadow            : 0 4px 24px rgba(0,0,0,.08);
}

/* LEFT — image fills its column completely */
.sd-img-col {
    display : flex;
}
.sd-img-wrap {
    width      : 100%;
    background : #eef4fb;
}
.sd-img-wrap img {
    width      : 100%;
    height     : 100%;
    min-height : 380px;
    object-fit : cover;
    display    : block;
}

/* RIGHT — info card (no outer shadow, it's already inside the card) */
.sd-info-col {
    border-left : 1px solid #e8eef5;
}
.sd-info-card {
    padding : 36px 36px 32px;
    height  : 100%;
    display : flex;
    flex-direction : column;
}

.sd-info-title {
    font-size    : 26px;
    font-weight  : 700;
    color        : #0f2c49;
    margin       : 0 0 14px;
    line-height  : 1.25;
}
.sd-info-divider {
    border     : none;
    border-top : 1px solid #dce8f5;
    margin     : 0 0 18px;
}
.sd-info-desc {
    font-size    : 14px;
    color        : #555;
    line-height  : 1.8;
    margin-bottom: 20px;
}

/* Key points */
.sd-keypoints              { margin-bottom: 24px; }
.sd-keypoints h4           { font-size: 16px; font-weight: 700; color: #0f2c49; margin-bottom: 10px; }
.sd-keypoints ul           { list-style: none; margin: 0; padding: 0; }
.sd-keypoints ul li {
    display     : flex;
    align-items : center;
    gap         : 8px;
    padding     : 5px 0;
    font-size   : 14px;
    color       : #0B4A80;
    font-weight : 500;
}
.sd-keypoints ul li .fa    { color: #0B4A80; font-size: 16px; flex-shrink: 0; }

/* Buttons */
.sd-btns {
    display    : flex;
    gap        : 12px;
    flex-wrap  : wrap;
    margin-top : auto; /* pushes to bottom of flex column */
    padding-top: 6px;
}
.sd-btn-enquiry,
.sd-btn-wa {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 12px 28px;
    border-radius  : 6px;
    font-size      : 15px;
    font-weight    : 700;
    text-decoration: none;
    transition     : all .2s;
    border         : none;
    cursor         : pointer;
}
.sd-btn-enquiry       { background: #0f2c49; color: #fff; }
.sd-btn-enquiry:hover { background: #1a4068; color: #fff; }
.sd-btn-wa            { background: #25d366; color: #fff; }
.sd-btn-wa:hover      { background: #1dba5a; color: #fff; }

/* Trade Information */
.sd-trade {
    background    : #fff;
    border-radius : 10px;
    box-shadow    : 0 4px 20px rgba(0,0,0,.07);
    overflow      : hidden;
    margin-bottom : 28px;
}
.sd-trade-head {
    display      : flex;
    align-items  : center;
    gap          : 10px;
    padding      : 16px 24px;
    border-bottom: 1px solid #dce8f5;
    font-size    : 16px;
    font-weight  : 700;
    color        : #0f2c49;
    background   : #f4f7fb;
}
.sd-trade-sq {
    width        : 10px;
    height       : 10px;
    background   : #0B4A80;
    border-radius: 2px;
    flex-shrink  : 0;
}
.sd-trade-body { padding: 4px 0; }
.sd-trade-row {
    display               : grid;
    grid-template-columns : 200px 1fr;
    padding               : 12px 24px;
    border-bottom         : 1px solid #f0f5f5;
    font-size             : 14px;
    gap                   : 20px;
    align-items           : start;
}
.sd-trade-row:last-child { border-bottom: none; }
.sd-trade-key            { color: #0B4A80; font-weight: 700; }
.sd-trade-val            { color: #444; }

/* Prev / Next navigation */
.sd-prevnext {
    display         : flex;
    justify-content : space-between;
    gap             : 16px;
}
.sd-nav-btn {
    display        : inline-flex;
    align-items    : center;
    gap            : 8px;
    padding        : 12px 20px;
    background     : #fff;
    border         : 1px solid #dce8f5;
    border-radius  : 6px;
    font-size      : 13.5px;
    font-weight    : 600;
    color          : #0f2c49;
    transition     : all .2s;
    text-decoration: none;
    max-width      : 48%;
    box-shadow     : 0 2px 8px rgba(0,0,0,.05);
    white-space    : nowrap;
    overflow       : hidden;
    text-overflow  : ellipsis;
}
.sd-nav-btn:hover      { background: #0B4A80; color: #fff; border-color: #0B4A80; }
.sd-nav-btn .fa        { font-size: 12px; flex-shrink: 0; }
.sd-nav-next           { margin-left: auto; }


/* ============================================================
   RESPONSIVE — Service Detail
   ============================================================ */

/* Tablet: stack image on top, info below */
@media (max-width: 900px) {
    .sd-two-col {
        grid-template-columns : 1fr;
    }
    .sd-img-col  { border-bottom: 1px solid #e8eef5; }
    .sd-info-col { border-left: none; }
    .sd-img-wrap img { min-height: 260px; max-height: 340px; }
    .sd-info-card { padding: 28px 24px; }
}

@media (max-width: 600px) {
    .sd-page-title        { padding: 60px 0 40px; }
    .sd-page-title h1     { font-size: 28px; }
    .sd-section           { padding: 36px 0 56px; }
    .sd-info-card         { padding: 22px 18px; }
    .sd-info-title        { font-size: 21px; }
    .sd-info-desc         { font-size: 13.5px; }
    .sd-img-wrap img      { min-height: 200px; }
    .sd-trade-row {
        grid-template-columns : 1fr;
        gap                   : 2px;
    }
    .sd-prevnext          { flex-direction: column; }
    .sd-nav-btn           { max-width: 100%; }
    .sd-nav-next          { margin-left: 0; }
    .sd-btn-enquiry,
    .sd-btn-wa            { width: 100%; justify-content: center; padding: 12px 20px; }
}



/* ============================================================
   INDUSTRIES LISTING PAGE
   ============================================================ */

/* Category heading */
.ind-category-block {
    margin-bottom : 48px;
}
.ind-category-title {
    font-size     : 22px;
    font-weight   : 700;
    color         : #0B4A80;
    margin-bottom : 20px;
    padding-bottom: 10px;
    border-bottom : 2px solid #dce8f5;
    display       : flex;
    align-items   : center;
    gap           : 10px;
}
.ind-category-title .fa { font-size: 16px; }

/* Items grid */
.ind-items-grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 20px;
}

/* Each item card */
.ind-item-card {
    background     : #fff;
    border-radius  : 8px;
    overflow       : hidden;
    box-shadow     : 0 3px 16px rgba(0,0,0,.07);
    text-decoration: none;
    display        : flex;
    flex-direction : column;
    transition     : transform .22s, box-shadow .22s;
    border         : 1px solid #e8eef5;
}
.ind-item-card:hover {
    transform  : translateY(-4px);
    box-shadow : 0 10px 30px rgba(0,0,0,.12);
}
.ind-item-img { overflow: hidden; }
.ind-item-img img {
    width      : 100%;
    height     : 180px;
    object-fit : cover;
    display    : block;
    transition : transform .4s;
}
.ind-item-card:hover .ind-item-img img { transform: scale(1.05); }

.ind-item-info  { padding: 18px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.ind-item-info h4 {
    font-size    : 15px;
    font-weight  : 700;
    color        : #0f2c49;
    margin       : 0 0 8px;
    line-height  : 1.3;
}
.ind-item-info p {
    font-size    : 13px;
    color        : #666;
    line-height  : 1.6;
    margin-bottom: 12px;
    flex         : 1;
}
.ind-read-more {
    font-size  : 13px;
    font-weight: 600;
    color      : #0B4A80;
    display    : flex;
    align-items: center;
    gap        : 4px;
    margin-top : auto;
}
.ind-item-card:hover .ind-read-more { color: #1565b0; }

/* CTA box */
.ind-cta-box {
    background    : #0f2c49;
    border-radius : 10px;
    padding       : 40px;
    text-align    : center;
    margin-top    : 20px;
}
.ind-cta-box h3  { color: #fff; font-size: 24px; margin: 0 0 10px; }
.ind-cta-box p   { color: rgba(255,255,255,.75); font-size: 15px; margin-bottom: 24px; }
.ind-cta-btns    { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 900px) {
    .ind-items-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .ind-items-grid  { grid-template-columns: 1fr; }
    .ind-cta-box     { padding: 28px 20px; }
    .ind-cta-box h3  { font-size: 20px; }
    .ind-cta-btns    { flex-direction: column; }
    .ind-cta-btns a  { width: 100%; justify-content: center; }
}


/* ============================================================
   ENQUIRY POPUP MODAL
   ============================================================ */

/* Overlay */
.eq-overlay {
    display         : none;
    position        : fixed;
    inset           : 0;
    background      : rgba(0, 0, 0, 0.65);
    z-index         : 99999;
    align-items     : center;
    justify-content : center;
    padding         : 16px;
    backdrop-filter : blur(3px);
}
.eq-overlay.active { display: flex; animation: eqFadeIn .25s ease; }

@keyframes eqFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Modal box */
.eq-modal {
    background    : #fff;
    border-radius : 14px;
    width         : 100%;
    max-width     : 480px;
    max-height    : 92vh;
    overflow-y    : auto;
    position      : relative;
    box-shadow    : 0 24px 60px rgba(0,0,0,.3);
    animation     : eqSlideUp .28s ease;
}
@keyframes eqSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
.eq-modal::-webkit-scrollbar       { width: 4px; }
.eq-modal::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Close button */
.eq-close {
    position     : absolute;
    top          : 14px;
    right        : 14px;
    width        : 34px;
    height       : 34px;
    border-radius: 50%;
    background   : #f0f0f0;
    border       : none;
    cursor       : pointer;
    font-size    : 15px;
    color        : #555;
    display      : flex;
    align-items  : center;
    justify-content: center;
    transition   : all .2s;
    z-index      : 1;
}
.eq-close:hover { background: #0B4A80; color: #fff; }

/* Header strip */
.eq-header {
    background      : linear-gradient(135deg, #0B4A80 0%, #0f2c49 100%);
    padding         : 30px 28px 24px;
    text-align      : center;
    border-radius   : 14px 14px 0 0;
}
.eq-icon {
    width           : 56px;
    height          : 56px;
    background      : rgba(255,255,255,.15);
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    margin          : 0 auto 12px;
    font-size       : 22px;
    color           : #fff;
}
.eq-header h3 { color: #fff; font-size: 22px; font-weight: 700; margin: 0 0 6px; }
.eq-header p  { color: rgba(255,255,255,.8); font-size: 13.5px; margin: 0; }

/* Form area */
#eq-form { padding: 24px 28px 28px; }

/* Fields */
.eq-field { margin-bottom: 18px; }
.eq-field label {
    display      : block;
    font-size    : 13.5px;
    font-weight  : 600;
    color        : #0f2c49;
    margin-bottom: 7px;
}
.eq-field label span { color: #e53e3e; margin-left: 2px; }

.eq-input-wrap {
    position     : relative;
    display      : flex;
    align-items  : center;
}
.eq-input-wrap .fa {
    position  : absolute;
    left      : 14px;
    color     : #0B4A80;
    font-size : 14px;
    z-index   : 1;
}
.eq-input-wrap input,
.eq-input-wrap textarea {
    width        : 100%;
    padding      : 12px 14px 12px 40px;
    border       : 1.5px solid #dce8f5;
    border-radius: 8px;
    font-size    : 14px;
    color        : #333;
    background   : #f8fbff;
    outline      : none;
    transition   : border-color .2s, box-shadow .2s;
    font-family  : inherit;
}
.eq-input-wrap input:focus,
.eq-input-wrap textarea:focus {
    border-color : #0B4A80;
    box-shadow   : 0 0 0 3px rgba(11,74,128,.1);
    background   : #fff;
}
.eq-textarea-wrap { align-items: flex-start; }
.eq-textarea-wrap .fa { top: 14px; }
.eq-input-wrap textarea { resize: vertical; min-height: 90px; }

/* Error states */
.eq-field.has-error .eq-input-wrap input,
.eq-field.has-error .eq-input-wrap textarea {
    border-color : #e53e3e;
    background   : #fff8f8;
}
.eq-error {
    display    : block;
    font-size  : 12px;
    color      : #e53e3e;
    margin-top : 5px;
    min-height : 16px;
}
.eq-error-general {
    display      : block;
    text-align   : center;
    margin-bottom: 10px;
    font-size    : 13px;
    color        : #e53e3e;
}

/* Submit button */
.eq-submit-btn {
    width           : 100%;
    padding         : 14px 20px;
    background      : linear-gradient(135deg, #0B4A80 0%, #0f2c49 100%);
    color           : #fff;
    border          : none;
    border-radius   : 8px;
    font-size       : 16px;
    font-weight     : 700;
    cursor          : pointer;
    transition      : all .2s;
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    margin-top      : 6px;
}
.eq-submit-btn:hover:not(:disabled) {
    background : linear-gradient(135deg, #1565b0 0%, #1a4068 100%);
    transform  : translateY(-1px);
    box-shadow : 0 6px 20px rgba(11,74,128,.35);
}
.eq-submit-btn:disabled { opacity: .7; cursor: not-allowed; }

/* Success state */
.eq-success {
    padding    : 36px 28px;
    text-align : center;
    display    : none;
}
.eq-success-icon { font-size: 56px; color: #25d366; margin-bottom: 14px; }
.eq-success h4   { font-size: 22px; font-weight: 700; color: #0f2c49; margin-bottom: 8px; }
.eq-success p    { font-size: 14.5px; color: #666; margin-bottom: 22px; }


/* ============================================================
   CONTACT PAGE — custom form styles
   ============================================================ */
.contact-form-box    { background: #fff; border-radius: 10px; padding: 36px; box-shadow: 0 4px 24px rgba(0,0,0,.07); }
.contact-details     { padding: 70px 0 80px; background: #f4f7fb; }

.contact-field       { margin-bottom: 20px; }
.contact-field label {
    display      : block;
    font-size    : 14px;
    font-weight  : 600;
    color        : #0f2c49;
    margin-bottom: 7px;
}
.contact-field .req  { color: #e53e3e; margin-left: 2px; }

.contact-field input,
.contact-field textarea {
    width        : 100%;
    padding      : 13px 16px;
    border       : 1.5px solid #dce8f5;
    border-radius: 7px;
    font-size    : 14px;
    color        : #333;
    background   : #f8fbff;
    outline      : none;
    transition   : border-color .2s, box-shadow .2s;
    font-family  : inherit;
}
.contact-field input:focus,
.contact-field textarea:focus {
    border-color : #0B4A80;
    box-shadow   : 0 0 0 3px rgba(11,74,128,.1);
    background   : #fff;
}
.contact-field textarea { resize: vertical; height: 140px; }

.contact-field.has-error input,
.contact-field.has-error textarea { border-color: #e53e3e; background: #fff8f8; }
.field-error { display: block; font-size: 12px; color: #e53e3e; margin-top: 5px; }

.contact-submit-btn {
    padding         : 14px 36px;
    background      : #0B4A80;
    color           : #fff;
    border          : none;
    border-radius   : 7px;
    font-size       : 15.5px;
    font-weight     : 700;
    cursor          : pointer;
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    transition      : all .2s;
    margin-top      : 4px;
}
.contact-submit-btn:hover { background: #1565b0; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(11,74,128,.3); }

.contact-success-msg,
.contact-error-msg {
    border-radius: 8px;
    padding      : 14px 18px;
    margin-bottom: 20px;
    display      : flex;
    align-items  : center;
    gap          : 10px;
    font-size    : 14px;
}
.contact-success-msg { background: #f0fff4; border: 1px solid #c6f6d5; color: #276749; }
.contact-error-msg   { background: #fff5f5; border: 1px solid #fed7d7; color: #c53030; }
.contact-success-msg .fa { color: #25d366; font-size: 18px; }
.contact-error-msg .fa   { color: #e53e3e; font-size: 18px; }

.contact-wa-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 10px;
    padding         : 13px 24px;
    background      : #25d366;
    color           : #fff;
    border-radius   : 8px;
    font-size       : 15px;
    font-weight     : 700;
    text-decoration : none;
    margin-top      : 24px;
    transition      : background .2s;
}
.contact-wa-btn:hover { background: #1dba5a; color: #fff; }


/* ── Responsive ── */
@media (max-width: 768px) {
    .eq-modal  { max-width: 100%; border-radius: 14px 14px 0 0; margin-top: auto; }
    .eq-overlay.active { align-items: flex-end; padding: 0; }
    .eq-header { border-radius: 14px 14px 0 0; padding: 24px 20px 20px; }
    #eq-form   { padding: 20px 20px 24px; }
    .eq-success { padding: 28px 20px; }

    .contact-form-box { padding: 24px 18px; }
    .contact-details  { padding: 44px 0 60px; }
    .contact-submit-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .eq-header h3 { font-size: 19px; }
    .eq-submit-btn { font-size: 14.5px; padding: 13px 16px; }
}

/* ============================================================
   MEGA MENU — COMPLETE REWRITE (works on all deployments)
   ============================================================ */

/* Overflow visible on all nav parents */
.main-header .header-lower,
.main-header .header-lower .main-box,
.main-header .nav-outer,
.main-menu,
.main-menu .navigation,
.sticky-header,
.sticky-header .auto-container,
.sticky-header .inner-container,
.sticky-header .nav-outer,
.sticky-header .main-menu,
.sticky-header .main-menu .navigation {
    overflow : visible !important;
}

/* Parent li */
.main-menu .navigation li.mega-menu-parent,
.sticky-header .navigation li.mega-menu-parent {
    position : relative !important;
    overflow : visible !important;
}

/* Chevron */
.mega-menu-parent > a {
    display     : flex !important;
    align-items : center !important;
    gap         : 5px !important;
}
.mega-menu-parent > a .fa-angle-down {
    font-size  : 10px;
    transition : transform .25s ease;
}
.mega-menu-parent:hover > a .fa-angle-down {
    transform : rotate(180deg);
}

/* Remove 2nd arrow from compiled CSS */
.navigation li.mega-menu-parent > a::after,
.navigation li.mega-menu-parent > a::before {
    display : none !important;
    content : none !important;
}

/* ── MEGA MENU PANEL ── */
.mega-menu-parent > .mega-menu {
    display       : none !important;
    position      : absolute !important;
    top           : 100% !important;
    left          : 0 !important;
    width         : 240px !important;
    background    : #fff;
    border-top    : 3px solid #0B4A80;
    box-shadow    : 0 16px 48px rgba(0,0,0,.18);
    border-radius : 0 0 10px 10px;
    z-index       : 999999 !important;
    padding       : 6px 0 6px !important;
    overflow      : visible !important;
    /* Bridge gap between nav and dropdown */
    margin-top    : 0 !important;
}
/* Invisible bridge to prevent hover gap */
.mega-menu-parent > .mega-menu::before {
    content  : '';
    position : absolute;
    top      : -12px;
    left     : 0;
    right    : 0;
    height   : 12px;
    display  : block;
}

/* Show on hover */
.mega-menu-parent:hover > .mega-menu {
    display : block !important;
}

/* ── CATEGORY ROW ── */
.mega-cat-row {
    position : relative !important;
    overflow : visible !important;
}
.mega-cat-label {
    display         : flex !important;
    align-items     : center !important;
    justify-content : space-between !important;
    padding         : 11px 18px !important;
    font-size       : 14px !important;
    font-weight     : 500 !important;
    color           : #1a2e3b !important;
    cursor          : pointer !important;
    border-left     : 3px solid transparent !important;
    transition      : all .18s ease !important;
    white-space     : nowrap !important;
    gap             : 20px !important;
    user-select     : none !important;
}
.mega-cat-label .fa {
    font-size  : 11px !important;
    color      : #aaa !important;
    flex-shrink: 0 !important;
}
.mega-cat-row:hover > .mega-cat-label {
    background        : #eef4fb !important;
    color             : #0B4A80 !important;
    border-left-color : #0B4A80 !important;
    font-weight       : 600 !important;
}
.mega-cat-row:hover > .mega-cat-label .fa {
    color : #0B4A80 !important;
}

/* ── SUB PANEL ── */
.mega-cat-row > .mega-sub-panel {
    display       : none !important;
    position      : absolute !important;
    top           : 0 !important;
    left          : 240px !important;
    width         : 260px !important;
    min-width     : 260px !important;
    max-width     : 260px !important;
    background    : #fff !important;
    border-left   : 3px solid #0B4A80 !important;
    box-shadow    : 8px 8px 32px rgba(0,0,0,.14) !important;
    border-radius : 0 8px 8px 0 !important;
    list-style    : none !important;
    margin        : 0 !important;
    padding       : 6px 0 !important;
    z-index       : 999999 !important;
    max-height    : 420px !important;
    overflow-y    : auto !important;
    overflow-x    : hidden !important;
}
/* Invisible bridge — prevents gap between label and sub-panel */
.mega-cat-row > .mega-sub-panel::before {
    content  : '';
    position : absolute;
    top      : 0;
    left     : -12px;
    width    : 12px;
    height   : 100%;
    display  : block;
}
.mega-cat-row:hover > .mega-sub-panel {
    display : block !important;
}

/* Sub-panel links */
.mega-sub-panel li {
    list-style : none !important;
}
.mega-sub-panel li a {
    display         : flex !important;
    align-items     : center !important;
    gap             : 8px !important;
    padding         : 9px 16px !important;
    font-size       : 13px !important;
    color           : #2c3e50 !important;
    border-bottom   : 1px solid #f0f5f5 !important;
    transition      : all .15s ease !important;
    white-space     : normal !important;
    word-break      : break-word !important;
    line-height     : 1.4 !important;
    text-decoration : none !important;
}
.mega-sub-panel li a .fa {
    font-size  : 10px !important;
    color      : #0B4A80 !important;
    flex-shrink: 0 !important;
}
.mega-sub-panel li:last-child a {
    border-bottom : none !important;
}
.mega-sub-panel li a:hover {
    background   : #eef4fb !important;
    color        : #0B4A80 !important;
    padding-left : 20px !important;
}

/* Scrollbar */
.mega-sub-panel::-webkit-scrollbar       { width: 3px; }
.mega-sub-panel::-webkit-scrollbar-thumb { background: #0B4A8044; border-radius: 4px; }

/* ── MOBILE: hide mega menu, show accordion ── */
@media (max-width: 991px) {
    .mega-menu-parent > .mega-menu { display: none !important; }
    .mega-menu-parent > a .fa-angle-down { display: none !important; }
}


/* ============================================================
   CONTACT PAGE — ct- prefix fix
   contact.php uses ct- classes, adding them here
   ============================================================ */

.ct-form-wrap {
    background    : #fff;
    border-radius : 10px;
    padding       : 36px;
    box-shadow    : 0 4px 24px rgba(0,0,0,.07);
}

.ct-field { margin-bottom: 20px; }
.ct-field label {
    display       : block;
    font-size     : 13.5px;
    font-weight   : 600;
    color         : #0f2c49;
    margin-bottom : 7px;
}
.ct-field label .req { color: #e53935; margin-left: 2px; }

.ct-field input,
.ct-field textarea {
    width         : 100%;
    padding       : 13px 16px;
    border        : 1.5px solid #dce8f5;
    border-radius : 7px;
    font-size     : 14px;
    color         : #333;
    background    : #f8fbff;
    outline       : none;
    transition    : border-color .2s, box-shadow .2s;
    font-family   : inherit;
    box-sizing    : border-box;
}
.ct-field input:focus,
.ct-field textarea:focus {
    border-color : #0B4A80;
    box-shadow   : 0 0 0 3px rgba(11,74,128,.1);
    background   : #fff;
}
.ct-field textarea { resize: vertical; min-height: 120px; }

.ct-field.has-error input,
.ct-field.has-error textarea { border-color: #e53935; background: #fff8f8; }

.ct-error {
    display    : block;
    color      : #e53935;
    font-size  : 12px;
    margin-top : 4px;
}

.ct-btn-row {
    display    : flex;
    gap        : 12px;
    flex-wrap  : wrap;
    margin-top : 8px;
}

.ct-reset-btn {
    padding       : 0 24px;
    height        : 52px;
    background    : transparent;
    border        : 2px solid #dce8f5;
    border-radius : 30px;
    font-size     : 14px;
    font-weight   : 600;
    color         : #555;
    cursor        : pointer;
    transition    : all .2s;
    font-family   : inherit;
}
.ct-reset-btn:hover { border-color: #0B4A80; color: #0B4A80; }

.ct-alert-success {
    background    : #e8f5e9;
    border        : 1px solid #a5d6a7;
    border-radius : 8px;
    padding       : 14px 18px;
    color         : #2e7d32;
    font-size     : 14px;
    font-weight   : 600;
    margin-bottom : 20px;
    display       : flex;
    align-items   : center;
    gap           : 10px;
}
.ct-alert-success .fa { font-size: 18px; }

/* WhatsApp button on contact page */
.ct-wa-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 12px 22px;
    background      : #25d366;
    color           : #fff;
    border-radius   : 8px;
    font-size       : 14px;
    font-weight     : 600;
    text-decoration : none;
    transition      : background .2s;
    margin-top      : 20px;
}
.ct-wa-btn:hover { background: #1dba5a; color: #fff; }

@media (max-width: 768px) {
    .ct-form-wrap { padding: 24px 18px; }
    .ct-btn-row   { flex-direction: column; }
    .ct-reset-btn { width: 100%; height: 46px; }
}

/* ============================================================
   MOBILE SIDEBAR — compiled CSS patches
   Structure: body.mobile-menu-visible → .mobile-menu → .menu-box
   Patched compiled CSS: right→left, overflow:hidden→visible, 
   translateX(101%)→translateX(-101%)
   ============================================================ */

/* Prevent body scroll block */
body.mobile-menu-visible { overflow-y: scroll !important; }

/* Ensure hamburger always clickable */
.mobile-nav-toggler {
    cursor         : pointer !important;
    pointer-events : all !important;
    position       : relative !important;
    z-index        : 9999 !important;
}

/* Extra safety — menu-box from left */
.mobile-menu .menu-box {
    -webkit-transform : translateX(-101%) !important;
    transform         : translateX(-101%) !important;
}
body.mobile-menu-visible .mobile-menu .menu-box {
    -webkit-transform : translateX(0) !important;
    transform         : translateX(0) !important;
    -webkit-transition: all .4s ease .2s !important;
    transition        : all .4s ease .2s !important;
}


/* ============================================================
   POPUP FORM — input fields fix
   ============================================================ */
.eq-field input,
.eq-field textarea {
    display       : block !important;
    width         : 100% !important;
    padding       : 12px 16px !important;
    border        : 1.5px solid #d0dff0 !important;
    border-radius : 7px !important;
    font-size     : 14px !important;
    color         : #222 !important;
    background    : #f5f9ff !important;
    box-sizing    : border-box !important;
    min-height    : 46px !important;
    visibility    : visible !important;
    opacity       : 1 !important;
}
.eq-field input:focus,
.eq-field textarea:focus {
    border-color : #0B4A80 !important;
    background   : #fff !important;
    outline      : none !important;
}