/* ---------------------------------------------------------------
   Opal Techno Trading W.L.L. - site overrides and new sections.
   Loaded after style.css; keeps the template file untouched.
---------------------------------------------------------------- */

/* Page banners (breadcrumb) - photo with a dark-green wash for legible white text */
.opal-page-banner {
    position: relative;
    background-color: #1f2a24;
    background-size: cover;
    background-position: center;
}
.opal-page-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 30, 25, .55) 0%, rgba(20, 30, 25, .70) 100%);
}
.opal-page-banner .container { position: relative; z-index: 1; }
.opal-page-banner .bread-crumb-area-inner .bottom-title .title { text-transform: none; }

/* Home banner: keep photo proportions */
.thumbnail-banner-one img { width: 100%; height: auto; object-fit: cover; }
.single-left-banner-swiper-start .rts-btn i { margin-left: 6px; }

/* Home services: icon fonts instead of template SVGs */
.opal-service-cards .single-service-area-one { height: 100%; }
.opal-service-cards .single-service-area-one .icon i {
    font-size: 46px;
    line-height: 1;
    color: var(--color-primary);
}

/* Technology Focus cards: no forced Title Case, smaller titles for 12 longer names */
.opal-focus .single-product-one .inenr-content-absolute a .title {
    text-transform: none;
    font-size: 28px;
    line-height: 36px;
    padding-right: 30px;
}
@media only screen and (max-width: 767px) {
    .opal-focus .single-product-one .inenr-content-absolute a .title { font-size: 22px; line-height: 30px; }
}

/* Home partners strip */
.opal-logo-strip {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px 30px;
    align-items: center;
}
.opal-logo-strip .single-brand { display: block; transition: .3s; }
.opal-logo-strip .single-brand img { width: 100%; height: auto; filter: grayscale(100%); opacity: .75; transition: .3s; }
.opal-logo-strip .single-brand:hover img { filter: none; opacity: 1; }
@media only screen and (max-width: 991px) { .opal-logo-strip { grid-template-columns: repeat(4, 1fr); } }
@media only screen and (max-width: 575px) { .opal-logo-strip { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* Partners page logo grid */
.opal-logo-card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 18px;
    background: #fff;
    border: 1px solid #E9EBEE;
    border-radius: 8px;
    transition: .3s;
}
.opal-logo-card img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.opal-logo-card:hover { border-color: var(--color-primary); box-shadow: 0 12px 30px rgba(48, 55, 62, .08); transform: translateY(-4px); }

/* AI page strategic partners strip */
.opal-partner-strip img { width: 100%; max-width: 573px; height: auto; }

/* Shared helpers */
.opal-rounded { border-radius: 8px; display: block; height: auto; }
.opal-plain { color: var(--color-heading-1); }

/* Service page CTA band */
.opal-service-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    background: #F4F5F7;
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 35px 40px;
}
.opal-service-cta .title { margin-bottom: 6px; }
@media only screen and (max-width: 575px) { .opal-service-cta { padding: 25px; } }

/* Sidebar: highlight current service */
.service-left-sidebar-wized .body .single-short-service.active { background: var(--color-primary); }
.service-left-sidebar-wized .body .single-short-service.active .number,
.service-left-sidebar-wized .body .single-short-service.active .name,
.service-left-sidebar-wized .body .single-short-service.active i { color: #fff; }
#form-messages.success { color: #2e7d32; }
#form-messages.error { color: #c62828; }

/* Cards with photo (trading, facility pages) */
.opal-card {
    height: 100%;
    background: #fff;
    border: 1px solid #E9EBEE;
    border-radius: 10px;
    overflow: hidden;
    transition: .3s;
}
.opal-card:hover { box-shadow: 0 14px 34px rgba(48, 55, 62, .08); transform: translateY(-4px); }
.opal-card .thumb img { width: 100%; height: 230px; object-fit: cover; display: block; }
.opal-card .body { padding: 28px 28px 30px; }
.opal-card .body .title { margin-bottom: 12px; font-size: 20px; line-height: 1.35; }
.opal-card .body .title i { color: var(--color-primary); margin-right: 6px; }
.opal-card .body .disc { margin-bottom: 14px; }
.opal-bullets { list-style: none; padding: 0; margin: 0; }
.opal-bullets li { position: relative; padding-left: 20px; margin: 6px 0; color: var(--color-heading-1); font-size: 15px; }
.opal-bullets li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}
.opal-step-num {
    display: inline-block;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
    margin-bottom: 12px;
}

/* Feature tiles (procurement support) */
.opal-feature {
    height: 100%;
    padding: 24px;
    border: 1px solid #E9EBEE;
    border-radius: 8px;
    background: #fff;
}
.opal-feature i { font-size: 30px; color: var(--color-primary); margin-bottom: 14px; display: block; }
.opal-feature .title { margin-bottom: 8px; }
.opal-feature .disc { margin-bottom: 0; font-size: 15px; }

/* Clients page sectors */
.opal-sector {
    height: 100%;
    padding: 34px;
    background: #fff;
    border: 1px solid #E9EBEE;
    border-radius: 8px;
    transition: .3s;
}
.opal-sector:hover { border-color: var(--color-primary); box-shadow: 0 12px 30px rgba(48, 55, 62, .08); }
.opal-sector i { font-size: 38px; color: var(--color-primary); margin-bottom: 18px; display: block; }
.opal-sector .title { margin-bottom: 10px; }
.opal-sector .disc { margin-bottom: 0; }

