
.enquiry-contact-sec{
    background: #1D3665; 
    /* background:url(../images/form-bg-img.webp),radial-gradient(circle, #1D3665 0%, #2A8DCD 100%); */;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;}

.enquiry-contact-sec .form-top-heading-sec h2,
.enquiry-contact-sec .form-top-heading-sec p{text-align: center;color: #fff;}
/* .enquiry-contact-sec .form-top-heading-sec p */
.enquiry-contact-sec .form-top-heading-sec{margin-bottom:50px}


/* ===== Enquiry Form (scoped to .enquiry-form only) ===== */
.enquiry-form {
    --cf-accent: #1f5a99;       /* change to your brand blue */
    --cf-accent-dark: #174a80;
    --cf-border: #d5dde8;
    --cf-text: #1e293b;
}

.enquiry-form  p { margin: 0 !important;}
.enquiry-form  p br{display: none !important;}

.enquiry-form .common-btn.submit-btn p{all:unset;}

.enquiry-form .common-btn{
        padding: 15px 30px;
            font-size: 20px;
    line-height: 22px;
}
 
.enquiry-form .common-btn img{
        width: 20px;
    height: 20px;
     transition: left 0.4s ease;
}

.enquiry-form .common-btn:hover input{
    transform: translateX(-30px);
    transition: transform 0.4s ease;
}

.enquiry-form .common-btn:hover img{
    left: calc(100% - 26px);
    transform: translateY(0);
    transition: left 0.4s ease;
       
}

.enquiry-form  .form-row { display: flex; gap: 24px;margin-bottom: 20px; }
.enquiry-form  .form-row p{margin: 0 !important;width: 100%;}

/* Labels */
.enquiry-form  label { font-size: 16px; font-weight: 500; line-height: 20px; color: #ffffffe6; margin-bottom: 6px; display: block; }

/* Text inputs, selects, textarea */
.enquiry-form  input,
.enquiry-form  select,
.enquiry-form  textarea {
      width: 100%;
    border: 1px solid #E6E8EC;
    border-radius: 5px;
    padding: 12px 18px;
}

.enquiry-form  textarea {min-height: 120px;resize: vertical;}

.enquiry-form  input:focus,
.enquiry-form  select:focus,
.enquiry-form  textarea:focus {
    outline: none;
    border-color: var(--cf-accent);
    box-shadow: 0 0 0 3px rgba(31, 90, 153, .15);
}

/* Radio buttons as pills */
/* .enquiry-form .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; } 
.enquiry-form .wpcf7-radio .wpcf7-list-item { margin: 0; } 
.enquiry-form .wpcf7-radio .wpcf7-list-item label { display: block; cursor: pointer; } 
.enquiry-form .wpcf7-radio input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } 
.enquiry-form .wpcf7-radio .wpcf7-list-item-label { display: inline-block; padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--cf-text); background: #fff; border: 1px solid var(--cf-border); border-radius: 999px; transition: all .2s; } 
.enquiry-form .wpcf7-radio .wpcf7-list-item-label:hover { border-color: var(--cf-accent); } 
.enquiry-form .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label { color: #fff; background: var(--cf-accent); border-color: var(--cf-accent); } 
.enquiry-form .wpcf7-radio input[type="radio"]:focus-visible + .wpcf7-list-item-label { box-shadow: 0 0 0 3px rgba(31, 90, 153, .25); } */


.enquiry-form  input[type="submit"]{all:unset}


/* Validation and response messages */
.enquiry-form .wpcf7-not-valid { border-color: #dc2626 !important; } 
.enquiry-form .wpcf7-not-valid-tip { margin-top: 4px; font-size: 12px; color: #dc2626; } 
.enquiry-form .wpcf7 form .wpcf7-response-output { margin: 18px 0 0; padding: 12px 14px; font-size: 13px; border-radius: 8px; }

/* Optional: two-column rows (only if you use <div class="cf-row">) */
.enquiry-form .cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 600px) {
    .enquiry-form .cf-row { grid-template-columns: 1fr; }
}



/* ===== Custom dropdown (scoped to .enquiry-form) ===== */
.enquiry-form .ef-dropdown { position: relative; margin-top: 6px; } 
.enquiry-form .ef-dropdown select { display: none !important; } 
.enquiry-form .ef-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 11px 14px; font-size: 14px; font-family: inherit; text-align: left; color: var(--cf-text); background: #fff; border: 1px solid var(--cf-border); border-radius: 8px; cursor: pointer; transition: border-color .2s, box-shadow .2s; } 
.enquiry-form .ef-dropdown:not(.has-value) .ef-label { color: #64748b; } 
.enquiry-form .ef-dropdown.is-open .ef-trigger, 
.enquiry-form .ef-trigger:focus-visible { outline: none; border-color: var(--cf-accent); box-shadow: 0 0 0 3px rgba(31, 90, 153, .15); }


/* Chevron in a soft circle */
.enquiry-form .ef-chevron { position: relative; flex: 0 0 24px; width: 24px; height: 24px; margin-left: 10px; background: transparent;   /* removes the soft circle; delete this line to keep it */ border-radius: 0; } 
.enquiry-form .ef-chevron::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;              /* clears the old CSS arrow */ 
    background: url(../../../../../uploads/2024/12/header-menu-icon.png) center / contain no-repeat; transform: none; transition: transform .2s;background-size: 14px; } 
/* .enquiry-form .ef-dropdown.is-open .ef-chevron::before { top: 0; transform: rotate(180deg);} */


/* Dropdown panel */
.enquiry-form .ef-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; max-height: 260px; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; background: #fff; border: 1px solid var(--cf-border); border-radius: 10px; box-shadow: 0 10px 28px rgba(15, 23, 42, .12); } 
.enquiry-form .ef-dropdown.is-open .ef-menu { display: block; } 
.enquiry-form .ef-option { display: flex; align-items: center; gap: 12px; margin: 0; padding: 11px 14px; font-size: 14px; font-weight: 400; color: var(--cf-text); cursor: pointer; outline: none; } 
.enquiry-form .ef-option:hover, .enquiry-form .ef-option:focus { background: rgba(31, 90, 153, .07); }

/* Checkbox look (multi-select) */
.enquiry-form .ef-multi .ef-option::before { content: ""; flex: 0 0 18px; width: 18px; height: 18px; box-sizing: border-box; background: #fff center / 12px no-repeat; border: 1px solid #cbd5e1; border-radius: 4px; transition: all .15s; } 
.enquiry-form .ef-multi .ef-option.is-selected::before { background-color: var(--cf-accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.5l2.5 2.5L10 3.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border-color: var(--cf-accent); }

/* Single-select: highlighted row with tick on the right */
.enquiry-form .ef-single .ef-option.is-selected { font-weight: 600; background: rgba(31, 90, 153, .07); } 
.enquiry-form .ef-single .ef-option.is-selected::after { content: ""; width: 5px; height: 10px; margin: 0 4px 3px auto; border-right: 2px solid var(--cf-accent); border-bottom: 2px solid var(--cf-accent); transform: rotate(45deg); }

/* Validation error state */
.enquiry-form -control-wrap:has(select.wpcf7-not-valid) .ef-trigger {border-color: #dc2626;}

/* ===== Custom scrollbar for dropdown panel (scoped) ===== */

/* Modern browsers (Chrome 121+, Edge, Firefox, Safari 18.2+) */
.enquiry-form .ef-menu {scrollbar-width: thin;scrollbar-color: #cbd5e1 transparent;}
.enquiry-form .ef-menu:hover {scrollbar-color: var(--cf-accent) transparent;}

/* Fallback for older WebKit browsers */
@supports not (scrollbar-color: auto) {
    .enquiry-form .ef-menu::-webkit-scrollbar {width: 8px;}
    .enquiry-form .ef-menu::-webkit-scrollbar-track {margin: 8px 0; background: transparent;}
    .enquiry-form .ef-menu::-webkit-scrollbar-thumb {background: #cbd5e1;border-radius: 999px;border: 2px solid #fff; /* gives the thumb breathing room */}
    .enquiry-form .ef-menu::-webkit-scrollbar-thumb:hover { background: var(--cf-accent);}
    /* Removes the little up/down arrows */
    .enquiry-form .ef-menu::-webkit-scrollbar-button {display: none;}
}




/* =====================================================================
   Enquiry Form: responsive styles (desktop styles above are unchanged)
   Breakpoints follow the theme: 991px (tablet), 767px (mobile), 575px (small mobile)
   ===================================================================== */

/* Keep everything inside the viewport at every size */
.enquiry-form-sec { overflow-x: hidden; }
.enquiry-form,
.enquiry-form .form-row,
.enquiry-form .wpcf7-form-control-wrap { max-width: 100%; }
.enquiry-form .wpcf7-form-control-wrap { display: block; }
.enquiry-form input,
.enquiry-form select,
.enquiry-form textarea,
.enquiry-form .ef-trigger { box-sizing: border-box; max-width: 100%; }

/* ---------- Tablet (up to 991px): three-up rows become two per row ---------- */
@media (max-width: 991px) {
    .enquiry-contact-sec .form-top-heading-sec { margin-bottom: 40px; }
    .enquiry-form .form-row { flex-wrap: wrap; gap: 20px 20px; }
    .enquiry-form .form-row.two-col p { flex: 1 1 calc(50% - 10px); min-width: 0; width: auto; }
    .enquiry-form .form-row.one-col p { flex: 1 1 100%; }
    .enquiry-form .form-row.one-col { gap: 20px; }
}

/* ---------- Mobile (up to 767px): single column, touch-friendly ---------- */
@media (max-width: 767px) {
    .enquiry-contact-sec .form-top-heading-sec { margin-bottom: 30px; }
    .enquiry-contact-sec .form-top-heading-sec h2 { font-size: 28px; line-height: 38px; }
    .enquiry-contact-sec .form-top-heading-sec p { font-size: 16px; line-height: 26px; }

    .enquiry-form .form-row,
    .enquiry-form .form-row.two-col,
    .enquiry-form .form-row.one-col { flex-direction: column; flex-wrap: nowrap; gap: 16px; margin-bottom: 16px; }
    .enquiry-form .form-row p,
    .enquiry-form .form-row.two-col p,
    .enquiry-form .form-row.one-col p { flex: 0 0 auto; width: 100%; }

    .enquiry-form label { font-size: 15px; margin-bottom: 8px; }

    /* 16px text stops iOS from zooming into fields; taller targets for touch */
    .enquiry-form input:not([type="submit"]),
    .enquiry-form select,
    .enquiry-form textarea { font-size: 16px; padding: 14px 16px; }
    .enquiry-form textarea { min-height: 140px; }

    .enquiry-form .ef-trigger { min-height: 48px; padding: 12px 14px; font-size: 16px; }
    .enquiry-form .ef-menu { max-height: 240px; }
    .enquiry-form .ef-option { padding: 14px; font-size: 16px; }

    .enquiry-form .common-btn.submit-btn { width: 100%; max-width: 100%; padding: 15px 24px; font-size: 18px; }
}

/* ---------- Small mobile (up to 575px) ---------- */
@media (max-width: 575px) {
    .enquiry-contact-sec .form-top-heading-sec h2 { font-size: 24px; line-height: 32px; }
    .enquiry-contact-sec .form-top-heading-sec p { font-size: 15px; line-height: 24px; }

    .enquiry-form .form-row,
    .enquiry-form .form-row.two-col,
    .enquiry-form .form-row.one-col { gap: 14px; margin-bottom: 14px; }

    .enquiry-form input:not([type="submit"]),
    .enquiry-form select,
    .enquiry-form textarea { padding: 13px 14px; }
    .enquiry-form textarea { min-height: 120px; }

    .enquiry-form .common-btn.submit-btn { padding: 14px 20px; font-size: 17px; }
    .enquiry-form .wpcf7 form .wpcf7-response-output { font-size: 13px; margin: 16px 0 0; }
}

/* ---------- Very small screens (up to 360px) ---------- */
@media (max-width: 360px) {
    .enquiry-contact-sec .form-top-heading-sec h2 { font-size: 22px; line-height: 30px; }
    .enquiry-form label { font-size: 14px; }
    .enquiry-form .ef-option { padding: 12px; font-size: 15px; }
}