/* =========================================================
   ANEET LAW ASSOCIATES
   MAIN WEBSITE STYLESHEET
   Light Premium Legal / Taxation Theme
========================================================= */


/* =========================================================
   ROOT VARIABLES
========================================================= */

:root {

    --primary: #075ec8;
    --primary-dark: #064a9e;
    --primary-light: #eaf3ff;

    --navy: #102b4e;
    --dark: #172b44;

    --text: #536273;
    --muted: #7b8795;

    --white: #ffffff;
    --light: #f7faff;
    --lighter: #fbfdff;

    --border: #e6edf5;

    --shadow-sm:
        0 8px 25px rgba(16, 43, 78, 0.06);

    --shadow:
        0 20px 55px rgba(16, 43, 78, 0.10);

    --shadow-lg:
        0 30px 80px rgba(16, 43, 78, 0.13);

    --radius-sm: 10px;
    --radius: 18px;
    --radius-lg: 28px;

    --container: 1240px;

    --transition:
        all 0.3s ease;

}


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

* {

    margin: 0;
    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    background:
        var(--white);

    color:
        var(--dark);

    line-height: 1.7;

    overflow-x: hidden;

}


img {

    max-width: 100%;

    display: block;

}


a {

    text-decoration: none;

    color: inherit;

}


button,
input,
textarea,
select {

    font-family: inherit;

}


button {

    cursor: pointer;

}


.container {

    width: min(
        calc(100% - 40px),
        var(--container)
    );

    margin: 0 auto;

}


.section-padding {

    padding:
        110px 0;

}


/* =========================================================
   HEADER
========================================================= */

.site-header {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

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

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid transparent;

    transition:
        var(--transition);

}


.site-header.scrolled {

    border-bottom-color:
        var(--border);

    box-shadow:
        0 8px 30px
        rgba(16, 43, 78, 0.07);

}


.header-container {

    height: 88px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


/* =========================================================
   BRAND
========================================================= */

.brand {

    display: flex;

    align-items: center;

    gap: 13px;

    min-width: 0;

}


.brand-logo {

    width: 58px;

    height: 58px;

    object-fit: contain;

    flex-shrink: 0;

}


.brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.2;

}


.brand-name {

    color:
        var(--navy);

    font-size: 17px;

    font-weight: 800;

    letter-spacing:
        -0.3px;

}


.brand-tagline {

    margin-top: 5px;

    color:
        var(--primary);

    font-size: 10px;

    font-weight: 600;

    letter-spacing:
        0.4px;

    text-transform:
        uppercase;

}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.main-navigation {

    display: flex;

    align-items: center;

    gap: 28px;

}


.nav-link {

    position: relative;

    color:
        #516174;

    font-size: 14px;

    font-weight: 600;

    padding: 33px 0;

    transition:
        var(--transition);

}


.nav-link:hover,
.nav-link.active {

    color:
        var(--primary);

}


.nav-link::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: 23px;

    width: 0;

    height: 2px;

    border-radius: 20px;

    background:
        var(--primary);

    transition:
        var(--transition);

}


.nav-link:hover::after,
.nav-link.active::after {

    width: 100%;

}


/* =========================================================
   CLIENT LOGIN
========================================================= */

.client-login-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding:
        12px 21px;

    color:
        var(--white);

    background:
        var(--primary);

    border-radius:
        9px;

    font-size: 13px;

    font-weight: 700;

    box-shadow:
        0 8px 22px
        rgba(7, 94, 200, 0.20);

    transition:
        var(--transition);

}


.client-login-btn:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px
        rgba(7, 94, 200, 0.28);

}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.mobile-menu-btn {

    width: 45px;

    height: 45px;

    border: 0;

    border-radius: 10px;

    background:
        var(--primary-light);

    display: none;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

}


.mobile-menu-btn span {

    display: block;

    width: 21px;

    height: 2px;

    border-radius: 10px;

    background:
        var(--primary);

    transition:
        var(--transition);

}


.mobile-menu-btn.active span:nth-child(1) {

    transform:
        translateY(7px)
        rotate(45deg);

}


.mobile-menu-btn.active span:nth-child(2) {

    opacity: 0;

}


.mobile-menu-btn.active span:nth-child(3) {

    transform:
        translateY(-7px)
        rotate(-45deg);

}


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

.mobile-navigation {

    display: none;

    position: absolute;

    top: 88px;

    left: 0;

    width: 100%;

    padding: 15px 20px 25px;

    background:
        var(--white);

    border-top:
        1px solid var(--border);

    box-shadow:
        var(--shadow);

}


.mobile-navigation.open {

    display: flex;

    flex-direction: column;

}


.mobile-nav-link {

    padding:
        13px 5px;

    color:
        var(--navy);

    font-size: 15px;

    font-weight: 600;

    border-bottom:
        1px solid var(--border);

}


.mobile-nav-link:hover {

    color:
        var(--primary);

}


.mobile-client-login {

    margin-top: 15px;

    padding:
        13px;

    text-align: center;

    border-radius:
        9px;

    color:
        var(--white);

    background:
        var(--primary);

    font-weight: 700;

}


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

.hero-section {

    position: relative;

    min-height:
        780px;

    padding-top:
        88px;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8fbff 55%,
            #eef6ff 100%
        );

}