/* About page certificates */
.opal-cert {
    display: block;
    text-align: center;
    padding: 20px 20px 26px;
    background: #fff;
    border: 1px solid #E9EBEE;
    border-radius: 8px;
    transition: .3s;
}
.opal-cert:hover { box-shadow: 0 12px 30px rgba(48, 55, 62, .08); transform: translateY(-4px); }
.opal-cert img { width: 100%; height: auto; display: block; margin-bottom: 18px; border: 1px solid #EEE; }
.opal-cert .code { display: block; font-weight: 700; color: var(--color-heading-1); font-size: 18px; }
.opal-cert .label { display: block; color: var(--color-body); font-size: 14px; margin-top: 4px; }

/* Mobile menu contact lines */
.opal-mobile-contact a { display: block; margin-bottom: 10px; color: var(--color-heading-1); }
.opal-mobile-contact i { color: var(--color-primary); width: 22px; }

/* Legal pages */
.opal-legal h4 { margin-top: 40px; margin-bottom: 14px; font-size: 22px; }
.opal-legal p, .opal-legal li { color: var(--color-body); line-height: 1.8; }
.opal-legal ul { padding-left: 20px; }
.opal-legal .updated { font-size: 14px; color: var(--color-primary); font-weight: 600; }

/* Hover backgrounds: replace the template's interior photos with brochure imagery */
.opal-service-cards .single-service-area-one::after {
    background-image: linear-gradient(rgba(25, 35, 30, .78), rgba(25, 35, 30, .78)), var(--opal-hover-bg, url(../images/opal/svc-ict-elv-main.webp));
    background-size: cover;
    background-position: center;
}
.opal-service-cards > div:nth-child(1) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-ai-infrastructure-main.webp); }
.opal-service-cards > div:nth-child(2) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-data-center-main.webp); }
.opal-service-cards > div:nth-child(3) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-software-main.webp); }
.opal-service-cards > div:nth-child(4) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-security-main.webp); }
.opal-service-cards > div:nth-child(5) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-automation-main.webp); }
.opal-service-cards > div:nth-child(6) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-ict-elv-main.webp); }
.opal-service-cards > div:nth-child(7) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-campfi-main.webp); }
.opal-service-cards > div:nth-child(8) .single-service-area-one::after { background-image: linear-gradient(rgba(25,35,30,.78), rgba(25,35,30,.78)), url(../images/opal/svc-digital-commerce-main.webp); }
.opal-service-cards .single-service-area-one:hover .icon i { color: #fff; }

.single-working-prcess-one .inner::after { background-image: linear-gradient(rgba(25,35,30,.80), rgba(25,35,30,.80)), url(../images/opal/trade-step-requirement.webp); background-position: center; }
.single-working-prcess-one.two .inner::after { background-image: linear-gradient(rgba(25,35,30,.80), rgba(25,35,30,.80)), url(../images/opal/svc-software-1.webp); }
.single-working-prcess-one.three .inner::after { background-image: linear-gradient(rgba(25,35,30,.80), rgba(25,35,30,.80)), url(../images/opal/trade-step-source-quote.webp); }
.single-working-prcess-one.four .inner::after { background-image: linear-gradient(rgba(25,35,30,.80), rgba(25,35,30,.80)), url(../images/opal/svc-data-center-2.webp); }
.opal-page-banner .bread-crumb-area-inner .breadcrumb-top a { color: #b9cbbf; }
.opal-page-banner .bread-crumb-area-inner .breadcrumb-top a.active { color: #fff; }
.opal-page-banner .bread-crumb-area-inner .breadcrumb-top { color: #b9cbbf; }
/* Mobile menu: same look for every top-level item */
#mobile-menu-active > li { margin: 0; }
#mobile-menu-active > li > a { display: block; padding: 12px 0 !important; color: var(--color-heading-1) !important; font-size: 18px; line-height: 1.4; }

/* Service pages: "Solutions Include" highlighted panel */
.opal-solutions {
    background: linear-gradient(135deg, #F3F6F4 0%, #E9EFEB 100%);
    border: 1px solid #DCE5DF;
    border-radius: 12px;
    padding: 34px;
}
.opal-solutions-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}
.opal-solutions-pre {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 6px;
}
.opal-solutions-head .title { margin: 0; font-size: 28px; line-height: 1.2; }
.opal-solutions-count {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 20px;
    background: var(--color-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.opal-solution {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    padding: 16px 44px 16px 16px;
    background: #fff;
    border: 1px solid #E3E9E5;
    border-left: 3px solid var(--color-primary);
    border-radius: 8px;
    transition: .3s;
}
.opal-solution .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(86, 103, 94, .10);
    color: var(--color-primary);
    font-size: 22px;
    transition: .3s;
}
.opal-solution .name {
    color: var(--color-heading-1);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}
.opal-solution .num {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: #B5C2BA;
}
.opal-solution:hover {
    transform: translateY(-3px);
    border-color: var(--color-primary);
    box-shadow: 0 12px 28px rgba(48, 55, 62, .08);
}
.opal-solution:hover .icon { background: var(--color-primary); color: #fff; }
@media only screen and (max-width: 575px) {
    .opal-solutions { padding: 22px; }
    .opal-solutions-head { flex-direction: column; align-items: flex-start; gap: 10px; }
    .opal-solutions-head .title { font-size: 24px; }
}

/* Service sidebar: "All Services" navigation card */
.opal-svc-nav {
    background: #fff;
    border: 1px solid #E3E9E5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(48, 55, 62, .06);
}
.opal-svc-nav-head {
    position: relative;
    padding: 26px 28px 24px;
    background: linear-gradient(135deg, #56675e 0%, #3e4c45 100%);
    color: #fff;
}
.opal-svc-nav-head .pre {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c9d8cf;
    margin-bottom: 4px;
}
.opal-svc-nav-head .title { color: #fff; margin: 0; font-size: 26px; line-height: 1.2; }
.opal-svc-nav-head .count {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .15);
    font-size: 12px;
    font-weight: 600;
}
.opal-svc-nav ul { list-style: none; margin: 0; padding: 10px; }
.opal-svc-nav li { margin: 0; padding: 0; }
.opal-svc-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 8px;
    border-left: 3px solid transparent;
    color: var(--color-heading-1);
    transition: .25s;
}
.opal-svc-link + .opal-svc-link { margin-top: 2px; }
.opal-svc-link .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(86, 103, 94, .10);
    color: var(--color-primary);
    font-size: 19px;
    transition: .25s;
}
.opal-svc-link .text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opal-svc-link .num { font-size: 11px; font-weight: 700; letter-spacing: 1px; color: #9FB0A6; line-height: 1.2; }
.opal-svc-link .name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--color-heading-1); }
.opal-svc-link .arrow { font-size: 15px; color: #A7B4AC; opacity: 0; transform: translateX(-6px); transition: .25s; }
.opal-svc-link:hover { background: #F3F6F4; }
.opal-svc-link:hover .icon { background: var(--color-primary); color: #fff; }
.opal-svc-link:hover .arrow { opacity: 1; transform: translateX(0); color: var(--color-primary); }
.opal-svc-link.active {
    background: #EEF3F0;
    border-left-color: var(--color-primary);
}
.opal-svc-link.active .icon { background: var(--color-primary); color: #fff; }
.opal-svc-link.active .num { color: var(--color-primary); }
.opal-svc-link.active .arrow { opacity: 1; transform: none; color: var(--color-primary); }
@media only screen and (max-width: 575px) {
    .opal-svc-nav-head { padding: 22px 20px; }
    .opal-svc-nav-head .count { position: static; transform: none; display: inline-block; margin-top: 10px; }
}
.opal-svc-link .name { flex: 1; min-width: 0; }

/* Service sidebar: project enquiry card */
.opal-enquiry {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: linear-gradient(160deg, #56675e 0%, #34413a 100%);
    color: #fff;
    padding: 30px 28px;
    box-shadow: 0 14px 34px rgba(48, 55, 62, .14);
}
.opal-enquiry::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 28px solid rgba(255, 255, 255, .05);
}
.opal-enquiry > * { position: relative; }
.opal-enquiry-head .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .14);
    color: #e3ece6;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
}
.opal-enquiry-head .title { color: #fff; font-size: 26px; line-height: 1.25; margin: 16px 0 8px; }
.opal-enquiry-head .disc { color: #c9d8cf; font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.opal-enquiry-form .field {
    position: relative;
    display: block;
    margin: 0 0 12px;
}
.opal-enquiry-form .field i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    font-size: 16px;
    pointer-events: none;
}
.opal-enquiry-form .field-area i { top: 18px; transform: none; }
.opal-enquiry-form input,
.opal-enquiry-form textarea {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 16px 0 44px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 8px;
    color: var(--color-heading-1);
    font-size: 15px;
    transition: .25s;
}
.opal-enquiry-form textarea { height: 110px; padding-top: 13px; resize: vertical; }
.opal-enquiry-form input:focus,
.opal-enquiry-form textarea:focus { border-color: #a9c4b3; box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); outline: none; }
.opal-enquiry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    margin-top: 6px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #34413a;
    font-size: 16px;
    font-weight: 700;
    transition: .25s;
}
.opal-enquiry-btn i { transition: .25s; }
.opal-enquiry-btn:hover { background: #e3ece6; }
.opal-enquiry-btn:hover i { transform: translateX(4px); }
.opal-enquiry-msg { margin-top: 12px; font-size: 14px; }
.opal-enquiry-msg.success { color: #c8f0d2; }
.opal-enquiry-msg.error { color: #ffd2cc; }
.opal-enquiry-direct {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .15);
}
.opal-enquiry-direct .label { display: block; color: #c9d8cf; font-size: 13px; margin-bottom: 8px; }
.opal-enquiry-direct a { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 15px; padding: 4px 0; }
.opal-enquiry-direct a i { color: #a9c4b3; width: 18px; }
.opal-enquiry-direct a:hover { color: #e3ece6; }
@media only screen and (max-width: 575px) { .opal-enquiry { padding: 24px 20px; } }

/* Our Work Process: 3 steps from the brochure */
.opal-process-intro { text-align: center; max-width: 640px; margin: 10px auto 60px; }
.opal-process-intro .title { font-size: 32px; line-height: 1.3; margin-bottom: 10px; }
.opal-process-intro .disc { margin-bottom: 0; }
.opal-process .single-working-prcess-one .inner { display: flex; flex-direction: column; min-height: 360px; }
.opal-process .single-working-prcess-one .inner .opal-step-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    margin: auto 0 22px;
    border-radius: 12px;
    background: rgba(86, 103, 94, .12);
    color: var(--color-primary);
    font-size: 24px;
    transition: .3s;
}
.opal-process .single-working-prcess-one:hover .opal-step-icon,
.opal-process .single-working-prcess-one.active .opal-step-icon { background: rgba(255, 255, 255, .16); color: #fff; }
.opal-process .single-working-prcess-one.two .inner::after { background-image: linear-gradient(rgba(25,35,30,.80), rgba(25,35,30,.80)), url(../images/opal/trade-step-source-quote.webp); }
.opal-process .single-working-prcess-one.three .inner::after { background-image: linear-gradient(rgba(25,35,30,.80), rgba(25,35,30,.80)), url(../images/opal/trade-step-delivery.webp); }
@media only screen and (max-width: 767px) {
    .opal-process-intro .title { font-size: 24px; }
    .opal-process .single-working-prcess-one .inner { min-height: 0; }
    .opal-process .single-working-prcess-one .inner .opal-step-icon { margin-top: 20px; }
}

/* About: Mission & Vision cards */
.opal-mv { background: #F5F7F6; }
.opal-mv-intro { text-align: center; }
.opal-mv-intro .title-style-left { display: inline-block; text-align: center; }
.opal-mv-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #E3E9E5;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(48, 55, 62, .07);
    transition: .3s;
}
.opal-mv-card:hover { transform: translateY(-6px); box-shadow: 0 22px 44px rgba(48, 55, 62, .12); }
.opal-mv-card .thumb { position: relative; height: 260px; overflow: hidden; }
.opal-mv-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: .6s; }
.opal-mv-card:hover .thumb img { transform: scale(1.05); }
.opal-mv-card .thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20, 30, 25, 0) 40%, rgba(20, 30, 25, .55) 100%);
}
.opal-mv-card .thumb .tag {
    position: absolute;
    left: 24px;
    bottom: 20px;
    z-index: 1;
    padding: 7px 16px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .92);
    color: #34413a;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.opal-mv-card .body { position: relative; flex: 1; padding: 50px 36px 36px; }
.opal-mv-card .body .icon {
    position: absolute;
    top: -32px;
    right: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--color-primary);
    color: #fff;
    font-size: 28px;
    box-shadow: 0 10px 24px rgba(48, 55, 62, .25);
}
.opal-mv-card .body .title { font-size: 30px; line-height: 1.25; margin-bottom: 16px; }
.opal-mv-card .body .lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-heading-1);
    font-weight: 500;
    padding-left: 16px;
    border-left: 3px solid var(--color-primary);
    margin-bottom: 16px;
}
.opal-mv-card .body .disc { margin-bottom: 22px; }
.opal-mv-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.opal-mv-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    border-radius: 20px;
    background: #EEF3F0;
    color: var(--color-heading-1);
    font-size: 14px;
    font-weight: 600;
}
.opal-mv-points li i { color: var(--color-primary); }
/* Vision card: dark variant */
.opal-mv-card.dark { background: linear-gradient(160deg, #56675e 0%, #34413a 100%); border-color: transparent; }
.opal-mv-card.dark .body .title { color: #fff; }
.opal-mv-card.dark .body .lead { color: #fff; border-left-color: #a9c4b3; }
.opal-mv-card.dark .body .disc { color: #c9d8cf; }
.opal-mv-card.dark .body .icon { background: #fff; color: #34413a; }
.opal-mv-card.dark .opal-mv-points li { background: rgba(255, 255, 255, .12); color: #fff; }
.opal-mv-card.dark .opal-mv-points li i { color: #a9c4b3; }
@media only screen and (max-width: 575px) {
    .opal-mv-card .thumb { height: 200px; }
    .opal-mv-card .body { padding: 44px 22px 26px; }
    .opal-mv-card .body .title { font-size: 24px; }
    .opal-mv-card .body .lead { font-size: 16px; }
}

/* Mission & Vision: compact sizing */
.opal-mv-intro .title { font-size: 36px; line-height: 1.25; }
.opal-mv-card { border-radius: 12px; }
.opal-mv-card:hover { transform: translateY(-4px); }
.opal-mv-card .thumb { height: 180px; }
.opal-mv-card .thumb .tag { left: 20px; bottom: 16px; padding: 5px 12px; font-size: 11px; letter-spacing: 1.2px; }
.opal-mv-card .body { padding: 36px 28px 28px; }
.opal-mv-card .body .icon { top: -24px; right: 24px; width: 48px; height: 48px; border-radius: 12px; font-size: 21px; }
.opal-mv-card .body .title { font-size: 22px; margin-bottom: 12px; }
.opal-mv-card .body .lead { font-size: 15px; line-height: 1.65; padding-left: 14px; margin-bottom: 12px; }
.opal-mv-card .body .disc { font-size: 14px; line-height: 1.65; margin-bottom: 16px; }
.opal-mv-points { gap: 8px; }
.opal-mv-points li { padding: 5px 12px; font-size: 12.5px; gap: 6px; }
@media only screen and (max-width: 575px) {
    .opal-mv-intro .title { font-size: 28px; }
    .opal-mv-card .thumb { height: 160px; }
    .opal-mv-card .body { padding: 34px 20px 22px; }
    .opal-mv-card .body .title { font-size: 20px; }
}

/* Footer redesign (keeps the green pattern background) */
.opal-footer { position: relative; color: #c9d8cf; }
.opal-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(30, 40, 35, .15) 0%, rgba(30, 40, 35, .45) 100%);
    pointer-events: none;
}
.opal-footer > * { position: relative; }
.opal-footer-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    padding: 34px 40px;
    margin-top: 70px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(4px);
}
.opal-footer-cta .pre { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #a9c4b3; margin-bottom: 6px; }
.opal-footer-cta .title { color: #fff; font-size: 26px; line-height: 1.3; margin: 0; max-width: 560px; }
.opal-footer-cta .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.opal-f-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 24px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    transition: .25s;
}
.opal-f-btn.primary { background: #fff; color: #34413a; }
.opal-f-btn.primary:hover { background: #e3ece6; color: #34413a; }
.opal-f-btn.primary i { transition: .25s; }
.opal-f-btn.primary:hover i { transform: translateX(4px); }
.opal-f-btn.ghost { border: 1px solid rgba(255, 255, 255, .35); color: #fff; }
.opal-f-btn.ghost:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }

.opal-footer-main { padding: 60px 0 50px; }
.opal-footer-logo img { width: 150px; height: auto; }
.opal-footer-about { color: #c9d8cf; font-size: 15px; line-height: 1.75; margin: 22px 0 26px; max-width: 360px; }
.opal-social { display: flex; align-items: center; gap: 10px; }
.opal-social .label { font-size: 13px; color: #a9c4b3; margin-right: 6px; }
.opal-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 16px;
    transition: .25s;
}
.opal-social a:hover { background: #fff; color: #34413a; transform: translateY(-3px); }

.opal-f-title { position: relative; color: #fff; font-size: 17px; font-weight: 700; margin-bottom: 26px; padding-bottom: 12px; }
.opal-f-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 32px; height: 2px; border-radius: 2px; background: #a9c4b3; }
.opal-f-links { list-style: none; margin: 0; padding: 0; }
.opal-f-links li { margin: 0 0 12px; padding: 0; }
.opal-f-links a { display: inline-flex; align-items: flex-start; gap: 8px; color: #c9d8cf; font-size: 15px; line-height: 1.45; transition: .25s; }
.opal-f-links a i { font-size: 11px; margin-top: 5px; color: #a9c4b3; transition: .25s; }
.opal-f-links a:hover { color: #fff; transform: translateX(4px); }
.opal-f-links a:hover i { color: #fff; }

.opal-f-contact { list-style: none; margin: 0; padding: 0; }
.opal-f-contact li { display: flex; gap: 14px; margin: 0 0 18px; padding: 0; }
.opal-f-contact .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 16px;
}
.opal-f-contact small { display: block; font-size: 12px; color: #a9c4b3; letter-spacing: .5px; margin-bottom: 2px; }
.opal-f-contact a { color: #fff; font-size: 15px; font-weight: 600; line-height: 1.45; }
.opal-f-contact a:hover { color: #e3ece6; text-decoration: underline; }
.opal-f-contact em { display: block; font-style: normal; font-size: 13px; color: #c9d8cf; margin-top: 2px; }

.opal-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .12); padding: 22px 0; }
.opal-footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.opal-footer-bottom p { margin: 0; font-size: 14px; color: #c9d8cf; }
.opal-footer-bottom .member { color: #a9c4b3; }
@media only screen and (max-width: 991px) {
    .opal-footer-cta { padding: 28px; margin-top: 50px; }
    .opal-footer-cta .title { font-size: 22px; }
}
@media only screen and (max-width: 575px) {
    .opal-footer-cta { padding: 24px 20px; }
    .opal-footer-cta .actions, .opal-f-btn { width: 100%; justify-content: center; }
    .opal-footer-main { padding: 45px 0 30px; }
    .opal-footer-bottom .container { justify-content: center; text-align: center; }
}

/* Footer: compact CTA band, no margin collapse */
.opal-footer { padding-top: 50px; }
.opal-footer-cta { margin-top: 0; padding: 22px 30px; gap: 20px; border-radius: 12px; }
.opal-footer-cta .pre { font-size: 11px; margin-bottom: 4px; }
.opal-footer-cta .title { font-size: 20px; max-width: none; }
.opal-f-btn { height: 44px; padding: 0 20px; font-size: 14px; }
.opal-footer-main { padding: 50px 0 40px; }
.opal-footer-bottom { padding: 16px 0; }
.opal-footer-bottom .opal-social a { width: 36px; height: 36px; font-size: 14px; }
@media only screen and (max-width: 991px) {
    .opal-footer { padding-top: 40px; }
    .opal-footer-cta { margin-top: 0; padding: 22px 24px; }
    .opal-footer-cta .title { font-size: 18px; }
}
@media only screen and (max-width: 575px) {
    .opal-footer-cta { padding: 20px 18px; }
    .opal-footer-bottom .container { flex-direction: column; }
}

/* Home: Why Opal card + service cards */
.opal-why-card {
    position: sticky;
    top: 110px;
    overflow: hidden;
    border-radius: 14px;
    padding: 34px 30px;
    background: linear-gradient(160deg, #56675e 0%, #34413a 100%);
    color: #fff;
    box-shadow: 0 16px 38px rgba(48, 55, 62, .16);
}
.opal-why-card::before {
    content: "";
    position: absolute;
    right: -80px;
    top: -80px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 30px solid rgba(255, 255, 255, .05);
}
.opal-why-card > * { position: relative; }
.opal-why-card .pre { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: #a9c4b3; margin-bottom: 6px; }
.opal-why-card .title { color: #fff; font-size: 32px; margin: 0 0 10px; }
.opal-why-card .disc { color: #c9d8cf; font-size: 15px; line-height: 1.6; margin-bottom: 22px; }
.opal-why-list { list-style: none; margin: 0 0 26px; padding: 0; }
.opal-why-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}
.opal-why-list li:last-child { border-bottom: 0; }
.opal-why-list .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .12);
    color: #d6e5db;
    font-size: 15px;
}
.opal-why-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 46px;
    padding: 0 22px;
    border-radius: 8px;
    background: #fff;
    color: #34413a;
    font-weight: 600;
    font-size: 15px;
    transition: .25s;
}
.opal-why-btn:hover { background: #e3ece6; color: #34413a; }
.opal-why-btn i { transition: .25s; }
.opal-why-btn:hover i { transform: translateX(4px); }

.opal-svc-head { margin-bottom: 28px; }
.opal-svc-head .title { margin-bottom: 0; }
.opal-svc-card.single-service-area-one {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    height: 100%;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid #E3E9E5;
    border-radius: 12px;
    overflow: hidden;
    color: inherit;
    transition: .3s;
}
.opal-svc-card.single-service-area-one::after { border-radius: 12px; }
.opal-svc-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(48, 55, 62, .12); border-color: transparent; }
.opal-svc-card .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0;
    border-radius: 14px;
    background: rgba(86, 103, 94, .10);
    color: var(--color-primary);
    font-size: 26px;
    transition: .3s;
}
.opal-service-cards .opal-svc-card .icon i { font-size: 26px; color: inherit; }
.opal-svc-card .body { display: flex; flex-direction: column; min-width: 0; }
.opal-svc-card .title { display: block; color: var(--color-heading-1); font-size: 18px; font-weight: 700; line-height: 1.35; margin-bottom: 8px; transition: .3s; }
.opal-svc-card .disc { display: block; color: var(--color-body); font-size: 14.5px; line-height: 1.6; margin-bottom: 14px; transition: .3s; }
.opal-svc-card .more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: var(--color-primary); font-size: 14px; font-weight: 600; transition: .3s; }
.opal-svc-card .more i { transition: .3s; }
.opal-svc-card:hover .icon { background: rgba(255, 255, 255, .16); color: #fff; }
.opal-service-cards .opal-svc-card:hover .icon i { color: #fff; }
.opal-svc-card:hover .title, .opal-svc-card:hover .more { color: #fff; }
.opal-svc-card:hover .disc { color: #d6e2da; }
.opal-svc-card:hover .more i { transform: translateX(4px); }
@media only screen and (max-width: 991px) { .opal-why-card { position: static; } }
@media only screen and (max-width: 575px) {
    .opal-why-card { padding: 26px 20px; }
    .opal-svc-card.single-service-area-one { padding: 22px 18px; gap: 14px; }
    .opal-svc-card .icon { width: 48px; height: 48px; }
}

/* Home: Why Opal + services - compact version */
.opal-why-services { padding: 80px 0; }
.opal-why-card { position: relative; top: 0; padding: 26px 24px; border-radius: 12px; }
.opal-why-card .title { font-size: 26px; margin-bottom: 6px; }
.opal-why-card .disc { font-size: 14px; margin-bottom: 14px; }
.opal-why-list { margin-bottom: 18px; }
.opal-why-list li { padding: 6px 0; gap: 10px; font-size: 14px; }
.opal-why-list .icon { width: 28px; height: 28px; border-radius: 7px; font-size: 13px; }
.opal-why-btn { height: 40px; padding: 0 18px; font-size: 14px; }
.opal-svc-head { margin-bottom: 18px; }
.opal-svc-head .title { font-size: 30px; line-height: 1.2; }
.opal-svc-card.single-service-area-one { position: relative; align-items: center; gap: 14px; padding: 16px 44px 16px 16px; border-radius: 10px; }
.opal-svc-card .icon { width: 46px; height: 46px; border-radius: 11px; font-size: 21px; }
.opal-service-cards .opal-svc-card .icon i { font-size: 21px; }
.opal-svc-card .title { font-size: 16px; margin-bottom: 3px; }
.opal-svc-card .disc {
    font-size: 13.5px;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.opal-svc-card .more { position: absolute; top: 14px; right: 16px; margin: 0; font-size: 14px; color: #A7B4AC; }
.opal-svc-card:hover .more i { transform: translate(2px, -2px); }
@media only screen and (max-width: 991px) { .opal-why-services { padding: 60px 0; } }
@media only screen and (max-width: 575px) { .opal-svc-head .title { font-size: 24px; } }
@media only screen and (min-width: 992px) {
    .opal-why-services .col-lg-8 { display: flex; flex-direction: column; }
    .opal-why-services .opal-service-cards { flex: 1; align-content: stretch; }
    .opal-why-services .opal-service-cards > div { display: flex; }
    .opal-why-services .opal-svc-card.single-service-area-one { width: 100%; }
}
.opal-why-card .disc { margin-bottom: 10px; }
.opal-why-list li { padding: 5px 0; }

/* Home: Technology Focus - shorter cards, tighter spacing */
.opal-focus-area { padding: 80px 0 70px; }
.opal-focus .single-product-one a.thumbnail { height: 460px; }
.opal-focus .single-product-one a.thumbnail img { height: 100%; object-fit: cover; }
@media only screen and (max-width: 991px) {
    .opal-focus-area { padding: 60px 0 50px; }
    .opal-focus .single-product-one a.thumbnail { height: 400px; }
}

/* Home: partner logos auto-scroll (5 visible on desktop) */
.opal-marquee {
    container-type: inline-size;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.opal-marquee-track {
    display: flex;
    width: max-content;
    animation: opal-marquee 60s linear infinite;
}
.opal-marquee:hover .opal-marquee-track { animation-play-state: paused; }
.opal-marquee-item {
    flex: 0 0 auto;
    width: 240px;
    width: 20cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px;
    padding: 0 26px;
}
.opal-marquee-item img { max-width: 100%; max-height: 80px; width: auto; height: auto; filter: grayscale(100%); opacity: .7; transition: .3s; }
.opal-marquee-item:hover img { filter: none; opacity: 1; }
@keyframes opal-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media only screen and (max-width: 767px) { .opal-marquee-item { width: 33.333cqw; padding: 0 16px; height: 90px; } }
@media (prefers-reduced-motion: reduce) { .opal-marquee-track { animation-duration: 180s; } }

/* Smooth scrolling for in-page links and back-to-top */
html { scroll-behavior: smooth; }

/* Sticky header: slide down smoothly instead of popping in */
.header--sticky.sticky { animation: opal-header-in .45s cubic-bezier(.22, .61, .36, 1) both; }
@keyframes opal-header-in { from { transform: translateY(-100%); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.opal-header-spacer { height: 0; }

/* Back-to-top button: soft fade/slide */
.progress-wrap { transition: opacity .35s ease, visibility .35s ease, transform .35s ease !important; }

/* Partner marquee: GPU-accelerated for a steady glide */
.opal-marquee-track { will-change: transform; backface-visibility: hidden; animation-name: opal-marquee3d; }
@keyframes opal-marquee3d { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .header--sticky.sticky { animation: none; }
}

/* Header: Services mega dropdown */
.opal-mega-parent { position: relative; }
.opal-mega-parent > a.nav-link { padding: 25px 0 !important; color: #1F1F25; display: inline-flex; align-items: center; gap: 6px; }
.opal-mega-parent > a.nav-link i { font-size: 11px; transition: .3s; }
.opal-mega-parent:hover > a.nav-link,
.opal-mega-parent:focus-within > a.nav-link { color: var(--color-primary); }
.opal-mega-parent:hover > a.nav-link i,
.opal-mega-parent:focus-within > a.nav-link i { transform: rotate(180deg); }
.opal-mega {
    position: absolute;
    top: 100%;
    left: 50%;
    z-index: 99;
    display: grid;
    grid-template-columns: 1fr 250px;
    gap: 12px;
    width: 860px;
    padding: 14px;
    background: #fff;
    border: 1px solid #E3E9E5;
    border-radius: 14px;
    box-shadow: 0 30px 60px rgba(31, 42, 36, .16);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 14px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.opal-mega::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.opal-mega-parent:hover .opal-mega,
.opal-mega-parent:focus-within .opal-mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.opal-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.opal-mega-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    transition: background .2s;
}
.opal-mega-item .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(86, 103, 94, .10);
    color: var(--color-primary);
    font-size: 18px;
    transition: .2s;
}
.opal-mega-item .txt { display: flex; flex-direction: column; min-width: 0; }
.opal-mega-item .name { color: #1F1F25; font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.opal-mega-item .tag { color: #8A958F; font-size: 12.5px; line-height: 1.35; margin-top: 2px; }
.opal-mega-item:hover { background: #F1F5F2; }
.opal-mega-item:hover .icon { background: var(--color-primary); color: #fff; }
.opal-mega-item:hover .name { color: var(--color-primary); }
.opal-mega-side {
    display: flex;
    flex-direction: column;
    padding: 22px 20px;
    border-radius: 10px;
    background: linear-gradient(160deg, #56675e 0%, #34413a 100%);
    color: #fff;
}
.opal-mega-side .pre { font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #a9c4b3; margin-bottom: 8px; }
.opal-mega-side .title { color: #fff; font-size: 19px; line-height: 1.3; margin: 0 0 10px; }
.opal-mega-side p { color: #c9d8cf; font-size: 13.5px; line-height: 1.6; margin: 0 0 18px; }
.opal-mega-side .btn-w {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 42px;
    margin-top: auto;
    border-radius: 8px;
    background: #fff;
    color: #34413a;
    font-size: 14px;
    font-weight: 600;
    transition: .2s;
}
.opal-mega-side .btn-w:hover { background: #e3ece6; }
.opal-mega-side .btn-w i { transition: .2s; }
.opal-mega-side .btn-w:hover i { transform: translateX(3px); }
.opal-mega-side .phone { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; color: #fff; font-size: 14px; font-weight: 600; }
.opal-mega-side .phone:hover { color: #e3ece6; }
@media only screen and (max-width: 1399px) { .opal-mega { width: 780px; grid-template-columns: 1fr 220px; } }
/* Mega dropdown: beat the template's ".nav-area-center nav ul li a" rules */
.nav-area-center nav .opal-mega a.opal-mega-item { display: flex; padding: 10px 12px; font-size: inherit; color: inherit; }
.nav-area-center nav ul li.opal-mega-parent:hover .opal-mega a.opal-mega-item { color: inherit; }
.nav-area-center nav .opal-mega-grid { grid-auto-rows: min-content; align-content: start; }
.nav-area-center nav .opal-mega-side a.btn-w { display: inline-flex; padding: 0; color: #34413a; font-size: 14px; font-weight: 600; }
.nav-area-center nav ul li.opal-mega-parent:hover .opal-mega-side a.btn-w { color: #34413a; }
.nav-area-center nav .opal-mega-side a.phone { display: flex; padding: 0; color: #fff; font-size: 14px; font-weight: 600; }
.nav-area-center nav ul li.opal-mega-parent:hover .opal-mega-side a.phone { color: #fff; }
.nav-area-center nav ul li.opal-mega-parent > a.nav-link { padding: 28px 0 23px !important; display: inline-flex; }

/* Contact page: info cards + form card */
.opal-contact .disc { font-size: 16px; line-height: 1.75; }
.opal-reply-note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 28px;
    padding: 7px 14px;
    border-radius: 20px;
    background: #EEF3F0;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}
.opal-contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opal-ccard {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid #E3E9E5;
    border-radius: 12px;
    color: inherit;
    transition: .25s;
}
.opal-ccard.wide { grid-column: 1 / -1; }
.opal-ccard .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(86, 103, 94, .10);
    color: var(--color-primary);
    font-size: 20px;
    transition: .25s;
}
.opal-ccard .txt { display: flex; flex-direction: column; min-width: 0; }
.opal-ccard small { font-size: 12px; letter-spacing: .5px; color: #8A958F; margin-bottom: 3px; }
.opal-ccard strong { color: var(--color-heading-1); font-size: 15.5px; font-weight: 700; line-height: 1.4; word-break: break-word; }
.opal-ccard em { font-style: normal; font-size: 13px; color: var(--color-primary); margin-top: 4px; }
.opal-ccard:hover { border-color: var(--color-primary); box-shadow: 0 12px 28px rgba(48, 55, 62, .08); transform: translateY(-3px); }
.opal-ccard:hover .icon { background: var(--color-primary); color: #fff; }

.opal-form-card {
    height: 100%;
    padding: 34px;
    background: #fff;
    border: 1px solid #E3E9E5;
    border-radius: 16px;
    box-shadow: 0 24px 50px rgba(48, 55, 62, .08);
    border-top: 4px solid var(--color-primary);
}
.opal-form-card .head { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.opal-form-card .head .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(160deg, #56675e 0%, #34413a 100%);
    color: #fff;
    font-size: 22px;
}
.opal-form-card .head .title { margin: 0 0 4px; font-size: 24px; }
.opal-form-card .head p { margin: 0; font-size: 14.5px; color: var(--color-body); }
.opal-form .lbl { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--color-heading-1); }
.opal-form .field { position: relative; }
.opal-form .field i { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: #93A39A; font-size: 15px; pointer-events: none; transition: .2s; }
.opal-form .field.area i { top: 16px; transform: none; }
.opal-form input,
.opal-form textarea {
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 16px 0 42px;
    background: #F6F8F7;
    border: 1px solid #E3E9E5;
    border-radius: 10px;
    color: var(--color-heading-1);
    font-size: 15px;
    transition: .2s;
}
.opal-form textarea { height: 140px; padding-top: 13px; resize: vertical; }
.opal-form input:focus,
.opal-form textarea:focus { outline: none; background: #fff; border-color: var(--color-primary); box-shadow: 0 0 0 4px rgba(86, 103, 94, .12); }
.opal-form .field:focus-within i { color: var(--color-primary); }
.opal-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.opal-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 30px;
    border: 0;
    border-radius: 10px;
    background: var(--color-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    transition: .25s;
}
.opal-submit:hover { background: #3e4c45; }
.opal-submit i { transition: .25s; }
.opal-submit:hover i { transform: translateX(4px); }
.opal-form-foot .note { font-size: 13px; color: #8A958F; display: inline-flex; align-items: center; gap: 6px; }
.opal-form-msg { margin-top: 14px; font-size: 14px; }
.opal-form-msg.success { color: #2e7d32; }
.opal-form-msg.error { color: #c62828; }
@media only screen and (max-width: 575px) {
    .opal-contact-cards { grid-template-columns: 1fr; }
    .opal-form-card { padding: 24px 18px; }
    .opal-submit { width: 100%; justify-content: center; }
}
.opal-form button.opal-submit { width: auto; max-width: none; margin: 0; }
.opal-form input::placeholder, .opal-form textarea::placeholder { color: #9AA6A0; }
@media only screen and (max-width: 575px) { .opal-form button.opal-submit { width: 100%; } }
/* Form spam trap (hidden from people, visible to bots) */
.opal-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Side panel (menu icon) */
.side-bar { overflow-y: auto; padding: 34px 30px 30px; }
.side-bar .close-icon-menu { border-radius: 0 0 0 12px; }
.opal-panel { text-align: left; }
.opal-panel-logo { display: inline-block; }
.opal-panel-logo img { width: 150px; height: auto; }
.opal-panel-intro { margin: 16px 0 26px; font-size: 14.5px; line-height: 1.7; color: var(--color-body); }
.opal-panel-label { display: block; margin-bottom: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase; color: var(--color-primary); }
.opal-panel-links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 26px; }
.opal-panel-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid #E3E9E5;
    border-radius: 10px;
    color: var(--color-heading-1);
    font-size: 14.5px;
    font-weight: 600;
    transition: .2s;
}
.opal-panel-links a i { color: var(--color-primary); font-size: 15px; transition: .2s; }
.opal-panel-links a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.opal-panel-links a:hover i { color: #fff; }
.opal-panel-contact { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.opal-panel-contact a {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    background: #F5F8F6;
    border-radius: 12px;
    color: inherit;
    transition: .2s;
}
.opal-panel-contact .icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: var(--color-primary);
    font-size: 17px;
    box-shadow: 0 4px 10px rgba(48, 55, 62, .06);
    transition: .2s;
}
.opal-panel-contact .txt { display: flex; flex-direction: column; min-width: 0; }
.opal-panel-contact small { font-size: 11.5px; color: #8A958F; letter-spacing: .4px; }
.opal-panel-contact strong { font-size: 14.5px; font-weight: 700; color: var(--color-heading-1); line-height: 1.4; word-break: break-word; }
.opal-panel-contact em { font-style: normal; font-size: 12.5px; color: var(--color-body); margin-top: 1px; }
.opal-panel-contact a:hover { background: #EAF0EC; }
.opal-panel-contact a:hover .icon { background: var(--color-primary); color: #fff; }
.opal-panel-cta {
    position: relative;
    overflow: hidden;
    padding: 22px 22px 24px;
    border-radius: 14px;
    background: linear-gradient(160deg, #56675e 0%, #34413a 100%);
    color: #fff;
}
.opal-panel-cta::before { content: ""; position: absolute; right: -60px; top: -60px; width: 160px; height: 160px; border-radius: 50%; border: 22px solid rgba(255, 255, 255, .06); }
.opal-panel-cta > * { position: relative; }
.opal-panel-cta .title { color: #fff; font-size: 20px; margin: 0 0 6px; }
.opal-panel-cta p { color: #c9d8cf; font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }
.opal-panel-cta .btn-w {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 20px;
    border-radius: 8px;
    background: #fff;
    color: #34413a;
    font-size: 14.5px;
    font-weight: 600;
    transition: .2s;
}
.opal-panel-cta .btn-w:hover { background: #e3ece6; }
.opal-panel-cta .btn-w i { transition: .2s; }
.opal-panel-cta .btn-w:hover i { transform: translateX(4px); }
.opal-panel-social { display: flex; gap: 10px; margin-top: 20px; }
.opal-panel-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid #E3E9E5;
    color: var(--color-primary);
    font-size: 15px;
    transition: .2s;
}
.opal-panel-social a:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
@media only screen and (max-width: 575px) { .side-bar { padding: 30px 20px; } }
.side-bar { padding: 26px 30px 24px; }
.opal-panel-logo img { width: 130px; }
.opal-panel-intro { margin: 12px 0 18px; font-size: 14px; line-height: 1.6; }
.opal-panel-label { margin-bottom: 8px; }
.opal-panel-links { margin-bottom: 18px; }
.opal-panel-links a { padding: 9px 12px; font-size: 14px; }
.opal-panel-contact { gap: 6px; margin-bottom: 18px; }
.opal-panel-contact a { padding: 10px 12px; }
.opal-panel-contact .icon { width: 36px; height: 36px; font-size: 15px; }
.opal-panel-cta { padding: 18px 20px 20px; }
.opal-panel-cta .title { font-size: 18px; }
.opal-panel-cta p { margin-bottom: 12px; }
.opal-panel-cta .btn-w { height: 40px; }
.opal-panel-social { margin-top: 16px; }
.side-bar button.close-icon-menu { position: absolute; top: 0; right: 0; left: auto; margin: 0; padding: 0; border: 0; background: none; z-index: 2; }
.side-bar button.close-icon-menu i { margin: 0; width: 46px; height: 46px; font-size: 22px; border-radius: 0 0 0 12px; transition: .2s; }
.side-bar button.close-icon-menu:hover i { background: #34413a; }