/*==================================================
        ABOUT / CONTACT HERO
==================================================*/

.about-contact-hero{

    position:relative;

    min-height:610px;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:80px 0;

    background:#f5f9ff;

}


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

.about-contact-hero-bg{

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(
            circle at 85% 25%,
            rgba(59,130,246,.16),
            transparent 32%
        ),

        radial-gradient(
            circle at 70% 85%,
            rgba(37,99,235,.08),
            transparent 30%
        ),

        linear-gradient(
            120deg,
            #ffffff 0%,
            #f5f9ff 55%,
            #eaf3ff 100%
        );

}


/* Decorative light */

.about-contact-hero-bg::after{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    right:-180px;

    top:-220px;

    border-radius:50%;

    border:1px solid rgba(37,99,235,.08);

    box-shadow:

        0 0 0 70px rgba(37,99,235,.025),
        0 0 0 140px rgba(37,99,235,.018);

}


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

.about-contact-hero .container{

    position:relative;

    z-index:2;

    min-height:450px;

    display:flex;

    align-items:center;

}


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

.about-contact-hero-content{

    width:58%;

    position:relative;

    z-index:4;

}


/*==================================================
        BADGE
==================================================*/

.about-contact-badge{

    width:max-content;

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 14px;

    border-radius:999px;

    color:#1764b0;

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

    border:1px solid rgba(37,99,235,.09);

    box-shadow:

        0 8px 25px rgba(37,99,235,.05);

    backdrop-filter:blur(14px);

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

    font-size:.76rem;

    font-weight:850;

}

.about-contact-badge .material-symbols-rounded{

    font-size:18px;

    color:#1677e8;

}


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

.about-contact-hero h1{

    max-width:680px;

    margin:22px 0 18px;

    color:#0b2e59;

    font-size:3.1rem;

    line-height:1.45;

    font-weight:950;

    letter-spacing:-1px;

}

.about-contact-hero h1 span{

    display:block;

    color:#1677e8;

}


/*==================================================
        DESCRIPTION
==================================================*/

.about-contact-hero-content > p{

    max-width:620px;

    margin:0;

    color:#5b7189;

    font-size:.96rem;

    line-height:2.15;

}


/*==================================================
        ACTIONS
==================================================*/

.about-contact-actions{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:30px;

}

.about-contact-actions a{

    height:52px;

    padding:0 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border-radius:16px;

    text-decoration:none;

    font-size:.82rem;

    font-weight:850;

    transition:.35s;

}

.about-contact-btn-primary{

    color:#fff;

    background:

        linear-gradient(
            135deg,
            #1677e8,
            #125fc3
        );

    box-shadow:

        0 14px 30px rgba(22,119,232,.22);

}

.about-contact-btn-primary:hover{

    transform:translateY(-4px);

    box-shadow:

        0 20px 40px rgba(22,119,232,.3);

}

.about-contact-btn-secondary{

    color:#15579c;

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

    border:1px solid rgba(37,99,235,.1);

    backdrop-filter:blur(14px);

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

}

.about-contact-btn-secondary:hover{

    transform:translateY(-4px);

    background:#fff;

}


/*==================================================
        TRUST
==================================================*/

.about-contact-trust{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:34px;

}

.trust-item{

    display:flex;

    align-items:center;

    gap:10px;

}

.trust-item > .material-symbols-rounded{

    width:39px;

    height:39px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:#1677e8;

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

    border:1px solid rgba(37,99,235,.08);

}

.trust-item strong{

    display:block;

    color:#183b60;

    font-size:.74rem;

    font-weight:900;

}

.trust-item small{

    display:block;

    margin-top:3px;

    color:#71869b;

    font-size:.64rem;

}

.trust-divider{

    width:1px;

    height:38px;

    background:rgba(37,99,235,.1);

}


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

.about-contact-hero-visual{

    position:absolute;

    width:500px;

    height:500px;

    right: 58%;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

}


/*==================================================
        ORBITS
==================================================*/

.hero-orbit{

    position:absolute;

    border-radius:50%;

    border:1px solid rgba(37,99,235,.1);

}

.orbit-one{

    width:420px;

    height:420px;

}

.orbit-two{

    width:310px;

    height:310px;

    border-color:rgba(37,99,235,.13);

}


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

.hero-visual-card{

    position:relative;

    z-index:3;

    width:220px;

    height:220px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

    border-radius:50%;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.9),
            rgba(239,247,255,.72)
        );

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

    box-shadow:

        0 30px 80px rgba(30,64,175,.14);

    backdrop-filter:blur(25px);

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

}

.hero-visual-card > .material-symbols-rounded{

    width:54px;

    height:54px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:12px;

    border-radius:17px;

    color:#fff;

    background:

        linear-gradient(
            135deg,
            #1683ef,
            #125fc3
        );

    box-shadow:

        0 12px 25px rgba(22,119,232,.2);

    font-size:27px;

}

.hero-visual-card strong{

    color:#0d3864;

    font-size:1.15rem;

    font-weight:950;

}

.hero-visual-card small{

    max-width:145px;

    margin-top:7px;

    color:#6b8198;

    font-size:.65rem;

    line-height:1.8;

}


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

.hero-floating-card{

    position:absolute;

    z-index:5;

    display:flex;

    align-items:center;

    gap:8px;

    padding:11px 15px;

    color:#20517e;

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

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

    border-radius:15px;

    box-shadow:

        0 15px 35px rgba(30,64,175,.1);

    backdrop-filter:blur(18px);

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

    font-size:.7rem;

    font-weight:850;

}

.hero-floating-card .material-symbols-rounded{

    color:#1677e8;

    font-size:19px;

}

.floating-card-one{

    top:70px;

    right:20px;

}

.floating-card-two{

    bottom:85px;

    left:20px;

}

.floating-card-three{

    right:0;

    bottom:175px;

}


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

@media(max-width:1050px){

    .about-contact-hero{

        padding:70px 0;

    }

    .about-contact-hero-content{

        width:62%;

    }

    .about-contact-hero h1{

        font-size:2.5rem;

    }

    .about-contact-hero-visual{

        width:390px;

        height:390px;

        left:58%;

    }

    .orbit-one{

        width:340px;

        height:340px;

    }

    .orbit-two{

        width:250px;

        height:250px;

    }

    .hero-visual-card{

        width:180px;

        height:180px;

    }

}


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

@media(max-width:768px){

    .about-contact-hero{

        min-height:auto;

        padding:105px 0 45px;

    }

    .about-contact-hero .container{

        min-height:auto;

        flex-direction:column;

    }

    .about-contact-hero-content{

        width:100%;

        text-align:center;

    }

    .about-contact-badge{

        margin:0 auto;

    }

    .about-contact-hero h1{

        margin:18px auto 14px;

        font-size:1.9rem;

        line-height:1.55;

        letter-spacing:-.5px;

    }

    .about-contact-hero h1 span{

        display:inline;

    }

    .about-contact-hero-content > p{

        margin:auto;

        max-width:500px;

        font-size:.8rem;

        line-height:2;

    }

    .about-contact-actions{

        display:grid;

        grid-template-columns:1fr 1fr;

        gap:9px;

        margin-top:23px;

    }

    .about-contact-actions a{

        height:48px;

        padding:0 10px;

        border-radius:14px;

        font-size:.7rem;

    }

    .about-contact-trust{

        justify-content:center;

        gap:12px;

        margin-top:25px;

    }

    .trust-item{

        gap:7px;

    }

    .trust-item > .material-symbols-rounded{

        width:34px;

        height:34px;

        border-radius:10px;

        font-size:18px;

    }

    .trust-item strong{

        font-size:.65rem;

    }

    .trust-item small{

        font-size:.56rem;

    }

    .trust-divider{

        height:30px;

    }


    /* Visual */

    .about-contact-hero-visual{

        position:relative;

        width:100%;

        height:290px;

        right:0;

        top:auto;

        transform:none;

        margin-top:25px;

    }

    .orbit-one{

        width:260px;

        height:260px;

    }

    .orbit-two{

        width:190px;

        height:190px;

    }

    .hero-visual-card{

        width:145px;

        height:145px;

    }

    .hero-visual-card > .material-symbols-rounded{

        width:40px;

        height:40px;

        margin-bottom:7px;

        border-radius:12px;

        font-size:21px;

    }

    .hero-visual-card strong{

        font-size:.9rem;

    }

    .hero-visual-card small{

        font-size:.53rem;

    }

    .hero-floating-card{

        padding:8px 10px;

        border-radius:12px;

        font-size:.58rem;

    }

    .hero-floating-card .material-symbols-rounded{

        font-size:16px;

    }

    .floating-card-one{

        top:30px;

        right:4px;

    }

    .floating-card-two{

        bottom:30px;

        left:4px;

    }

    .floating-card-three{

        right:0;

        bottom:110px;

    }

}


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

