.site-logo img { width: auto; }

/* ===== Encanto Palette — global accent override ===== */
:root{
  --enc-gold:#f4a320; --enc-amber:#e8891a; --enc-firefly:#ffd86b;
  --enc-pink:#e0457a; --enc-teal:#2a9e8c; --enc-purple:#5a4c8e;
  --enc-terra:#c0613a; --enc-canvas:#0d0a18;
}
body{overflow-x:clip;}
::selection{background:rgba(244,163,32,.85);color:#1a1008;}

/* number counters + accent text → Encanto gold */
.ut-counter-number,.pt_counter .pt-number{color:#f4a320 !important;}

/* Brooklyn primary buttons get a warm gold hover */
a:hover .ut-btn,.bklyn-btn:hover{transition:all .25s ease;}

/* gold links/accents that used #ffbf00 in theme options stay golden but richer
   (handled per-section in custom blocks) */

/* ===== FIX: Header solid background on scroll ===== */

/* ===== FIX: Header transparent (HOMEPAGE ONLY) ===== */
/* Leave inner pages alone as requested! */
body:not(.has-no-hero) #header-section,
body:not(.has-no-hero) .ha-header,
body:not(.has-no-hero) .ut-primary-custom-skin {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

body:not(.has-no-hero).ut-header-scrolled #header-section,
body:not(.has-no-hero) #ut-sitebody #header-section.ha-header-small,
body:not(.has-no-hero) #ut-sitebody #header-section.ha-header-hide,
body:not(.has-no-hero) #header-section.ut-header-floating-active {
  background: rgba(7,9,12,0.97) !important;
  background-color: rgba(7,9,12,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}

/* ===== FIX: IntersectionObserver fallback — cards visible after 2s ===== */
.isc-card, .itm-card {
  animation: cssForceVisible 0s 2.5s forwards;
}
@keyframes cssForceVisible {
  to { opacity: 1 !important; transform: none !important; }
}

/* ===== FIX: Testimonials full-bleed not clipped ===== */
.vc_section:has(.itm-fullbleed) {
  overflow: visible !important;
}
.vc_section:has(.itm-fullbleed) > .vc_row {
  overflow: visible !important;
}
.wpb_column:has(.itm-fullbleed) .vc_column-inner,
.wpb_column:has(.itm-fullbleed) .wpb_wrapper {
  overflow: visible !important;
}

/* CINEMATIC-DARK-V3 */

/* ====== 1. GLOBAL CINEMATIC CANVAS ====== */

#ut-sitebody::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(138, 90, 215, 0.25) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 85% 0%,  rgba(138, 90, 215, 0.25) 0%, transparent 70%),
    radial-gradient(ellipse 80% 80% at 10% 100%, rgba(95, 55, 165, 0.28) 0%, transparent 75%),
    radial-gradient(ellipse 120% 120% at 50% 50%, rgba(85, 45, 145, 0.08) 0%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

#ut-sitebody::after {
  content: '';
  position: fixed;
  top: -30%;
  right: 20%;
  width: 2px;
  height: 160%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(180, 140, 255, 0.2) 30%,
    rgba(180, 140, 255, 0.08) 60%,
    transparent 100%
  );
  transform: rotate(-25deg);
  pointer-events: none;
  z-index: -1;
}

html, body, #ut-sitebody {
  background-color: #08080c !important;
  background-image: radial-gradient(circle, rgba(255,255,255,0.052) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
}



/* Force WPBakery sections/rows to be transparent so the global background shows through */
.vc_section, .vc_row {
  background-color: transparent !important;
}
/* Ensure the hero and contact rows keep their intended backgrounds */
#ut-custom-hero.ut-content-block-hero { background-color: #08080c !important; }
.vc_row:has(> .wpb_column a[title*="Talk About Your Project"]) {
  background: transparent !important;
}

/* ====== 2. GLOBAL TEXT VISIBILITY ====== */
h1, h2, h3, h4, h5, h6, .section-title, .section-title span, .bklyn5-team-member-name {
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.lead, .lead p, p, .bklyn5-team-member-ocupation, .ut-counter-number, .ut-counter-caption {
  color: rgba(255,255,255,0.7) !important;
}
.lead b, .lead strong, strong, b {
  color: #ffbf00 !important;
}
a:hover { color: #2a9e8c; }
.section-title:after, .section-header .section-title:after {
  background: linear-gradient(90deg,#f4a320,#e0457a) !important;
}

/* ====== 3. WORKS FILTER TABS ====== */
.iwg-btn { color: rgba(255,255,255,0.6) !important; border-color: rgba(255,255,255,0.18) !important; }
.iwg-btn:hover { color: #ffffff !important; border-color: rgba(255,255,255,0.4) !important; }
.iwg-btn[data-f="3d-animation"].iwg-active { background: linear-gradient(135deg,#2a9e8c,#1f7d6f) !important; border-color: #2a9e8c !important; color: #fff !important; box-shadow: 0 4px 16px rgba(42,158,140,.3) !important; }
.iwg-btn[data-f="explainer"].iwg-active { background: linear-gradient(135deg,#e0457a,#c0305f) !important; border-color: #e0457a !important; color: #fff !important; box-shadow: 0 4px 16px rgba(224,69,122,.3) !important; }
.iwg-btn[data-f="3d-product"].iwg-active { background: linear-gradient(135deg,#6a59a8,#4f4180) !important; border-color: #6a59a8 !important; color: #fff !important; box-shadow: 0 4px 16px rgba(90,76,142,.35) !important; }
.iwg-btn[data-f="all"].iwg-active { background: linear-gradient(135deg,#f4a320,#e8891a) !important; border-color: #f4a320 !important; color: #1a1008 !important; box-shadow: 0 4px 16px rgba(244,163,32,.32) !important; }
.iwg-card[data-cats~="3d-animation"] .iwg-cat { color: #3cc0ac !important; border-color: rgba(42,158,140,.5) !important; }
.iwg-card[data-cats~="3d-product"] .iwg-cat { color: #bcaaf2 !important; border-color: rgba(122,104,184,.55) !important; }
.iwg-card[data-cats~="explainer"] .iwg-cat { color: #f06ea0 !important; border-color: rgba(224,69,122,.55) !important; }

/* WORKS-PLAY-TEAL */
.iwg-grid .iwg-card .iwg-play{border-color:#2a9e8c !important;color:#2a9e8c !important;box-shadow:0 0 0 6px rgba(42,158,140,.08),0 0 30px rgba(42,158,140,.22) !important;}
.iwg-grid .iwg-card:hover .iwg-play{background:linear-gradient(135deg,#2a9e8c,#1f7d6f) !important;color:#fff !important;box-shadow:0 0 0 10px rgba(42,158,140,.14),0 0 50px rgba(42,158,140,.4) !important;}

/* ====== 4. SERVICES - DARK FROSTED GLASS ====== */
.isc-grid .isc-card {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 6px 30px rgba(0,0,0,0.4) !important;
}
.isc-grid .isc-card:hover {
  background: rgba(255,255,255,0.06) !important;
}
.isc-grid .isc-card h3 { color: #ffffff !important; }
.isc-grid .isc-card p { color: rgba(255,255,255,0.6) !important; }
.isc-grid .isc-card:nth-child(1){border-left:3px solid #f4a320 !important;}
.isc-grid .isc-card:nth-child(2){border-left:3px solid #2a9e8c !important;}
.isc-grid .isc-card:nth-child(3){border-left:3px solid #6a59a8 !important;}
.isc-grid .isc-card:nth-child(4){border-left:3px solid #e0457a !important;}
.isc-grid .isc-card:nth-child(1) .isc-icon,.isc-grid .isc-card:nth-child(1) .isc-icon svg{color:#e8891a !important;}
.isc-grid .isc-card:nth-child(2) .isc-icon,.isc-grid .isc-card:nth-child(2) .isc-icon svg{color:#2a9e8c !important;}
.isc-grid .isc-card:nth-child(3) .isc-icon,.isc-grid .isc-card:nth-child(3) .isc-icon svg{color:#6a59a8 !important;}
.isc-grid .isc-card:nth-child(4) .isc-icon,.isc-grid .isc-card:nth-child(4) .isc-icon svg{color:#e0457a !important;}
.isc-grid .isc-card:nth-child(1) .isc-icon{background:rgba(244,163,32,.12) !important;}
.isc-grid .isc-card:nth-child(2) .isc-icon{background:rgba(42,158,140,.12) !important;}
.isc-grid .isc-card:nth-child(3) .isc-icon{background:rgba(106,89,168,.13) !important;}
.isc-grid .isc-card:nth-child(4) .isc-icon{background:rgba(224,69,122,.12) !important;}

/* ====== 5. TEAM + STATS - HOVER COLORS ====== */
.wpb_column.vc_col-lg-1/5:nth-child(1):hover .bklyn5-team-member-ocupation{color:#cf8312 !important;}
.wpb_column.vc_col-lg-1/5:nth-child(2):hover .bklyn5-team-member-ocupation{color:#2a9e8c !important;}
.wpb_column.vc_col-lg-1/5:nth-child(3):hover .bklyn5-team-member-ocupation{color:#e0457a !important;}
.wpb_column.vc_col-lg-1/5:nth-child(4):hover .bklyn5-team-member-ocupation{color:#6a59a8 !important;}
.wpb_column.vc_col-lg-1/5:nth-child(5):hover .bklyn5-team-member-ocupation{color:#c0613a !important;}
.vc_row:has(.ut-counter-box) .wpb_column:nth-child(1) .ut-counter-number{color:#e8891a !important;}
.vc_row:has(.ut-counter-box) .wpb_column:nth-child(2) .ut-counter-number{color:#2a9e8c !important;}
.vc_row:has(.ut-counter-box) .wpb_column:nth-child(3) .ut-counter-number{color:#e0457a !important;}
.vc_row:has(.ut-counter-box) .wpb_column:nth-child(4) .ut-counter-number{color:#6a59a8 !important;}

/* ====== 6. CTA BAR ====== */
a[title*="Talk About Your Project"]{color:#fff !important;transition:color .25s ease;}
a[title*="Talk About Your Project"] i{color:#fff !important;}
a[title*="Talk About Your Project"]:hover,a[title*="Talk About Your Project"]:hover i{color:#1a1008 !important;}

/* ====== 7. CONTACT BUTTON ====== */
#ut-custom-contact-section .wpcf7 input.wpcf7-submit{background:linear-gradient(135deg,#f4a320,#e8891a) !important;border:none !important;color:#1a1008 !important;font-weight:600 !important;transition:box-shadow .25s ease,background .25s ease;}
#ut-custom-contact-section .wpcf7 input.wpcf7-submit:hover{background:linear-gradient(135deg,#ffb733,#f4a320) !important;box-shadow:0 6px 22px rgba(244,163,32,.4) !important;}

/* ====== 8. CLIENTS LOGOS TILE UPDATE ====== */
/* light logo chips so transparent-PNG and white-box-JPG logos stay crisp */
.ut-brands .ut-single-brand{padding:14px 12px !important;}
.ut-brands .ut-single-brand-logo{
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:14px !important;
  padding:22px 24px !important;
  min-height:96px !important;
  display:flex !important;align-items:center !important;justify-content:center !important;
  box-shadow:0 12px 32px rgba(0,0,0,.40) !important;
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease !important;
}
.ut-brands .ut-single-brand-logo img{
  max-height:60px !important;max-width:100% !important;width:auto !important;height:auto !important;
  object-fit:contain !important;display:block !important;
}
.ut-brands .ut-single-brand:hover .ut-single-brand-logo{
  transform:translateY(-5px) !important;box-shadow:0 18px 42px rgba(0,0,0,.55) !important;
}

/* ADDITIONAL WRAPPER TRANSPARENCY FIX */
#ut-wrap, #main-content, .main-content-background, .site-content, .ut-site-content, .wpb-content-wrapper, #primary, .page-template-default, .post-2035 {
    background-color: transparent !important;
    background-image: none !important;
}





/* TESTIMONIALS SECTION TRANSPARENCY FIX */
section[data-section-title="What Clients Say Section"],
section[data-section-title="What Clients Say Section"] > .vc_row,
section[data-section-title="What Clients Say Section"] .vc_column-inner,
section[data-section-title="What Clients Say Section"] .wpb_wrapper,
/* Removed old .itm-fullbleed transparent override */

/* Completely hide WPBakery/Brooklyn background layers that overlap the global bg */
section[data-section-title="What Clients Say Section"] .ut-row-background,
section[data-section-title="What Clients Say Section"] .ut-parallax-wrap,
section[data-section-title="What Clients Say Section"] .ut-video-background {
    display: none !important;
}

/* Make Testimonial Cards Dark Frosted Glass to match Services */
.itm-card {
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 6px 30px rgba(0,0,0,0.4) !important;
}
.itm-card:hover {
    background: rgba(255,255,255,0.06) !important;
}
.itm-text, .itm-name, .itm-label, .itm-head {
    color: #ffffff !important;
}

/* END-CINEMATIC-DARK-V3 */




/* HEADER-NAV-FIX-V2 */

/* ===== FIX 1: Homepage - always white nav text (even on scroll) ===== */
body:not(.has-no-hero) #header-section .ut-main-navigation-link,
body:not(.has-no-hero) #header-section .ut-main-navigation-link span,
body:not(.has-no-hero) #header-section .ut-main-navigation-link:hover,
body:not(.has-no-hero) #header-section .ut-main-navigation-link:hover span,
body:not(.has-no-hero) #header-section .ut-header-extra-module .fa {
  color: #ffffff !important;
}
body:not(.has-no-hero) #header-section .ut-navigation-style-animation-line .ut-main-navigation-link::after {
  background-color: #ffffff !important;
}
body:not(.has-no-hero) #header-section .ut-hamburger span,
body:not(.has-no-hero) #header-section .ut-hamburger span::before,
body:not(.has-no-hero) #header-section .ut-hamburger span::after {
  background-color: #ffffff !important;
}

/* ===== FIX 2: Inner pages - transparent header + white text ===== */
.has-no-hero #header-section,
.has-no-hero .ha-header,
.has-no-hero .ut-secondary-custom-skin {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}
/* Frosted glass on scroll for inner pages */
.has-no-hero.ut-header-scrolled #header-section,
.has-no-hero #header-section.ha-header-small,
.has-no-hero #header-section.ut-header-floating-active {
  background: rgba(7,9,12,0.97) !important;
  background-color: rgba(7,9,12,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
  transition: background 0.3s ease, box-shadow 0.3s ease !important;
}
/* White nav text on inner pages */
.has-no-hero #header-section .ut-main-navigation-link,
.has-no-hero #header-section .ut-main-navigation-link span,
.has-no-hero #header-section .ut-main-navigation-link:hover,
.has-no-hero #header-section .ut-main-navigation-link:hover span,
.has-no-hero #header-section .ut-header-extra-module .fa {
  color: #ffffff !important;
}
.has-no-hero #header-section .ut-navigation-style-animation-line .ut-main-navigation-link::after {
  background-color: #ffffff !important;
}
.has-no-hero #header-section .ut-hamburger span,
.has-no-hero #header-section .ut-hamburger span::before,
.has-no-hero #header-section .ut-hamburger span::after {
  background-color: #ffffff !important;
}

/* ===== FIX 3: Inner pages - remove black top area & all backgrounds ===== */
.has-no-hero #ut-header-placeholder,
.has-no-hero .main-content-background,
.has-no-hero .ut-page-hero,
.has-no-hero #ut-hero,
.has-no-hero .parallax-scroll-container,
.has-no-hero .ut-hero-holder,
.has-no-hero .vc_section {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Hide black overlays and parallax images completely on inner pages */
.has-no-hero .bklyn-overlay {
  background: transparent !important;
  background-color: transparent !important;
  display: none !important;
}
.has-no-hero .ut-parallax-image {
  display: none !important;
  background-image: none !important;
}

/* END-HEADER-NAV-FIX-V2 */
/* ===== FIX 3: Inner pages transparent header + white menu ===== */
body.has-no-hero #ut-sitebody #header-section,
body.has-no-hero #ut-sitebody .ha-header,
body.has-no-hero #ut-sitebody .ut-secondary-custom-skin,
body.has-no-hero #ut-sitebody #ut-header-placeholder {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}
body.has-no-hero #ut-sitebody #header-section .ut-primary-menu > li > a,
body.has-no-hero #ut-sitebody #header-section .ut-primary-menu > li > a:hover,
body.has-no-hero #ut-sitebody #header-section .ut-primary-menu > li.current-menu-item > a,
body.has-no-hero #ut-sitebody #header-section .ut-primary-menu > li.current-menu-ancestor > a {
    color: #ffffff !important;
}
body.has-no-hero #ut-sitebody #header-section .site-logo img {
    filter: none !important;
}

/* ===== FIX 4: Inner pages remove black slider portion / hero background ===== */
body.has-no-hero #ut-custom-hero,
body.has-no-hero .ut-content-block-hero,
body.has-no-hero .ut-page-hero,
body.has-no-hero #ut-hero,
body.has-no-hero .ut-page-title,
body.has-no-hero .parallax-scroll-container,
body.has-no-hero .bklyn-overlay,
body.has-no-hero .vc_section {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
}
/* Ensure the cinematic purple glow renders properly over the body background */
#ut-sitebody::before {
    z-index: 0 !important;
}
#ut-wrap, #main-content {
    position: relative !important;
    z-index: 1 !important;
}

/* Remove huge top gap on inner pages which looks like a black slider area */
body.has-no-hero .wpb-content-wrapper > .vc_section:first-child {
    padding-top: 120px !important; /* Enough to clear the 80px header */
}

/* ===== FIX 5: REDESIGN CLIENTS LOGOS TO BE MUCH LARGER ===== */
.ut-brands .ut-single-brand {
    padding: 10px !important; 
}
.ut-brands .ut-single-brand-logo {
    background: #ffffff !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important; 
    min-height: 130px !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.35) !important;
    transition: transform .3s ease, box-shadow .3s ease !important;
}
.ut-brands .ut-single-brand-logo img {
    max-height: 100px !important; 
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    /* Optional: scale slightly if there's too much whitespace baked into the image files */
    transform: scale(1.1) !important;
}
.ut-brands .ut-single-brand:hover .ut-single-brand-logo {
    transform: translateY(-6px) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,.55) !important;
}

/* ===== FIX 6: CONTACT FORM & DETAILS VISIBILITY (GLOBAL DARK THEME) ===== */
/* Address and Email Links */
.bklyn-fancy-list,
.bklyn-fancy-list a, 
.bklyn-fancy-list a:visited,
.bklyn-fancy-list .fa {
    color: rgba(255, 255, 255, 0.8) !important;
}
.bklyn-fancy-list a:hover, 
.bklyn-fancy-list a:hover .fa {
    color: #f4a320 !important; 
}

/* Social Icons */
.ut-social-follow-module li a i {
    color: rgba(255, 255, 255, 0.8) !important;
}
.ut-social-follow-module li a:hover i {
    color: #f4a320 !important;
}

/* Contact Custom Headings */
body.page-id-2071 .vc_custom_heading,
#contact-section .vc_custom_heading {
    color: #ffffff !important;
}

/* Form Labels */
.wpcf7-form label {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Form Inputs and Typing Text */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit) {
    color: #ffffff !important; 
    background-color: rgba(255, 255, 255, 0.08) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

/* Form Inputs Focus State */
.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form .wpcf7-form-control:not(.wpcf7-submit):focus {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border-color: #f4a320 !important;
    color: #ffffff !important;
    outline: none !important;
}

/* Form Placeholders (if any are added) */
.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ===== FIX 7: GENERAL TEXT VISIBILITY ON HOMEPAGE (LINKS, PARAGRAPHS, COUNTERS) ===== */

/* Let's Talk and Custom Links */
.ut-custom-link-module,
.ut-custom-link-module-holder a,
.ut-custom-link-module-holder a:visited {
    color: #ffffff !important;
}
.ut-custom-link-module:hover,
.ut-custom-link-module-holder a:hover {
    color: #f4a320 !important;
}
.ut-custom-link-module i,
.ut-custom-link-module-holder a i {
    color: #f4a320 !important;
}
.ut-custom-link-module:hover i,
.ut-custom-link-module-holder a:hover i {
    color: #ffffff !important;
}

/* Subtitles / Lead paragraphs (like the '550+ clients' text) */
.lead p,
.lead {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Animated Counters (Happy Clients) */
.ut-count,
.ut-count-prefix,
.ut-count-suffix {
    color: #ffffff !important;
    fill: #ffffff !important;
}
.ut-counter-details {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Footer Copyright Text if any was missed */
#ut_custom_heading6a2a68733ea89 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* ===== FIX 8: REDESIGN CTA SECTION (LET'S TALK ABOUT YOUR PROJECT) ===== */
/* Redesign the row background */
#ut-row-6a2a687324634 {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    position: relative;
}
/* Add a glowing radial background behind the button */
#ut-row-6a2a687324634::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    width: 60vw; 
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(244, 163, 32, 0.12) 0%, transparent 60%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 0;
}
/* Redesign the link into a massive CTA button */
#ut_cl_6a2a687325b1b {
    position: relative;
    z-index: 1;
    margin: 0 !important;
}
#ut_cl_6a2a687325b1b a.ut-custom-link-module {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f4a320, #e08b1b) !important;
    color: #ffffff !important;
    padding: 22px 55px !important;
    border-radius: 50px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 30px rgba(244, 163, 32, 0.3) !important;
    transition: all 0.3s ease !important;
    border: none !important;
}
#ut_cl_6a2a687325b1b a.ut-custom-link-module i {
    color: #ffffff !important;
    margin-right: 15px !important;
    font-size: 24px !important;
    transition: transform 0.3s ease !important;
}
/* Hover Effects for the CTA */
#ut_cl_6a2a687325b1b a.ut-custom-link-module:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(244, 163, 32, 0.5) !important;
    color: #ffffff !important;
}
#ut_cl_6a2a687325b1b a.ut-custom-link-module:hover i {
    transform: translateX(5px) !important;
    color: #ffffff !important;
}

/* ===== FIX 9: REDESIGN CTA SECTION (DYNAMIC ID FIX) ===== */
/* Since WPBakery regenerates IDs on every load, we use CSS :has() with high specificity */

/* Target the row background and padding */
#ut-sitebody .vc_row:has(a[title*="Your Project"]) {
    background: transparent !important;
    background-color: transparent !important;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    position: relative !important;
}

/* Add a glowing radial background behind the button */
#ut-sitebody .vc_row:has(a[title*="Your Project"])::before {
    content: '';
    position: absolute;
    top: 50%; 
    left: 50%;
    width: 60vw; 
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(244, 163, 32, 0.15) 0%, transparent 65%) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* Target the link container to bring it forward */
#ut-sitebody .ut-custom-link-module-holder:has(a[title*="Your Project"]) {
    position: relative !important;
    z-index: 1 !important;
    margin: 0 !important;
}

/* Redesign the link itself into a massive CTA button */
#ut-sitebody a.ut-custom-link-module[title*="Your Project"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #f4a320, #e08b1b) !important;
    color: #ffffff !important;
    padding: 22px 55px !important;
    border-radius: 50px !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    box-shadow: 0 10px 30px rgba(244, 163, 32, 0.3) !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

#ut-sitebody a.ut-custom-link-module[title*="Your Project"] i {
    color: #ffffff !important;
    margin-right: 15px !important;
    font-size: 24px !important;
    transition: transform 0.3s ease !important;
}

/* Hover Effects for the CTA */
#ut-sitebody a.ut-custom-link-module[title*="Your Project"]:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 40px rgba(244, 163, 32, 0.5) !important;
    color: #ffffff !important;
}

#ut-sitebody a.ut-custom-link-module[title*="Your Project"]:hover i {
    transform: translateX(5px) !important;
    color: #ffffff !important;
}

/* ===== FIX 10: REMOVE BLACK GAP BETWEEN TESTIMONIALS & CONTACT FORM ===== */

/* Make the contact section background transparent to match the cinematic theme */
#contact-section,
#ut-sitebody #contact-section {
    background-color: transparent !important;
    background: transparent !important;
    padding-top: 60px !important; /* Reduced from 160px */
}

/* Reduce the bottom padding of the Testimonials (What Clients Say) section */
section.vc_section[data-section-title*="Clients Say"] {
    padding-bottom: 40px !important; /* Reduced from 160px */
}

/* Also reduce bottom margin of the raw HTML block holding the testimonials */
.itm-fullbleed {
    margin-bottom: 0 !important;
}


/* ===== FIX 13: TESTIMONIALS BACKGROUND SEAMLESS INTEGRATION ===== */

/* 1. Make the raw HTML testimonial block completely transparent */
body.home div.itm-fullbleed,
body.home div.Itm-fullbleed,
body.home section[data-section-title*="Clients"] .itm-fullbleed {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border: none !important;
}

/* 2. Hide the old dotted overlay (checking both cases just to be safe) */
body.home div.itm-fullbleed::before,
body.home div.Itm-fullbleed::before {
    display: none !important;
    opacity: 0 !important;
    background-image: none !important;
}

/* 3. Apply the cinematic background to the ENTIRE "What Clients Say" Section */
/* This ensures the gradient flows continuously across the text and testimonials */
body.home section.vc_section[data-section-title*="Clients Say"] {
    background-color: #0b0712 !important;
    background-image: 
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(90, 76, 142, 0.4), transparent 70%),
        radial-gradient(circle at right 50%, rgba(224, 64, 112, 0.15), transparent 50%),
        radial-gradient(circle at left 50%, rgba(42, 158, 140, 0.1), transparent 50%),
        url('https://inventifstudio.com/wp-content/uploads/2025/01/noise-bg.png') !important;
    background-blend-mode: normal, normal, normal, overlay !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}


/* Performance & CLS Fixes */
.hero-section, #ut-hero { min-height: 100vh; contain: layout; }
.ut-animate, [class*='animate'] { will-change: transform, opacity; transform: translateZ(0); }

/* ===== FIX 14 (2026-06-12 v2): Inner-page header TRANSPARENT. Root cause: prior rules used "body.has-no-hero #ut-sitebody #header-section" with a SPACE, but #ut-sitebody IS the body element, so the descendant selector never matched and Brooklyn #header-section.ut-secondary-custom-skin{background:#fff} won. Correct = body.has-no-hero#ut-sitebody (no space). ===== */
body.has-no-hero#ut-sitebody #header-section,
body.has-no-hero#ut-sitebody #header-section.ha-header,
body.has-no-hero#ut-sitebody #header-section.ut-secondary-custom-skin,
body.has-no-hero#ut-sitebody #header-section:before,
body.has-no-hero#ut-sitebody #header-section:after,
body.has-no-hero#ut-sitebody #header-section.ha-header:before,
body.has-no-hero#ut-sitebody #ut-header-placeholder {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
/* Frosted-dark header on SCROLL (body gets .ut-header-scrolled; header gets floating-active/small) */
body.has-no-hero#ut-sitebody.ut-header-scrolled #header-section,
body.has-no-hero#ut-sitebody #header-section.ha-header-small,
body.has-no-hero#ut-sitebody #header-section.ut-header-floating-active {
  background: rgba(7,9,12,0.97) !important;
  background-color: rgba(7,9,12,0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,0.4) !important;
}