.hero-container {

    min-height:
        692px;

    display:
        grid;

    grid-template-columns:
        1.05fr
        0.95fr;

    align-items:
        center;

    gap:
        70px;

}


.hero-content {

    position:
        relative;

    z-index:
        3;

}


.hero-badge {

    display:
        inline-flex;

    align-items:
        center;

    padding:
        8px 14px;

    margin-bottom:
        22px;

    border:
        1px solid #dceafd;

    border-radius:
        50px;

    background:
        rgba(255,255,255,.85);

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.2px;

}


.hero-content h1 {

    max-width:
        700px;

    color:
        var(--navy);

    font-size:
        clamp(42px, 5vw, 68px);

    line-height:
        1.08;

    letter-spacing:
        -2.4px;

    font-weight:
        800;

}


.hero-content h1 span {

    display:
        block;

    color:
        var(--primary);

}


.hero-description {

    max-width:
        640px;

    margin-top:
        25px;

    color:
        var(--text);

    font-size:
        16px;

    line-height:
        1.9;

}


.hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    margin-top:
        32px;

}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        50px;

    padding:
        0 22px;

    border-radius:
        9px;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        var(--transition);

}


.btn-primary {

    color:
        var(--white);

    background:
        var(--primary);

    box-shadow:
        0 10px 28px
        rgba(7, 94, 200, .20);

}


.btn-primary:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-3px);

}


.btn-outline {

    color:
        var(--primary);

    background:
        var(--white);

    border:
        1px solid #cbdff7;

}


.btn-outline:hover {

    background:
        var(--primary-light);

    border-color:
        var(--primary);

    transform:
        translateY(-3px);

}


.hero-trust {

    display:
        flex;

    align-items:
        center;

    margin-top:
        45px;

}


.trust-item {

    display:
        flex;

    flex-direction:
        column;

}


.trust-item strong {

    color:
        var(--navy);

    font-size:
        13px;

}


.trust-item span {

    color:
        var(--muted);

    font-size:
        10px;

    margin-top:
        2px;

}


.trust-divider {

    width:
        1px;

    height:
        35px;

    background:
        #dce5ef;

    margin:
        0 22px;

}


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

.hero-visual {

    position:
        relative;

    min-height:
        570px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.hero-circle {

    position:
        relative;

    width:
        min(500px, 100%);

    aspect-ratio:
        1 / 1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        radial-gradient(
            circle,
            #eaf4ff 0%,
            #f4f9ff 48%,
            rgba(255,255,255,0) 70%
        );

}


.circle-ring {

    position:
        absolute;

    border:
        1px solid #d4e6fa;

    border-radius:
        50%;

}


.circle-ring-one {

    width:
        86%;

    height:
        86%;

}


.circle-ring-two {

    width:
        100%;

    height:
        100%;

    border-style:
        dashed;

    opacity:
        .65;

    animation:
        rotateRing 25s linear infinite;

}


@keyframes rotateRing {

    from {
        transform:
            rotate(0deg);
    }

    to {
        transform:
            rotate(360deg);
    }

}


.hero-logo-card {

    position:
        relative;

    z-index:
        3;

    width:
        280px;

    height:
        280px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        25px;

    border:
        1px solid rgba(255,255,255,.9);

    border-radius:
        50%;

    background:
        rgba(255,255,255,.90);

    box-shadow:
        0 30px 80px
        rgba(7,94,200,.15);

    animation:
        floatingLogo 5s ease-in-out infinite;

}


.hero-logo {

    width:
        100%;

    height:
        100%;

    object-fit:
        contain;

}


@keyframes floatingLogo {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* =========================================================
   FLOATING CARDS
========================================================= */

.floating-card {

    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    padding:
        13px 16px;

    border:
        1px solid rgba(255,255,255,.9);

    border-radius:
        13px;

    background:
        rgba(255,255,255,.92);

    box-shadow:
        0 15px 40px
        rgba(16,43,78,.12);

    backdrop-filter:
        blur(12px);

}


.floating-card strong {

    display:
        block;

    color:
        var(--navy);

    font-size:
        11px;

}


.floating-card small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        9px;

}


.floating-card-top {

    top:
        17%;

    right:
        0;

    animation:
        floatingTop 5s ease-in-out infinite;

}


.floating-card-bottom {

    bottom:
        17%;

    left:
        0;

    animation:
        floatingBottom 5s ease-in-out infinite;

}


.floating-icon {

    width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-weight:
        800;

}


@keyframes floatingTop {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-8px);
    }

}


@keyframes floatingBottom {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(8px);
    }

}


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

.hero-decoration {

    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

}


.hero-decoration-one {

    width:
        500px;

    height:
        500px;

    top:
        -300px;

    right:
        -150px;

    background:
        rgba(7,94,200,.055);

}


.hero-decoration-two {

    width:
        350px;

    height:
        350px;

    bottom:
        -220px;

    left:
        -120px;

    background:
        rgba(7,94,200,.04);

}


.hero-indicators {

    position:
        absolute;

    left:
        50%;

    bottom:
        28px;

    transform:
        translateX(-50%);

    display:
        flex;

    gap:
        7px;

}


.hero-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #cbdff7;

}