@media(max-width:420px){

    .about-contact-hero h1{

        font-size:1.7rem;

    }

    .about-contact-trust{

        gap:8px;

    }

    .trust-item small{

        display:none;

    }

    .about-contact-hero-visual{

        height:250px;

    }

}

/*==================================================
        HERO ORBIT PULSE ANIMATION
==================================================*/

.hero-orbit{

    animation:orbitPulse 5s ease-out infinite;

}

.orbit-two{

    animation-delay:2.5s;

}


@keyframes orbitPulse{

    0%{

        transform:scale(.85);

        opacity:.55;

    }

    60%{

        transform:scale(1.18);

        opacity:.12;

    }

    100%{

        transform:scale(1.35);

        opacity:0;

    }

}

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

.contact-hub{

    padding:100px 0;

    background:#f7fbff;

}


.contact-hub-box{

    position:relative;

    display:grid;

    grid-template-columns:1.05fr .95fr;

    gap:45px;

    padding:48px;

    overflow:hidden;

    border-radius:36px;

    background:

        radial-gradient(
            circle at 100% 0%,
            rgba(37,99,235,.11),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #ffffff,
            #eef6ff
        );

    border:1px solid rgba(37,99,235,.08);

    box-shadow:

        0 30px 85px rgba(15,62,120,.08);

}


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

.contact-main{

    padding:8px;

}


.contact-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 16px;

    border-radius:999px;

    color:#1764b0;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    font-size:.82rem;

    font-weight:850;

    box-shadow:0 8px 24px rgba(37,99,235,.05);

}


.contact-badge .material-symbols-rounded{

    color:#1677e8;

    font-size:20px;

}


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

.contact-main h2{

    margin:25px 0 17px;

    color:#0b2e59;

    font-size:2.8rem;

    line-height:1.45;

    font-weight:950;

    letter-spacing:-.7px;

}


.contact-main h2 span{

    display:block;

    color:#1677e8;

}


.contact-main > p{

    max-width:620px;

    margin:0;

    color:#60768d;

    font-size:1rem;

    line-height:2.15;

}


/*==================================================
                PHONE
==================================================*/

.contact-phone,
.contact-whatsapp{

    display:flex;

    align-items:center;

    gap:16px;

    margin-top:28px;

    padding:17px 18px;

    text-decoration:none;

    border-radius:20px;

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

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

    box-shadow:

        0 12px 32px rgba(30,64,175,.06);

    backdrop-filter:blur(16px);

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

    transition:.35s;

}


.contact-whatsapp{

    margin-top:12px;

}


.contact-phone:hover,
.contact-whatsapp:hover{

    transform:translateY(-4px);

    background:#fff;

    box-shadow:

        0 18px 40px rgba(30,64,175,.11);

}


.contact-icon{

    width:52px;

    height:52px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:15px;

    color:#1677e8;

    background:#edf6ff;

}


.contact-whatsapp .contact-icon{

    color:#16a34a;

    background:#ecfdf3;

}


.contact-icon .material-symbols-rounded{

    font-size:25px;

}


.contact-phone-info{

    flex:1;

}


.contact-phone-info small{

    display:block;

    color:#7890a7;

    font-size:.7rem;

}


.contact-phone-info strong{

    display:block;

    margin-top:5px;

    color:#173c62;

    font-size:.92rem;

    font-weight:900;

}


.contact-arrow{

    color:#1677e8;

    font-size:23px;

    transition:.3s;

}


.contact-phone:hover .contact-arrow,
.contact-whatsapp:hover .contact-arrow{

    transform:translateX(-5px);

}


/*==================================================
                SOCIAL
==================================================*/

.contact-social{

    padding:30px;

    border-radius:29px;

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

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

    backdrop-filter:blur(22px);

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

}


.contact-social-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:24px;

}


.contact-social-header > .material-symbols-rounded{

    width:52px;

    height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:16px;

    color:#1677e8;

    background:#edf6ff;

    font-size:25px;

}


.contact-social-header strong{

    display:block;

    color:#173c62;

    font-size:1rem;

    font-weight:900;

}


.contact-social-header small{

    display:block;

    margin-top:5px;

    color:#7890a7;

    font-size:.7rem;

}


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

.social-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:13px;

}


.social-card{

    min-height:78px;

    min-width:0;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    text-decoration:none;

    border-radius:19px;

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

    border:1px solid rgba(37,99,235,.06);

    transition:.35s;

}


.social-card:hover{

    transform:translateY(-4px);

    background:#fff;

    box-shadow:

        0 14px 32px rgba(30,64,175,.09);

}


.social-card-icon{

    width:45px;

    height:45px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:13px;

    color:#1677e8;

    background:#eef6ff;

}


.social-card-icon svg{

    width:22px;

    height:22px;

    display:block;

    fill:currentColor;

    transition:.3s;

}


.social-card:hover .social-card-icon svg{

    transform:scale(1.1);

}


.social-card > div:nth-child(2){

    min-width:0;

    flex:1;

}


.social-card strong{

    display:block;

    color:#183f65;

    font-size:.78rem;

    font-weight:900;

}


.social-card small{

    display:block;

    margin-top:4px;

    overflow:hidden;

    color:#7a90a5;

    font-size:.63rem;

    text-overflow:ellipsis;

    white-space:nowrap;

}


.social-card > .material-symbols-rounded{

    flex-shrink:0;

    color:#1677e8;

    font-size:20px;

    transition:.3s;

}


.social-card:hover > .material-symbols-rounded{

    transform:translateX(-5px);

}


/*==================================================
                SOCIAL COLORS
==================================================*/

.instagram .social-card-icon{

    color:#e1306c;

    background:#fff0f5;

}


.linkedin .social-card-icon{

    color:#0a66c2;

    background:#eef7ff;

}


.twitter .social-card-icon{

    color:#111827;

    background:#f3f4f6;

}


.whatsapp .social-card-icon{

    color:#16a34a;

    background:#ecfdf3;

}


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

.contact-social-footer{

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:20px;

    padding-top:17px;

    border-top:1px solid rgba(37,99,235,.08);

    color:#70869b;

    font-size:.68rem;

}


.contact-social-footer .material-symbols-rounded{

    color:#1677e8;

    font-size:19px;

}


/*==================================================
                LARGE LAPTOP
==================================================*/

@media(min-width:1200px){

    .contact-hub-box{

        padding:55px;

        gap:55px;

    }

    .contact-main h2{

        font-size:3rem;

    }

    .contact-main > p{

        font-size:1.02rem;

    }

    .contact-phone,
    .contact-whatsapp{

        max-width:620px;

    }

}


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

@media(max-width:900px){

    .contact-hub{

        padding:75px 0;

    }

    .contact-hub-box{

        grid-template-columns:1fr;

        gap:25px;

        padding:38px;

    }

    .contact-main h2{

        font-size:2.4rem;

    }

}


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

@media(max-width:600px){

    .contact-hub{

        padding:55px 0;

    }

    .contact-hub-box{

        padding:20px;

        border-radius:25px;

        gap:17px;

    }

    .contact-main{

        padding:3px;

    }

    .contact-badge{

        padding:8px 13px;

        font-size:.7rem;

    }

    .contact-main h2{

        font-size:1.75rem;

        margin:18px 0 13px;

        letter-spacing:0;

    }

    .contact-main h2 span{

        display:inline;

    }

    .contact-main > p{

        font-size:.76rem;

        line-height:2;

    }

    .contact-phone,
    .contact-whatsapp{

        padding:12px;

        gap:11px;

        border-radius:16px;

    }

    .contact-icon{

        width:40px;

        height:40px;

        border-radius:11px;

    }

    .contact-icon .material-symbols-rounded{

        font-size:20px;

    }

    .contact-phone-info strong{

        font-size:.73rem;

    }

    .contact-social{

        padding:17px;

        border-radius:21px;

    }

    .contact-social-header{

        margin-bottom:17px;

    }

    .contact-social-header > .material-symbols-rounded{

        width:42px;

        height:42px;

        border-radius:12px;

        font-size:21px;

    }

    .contact-social-header strong{

        font-size:.8rem;

    }

    .contact-social-header small{

        font-size:.59rem;

    }

    .social-grid{

        gap:9px;

    }

    .social-card{

        min-height:65px;

        padding:10px;

        gap:8px;

        border-radius:15px;

    }

    .social-card-icon{

        width:35px;

        height:35px;

        border-radius:10px;

    }

    .social-card-icon svg{

        width:18px;

        height:18px;

    }

    .social-card strong{

        font-size:.63rem;

    }

    .social-card small{

        font-size:.54rem;

    }

    .social-card > .material-symbols-rounded{

        font-size:16px;

    }

    .contact-social-footer{

        font-size:.56rem;

    }

}
.social-card-icon svg{

    width:19px;

    height:19px;

    display:block;

    fill:currentColor;

}

