:root {
    --primary: #00BFFF;
    --primary-dark: #007EBD;
    --secondary: #FFE500;
    --dark: #0e1521;
    --navy: #111B2A;
    --surface: #0B1420;
    --white: #F5F7FA;
    --text: #D6E0EA;
    --muted: #9CAAB9;
    --border: rgba(255, 255, 255, 0.12);
    --blue-glow: rgba(0, 191, 255, 0.3);
    --yellow-glow: rgba(255, 229, 0, 0.2);
    --gradient: linear-gradient(110deg, #FFE500 0%, #FFFFFF 45%, #00BFFF 100%);
    --font-main: "Cairo", sans-serif;
    --transition: all 0.35s ease;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    font-family: var(--font-main);
    background: rgba(19, 31, 53, 1);
    color: var(--white);
    overflow-x: hidden;
}

a {
    text-decoration: none;
}

.bbr-header {
    position: relative;
    z-index: 1000;
    background: rgba(19, 31, 53, 1);
   
    transition: var(--transition);
    margin-bottom: 15px;
}

.bbr-header.scrolled {
    position: sticky;
    top: 0;
    background: rgba(19, 31, 53, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border);
}

.bbr-navbar {
    min-height: 48px;
    padding: 0px 0;
}

.bbr-nav-container {
    padding-inline: 4%;
 }

.bbr-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.bbr-brand img {
       object-fit: cover;
 }

 
.bbr-nav-links {
    align-items: center;
    gap: 30px;
}

.bbr-nav-links .nav-link {
    color: var(--white);
    font-size: 15px;
    font-weight: 700;
    padding: 12px 0 !important;
    position: relative;
    transition: var(--transition);
        display: inline-block;

}

.bbr-nav-links .nav-link:hover,
.bbr-nav-links .nav-link.active {
    color: var(--white);
}

.bbr-nav-links .nav-link::after {
    content: "";
    position: absolute;
    bottom: 3px;
    right: 0;
    width: 0;
    height: 2px;
    background: var(--primary);
    transition: var(--transition);
    display: inline-block;
}

.bbr-nav-links .nav-link:hover::after,
.bbr-nav-links .nav-link.active::after {
    width: 100%;
}

.bbr-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px;
    min-width: 220px;
}

.bbr-dropdown .dropdown-item {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    padding: 12px 15px;
    border-radius: 8px;
    transition: var(--transition);
}

.bbr-dropdown .dropdown-item:hover {
    color: var(--primary);
    background: rgba(0, 191, 255, 0.1);
}

.bbr-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--primary);
    color: var(--dark);
    padding: 15px 25px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 800;
    transition: var(--transition);
}

.bbr-nav-cta:hover {
    background: var(--secondary);
    color: var(--dark);
    transform: translateY(-3px);
}

.bbr-toggler {
    color: var(--white);
    border: 1px solid var(--border);
    padding: 10px 14px;
    font-size: 21px;
}

.bbr-toggler:focus {
    box-shadow: 0 0 0 2px var(--primary);
}

.bbr-hero {
    position: relative;
    min-height: 790px;
    min-height: min(850px, 90svh);
    margin: 0 22px 22px;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
    background: #031525;
    margin-top: 10px;
}

.bbr-hero-video,
.bbr-hero-video video,
.bbr-hero-overlay,
.bbr-hero-grid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bbr-hero-video {
    z-index: -5;
}

.bbr-hero-video video {
    object-fit: cover;
    object-position: center;
}

.bbr-hero-overlay {
    z-index: -4;
    background:
        linear-gradient(
            180deg,
            rgba(2, 8, 16, 0.58) 0%,
            rgba(2, 12, 25, 0.66) 45%,
            rgba(2, 8, 16, 0.83) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(0, 42, 78, 0.15),
            rgba(0, 0, 0, 0.5)
        );
}

.bbr-hero-grid {
    z-index: -3;
    opacity: 0.13;
    background-image:
        linear-gradient(rgba(0,191,255,.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,191,255,.25) 1px, transparent 1px);
    background-size: 85px 85px;
    mask-image: linear-gradient(to bottom, transparent, black);
    pointer-events: none;
}

.bbr-hero-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: 0.32;
    pointer-events: none;
    z-index: -2;
    animation: bbrGlow 8s ease-in-out infinite alternate;
}

.bbr-glow-blue {
    background: var(--primary);
    top: -200px;
    left: 10%;
}

.bbr-glow-yellow {
    background: var(--secondary);
    bottom: -280px;
    right: 8%;
    animation-delay: -4s;
}

.bbr-hero-container {
    position: relative;
    z-index: 2;
    padding-top: 110px;
    padding-bottom: 135px;
}

.bbr-hero-content {
    max-width: 1150px;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.bbr-hero-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 20px 8px 10px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50px;
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(15px);
    color: var(--white);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 32px;
}

.bbr-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--secondary);
    color: var(--dark);
}

.bbr-badge-dot {
    width: 5px;
    height: 5px;
    background: var(--primary);
    border-radius: 50%;
}

.bbr-hero-title {
    color: var(--white);
    font-size: clamp(36px, 5.4vw, 52px);
    font-weight: 900;
    line-height: 1.45;
    letter-spacing: -2px;
    max-width: 1120px;
    margin-bottom: 24px;
    text-wrap: balance;
}

.bbr-title-gradient {
    display: block;
    background: var(--gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bbr-hero-description {
    max-width: 800px;
    font-size: clamp(14px, 1.3vw, 16px);
    font-weight: 500;
    line-height: 2.1;
    color: var(--text);
    margin-bottom: 35px;
}

.bbr-hero-description strong {
    color: var(--secondary);
    font-weight: 900;
}

.bbr-hero-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.bbr-btn {
    min-height: 56px;
    padding: 15px 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 800;
    transition: var(--transition);
}

.bbr-btn-primary {
    background: linear-gradient(135deg, var(--primary), #77DCFF);
    color: var(--dark);
    box-shadow: 0 10px 35px rgba(0,191,255,.18);
}

.bbr-btn-primary:hover {
    background: var(--secondary);
    color: var(--dark);
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(255,229,0,.2);
}

.bbr-btn-outline {
    border: 1px solid rgba(255,255,255,.35);
    background: rgba(255,255,255,.06);
    color: var(--white);
    backdrop-filter: blur(10px);
}

.bbr-btn-outline:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(0,191,255,.1);
    transform: translateY(-5px);
}

.bbr-hero-features {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 65px;
}

.bbr-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.bbr-feature-icon {
    width: 39px;
    height: 39px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0,191,255,.3);
    background: rgba(0,191,255,.1);
    border-radius: 10px;
    color: var(--primary);
    font-size: 15px;
}

.bbr-feature-separator {
    width: 1px;
    height: 25px;
    background: rgba(255,255,255,.2);
}

.bbr-hero-bottom {
    position: absolute;
    bottom: 28px;
    left: 45px;
    right: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 3;
}

.bbr-hero-bottom > span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
    color: rgba(255,255,255,.65);
}

.bbr-hero-bottom b {
    color: var(--secondary);
    padding: 0 8px;
}

.bbr-scroll-link {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 700;
    color: var(--white);
    transition: var(--transition);
}

.bbr-scroll-link i {
    color: var(--primary);
    animation: bbrBounce 2s infinite;
}

.bbr-scroll-link:hover {
    color: var(--primary);
}

.bbr-hero-badge,
.bbr-hero-title,
.bbr-hero-description,
.bbr-hero-actions,
.bbr-hero-features {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

.bbr-hero.is-visible .bbr-hero-badge,
.bbr-hero.is-visible .bbr-hero-title,
.bbr-hero.is-visible .bbr-hero-description,
.bbr-hero.is-visible .bbr-hero-actions,
.bbr-hero.is-visible .bbr-hero-features {
    opacity: 1;
    transform: translateY(0);
}

.bbr-hero.is-visible .bbr-hero-title {
    transition-delay: .12s;
}

.bbr-hero.is-visible .bbr-hero-description {
    transition-delay: .25s;
}

.bbr-hero.is-visible .bbr-hero-actions {
    transition-delay: .38s;
}

.bbr-hero.is-visible .bbr-hero-features {
    transition-delay: .5s;
}

@keyframes bbrGlow {
    from {
        transform: translate(0, 0) scale(1);
    }
    to {
        transform: translate(80px, 40px) scale(1.2);
    }
}

@keyframes bbrBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(7px);
    }
}

@media (max-width: 991px) {
    .bbr-navbar {
        min-height: 85px;
    }

    .bbr-nav-container {
        padding-inline: 5%;
    }

    .bbr-navbar .navbar-collapse {
        padding: 22px;
        margin-top: 15px;
        background: var(--surface);
        border: 1px solid var(--border);
        border-radius: 16px;
    }

    .bbr-nav-links {
        align-items: stretch;
        gap: 5px;
        margin-bottom: 20px;
    }

    .bbr-nav-cta {
        width: 100%;
    }

    .bbr-hero {
        min-height: 720px;
        margin: 0 12px 12px;
    }

    .bbr-hero-title {
        font-size: clamp(35px, 6vw, 60px);
    }

    .bbr-hero-container {
        padding-top: 90px;
        padding-bottom: 120px;
    }

    .bbr-hero-features {
        gap: 16px;
        margin-top: 45px;
    }
}

