:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-3508182 *//* =====================================================
   MADHUR WAVES MARKETING
   ABOUT US PAGE
===================================================== */


/* =====================================================
   RESET
===================================================== */

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


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        #020914;

    color:
        #ffffff;

    overflow-x:
        hidden;

}


/* =====================================================
   COMMON
===================================================== */

.section-container {

    width:
        min(1180px, 92%);

    margin:
        auto;

    position:
        relative;

    z-index:
        5;

}


section {
    position:
        relative;
}


.section-label {

    display:
        inline-block;

    color:
        #3b9cff;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        18px;

}


.section-label::before {

    content:
        "";

    display:
        inline-block;

    width:
        35px;

    height:
        1px;

    background:
        #1688ff;

    vertical-align:
        middle;

    margin-right:
        10px;

}


h1,
h2,
h3,
p {

    margin-top:
        0;

}


span {

    color:
        inherit;

}


/* =====================================================
   HERO
===================================================== */

.about-hero {

    min-height:
        650px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        #020914;

}


.about-container {

    width:
        min(1180px, 92%);

    margin:
        auto;

    position:
        relative;

    z-index:
        10;

    padding:
        100px 0;

}


.hero-label {

    color:
        #42a0ff;

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        25px;

    animation:
        fadeDown 1s ease forwards;

}


.hero-label span {

    display:
        inline-block;

    width:
        35px;

    height:
        1px;

    background:
        #1688ff;

    margin-right:
        10px;

    vertical-align:
        middle;

}


.about-hero h1 {

    max-width:
        850px;

    color:
        #ffffff;

    font-size:
        clamp(48px, 7vw, 86px);

    line-height:
        0.98;

    letter-spacing:
        -3px;

    font-weight:
        800;

    margin-bottom:
        30px;

    animation:
        heroTitle 1s ease forwards;

}


.about-hero h1 span {

    display:
        block;

    color:
        #ffffff;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #4aa3ff,
            #ffffff
        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        gradientText 5s linear infinite;

}


.hero-text {

    max-width:
        720px;

    color:
        #d8e5f4;

    font-size:
        17px;

    line-height:
        1.8;

    margin-bottom:
        35px;

    animation:
        fadeUp 1s ease 0.3s both;

}


.hero-text strong {

    color:
        #ffffff;

}


.hero-buttons {

    display:
        flex;

    gap:
        14px;

    flex-wrap:
        wrap;

    animation:
        fadeUp 1s ease 0.5s both;

}


/* =====================================================
   BUTTONS
===================================================== */

.primary-btn,
.secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        15px;

    min-height:
        48px;

    padding:
        0 24px;

    border-radius:
        6px;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        all 0.35s ease;

}


.primary-btn {

    color:
        #ffffff;

    background:
        #1688ff;

    border:
        1px solid #1688ff;

    box-shadow:
        0 0 0
        rgba(22,136,255,0);

}


.primary-btn:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 12px 35px
        rgba(22,136,255,0.35);

}


.primary-btn span {

    transition:
        transform 0.3s ease;

}


.primary-btn:hover span {

    transform:
        translateX(6px);

}


.secondary-btn {

    color:
        #ffffff;

    border:
        1px solid
        rgba(255,255,255,0.22);

    background:
        rgba(255,255,255,0.03);

}


.secondary-btn:hover {

    color:
        #ffffff;

    border-color:
        #1688ff;

    background:
        rgba(22,136,255,0.08);

    transform:
        translateY(-5px);

}


/* =====================================================
   HERO BACKGROUND
===================================================== */

.about-bg {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    z-index:
        0;

    background:

        radial-gradient(
            circle at 20% 30%,
            rgba(0,110,255,0.16),
            transparent 30%
        ),

        radial-gradient(
            circle at 80% 70%,
            rgba(0,70,180,0.12),
            transparent 35%
        ),

        #020914;

}