.instagram .social-card-icon{

    color:#e1306c;

    background:#fff0f5;

}

.linkedin .social-card-icon{

    color:#0a66c2;

    background:#eef7ff;

}

.whatsapp .social-card-icon{

    color:#16a34a;

    background:#ecfdf3;

}

.social-card:hover .social-card-icon svg{

    transform:scale(1.08);

}

.social-card-icon svg{

    transition:.3s ease;

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

.team-section{

    padding:100px 0;

    background:#f7fbff;

}


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

.team-header{

    display:flex;

    align-items:flex-end;

    justify-content:space-between;

    gap:40px;

    margin-bottom:45px;

}


.team-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 15px;

    border-radius:999px;

    color:#1764b0;

    background:#fff;

    border:1px solid rgba(37,99,235,.08);

    font-size:.78rem;

    font-weight:900;

}


.team-badge .material-symbols-rounded{

    color:#1677e8;

    font-size:19px;

}


.team-header h2{

    margin:20px 0 0;

    color:#0b2e59;

    font-size:2.5rem;

    line-height:1.45;

    font-weight:950;

}


.team-header > p{

    max-width:470px;

    margin:0;

    color:#667d94;

    font-size:.9rem;

    line-height:2.1;

}


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

.team-layout{

    display:grid;

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

    gap:25px;

    align-items:stretch;

}


/*==================================================
                    FEATURED
==================================================*/

.team-featured{

    display:grid;

    grid-template-columns:.9fr 1.1fr;

    min-height:395px;

    overflow:hidden;

    border-radius:30px;

    background:#fff;

    border:1px solid rgba(37,99,235,.07);

    box-shadow:

        0 25px 65px rgba(15,62,120,.07);

}


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

.featured-image{

    position:relative;

    min-height:100%;

    overflow:hidden;

    background:#dceeff;

}


.featured-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    object-position:center;

    transition:opacity .35s ease,
               transform .6s ease;

}


.featured-image-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(5,30,58,.65),
            transparent 45%
        );

    pointer-events:none;

}


.featured-role{

    position:absolute;

    right:20px;

    bottom:20px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:9px 13px;

    color:#fff;

    background:rgba(10,51,94,.62);

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

    border-radius:13px;

    backdrop-filter:blur(14px);

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

    font-size:.7rem;

    font-weight:850;

}


.featured-role .material-symbols-rounded{

    color:#9bd0ff;

    font-size:18px;

}


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

.featured-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:42px;

}


.featured-label{

    color:#1677e8;

    font-size:.7rem;

    font-weight:900;

}


.featured-content h3{

    margin:11px 0 12px;

    color:#0b2e59;

    font-size:2rem;

    font-weight:950;

}


.featured-content > p{

    margin:0;

    color:#637a91;

    font-size:.84rem;

    line-height:2.15;

}


/*==================================================
                    SKILLS
==================================================*/

.featured-skills{

    display:flex;

    flex-wrap:wrap;

    gap:7px;

    margin-top:22px;

}


.featured-skills span{

    padding:7px 10px;

    color:#23649c;

    background:#edf6ff;

    border-radius:9px;

    font-size:.62rem;

    font-weight:800;

}


/*==================================================
                    DOCUMENTS
==================================================*/

.featured-documents{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:27px;

}


.document-item{

    display:flex;

    align-items:flex-start;

    gap:9px;

    padding:12px;

    border-radius:14px;

    background:#f6faff;

    border:1px solid rgba(37,99,235,.06);

}


.document-item > .material-symbols-rounded{

    color:#1677e8;

    font-size:20px;

}


.document-item strong{

    display:block;

    color:#254b6f;

    font-size:.66rem;

    font-weight:900;

}


.document-item small{

    display:block;

    margin-top:4px;

    color:#7890a5;

    font-size:.57rem;

    line-height:1.7;

}


/*==================================================
                    MEMBERS
==================================================*/

.team-members{

    min-width:0;

    padding:25px;

    border-radius:30px;

    background:

        linear-gradient(
            145deg,
            rgba(255,255,255,.9),
            rgba(239,247,255,.72)
        );

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

    box-shadow:

        0 25px 65px rgba(15,62,120,.06);

}


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

.team-members-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-bottom:20px;

}


.team-members-header strong{

    display:block;

    color:#173c62;

    font-size:.95rem;

    font-weight:950;

}


.team-members-header small{

    display:block;

    margin-top:4px;

    color:#7890a7;

    font-size:.61rem;

}


/*==================================================
                    CONTROLS
==================================================*/

.team-slider-controls{

    display:flex;

    gap:6px;

}


.team-slider-controls button{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:0;

    border-radius:10px;

    color:#1677e8;

    background:#edf6ff;

    cursor:pointer;

    transition:.3s;

}


.team-slider-controls button:hover{

    color:#fff;

    background:#1677e8;

}


.team-slider-controls .material-symbols-rounded{

    font-size:18px;

}


/*==================================================
                    SLIDER
==================================================*/

.team-slider{

    overflow:hidden;

}


.team-track{

    display:flex;

    gap:12px;

    width:max-content;

    transition:transform .45s cubic-bezier(.22,.61,.36,1);

    will-change:transform;

}

.team-slider-controls button:disabled{

    opacity:.35;

    cursor:default;

    pointer-events:none;

}
.team-member{

    flex:0 0 145px;

    padding:9px;

    cursor:pointer;

    border-radius:18px;

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

    border:1px solid rgba(37,99,235,.06);

    transition:.35s;

}


.team-member:hover{

    transform:translateY(-5px);

    background:#fff;

    box-shadow:

        0 15px 35px rgba(30,64,175,.09);

}


.team-member.active{

    background:#fff;

    border-color:rgba(22,119,232,.18);

    box-shadow:

        0 12px 30px rgba(22,119,232,.09);

}


.member-image{

    width:100%;

    height:170px;

    overflow:hidden;

    border-radius:13px;

    background:#e9f4ff;

}


.member-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:.4s;

}


.team-member:hover .member-image img{

    transform:scale(1.04);

}


.team-member strong{

    display:block;

    margin:10px 3px 0;

    color:#183f65;

    font-size:.7rem;

    font-weight:900;

}


.team-member small{

    display:block;

    margin:4px 3px 2px;

    color:#7890a7;

    font-size:.59rem;

}


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

@media(max-width:1000px){

    .team-layout{

        grid-template-columns:1fr;

    }

    .team-featured{

        min-height:470px;

    }

}


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

@media(max-width:650px){

    .team-section{

        padding:65px 0;

    }

    .team-header{

        display:block;

        margin-bottom:25px;

    }

    .team-header h2{

        margin-top:15px;

        font-size:1.75rem;

    }

    .team-header > p{

        margin-top:12px;

        font-size:.74rem;

        line-height:2;

    }


    .team-layout{

        display:flex;

        flex-direction:column;

        gap:15px;

    }


    .team-featured{

        display:flex;

        flex-direction:column;

        min-height:auto;

        border-radius:23px;

    }


    .featured-image{

        height:290px;

        min-height:290px;

    }


    .featured-content{

        padding:24px;

    }


    .featured-content h3{

        font-size:1.55rem;

    }


    .featured-content > p{

        font-size:.74rem;

        line-height:2;

    }


    .featured-documents{

        grid-template-columns:1fr 1fr;

        margin-top:20px;

    }


    .team-members{

        padding:17px;

        border-radius:22px;

    }


    .team-slider{

        overflow-x:auto;

        overflow-y:hidden;

        scrollbar-width:none;

        cursor:grab;

    }

    .team-slider::-webkit-scrollbar{

        display:none;

    }


    .team-track{

        width:max-content;

        gap:9px;

    }


    .team-member{

        flex:0 0 125px;

    }


    .member-image{

        height:145px;

    }


    .team-slider-controls{

        display:none;

    }

}

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

.about-factory{

    padding:100px 0;

    background:#ffffff;

}


.about-factory-box{

    display:grid;

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

    align-items:center;

    gap:70px;

}


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

.about-factory-image{

    position:relative;

    width:100%;

    max-width:470px;

    aspect-ratio:3 / 4;

    overflow:hidden;

    border-radius:30px;

    background:#eaf4ff;

    box-shadow:

        0 30px 70px rgba(15,62,120,.12);

}


.about-factory-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;

}


.about-factory-image:hover img{

    transform:scale(1.035);

}


.about-image-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(5,35,68,.45),
            transparent 45%
        );

    pointer-events:none;

}


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