.hero-dot.active {

    width:
        25px;

    border-radius:
        10px;

    background:
        var(--primary);

}


/* =========================================================
   SECTION HEADINGS
========================================================= */

.section-heading {

    max-width:
        700px;

    margin-bottom:
        55px;

}


.center-heading {

    margin-left:
        auto;

    margin-right:
        auto;

    text-align:
        center;

}


.section-label {

    display:
        inline-block;

    margin-bottom:
        13px;

    color:
        var(--primary);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        1.6px;

}


.section-heading h2,
.why-content h2,
.contact-content h2 {

    color:
        var(--navy);

    font-size:
        clamp(31px, 4vw, 46px);

    line-height:
        1.15;

    letter-spacing:
        -1.2px;

}


.section-heading h2 span,
.why-content h2 span,
.contact-content h2 span {

    color:
        var(--primary);

}


.section-heading p {

    max-width:
        650px;

    margin-top:
        15px;

    color:
        var(--text);

    font-size:
        15px;

}


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

.about-section {

    background:
        var(--white);

}


.about-grid {

    display:
        grid;

    grid-template-columns:
        .85fr
        1.15fr;

    gap:
        80px;

    align-items:
        start;

}


.about-content h3 {

    color:
        var(--navy);

    font-size:
        28px;

    line-height:
        1.3;

}


.about-content p {

    margin-top:
        18px;

    color:
        var(--text);

    font-size:
        15px;

}


.text-link {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    margin-top:
        25px;

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        700;

}


.text-link:hover span {

    transform:
        translateX(5px);

}


.text-link span {

    transition:
        var(--transition);

}


.about-features {

    display:
        grid;

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

    gap:
        18px;

}


.about-feature-card {

    padding:
        27px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--lighter);

    transition:
        var(--transition);

}


.about-feature-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #cde0f7;

    box-shadow:
        var(--shadow-sm);

}


.feature-number {

    color:
        #a9bfd9;

    font-size:
        12px;

    font-weight:
        800;

}


.about-feature-card h4 {

    margin-top:
        12px;

    color:
        var(--navy);

    font-size:
        16px;

}


.about-feature-card p {

    margin-top:
        7px;

    color:
        var(--text);

    font-size:
        13px;

    line-height:
        1.7;

}


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

.services-section {

    background:
        var(--light);

}


.services-grid {

    display:
        grid;

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

    gap:
        20px;

}


.service-card {

    position:
        relative;

    padding:
        32px;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

    transition:
        var(--transition);

}


.service-card:hover {

    transform:
        translateY(-7px);

    box-shadow:
        var(--shadow);

    border-color:
        #cfe2f8;

}


.service-number {

    position:
        absolute;

    top:
        18px;

    right:
        22px;

    color:
        #e7eff8;

    font-size:
        30px;

    font-weight:
        800;

}


.service-icon {

    width:
        48px;

    height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        19px;

    font-weight:
        800;

}


.service-card h3 {

    margin-top:
        22px;

    color:
        var(--navy);

    font-size:
        18px;

}


.service-card p {

    margin-top:
        9px;

    color:
        var(--text);

    font-size:
        13px;

    line-height:
        1.8;

}


.service-link {

    display:
        inline-block;

    margin-top:
        20px;

    color:
        var(--primary);

    font-size:
        12px;

    font-weight:
        700;

}


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

.why-section {

    background:
        var(--white);

}


.why-grid {

    display:
        grid;

    grid-template-columns:
        .75fr
        1.25fr;

    gap:
        90px;

    align-items:
        center;

}


.why-content p {

    max-width:
        500px;

    margin-top:
        18px;

    color:
        var(--text);

    font-size:
        15px;

}


.why-content .btn {

    margin-top:
        28px;

}


.why-cards {

    display:
        grid;

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

    gap:
        18px;

}


.why-card {

    display:
        flex;

    gap:
        15px;

    padding:
        25px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--lighter);

    transition:
        var(--transition);

}


.why-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow-sm);

}


.why-icon {

    width:
        43px;

    height:
        43px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        16px;

    font-weight:
        800;

}


.why-card h3 {

    color:
        var(--navy);

    font-size:
        15px;

}


.why-card p {

    margin-top:
        5px;

    color:
        var(--text);

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
   TESTIMONIALS
========================================================= */

.testimonials-section {

    background:
        var(--light);

}


.testimonials-grid {

    display:
        grid;

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

    gap:
        20px;

}


.testimonial-card {

    position:
        relative;

    padding:
        30px;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    background:
        var(--white);

}


.quote-mark {

    color:
        #d8e9fb;

    font-family:
        Georgia,
        serif;

    font-size:
        65px;

    line-height:
        .6;

}


.testimonial-card > p {

    margin-top:
        15px;

    color:
        var(--text);

    font-size:
        14px;

    line-height:
        1.8;

}


.client-info {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    margin-top:
        25px;

}


.client-avatar {

    width:
        40px;

    height:
        40px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        50%;

    background:
        var(--primary-light);

    color:
        var(--primary);

    font-size:
        13px;

    font-weight:
        800;

}


.client-info strong,
.client-info span {

    display:
        block;

}


.client-info strong {

    color:
        var(--navy);

    font-size:
        12px;

}


.client-info span {

    color:
        var(--muted);

    font-size:
        10px;

}


/* =========================================================
   CONTACT
========================================================= */

.contact-section {

    background:
        var(--white);

}


.contact-box {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    overflow:
        hidden;

    border:
        1px solid var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--light);

    box-shadow:
        var(--shadow-sm);

}