.about-bg::before {

    content:
        "";

    position:
        absolute;

    inset:
        0;

    background-image:
        linear-gradient(
            rgba(255,255,255,0.025)
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025)
            1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    animation:
        gridMove
        20s
        linear
        infinite;

}


/* =====================================================
   GALAXY
===================================================== */

.galaxy {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(70px);

    pointer-events:
        none;

}


.galaxy-one {

    width:
        600px;

    height:
        250px;

    top:
        5%;

    left:
        -150px;

    background:
        rgba(0,100,255,0.18);

    transform:
        rotate(-25deg);

    animation:
        galaxyOne
        15s
        ease-in-out
        infinite
        alternate;

}


.galaxy-two {

    width:
        550px;

    height:
        250px;

    right:
        -180px;

    bottom:
        0;

    background:
        rgba(0,130,255,0.14);

    transform:
        rotate(25deg);

    animation:
        galaxyTwo
        18s
        ease-in-out
        infinite
        alternate;

}


@keyframes galaxyOne {

    to {

        transform:
            translate(220px,100px)
            rotate(-5deg)
            scale(1.3);

    }

}


@keyframes galaxyTwo {

    to {

        transform:
            translate(-180px,-100px)
            rotate(5deg)
            scale(1.25);

    }

}


/* =====================================================
   STARS
===================================================== */

.about-stars,
.cta-stars {

    position:
        absolute;

    inset:
        0;

}


.about-stars span,
.cta-stars span {

    position:
        absolute;

    width:
        2px;

    height:
        2px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 0 8px #ffffff;

    animation:
        twinkle
        ease-in-out
        infinite;

}


@keyframes twinkle {

    0%,
    100% {

        opacity:
            0.15;

        transform:
            scale(0.5);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.6);

    }

}


/* =====================================================
   SHOOTING STARS
===================================================== */

.shooting-star {

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 0 10px #ffffff,
        0 0 25px #1688ff;

    opacity:
        0;

}


.shooting-star::after {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        2px;

    right:
        0;

    top:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1688ff,
            #ffffff
        );

    transform:
        rotate(-35deg);

}


.shooting-one {

    top:
        15%;

    left:
        85%;

    animation:
        shooting
        8s
        linear
        infinite;

}


.shooting-two {

    top:
        45%;

    left:
        75%;

    animation:
        shooting
        11s
        linear
        3s
        infinite;

}


.shooting-three {

    top:
        65%;

    left:
        95%;

    animation:
        shooting
        13s
        linear
        6s
        infinite;

}


@keyframes shooting {

    0% {

        opacity:
            0;

        transform:
            translate(0,0);

    }

    5% {

        opacity:
            1;

    }

    20% {

        opacity:
            1;

        transform:
            translate(-650px,400px);

    }

    23% {

        opacity:
            0;

    }

    100% {

        opacity:
            0;

    }

}


/* =====================================================
   INTRO
===================================================== */

.about-intro {

    padding:
        110px 0;

    background:
        #030b17;

}


.intro-grid {

    display:
        grid;

    grid-template-columns:
        1.2fr 0.8fr;

    gap:
        80px;

    align-items:
        center;

}


.intro-content {

    opacity:
        0;

    transform:
        translateY(40px);

    transition:
        all 0.9s ease;

}


.intro-content.show {

    opacity:
        1;

    transform:
        translateY(0);

}


.intro-content h2,
.section-heading h2 {

    color:
        #ffffff;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        28px;

}


.intro-content h2 span,
.section-heading h2 span {

    color:
        #3b9cff;

}


.intro-content > p {

    color:
        #b9c9da;

    font-size:
        15px;

    line-height:
        1.8;

    margin-bottom:
        18px;

}


.intro-highlight {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    margin-top:
        30px;

    padding:
        18px;

    border-left:
        2px solid #1688ff;

    background:
        rgba(22,136,255,0.05);

}


.highlight-icon {

    color:
        #1688ff;

    font-size:
        25px;

}


.intro-highlight strong {

    color:
        #ffffff;

    font-size:
        13px;

}