.about-experience{

    position:absolute;

    left:20px;

    bottom:20px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 16px;

    color:#fff;

    background:rgba(8,48,88,.68);

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

    border-radius:16px;

    backdrop-filter:blur(16px);

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

}


.about-experience strong{

    font-size:1.5rem;

    line-height:1;

    font-weight:950;

}


.about-experience span{

    font-size:.68rem;

    color:rgba(255,255,255,.8);

}


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

.about-factory-content{

    max-width:650px;

}


.about-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:9px 15px;

    color:#1764b0;

    background:#edf6ff;

    border:1px solid rgba(37,99,235,.07);

    border-radius:999px;

    font-size:.76rem;

    font-weight:900;

}


.about-badge .material-symbols-rounded{

    color:#1677e8;

    font-size:19px;

}


.about-factory-content h2{

    margin:22px 0 18px;

    color:#0b2e59;

    font-size:2.7rem;

    line-height:1.5;

    font-weight:950;

    letter-spacing:-.7px;

}


.about-factory-content h2 span{

    color:#1677e8;

}


.about-factory-content > p{

    max-width:650px;

    margin:0 0 13px;

    color:#61788f;

    font-size:.9rem;

    line-height:2.15;

}


/*==================================================
                    FEATURES
===================================================*/

.about-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:11px;

    margin-top:27px;

}


.about-feature{

    display:flex;

    align-items:center;

    gap:11px;

    padding:13px;

    border-radius:16px;

    background:#f7fbff;

    border:1px solid rgba(37,99,235,.06);

    transition:.3s ease;

}


.about-feature:hover{

    transform:translateY(-3px);

    background:#fff;

    box-shadow:

        0 12px 30px rgba(30,64,175,.07);

}


.about-feature-icon{

    width:42px;

    height:42px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    color:#1677e8;

    background:#eaf4ff;

}


.about-feature-icon .material-symbols-rounded{

    font-size:21px;

}


.about-feature strong{

    display:block;

    color:#214665;

    font-size:.7rem;

    font-weight:900;

}


.about-feature small{

    display:block;

    margin-top:4px;

    color:#7890a5;

    font-size:.58rem;

    line-height:1.6;

}


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

.about-cta{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:28px;

    padding:12px 17px;

    color:#fff;

    background:#1677e8;

    border-radius:13px;

    text-decoration:none;

    font-size:.7rem;

    font-weight:850;

    box-shadow:

        0 10px 25px rgba(22,119,232,.18);

    transition:.3s ease;

}


.about-cta:hover{

    transform:translateY(-3px);

    background:#0f68d3;

    box-shadow:

        0 15px 30px rgba(22,119,232,.23);

}


.about-cta .material-symbols-rounded{

    font-size:18px;

    transition:.3s;

}


.about-cta:hover .material-symbols-rounded{

    transform:translateX(-4px);

}


/*==================================================
                    LARGE LAPTOP
===================================================*/

@media(min-width:1200px){

    .about-factory-box{

        gap:90px;

    }

    .about-factory-content h2{

        font-size:3rem;

    }

    .about-factory-content > p{

        font-size:.96rem;

    }

}


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

@media(max-width:950px){

    .about-factory{

        padding:75px 0;

    }

    .about-factory-box{

        grid-template-columns:.8fr 1.2fr;

        gap:35px;

    }

    .about-factory-content h2{

        font-size:2.2rem;

    }

    .about-features{

        grid-template-columns:1fr;

    }

}


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

@media(max-width:700px){

    .about-factory{

        padding:60px 0;

    }

    .about-factory-box{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:28px;

    }

    .about-factory-image{

        order:1;

        width:100%;

        max-width:none;

        aspect-ratio:3 / 4;

        border-radius:23px;

    }

    .about-factory-content{

        order:2;

    }

    .about-factory-content h2{

        margin:17px 0 13px;

        font-size:1.8rem;

        line-height:1.5;

        letter-spacing:0;

    }

    .about-factory-content > p{

        font-size:.75rem;

        line-height:2;

    }

    .about-features{

        grid-template-columns:1fr 1fr;

        gap:8px;

        margin-top:20px;

    }

    .about-feature{

        padding:10px;

        gap:8px;

        border-radius:14px;

    }

    .about-feature-icon{

        width:35px;

        height:35px;

        border-radius:10px;

    }

    .about-feature-icon .material-symbols-rounded{

        font-size:18px;

    }

    .about-feature strong{

        font-size:.62rem;

    }

    .about-feature small{

        font-size:.51rem;

    }

    .about-cta{

        margin-top:22px;

        padding:11px 14px;

        font-size:.65rem;

    }

    .about-experience{

        left:14px;

        bottom:14px;

        padding:10px 13px;

    }

    .about-experience strong{

        font-size:1.25rem;

    }

    .about-experience span{

        font-size:.6rem;

    }

}
/*==================================================
                PRODUCT PAGE
===================================================*/

.product-page{

    padding:80px 0 100px;

    background:#f7fbff;

}


.product-layout{

    display:grid;

    grid-template-columns:1.08fr .92fr;

    gap:55px;

    align-items:start;

}


/*==================================================
                GALLERY
===================================================*/

.product-gallery{

    min-width:0;

}


.product-main-image{

    position:relative;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:28px;

    background:#eaf4ff;

    box-shadow:

        0 25px 65px rgba(15,62,120,.09);

}


.product-main-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    cursor:zoom-in;

    transition:transform .45s ease;

}


.product-main-image:hover img{

    transform:scale(1.025);

}


/* Expand */

.gallery-expand{

    position:absolute;

    top:17px;

    right:17px;

    width:43px;

    height:43px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:13px;

    color:#17466f;

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

    backdrop-filter:blur(12px);

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

    cursor:pointer;

    transition:.3s;

}


.gallery-expand:hover{

    color:#fff;

    background:#1677e8;

    transform:scale(1.05);

}


.gallery-expand .material-symbols-rounded{

    font-size:21px;

}


/* Counter */

.gallery-counter{

    position:absolute;

    left:17px;

    bottom:17px;

    padding:8px 12px;

    color:#fff;

    background:rgba(8,45,80,.65);

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

    border-radius:10px;

    backdrop-filter:blur(12px);

    font-size:.65rem;

    direction:ltr;

}


/*==================================================
                THUMBNAILS
===================================================*/

.product-thumbnails{

    display:flex;

    gap:10px;

    margin-top:13px;

    overflow-x:auto;

    scrollbar-width:none;

}


.product-thumbnails::-webkit-scrollbar{

    display:none;

}


.thumbnail{

    position:relative;

    flex:0 0 85px;

    width:85px;

    height:65px;

    padding:0;

    overflow:hidden;

    border:2px solid transparent;

    border-radius:13px;

    background:#eaf4ff;

    cursor:pointer;

    opacity:.65;

    transition:.3s;

}


.thumbnail img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.thumbnail:hover{

    opacity:1;

}


.thumbnail.active{

    opacity:1;

    border-color:#1677e8;

}


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

.product-information{

    padding:10px 0;

}


.product-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

}


.product-badge{

    padding:8px 12px;

    color:#1677e8;

    background:#eaf4ff;

    border-radius:999px;

    font-size:.65rem;

    font-weight:900;

}


/*==================================================
                ACTIONS
===================================================*/

.product-actions{

    display:flex;

    gap:7px;

}


.product-action{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border:1px solid rgba(37,99,235,.08);

    border-radius:12px;

    color:#56718a;

    background:#fff;

    cursor:pointer;

    transition:.3s;

}


.product-action:hover{

    color:#1677e8;

    background:#edf6ff;

    border-color:rgba(22,119,232,.15);

}


.product-action.saved{

    color:#1677e8;

    background:#eaf4ff;

}


.product-action .material-symbols-rounded{

    font-size:21px;

}


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

.product-title{

    margin:25px 0 12px;

    color:#0b2e59;

    font-size:2.25rem;

    line-height:1.55;

    font-weight:950;

}


.product-short-description{

    max-width:620px;

    margin:0;

    color:#687f96;

    font-size:.86rem;

    line-height:2.15;

}


/*==================================================
                META
===================================================*/

.product-information > .product-meta{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:27px;

}


.product-meta-item{

    display:flex;

    align-items:center;

    gap:11px;

    padding:13px;

    border-radius:15px;

    background:#fff;

    border:1px solid rgba(37,99,235,.06);

}


.product-meta-item > .material-symbols-rounded{

    width:39px;

    height:39px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:#1677e8;

    background:#edf6ff;

    border-radius:11px;

    font-size:20px;

}


.product-meta-item small{

    display:block;

    color:#8498aa;

    font-size:.58rem;

}