.contact-content {

    padding:
        55px;

}


.contact-content > p {

    max-width:
        500px;

    margin-top:
        17px;

    color:
        var(--text);

    font-size:
        14px;

}


.contact-details {

    margin-top:
        35px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        22px;

}


.contact-item {

    display:
        flex;

    align-items:
        center;

    gap:
        13px;

}


.contact-icon {

    width:
        43px;

    height:
        43px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        var(--white);

    color:
        var(--primary);

    box-shadow:
        var(--shadow-sm);

}


.contact-item span,
.contact-item strong {

    display:
        block;

}


.contact-item span {

    color:
        var(--muted);

    font-size:
        10px;

}


.contact-item strong {

    margin-top:
        2px;

    color:
        var(--navy);

    font-size:
        13px;

}


.contact-form-wrapper {

    padding:
        45px;

    background:
        var(--white);

}


.contact-form {

    width:
        100%;

}


.form-row {

    display:
        grid;

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

    gap:
        15px;

}


.form-group {

    margin-bottom:
        17px;

}


.form-group label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        var(--navy);

    font-size:
        11px;

    font-weight:
        700;

}


.form-group input,
.form-group textarea,
.form-group select {

    width:
        100%;

    border:
        1px solid var(--border);

    border-radius:
        8px;

    outline:
        none;

    background:
        #fbfdff;

    color:
        var(--navy);

    font-size:
        13px;

    padding:
        12px 14px;

    transition:
        var(--transition);

}


.form-group input,
.form-group select {

    height:
        46px;

}


.form-group textarea {

    resize:
        vertical;

    min-height:
        110px;

}


.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {

    border-color:
        #8cb8e8;

    background:
        var(--white);

    box-shadow:
        0 0 0 3px
        rgba(7,94,200,.06);

}


.form-submit {

    border:
        0;

    width:
        auto;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {

    padding-top:
        75px;

    background:
        #f5f9fe;

    border-top:
        1px solid var(--border);

}


.footer-grid {

    display:
        grid;

    grid-template-columns:
        1.5fr
        1fr
        1fr
        1.2fr;

    gap:
        45px;

    padding-bottom:
        55px;

}


.footer-logo {

    width:
        68px;

    height:
        68px;

    object-fit:
        contain;

}


.footer-brand h3 {

    margin-top:
        15px;

    color:
        var(--navy);

    font-size:
        18px;

}


.footer-brand p {

    max-width:
        300px;

    margin-top:
        10px;

    color:
        var(--text);

    font-size:
        12px;

    line-height:
        1.8;

}


.footer-column {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

}


.footer-column h4 {

    margin-bottom:
        16px;

    color:
        var(--navy);

    font-size:
        14px;

}


.footer-column a {

    margin-bottom:
        9px;

    color:
        var(--text);

    font-size:
        12px;

    transition:
        var(--transition);

}


.footer-column a:hover {

    color:
        var(--primary);

    transform:
        translateX(3px);

}


.footer-column p {

    color:
        var(--text);

    font-size:
        12px;

    line-height:
        1.8;

}


.footer-login {

    margin-top:
        12px;

    color:
        var(--primary) !important;

    font-weight:
        700;

}


.footer-bottom {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    border-top:
        1px solid var(--border);

    color:
        var(--muted);

    font-size:
        10px;

}


/* =========================================================
   RESPONSIVE — TABLET
========================================================= */

@media (max-width: 1100px) {


    .main-navigation {

        gap:
            18px;

    }


    .nav-link {

        font-size:
            12px;

    }


    .client-login-btn {

        padding:
            10px 15px;

    }


    .hero-container {

        gap:
            35px;

    }


    .hero-content h1 {

        font-size:
            50px;

    }


    .hero-logo-card {

        width:
            235px;

        height:
            235px;

    }


    .floating-card-top {

        right:
            -10px;

    }


    .floating-card-bottom {

        left:
            -10px;

    }


    .about-grid {

        gap:
            45px;

    }


    .why-grid {

        gap:
            45px;

    }


    .footer-grid {

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

    }

}


/* =========================================================
   RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 800px) {


    .container {

        width:
            min(
                calc(100% - 30px),
                var(--container)
            );

    }


    .section-padding {

        padding:
            75px 0;

    }


    /* HEADER */

    .header-container {

        height:
            74px;

    }


    .brand-logo {

        width:
            48px;

        height:
            48px;

    }


    .brand-name {

        font-size:
            14px;

    }


    .brand-tagline {

        font-size:
            8px;

    }


    .main-navigation {

        display:
            none;

    }


    .mobile-menu-btn {

        display:
            flex;

    }


    .mobile-navigation {

        top:
            74px;

    }


    /* HERO */

    .hero-section {

        min-height:
            auto;

        padding-top:
            74px;

        padding-bottom:
            70px;

    }


    .hero-container {

        min-height:
            auto;

        grid-template-columns:
            1fr;

        gap:
            25px;

        padding-top:
            65px;

    }


    .hero-content {

        text-align:
            center;

    }


    .hero-badge {

        font-size:
            9px;

        letter-spacing:
            .8px;

    }


    .hero-content h1 {

        font-size:
            clamp(36px, 11vw, 50px);

        letter-spacing:
            -1.5px;

    }


    .hero-description {

        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            14px;

        line-height:
            1.8;

    }


    .hero-buttons {

        justify-content:
            center;

        flex-wrap:
            wrap;

    }


    .hero-trust {

        justify-content:
            center;

    }


    .trust-divider {

        margin:
            0 12px;

    }


    .trust-item strong {

        font-size:
            10px;

    }


    .trust-item span {

        font-size:
            8px;

    }


    .hero-visual {

        min-height:
            390px;

    }


    .hero-circle {

        width:
            min(360px, 100%);

    }


    .hero-logo-card {

        width:
            190px;

        height:
            190px;

        padding:
            18px;

    }


    .floating-card {

        padding:
            10px 12px;

    }


    .floating-card-top {

        top:
            10%;

        right:
            0;

    }


    .floating-card-bottom {

        bottom:
            10%;

        left:
            0;

    }


    .floating-card strong {

        font-size:
            9px;

    }


    .floating-card small {

        font-size:
            8px;

    }


    .floating-icon {

        width:
            28px;

        height:
            28px;

    }


    .hero-indicators {

        bottom:
            18px;

    }


    /* ABOUT */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .about-content {

        text-align:
            center;

    }


    .about-content h3 {

        font-size:
            24px;

    }


    .about-features {

        grid-template-columns:
            1fr;

    }


    /* SERVICES */

    .services-grid {

        grid-template-columns:
            1fr;

    }


    /* WHY */

    .why-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;

    }


    .why-content {

        text-align:
            center;

    }


    .why-content p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .why-cards {

        grid-template-columns:
            1fr;

    }


    /* TESTIMONIALS */

    .testimonials-grid {

        grid-template-columns:
            1fr;

    }


    /* CONTACT */

    .contact-box {

        grid-template-columns:
            1fr;

    }


    .contact-content {

        padding:
            35px 25px;

    }


    .contact-form-wrapper {

        padding:
            30px 25px;

    }


    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;

    }


    .footer-bottom {

        padding:
            20px 0;

        flex-direction:
            column;

        justify-content:
            center;

        text-align:
            center;

    }

}


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