.intro-highlight p {

    color:
        #8fa5bb;

    font-size:
        11px;

    margin-top:
        5px;

}


/* =====================================================
   INTRO CARD
===================================================== */

.intro-card {

    position:
        relative;

    min-height:
        390px;

    padding:
        45px;

    border:
        1px solid
        rgba(43,136,255,0.3);

    border-radius:
        15px;

    background:
        linear-gradient(
            145deg,
            rgba(15,42,75,0.85),
            rgba(3,15,30,0.95)
        );

    overflow:
        hidden;

    opacity:
        0;

    transform:
        translateX(50px);

    transition:
        all 0.9s ease;

}


.intro-card.show {

    opacity:
        1;

    transform:
        translateX(0);

}


.card-glow {

    position:
        absolute;

    width:
        200px;

    height:
        200px;

    right:
        -80px;

    top:
        -80px;

    border-radius:
        50%;

    background:
        rgba(22,136,255,0.2);

    filter:
        blur(50px);

    animation:
        cardGlow
        5s
        ease-in-out
        infinite
        alternate;

}


@keyframes cardGlow {

    to {

        transform:
            translate(-100px,100px)
            scale(1.4);

    }

}


.card-number {

    color:
        #1688ff;

    font-size:
        12px;

    letter-spacing:
        2px;

    margin-bottom:
        90px;

}


.intro-card h3 {

    position:
        relative;

    color:
        #ffffff;

    font-size:
        25px;

    margin-bottom:
        15px;

}


.intro-card > p {

    position:
        relative;

    color:
        #aebfd1;

    font-size:
        13px;

    line-height:
        1.8;

}


.card-line {

    width:
        60px;

    height:
        2px;

    background:
        #1688ff;

    margin:
        30px 0 15px;

}


.card-small-text {

    color:
        #ffffff;

    font-size:
        9px;

    letter-spacing:
        2px;

    opacity:
        0.7;

}


.card-small-text span {

    color:
        #1688ff;

}


/* =====================================================
   WHAT WE DO
===================================================== */

.what-we-do {

    padding:
        110px 0;

    background:
        #020914;

}


.section-heading {

    max-width:
        720px;

    margin-bottom:
        55px;

}


.section-heading > p {

    color:
        #aebfd1;

    line-height:
        1.8;

    font-size:
        14px;

}


/* =====================================================
   SERVICES
===================================================== */

.services-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        20px;

}


.service-card {

    position:
        relative;

    padding:
        35px 30px;

    min-height:
        280px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    border-radius:
        10px;

    background:
        rgba(8,20,35,0.8);

    overflow:
        hidden;

    opacity:
        0;

    transform:
        translateY(45px);

    transition:
        all 0.7s ease;

}


.service-card.show {

    opacity:
        1;

    transform:
        translateY(0);

}


.service-card:hover {

    border-color:
        rgba(22,136,255,0.5);

    transform:
        translateY(-10px);

    box-shadow:
        0 20px 50px
        rgba(0,80,180,0.12);

}


.service-card::before {

    content:
        "";

    position:
        absolute;

    width:
        150px;

    height:
        150px;

    right:
        -80px;

    bottom:
        -80px;

    border-radius:
        50%;

    background:
        rgba(22,136,255,0.12);

    filter:
        blur(30px);

    transition:
        all 0.5s ease;

}


.service-card:hover::before {

    transform:
        scale(2);

}


.service-number {

    position:
        absolute;

    top:
        20px;

    right:
        25px;

    color:
        rgba(255,255,255,0.18);

    font-size:
        11px;

}


.service-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        45px;

    height:
        45px;

    margin-bottom:
        25px;

    border:
        1px solid
        rgba(22,136,255,0.4);

    border-radius:
        8px;

    color:
        #1688ff;

    font-size:
        20px;

    transition:
        all 0.4s ease;

}