.product-meta-item strong{

    display:block;

    margin-top:4px;

    color:#214766;

    font-size:.68rem;

    font-weight:900;

}


/*==================================================
                PRICE
===================================================*/

.product-price-box{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:15px;

    padding:17px;

    border-radius:17px;

    background:

        linear-gradient(
            135deg,
            #edf6ff,
            #fff
        );

    border:1px solid rgba(37,99,235,.07);

}


.product-price-box small{

    display:block;

    color:#7890a7;

    font-size:.6rem;

}


.product-price-box strong{

    display:block;

    margin-top:5px;

    color:#0b5fba;

    font-size:.92rem;

    font-weight:950;

}


.product-price-box > .material-symbols-rounded{

    color:#1677e8;

    font-size:28px;

}


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

.product-cta{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:15px;

}


.product-cta a{

    min-height:52px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    border-radius:14px;

    text-decoration:none;

    font-size:.7rem;

    font-weight:900;

    transition:.3s;

}


.product-call{

    color:#fff;

    background:#1677e8;

    box-shadow:0 10px 25px rgba(22,119,232,.16);

}


.product-call:hover{

    transform:translateY(-3px);

    background:#0d68d2;

}


.product-message{

    color:#1764a5;

    background:#eaf4ff;

}


.product-message:hover{

    transform:translateY(-3px);

    background:#dceeff;

}


.product-cta .material-symbols-rounded{

    font-size:19px;

}


/*==================================================
                SELLER
===================================================*/

.product-seller{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:18px;

    padding:13px;

    border-radius:16px;

    background:#fff;

    border:1px solid rgba(37,99,235,.06);

}


.seller-logo{

    width:43px;

    height:43px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    border-radius:12px;

    color:#1677e8;

    background:#edf6ff;

}


.seller-logo .material-symbols-rounded{

    font-size:22px;

}


.seller-info{

    flex:1;

}


.seller-info small{

    display:block;

    color:#8498aa;

    font-size:.56rem;

}


.seller-info strong{

    display:block;

    margin-top:4px;

    color:#214766;

    font-size:.7rem;

    font-weight:900;

}


.seller-arrow{

    color:#1677e8;

    font-size:20px;

}


/*==================================================
                TRUST
===================================================*/

.product-trust{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:14px;

    color:#6e859b;

    font-size:.58rem;

}


.product-trust div{

    display:flex;

    align-items:center;

    gap:5px;

}


.product-trust .material-symbols-rounded{

    color:#1677e8;

    font-size:17px;

}


/*==================================================
                LIGHTBOX
===================================================*/

.product-lightbox{

    position:fixed;

    inset:0;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:35px;

    background:rgba(3,18,35,.88);

    backdrop-filter:blur(18px);

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

    opacity:0;

    visibility:hidden;

    pointer-events:none;

    transition:.3s ease;

}


.product-lightbox.active{

    opacity:1;

    visibility:visible;

    pointer-events:auto;

}


.lightbox-content{

    max-width:min(90vw,1100px);

    max-height:90vh;

}


.lightbox-content img{

    max-width:100%;

    max-height:88vh;

    display:block;

    object-fit:contain;

    border-radius:12px;

    box-shadow:0 30px 80px rgba(0,0,0,.35);

}


.lightbox-close,
.lightbox-prev,
.lightbox-next{

    position:absolute;

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    border-radius:14px;

    color:#fff;

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

    backdrop-filter:blur(12px);

    cursor:pointer;

    transition:.3s;

}


.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{

    background:#1677e8;

}


.lightbox-close{

    top:25px;

    right:25px;

}


.lightbox-prev{

    right:30px;

    top:50%;

    transform:translateY(-50%);

}


.lightbox-next{

    left:30px;

    top:50%;

    transform:translateY(-50%);

}


.lightbox-close .material-symbols-rounded,
.lightbox-prev .material-symbols-rounded,
.lightbox-next .material-symbols-rounded{

    font-size:23px;

}


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

@media(max-width:950px){

    .product-layout{

        grid-template-columns:1fr;

        gap:35px;

    }

    .product-gallery{

        width:100%;

    }

    .product-information{

        padding:0;

    }

}


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

@media(max-width:600px){

    .product-page{

        padding:40px 0 65px;

    }

    .product-layout{

        gap:25px;

    }

    .product-main-image{

        border-radius:21px;

    }

    .thumbnail{

        flex-basis:70px;

        width:70px;

        height:55px;

    }

    .product-title{

        margin-top:20px;

        font-size:1.65rem;

    }

    .product-short-description{

        font-size:.74rem;

        line-height:2;

    }

    .product-meta{

        gap:7px;

        margin-top:20px;

    }

    .product-meta-item{

        padding:10px;

        gap:7px;

    }

    .product-meta-item > .material-symbols-rounded{

        width:33px;

        height:33px;

        font-size:17px;

    }

    .product-meta-item strong{

        font-size:.6rem;

    }

    .product-cta{

        grid-template-columns:1fr;

    }

    .product-trust{

        gap:9px;

    }

    .product-lightbox{

        padding:20px;

    }

    .lightbox-prev{

        right:12px;

    }

    .lightbox-next{

        left:12px;

    }

}

.product-main-image img{

    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    cursor:zoom-in;

    opacity:1;

    transition:
        opacity .18s ease,
        transform .45s ease;

}
.lightbox-content img{

    max-width:100%;
    max-height:88vh;

    display:block;

    object-fit:contain;

    border-radius:12px;

    opacity:1;

    transition:opacity .18s ease;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

}

/*==================================================
                PRODUCT SEO CONTENT
===================================================*/

.product-seo{

    padding:0 0 90px;

    background:#f7fbff;

}


.product-seo-box{

    position:relative;

    padding:35px 38px 25px;

    background:#fff;

    border:1px solid rgba(37,99,235,.07);

    border-radius:24px;

    box-shadow:
        0 15px 45px rgba(15,62,120,.045);

}


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

.product-seo-header{

    padding-bottom:20px;

    border-bottom:1px solid #edf3f8;

}


.product-seo-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:7px 12px;

    color:#1677e8;

    background:#edf6ff;

    border-radius:999px;

    font-size:.62rem;

    font-weight:900;

}


.product-seo-badge .material-symbols-rounded{

    font-size:17px;

}


.product-seo-header h2{

    margin:13px 0 0;

    color:#0b2e59;

    font-size:1.45rem;

    font-weight:950;

}


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

.product-seo-content{

    position:relative;

    max-height:185px;

    overflow:hidden;

    transition:
        max-height .65s cubic-bezier(.22,.61,.36,1);

}


/* Fade at bottom */

.product-seo-content::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:75px;

    background:
        linear-gradient(
            to bottom,
            rgba(255,255,255,0),
            #fff
        );

    pointer-events:none;

    opacity:1;

    transition:.35s ease;

}


/* Expanded */

.product-seo-box.expanded
.product-seo-content{

    max-height:2000px;

}


.product-seo-box.expanded
.product-seo-content::after{

    opacity:0;

}


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

.product-seo-text{

    padding-top:22px;

    color:#657c91;

    font-size:.78rem;

    line-height:2.2;

}


.product-seo-text p{

    margin:0 0 16px;

}


.product-seo-text h3{

    margin:25px 0 9px;

    color:#204969;

    font-size:.9rem;

    font-weight:950;

}


.product-seo-text ul{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;

    margin:15px 0 20px;

    padding:0;

    list-style:none;

}


.product-seo-text li{

    position:relative;

    padding:10px 14px 10px 10px;

    color:#5d758b;

    background:#f7fbff;

    border-radius:10px;

}


.product-seo-text li::before{

    content:"";

    position:absolute;

    right:0;

    top:50%;

    width:4px;

    height:4px;

    border-radius:50%;

    background:#1677e8;

    transform:translateY(-50%);

}


/*==================================================
                TOGGLE BUTTON
===================================================*/

.product-seo-toggle{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:6px;

    margin:17px auto 0;

    padding:9px 15px;

    color:#1677e8;

    background:#edf6ff;

    border:0;

    border-radius:10px;

    font-family:inherit;

    font-size:.65rem;

    font-weight:900;

    cursor:pointer;

    transition:.3s ease;

}


.product-seo-toggle:hover{

    color:#fff;

    background:#1677e8;

}


.product-seo-toggle .material-symbols-rounded{

    font-size:19px;

    transition:.35s ease;

}


/* Rotate arrow */

.product-seo-box.expanded
.product-seo-toggle .material-symbols-rounded{

    transform:rotate(180deg);

}


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