@media (max-width: 420px) {


    .brand-text {

        display:
            none;

    }


    .hero-container {

        padding-top:
            45px;

    }


    .hero-buttons {

        flex-direction:
            column;

        width:
            100%;

    }


    .hero-buttons .btn {

        width:
            100%;

    }


    .hero-trust {

        width:
            100%;

    }


    .trust-divider {

        margin:
            0 7px;

    }


    .trust-item {

        text-align:
            center;

    }


    .hero-visual {

        min-height:
            330px;

    }


    .hero-logo-card {

        width:
            160px;

        height:
            160px;

    }


    .floating-card {

        transform:
            scale(.82);

    }


    .floating-card-top {

        right:
            -13px;

    }


    .floating-card-bottom {

        left:
            -13px;

    }


    .section-heading {

        margin-bottom:
            40px;

    }


    .section-heading h2,
    .why-content h2,
    .contact-content h2 {

        font-size:
            29px;

    }


    .contact-content {

        padding:
            30px 20px;

    }


    .contact-form-wrapper {

        padding:
            25px 20px;

    }

}


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

:focus-visible {

    outline:
        3px solid
        rgba(7,94,200,.25);

    outline-offset:
        3px;

}


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

@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;

    }

}




/* =========================================================
   CLIENT PORTAL
========================================================= */

.client-portal,
.admin-portal{
    background:#f6f9fd;
    min-height:100vh;
    font-family:'Inter',sans-serif;
}

.client-header,
.admin-header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:78px;
    background:#fff;
    border-bottom:1px solid #e6edf5;
    z-index:999;
    box-shadow:0 8px 20px rgba(0,0,0,.03);
}