.service-card:hover
.service-icon {

    background:
        #1688ff;

    color:
        #ffffff;

    transform:
        rotate(8deg)
        scale(1.1);

}


.service-card h3 {

    color:
        #ffffff;

    font-size:
        19px;

    margin-bottom:
        14px;

}


.service-card p {

    color:
        #9db0c5;

    font-size:
        12px;

    line-height:
        1.7;

}


.service-keyword {

    position:
        absolute;

    bottom:
        20px;

    left:
        30px;

    color:
        #1688ff;

    font-size:
        8px;

    letter-spacing:
        2px;

}


/* =====================================================
   APPROACH
===================================================== */

.our-approach {

    padding:
        110px 0;

    background:
        #030b17;

}


.approach-grid {

    display:
        grid;

    grid-template-columns:
        0.8fr 1.2fr;

    gap:
        100px;

}


.approach-title h2 {

    color:
        #ffffff;

    font-size:
        clamp(38px, 5vw, 58px);

    line-height:
        1.05;

}


.approach-title h2 span {

    color:
        #3b9cff;

}


.approach-content {

    display:
        flex;

    flex-direction:
        column;

}


.approach-item {

    display:
        flex;

    gap:
        25px;

    padding:
        25px 0;

    border-bottom:
        1px solid
        rgba(255,255,255,0.08);

    opacity:
        0;

    transform:
        translateX(40px);

    transition:
        all 0.7s ease;

}


.approach-item.show {

    opacity:
        1;

    transform:
        translateX(0);

}


.approach-item > span {

    color:
        #1688ff;

    font-size:
        12px;

    letter-spacing:
        1px;

}


.approach-item h3 {

    color:
        #ffffff;

    font-size:
        19px;

    margin-bottom:
        8px;

}


.approach-item p {

    color:
        #9db0c5;

    font-size:
        13px;

    line-height:
        1.7;

}


/* =====================================================
   WHY US
===================================================== */

.why-us {

    padding:
        110px 0;

    background:
        #020914;

}


.why-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        18px;

}


.why-card {

    padding:
        35px 25px;

    border:
        1px solid
        rgba(255,255,255,0.08);

    background:
        #061321;

    border-radius:
        10px;

    opacity:
        0;

    transform:
        translateY(35px);

    transition:
        all 0.7s ease;

}


.why-card.show {

    opacity:
        1;

    transform:
        translateY(0);

}


.why-card:hover {

    transform:
        translateY(-8px);

    border-color:
        rgba(22,136,255,0.45);

}


.why-icon {

    color:
        #1688ff;

    font-size:
        27px;

    margin-bottom:
        22px;

}


.why-card h3 {

    color:
        #ffffff;

    font-size:
        17px;

    margin-bottom:
        12px;

}


.why-card p {

    color:
        #94a8bc;

    font-size:
        12px;

    line-height:
        1.7;

}


/* =====================================================
   CTA
===================================================== */

.about-cta {

    padding:
        100px 0;

    overflow:
        hidden;

    background:
        #020914;

}


.cta-background {

    position:
        absolute;

    inset:
        0;

    overflow:
        hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(0,100,255,0.13),
            transparent 45%
        );

}


.cta-glow {

    position:
        absolute;

    width:
        450px;

    height:
        450px;

    left:
        50%;

    top:
        50%;

    transform:
        translate(-50%,-50%);

    border-radius:
        50%;

    background:
        rgba(0,100,255,0.1);

    filter:
        blur(80px);

    animation:
        ctaPulse
        5s
        ease-in-out
        infinite
        alternate;

}


@keyframes ctaPulse {

    to {

        transform:
            translate(-50%,-50%)
            scale(1.3);

    }

}


.cta-box {

    position:
        relative;

    text-align:
        center;

    padding:
        80px 30px;

    border:
        1px solid
        rgba(22,136,255,0.3);

    border-radius:
        15px;

    background:
        rgba(5,20,37,0.85);

    overflow:
        hidden;

}