@media(max-width:600px){

    .product-seo{

        padding-bottom:60px;

    }


    .product-seo-box{

        padding:25px 18px 20px;

        border-radius:19px;

    }


    .product-seo-header h2{

        font-size:1.15rem;

    }


    .product-seo-content{

        max-height:190px;

    }


    .product-seo-text{

        font-size:.7rem;

        line-height:2.05;

    }


    .product-seo-text h3{

        font-size:.8rem;

    }


    .product-seo-text ul{

        grid-template-columns:1fr;

        gap:6px;

    }

}
/*==================================================
                PRODUCT INTRO VIDEO
===================================================*/

.product-intro-video{

    padding:20px 0 90px;

    background:#f7fbff;

}


.product-intro-box{

    display:grid;

    grid-template-columns:.8fr 1.2fr;

    gap:70px;

    align-items:center;

    padding:45px;

    background:#fff;

    border:1px solid rgba(37,99,235,.07);

    border-radius:30px;

    box-shadow:
        0 20px 60px rgba(15,62,120,.06);

}


/*==================================================
                    VIDEO
===================================================*/

.product-intro-media{

    position:relative;

    display:flex;

    justify-content:center;

}


.product-intro-video-frame{

    width:100%;

    max-width:330px;

    aspect-ratio:9 / 16;

    overflow:hidden;

    border-radius:25px;

    background:#081c31;

    box-shadow:
        0 25px 55px rgba(5,35,65,.18);

}


.product-intro-player{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


/* Badge */

.product-video-badge{

    position:absolute;

    

    top:25px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:10px 14px;

    color:#fff;

    background:rgba(8,45,80,.72);

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

    border-radius:13px;

    backdrop-filter:blur(15px);

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

    font-size:.62rem;

    font-weight:900;

}


.product-video-badge .material-symbols-rounded{

    font-size:19px;

}


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

.product-intro-content{

    max-width:550px;

}


.product-intro-label{

    display:inline-block;

    padding:8px 13px;

    color:#1677e8;

    background:#edf6ff;

    border-radius:999px;

    font-size:.62rem;

    font-weight:900;

}


.product-intro-content h2{

    margin:20px 0 15px;

    color:#0b2e59;

    font-size:2.35rem;

    line-height:1.55;

    font-weight:950;

}


.product-intro-content h2 span{

    color:#1677e8;

}


.product-intro-content > p{

    max-width:500px;

    margin:0;

    color:#6c8398;

    font-size:.82rem;

    line-height:2.15;

}


/*==================================================
                    FEATURES
===================================================*/

.product-video-features{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:25px;

}


.product-video-features div{

    display:flex;

    align-items:center;

    gap:10px;

    color:#42627d;

    font-size:.67rem;

    font-weight:800;

}


.product-video-features .material-symbols-rounded{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:#1677e8;

    background:#edf6ff;

    border-radius:11px;

    font-size:19px;

}


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

.product-video-cta{

    display:inline-flex;

    align-items:center;

    gap:8px;

    margin-top:28px;

    padding:12px 17px;

    color:#fff;

    background:#1677e8;

    border-radius:13px;

    text-decoration:none;

    font-size:.68rem;

    font-weight:900;

    box-shadow:
        0 10px 25px rgba(22,119,232,.16);

    transition:.3s ease;

}


.product-video-cta:hover{

    transform:translateY(-3px);

    background:#0d68d2;

}


.product-video-cta .material-symbols-rounded{

    font-size:18px;

    transition:.3s;

}


.product-video-cta:hover .material-symbols-rounded{

    transform:translateX(-4px);

}


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

@media(max-width:900px){

    .product-intro-box{

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

        gap:35px;

        padding:30px;

    }


    .product-intro-content h2{

        font-size:2rem;

    }

}


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

@media(max-width:650px){

    .product-intro-video{

        padding:10px 0 60px;

    }


    .product-intro-box{

        display:flex;

        flex-direction:column;

        gap:30px;

        padding:22px 18px 25px;

        border-radius:22px;

    }


    .product-intro-media{

        width:100%;

    }


    .product-intro-video-frame{

        width:min(100%,280px);

        max-width:none;

        border-radius:21px;

    }


    .product-video-badge{

        right:calc(50% - 140px);

        bottom:18px;

    }


    .product-intro-content{

        width:100%;

    }


    .product-intro-content h2{

        margin-top:15px;

        font-size:1.7rem;

    }


    .product-intro-content > p{

        font-size:.72rem;

        line-height:2;

    }


    .product-video-features{

        gap:8px;

        margin-top:20px;

    }


    .product-video-features div{

        font-size:.62rem;

    }


    .product-video-features .material-symbols-rounded{

        width:33px;

        height:33px;

        font-size:17px;

    }


    .product-video-cta{

        margin-top:22px;

    }

}
/*==================================================
                    BLOG HERO
===================================================*/

.blog-hero{

    padding:65px 0 80px;

    background:#f7fbff;

}


.blog-hero-box{

    display:grid;

    grid-template-columns:1.08fr .92fr;

    min-height:480px;

    overflow:hidden;

    background:#fff;

    border:1px solid rgba(37,99,235,.07);

    border-radius:30px;

    box-shadow:
        0 25px 65px rgba(15,62,120,.07);

}


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

.blog-hero-image{

    position:relative;

    min-height:480px;

    overflow:hidden;

    order:1;

}


.blog-hero-image img{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .7s ease;

}


.blog-hero-box:hover .blog-hero-image img{

    transform:scale(1.035);

}


.blog-image-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(
            to top,
            rgba(5,35,68,.48),
            transparent 50%
        );

    pointer-events:none;

}


/* Category */

.blog-image-category{

    position:absolute;

    right:22px;

    bottom:22px;

    padding:9px 14px;

    color:#fff;

    background:rgba(8,45,80,.68);

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

    border-radius:999px;

    backdrop-filter:blur(14px);

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

    font-size:.63rem;

    font-weight:900;

}


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

.blog-hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:55px;

    order:2;

}


.blog-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:17px;

    color:#8a9daf;

    font-size:.59rem;

}


.blog-meta span{

    display:flex;

    align-items:center;

    gap:5px;

}


.blog-meta .material-symbols-rounded{

    color:#1677e8;

    font-size:17px;

}


.blog-hero-content h1{

    margin:20px 0 17px;

    color:#0b2e59;

    font-size:2.55rem;

    line-height:1.55;

    font-weight:950;

    letter-spacing:-.7px;

}


.blog-hero-content h1 span{

    color:#1677e8;

}


.blog-hero-content > p{

    max-width:570px;

    margin:0;

    color:#657d92;

    font-size:.82rem;

    line-height:2.2;

}


/*==================================================
                    ACTIONS
===================================================*/

.blog-hero-actions{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:28px;

}


.blog-primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    min-height:45px;

    padding:0 17px;

    color:#fff;

    background:#1677e8;

    border-radius:13px;

    text-decoration:none;

    font-size:.66rem;

    font-weight:900;

    box-shadow:
        0 10px 25px rgba(22,119,232,.16);

    transition:.3s ease;

}


.blog-primary-btn:hover{

    transform:translateY(-3px);

    background:#0d68d2;

}


.blog-primary-btn .material-symbols-rounded{

    font-size:18px;

    transition:.3s;

}


.blog-primary-btn:hover .material-symbols-rounded{

    transform:translateX(-4px);

}


/* Save */

.blog-save-btn{

    min-height:45px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    padding:0 15px;

    color:#42627d;

    background:#f2f8fd;

    border:1px solid rgba(37,99,235,.07);

    border-radius:13px;

    font-family:inherit;

    font-size:.64rem;

    font-weight:850;

    cursor:pointer;

    transition:.3s ease;

}


.blog-save-btn:hover{

    color:#1677e8;

    background:#eaf4ff;

}


.blog-save-btn .material-symbols-rounded{

    font-size:19px;

}


/*==================================================
                    AUTHOR
===================================================*/

.blog-author{

    display:flex;

    align-items:center;

    gap:10px;

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid #edf3f8;

}


.blog-author-avatar{

    width:38px;

    height:38px;

    overflow:hidden;

    border-radius:50%;

    background:#edf6ff;

}


.blog-author-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}


.blog-author small{

    display:block;

    color:#91a1b0;

    font-size:.52rem;

}


.blog-author strong{

    display:block;

    margin-top:3px;

    color:#31536e;

    font-size:.62rem;

    font-weight:900;

}


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

@media(max-width:950px){

    .blog-hero{

        padding:45px 0 60px;

    }


    .blog-hero-box{

        grid-template-columns:1fr 1fr;

        min-height:410px;

    }


    .blog-hero-image{

        min-height:410px;

    }


    .blog-hero-content{

        padding:35px;

    }


    .blog-hero-content h1{

        font-size:2rem;

    }

}


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