.client-header-inner,
.admin-header-inner{
    max-width:1400px;
    margin:auto;
    height:100%;
    padding:0 30px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.client-brand img,
.admin-brand img{
    height:48px;
}

.client-user-mini,
.admin-user{
    display:flex;
    align-items:center;
    gap:12px;
}

.client-avatar,
.large-client-avatar{
    background:#0A5CCB;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    border-radius:50%;
}

.client-avatar{
    width:42px;
    height:42px;
}

.large-client-avatar{
    width:72px;
    height:72px;
    font-size:26px;
    margin:auto;
}

.client-header-right,
.admin-header-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.client-logout,
.admin-logout{
    background:#0A5CCB;
    color:#fff;
    padding:10px 18px;
    border-radius:8px;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.client-logout:hover,
.admin-logout:hover{
    background:#084ea9;
}

/* =========================================================
   LAYOUT
========================================================= */

.client-layout,
.admin-layout{
    display:flex;
    padding-top:78px;
}

.client-sidebar,
.admin-sidebar{
    width:260px;
    min-height:calc(100vh - 78px);
    background:#fff;
    border-right:1px solid #e6edf5;
    padding:30px 20px;
    position:sticky;
    top:78px;
}

.sidebar-client-info{
    text-align:center;
    margin-bottom:30px;
}

.sidebar-client-info strong{
    display:block;
    margin-top:14px;
    color:#102B4E;
}

.sidebar-client-info span{
    font-size:13px;
    color:#6c7b90;
}

.client-nav,
.admin-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.client-nav a,
.admin-nav a{
    padding:12px 14px;
    border-radius:10px;
    color:#4f6177;
    font-weight:500;
    transition:.3s;
}

.client-nav a:hover,
.admin-nav a:hover,
.client-nav a.active,
.admin-nav a.active{
    background:#eaf3ff;
    color:#0A5CCB;
    font-weight:600;
}

.sidebar-divider,
.admin-nav-divider{
    height:1px;
    background:#e6edf5;
    margin:15px 0;
}

.client-main,
.admin-main{
    flex:1;
    padding:35px;
}

.client-page-heading span,
.admin-page-header span{
    color:#0A5CCB;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
}

.client-page-heading h1,
.admin-page-header h1{
    margin-top:6px;
    font-size:34px;
    color:#102B4E;
}

.client-page-heading p,
.admin-page-header p{
    margin-top:10px;
    color:#66788f;
}

/* =========================================================
   STAT CARDS
========================================================= */

.client-stat-grid,
.admin-stat-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:20px;
    margin:30px 0;
}

.client-stat-card,
.admin-stat-card{
    background:#fff;
    border-radius:18px;
    padding:24px;
    border:1px solid #e8eef7;
    box-shadow:0 12px 30px rgba(16,43,78,.04);
    display:flex;
    align-items:center;
    gap:18px;
}

.stat-icon{
    width:56px;
    height:56px;
    background:#eaf3ff;
    color:#0A5CCB;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
}

.client-stat-card span,
.admin-stat-card span{
    display:block;
    font-size:12px;
    color:#71839a;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.client-stat-card strong,
.admin-stat-card strong{
    display:block;
    font-size:30px;
    color:#102B4E;
    margin-top:6px;
}

.status-active{
    color:#18A558;
}

/* =========================================================
   CONTENT CARDS
========================================================= */

.client-content-card,
.admin-card,
.profile-card{
    background:#fff;
    border-radius:20px;
    padding:30px;
    border:1px solid #e8eef7;
    box-shadow:0 12px 30px rgba(16,43,78,.04);
    margin-bottom:28px;
}

.content-card-header,
.admin-card-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:25px;
}

.content-card-header span,
.admin-card-header span{
    color:#0A5CCB;
    font-size:12px;
    font-weight:700;
    letter-spacing:.8px;
}

.content-card-header h2,
.admin-card-header h2{
    margin-top:5px;
    color:#102B4E;
    font-size:24px;
}

.view-all-link{
    color:#0A5CCB;
    font-weight:600;
}

/* =========================================================
   TABLES
========================================================= */

.certificate-table-wrapper,
.admin-table-wrapper{
    overflow:auto;
}

.certificate-table,
.admin-table{
    width:100%;
    border-collapse:collapse;
}

.certificate-table th,
.admin-table th{
    text-align:left;
    padding:15px;
    background:#f8fbff;
    color:#4f6177;
    font-size:13px;
}

.certificate-table td,
.admin-table td{
    padding:18px 15px;
    border-top:1px solid #edf2f8;
    color:#55677d;
    font-size:14px;
}

.document-name{
    display:flex;
    align-items:center;
    gap:12px;
}

.document-icon{
    width:44px;
    height:44px;
    background:#eaf3ff;
    color:#0A5CCB;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.download-btn{
    background:#0A5CCB;
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    font-size:13px;
    font-weight:600;
}

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

.certificate-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:20px;
}

.certificate-card{
    border:1px solid #e8eef7;
    border-radius:18px;
    padding:24px;
    transition:.3s;
    background:#fff;
}

.certificate-card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px rgba(16,43,78,.08);
}