.cta-box h2 {

    color:
        #ffffff;

    font-size:
        clamp(40px, 6vw, 65px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

    margin-bottom:
        20px;

}


.cta-box h2 span {

    color:
        #3b9cff;

}


.cta-box p {

    color:
        #aebfd1;

    font-size:
        14px;

    margin-bottom:
        30px;

}


.cta-buttons {

    display:
        flex;

    justify-content:
        center;

    gap:
        12px;

    flex-wrap:
        wrap;

}


/* =====================================================
   KEYFRAMES
===================================================== */

@keyframes fadeDown {

    from {

        opacity:
            0;

        transform:
            translateY(-20px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes heroTitle {

    from {

        opacity:
            0;

        transform:
            translateY(35px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes fadeUp {

    from {

        opacity:
            0;

        transform:
            translateY(25px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


@keyframes gradientText {

    0% {
        background-position:
            0% center;
    }

    100% {
        background-position:
            200% center;
    }

}


@keyframes gridMove {

    from {
        transform:
            translateY(0);
    }

    to {
        transform:
            translateY(45px);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1000px) {

    .intro-grid,
    .approach-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .services-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }


    .why-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .about-hero {

        min-height:
            600px;

    }


    .about-container {

        padding:
            80px 0;

    }


    .about-hero h1 {

        font-size:
            48px;

        letter-spacing:
            -2px;

    }


    .hero-text {

        font-size:
            14px;

    }


    .hero-buttons {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .primary-btn,
    .secondary-btn {

        width:
            100%;

    }


    .about-intro,
    .what-we-do,
    .our-approach,
    .why-us,
    .about-cta {

        padding:
            75px 0;

    }


    .services-grid {

        grid-template-columns:
            1fr;

    }


    .why-grid {

        grid-template-columns:
            1fr;

    }


    .intro-card {

        min-height:
            340px;

        padding:
            30px;

    }


    .card-number {

        margin-bottom:
            70px;

    }


    .cta-box {

        padding:
            60px 20px;

    }


    .cta-box h2 {

        font-size:
            40px;

    }


    .shooting-star::after {

        width:
            90px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .about-hero h1 {

        font-size:
            40px;

    }


    .intro-content h2,
    .section-heading h2,
    .approach-title h2 {

        font-size:
            36px;

    }


    .service-card {

        padding:
            30px 22px;

    }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

    }

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-9db9902 *//* =====================================================
   MADHUR WAVES MARKETING
   OUR TEAM SECTION
===================================================== */


/* =====================================================
   RESET
===================================================== */

.team-section,
.team-section * {
    box-sizing: border-box;
}


/* =====================================================
   MAIN SECTION
===================================================== */

.team-section {

    position: relative;

    width: 100%;

    padding: 110px 0;

    overflow: hidden;

    background:
        #020914;

    color:
        #ffffff;

}


/* =====================================================
   CONTAINER
===================================================== */

.team-container {

    position: relative;

    z-index: 10;

    width: min(1180px, 92%);

    margin: auto;

}


/* =====================================================
   ANIMATED BACKGROUND
===================================================== */

.team-background {

    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    background:

        radial-gradient(
            circle at 15% 30%,
            rgba(0, 110, 255, 0.13),
            transparent 30%
        ),

        radial-gradient(
            circle at 85% 70%,
            rgba(0, 80, 200, 0.12),
            transparent 32%
        ),

        #020914;

}


/* =====================================================
   MOVING GRID
===================================================== */

.team-grid-bg {

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        );

    background-size:
        45px 45px;

    animation:
        teamGridMove 18s linear infinite;

}


@keyframes teamGridMove {

    0% {

        transform:
            translate(0, 0);

    }

    100% {

        transform:
            translate(45px, 45px);

    }

}


/* =====================================================
   GLOW EFFECTS
===================================================== */

.team-glow {

    position: absolute;

    border-radius: 50%;

    filter:
        blur(70px);

}


.team-glow-1 {

    width: 450px;

    height: 450px;

    top: -200px;

    left: -180px;

    background:
        rgba(0, 100, 255, 0.12);

    animation:
        teamGlowOne 12s ease-in-out infinite alternate;

}


.team-glow-2 {

    width: 500px;

    height: 500px;

    bottom: -250px;

    right: -200px;

    background:
        rgba(0, 120, 255, 0.10);

    animation:
        teamGlowTwo 15s ease-in-out infinite alternate;

}


@keyframes teamGlowOne {

    to {

        transform:
            translate(200px, 160px)
            scale(1.3);

    }

}


@keyframes teamGlowTwo {

    to {

        transform:
            translate(-180px, -150px)
            scale(1.25);

    }

}


/* =====================================================
   STARS
===================================================== */

.team-stars {

    position:
        absolute;

    inset:
        0;

}


.team-stars span,
.team-stars i {

    position:
        absolute;

    width:
        2px;

    height:
        2px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 0 8px #ffffff;

    animation:
        teamTwinkle
        ease-in-out
        infinite;

}


@keyframes teamTwinkle {

    0%,
    100% {

        opacity:
            0.15;

        transform:
            scale(0.5);

    }

    50% {

        opacity:
            1;

        transform:
            scale(1.6);

    }

}


/* =====================================================
   SHOOTING STARS
===================================================== */

.team-shooting-star {

    position:
        absolute;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #ffffff;

    box-shadow:
        0 0 10px #ffffff,
        0 0 25px #1688ff;

    opacity:
        0;

}


.team-shooting-star::after {

    content:
        "";

    position:
        absolute;

    top:
        2px;

    right:
        0;

    width:
        150px;

    height:
        2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1688ff,
            #ffffff
        );

    transform:
        rotate(-35deg);

}


.shooting-star-1 {

    top:
        18%;

    left:
        90%;

    animation:
        teamShootingStar
        8s
        linear
        infinite;

}


.shooting-star-2 {

    top:
        50%;

    left:
        80%;

    animation:
        teamShootingStar
        11s
        linear
        3s
        infinite;

}


.shooting-star-3 {

    top:
        70%;

    left:
        95%;

    animation:
        teamShootingStar
        13s
        linear
        6s
        infinite;

}


@keyframes teamShootingStar {

    0% {

        opacity:
            0;

        transform:
            translate(0, 0);

    }

    5% {

        opacity:
            1;

    }

    20% {

        opacity:
            1;

        transform:
            translate(-700px, 420px);

    }

    23% {

        opacity:
            0;

    }

    100% {

        opacity:
            0;

    }

}


/* =====================================================
   SECTION HEADING
===================================================== */

.team-heading {

    max-width:
        750px;

    margin:
        0 auto 65px;

    text-align:
        center;

}


.team-label {

    display:
        inline-flex;

    align-items:
        center;

    color:
        #3b9cff;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

    margin-bottom:
        20px;

}


.team-label span {

    display:
        inline-block;

    width:
        35px;

    height:
        1px;

    margin-right:
        10px;

    background:
        #1688ff;

}


.team-heading h2 {

    margin:
        0 0 20px;

    color:
        #ffffff;

    font-size:
        clamp(40px, 5vw, 62px);

    line-height:
        1.05;

    letter-spacing:
        -2px;

}


.team-heading h2 span {

    display:
        block;

    color:
        #3b9cff;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            #3b9cff,
            #ffffff
        );

    background-size:
        200% auto;

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    animation:
        teamGradient 5s linear infinite;

}


@keyframes teamGradient {

    from {

        background-position:
            0% center;

    }

    to {

        background-position:
            200% center;

    }

}


.team-heading p {

    max-width:
        650px;

    margin:
        auto;

    color:
        #aebfd1;

    font-size:
        14px;

    line-height:
        1.8;

}


/* =====================================================
   TEAM GRID
===================================================== */

.team-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        20px;

}


/* =====================================================
   TEAM CARD
===================================================== */

.team-card {

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,0.09);

    border-radius:
        12px;

    background:
        rgba(5,18,32,0.85);

    opacity:
        0;

    transform:
        translateY(60px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;

}


.team-card:nth-child(2) {

    transition-delay:
        0.15s;

}


.team-card:nth-child(3) {

    transition-delay:
        0.3s;

}


.team-card:nth-child(4) {

    transition-delay:
        0.45s;

}


.team-card.team-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


.team-card:hover {

    transform:
        translateY(-12px);

    border-color:
        rgba(22,136,255,0.55);

    box-shadow:
        0 25px 60px
        rgba(0,90,200,0.16);

}


/* =====================================================
   IMAGE
===================================================== */

.team-image-wrapper {

    position:
        relative;

    height:
        330px;

    overflow:
        hidden;

    background:
        #071525;

}


.team-image {

    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    object-position:
        center;

    filter:
        grayscale(15%);

    transition:
        transform 0.8s ease,
        filter 0.5s ease;

}


.team-card:hover .team-image {

    transform:
        scale(1.08);

    filter:
        grayscale(0%);

}


/* =====================================================
   IMAGE OVERLAY
===================================================== */

.team-image-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            to top,
            rgba(2,9,20,0.85),
            transparent 55%
        );

    pointer-events:
        none;

}


/* =====================================================
   IMAGE GLOW
===================================================== */

.team-image-glow {

    position:
        absolute;

    width:
        180px;

    height:
        180px;

    top:
        -100px;

    right:
        -80px;

    border-radius:
        50%;

    background:
        rgba(22,136,255,0.22);

    filter:
        blur(35px);

    z-index:
        2;

    transition:
        transform 0.6s ease;

}


.team-card:hover
.team-image-glow {

    transform:
        translate(-80px, 100px)
        scale(1.4);

}


/* =====================================================
   NUMBER
===================================================== */

.team-number {

    position:
        absolute;

    top:
        18px;

    right:
        18px;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    border:
        1px solid
        rgba(255,255,255,0.2);

    border-radius:
        50%;

    color:
        #ffffff;

    background:
        rgba(2,9,20,0.65);

    backdrop-filter:
        blur(8px);

    font-size:
        10px;

}


/* =====================================================
   TEAM INFORMATION
===================================================== */

.team-info {

    position:
        relative;

    padding:
        25px;

}


.team-role {

    color:
        #3b9cff;

    font-size:
        9px;

    font-weight:
        700;

    letter-spacing:
        1.5px;

    margin-bottom:
        9px;

}


.team-info h3 {

    margin:
        0 0 12px;

    color:
        #ffffff;

    font-size:
        21px;

    line-height:
        1.2;

}


.team-info p {

    min-height:
        75px;

    margin:
        0;

    color:
        #91a7bd;

    font-size:
        11px;

    line-height:
        1.7;

}


/* =====================================================
   TEAM LINE
===================================================== */

.team-line {

    width:
        40px;

    height:
        2px;

    margin-top:
        20px;

    background:
        #1688ff;

    transition:
        width 0.4s ease;

}


.team-card:hover
.team-line {

    width:
        80px;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .team-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 650px) {

    .team-section {

        padding:
            75px 0;

    }


    .team-heading {

        margin-bottom:
            45px;

    }


    .team-heading h2 {

        font-size:
            42px;

    }


    .team-heading p {

        font-size:
            13px;

    }


    .team-grid {

        grid-template-columns:
            1fr;

        gap:
            22px;

    }


    .team-image-wrapper {

        height:
            380px;

    }


    .team-info {

        padding:
            23px;

    }


    .team-info p {

        min-height:
            auto;

    }


    .team-shooting-star::after {

        width:
            90px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .team-heading h2 {

        font-size:
            36px;

    }


    .team-image-wrapper {

        height:
            330px;

    }

}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .team-section *,
    .team-section *::before,
    .team-section *::after {

        animation:
            none !important;

        transition:
            none !important;

    }

}/* End custom CSS */