@media(max-width:650px){

    .blog-hero{

        padding:30px 0 50px;

    }


    .blog-hero-box{

        display:flex;

        flex-direction:column;

        border-radius:22px;

    }


    .blog-hero-image{

        order:1;

        width:100%;

        min-height:240px;

        aspect-ratio:16 / 9;

    }


    .blog-image-category{

        right:14px;

        bottom:14px;

        padding:7px 11px;

        font-size:.55rem;

    }


    .blog-hero-content{

        order:2;

        padding:25px 20px 27px;

    }


    .blog-meta{

        gap:10px;

        font-size:.53rem;

    }


    .blog-hero-content h1{

        margin:15px 0 12px;

        font-size:1.55rem;

        line-height:1.6;

    }


    .blog-hero-content > p{

        font-size:.7rem;

        line-height:2.05;

    }


    .blog-hero-actions{

        margin-top:20px;

        gap:7px;

    }


    .blog-primary-btn,
    .blog-save-btn{

        min-height:42px;

        font-size:.59rem;

    }


    .blog-author{

        margin-top:22px;

        padding-top:16px;

    }

}
/*==================================================
                    ARTICLE VIDEO
===================================================*/

.article-video-section{

    padding:20px 0 80px;

    background:#f7fbff;

}


.article-video-box{

    display:grid;

    grid-template-columns:.8fr 1.2fr;

    align-items:center;

    gap:70px;

    padding:45px;

    background:#fff;

    border:1px solid rgba(37,99,235,.07);

    border-radius:30px;

    box-shadow:
        0 20px 60px rgba(15,62,120,.06);

}


/*==================================================
                    VIDEO
===================================================*/

.article-video-media{

    position:relative;

    display:flex;

    justify-content:center;

}


.article-video-frame{

    width:100%;

    max-width:310px;

    aspect-ratio:9 / 16;

    overflow:hidden;

    background:#071c30;

    border-radius:24px;

    box-shadow:
        0 25px 55px rgba(5,35,65,.18);

}


.article-video-player{

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

}


/* Video Label */

.article-video-label{

    position:absolute;

    

    top: 25px;

    display:flex;

    align-items:center;

    gap:6px;

    padding:10px 14px;

    color:#fff;

    background:rgba(7,40,72,.72);

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

    border-radius:12px;

    backdrop-filter:blur(14px);

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

    font-size:.61rem;

    font-weight:900;

}


.article-video-label .material-symbols-rounded{

    font-size:18px;

}


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

.article-video-content{

    max-width:550px;

}


.article-video-badge{

    display:inline-flex;

    padding:8px 13px;

    color:#1677e8;

    background:#edf6ff;

    border-radius:999px;

    font-size:.61rem;

    font-weight:900;

}


.article-video-content h2{

    margin:19px 0 14px;

    color:#0b2e59;

    font-size:2.3rem;

    line-height:1.55;

    font-weight:950;

}


.article-video-content h2 span{

    color:#1677e8;

}


.article-video-content > p{

    max-width:520px;

    margin:0;

    color:#687f94;

    font-size:.8rem;

    line-height:2.2;

}


/*==================================================
                    INFO
===================================================*/

.article-video-info{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-top:25px;

}


.article-video-info > div{

    display:flex;

    align-items:center;

    gap:10px;

}


.article-video-info > div > .material-symbols-rounded{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:#1677e8;

    background:#edf6ff;

    border-radius:11px;

    font-size:19px;

}


.article-video-info small{

    display:block;

    color:#91a1b0;

    font-size:.53rem;

}


.article-video-info strong{

    display:block;

    margin-top:2px;

    color:#31536e;

    font-size:.64rem;

    font-weight:900;

}


/*==================================================
                    NOTE
===================================================*/

.article-video-note{

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:25px;

    padding-top:18px;

    border-top:1px solid #edf3f8;

    color:#7a8fa2;

    font-size:.59rem;

}


.article-video-note .material-symbols-rounded{

    color:#1677e8;

    font-size:18px;

}


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

@media(max-width:900px){

    .article-video-box{

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

        gap:35px;

        padding:30px;

    }


    .article-video-content h2{

        font-size:1.9rem;

    }

}


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

@media(max-width:650px){

    .article-video-section{

        padding:10px 0 60px;

    }


    .article-video-box{

        display:flex;

        flex-direction:column;

        gap:30px;

        padding:22px 18px 25px;

        border-radius:22px;

    }


    .article-video-media{

        width:100%;

    }


    .article-video-frame{

        width:min(100%,280px);

        max-width:none;

        border-radius:21px;

    }


    .article-video-label{

        right:calc(50% - 140px);

        bottom:18px;

        font-size:.55rem;

    }


    .article-video-content{

        width:100%;

    }


    .article-video-content h2{

        margin-top:15px;

        font-size:1.65rem;

    }


    .article-video-content > p{

        font-size:.69rem;

        line-height:2.05;

    }


    .article-video-info{

        margin-top:20px;

    }


    .article-video-note{

        margin-top:20px;

        padding-top:15px;

    }

}
/*==================================================
                ARTICLE CONTENT
===================================================*/

.article-content-section{

    padding:20px 0 90px;

    background:#f7fbff;

}


.article-content-container{

    width:100%;

    max-width:1400px;

    margin:0 auto;

    padding:45px 50px;

    background:#fff;

    border:1px solid rgba(37,99,235,.07);

    border-radius:26px;

    box-shadow:
        0 20px 55px rgba(15,62,120,.045);

    direction:rtl;

    text-align:right;

}


/*==================================================
                    TYPOGRAPHY
===================================================*/

.article-content-container h1,
.article-content-container h2,
.article-content-container h3,
.article-content-container h4{

    color:#0b2e59;

    font-weight:950;

    line-height:1.8;

}


.article-content-container h1{

    margin:0 0 25px;

    font-size:2rem;

}


.article-content-container h2{

    margin:38px 0 15px;

    padding-right:14px;

    border-right:4px solid #1677e8;

    font-size:1.45rem;

}


.article-content-container h3{

    margin:30px 0 12px;

    font-size:1.1rem;

}


.article-content-container h4{

    margin:25px 0 10px;

    font-size:.95rem;

}


/*==================================================
                    PARAGRAPH
===================================================*/

.article-content-container p{

    margin:0 0 20px;

    color:#60798f;

    font-size:.86rem;

    line-height:2.35;

}


/*==================================================
                    LINKS
===================================================*/

.article-content-container a{

    color:#1677e8;

    font-weight:800;

    text-decoration:none;

}


.article-content-container a:hover{

    text-decoration:underline;

}


/*==================================================
                    IMAGES
===================================================*/

.article-content-container img{

    display:block;

    max-width:100%;

    height:auto;

    margin:28px auto;

    border-radius:18px;

}


/*==================================================
                    FIGURE
===================================================*/

.article-content-container figure{

    margin:30px 0;

}


.article-content-container figcaption{

    margin-top:9px;

    color:#8b9cab;

    text-align:center;

    font-size:.62rem;

    line-height:1.8;

}


/*==================================================
                    LISTS
===================================================*/

.article-content-container ul,
.article-content-container ol{

    margin:20px 0;

    padding-right:25px;

    color:#60798f;

    font-size:.83rem;

    line-height:2.3;

}


.article-content-container li{

    margin-bottom:7px;

}


.article-content-container li::marker{

    color:#1677e8;

}


/*==================================================
                    BLOCKQUOTE
===================================================*/

.article-content-container blockquote{

    position:relative;

    margin:30px 0;

    padding:20px 22px;

    color:#45657e;

    background:#f4f9fe;

    border-right:4px solid #1677e8;

    border-radius:12px;

    font-size:.82rem;

    line-height:2.2;

}


/*==================================================
                    TABLE
===================================================*/

.article-content-container .table-wrapper{

    width:100%;

    margin:30px 0;

    overflow-x:auto;

    border:1px solid #e8f0f6;

    border-radius:14px;

}


.article-content-container table{

    width:100%;

    min-width:600px;

    border-collapse:collapse;

    font-size:.72rem;

}


.article-content-container th{

    padding:13px 15px;

    color:#fff;

    background:#1677e8;

    font-weight:900;

}


.article-content-container td{

    padding:12px 15px;

    color:#60798f;

    border-bottom:1px solid #edf3f8;

}


.article-content-container tr:last-child td{

    border-bottom:0;

}


/*==================================================
                    CODE
===================================================*/

.article-content-container pre{

    direction:ltr;

    overflow-x:auto;

    margin:25px 0;

    padding:20px;

    background:#0b2238;

    color:#e8f3ff;

    border-radius:14px;

    font-size:.72rem;

    line-height:1.8;

}


.article-content-container code{

    direction:ltr;

    padding:2px 5px;

    color:#1677e8;

    background:#edf6ff;

    border-radius:5px;

}