.certificate-file-icon{
    width:52px;
    height:52px;
    background:#eaf3ff;
    color:#0A5CCB;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.certificate-badge{
    background:#eef6ff;
    color:#0A5CCB;
    padding:5px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.certificate-card h3{
    margin:18px 0 10px;
    color:#102B4E;
}

.certificate-card p{
    color:#66788f;
    font-size:14px;
}

.certificate-meta{
    display:flex;
    justify-content:space-between;
    margin:20px 0;
    font-size:12px;
    color:#8b9ab0;
}

.certificate-download{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:#0A5CCB;
    color:#fff;
    padding:12px 18px;
    border-radius:10px;
    font-weight:600;
}

/* =========================================================
   PROFILE
========================================================= */

.profile-cover{
    background:linear-gradient(135deg,#0A5CCB,#4DA3FF);
    height:130px;
    border-radius:18px;
    position:relative;
}

.profile-avatar{
    width:95px;
    height:95px;
    background:#fff;
    color:#0A5CCB;
    border-radius:50%;
    position:absolute;
    left:40px;
    bottom:-45px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:36px;
    font-weight:700;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.profile-body{
    padding-top:60px;
}

.profile-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}

.profile-title h2{
    color:#102B4E;
}

.status-pill{
    background:#e8fff2;
    color:#18A558;
    padding:8px 14px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
}

.profile-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
}

.profile-field{
    padding:18px;
    border:1px solid #edf2f8;
    border-radius:14px;
}

.profile-field span{
    display:block;
    color:#8b9ab0;
    font-size:12px;
    margin-bottom:6px;
}

.profile-field strong{
    color:#102B4E;
    font-size:16px;
}

/* =========================================================
   FORMS
========================================================= */

.admin-form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

.full-width{
    grid-column:1 / -1;
}

.admin-form-group label{
    display:block;
    margin-bottom:8px;
    font-weight:600;
    color:#102B4E;
}

.admin-form-group input,
.admin-form-group select,
.admin-form-group textarea{
    width:100%;
    padding:13px 14px;
    border:1px solid #dfe8f3;
    border-radius:10px;
    outline:none;
    transition:.3s;
}

.admin-form-group input:focus,
.admin-form-group select:focus,
.admin-form-group textarea:focus{
    border-color:#0A5CCB;
    box-shadow:0 0 0 3px rgba(10,92,203,.08);
}

.admin-form-group small{
    display:block;
    margin-top:6px;
    color:#7a8ca5;
    font-size:12px;
}

.admin-form-actions{
    display:flex;
    justify-content:flex-end;
    gap:12px;
    margin-top:30px;
}

.admin-primary-btn,
.client-help-btn{
    background:#0A5CCB;
    color:#fff;
    padding:12px 22px;
    border-radius:10px;
    font-weight:600;
}

.admin-secondary-btn{
    background:#eef3f8;
    color:#4f6177;
    padding:12px 22px;
    border-radius:10px;
    font-weight:600;
}

.admin-form-error{
    background:#fff2f2;
    color:#c62828;
    border:1px solid #ffd5d5;
    padding:14px 18px;
    border-radius:10px;
    margin-bottom:20px;
}

/* =========================================================
   STATUS
========================================================= */

.admin-status{
    padding:6px 12px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
}

.admin-status.active{
    background:#e8fff2;
    color:#18A558;
}

.admin-status.inactive{
    background:#fff3e6;
    color:#e67e22;
}

.admin-actions{
    display:flex;
    gap:12px;
}

.admin-actions a{
    color:#0A5CCB;
    font-weight:600;
    font-size:13px;
}

.delete-action{
    color:#d32f2f !important;
}

/* =========================================================
   EMPTY STATES
========================================================= */

.empty-documents,
.admin-empty{
    text-align:center;
    padding:60px 20px;
    color:#6c7b90;
}

.empty-icon{
    width:82px;
    height:82px;
    background:#eef6ff;
    color:#0A5CCB;
    margin:auto;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
}

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

@media(max-width:991px){

    .client-layout,
    .admin-layout{
        flex-direction:column;
    }

    .client-sidebar,
    .admin-sidebar{
        width:100%;
        min-height:auto;
        position:relative;
        top:0;
        border-right:none;
        border-bottom:1px solid #e6edf5;
    }

    .client-nav,
    .admin-nav{
        flex-direction:row;
        overflow:auto;
        padding-bottom:5px;
    }

    .client-nav a,
    .admin-nav a{
        white-space:nowrap;
    }

    .client-main,
    .admin-main{
        padding:22px;
    }

    .admin-form-grid{
        grid-template-columns:1fr;
    }

    .profile-title{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }
}

@media(max-width:600px){

    .client-header-inner,
    .admin-header-inner{
        padding:0 16px;
    }

    .client-user-mini strong,
    .admin-user strong{
        display:none;
    }

    .client-main,
    .admin-main{
        padding:18px;
    }

    .client-page-heading h1,
    .admin-page-header h1{
        font-size:28px;
    }

    .client-stat-grid,
    .admin-stat-grid{
        grid-template-columns:1fr;
    }

    .certificate-grid{
        grid-template-columns:1fr;
    }

    .profile-avatar{
        left:50%;
        transform:translateX(-50%);
    }

    .profile-body{
        padding-top:70px;
        text-align:center;
    }
}

































/* =========================================================
   CEO / LEADERSHIP SECTION
========================================================= */

.ceo-section {
    background: #f8fafc;
}


.ceo-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 60px;
    align-items: center;

    background: #ffffff;

    border: 1px solid #e5eaf0;
    border-radius: 20px;

    padding: 45px;

    box-shadow:
        0 15px 45px rgba(15, 23, 42, 0.06);

    position: relative;
    overflow: hidden;
}


.ceo-card::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    width: 4px;
    height: 100%;

    background: #1557b0;
}


/* CEO IMAGE */

.ceo-image-wrap {
    display: flex;
    justify-content: center;
}


.ceo-image-frame {
    width: 290px;
    height: 290px;

    border-radius: 50%;

    padding: 7px;

    background: #ffffff;

    border: 1px solid #dbe5f0;

    box-shadow:
        0 15px 35px rgba(15, 23, 42, 0.10);
}


.ceo-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


/* CEO CONTENT */

.ceo-label {
    display: inline-block;

    color: #1557b0;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1.5px;

    margin-bottom: 12px;
}


.ceo-content h3 {
    margin: 0 0 6px;

    color: #172033;

    font-size: 34px;
    line-height: 1.2;
}