@media (max-width: 575px) {
    .bbr-navbar {
        min-height: 75px;
    }

    .bbr-brand img {
        width: 43px;
        height: 43px;
    }

    .bbr-brand-name {
        font-size: 22px;
    }

    .bbr-hero {
        min-height: 720px;
        min-height: 90svh;
        border-radius: 15px;
        margin: 0 8px 8px;
    }

    .bbr-hero-container {
        padding: 80px 18px 95px;
    }

    .bbr-hero-badge {
        font-size: 10px;
        gap: 8px;
        padding: 7px 12px;
        margin-bottom: 25px;
    }

    .bbr-badge-icon {
        width: 28px;
        height: 28px;
    }

    .bbr-hero-title {
        font-size: clamp(29px, 8vw, 43px);
        letter-spacing: -1px;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .bbr-hero-description {
        font-size: 13px;
        line-height: 2;
        margin-bottom: 28px;
    }

    .bbr-hero-actions {
        width: 100%;
        gap: 12px;
    }

    .bbr-btn {
        width: 100%;
        min-height: 52px;
        font-size: 13px;
    }

    .bbr-hero-features {
        gap: 12px;
        margin-top: 35px;
    }

    .bbr-feature {
        font-size: 11px;
        gap: 8px;
    }

    .bbr-feature-icon {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .bbr-feature-separator {
        display: none;
    }

    .bbr-hero-bottom {
        left: 20px;
        right: 20px;
        bottom: 22px;
    }

    .bbr-hero-bottom > span {
        font-size: 8px;
        letter-spacing: 1px;
    }

    .bbr-scroll-link {
        font-size: 10px;
    }

    .bbr-glow-blue,
    .bbr-glow-yellow {
        width: 220px;
        height: 220px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .bbr-hero-badge,
    .bbr-hero-title,
    .bbr-hero-description,
    .bbr-hero-actions,
    .bbr-hero-features {
        opacity: 1;
        transform: none;
    }
}

 
.bbr-about-section {
    position: relative;
    padding: 110px 0 100px;
    background: var(--dark, #05080D);
    color: var(--white, #F5F7FA);
    overflow: hidden;
    isolation: isolate;
}

.bbr-about-container {
    position: relative;
    z-index: 2;
    padding-inline: 4%;
    max-width: 1800px;
    margin: auto;
}

.bbr-about-glow {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: 0.12;
    pointer-events: none;
    z-index: -1;
}

.bbr-about-glow-blue {
    top: 10%;
    left: -200px;
    background: var(--primary, #00BFFF);
}

.bbr-about-glow-yellow {
    bottom: -200px;
    right: -200px;
    background: var(--secondary, #FFE500);
}

.bbr-about-heading {
    margin-bottom: 55px;
}

.bbr-about-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary, #00BFFF);
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
}

.bbr-about-eyebrow-line {
    width: 30px;
    height: 2px;
    background: var(--secondary, #FFE500);
}

.bbr-about-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary, #FFE500);
}

.bbr-about-title {
    max-width: 1320px;
    color: var(--white);
    font-size: clamp(28px, 3.25vw, 43px);
    font-weight: 800;
    line-height: 1.8;
    letter-spacing: -1.3px;
    margin-bottom: 30px;
}

.bbr-about-title strong {
    color: var(--primary);
    font-weight: 800;
}

.bbr-about-title .bbr-about-title-accent {
    color: var(--primary, #00BFFF);
}

.bbr-about-heading-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
}

.bbr-about-intro {
    max-width: 770px;
    color: var(--white, #fff);
    font-size: 16px;
    line-height: 2.2;
    margin: 0;
}

.bbr-about-more-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    background: var(--primary, #00BFFF);
    color: #05080D;
    border-radius: 12px;
    padding: 8px 8px 8px 22px;
    font-size: 14px;
    font-weight: 900;
    transition: all .35s ease;
}

.bbr-about-more-btn > span {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(5,8,13,.12);
    border-radius: 9px;
    transition: all .35s ease;
}

.bbr-about-more-btn:hover {
    color: #05080D;
    background: var(--secondary, #FFE500);
    transform: translateY(-4px);
}

.bbr-about-more-btn:hover > span {
    transform: rotate(-45deg);
}

.bbr-about-main-row {
    align-items: stretch;
}

.bbr-about-visual {
    position: relative;
    min-height: 620px;
    height: 100%;
    border-radius: 24px;
    overflow: hidden;
    background: #101C2B;
    border: 1px solid rgba(255,255,255,.08);
}

.bbr-about-image-wrap,
.bbr-about-image-wrap img,
.bbr-about-image-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bbr-about-image-wrap {
    overflow: hidden;
}

.bbr-about-image-wrap img {
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.bbr-about-visual:hover .bbr-about-image-wrap img {
    transform: scale(1.055);
}

.bbr-about-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(2,8,16,.28) 0%,
            rgba(2,8,16,.03) 35%,
            rgba(2,8,16,.25) 60%,
            rgba(2,8,16,.88) 100%
        );
    pointer-events: none;
}

.bbr-about-image-top {
    position: absolute;
    top: 28px;
    right: 28px;
    left: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    z-index: 2;
}

.bbr-about-image-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 17px;
    border-radius: 50px;
    background: rgba(5,8,13,.5);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bbr-about-image-label i {
    color: var(--secondary, #FFE500);
    font-size: 7px;
}

.bbr-about-image-symbol {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--secondary, #FFE500);
    color: #05080D;
    border-radius: 12px;
    font-size: 19px;
    box-shadow: 0 8px 30px rgba(255,229,0,.2);
}

.bbr-about-progress-card {
    position: absolute;
    bottom: 35px;
    right: 35px;
    width: min(390px, calc(100% - 70px));
    padding: 25px;
    border-radius: 19px;
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(12,30,45,.72);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    z-index: 3;
    transition: transform .4s ease;
}

.bbr-about-visual:hover .bbr-about-progress-card {
    transform: translateY(-8px);
}

.bbr-about-progress-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
}

.bbr-about-progress-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary, #00BFFF);
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 10px;
}

.bbr-about-progress-header h3 {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    margin: 0;
}

.bbr-about-progress-logo {
    font-size: 17px;
    font-weight: 900;
    color: #fff;
    direction: ltr;
}

.bbr-about-progress-logo span {
    color: var(--secondary, #FFE500);
}

.bbr-about-progress-item {
    margin-bottom: 18px;
}

.bbr-about-progress-item:last-child {
    margin-bottom: 0;
}

.bbr-about-progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 9px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.bbr-about-progress-info span:last-child {
    color: var(--primary, #00BFFF);
    font-size: 11px;
}

.bbr-about-progress-track {
    width: 100%;
    height: 5px;
    border-radius: 10px;
    background: rgba(255,255,255,.2);
    overflow: hidden;
    direction: rtl;
}

.bbr-about-progress-track > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--secondary, #FFE500),
        var(--primary, #00BFFF)
    );
    transition: width 1.3s cubic-bezier(.2,.7,.2,1);
}

.bbr-about-image-caption {
    position: absolute;
    bottom: 45px;
    left: 30px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255,255,255,.85);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    writing-mode: vertical-rl;
    z-index: 2;
}

.bbr-about-caption-line {
    width: 2px;
    height: 45px;
    background: var(--secondary, #FFE500);
}

.bbr-about-cards {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 20px;
    height: 100%;
}

.bbr-about-info-card {
    position: relative;
    min-height: 185px;
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(
        145deg,
        rgba(11,32,45,.85),
        rgba(5,19,29,.9)
    );
    border: 1px solid rgba(0,191,255,.23);
    border-radius: 18px;
    overflow: hidden;
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.bbr-about-info-card::before {
    content: "";
    position: absolute;
    width: 150px;
    height: 150px;
    top: -100px;
    left: -90px;
    border-radius: 50%;
    background: var(--primary, #00BFFF);
    filter: blur(80px);
    opacity: 0;
    transition: opacity .4s ease;
}

.bbr-about-info-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary, #00BFFF);
    box-shadow: 0 15px 45px rgba(0,191,255,.08);
}

.bbr-about-info-card:hover::before {
    opacity: .2;
}

.bbr-about-card-featured {
    border-color: rgba(255,229,0,.3);
    background: linear-gradient(
        145deg,
        rgba(31,34,24,.8),
        rgba(12,22,28,.95)
    );
}

.bbr-about-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.bbr-about-card-icon {
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,191,255,.1);
    border: 1px solid rgba(0,191,255,.2);
    border-radius: 11px;
    color: var(--primary, #00BFFF);
    font-size: 18px;
}

.bbr-about-card-featured .bbr-about-card-icon {
    background: rgba(255,229,0,.1);
    border-color: rgba(255,229,0,.25);
    color: var(--secondary, #FFE500);
}

.bbr-about-card-index {
    font-size: 11px;
    color: rgba(255,255,255,.4);
    font-weight: 800;
    letter-spacing: 1px;
}

.bbr-about-card-content {
    position: relative;
    z-index: 2;
    padding-left: 25px;
}

.bbr-about-card-content h3 {
    font-size: clamp(18px, 1.45vw, 24px);
    color: #fff;
    font-weight: 900;
    margin-bottom: 10px;
}

.bbr-about-card-content p {
    font-size: 12px;
    line-height: 1.9;
    color: var(--muted, #9CAAB9);
    margin: 0;
    max-width: 350px;
}

.bbr-about-card-arrow {
    position: absolute;
    left: 25px;
    bottom: 25px;
    color: var(--primary, #00BFFF);
    font-size: 16px;
    opacity: .6;
    transition: all .35s ease;
}

.bbr-about-info-card:hover .bbr-about-card-arrow {
    opacity: 1;
    transform: translate(-4px, -4px);
}

.bbr-about-bottom-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-top: 30px;
    padding: 26px 32px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
}

.bbr-about-bottom-text {
    display: flex;
    align-items: center;
    gap: 18px;
}

.bbr-about-bottom-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255,229,0,.1);
    color: var(--secondary, #FFE500);
    font-size: 20px;
}

.bbr-about-bottom-text p {
    color: var(--muted, #9CAAB9);
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
}

.bbr-about-bottom-text strong {
    color: #fff;
    font-weight: 900;
}

.bbr-about-bottom-strip > a {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    flex-shrink: 0;
    color: var(--primary, #00BFFF);
    font-size: 13px;
    font-weight: 900;
    transition: all .3s ease;
}

.bbr-about-bottom-strip > a:hover {
    color: var(--secondary, #FFE500);
    gap: 20px;
}

[data-bbr-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

[data-bbr-reveal].bbr-revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1199px) {
    .bbr-about-title {
        font-size: clamp(27px, 3.5vw, 43px);
    }

    .bbr-about-visual {
        min-height: 600px;
    }

    .bbr-about-info-card {
        padding: 22px;
    }

    .bbr-about-card-content h3 {
        font-size: 19px;
    }
}

@media (max-width: 991px) {
    .bbr-about-section {
        padding: 80px 0;
    }

    .bbr-about-container {
        padding-inline: 5%;
    }

    .bbr-about-heading-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 25px;
    }

    .bbr-about-visual {
        height: 570px;
        min-height: 570px;
    }

    .bbr-about-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 15px;
    }

    .bbr-about-info-card {
        min-height: 260px;
    }

    .bbr-about-card-content {
        padding-left: 0;
    }

    .bbr-about-card-content h3 {
        font-size: 18px;
    }

    .bbr-about-card-arrow {
        bottom: 15px;
        left: 15px;
    }
}

@media (max-width: 767px) {
    .bbr-about-section {
        padding: 65px 0;
    }

    .bbr-about-title {
        font-size: clamp(26px, 5vw, 35px);
        line-height: 1.8;
        letter-spacing: -.5px;
    }

    .bbr-about-intro {
        font-size: 13px;
    }

    .bbr-about-heading {
        margin-bottom: 35px;
    }

    .bbr-about-visual {
        height: 520px;
        min-height: 520px;
        border-radius: 18px;
    }

    .bbr-about-cards {
        grid-template-columns: 1fr;
    }

    .bbr-about-info-card {
        min-height: 185px;
    }

    .bbr-about-bottom-strip {
        align-items: flex-start;
        flex-direction: column;
        padding: 23px;
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .bbr-about-container {
        padding-inline: 18px;
    }

    .bbr-about-eyebrow {
        font-size: 12px;
    }

    .bbr-about-title {
        font-size: 26px;
        line-height: 1.85;
    }

    .bbr-about-more-btn {
        font-size: 12px;
    }

    .bbr-about-visual {
        height: 480px;
        min-height: 480px;
    }

    .bbr-about-image-top {
        top: 16px;
        right: 16px;
        left: 16px;
    }

    .bbr-about-image-label {
        font-size: 9px;
        padding: 10px 12px;
    }

    .bbr-about-image-symbol {
        width: 37px;
        height: 37px;
        font-size: 15px;
    }

    .bbr-about-progress-card {
        right: 15px;
        bottom: 20px;
        width: calc(100% - 30px);
        padding: 19px;
    }

    .bbr-about-progress-header h3 {
        font-size: 15px;
    }

    .bbr-about-progress-info {
        font-size: 11px;
    }

    .bbr-about-image-caption {
        display: none;
    }

    .bbr-about-bottom-text {
        align-items: flex-start;
    }

    .bbr-about-bottom-text p {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-bbr-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bbr-about-progress-track > span {
        transition: none;
    }
}

.bbr-services-section {
    position: relative;
    padding: 110px 0;
    background: #05080D;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.bbr-services-background,
.bbr-services-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bbr-services-background {
    z-index: -5;
    background-image: url("../assets/services.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bbr-services-overlay {
    z-index: -4;
    background:
        linear-gradient(
            180deg,
            rgba(2, 8, 16, 0.90) 0%,
            rgba(2, 12, 22, 0.84) 45%,
            rgba(2, 8, 16, 0.94) 100%
        ),
        linear-gradient(
            90deg,
            rgba(0, 191, 255, 0.07),
            transparent 45%,
            rgba(255, 229, 0, 0.04)
        );
}

.bbr-services-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(140px);
    opacity: .12;
    z-index: -3;
    pointer-events: none;
}

.bbr-services-glow-blue {
    top: 15%;
    right: -250px;
    background: var(--primary, #00BFFF);
}

.bbr-services-glow-yellow {
    bottom: 5%;
    left: -250px;
    background: var(--secondary, #FFE500);
}

.bbr-services-container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
}

.bbr-services-heading {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 60px;
}

.bbr-services-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 13px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 22px;
}

.bbr-services-line {
    width: 35px;
    height: 2px;
    background: var(--secondary, #FFE500);
}

.bbr-services-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary, #FFE500);
}

.bbr-services-english {
    color: var(--primary, #00BFFF);
    font-size: 12px;
    letter-spacing: 1.5px;
}

.bbr-services-title {
    color: #fff;
    font-size: clamp(32px, 4.3vw, 38px);
    font-weight: 900;
    line-height: 1.55;
    margin-bottom: 20px;
    letter-spacing: -1px;
}

.bbr-services-title span {
     color: var(--primary, #00BFFF);
}

.bbr-services-description {
    max-width: 690px;
    margin: 0 auto;
    color: #B2C3D0;
    font-size: 15px;
    line-height: 2.1;
}

.bbr-services-grid {
    align-items: stretch;
}

.bbr-services-grid > div {
    display: flex;
}

.bbr-service-card {
    --service-accent: #00BFFF;
    --service-rgb: 0, 191, 255;

    position: relative;
    width: 100%;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    padding: 30px 32px 0;
    background: linear-gradient(
        145deg,
        rgba(8, 29, 42, .82),
        rgba(3, 14, 24, .88)
    );
    border: 1px solid rgba(var(--service-rgb), .35);
    border-radius: 20px;
    overflow: hidden;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.bbr-service-yellow {
    --service-accent: #FFE500;
    --service-rgb: 255, 229, 0;
}

.bbr-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at top right,
        rgba(var(--service-rgb), .11),
        transparent 55%
    );
    opacity: .5;
    pointer-events: none;
    transition: opacity .4s ease;
}

.bbr-service-card::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 3px;
    background: var(--service-accent);
    transition: width .5s ease;
}

.bbr-service-card:hover {
    transform: translateY(-8px);
    border-color: rgba(var(--service-rgb), .8);
    box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}

.bbr-service-card:hover::before {
    opacity: 1;
}

.bbr-service-card:hover::after {
    width: 100%;
}

.bbr-service-card-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.bbr-service-icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--service-accent);
    background: rgba(var(--service-rgb), .10);
    border: 1px solid rgba(var(--service-rgb), .45);
    border-radius: 15px;
    font-size: 26px;
    box-shadow: inset 0 0 20px rgba(var(--service-rgb), .05);
    transition: all .4s ease;
}

.bbr-service-card:hover .bbr-service-icon {
    background: var(--service-accent);
    color: #05080D;
    transform: rotate(-7deg) scale(1.07);
}

.bbr-service-number {
    color: rgba(255, 255, 255, .18);
    font-size: 55px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -3px;
    font-family: Arial, sans-serif;
}

.bbr-service-card-content {
    position: relative;
    z-index: 1;
    flex: 1;
}

.bbr-service-card-content h3 {
    color: #fff;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 900;
    margin-bottom: 15px;
    transition: color .3s ease;
}

.bbr-service-card:hover .bbr-service-card-content h3 {
    color: var(--service-accent);
}

.bbr-service-card-content p {
    color: #B3C2CE;
    font-size: 14px;
    line-height: 2;
    max-width: 470px;
    margin-bottom: 23px;
}

.bbr-service-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 27px;
    direction: ltr;
    justify-content: flex-end;
}

.bbr-service-tags span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 13px;
    border: 1px solid rgba(var(--service-rgb), .25);
    background: rgba(var(--service-rgb), .06);
    color: var(--service-accent);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
    transition: all .3s ease;
}

.bbr-service-card:hover .bbr-service-tags span {
    border-color: rgba(var(--service-rgb), .55);
    background: rgba(var(--service-rgb), .1);
}

.bbr-service-card-footer {
    position: relative;
    z-index: 1;
    min-height: 73px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 0 -32px;
    padding: 15px 32px;
    border-top: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .025);
}

.bbr-service-link {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    transition: all .3s ease;
}

.bbr-service-link i {
    color: var(--service-accent);
    transition: transform .3s ease;
}

.bbr-service-link:hover {
    color: var(--service-accent);
}

.bbr-service-link:hover i {
    transform: translateX(-5px);
}

.bbr-service-footer-icon {
    color: rgba(var(--service-rgb), .45);
    font-size: 21px;
    transition: all .3s ease;
}

.bbr-service-card:hover .bbr-service-footer-icon {
    color: var(--service-accent);
    transform: scale(1.15);
}

.bbr-services-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    margin-top: 35px;
    padding: 35px 42px;
    border-radius: 20px;
    border: 1px solid rgba(0, 191, 255, .35);
    background: linear-gradient(
        110deg,
        rgba(5, 27, 40, .95),
        rgba(5, 13, 23, .96)
    );
    overflow: hidden;
    box-shadow: 0 15px 50px rgba(0, 0, 0, .2);
}

.bbr-services-cta::before {
    content: "";
    position: absolute;
    top: -130px;
    right: -130px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--primary, #00BFFF);
    filter: blur(120px);
    opacity: .2;
    pointer-events: none;
}

.bbr-services-cta::after {
    content: "";
    position: absolute;
    bottom: -150px;
    left: -120px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: var(--secondary, #FFE500);
    filter: blur(120px);
    opacity: .13;
    pointer-events: none;
}

.bbr-services-cta-decoration {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 220px;
    opacity: .14;
    background-image:
        linear-gradient(45deg, #00BFFF 1px, transparent 1px),
        linear-gradient(-45deg, #00BFFF 1px, transparent 1px);
    background-size: 35px 35px;
    pointer-events: none;
}

.bbr-services-cta-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 25px;
}

.bbr-services-cta-icon {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary, #FFE500);
    background: rgba(255, 229, 0, .07);
    border: 2px solid var(--secondary, #FFE500);
    border-radius: 50%;
    font-size: 31px;
    box-shadow: 0 0 25px rgba(255, 229, 0, .15);
}

.bbr-services-cta-text > span {
    display: block;
    color: var(--primary, #00BFFF);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.bbr-services-cta-text h3 {
    color: #fff;
    font-size: clamp(22px, 2.5vw, 31px);
    font-weight: 900;
    margin-bottom: 10px;
}

.bbr-services-cta-text p {
    color: #B2C3D0;
    font-size: 13px;
    line-height: 1.9;
    margin: 0;
}

.bbr-services-cta-button {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-shrink: 0;
    padding: 17px 27px;
    border-radius: 10px;
    background: var(--secondary, #FFE500);
    color: #05080D;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 10px 35px rgba(255, 229, 0, .12);
    transition: all .35s ease;
}

.bbr-services-cta-button:hover {
    color: #05080D;
    background: var(--primary, #00BFFF);
    transform: translateY(-4px);
}

.bbr-services-cta-button i {
    transition: transform .3s ease;
}

.bbr-services-cta-button:hover i {
    transform: translateX(-5px);
}

[data-bbr-service-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2, .7, .2, 1);
}

[data-bbr-service-reveal].bbr-service-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .bbr-services-section {
        padding: 85px 0;
    }

    .bbr-services-heading {
        margin-bottom: 45px;
    }

    .bbr-service-card {
        min-height: 340px;
    }

    .bbr-services-cta {
        padding: 30px;
    }

    .bbr-services-cta-content {
        gap: 18px;
    }

    .bbr-services-cta-icon {
        width: 65px;
        height: 65px;
        font-size: 25px;
    }
}

@media (max-width: 767px) {
    .bbr-services-section {
        padding: 70px 0;
    }

    .bbr-services-title {
        font-size: clamp(29px, 6vw, 42px);
    }

    .bbr-services-description {
        font-size: 13px;
    }

    .bbr-services-cta {
        flex-direction: column;
        align-items: stretch;
        gap: 25px;
    }

    .bbr-services-cta-button {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .bbr-services-section {
        padding: 60px 0;
    }

    .bbr-services-container {
        padding-inline: 18px;
    }

    .bbr-services-heading {
        margin-bottom: 35px;
    }

    .bbr-services-eyebrow {
        font-size: 12px;
    }

    .bbr-services-title {
        font-size: 29px;
        line-height: 1.7;
    }

    .bbr-service-card {
        padding: 24px 22px 0;
        min-height: 330px;
        border-radius: 16px;
    }

    .bbr-service-icon {
        width: 52px;
        height: 52px;
        font-size: 21px;
    }

    .bbr-service-number {
        font-size: 45px;
    }

    .bbr-service-card-top {
        margin-bottom: 25px;
    }

    .bbr-service-card-content h3 {
        font-size: 21px;
    }

    .bbr-service-card-content p {
        font-size: 12px;
    }

    .bbr-service-tags {
        gap: 7px;
    }

    .bbr-service-tags span {
        font-size: 10px;
        padding: 6px 10px;
    }

    .bbr-service-card-footer {
        margin-inline: -22px;
        padding-inline: 22px;
    }

    .bbr-services-cta {
        padding: 25px 20px;
        border-radius: 16px;
    }

    .bbr-services-cta-content {
        align-items: flex-start;
        gap: 15px;
    }

    .bbr-services-cta-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .bbr-services-cta-text h3 {
        font-size: 22px;
    }

    .bbr-services-cta-text p {
        font-size: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-bbr-service-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bbr-service-card,
    .bbr-service-icon,
    .bbr-service-link,
    .bbr-services-cta-button {
        transition: none;
    }
}

.bbr-why-section {
    position: relative;
    padding: 110px 0;
    background: var(--dark, #05080D);
    color: var(--white, #F5F7FA);
    overflow: hidden;
    isolation: isolate;
}

.bbr-why-container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
}

.bbr-why-glow {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: .1;
    pointer-events: none;
    z-index: -1;
}

.bbr-why-glow-blue {
    top: 5%;
    right: -200px;
    background: var(--primary, #00BFFF);
}

.bbr-why-glow-yellow {
    bottom: -200px;
    left: -200px;
    background: var(--secondary, #FFE500);
}

.bbr-why-left {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 45px;
}

.bbr-why-heading {
    max-width: 620px;
}

.bbr-why-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    color: var(--primary, #00BFFF);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 24px;
}

.bbr-why-eyebrow-line {
    width: 30px;
    height: 2px;
    background: var(--secondary, #FFE500);
}

.bbr-why-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary, #FFE500);
}

.bbr-why-eyebrow-en {
    color: #91A9B9;
    font-size: 11px;
    letter-spacing: 1px;
}

.bbr-why-heading h2 {
    color: #fff;
    font-size: clamp(32px, 3.6vw, 50px);
    font-weight: 900;
    line-height: 1.6;
    letter-spacing: -1px;
    margin-bottom: 22px;
}

.bbr-why-heading h2 span {
    display: block;
    color: var(--primary, #00BFFF);
}

.bbr-why-heading > p {
    color: var(--muted, #9CAAB9);
    font-size: 15px;
    line-height: 2.15;
    margin-bottom: 28px;
}

.bbr-why-main-btn {
    display: inline-flex;
    align-items: center;
    gap: 22px;
    padding: 8px 20px 8px 8px;
    background: var(--primary, #00BFFF);
    color: #05080D;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    transition: all .35s ease;
}

.bbr-why-main-btn > span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: rgba(5, 8, 13, .12);
    transition: transform .35s ease;
}

.bbr-why-main-btn:hover {
    background: var(--secondary, #FFE500);
    color: #05080D;
    transform: translateY(-4px);
}

.bbr-why-main-btn:hover > span {
    transform: translateX(-4px);
}

.bbr-why-visual {
    position: relative;
    flex: 1;
    min-height: 350px;
    border-radius: 22px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.12);
    background: #0A1B2A;
}

.bbr-why-image,
.bbr-why-image img,
.bbr-why-image-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.bbr-why-image img {
    object-fit: cover;
    object-position: center;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.bbr-why-visual:hover .bbr-why-image img {
    transform: scale(1.06);
}

.bbr-why-image-overlay {
    background: linear-gradient(
        180deg,
        rgba(3,10,18,.25) 0%,
        rgba(3,10,18,.08) 40%,
        rgba(3,10,18,.85) 100%
    );
    pointer-events: none;
}

.bbr-why-image-top {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 2;
}

.bbr-why-image-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 50px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(5,8,13,.5);
    backdrop-filter: blur(12px);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
}

.bbr-why-image-badge i {
    color: var(--secondary, #FFE500);
    font-size: 7px;
}

.bbr-why-image-bottom {
    position: absolute;
     left: 28px;
    bottom: 28px;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
}

.bbr-why-video-trigger {
    display: flex;
    align-items: center;
    gap: 17px;
}

.bbr-why-play-btn {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--primary, #00BFFF);
    color: #05080D;
    font-size: 20px;
    cursor: pointer;
    transition: all .35s ease;
}

.bbr-why-play-btn::before {
    content: "";
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(0,191,255,.5);
    border-radius: 50%;
    animation: bbrWhyPulse 2.5s ease-in-out infinite;
}

.bbr-why-play-btn:hover {
    background: var(--secondary, #FFE500);
    transform: scale(1.08);
}

.bbr-why-video-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bbr-why-video-label > span {
    color: #fff;
    font-size: 14px;
    font-weight: 900;
}

.bbr-why-video-label small {
    color: #C0CED8;
    font-size: 11px;
}

.bbr-why-image-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    color: var(--secondary, #FFE500);
    font-size: 18px;
}

.bbr-why-cards {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 20px;
    height: 100%;
}

.bbr-why-card {
    --why-accent: #00BFFF;
    --why-rgb: 0, 191, 255;

    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 240px;
    padding: 28px 30px;
    background: linear-gradient(
        145deg,
        rgba(9,30,42,.8),
        rgba(4,17,27,.95)
    );
    border: 1px solid rgba(var(--why-rgb), .3);
    border-radius: 20px;
    overflow: hidden;
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.bbr-why-card-yellow {
    --why-accent: #FFE500;
    --why-rgb: 255, 229, 0;
}

.bbr-why-card::before {
    content: "";
    position: absolute;
    width: 170px;
    height: 170px;
    top: -120px;
    left: -90px;
    border-radius: 50%;
    background: var(--why-accent);
    filter: blur(80px);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.bbr-why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--why-rgb), .8);
    box-shadow: 0 20px 50px rgba(0,0,0,.2);
}

.bbr-why-card:hover::before {
    opacity: .2;
}

.bbr-why-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.bbr-why-card-number {
    color: rgba(255,255,255,.35);
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.bbr-why-card-icon {
    width: 57px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    border: 1px solid rgba(var(--why-rgb), .4);
    background: rgba(var(--why-rgb), .1);
    color: var(--why-accent);
    font-size: 23px;
    transition: all .35s ease;
}

.bbr-why-card:hover .bbr-why-card-icon {
    background: var(--why-accent);
    color: #05080D;
    transform: rotate(-6deg);
}

.bbr-why-card-content {
    position: relative;
    z-index: 2;
}

.bbr-why-card-content h3 {
    color: #fff;
    font-size: clamp(20px, 1.7vw, 25px);
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 12px;
}

.bbr-why-card-content p {
    color: var(--muted, #9CAAB9);
    font-size: 13px;
    line-height: 2;
    margin: 0;
}

.bbr-why-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
    padding-top: 17px;
    border-top: 1px solid rgba(255,255,255,.1);
}

.bbr-why-card-bottom span {
    color: var(--why-accent);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.bbr-why-card-bottom i {
    color: var(--why-accent);
    font-size: 14px;
}

.bbr-why-video-modal .modal-content {
    background: #07131E;
    border: 1px solid rgba(0,191,255,.3);
    border-radius: 18px;
    overflow: hidden;
}

.bbr-why-video-modal .modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.bbr-why-video-modal .modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 900;
}

.bbr-why-video-modal .modal-body {
    padding: 0;
}

.bbr-why-video-modal iframe {
    border: 0;
}

@keyframes bbrWhyPulse {
    0%, 100% {
        transform: scale(1);
        opacity: .7;
    }

    50% {
        transform: scale(1.12);
        opacity: .2;
    }
}

[data-bbr-why-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

[data-bbr-why-reveal].bbr-why-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 1199px) {
    .bbr-why-card {
        padding: 24px;
    }

    .bbr-why-card-content h3 {
        font-size: 21px;
    }
}

@media (max-width: 991px) {
    .bbr-why-section {
        padding: 80px 0;
    }

    .bbr-why-left {
        gap: 35px;
    }

    .bbr-why-heading {
        max-width: 100%;
    }

    .bbr-why-visual {
        min-height: 430px;
        flex: auto;
    }

    .bbr-why-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto;
        gap: 15px;
    }

    .bbr-why-card {
        min-height: 330px;
        padding: 22px;
    }

    .bbr-why-card-content h3 {
        font-size: 19px;
    }

    .bbr-why-card-content p {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .bbr-why-section {
        padding: 65px 0;
    }

    .bbr-why-heading h2 {
        font-size: clamp(30px, 6vw, 40px);
    }

    .bbr-why-cards {
        grid-template-columns: 1fr;
    }

    .bbr-why-card {
        min-height: 230px;
    }

    .bbr-why-visual {
        min-height: 380px;
    }
}

@media (max-width: 575px) {
    .bbr-why-section {
        padding: 60px 0;
    }

    .bbr-why-container {
        padding-inline: 18px;
    }

    .bbr-why-heading h2 {
        font-size: 29px;
    }

    .bbr-why-heading > p {
        font-size: 13px;
    }

    .bbr-why-visual {
        min-height: 340px;
        border-radius: 17px;
    }

    .bbr-why-image-top {
        top: 15px;
        right: 15px;
    }

    .bbr-why-image-bottom {
        right: 18px;
        left: 18px;
        bottom: 20px;
    }

    .bbr-why-play-btn {
        width: 52px;
        height: 52px;
        font-size: 16px;
    }

    .bbr-why-video-label > span {
        font-size: 12px;
    }

    .bbr-why-video-label small {
        font-size: 10px;
    }

    .bbr-why-card {
        padding: 24px 22px;
    }

    .bbr-why-card-icon {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }

    .bbr-why-card-content h3 {
        font-size: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-bbr-why-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bbr-why-play-btn::before {
        animation: none;
    }
}

.bbr-process-section {
    position: relative;
    padding: 120px 0;
    background: var(--dark, #05080D);
    color: var(--white, #F5F7FA);
    overflow: hidden;
    isolation: isolate;
}

.bbr-process-container {
    position: relative;
    z-index: 2;
    max-width: 1250px;
}

.bbr-process-grid-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: .12;
    background-image:
        linear-gradient(rgba(0,191,255,.16) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,191,255,.16) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: linear-gradient(
        to bottom,
        transparent,
        black 20%,
        black 80%,
        transparent
    );
    pointer-events: none;
}

.bbr-process-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: .12;
    z-index: -1;
    pointer-events: none;
}

.bbr-process-glow-blue {
    top: 20%;
    right: -250px;
    background: var(--primary, #00BFFF);
}

.bbr-process-glow-yellow {
    bottom: 10%;
    left: -250px;
    background: var(--secondary, #FFE500);
}

.bbr-process-heading {
    max-width: 850px;
    margin: 0 auto 90px;
    text-align: center;
}

.bbr-process-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    color: var(--primary, #00BFFF);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 22px;
}

.bbr-process-eyebrow-line {
    width: 35px;
    height: 2px;
    background: var(--secondary, #FFE500);
}

.bbr-process-eyebrow-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--secondary, #FFE500);
}

.bbr-process-eyebrow-en {
    color: #9CAAB9;
    font-size: 11px;
    letter-spacing: 1.5px;
}

.bbr-process-heading h2 {
    color: #fff;
    font-size: clamp(32px, 4.2vw, 55px);
    font-weight: 900;
    line-height: 1.65;
    margin-bottom: 20px;
}

.bbr-process-heading h2 span {
    display: block;
    color: var(--primary, #00BFFF);
}

.bbr-process-heading p {
    max-width: 690px;
    margin: auto;
    color: var(--muted, #9CAAB9);
    font-size: 15px;
    line-height: 2.1;
}

.bbr-process-timeline {
    position: relative;
    padding: 15px 0;
}

.bbr-process-track {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 50%;
    width: 3px;
    transform: translateX(50%);
    background: rgba(255,255,255,.1);
    border-radius: 10px;
    overflow: hidden;
}

.bbr-process-track-progress {
    display: block;
    width: 100%;
    height: 0;
    background: linear-gradient(
        180deg,
        var(--primary, #00BFFF),
        var(--secondary, #FFE500),
        var(--primary, #00BFFF)
    );
    box-shadow: 0 0 20px rgba(0,191,255,.5);
    border-radius: inherit;
    transition: height .12s linear;
}

.bbr-process-step {
    --process-accent: #00BFFF;
    --process-rgb: 0, 191, 255;

    position: relative;
    display: flex;
    width: 100%;
    margin-bottom: 55px;
}

.bbr-process-step:last-child {
    margin-bottom: 0;
}

.bbr-process-step-yellow {
    --process-accent: #FFE500;
    --process-rgb: 255, 229, 0;
}

.bbr-process-step:nth-of-type(even) {
    justify-content: flex-end;
}

.bbr-process-step:nth-of-type(odd) {
    justify-content: flex-start;
}

.bbr-process-marker {
    position: absolute;
    top: 40px;
    right: 50%;
    transform: translateX(50%);
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--process-accent);
    border-radius: 50%;
    background: #071521;
    color: var(--process-accent);
    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 900;
    box-shadow: 0 0 25px rgba(var(--process-rgb), .16);
    z-index: 3;
    transition: all .4s ease;
}

.bbr-process-step:hover .bbr-process-marker {
    background: var(--process-accent);
    color: #05080D;
    box-shadow: 0 0 35px rgba(var(--process-rgb), .35);
}

.bbr-process-step-content {
    position: relative;
    width: calc(50% - 65px);
    padding: 30px;
    background: linear-gradient(
        145deg,
        rgba(12,32,45,.9),
        rgba(5,17,27,.95)
    );
    border: 1px solid rgba(var(--process-rgb), .3);
    border-radius: 20px;
    overflow: hidden;
    transition:
        transform .4s ease,
        border-color .4s ease,
        box-shadow .4s ease;
}

.bbr-process-step-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 3px;
    background: var(--process-accent);
    transition: width .5s ease;
}

.bbr-process-step-content::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    top: -130px;
    left: -100px;
    border-radius: 50%;
    background: var(--process-accent);
    filter: blur(80px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
}

.bbr-process-step:hover .bbr-process-step-content {
    transform: translateY(-7px);
    border-color: rgba(var(--process-rgb), .8);
    box-shadow: 0 20px 55px rgba(0,0,0,.25);
}

.bbr-process-step:hover .bbr-process-step-content::before {
    width: 100%;
}

.bbr-process-step:hover .bbr-process-step-content::after {
    opacity: .2;
}

.bbr-process-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 25px;
}

.bbr-process-step-label {
    color: var(--process-accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
}

.bbr-process-step-icon {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--process-rgb), .1);
    border: 1px solid rgba(var(--process-rgb), .3);
    border-radius: 13px;
    color: var(--process-accent);
    font-size: 22px;
    transition: all .35s ease;
}

.bbr-process-step:hover .bbr-process-step-icon {
    background: var(--process-accent);
    color: #05080D;
    transform: rotate(-7deg);
}

.bbr-process-step-content h3 {
    color: #fff;
    font-size: clamp(21px, 2vw, 26px);
    font-weight: 900;
    margin-bottom: 15px;
    line-height: 1.5;
}

.bbr-process-step-content p {
    color: var(--muted, #9CAAB9);
    font-size: 13px;
    line-height: 2.1;
    margin-bottom: 22px;
}

.bbr-process-step-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

.bbr-process-step-tags span {
    padding: 7px 13px;
    background: rgba(var(--process-rgb), .07);
    border: 1px solid rgba(var(--process-rgb), .25);
    border-radius: 50px;
    color: var(--process-accent);
    font-size: 11px;
    font-weight: 700;
}

.bbr-process-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 90px;
    padding: 35px 40px;
    border: 1px solid rgba(0,191,255,.3);
    border-radius: 20px;
    background: linear-gradient(
        110deg,
        rgba(8,30,43,.95),
        rgba(4,14,24,.95)
    );
    overflow: hidden;
}

.bbr-process-bottom::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    right: -150px;
    top: -180px;
    border-radius: 50%;
    background: var(--primary, #00BFFF);
    filter: blur(100px);
    opacity: .15;
    pointer-events: none;
}

.bbr-process-bottom-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 22px;
}

.bbr-process-bottom-icon {
    width: 75px;
    height: 75px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--secondary, #FFE500);
    border-radius: 50%;
    background: rgba(255,229,0,.08);
    color: var(--secondary, #FFE500);
    font-size: 27px;
}

.bbr-process-bottom-content > div > span {
    display: block;
    color: var(--primary, #00BFFF);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.bbr-process-bottom-content h3 {
    color: #fff;
    font-size: clamp(21px, 2.3vw, 29px);
    font-weight: 900;
    margin-bottom: 10px;
}

.bbr-process-bottom-content p {
    color: var(--muted, #9CAAB9);
    font-size: 13px;
    margin: 0;
}

.bbr-process-cta {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-shrink: 0;
    padding: 17px 27px;
    border-radius: 10px;
    background: var(--secondary, #FFE500);
    color: #05080D;
    font-size: 14px;
    font-weight: 900;
    transition: all .35s ease;
}

.bbr-process-cta:hover {
    background: var(--primary, #00BFFF);
    color: #05080D;
    transform: translateY(-4px);
}

.bbr-process-cta i {
    transition: transform .3s ease;
}

.bbr-process-cta:hover i {
    transform: translateX(-5px);
}

[data-bbr-process-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

[data-bbr-process-reveal].bbr-process-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .bbr-process-section {
        padding: 85px 0;
    }

    .bbr-process-heading {
        margin-bottom: 65px;
    }

    .bbr-process-track {
        right: 29px;
        transform: none;
    }

    .bbr-process-step,
    .bbr-process-step:nth-of-type(even),
    .bbr-process-step:nth-of-type(odd) {
        justify-content: flex-start;
        padding-right: 85px;
    }

    .bbr-process-marker {
        right: 0;
        transform: none;
    }

    .bbr-process-step-content {
        width: 100%;
    }

    .bbr-process-bottom {
        margin-top: 65px;
    }
}

@media (max-width: 767px) {
    .bbr-process-section {
        padding: 70px 0;
    }

    .bbr-process-heading {
        margin-bottom: 50px;
    }

    .bbr-process-heading h2 {
        font-size: clamp(29px, 6vw, 40px);
    }

    .bbr-process-bottom {
        flex-direction: column;
        align-items: stretch;
        padding: 30px;
    }

    .bbr-process-cta {
        width: 100%;
    }
}

@media (max-width: 575px) {
    .bbr-process-section {
        padding: 60px 0;
    }

    .bbr-process-container {
        padding-inline: 18px;
    }

    .bbr-process-heading h2 {
        font-size: 28px;
    }

    .bbr-process-heading p {
        font-size: 13px;
    }

    .bbr-process-track {
        right: 21px;
        width: 2px;
    }

    .bbr-process-step,
    .bbr-process-step:nth-of-type(even),
    .bbr-process-step:nth-of-type(odd) {
        padding-right: 58px;
        margin-bottom: 30px;
    }

    .bbr-process-marker {
        width: 44px;
        height: 44px;
        top: 30px;
        font-size: 15px;
    }

    .bbr-process-step-content {
        padding: 22px;
        border-radius: 15px;
    }

    .bbr-process-step-top {
        margin-bottom: 20px;
    }

    .bbr-process-step-icon {
        width: 45px;
        height: 45px;
        font-size: 18px;
    }

    .bbr-process-step-content h3 {
        font-size: 20px;
    }

    .bbr-process-step-content p {
        font-size: 12px;
    }

    .bbr-process-step-tags span {
        font-size: 10px;
        padding: 6px 10px;
    }

    .bbr-process-bottom {
        padding: 24px 20px;
        border-radius: 16px;
    }

    .bbr-process-bottom-content {
        align-items: flex-start;
        gap: 15px;
    }

    .bbr-process-bottom-icon {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .bbr-process-bottom-content h3 {
        font-size: 20px;
    }

    .bbr-process-bottom-content p {
        font-size: 12px;
        line-height: 1.8;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-bbr-process-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bbr-process-track-progress {
        transition: none;
    }
}

.bbr-portfolio-section {
    position: relative;
    padding: 110px 0;
    background: var(--dark, #05080D);
    color: #fff;
    overflow: hidden;
    isolation: isolate;
}

.bbr-portfolio-container {
    position: relative;
    z-index: 2;
    max-width: 1320px;
}

.bbr-portfolio-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(150px);
    opacity: .09;
    pointer-events: none;
    z-index: -1;
}

.bbr-portfolio-glow-blue {
    top: 5%;
    right: -250px;
    background: var(--primary, #00BFFF);
}

.bbr-portfolio-glow-yellow {
    bottom: 0;
    left: -250px;
    background: var(--secondary, #FFE500);
}

.bbr-portfolio-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 35px;
    margin-bottom: 48px;
}

.bbr-portfolio-heading-content {
    max-width: 760px;
}

.bbr-portfolio-eyebrow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 11px;
    margin-bottom: 20px;
    color: var(--primary, #00BFFF);
    font-size: 13px;
    font-weight: 800;
}

.bbr-portfolio-eyebrow-line {
    width: 30px;
    height: 2px;
    background: var(--secondary, #FFE500);
}

.bbr-portfolio-eyebrow-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--secondary, #FFE500);
}

.bbr-portfolio-eyebrow span:last-child {
    color: #94A9B8;
    font-size: 11px;
    letter-spacing: 1.3px;
}

.bbr-portfolio-heading h2 {
    color: #fff;
    font-size: clamp(34px, 4.2vw, 58px);
    font-weight: 900;
    line-height: 1.45;
    margin-bottom: 15px;
}

.bbr-portfolio-heading h2 span {
    color: var(--primary, #00BFFF);
}

.bbr-portfolio-heading p {
    color: var(--muted, #9CAAB9);
    font-size: 15px;
    line-height: 2;
    margin: 0;
}

.bbr-portfolio-heading-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    flex-shrink: 0;
    padding: 15px 23px;
    background: var(--primary, #00BFFF);
    color: #05080D;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: all .35s ease;
}

.bbr-portfolio-heading-btn:hover {
    background: var(--secondary, #FFE500);
    color: #05080D;
    transform: translateY(-4px);
}


.bbr-portfolio-card {
    position: relative;
    display: block;
    min-width: 0;
    height: 430px;
    border-radius: 20px;
    overflow: hidden;
    background: #0B1B27;
    border: 1px solid rgba(255,255,255,.08);
    text-decoration: none;
    isolation: isolate;
    transition:
        border-color .4s ease,
        box-shadow .4s ease;
}

.bbr-portfolio-card-medium {
    grid-column: span 2;
}

.bbr-portfolio-card-large {
    grid-column: span 3;
}

.bbr-portfolio-card:hover {
    border-color: rgba(0,191,255,.7);
    box-shadow: 0 25px 60px rgba(0,0,0,.3);
}

.bbr-portfolio-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.bbr-portfolio-card:hover img {
    transform: scale(1.09);
}

.bbr-portfolio-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        180deg,
        rgba(2,9,17,.2) 0%,
        rgba(2,9,17,.05) 30%,
        rgba(2,9,17,.65) 65%,
        rgba(2,9,17,.97) 100%
    );
    transition: background .4s ease;
}

.bbr-portfolio-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
    pointer-events: none;
}

.bbr-portfolio-category {
    position: absolute;
    top: 23px;
    right: 23px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 9px 17px;
    background: rgba(255,255,255,.95);
    color: #07131E;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 900;
    backdrop-filter: blur(10px);
}

.bbr-portfolio-open {
    position: absolute;
    top: 23px;
    left: 23px;
    z-index: 3;
    width: 43px;
    height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary, #00BFFF);
    color: #05080D;
    border-radius: 12px;
    font-size: 15px;
    opacity: 0;
    transform: translateY(12px);
    transition: all .35s ease;
}

.bbr-portfolio-card:hover .bbr-portfolio-open,
.bbr-portfolio-card:focus-visible .bbr-portfolio-open {
    opacity: 1;
    transform: translateY(0);
}

.bbr-portfolio-card-content {
    position: absolute;
    right: 28px;
    left: 28px;
    bottom: 25px;
    z-index: 3;
    color: #fff;
    transition: transform .4s ease;
}

.bbr-portfolio-project-no {
    display: inline-block;
    margin-bottom: 11px;
    color: var(--secondary, #FFE500);
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
}

.bbr-portfolio-card-content h3 {
    color: #fff;
    font-size: clamp(21px, 2.1vw, 29px);
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 8px;
}

.bbr-portfolio-card-content p {
    color: #D4E0E8;
    font-size: 13px;
    line-height: 1.9;
    max-width: 480px;
    margin: 0;
}

.bbr-portfolio-view {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    color: var(--primary, #00BFFF);
    font-size: 12px;
    font-weight: 900;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(8px);
    transition: all .35s ease;
}

.bbr-portfolio-card:hover .bbr-portfolio-view,
.bbr-portfolio-card:focus-visible .bbr-portfolio-view {
    opacity: 1;
    max-height: 40px;
    transform: translateY(0);
}

.bbr-portfolio-view i {
    transition: transform .3s ease;
}

.bbr-portfolio-card:hover .bbr-portfolio-view i {
    transform: translateX(-5px);
}

.bbr-portfolio-card:focus-visible {
    outline: 3px solid var(--secondary, #FFE500);
    outline-offset: 4px;
}

.bbr-portfolio-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 55px;
}

.bbr-portfolio-bottom-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0,191,255,.3),
        transparent
    );
}

.bbr-portfolio-bottom p {
    color: #AEBFCB;
    font-size: 14px;
    margin: 0;
}

.bbr-portfolio-bottom p strong {
    color: #fff;
}

.bbr-portfolio-bottom a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--secondary, #FFE500);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: color .3s ease;
}

.bbr-portfolio-bottom a:hover {
    color: var(--primary, #00BFFF);
}

[data-bbr-portfolio-reveal] {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity .8s ease,
        transform .8s cubic-bezier(.2,.7,.2,1);
}

[data-bbr-portfolio-reveal].bbr-portfolio-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .bbr-portfolio-section {
        padding: 85px 0;
    }

    .bbr-portfolio-grid {
        gap: 18px;
    }

    .bbr-portfolio-card {
        height: 370px;
    }

    .bbr-portfolio-card-content {
        right: 22px;
        left: 22px;
        bottom: 22px;
    }
}

@media (max-width: 767px) {
    .bbr-portfolio-section {
        padding: 70px 0;
    }

    .bbr-portfolio-heading {
        flex-direction: column;
        align-items: flex-start;
        gap: 25px;
    }

    .bbr-portfolio-heading-btn {
        width: 100%;
    }

    .bbr-portfolio-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bbr-portfolio-card-medium,
    .bbr-portfolio-card-large {
        grid-column: span 1;
    }

    .bbr-portfolio-card {
        height: 330px;
    }

    .bbr-portfolio-card-content h3 {
        font-size: 20px;
    }

    .bbr-portfolio-card-content p {
        font-size: 12px;
    }

    .bbr-portfolio-category {
        top: 15px;
        right: 15px;
        padding: 7px 12px;
        font-size: 10px;
    }

    .bbr-portfolio-open {
        top: 15px;
        left: 15px;
        opacity: 1;
        transform: none;
        width: 35px;
        height: 35px;
        font-size: 13px;
    }

    .bbr-portfolio-view {
        opacity: 1;
        max-height: 40px;
        transform: none;
    }
}

@media (max-width: 575px) {
    .bbr-portfolio-section {
        padding: 60px 0;
    }

    .bbr-portfolio-container {
        padding-inline: 18px;
    }

    .bbr-portfolio-heading h2 {
        font-size: 32px;
    }

    .bbr-portfolio-heading p {
        font-size: 13px;
    }

    .bbr-portfolio-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .bbr-portfolio-card-medium,
    .bbr-portfolio-card-large {
        grid-column: 1 / -1;
    }

    .bbr-portfolio-card {
        height: 360px;
        border-radius: 16px;
    }

    .bbr-portfolio-card-content h3 {
        font-size: 23px;
    }

    .bbr-portfolio-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .bbr-portfolio-bottom-line {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-bbr-portfolio-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bbr-portfolio-card,
    .bbr-portfolio-card img,
    .bbr-portfolio-view {
        transition: none;
    }
}

.bbr-cta-section {
    position: relative;
    padding: 80px 0;
    background: var(--dark, #05080D);
    overflow: hidden;
    isolation: isolate;
}

.bbr-cta-container {
    max-width: 1800px;
    padding-inline: 25px;
}

.bbr-cta-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 640px;
    padding: 80px 25px;
    border-radius: 26px;
    overflow: hidden;
    isolation: isolate;
    background: #07131E;
}

.bbr-cta-background,
.bbr-cta-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.bbr-cta-background {
    z-index: -4;
    background-image: url("../assets/cta-bg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1.03);
    transition: transform 1.2s ease;
}

.bbr-cta-banner:hover .bbr-cta-background {
    transform: scale(1.08);
}

.bbr-cta-overlay {
    z-index: -3;
    background:
        linear-gradient(
            90deg,
            rgba(2, 10, 19, .82),
            rgba(3, 16, 27, .64),
            rgba(2, 10, 19, .82)
        ),
        linear-gradient(
            180deg,
            rgba(0, 191, 255, .08),
            rgba(0, 0, 0, .4)
        );
}

.bbr-cta-glow {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .18;
    z-index: -2;
    pointer-events: none;
}

.bbr-cta-glow-blue {
    top: -150px;
    right: -120px;
    background: var(--primary, #00BFFF);
}

.bbr-cta-glow-yellow {
    bottom: -180px;
    left: -100px;
    background: var(--secondary, #FFE500);
}

.bbr-cta-content {
    position: relative;
    z-index: 2;
    width: min(100%, 900px);
    padding: 55px 65px;
    text-align: center;
    border: 1px solid rgba(155, 221, 255, .35);
    border-radius: 24px;
    background: linear-gradient(
        145deg,
        rgba(13, 35, 49, .68),
        rgba(5, 17, 29, .78)
    );
    box-shadow:
        0 25px 80px rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .1);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
}

.bbr-cta-content::before {
    content: "";
    position: absolute;
    top: 0;
    right: 50%;
    transform: translateX(50%);
    width: 150px;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--primary, #00BFFF),
        var(--secondary, #FFE500),
        transparent
    );
    border-radius: 50px;
}

.bbr-cta-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.bbr-cta-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--secondary, #FFE500);
    box-shadow: 0 0 15px rgba(255, 229, 0, .5);
}

.bbr-cta-eyebrow-line {
    width: 25px;
    height: 1px;
    background: rgba(255, 255, 255, .35);
}

.bbr-cta-eyebrow span:last-child {
    color: var(--primary, #00BFFF);
    font-size: 11px;
    letter-spacing: 1.5px;
}

.bbr-cta-content h2 {
    color: #fff;
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 900;
    line-height: 1.6;
    margin-bottom: 20px;
}

.bbr-cta-content h2 span {
    display: block;
    color: var(--primary, #00BFFF);
}

.bbr-cta-content p {
    max-width: 680px;
    margin: 0 auto 30px;
    color: #D2E0EA;
    font-size: 15px;
    line-height: 2.1;
}

.bbr-cta-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.bbr-cta-primary-btn,
.bbr-cta-secondary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 54px;
    padding: 14px 25px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 900;
    text-decoration: none;
    transition: all .35s ease;
}

.bbr-cta-primary-btn {
    background: var(--primary, #00BFFF);
    color: #05080D;
    box-shadow: 0 12px 35px rgba(0, 191, 255, .18);
}

.bbr-cta-primary-btn:hover {
    background: var(--secondary, #FFE500);
    color: #05080D;
    transform: translateY(-4px);
}

.bbr-cta-secondary-btn {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .07);
}

.bbr-cta-secondary-btn:hover {
    color: var(--secondary, #FFE500);
    border-color: var(--secondary, #FFE500);
    background: rgba(255, 229, 0, .07);
    transform: translateY(-4px);
}

.bbr-cta-primary-btn i,
.bbr-cta-secondary-btn i {
    transition: transform .3s ease;
}

.bbr-cta-primary-btn:hover i,
.bbr-cta-secondary-btn:hover i {
    transform: translateX(-5px);
}

.bbr-cta-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px 28px;
    margin-top: 32px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.bbr-cta-bottom span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #D3E1EA;
    font-size: 12px;
    font-weight: 700;
}

.bbr-cta-bottom i {
    color: var(--secondary, #FFE500);
    font-size: 14px;
}

[data-bbr-cta-reveal] {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity .9s ease,
        transform .9s cubic-bezier(.2, .7, .2, 1);
}

[data-bbr-cta-reveal].bbr-cta-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 991px) {
    .bbr-cta-section {
        padding: 65px 0;
    }

    .bbr-cta-banner {
        min-height: 580px;
        padding: 65px 25px;
    }

    .bbr-cta-content {
        padding: 45px 40px;
    }
}

@media (max-width: 767px) {
    .bbr-cta-section {
        padding: 50px 0;
    }

    .bbr-cta-container {
        padding-inline: 15px;
    }

    .bbr-cta-banner {
        min-height: 540px;
        padding: 40px 15px;
        border-radius: 20px;
    }

    .bbr-cta-content {
        padding: 40px 25px;
    }

    .bbr-cta-content h2 {
        font-size: clamp(29px, 6vw, 40px);
    }

    .bbr-cta-content p {
        font-size: 13px;
    }
}

@media (max-width: 575px) {
    .bbr-cta-section {
        padding: 40px 0;
    }

    .bbr-cta-container {
        padding-inline: 12px;
    }

    .bbr-cta-banner {
        min-height: 520px;
        padding: 25px 12px;
        border-radius: 16px;
    }

    .bbr-cta-content {
        padding: 35px 20px;
        border-radius: 17px;
    }

    .bbr-cta-content h2 {
        font-size: 28px;
        line-height: 1.65;
    }

    .bbr-cta-content p {
        font-size: 12px;
        line-height: 2;
    }

    .bbr-cta-actions {
        flex-direction: column;
        gap: 12px;
    }

    .bbr-cta-primary-btn,
    .bbr-cta-secondary-btn {
        width: 100%;
    }

    .bbr-cta-bottom {
        gap: 12px 18px;
    }

    .bbr-cta-bottom span {
        font-size: 10px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-bbr-cta-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .bbr-cta-background,
    .bbr-cta-primary-btn,
    .bbr-cta-secondary-btn {
        transition: none;
    }
}


:root {
    --bbr-contact-bg: #050B10;
    --bbr-contact-panel: #0A2533;
    --bbr-contact-input: #071E2B;
    --bbr-contact-blue: #00BFFF;
    --bbr-contact-yellow: #FFE500;
    --bbr-contact-white: #FFFFFF;
    --bbr-contact-muted: #A2B3BE;
    --bbr-contact-border: rgba(99, 195, 239, .25);
}

.bbr-contact-section {
    position: relative;
    padding: 110px 0;
    background: var(--bbr-contact-bg);
    overflow: hidden;
}

.bbr-contact-container {
    max-width: 1350px;
}

.bbr-contact-wrapper {
    overflow: hidden;
    border: 1px solid var(--bbr-contact-border);
    border-radius: 25px;
    background: #061A24;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .2);
}

.bbr-contact-row {
    min-height: 760px;
}

.bbr-contact-form-panel {
    height: 100%;
    padding: 55px 45px;
    background: linear-gradient(
        145deg,
        #0C2B3B,
        #08202D
    );
}

.bbr-contact-form-heading {
    margin-bottom: 35px;
}

.bbr-contact-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--bbr-contact-blue);
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 15px;
}

.bbr-contact-form-heading h3 {
    color: #fff;
    font-size: clamp(28px, 3vw, 39px);
    font-weight: 900;
    margin-bottom: 12px;
}

.bbr-contact-form-heading h3 span {
    color: var(--bbr-contact-blue);
}

.bbr-contact-form-heading p {
    color: var(--bbr-contact-muted);
    font-size: 13px;
    line-height: 2;
    margin: 0;
}

.bbr-contact-form-group {
    width: 100%;
}

.bbr-contact-form-group label {
    display: block;
    margin-bottom: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
}

.bbr-contact-form-group label span {
    color: var(--bbr-contact-yellow);
}

.bbr-contact-input-wrap {
    position: relative;
    width: 100%;
}

.bbr-contact-input-wrap > i:first-child {
    position: absolute;
    top: 22px;
    right: 17px;
    z-index: 2;
    color: #6F9DB1;
    font-size: 14px;
    pointer-events: none;
}

.bbr-contact-input-wrap input,
.bbr-contact-input-wrap select,
.bbr-contact-input-wrap textarea {
    width: 100%;
    min-height: 58px;
    padding: 15px 45px 15px 17px;
    background: var(--bbr-contact-input);
    border: 1px solid var(--bbr-contact-border);
    border-radius: 10px;
    outline: none;
    color: #fff;
    font-size: 13px;
    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.bbr-contact-input-wrap input::placeholder,
.bbr-contact-input-wrap textarea::placeholder {
    color: #8097A5;
}

.bbr-contact-input-wrap input:focus,
.bbr-contact-input-wrap select:focus,
.bbr-contact-input-wrap textarea:focus {
    border-color: var(--bbr-contact-blue);
    background: #092535;
    box-shadow: 0 0 0 3px rgba(0, 191, 255, .1);
}

.bbr-contact-input-wrap select {
    appearance: none;
    cursor: pointer;
}

.bbr-contact-input-wrap select option {
    background: #0A2533;
    color: #fff;
}

.bbr-contact-select-arrow {
    position: absolute;
    top: 22px;
    left: 18px;
    color: #86A8BA;
    font-size: 12px;
    pointer-events: none;
}

.bbr-contact-textarea-wrap textarea {
    min-height: 155px;
    resize: vertical;
    padding-top: 18px;
}

.bbr-contact-form-bottom {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 18px;
    margin-top: 15px;
}

.bbr-contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    min-height: 55px;
    padding: 14px 25px;
    border: none;
    border-radius: 10px;
    background: var(--bbr-contact-blue);
    color: #04111B;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: all .35s ease;
}

.bbr-contact-submit-btn:hover {
    background: var(--bbr-contact-yellow);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(255, 229, 0, .13);
}

.bbr-contact-submit-btn i {
    transition: transform .3s ease;
}

.bbr-contact-submit-btn:hover i {
    transform: translateX(-5px);
}

.bbr-contact-privacy {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8FA9B7;
    font-size: 11px;
}

.bbr-contact-privacy i {
    color: var(--bbr-contact-yellow);
}

.bbr-contact-info-panel {
    position: relative;
    height: 100%;
    min-height: 760px;
    padding: 55px 45px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background:
        url("../assets/contact-bg.jpg")
        center center / cover no-repeat;
}

.bbr-contact-info-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            180deg,
            rgba(2, 12, 21, .88),
            rgba(3, 18, 28, .87)
        ),
        linear-gradient(
            120deg,
            rgba(0, 191, 255, .14),
            transparent 55%,
            rgba(255, 229, 0, .08)
        );
}

.bbr-contact-info-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

.bbr-contact-info-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
    color: var(--bbr-contact-blue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.bbr-contact-info-eyebrow span {
    width: 8px;
    height: 8px;
    background: var(--bbr-contact-yellow);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 229, 0, .45);
}

.bbr-contact-info-top h2 {
    color: #fff;
    font-size: clamp(34px, 3.6vw, 50px);
    font-weight: 900;
    line-height: 1.5;
    margin-bottom: 18px;
}

.bbr-contact-info-top h2 span {
    display: block;
    color: var(--bbr-contact-blue);
}

.bbr-contact-info-top p {
    max-width: 510px;
    color: #C5D6E0;
    font-size: 14px;
    line-height: 2.1;
    margin-bottom: 35px;
}

.bbr-contact-benefits h3 {
    color: #fff;
    font-size: 19px;
    font-weight: 900;
    margin-bottom: 20px;
}

.bbr-contact-benefits ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bbr-contact-benefits li {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #D1DEE6;
    font-size: 13px;
    margin-bottom: 17px;
    line-height: 1.7;
}

.bbr-contact-benefits li i {
    color: var(--bbr-contact-blue);
    font-size: 15px;
}

.bbr-contact-info-divider {
    height: 1px;
    width: 100%;
    background: rgba(255, 255, 255, .2);
    margin: 35px 0;
}

.bbr-contact-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;
}

.bbr-contact-detail-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 17px;
    min-width: 0;
}

.bbr-contact-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 11px;
    background: var(--bbr-contact-blue);
    color: #04111B;
    font-size: 20px;
}

.bbr-contact-detail-item h4 {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    margin-bottom: 10px;
}

.bbr-contact-detail-item p {
    margin: 0;
    color: #C2D2DC;
    font-size: 12px;
    line-height: 1.8;
    overflow-wrap: anywhere;
}

.bbr-contact-detail-item a {
    color: inherit;
    text-decoration: none;
    transition: color .3s ease;
}

.bbr-contact-detail-item a:hover {
    color: var(--bbr-contact-yellow);
}

.bbr-contact-info-footer {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 40px;
}

.bbr-contact-info-footer-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, .2);
}

.bbr-contact-info-footer > span:last-child {
    color: #C5D6E0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    white-space: nowrap;
}

.bbr-contact-info-footer b {
    color: var(--bbr-contact-yellow);
    margin-inline: 6px;
}

@media (max-width: 1199px) {
    .bbr-contact-form-panel,
    .bbr-contact-info-panel {
        padding: 45px 30px;
    }
}

@media (max-width: 991px) {
    .bbr-contact-section {
        padding: 80px 0;
    }

    .bbr-contact-row {
        min-height: auto;
    }

    .bbr-contact-info-panel {
        min-height: auto;
        padding: 65px 40px;
    }

    .bbr-contact-form-panel {
        padding: 50px 40px;
    }
}

@media (max-width: 767px) {
    .bbr-contact-section {
        padding: 65px 0;
    }

    .bbr-contact-wrapper {
        border-radius: 18px;
    }

    .bbr-contact-info-panel,
    .bbr-contact-form-panel {
        padding: 40px 25px;
    }

    .bbr-contact-info-top h2 {
        font-size: 34px;
    }

    .bbr-contact-details {
        gap: 20px;
    }
}

@media (max-width: 575px) {
    .bbr-contact-section {
        padding: 50px 0;
    }

    .bbr-contact-container {
        padding-inline: 15px;
    }

    .bbr-contact-info-panel,
    .bbr-contact-form-panel {
        padding: 35px 22px;
    }

    .bbr-contact-info-top h2 {
        font-size: 30px;
    }

    .bbr-contact-info-top p {
        font-size: 12px;
    }

    .bbr-contact-benefits li {
        font-size: 12px;
    }

    .bbr-contact-details {
        grid-template-columns: 1fr;
    }

    .bbr-contact-detail-item {
        flex-direction: row;
        align-items: center;
    }

    .bbr-contact-detail-icon {
        flex-shrink: 0;
    }

    .bbr-contact-form-heading h3 {
        font-size: 29px;
    }

    .bbr-contact-submit-btn {
        width: 100%;
    }

    .bbr-contact-info-footer {
        flex-wrap: wrap;
    }
}

 
:root {
    --bbr-footer-bg: #020D13;
    --bbr-footer-card: #071F2A;
    --bbr-footer-blue: #00BFFF;
    --bbr-footer-yellow: #FFE500;
    --bbr-footer-white: #FFFFFF;
    --bbr-footer-muted: #9AABB5;
    --bbr-footer-border: rgba(110, 193, 232, .25);
}

.bbr-footer {
    position: relative;
    padding: 25px 15px;
    background: var(--bbr-footer-bg);
    color: var(--bbr-footer-white);
}

.bbr-footer-container {
    max-width: 1800px;
    padding: 0;
}

.bbr-footer-wrapper {
    padding: 75px 75px 25px;
    border-radius: 24px;
    background: linear-gradient(
        125deg,
        #092B39 0%,
        #061B25 55%,
        #071E28 100%
    );
    border: 1px solid rgba(255,255,255,.04);
}

.bbr-footer-main {
    padding-bottom: 65px;
}

.bbr-footer-logo {
    display: inline-block;
    margin-bottom: 25px;
}

.bbr-footer-logo img {
    display: block;
    width: 175px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.bbr-footer-about > p {
    max-width: 390px;
    margin-bottom: 20px;
    color: var(--bbr-footer-muted);
    font-size: 14px;
    line-height: 2.1;
}

.bbr-footer-about-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--bbr-footer-blue);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all .3s ease;
}

.bbr-footer-about-link:hover {
    color: var(--bbr-footer-yellow);
    gap: 17px;
}

.bbr-footer-links h3,
.bbr-footer-contact h3 {
    margin-bottom: 27px;
    color: var(--bbr-footer-white);
    font-size: 19px;
    font-weight: 800;
}

.bbr-footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bbr-footer-links ul li {
    margin-bottom: 16px;
}

.bbr-footer-links ul li a {
    display: inline-block;
    color: var(--bbr-footer-muted);
    font-size: 14px;
    line-height: 1.7;
    text-decoration: none;
    transition: all .3s ease;
}

.bbr-footer-links ul li a:hover {
    color: var(--bbr-footer-blue);
    transform: translateX(-5px);
}

.bbr-footer-contact > p {
    max-width: 290px;
    margin-bottom: 25px;
    color: var(--bbr-footer-muted);
    font-size: 14px;
    line-height: 1.9;
}

.bbr-footer-contact-item {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 20px;
}

.bbr-footer-contact-item > i {
    width: 19px;
    color: var(--bbr-footer-blue);
    font-size: 16px;
    flex-shrink: 0;
}

.bbr-footer-contact-item a {
    color: var(--bbr-footer-muted);
    font-size: 13px;
    line-height: 1.8;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .3s ease;
}

.bbr-footer-contact-item a:hover {
    color: var(--bbr-footer-yellow);
}

.bbr-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    padding-top: 25px;
    border-top: 1px solid var(--bbr-footer-border);
}

.bbr-footer-copyright p {
    margin: 0;
    color: var(--bbr-footer-muted);
    font-size: 13px;
}

.bbr-footer-copyright strong {
    color: var(--bbr-footer-white);
    font-weight: 800;
}

.bbr-footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bbr-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--bbr-footer-border);
    border-radius: 8px;
    background: transparent;
    color: var(--bbr-footer-white);
    font-size: 15px;
    text-decoration: none;
    transition: all .3s ease;
}

.bbr-footer-social a:hover {
    background: var(--bbr-footer-blue);
    border-color: var(--bbr-footer-blue);
    color: #04131D;
    transform: translateY(-4px);
}

@media (max-width: 1199px) {
    .bbr-footer-wrapper {
        padding: 60px 45px 25px;
    }
}

@media (max-width: 991px) {
    .bbr-footer-wrapper {
        padding: 55px 35px 25px;
    }

    .bbr-footer-main {
        padding-bottom: 45px;
    }
}

@media (max-width: 767px) {
    .bbr-footer {
        padding: 15px 10px;
    }

    .bbr-footer-wrapper {
        padding: 45px 25px 25px;
        border-radius: 18px;
    }

    .bbr-footer-main {
        padding-bottom: 35px;
    }

    .bbr-footer-bottom {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 22px;
    }
}

@media (max-width: 575px) {
    .bbr-footer-wrapper {
        padding: 40px 20px 25px;
    }

    .bbr-footer-logo img {
        width: 155px;
    }

    .bbr-footer-about > p {
        font-size: 13px;
    }

    .bbr-footer-links h3,
    .bbr-footer-contact h3 {
        font-size: 17px;
        margin-bottom: 22px;
    }

    .bbr-footer-links ul li a {
        font-size: 12px;
    }

    .bbr-footer-contact > p {
        font-size: 13px;
    }

    .bbr-footer-copyright p {
        font-size: 11px;
        line-height: 1.9;
    }

    .bbr-footer-social a {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bbr-footer a {
        transition: none;
    }
}

:root {
    --bbr-loader-bg: #020C12;
    --bbr-loader-blue: #00BFFF;
    --bbr-loader-yellow: #FFE500;
    --bbr-loader-white: #FFFFFF;
    --bbr-loader-muted: #8DA6B5;
}

body.bbr-loading {
    overflow: hidden;
}

.bbr-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100dvh;
    padding: 25px;
    background: var(--bbr-loader-bg);
    overflow: hidden;
    isolation: isolate;
    opacity: 1;
    visibility: visible;
    transition:
        opacity .8s ease,
        visibility .8s ease;
}

.bbr-loader.bbr-loader-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.bbr-loader-grid {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(0, 191, 255, .055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 191, 255, .055) 1px, transparent 1px);
    background-size: 65px 65px;
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 75%);
    animation: bbrGridMove 12s linear infinite;
}

.bbr-loader-glow {
    position: absolute;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    filter: blur(110px);
    opacity: .15;
    pointer-events: none;
    z-index: -1;
}

.bbr-loader-glow-one {
    top: -200px;
    right: -150px;
    background: var(--bbr-loader-blue);
    animation: bbrGlowFloat 7s ease-in-out infinite alternate;
}

.bbr-loader-glow-two {
    bottom: -200px;
    left: -150px;
    background: var(--bbr-loader-yellow);
    animation: bbrGlowFloat 8s ease-in-out infinite alternate-reverse;
}

.bbr-loader-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(100%, 480px);
    text-align: center;
}

.bbr-loader-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 230px;
    height: 230px;
    margin-bottom: 25px;
}

.bbr-loader-ring {
    position: absolute;
    border-radius: 50%;
}

.bbr-loader-ring-one {
    inset: 0;
    border: 1px solid rgba(0, 191, 255, .25);
    border-top: 2px solid var(--bbr-loader-blue);
    border-bottom: 2px solid var(--bbr-loader-yellow);
    animation: bbrRingRotate 4s linear infinite;
}

.bbr-loader-ring-two {
    inset: 17px;
    border: 1px dashed rgba(255, 255, 255, .2);
    animation: bbrRingRotate 7s linear infinite reverse;
}

.bbr-loader-ring-three {
    inset: 34px;
    border: 2px solid transparent;
    border-left-color: var(--bbr-loader-yellow);
    border-right-color: var(--bbr-loader-blue);
    animation: bbrRingRotate 2.8s linear infinite;
}

.bbr-loader-logo-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 125px;
    height: 125px;
    border-radius: 50%;
    background: radial-gradient(circle, #12303E, #020C12);
    box-shadow:
        0 0 35px rgba(0, 191, 255, .15),
        inset 0 0 25px rgba(0, 191, 255, .08);
    animation: bbrLogoPulse 3s ease-in-out infinite;
}

.bbr-loader-logo {
    width: 105px;
    max-height: 105px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(0, 191, 255, .25));
}

.bbr-loader-orbit-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    margin: -4.5px;
    border-radius: 50%;
    background: var(--bbr-loader-yellow);
    box-shadow: 0 0 20px var(--bbr-loader-yellow);
    animation: bbrOrbit 4s linear infinite;
}

.bbr-loader-brand {
    animation: bbrFadeUp .9s ease both;
}

.bbr-loader-eyebrow {
    display: block;
    margin-bottom: 12px;
    color: var(--bbr-loader-blue);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 4px;
}

.bbr-loader-brand h2 {
    margin: 0 0 12px;
    color: var(--bbr-loader-white);
    font-size: clamp(42px, 7vw, 65px);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -2px;
    direction: ltr;
}

.bbr-loader-brand h2 span {
    color: var(--bbr-loader-blue);
}

.bbr-loader-brand p {
    margin: 0;
    color: var(--bbr-loader-muted);
    font-size: 13px;
    line-height: 1.9;
}

.bbr-loader-progress-area {
    width: 100%;
    max-width: 350px;
    margin-top: 45px;
}

.bbr-loader-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 12px;
    color: var(--bbr-loader-muted);
    font-size: 11px;
}

#bbrLoaderPercentage {
    color: var(--bbr-loader-blue);
    font-weight: 800;
    font-size: 13px;
    direction: ltr;
}

.bbr-loader-progress-track {
    width: 100%;
    height: 4px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .1);
    overflow: hidden;
}

.bbr-loader-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--bbr-loader-blue),
        var(--bbr-loader-yellow)
    );
    box-shadow: 0 0 15px rgba(0, 191, 255, .6);
}

.bbr-loader-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 38px;
    color: rgba(255, 255, 255, .45);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    direction: ltr;
}

.bbr-loader-bottom i {
    color: var(--bbr-loader-yellow);
    font-size: 4px;
}

.bbr-loader-particles span {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--bbr-loader-blue);
    box-shadow: 0 0 12px var(--bbr-loader-blue);
    animation: bbrParticleFloat 6s ease-in-out infinite alternate;
}

.bbr-loader-particles span:nth-child(1) { top: 15%; left: 12%; }
.bbr-loader-particles span:nth-child(2) { top: 25%; left: 80%; animation-delay: 1s; }
.bbr-loader-particles span:nth-child(3) { top: 70%; left: 15%; animation-delay: 2s; }
.bbr-loader-particles span:nth-child(4) { top: 80%; left: 85%; animation-delay: 3s; }
.bbr-loader-particles span:nth-child(5) { top: 40%; left: 7%; animation-delay: 1.5s; }
.bbr-loader-particles span:nth-child(6) { top: 55%; left: 93%; animation-delay: 2.5s; }
.bbr-loader-particles span:nth-child(7) { top: 10%; left: 50%; animation-delay: .5s; }
.bbr-loader-particles span:nth-child(8) { top: 90%; left: 45%; animation-delay: 3.5s; }

.bbr-loader-corner {
    position: absolute;
    width: 35px;
    height: 35px;
    border-color: rgba(0, 191, 255, .45);
    border-style: solid;
    pointer-events: none;
}

.bbr-loader-corner-tl {
    top: 30px;
    left: 30px;
    border-width: 1px 0 0 1px;
}

.bbr-loader-corner-tr {
    top: 30px;
    right: 30px;
    border-width: 1px 1px 0 0;
}

.bbr-loader-corner-bl {
    bottom: 30px;
    left: 30px;
    border-width: 0 0 1px 1px;
}

.bbr-loader-corner-br {
    bottom: 30px;
    right: 30px;
    border-width: 0 1px 1px 0;
}

@keyframes bbrRingRotate {
    to { transform: rotate(360deg); }
}

@keyframes bbrOrbit {
    from { transform: rotate(0deg) translateX(115px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(115px) rotate(-360deg); }
}

@keyframes bbrLogoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes bbrGridMove {
    to { background-position: 65px 65px; }
}

@keyframes bbrGlowFloat {
    to { transform: translate(60px, 40px); }
}

@keyframes bbrFadeUp {
    from { opacity: 0; transform: translateY(25px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bbrParticleFloat {
    from { transform: translateY(0); opacity: .2; }
    to { transform: translateY(-45px); opacity: 1; }
}

@media (max-width: 575px) {
    .bbr-loader-visual {
        width: 190px;
        height: 190px;
    }

    .bbr-loader-logo-wrap {
        width: 105px;
        height: 105px;
    }

    .bbr-loader-logo {
        width: 90px;
        max-height: 90px;
    }

    .bbr-loader-orbit-dot {
        animation-name: bbrOrbitMobile;
    }

    .bbr-loader-brand h2 {
        font-size: 45px;
    }

    .bbr-loader-progress-area {
        margin-top: 35px;
    }

    .bbr-loader-corner {
        width: 22px;
        height: 22px;
    }

    .bbr-loader-corner-tl,
    .bbr-loader-corner-tr {
        top: 20px;
    }

    .bbr-loader-corner-bl,
    .bbr-loader-corner-br {
        bottom: 20px;
    }

    .bbr-loader-corner-tl,
    .bbr-loader-corner-bl {
        left: 20px;
    }

    .bbr-loader-corner-tr,
    .bbr-loader-corner-br {
        right: 20px;
    }
}

@keyframes bbrOrbitMobile {
    from { transform: rotate(0deg) translateX(95px); }
    to { transform: rotate(360deg) translateX(95px); }
}

@media (prefers-reduced-motion: reduce) {
    .bbr-loader *,
    .bbr-loader *::before,
    .bbr-loader *::after {
        animation: none !important;
    }
}

 
.bbr-why-video-modal .modal-dialog {
    max-width: 1100px;
    width: calc(100% - 30px);
}

.bbr-why-video-modal .modal-content {
    background: #0d0f20;
    border: none;
    border-radius: 20px;
    overflow: hidden;
}

.bbr-why-video-modal .modal-header {
    padding: 20px 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bbr-why-video-modal .modal-title {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
}

.bbr-why-video-modal .modal-body {
    padding: 0;
}

#bbrWhyVideoFrame {
    display: block;
    width: 100%;
    max-height: 100vh;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0d0f20;
}

@media (max-width: 767px) {
    .bbr-why-video-modal .modal-dialog {
        width: calc(100% - 20px);
        margin: 10px auto;
    }

    .bbr-why-video-modal .modal-content {
        border-radius: 12px;
    }

    .bbr-why-video-modal .modal-title {
        font-size: 16px;
    }
}