/*==================================================
                    VIDEO / IFRAME
===================================================*/

.article-content-container iframe{

    display:block;

    width:100%;

    max-width:100%;

    aspect-ratio:16 / 9;

    margin:30px auto;

    border:0;

    border-radius:18px;

}


/*==================================================
                    HORIZONTAL LINE
===================================================*/

.article-content-container hr{

    margin:35px 0;

    border:0;

    border-top:1px solid #e8f0f6;

}


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

@media(max-width:650px){

    .article-content-section{

        padding:10px 0 60px;

    }


    .article-content-container{

        padding:28px 19px;

        border-radius:20px;

    }


    .article-content-container h1{

        font-size:1.45rem;

        margin-bottom:20px;

    }


    .article-content-container h2{

        margin-top:30px;

        font-size:1.1rem;

    }


    .article-content-container h3{

        font-size:.9rem;

    }


    .article-content-container p{

        font-size:.72rem;

        line-height:2.2;

    }


    .article-content-container ul,
    .article-content-container ol{

        font-size:.7rem;

        line-height:2.15;

    }


    .article-content-container blockquote{

        padding:16px;

        font-size:.7rem;

    }

}
/*==================================================
                    FAQ HERO
===================================================*/

.faq-hero{

    padding:60px 0 75px;

    background:#f7fbff;

}


.faq-hero-box{

    position:relative;

    min-height:410px;

    display:grid;

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

    align-items:center;

    overflow:hidden;

    padding:55px 65px;

    background:

        linear-gradient(
            135deg,
            #ffffff 0%,
            #f4faff 100%
        );

    border:1px solid rgba(37,99,235,.08);

    border-radius:32px;

    box-shadow:
        0 25px 70px rgba(15,62,120,.07);

}


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

.faq-hero-content{

    position:relative;

    z-index:3;

}


.faq-hero-badge{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:8px 13px;

    color:#1677e8;

    background:#edf6ff;

    border:1px solid rgba(22,119,232,.07);

    border-radius:999px;

    font-size:.62rem;

    font-weight:900;

}


.faq-hero-badge .material-symbols-rounded{

    font-size:18px;

}


.faq-hero-content h1{

    margin:18px 0 13px;

    color:#0b2e59;

    font-size:2.7rem;

    line-height:1.55;

    font-weight:950;

    letter-spacing:-.7px;

}


.faq-hero-content h1 span{

    color:#1677e8;

}


.faq-hero-content > p{

    max-width:610px;

    margin:0;

    color:#6a8297;

    font-size:.8rem;

    line-height:2.15;

}


/*==================================================
                    SEARCH
===================================================*/

.faq-search{

    display:flex;

    align-items:center;

    width:min(100%,600px);

    height:57px;

    margin-top:27px;

    padding:5px;

    background:#fff;

    border:1px solid #e2edf6;

    border-radius:15px;

    box-shadow:
        0 12px 30px rgba(20,75,125,.07);

    transition:.3s ease;

}


.faq-search:focus-within{

    border-color:rgba(22,119,232,.35);

    box-shadow:
        0 12px 35px rgba(22,119,232,.11);

}


.faq-search > .material-symbols-rounded{

    margin-right:14px;

    color:#1677e8;

    font-size:21px;

}


.faq-search input{

    flex:1;

    min-width:0;

    height:100%;

    padding:0 10px;

    color:#284d6b;

    background:transparent;

    border:0;

    outline:0;

    font-family:inherit;

    font-size:.7rem;

}


.faq-search input::placeholder{

    color:#9aabba;

}


.faq-search button{

    height:45px;

    padding:0 18px;

    color:#fff;

    background:#1677e8;

    border:0;

    border-radius:11px;

    font-family:inherit;

    font-size:.62rem;

    font-weight:900;

    cursor:pointer;

    transition:.3s ease;

}


.faq-search button:hover{

    background:#0d68d2;

    transform:translateY(-1px);

}


/*==================================================
                QUICK TOPICS
===================================================*/

.faq-quick-topics{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:7px;

    margin-top:15px;

}


.faq-quick-topics > span{

    margin-left:4px;

    color:#8a9dad;

    font-size:.57rem;

}


.faq-quick-topics button{

    padding:6px 10px;

    color:#527089;

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

    border:1px solid #e5eef6;

    border-radius:8px;

    font-family:inherit;

    font-size:.55rem;

    cursor:pointer;

    transition:.25s ease;

}


.faq-quick-topics button:hover{

    color:#1677e8;

    background:#edf6ff;

    border-color:#d6eaff;

}


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

.faq-hero-visual{

    position:relative;

    height:330px;

    display:flex;

    align-items:center;

    justify-content:center;

}


/* Main icon */

.faq-main-icon{

    width:145px;

    height:145px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#1677e8;

    background:

        linear-gradient(
            145deg,
            #ffffff,
            #edf6ff
        );

    border:1px solid rgba(22,119,232,.1);

    border-radius:42px;

    box-shadow:

        0 25px 55px rgba(22,119,232,.12),

        inset 0 0 30px rgba(22,119,232,.025);

    transform:rotate(-5deg);

}


.faq-main-icon .material-symbols-rounded{

    font-size:70px;

}


/*==================================================
                QUESTION CARDS
===================================================*/

.faq-question-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:10px;

    width:220px;

    padding:13px;

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

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

    border-radius:15px;

    box-shadow:
        0 15px 35px rgba(15,62,120,.08);

    backdrop-filter:blur(14px);

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

}


.faq-question-card > .material-symbols-rounded{

    width:38px;

    height:38px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    color:#1677e8;

    background:#edf6ff;

    border-radius:11px;

    font-size:19px;

}


.faq-question-card strong{

    display:block;

    color:#31536e;

    font-size:.58rem;

    font-weight:900;

}


.faq-question-card small{

    display:block;

    margin-top:4px;

    color:#91a2b1;

    font-size:.48rem;

}


.faq-card-one{

    top:35px;

    right:5px;

    transform:rotate(3deg);

}


.faq-card-two{

    bottom:35px;

    left:5px;

    transform:rotate(-3deg);

}


/*==================================================
                    ORBS
===================================================*/

.faq-orb{

    position:absolute;

    border-radius:50%;

    pointer-events:none;

    filter:blur(1px);

}


.faq-orb-one{

    width:220px;

    height:220px;

    top:-110px;

    right:30%;

    background:rgba(22,119,232,.045);

}


.faq-orb-two{

    width:170px;

    height:170px;

    bottom:-90px;

    right:5%;

    background:rgba(83,169,255,.055);

}


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

@media(max-width:950px){

    .faq-hero{

        padding:95px 0 60px;

    }


    .faq-hero-box{

        grid-template-columns:1.1fr .9fr;

        padding:40px;

    }


    .faq-hero-content h1{

        font-size:2.15rem;

    }


    .faq-hero-visual{

        transform:scale(.88);

    }

}


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

@media(max-width:650px){

    .faq-hero{

        padding:25px 0 50px;

    }


    .faq-hero-box{

        display:block;

        min-height:auto;

        padding:100px 20px;

        border-radius:23px;

    }


    .faq-hero-content h1{

        margin-top:15px;

        font-size:1.65rem;

        line-height:1.65;

    }


    .faq-hero-content > p{

        font-size:.69rem;

        line-height:2.05;

    }


    .faq-search{

        height:52px;

        margin-top:21px;

    }


    .faq-search > .material-symbols-rounded{

        margin-right:10px;

        font-size:19px;

    }


    .faq-search input{

        font-size:.62rem;

    }


    .faq-search button{

        height:40px;

        padding:0 13px;

        font-size:.56rem;

    }


    .faq-quick-topics{

        overflow-x:auto;

        flex-wrap:nowrap;

        padding-bottom:3px;

        scrollbar-width:none;

    }


    .faq-quick-topics::-webkit-scrollbar{

        display:none;

    }


    .faq-quick-topics > span{

        flex-shrink:0;

    }


    .faq-quick-topics button{

        flex-shrink:0;

    }


    .faq-hero-visual{

        height:220px;

        margin-top:20px;

        transform:none;

    }


    .faq-main-icon{

        width:105px;

        height:105px;

        border-radius:30px;

    }


    .faq-main-icon .material-symbols-rounded{

        font-size:52px;

    }


    .faq-question-card{

        width:175px;

        padding:9px;

    }


    .faq-question-card > .material-symbols-rounded{

        width:32px;

        height:32px;

        font-size:16px;

    }


    .faq-question-card strong{

        font-size:.49rem;

    }


    .faq-question-card small{

        font-size:.42rem;

    }


    .faq-card-one{

        top:5px;

        right:-3px;

    }


    .faq-card-two{

        bottom:5px;

        left:-3px;

    }

}