.ceo-content h4 {
    margin: 0 0 20px;

    color: #1557b0;

    font-size: 16px;
    font-weight: 600;
}


.ceo-content p {
    margin: 0 0 14px;

    color: #64748b;

    font-size: 15px;

    line-height: 1.8;
}


/* CEO HIGHLIGHTS */

.ceo-highlights {
    display: flex;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 25px;
}


.ceo-highlight {
    display: flex;

    align-items: center;

    gap: 9px;

    padding: 10px 14px;

    background: #f8fafc;

    border: 1px solid #e7edf4;

    border-radius: 8px;

    color: #475569;

    font-size: 13px;

    font-weight: 600;
}


.ceo-highlight i {
    color: #1557b0;

    font-size: 14px;
}


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

.team-section {
    background: #ffffff;
}


/* FOUR CARDS IN ONE ROW */

.team-grid {
    display: grid;

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

    gap: 24px;
}


/* TEAM CARD */

.team-card {
    background: #ffffff;

    border: 1px solid #e5eaf0;

    border-radius: 16px;

    overflow: hidden;

    text-align: center;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.team-card:hover {
    transform: translateY(-7px);

    border-color: #cddbeb;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.10);
}


/* TEAM IMAGE */

.team-image-wrap {
    width: 100%;

    height: 260px;

    background: #f5f8fb;

    overflow: hidden;
}


.team-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform 0.5s ease;
}


.team-card:hover .team-image {
    transform: scale(1.04);
}


/* TEAM CONTENT */

.team-content {
    padding: 24px 18px 26px;
}


.team-role {
    display: inline-block;

    margin-bottom: 9px;

    color: #1557b0;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;
}


.team-content h3 {
    margin: 0 0 7px;

    color: #172033;

    font-size: 19px;

    line-height: 1.35;
}


.team-content p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.6;
}


/* =========================================================
   RESPONSIVE - TABLET
========================================================= */

@media (max-width: 1100px) {

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


    .ceo-card {
        grid-template-columns: 0.8fr 1.2fr;

        gap: 40px;

        padding: 35px;
    }

}


/* =========================================================
   RESPONSIVE - MOBILE
========================================================= */

@media (max-width: 768px) {

    .ceo-card {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 30px 24px;

        text-align: center;
    }


    .ceo-card::before {
        width: 100%;
        height: 4px;

        left: 0;
        top: 0;
    }


    .ceo-image-frame {
        width: 220px;
        height: 220px;
    }


    .ceo-content h3 {
        font-size: 28px;
    }


    .ceo-highlights {
        justify-content: center;
    }


    .team-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .team-image-wrap {
        height: 280px;
    }

}


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

@media (max-width: 480px) {

    .ceo-card {
        padding: 25px 18px;
    }


    .ceo-image-frame {
        width: 190px;
        height: 190px;
    }


    .ceo-content h3 {
        font-size: 25px;
    }


    .ceo-content p {
        font-size: 14px;
    }


    .ceo-highlight {
        width: 100%;

        justify-content: center;
    }


    .team-image-wrap {
        height: 260px;
    }

}





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

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}


/* TEAM CARD */

.team-card {
    background: #ffffff;

    border: 1px solid #e5eaf0;

    border-radius: 16px;

    overflow: hidden;

    text-align: center;

    box-shadow:
        0 10px 30px rgba(15, 23, 42, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


.team-card:hover {
    transform: translateY(-7px);

    border-color: #cbd9e8;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.10);
}


/* IMAGE */

.team-image-wrap {
    width: 100%;
    height: 270px;

    background: #f5f8fb;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}


.team-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}


.team-card:hover .team-image {
    transform: scale(1.04);
}


/* IMAGE PLACEHOLDER */

.team-image-placeholder {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #f5f8fb;

    color: #1557b0;

    font-size: 55px;
}


/* CONTENT */

.team-content {
    padding: 24px 18px 26px;
}


.team-role {
    display: inline-block;

    margin-bottom: 9px;

    color: #1557b0;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1.2px;

    text-transform: uppercase;
}


.team-content h3 {
    margin: 0 0 8px;

    color: #172033;

    font-size: 19px;

    line-height: 1.35;
}


.team-content p {
    margin: 0;

    color: #64748b;

    font-size: 13px;

    line-height: 1.7;
}


/* EMPTY STATE */

.team-empty {
    text-align: center;

    background: #ffffff;

    border: 1px solid #e5eaf0;

    border-radius: 16px;

    padding: 55px 25px;
}


.team-empty i {
    color: #1557b0;

    font-size: 42px;

    margin-bottom: 18px;
}


.team-empty h3 {
    color: #172033;

    margin: 0 0 8px;

    font-size: 21px;
}


.team-empty p {
    color: #64748b;

    margin: 0;
}


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

@media (max-width: 1100px) {

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

}


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

@media (max-width: 700px) {

    .team-grid {
        grid-template-columns: 1fr;

        gap: 20px;
    }


    .team-image-wrap {
        height: 300px;
    }

}


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

@media (max-width: 480px) {

    .team-image-wrap {
        height: 270px;
    }


    .team-content {
        padding: 22px 16px 24px;
    }


    .team-content h3 {
        font-size: 18px;
    }

}