/* =========================================================
   SITE THEME: banner look across the whole website
   Dark sections become light "banner style" sections (ice-blue base,
   blue / violet / cyan glows, dot pattern, floating orbs).
   To undo: remove the theme.css <link> line in header.php.
========================================================= */

/* ---------- Inner page banners (service, industry, about, blog ...) ----------
   Same light look as the home banner; pages with a form get the colour band. */
section.hero-section:not(:has(.hero-glow-1)) {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse 50% 55% at 0% 0%, rgba(0, 82, 255, 0.14), transparent 70%),
        radial-gradient(ellipse 40% 50% at 55% 0%, rgba(0, 210, 255, 0.10), transparent 70%),
        linear-gradient(180deg, #F7FAFF 0%, #EDF3FF 100%);
}

section.hero-section:not(:has(.hero-glow-1))::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 82, 255, 0.20) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 55% 60% at 15% 25%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 55% 60% at 15% 25%, #000 10%, transparent 75%);
    pointer-events: none;
}

section.hero-section:not(:has(.hero-glow-1)):has(form)::after {
    content: '';
    position: absolute;
    top: -25%;
    right: -20%;
    width: 62%;
    height: 150%;
    background: linear-gradient(125deg, #0052FF 0%, #00C6FF 25%, #1D4ED8 50%, #00D2FF 75%, #0052FF 100%);
    background-size: 300% 300%;
    transform: skewX(-10deg);
    animation: themeBandFlow 14s ease-in-out infinite;
    box-shadow: -30px 0 80px rgba(0, 82, 255, 0.25);
    -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
    pointer-events: none;
}

section.hero-section:not(:has(.hero-glow-1)) > .container {
    position: relative;
    z-index: 2;
}

section.hero-section:not(:has(.hero-glow-1)) .hero-lead-card,
section.hero-section:not(:has(.hero-glow-1)) .card:has(form) {
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 40px 80px rgba(11, 30, 90, 0.22) !important;
}

section.hero-section:not(:has(.hero-glow-1)) .hero-badge {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 6px 20px rgba(0, 82, 255, 0.12);
}

@media (max-width: 991.98px) {
    section.hero-section:not(:has(.hero-glow-1)):has(form)::after {
        top: auto;
        bottom: -8%;
        right: -30%;
        width: 160%;
        height: 50%;
        transform: skewY(-10deg);
        -webkit-mask-image: none;
                mask-image: none;
    }
}

/* ---------- Generic grey sections (services, industries, ...) get the banner glow ---------- */
section.py-5.bg-light:not(.hero-section) {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse 45% 55% at 0% 0%, rgba(0, 82, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 40% 50% at 100% 100%, rgba(0, 210, 255, 0.14), transparent 70%),
        radial-gradient(ellipse 35% 45% at 90% 10%, rgba(29, 78, 216, 0.08), transparent 70%),
        linear-gradient(180deg, #EEF4FF 0%, #F7FAFF 100%);
}

section.py-5.bg-light:not(.hero-section)::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 82, 255, 0.16) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 10% 15%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 50% 60% at 10% 15%, #000 10%, transparent 75%);
    pointer-events: none;
}

section.py-5.bg-light:not(.hero-section) > .container {
    position: relative;
    z-index: 2;
}

/* White cards on those sections: soft glass edge */
section.py-5.bg-light .service-hover-card,
section.py-5.bg-light .card {
    border: 1px solid rgba(0, 82, 255, 0.10);
    box-shadow: 0 12px 30px rgba(0, 58, 140, 0.07);
}

