/* ======================================== */
/* ABOUT SECTION */
/* ======================================== */

.about-section{

    height:100%;

    display:flex;

    align-items:center;

    padding-top:96px;

    padding-bottom:0;

    background:
    radial-gradient(
        circle at top right,
        rgba(45,140,255,0.10),
        transparent 30%
    ),

    radial-gradient(
        circle at bottom left,
        rgba(0,255,180,0.08),
        transparent 30%
    ),

    #050816;
}

/* ======================================== */
/* ABOUT CONTENT */
/* ======================================== */

.about-content{

    max-width:560px;
}

/* ======================================== */
/* TAG */
/* ======================================== */

.about-tag{

    display:inline-block;

    margin-bottom:16px;

    color:#2d8cff;

    font-size:13px;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;
}

/* ======================================== */
/* TITLE */
/* ======================================== */

.about-title{

    font-size:42px;

    font-weight:800;

    line-height:0.96;

    letter-spacing:-2px;

    margin-bottom:18px;

    color:white;
}

/* ======================================== */
/* TEXT */
/* ======================================== */

.about-text{

    color:#aeb9d6;

    font-size:14px;

    line-height:1.58;

    margin-bottom:16px;

    max-width:500px;
}

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

.about-grid{

    display:grid;

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

    gap:16px;
}

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

.about-card{

    background:
    linear-gradient(
        135deg,
        rgba(9,17,31,0.95),
        rgba(13,24,48,0.96)
    );

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

    border-radius:22px;

    padding:18px;

    transition:0.35s;

    backdrop-filter:blur(14px);

    min-height:150px;

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.about-card:hover{

    transform:translateY(-4px);

    border-color:
    rgba(45,140,255,0.22);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.35);
}

/* ======================================== */
/* CARD TITLE */
/* ======================================== */

.about-card h3{

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

    color:white;
}

/* ======================================== */
/* CARD TEXT */
/* ======================================== */

.about-card p{

    color:#aeb9d6;

    font-size:13px;

    line-height:1.5;

    margin:0;
}

/* ======================================== */
/* TEAM SECTION */
/* ======================================== */

.team-section{

    margin-top:16px;
}

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

.team-card{

    background:
    linear-gradient(
        135deg,
        rgba(9,17,31,0.95),
        rgba(13,24,48,0.96)
    );

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

    border-radius:22px;

    padding:18px;

    transition:0.35s;

    backdrop-filter:blur(14px);

    height:100%;
}

.team-card:hover{

    transform:translateY(-3px);

    border-color:
    rgba(45,140,255,0.22);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.35);
}

/* ======================================== */
/* ROLE */
/* ======================================== */

.team-role{

    display:inline-block;

    margin-bottom:10px;

    color:#2d8cff;

    font-size:11px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:600;
}

/* ======================================== */
/* NAME */
/* ======================================== */

.team-card h3{

    font-size:19px;

    font-weight:700;

    margin-bottom:8px;

    color:white;
}

/* ======================================== */
/* TEXT */
/* ======================================== */

.team-card p{

    color:#aeb9d6;

    font-size:13px;

    line-height:1.45;

    margin:0;
}

/* ======================================== */
/* RESPONSIVE */
/* ======================================== */

@media(max-width:991px){

    .about-section{

        padding-top:95px;

        padding-bottom:40px;

        height:auto;
    }

    .about-content{

        max-width:100%;

        margin-bottom:28px;
    }

    .about-title{

        font-size:36px;
    }

    .team-section{

        margin-top:22px;
    }
}

@media(max-width:768px){

    .about-grid{

        grid-template-columns:1fr;
    }

    .about-title{

        font-size:30px;

        line-height:1;
    }

    .about-text{

        font-size:14px;
    }

    .about-card{

        min-height:auto;
    }

    .team-card h3{

        font-size:18px;
    }
}