/* Theme Name: Divi Child Theme URI: https://www.elegantthemes.com/gallery/divi/ Description: Divi Child Theme Author: Elegant Themes Author URI: https://www.elegantthemes.com Template: Divi Version: 1.0.0 */ /* =Theme customization starts here ------------------------------------------------------- */ /*--- Header - Social Icons ---*/ i.fab.fa-facebook,i.fab.fa-youtube { font-size: 14px; margin-right: 16px; color: white; } i.fa-brands.fa-x-twitter { font-size: 14px; color: white; } /*--- Hero Sticky ---*/ /*--- Hero Sticky ---*/ /* ============================================ Sticky + blurred header for: - Default Divi header (#top-header / #main-header) - Divi Theme Builder header (.et-l--header) Transparent at top; semi-opaque + blur on scroll ============================================ */ /* --- Tune only if you use the DEFAULT top bar --- */ :root{ /* Height of the default top bar (#top-header). If you don't use it, this won't matter. */ --topbar-h: 32px; } /* ======================= DEFAULT DIVI HEADER (Header & Navigation > enable "Fixed Navigation Bar") ======================= */ /* Make the default top bar fixed as well */ body.et_fixed_nav #top-header{ position: fixed; top: 0; left: 0; right: 0; z-index: 10000; /* above the main header */ isolation: isolate; /* Ensure proper compositing */ background: transparent !important; } /* Place the main header right below the fixed top bar */ body.et_fixed_nav #main-header{ top: var(--topbar-h); isolation: isolate; /* Ensure proper compositing */ background: transparent !important; } /* Avoid content jump when the top bar becomes fixed */ body.et_fixed_nav #page-container{ padding-top: calc(var(--topbar-h) + 0px); } /* ---------- DEFAULT DIVI HEADER ::before (Blurred background) ---------- */ /* Create overlay on both bars so the whole stack is frosted */ #top-header::before, #main-header::before{ content: ""; position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ pointer-events: none; /* avoid blocking clicks */ z-index: 0; /* under the header content */ opacity: 0; /* hidden at the very top */ transition: opacity .2s ease; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Safari */ } /* Lift inner content above the overlay */ #top-header > *, #main-header > *{ position: relative; z-index: 1; } /* Show the blur once we scroll a bit (JS toggles this class on ) */ body.header-scrolled #top-header::before, body.header-scrolled #main-header::before{ opacity: 1; } /* Optional: subtle shadow when scrolled */ body.header-scrolled #top-header, body.header-scrolled #main-header{ box-shadow: 0 2px 10px rgba(0,0,0,.06); } /* ======================= THEME BUILDER HEADER (When your header is built with Divi Theme Builder) ======================= */ /* Make the whole Theme Builder header sticky */ .et-l--header{ position: sticky; /* sticks relative to viewport */ top: 0; /* stick to the very top */ z-index: 10000; /* above the page content */ isolation: isolate; /* create a new stacking context */ background: transparent !important; } /* Ensure sections inside header are transparent */ .et-l--header .et_pb_section{ background: transparent !important; box-shadow: none; } /* ---------- THEME BUILDER HEADER ::before (Blurred background) ---------- */ /* Create overlay on the entire header */ .et-l--header::before{ content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity .2s ease; background: rgba(255, 255, 255, 0.80); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); /* Safari */ } /* Lift inner content above the overlay */ .et-l--header > *{ position: relative; z-index: 1; } /* Show the blur once we scroll a bit (JS toggles this class on ) */ body.header-scrolled .et-l--header::before{ opacity: 1; } /* Ensure dropdowns / mobile menu render above the blurred backdrop */ #et-top-navigation, .et_mobile_menu, .et_pb_menu__menu, .et_pb_menu__wrap { z-index: 10001; } /* Optional: dropdown background more solid when scrolled */ body.header-scrolled .et_pb_menu .nav li ul{ background: rgba(255, 255, 255, 0.98); } /* --- Responsive tweaks --- */ @media (max-width: 980px){ /* If you rely on the DEFAULT top bar on mobile, adjust as needed or set to 0 if hidden */ :root{ --topbar-h: 28px; } } .hero-mix { line-height: 1.2; } .hero-mix .eyebrow { font-style: italic; font-weight: 400; } .hero-mix .headline { font-style: normal; font-weight: 700; } /* ===== Service Card (Divi modules only) ===== */ /* Root container is the COLUMN with class .service-card */ .et_pb_column.service-card{ /* --- Motion vars (tune here) --- */ --pad:16px; /* inner padding for text */ --overlay-start:52%; /* overlay height at rest */ --overlay-end:95%; /* overlay height on hover */ --t:600ms; /* enter duration (smooth) */ --t-exit:320ms; /* exit duration (snappy) */ --bez:cubic-bezier(.2,.7,.2,1); /* easing curve */ position:relative; padding:0 !important; /* remove column padding */ border-radius:16px; overflow:hidden; isolation:isolate; background:transparent !important; /* avoid solid block bg */ } /* Remove default margins that Divi adds inside columns */ .service-card .et_pb_module{ margin:0 !important; } /* ===== Image module ===== */ .service-card .service-card__media{ position:relative; z-index:0; /* sit below overlay */ } .service-card .service-card__media img{ display:block; width:100%; height:auto; transform-origin:center center; transition: transform calc(var(--t) + 120ms) var(--bez); /* internal zoom */ will-change:transform; } /* ===== Overlay (using a Code module with

) ===== */ .service-card .service-card__overlay{ position:absolute; left:0; right:0; bottom:0; height:var(--overlay-start); /* ~half by default */ border-bottom-left-radius:16px; border-bottom-right-radius:16px; background:linear-gradient(180deg, rgba(1,32,63,0) 0%, #01203F 100%); transition: height var(--t) var(--bez); z-index:1; pointer-events:none; } /* ===== Text module (absolute over image) ===== */ .et_pb_text.service-card__content{ position:absolute; left:var(--pad); right:var(--pad); bottom:var(--pad); z-index:2; background:transparent !important; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.35); pointer-events:none; /* keep hover on card */ } /* Title (base) */ /* Base: no delays; smooth immediate exit when hover ends */ .service-card__content .service-card__title{ margin:0 0 6px; font-weight:700; line-height:37px; color:white; font-size:28px; transform: translateY(2px); /* slightly lowered at rest */ opacity:.98; will-change: transform; transition: color var(--t-exit) var(--bez) 0ms, transform var(--t-exit) var(--bez) 0ms, opacity var(--t-exit) var(--bez) 0ms; } /* Description (base) */ /* Base: no delays; quick, smooth exit */ .service-card__content .service-card__desc{ margin:0; font-size:16px; line-height:24px; font-weight:400; opacity:0; transform: translateY(8px); /* start slightly lowered */ max-height:0; overflow:hidden; /* collapse height */ font-family: Manrope; color: white; transition: opacity var(--t-exit) var(--bez) 0ms, transform var(--t-exit) var(--bez) 0ms, max-height var(--t-exit) linear 0ms; /* animates close quickly */ } /* ===== Hover effects ===== */ .service-card:hover .service-card__media img{ transform: scale(1.08); /* internal zoom */ } .service-card:hover .service-card__overlay{ height: var(--overlay-end); /* overlay grows */ } /* Title (hover) */ /* IMPORTANT: no delays on transform/opacity so switching cards is seamless */ .service-card:hover .service-card__title{ color:#40AE38; transform:none; opacity:1; transition: color var(--t) var(--bez) 0ms, transform var(--t) var(--bez) 0ms, opacity var(--t) var(--bez) 0ms; } /* Description (hover) */ .service-card:hover .service-card__desc{ opacity:1; transform:none; max-height:240px; transition: opacity calc(var(--t) + 140ms) var(--bez) 90ms, transform calc(var(--t) + 140ms) var(--bez) 90ms, max-height calc(var(--t) + 140ms) linear 90ms; /* open smoothly */ } /*--- Overlay (alternative via pseudo-element) ---*/ .et_pb_column.service-card::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:var(--overlay-start); border-bottom-left-radius:16px; border-bottom-right-radius:16px; background:linear-gradient(180deg, rgba(1,32,63,0) 0%, #01203F 100%); transition: height var(--t) var(--bez); z-index:1; pointer-events:none; } .et_pb_column.service-card:hover::after{ height:var(--overlay-end); } /* ===== Accessibility: reduce motion ===== */ @media (prefers-reduced-motion: reduce){ .service-card *{ transition: none !important; } } /* ===== Optional: remove any tooltips if a title attribute slipped in ===== */ .et_pb_column.service-card [title]{ pointer-events:none; } /*--- Testimonials ---*/ #sp-testimonial-free-wrapper-103 .sp-testimonial-free { border: 0px solid #e3e3e3; border-radius: 16px; background: rgba(255, 255, 255, 0.75); padding: 40px 70px; } #sp-testimonial-free-wrapper-103 .sp-testimonial-free-section .testimonial-pagination span.swiper-pagination-bullet { background: transparent; border: solid 2px white; } .sp-testimonial-free-section .testimonial-pagination .swiper-pagination-bullet { width: 20px; height: 20px; } h4.sp-testimonial-client-name { font-weight: 400 !important; font-family: Manrope; } /*--- Ready to Get Started? - Form ---*/ input#input_1_1_3,input#input_1_1_6,input#input_1_3,input#input_1_4 { background-color: transparent; border: none; color: white; border-bottom: 1px solid white; padding: 10px 10px 10px 0; border-radius: 0; font-size: 16px; } legend.gfield_label.gform-field-label { color: white; font-size: 16px; line-height: 24px; } .gform-theme--foundation .gform-field-label:where([class*=gform-field-label--type-]) { color: white !important; font-size: 16px !important; } .gform-footer.gform_footer.top_label { justify-content: center !important; margin-top: 40px; } input#gform_submit_button_1 { color: #FFFFFF !important; border-width: 0px !important; border-radius: 8px; letter-spacing: 2.7px; font-size: 18px; font-family: 'Manrope', Helvetica, Arial, Lucida, sans-serif !important; font-weight: 600 !important; text-transform: uppercase !important; background-color: #01814e; padding: 20px 32px; transition: all 300ms ease 0ms; } input#gform_submit_button_1:hover { color: #FFFFFF !important; background-color: #40AE38; } span.gfield_required.gfield_required_text { display: none !important; } /*--- Media Queries ---*/ @media only screen and (max-width : 501px) { #sp-testimonial-free-wrapper-103 .sp-testimonial-free { padding: 40px 25px; } } /*--- Footer Styles ---*/ /* Footer row as flex container without breaks */ .footer-row { display: flex; /*align-items: center; */ flex-wrap: nowrap; } /* Layout & proportions */ .footer-about { flex: 0 0 33%; line-height: 1.5; } /* Narrower text */ .footer-row .et_pb_column:nth-child(2), .footer-row .et_pb_column:nth-child(3) { flex: 0 0 19%; } /* Bigger and closer logos */ .footer-row .et_pb_column:nth-child(4) { flex: 0 0 24%; } /* Wrapped contact column */ /* Reduce lateral space between columns */ .footer-row .et_pb_column { padding-left: 8px; padding-right: 8px; } /* Logos matched and centered */ .footer-row .footer-logo img{ display: block; margin: 0 auto; max-height: 100px; /* Larger size for logos */ width: auto; height: auto; object-fit: contain; } /* Title contact without weird pushes */ .footer-row .footer-contact h6 { margin-top: 0; text-transform: uppercase; letter-spacing: .08em; opacity: .9; margin-bottom: .4rem; } .footer-row .footer-contact a { color: #fff; text-decoration: none; } .footer-row .footer-contact a:hover { text-decoration: underline; } .footer-row .footer-contact .et_pb_social_media_follow { margin-top: .4rem; } /* Responsive */ @media (max-width: 1280px) { .footer-about { flex-basis: 34%; } .et_pb_row .et_pb_column:nth-child(2), .et_pb_row .et_pb_column:nth-child(3), .et_pb_row .et_pb_column:nth-child(4) { flex-basis: 16.5%; } } @media (max-width: 980px) { .footer-row { flex-wrap: wrap; } .footer-about, .et_pb_row .et_pb_column { flex: 0 0 100%; } .footer-row .footer-logo img { max-height: 80px; } } @media (max-width: 480px) { .footer-row .footer-logo img { max-height: 80px; } } a.footer-text2 { color: white; text-decoration: underline; } a.footer-text { color: white; }