/* ================================
       Creative Hero Banner
       Heart Breathing / Pulse Animation
    ================================= */

    .banner-bg-1.yel-banner-section {
        position: relative;
        padding: 120px 0 100px;
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        overflow: hidden;
        isolation: isolate;
    }

    /* Dark base overlay */
    .banner-bg-1.yel-banner-section::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
            linear-gradient(135deg, rgba(8, 30, 74, 0.95) 0%, rgba(14, 67, 145) 52%, rgba(6, 27, 70, 0.96) 100%);
    }

    /* Breathing glow layer */
    .banner-bg-1.yel-banner-section::before {
        content: "";
        position: absolute;
        inset: -18%;
        z-index: 1;
        pointer-events: none;

        background:
            radial-gradient(circle at 50% 48%, rgba(252, 227, 33, 0.24) 0%, rgba(252, 227, 33, 0.10) 18%, transparent 42%),
            radial-gradient(circle at 20% 25%, rgba(255, 255, 255, 0.10) 0%, transparent 28%),
            radial-gradient(circle at 82% 28%, rgba(0, 174, 255, 0.14) 0%, transparent 34%),
            radial-gradient(circle at 50% 105%, rgba(13, 110, 253, 0.20) 0%, transparent 45%),
            radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1.8px);

        background-size:
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            32px 32px;

        opacity: 0.75;
        transform: scale(1);
        animation: heroHeartBreath 7s ease-in-out infinite;
        filter: blur(0px);
    }

    @keyframes heroHeartBreath {
        0% {
            transform: scale(1);
            opacity: 0.58;
            filter: brightness(1) saturate(1);
        }

        18% {
            transform: scale(1.045);
            opacity: 0.92;
            filter: brightness(1.14) saturate(1.18);
        }

        30% {
            transform: scale(1.015);
            opacity: 0.68;
            filter: brightness(1.03) saturate(1.05);
        }

        42% {
            transform: scale(1.06);
            opacity: 0.95;
            filter: brightness(1.18) saturate(1.22);
        }

        60% {
            transform: scale(1.02);
            opacity: 0.72;
            filter: brightness(1.05) saturate(1.08);
        }

        100% {
            transform: scale(1);
            opacity: 0.58;
            filter: brightness(1) saturate(1);
        }
    }

    /* Extra soft inner pulse behind content */
    .banner-bg-1.yel-banner-section .container::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.86);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(252, 227, 33, 0.14) 0%, rgba(252, 227, 33, 0.06) 34%, transparent 70%);
        z-index: -1;
        opacity: 0.65;
        animation: contentSoftPulse 7s ease-in-out infinite;
    }

    @keyframes contentSoftPulse {
        0% {
            transform: translate(-50%, -50%) scale(0.86);
            opacity: 0.35;
        }

        18% {
            transform: translate(-50%, -50%) scale(1.04);
            opacity: 0.72;
        }

        30% {
            transform: translate(-50%, -50%) scale(0.94);
            opacity: 0.48;
        }

        42% {
            transform: translate(-50%, -50%) scale(1.12);
            opacity: 0.78;
        }

        100% {
            transform: translate(-50%, -50%) scale(0.86);
            opacity: 0.35;
        }
    }

    /* Ensure content sits above overlays */
    .banner-bg-1 .container {
        position: relative;
        z-index: 3;
    }

    /* Badge styling */
    .partner-badge {
        background-color: #fce321;
        color: #000;
        font-weight: 700;
        padding: 8px 20px;
        border-radius: 30px;
        display: inline-block;
        font-size: 0.9rem;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 10px rgba(252, 227, 33, 0.3);
        margin-bottom: 25px;
        animation: badgeBreath 7s ease-in-out infinite;
    }

    @keyframes badgeBreath {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 4px 10px rgba(252, 227, 33, 0.28);
        }

        18%, 42% {
            transform: scale(1.035);
            box-shadow: 0 8px 24px rgba(252, 227, 33, 0.42);
        }
    }

    .banner-bg-1 h1 {
        color: #fce321;
        font-size: 4rem;
        font-weight: 800;
        margin-bottom: 20px;
        letter-spacing: -1px;
        position: relative;
        display: inline-block;
        text-shadow: 0 8px 28px rgba(0,0,0,0.28);
    }

    /* Yellow underline beneath H1 */
    .banner-bg-1 h1::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 60px;
        height: 5px;
        background-color: #fce321;
        border-radius: 5px;
        animation: underlineHeartbeat 7s ease-in-out infinite;
    }

    @keyframes underlineHeartbeat {
        0%, 100% {
            width: 60px;
            box-shadow: 0 0 0 rgba(252, 227, 33, 0);
        }

        18% {
            width: 92px;
            box-shadow: 0 0 22px rgba(252, 227, 33, 0.45);
        }

        30% {
            width: 68px;
            box-shadow: 0 0 8px rgba(252, 227, 33, 0.22);
        }

        42% {
            width: 108px;
            box-shadow: 0 0 28px rgba(252, 227, 33, 0.55);
        }
    }

    .banner-bg-1 ul li,
    .banner-bg-1 ul li a {
        color: #ffffff;
        font-weight: 600;
        text-decoration: none;
        font-size: 1rem;
    }

    .banner-bg-1 ul li a:hover {
        color: #fce321;
    }

    /* Redesigned "Our Partner Network" Section */
    .network-intro-card {
        background: #ffffff;
        border-radius: 20px;
        padding: 50px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.05);
        border-top: 5px solid #0d6efd;
        position: relative;
        margin-top: -60px;
        z-index: 10;
    }

    /* Subtle hover effects for content sections */
    .hover-div {
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 25px;
        border-radius: 12px;
        background: #ffffff;
        border: 1px solid rgba(0,0,0,0.05);
    }

    .hover-div:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        border-color: rgba(0, 102, 204, 0.2);
    }

    .getting-started-icon {
        background: rgba(0, 102, 204, 0.1);
        padding: 15px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease, background 0.3s ease;
    }

    .hover-div:hover .getting-started-icon {
        transform: scale(1.1) rotate(5deg);
        background: rgba(0, 102, 204, 0.2);
    }

    /* Image enhancements */
    .partner-hero-img {
        border-radius: 20px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        transition: transform 0.4s ease;
    }

    .partner-hero-img:hover {
        transform: scale(1.02);
    }

    /* Section styling */
    .section-clients {
        background: linear-gradient(to right, #f8f9fa, #ffffff, #f8f9fa);
        border-radius: 24px;
        padding: 40px 0;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.02);
    }

    .owl-item img {
        filter: grayscale(100%) opacity(0.7);
        transition: all 0.3s ease;
    }

    .owl-item:hover img {
        filter: grayscale(0%) opacity(1);
    }

    /* Mobile */
    @media (max-width: 991px) {
        .banner-bg-1.yel-banner-section {
            padding: 95px 0 80px;
            background-attachment: scroll;
        }

        .banner-bg-1 h1 {
            font-size: 3rem;
        }

        .network-intro-card {
            padding: 35px;
        }
    }

    @media (max-width: 575px) {
        .banner-bg-1.yel-banner-section {
            padding: 80px 0 65px;
        }

        .banner-bg-1 h1 {
            font-size: 2.4rem;
        }

        .partner-badge {
            font-size: 0.78rem;
            padding: 8px 16px;
        }

        .network-intro-card {
            padding: 28px 20px;
            border-radius: 16px;
        }

        .banner-bg-1.yel-banner-section .container::before {
            width: 280px;
            height: 280px;
        }
    }

    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
        .banner-bg-1.yel-banner-section::before,
        .banner-bg-1.yel-banner-section .container::before,
        .partner-badge,
        .banner-bg-1 h1::after {
            animation: none;
        }
    }