/* ---------- Shared light "banner" background for former dark sections ---------- */
section.solvingsec,
section.problem-section,
section.why-boxes-section,
section.spotlight-section,
section.about-section {
    position: relative;
    overflow: hidden;
    color: var(--text-dark) !important;
    background-color: #F4F8FF !important;
    background-image:
        radial-gradient(ellipse 45% 55% at 0% 0%, rgba(0, 82, 255, 0.14), transparent 70%),
        radial-gradient(ellipse 40% 50% at 100% 100%, rgba(0, 210, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 35% 45% at 85% 10%, rgba(0, 210, 255, 0.12), transparent 70%),
        linear-gradient(180deg, #F7FAFF 0%, #EDF3FF 100%) !important;
}

/* Alternate the glow corners so stacked sections don't look identical */
section.problem-section,
section.spotlight-section {
    background-image:
        radial-gradient(ellipse 45% 55% at 100% 0%, rgba(0, 210, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(0, 210, 255, 0.14), transparent 70%),
        radial-gradient(ellipse 35% 45% at 20% 20%, rgba(0, 82, 255, 0.10), transparent 70%),
        linear-gradient(180deg, #EEF4FF 0%, #F7FAFF 100%) !important;
}

/* Dot pattern, like the banner */
section.solvingsec::before,
section.problem-section::before,
section.why-boxes-section::before,
section.spotlight-section::before,
section.about-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 82, 255, 0.16) 1.2px, transparent 1.2px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 10% 20%, #000 10%, transparent 75%);
            mask-image: radial-gradient(ellipse 50% 60% at 10% 20%, #000 10%, transparent 75%);
    pointer-events: none;
}

section.solvingsec > .container,
section.problem-section > .container,
section.why-boxes-section > .container,
section.spotlight-section > .container,
section.about-section > .container {
    position: relative;
    z-index: 2;
}

/* ---------- Text colours inside those sections ---------- */
section.solvingsec h1, section.solvingsec h2, section.solvingsec h3, section.solvingsec h4, section.solvingsec h5, section.solvingsec h6,
section.problem-section h2,
section.why-boxes-section h2,
section.spotlight-section h2,
section.about-section h2, section.about-section h3, section.about-section h4,
section.solvingsec .text-white,
section.problem-section > .container > .text-center .text-white,
section.why-boxes-section > .container > .text-center .text-white,
section.spotlight-section .text-white,
section.about-section .text-white {
    color: var(--dark-navy) !important;
}

section.solvingsec p,
section.spotlight-section p,
section.about-section p,
section.solvingsec .text-secondary,
section.spotlight-section .text-light,
section.about-section .text-light,
section.spotlight-section ul,
section.spotlight-section li {
    color: #475569 !important;
}

section.solvingsec .fw-semibold,
section.spotlight-section p.mb-4:not(.opacity-75) {
    color: #1E293B !important;
}

/* Cyan accents → brand blue (cyan is hard to read on light) */
section.solvingsec .text-info,
section.problem-section .text-info,
section.why-boxes-section .text-info,
section.spotlight-section .text-info,
section.about-section .text-info,
section.spotlight-section [style*="brand-cyan"],
section.about-section [style*="brand-cyan"] {
    color: var(--brand-blue) !important;
}

section.about-section h4.text-info {
    background: linear-gradient(90deg, #0052FF, #1D4ED8);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Images get a soft white frame */
section.solvingsec img,
section.spotlight-section img,
section.about-section img {
    border: 6px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 30px 60px rgba(0, 58, 140, 0.18) !important;
}

/* ---------- Problem & Why cards: white glass, colourful on hover ---------- */
section.problem-section .problem-card,
section.why-boxes-section .why-box-card {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(0, 82, 255, 0.12);
    box-shadow: 0 12px 30px rgba(0, 58, 140, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

section.problem-section .problem-card h5,
section.why-boxes-section .why-box-card h5 {
    color: var(--dark-navy) !important;
}

section.problem-section .problem-card p,
section.why-boxes-section .why-box-card p {
    color: #64748B !important;
    opacity: 1 !important;
}

section.problem-section .problem-icon-wrapper {
    background: rgba(0, 82, 255, 0.10);
    color: var(--brand-blue);
}

section.problem-section .problem-card:hover,
section.why-boxes-section .why-box-card:hover {
    background: linear-gradient(135deg, #0052FF 0%, #003A9E 100%) !important;
    border-color: transparent;
    box-shadow: 0 24px 50px rgba(0, 58, 140, 0.30);
}

section.problem-section .problem-card:hover h5,
section.problem-section .problem-card:hover p,
section.why-boxes-section .why-box-card:hover h5,
section.why-boxes-section .why-box-card:hover p {
    color: #FFFFFF !important;
}

/* ---------- Stats strip: the banner's colour band ---------- */
section.proof-bar-section {
    background: linear-gradient(120deg, #0052FF 0%, #00C6FF 30%, #1D4ED8 60%, #0052FF 100%) !important;
    background-size: 300% 300% !important;
    animation: themeBandFlow 14s ease-in-out infinite;
    border: 0;
    box-shadow: 0 20px 40px rgba(0, 82, 255, 0.2);
    position: relative;
    overflow: hidden;
}

section.proof-bar-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.08) 0 2px, transparent 2px 70px);
    pointer-events: none;
}

section.proof-bar-section .text-info {
    color: rgba(255, 255, 255, 0.88) !important;
}

section.proof-bar-section h3 {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.18);
}

@keyframes themeBandFlow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ---------- Light sections: soft banner glows ---------- */
section.services-section,
section.testimonial-section,
section.case-studies-section,
section.why-us-section,
section.jploft-process-section,
section.faq-section,
section.blog-section,
section.portfolio-showcase-section,
section.process-section {
    position: relative;
    overflow: hidden;
    background-image:
        radial-gradient(ellipse 40% 50% at 0% 0%, rgba(0, 82, 255, 0.07), transparent 70%),
        radial-gradient(ellipse 40% 50% at 100% 100%, rgba(0, 210, 255, 0.06), transparent 70%);
}

section.services-section,
section.testimonial-section {
    background-color: #F1F6FF;
    background-image:
        radial-gradient(ellipse 40% 50% at 100% 0%, rgba(0, 210, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 40% 50% at 0% 100%, rgba(0, 210, 255, 0.08), transparent 70%),
        linear-gradient(180deg, #EEF4FF 0%, #F8FAFC 100%);
}

/* ---------- CTA banner in the banner's colours ---------- */
.cta-banner {
    background: linear-gradient(120deg, #0052FF 0%, #1D4ED8 45%, #00C6FF 100%) !important;
    background-size: 220% 220% !important;
    box-shadow: 0 25px 50px rgba(0, 58, 140, 0.25);
}

/* ---------- Footer: deep navy-blue with soft blue / cyan glows ---------- */
footer {
    position: relative;
    overflow: hidden;
    border-top: 0;
    background:
        radial-gradient(ellipse 55% 70% at 0% 0%, rgba(0, 82, 255, 0.38), transparent 70%),
        radial-gradient(ellipse 45% 60% at 100% 100%, rgba(0, 210, 255, 0.20), transparent 70%),
        radial-gradient(ellipse 35% 45% at 70% 10%, rgba(29, 78, 216, 0.25), transparent 70%),
        linear-gradient(180deg, #08153D 0%, #050C26 60%, #030818 100%);
}

/* Animated brand line on top */
footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #0052FF, #00D2FF, #1D4ED8, #00D2FF, #0052FF);
    background-size: 200% 100%;
    animation: themeFooterLine 6s linear infinite;
    z-index: 2;
}

/* Fine dot pattern + faint grid floor */
footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.10) 1px, transparent 1px),
        linear-gradient(rgba(0, 210, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 210, 255, 0.05) 1px, transparent 1px);
    background-size: 24px 24px, 80px 80px, 80px 80px;
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent 85%);
            mask-image: linear-gradient(to bottom, #000, transparent 85%);
    pointer-events: none;
}

footer > .container {
    position: relative;
    z-index: 1;
}

footer .footer-title {
    position: relative;
    padding-bottom: 10px;
}

footer .footer-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0052FF, #00D2FF);
}

@keyframes themeFooterLine {
    to { background-position: -200% 0; }
}

/* ---------- Custom cursor (dot + trailing ring) ---------- */
html.fx-cursor-on,
html.fx-cursor-on body,
html.fx-cursor-on a,
html.fx-cursor-on button,
html.fx-cursor-on .btn,
html.fx-cursor-on label,
html.fx-cursor-on [role="button"] {
    cursor: none !important;
}

.fx-cursor-dot,
.fx-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3000;
    opacity: 0;
    will-change: transform;
}

.fx-cursor-dot {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: linear-gradient(135deg, #0052FF, #00D2FF);
    box-shadow: 0 0 10px rgba(0, 82, 255, 0.6);
    transition: opacity 0.2s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;
}

.fx-cursor-ring {
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border: 1.5px solid rgba(0, 82, 255, 0.45);
    transition: opacity 0.2s ease, width 0.25s ease, height 0.25s ease, margin 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

html.fx-cursor-visible .fx-cursor-dot,
html.fx-cursor-visible .fx-cursor-ring {
    opacity: 1;
}

/* Over links & buttons: ring grows into a soft glowing bubble */
html.fx-cursor-hover .fx-cursor-ring {
    width: 64px;
    height: 64px;
    margin: -32px 0 0 -32px;
    border-color: rgba(0, 210, 255, 0.5);
    background: rgba(0, 82, 255, 0.10);
}

html.fx-cursor-hover .fx-cursor-dot {
    width: 4px;
    height: 4px;
    margin: -2px 0 0 -2px;
}

html.fx-cursor-down .fx-cursor-ring {
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
}

@media (prefers-reduced-motion: reduce) {
    footer::before,
    section.hero-section::after,
    section.proof-bar-section {
        animation: none !important;
    }
}

/* ---------- Footer newsletter: button never shrinks / clips its text ---------- */
footer form .btn {
    flex-shrink: 0;
}

/* =========================================================
   POPUP (Start Your Project) in the banner style
   Same brand colours only: blue, cyan, navy, white.
========================================================= */
.iconic-split-modal .modal-content {
    background: #FFFFFF;
    border-radius: 24px;
    border: 0;
    box-shadow: 0 40px 100px rgba(0, 58, 140, 0.35);
}

.iconic-split-modal .modal-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    z-index: 5;
    background: linear-gradient(90deg, #0052FF, #00D2FF, #0052FF);
    background-size: 200% 100%;
    animation: themeFooterLine 5s linear infinite;
}

.iconic-split-modal .modal-backdrop,
.modal-backdrop.show {
    opacity: 0.6;
}

/* Left panel: the banner's colour band over the team photo */
.iconic-split-modal .row > .col-lg-5 {
    background:
        linear-gradient(135deg, rgba(0, 82, 255, 0.94) 0%, rgba(0, 198, 255, 0.86) 55%, rgba(29, 78, 216, 0.92) 100%),
        url('../images/stock/1522071820081-009f0129c71c.jpg') center / cover !important;
    background-size: 220% 220%, cover !important;
    animation: themeModalBand 12s ease-in-out infinite;
}

.iconic-split-modal .row > .col-lg-5 > .position-absolute {
    background: repeating-linear-gradient(100deg, rgba(255, 255, 255, 0.07) 0 2px, transparent 2px 60px) !important;
}

.iconic-split-modal .row > .col-lg-5 .text-info,
.iconic-split-modal .row > .col-lg-5 .text-muted {
    color: rgba(255, 255, 255, 0.9) !important;
}

.iconic-split-modal .row > .col-lg-5 .border-top {
    border-color: rgba(255, 255, 255, 0.25) !important;
}

@keyframes themeModalBand {
    0%, 100% { background-position: 0% 50%, center; }
    50%      { background-position: 100% 50%, center; }
}

/* Right panel: light, like the banner form */
.iconic-split-modal .row > .col-lg-7 {
    position: relative;
    background:
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(0, 210, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 50% 50% at 0% 100%, rgba(0, 82, 255, 0.08), transparent 70%),
        #FFFFFF !important;
}

.iconic-split-modal .row > .col-lg-7 h4 {
    color: var(--dark-navy) !important;
}

.iconic-split-modal .row > .col-lg-7 p {
    color: #64748B !important;
}

.iconic-split-modal .row > .col-lg-7 .form-label {
    color: #1E293B !important;
    font-size: 12px;
}

.iconic-split-modal .row > .col-lg-7 .extra-small:not(.form-label) {
    color: #64748B !important;
}

.iconic-split-modal .split-input {
    background: #F5F8FF !important;
    border: 1px solid #D5E0F0 !important;
    color: var(--text-dark) !important;
    font-size: 14px !important;
    padding: 12px 14px !important;
}

.iconic-split-modal .split-input::placeholder {
    color: #94A3B8;
}

.iconic-split-modal .split-input:focus {
    background: #FFFFFF !important;
    border-color: var(--brand-blue) !important;
    box-shadow: 0 0 0 4px rgba(0, 82, 255, 0.12) !important;
}

.iconic-split-modal .split-pill {
    background: #F5F8FF;
    border-color: #D5E0F0;
    color: var(--text-dark);
}

.iconic-split-modal .split-radio:checked + .split-pill {
    background: linear-gradient(135deg, #0052FF, #00D2FF);
    border-color: transparent;
    color: #FFFFFF;
    box-shadow: 0 8px 18px rgba(0, 82, 255, 0.25);
}

/* Close button readable on the white panel */
.iconic-split-modal .btn-close {
    filter: none !important;
    background-color: #F1F5F9;
    border-radius: 50%;
    padding: 10px;
    opacity: 0.8;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.iconic-split-modal .btn-close:hover {
    opacity: 1;
    transform: rotate(90deg);
}

/* Popup opens with a soft scale-up */
.iconic-split-modal.fade .modal-dialog {
    transform: translateY(30px) scale(0.96);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.iconic-split-modal.show .modal-dialog {
    transform: none;
}