/*==================================================
            ABOUT PAGE - PART 1
            HERO SECTION
==================================================*/

main{

    margin-top:-60px;

    overflow:hidden;

}


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

.hero{

    position:relative;

    overflow:hidden;

    padding:100px 0 85px;

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

}


/* Decorative Background */

.hero::before{

    content:"";

    position:absolute;

    top:-220px;
    left:-180px;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(47,84,235,.16),
            transparent 72%
        );

}

.hero::after{

    content:"";

    position:absolute;

    right:-180px;
    bottom:-220px;

    width:500px;
    height:500px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,180,255,.12),
            transparent 72%
        );

}


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

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    align-items:center;

    gap:70px;

}


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

.hero-copy{

    max-width:700px;

}


/*==================================================
            EYEBROW
==================================================*/

.eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #2f54eb,
        #4b7cff
    );

    color:#ffffff;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.15em;

    text-transform:uppercase;

    box-shadow:
        0 10px 25px rgba(47,84,235,.25);

}

.eyebrow::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#ffffff;

}


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

.hero h1{

    margin:28px 0 24px;

    font-size:clamp(2.8rem,5vw,4.2rem);

    line-height:1.15;

    font-weight:800;

    color:#173a75;

    max-width:14ch;

}


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

.hero p{

    font-size:1.08rem;

    line-height:2;

    color:#5b6b81;

    max-width:620px;

}


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

.hero-actions{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

    margin-top:40px;

}


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

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:8px 8px;

    border-radius:50px;

    text-decoration:none;

    font-size:1rem;

    font-weight:700;

    transition:all .35s ease;

}


/* Primary */

.btn-primary{

    background:linear-gradient(
        135deg,
        #2f54eb,
        #00b4ff
    );

    color:#ffffff;

    box-shadow:
        0 16px 35px rgba(47,84,235,.25);

}

.btn-primary:hover{

    transform:translateY(-5px);

    box-shadow:
        0 24px 50px rgba(47,84,235,.32);

}


/* Secondary */

.btn-secondary{

    background:#ffffff;

    color:#173a75;

    border:1px solid rgba(47,84,235,.15);

    box-shadow:
        0 12px 30px rgba(0,0,0,.05);

}

.btn-secondary:hover{

    transform:translateY(-5px);

    border-color:#2f54eb;

    color:#2f54eb;

}


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

.hero-card{

    display:flex;

    justify-content:center;

    align-items:center;

}


/*==================================================
            WHO WE ARE CARD
==================================================*/

.card{

    position:relative;

    overflow:hidden;

    width:100%;

    max-width:430px;

    padding:40px 36px;

    border-radius:30px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(47,84,235,.10);

    box-shadow:

        0 22px 55px rgba(0,0,0,.08),

        0 10px 30px rgba(47,84,235,.08);

    transition:all .45s ease;

}


/* Gradient Strip */

.card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #2f54eb,
        #00b4ff,
        #00d084
    );

}


/* Decorative Circle */

.card::after{

    content:"";

    position:absolute;

    top:-90px;

    right:-90px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(47,84,235,.10),
            transparent 70%
        );

    transition:.45s;

}


/* Hover */

.card:hover{

    transform:translateY(-10px);

    box-shadow:

        0 35px 70px rgba(47,84,235,.16),

        0 18px 35px rgba(0,0,0,.08);

}

.card:hover::after{

    transform:scale(1.2);

}


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

.card h2{

    position:relative;

    margin:0 0 25px;

    padding-left:72px;

    font-size:1.7rem;

    font-weight:700;

    color:#173a75;

}

.card h2::before{

    content:"👥";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.35rem;

    background:linear-gradient(
        135deg,
        #2f54eb,
        #00b4ff
    );

    color:#ffffff;

    box-shadow:
        0 10px 25px rgba(47,84,235,.25);

}


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

.card p{

    margin:0 0 28px;

    font-size:1rem;

    line-height:2;

    color:#5b6b81;

}


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

.tag{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 22px;

    border-radius:50px;

    background:linear-gradient(
        135deg,
        #edf4ff,
        #dbe9ff
    );

    color:#1746a2;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:.4px;

    border:1px solid rgba(47,84,235,.10);

}

.tag::before{

    content:"✓";

    width:22px;

    height:22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#2f54eb;

    color:#ffffff;

    font-size:.72rem;

}


/*==================================================
            FLOATING ANIMATION
==================================================*/

.card{

    animation:heroFloat 6s ease-in-out infinite;

}

@keyframes heroFloat{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-6px);

    }

}

/*==================================================
            ABOUT PAGE - PART 2
            SECTIONS & CONTENT PANELS
==================================================*/

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

.section{

    position:relative;

    padding:30px 0;

    overflow:hidden;

    background:#ffffff;

}

.section:nth-child(even){

    background:#f8fbff;

}


/* Decorative Background */

.section::before{

    content:"";

    position:absolute;

    top:-120px;

    left:-120px;

    width:280px;

    height:280px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(47,84,235,.05),
            transparent 75%
        );

}


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

.section-heading{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.section-heading .eyebrow{

    margin-bottom:18px;

}

.section-heading h2{

    margin:0 0 20px;

    font-size:clamp(2.2rem,4vw,3.3rem);

    font-weight:800;

    line-height:1.2;

    color:#173a75;

}

.section-heading p{

    margin:0 auto;

    font-size:1.05rem;

    line-height:1.9;

    color:#5b6b81;

    max-width:650px;

}


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

.content-grid{

    display:grid;

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

    gap:35px;

}


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

.panel{

    position:relative;

    overflow:hidden;

    padding:45px 40px;

    border-radius:28px;

    background:#ffffff;

    border:1px solid rgba(47,84,235,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.06),

        0 8px 24px rgba(47,84,235,.06);

    transition:all .4s ease;

}


/* Gradient Top Border */

.panel::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(

        90deg,

        #2f54eb,

        #00b4ff,

        #00d084

    );

}


/* Decorative Circle */

.panel::after{

    content:"";

    position:absolute;

    right:-90px;

    bottom:-90px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(47,84,235,.08),

            transparent 72%

        );

    transition:.4s;

}


/* Hover */

.panel:hover{

    transform:translateY(-10px);

    box-shadow:

        0 35px 70px rgba(47,84,235,.14),

        0 18px 35px rgba(0,0,0,.08);

}

.panel:hover::after{

    transform:scale(1.15);

}


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

.panel .tag{

    margin-bottom:22px;

}


/*==================================================
            PANEL HEADING
==================================================*/

.panel h2{

    margin:0 0 20px;

    font-size:1.9rem;

    font-weight:700;

    line-height:1.3;

    color:#173a75;

}

.panel h3{

    margin:0 0 18px;

    font-size:1.45rem;

    font-weight:700;

    color:#173a75;

}


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

.panel p{

    margin:0;

    font-size:1rem;

    line-height:1.9;

    color:#5b6b81;

}


/*==================================================
            PANEL ANIMATION
==================================================*/

.panel{

    animation:fadeUp .8s ease both;

}

.panel:nth-child(2){

    animation-delay:.2s;

}


/*==================================================
            ANIMATION
==================================================*/

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:992px){

    .content-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

}

@media (max-width:768px){

    .section{

        padding:80px 0;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .panel{

        padding:35px 30px;

    }

    .panel h2{

        font-size:1.6rem;

    }

}

@media (max-width:480px){

    .section{

        padding:65px 0;

    }

    .panel{

        padding:28px 24px;

        border-radius:22px;

    }

    .panel h2{

        font-size:1.4rem;

    }

}

/*==================================================
            ABOUT PAGE - PART 3
            OUR VALUES
==================================================*/


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

.feature-grid{

    display:grid;

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

    gap:35px;

    margin-top:20px;

}


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

.feature-card{

    position:relative;

    overflow:hidden;

    padding:45px 35px;

    background:#ffffff;

    border-radius:30px;

    border:1px solid rgba(47,84,235,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.06),

        0 10px 28px rgba(47,84,235,.06);

    transition:all .4s ease;

}


/*==================================================
            TOP ACCENT
==================================================*/

.feature-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(

        90deg,

        #2f54eb,

        #00b4ff,

        #00d084

    );

}


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

.feature-card::after{

    content:"";

    position:absolute;

    right:-90px;

    bottom:-90px;

    width:220px;

    height:220px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(47,84,235,.08),

            transparent 72%

        );

    transition:.4s;

}


/*==================================================
            HOVER EFFECT
==================================================*/

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:

        0 35px 70px rgba(47,84,235,.15),

        0 18px 35px rgba(0,0,0,.08);

}

.feature-card:hover::after{

    transform:scale(1.15);

}


/*==================================================
            ICON AREA
==================================================*/

.feature-card h3{

    position:relative;

    margin:0 0 25px;

    padding-left:75px;

    font-size:1.45rem;

    font-weight:700;

    color:#173a75;

    line-height:1.3;

}


/*==================================================
            DEFAULT ICON
==================================================*/

.feature-card h3::before{

    content:"★";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.35rem;

    color:#ffffff;

    background:linear-gradient(

        135deg,

        #2f54eb,

        #00b4ff

    );

    box-shadow:

        0 12px 28px rgba(47,84,235,.25);

}


/*==================================================
            DIFFERENT ICONS
==================================================*/

.feature-card:nth-child(1) h3::before{

    content:"🛡";

}

.feature-card:nth-child(2) h3::before{

    content:"⚡";

}

.feature-card:nth-child(3) h3::before{

    content:"🤝";

}


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

.feature-card p{

    margin:0;

    font-size:1rem;

    line-height:1.9;

    color:#5b6b81;

}


/*==================================================
            ANIMATION
==================================================*/

.feature-card{

    animation:featureFade .8s ease both;

}

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

    animation-delay:.15s;

}

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

    animation-delay:.3s;

}


@keyframes featureFade{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:1100px){

    .feature-grid{

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

    }

}


@media (max-width:768px){

    .feature-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

    .feature-card{

        padding:35px 28px;

    }

    .feature-card h3{

        font-size:1.3rem;

        padding-left:68px;

    }

    .feature-card h3::before{

        width:48px;

        height:48px;

        font-size:1.2rem;

    }

}


@media (max-width:480px){

    .feature-card{

        padding:28px 24px;

        border-radius:22px;

    }

    .feature-card h3{

        font-size:1.2rem;

    }

}

/*==================================================
        ABOUT PAGE - PART 4
        WHY CLIENTS CHOOSE US
==================================================*/


/*==================================================
        LAST CONTENT GRID
==================================================*/

.section:last-child .content-grid{

    display:grid;

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

    gap:35px;

    margin-top:25px;

}


/*==================================================
        CLIENT PANELS
==================================================*/

.section:last-child .panel{

    position:relative;

    overflow:hidden;

    padding:38px 34px 34px;

    background:#ffffff;

    border-radius:28px;

    border:1px solid rgba(47,84,235,.08);

    box-shadow:

        0 18px 45px rgba(0,0,0,.06),

        0 10px 30px rgba(47,84,235,.06);

    transition:all .45s ease;

}


/*==================================================
        TOP GRADIENT STRIP
==================================================*/

.section:last-child .panel::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #2f54eb,
        #3b82f6,
        #00b4ff
    );

}


/*==================================================
        DECORATIVE CIRCLE
==================================================*/

.section:last-child .panel::after{

    content:"";

    position:absolute;

    right:-70px;

    bottom:-70px;

    width:180px;

    height:180px;

    border-radius:50%;

    background:

        radial-gradient(

            circle,

            rgba(47,84,235,.08),

            transparent 72%

        );

    transition:.45s;

}


/*==================================================
        HOVER EFFECT
==================================================*/

.section:last-child .panel:hover{

    transform:translateY(-10px);

    box-shadow:

        0 28px 60px rgba(47,84,235,.16),

        0 18px 35px rgba(0,0,0,.08);

}

.section:last-child .panel:hover::after{

    transform:scale(1.2);

}


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

.section:last-child .panel h3{

    position:relative;

    margin:0 0 18px;

    padding-left:72px;

    font-size:1.35rem;

    font-weight:700;

    color:#173a75;

    line-height:1.35;

}


/*==================================================
        ICON
==================================================*/

.section:last-child .panel h3::before{

    content:"★";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:52px;

    height:52px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.25rem;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        #2f54eb,
        #00b4ff
    );

    box-shadow:

        0 12px 25px rgba(47,84,235,.25);

}


/*==================================================
        DIFFERENT ICONS
==================================================*/

.section:last-child .panel:nth-child(1) h3::before{

    content:"🏭";

}

.section:last-child .panel:nth-child(2) h3::before{

    content:"⭐";

}

.section:last-child .panel:nth-child(3) h3::before{

    content:"💬";

}

.section:last-child .panel:nth-child(4) h3::before{

    content:"🎯";

}


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

.section:last-child .panel p{

    margin:0;

    color:#5b6b81;

    line-height:1.9;

    font-size:1rem;

}


/*==================================================
        PANEL ANIMATION
==================================================*/

.section:last-child .panel{

    animation:clientCard .8s ease both;

}

.section:last-child .panel:nth-child(2){

    animation-delay:.15s;

}

.section:last-child .panel:nth-child(3){

    animation-delay:.30s;

}

.section:last-child .panel:nth-child(4){

    animation-delay:.45s;

}


@keyframes clientCard{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


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

@media (max-width:992px){

    .section:last-child .content-grid{

        grid-template-columns:1fr;

        gap:28px;

    }

}


@media (max-width:768px){

    .section:last-child .panel{

        padding:32px 26px;

        border-radius:24px;

    }

    .section:last-child .panel h3{

        padding-left:65px;

        font-size:1.25rem;

    }

    .section:last-child .panel h3::before{

        width:46px;

        height:46px;

        font-size:1.1rem;

    }

}


@media (max-width:480px){

    .section:last-child .panel{

        padding:26px 22px;

    }

    .section:last-child .panel h3{

        font-size:1.15rem;

    }

}

/*==================================================
        ABOUT PAGE - PART 5
        RESPONSIVE DESIGN & FINAL POLISH
==================================================*/


/*==================================================
        LARGE DESKTOP
==================================================*/

@media (min-width:1400px){

    .container{

        max-width:1320px;

    }

    .hero-grid{

        gap:90px;

    }

    .content-grid{

        gap:40px;

    }

    .feature-grid{

        gap:40px;

    }

}


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

@media (max-width:1200px){

    .hero{

        padding:20px 0 25px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

    }

    .hero-copy{

        max-width:850px;

        margin:auto;

    }

    .hero h1{

        max-width:100%;

    }

    .hero p{

        max-width:700px;

        margin:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-card{

        justify-content:center;

    }

    .card{

        max-width:500px;

    }

}


/*==================================================
        TABLETS
==================================================*/

@media (max-width:992px){

    main{

        margin-top:25px;

    }

    .hero{

        padding:40px 0 40px;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:55px;

    }

    .content-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .feature-grid{

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

        gap:30px;

    }

    .section{

        padding:40px 0;

    }

}


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

@media (max-width:768px){

    main{

        margin-top:25px;

    }

    .hero{

        padding:65px 0 50px;

    }

    .hero h1{

        font-size:2.3rem;

        line-height:1.25;

    }

    .hero p{

        font-size:1rem;

    }

    .hero-actions{

        flex-direction:column;

        align-items:center;

        width:100%;

    }

    .hero-actions .btn{

        width:260px;

    }

    .card{

        padding:32px;

    }

    .card h2{

        font-size:1.45rem;

        padding-left:64px;

    }

    .card h2::before{

        width:46px;

        height:46px;

    }

    .section{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:45px;

    }

    .section-heading h2{

        font-size:2rem;

    }

    .section-heading p{

        font-size:1rem;

    }

    .panel{

        padding:32px 26px;

    }

    .feature-grid{

        grid-template-columns:1fr;

    }
 .header-contact{

        Display:none;

    }
}


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

@media (max-width:480px){

    main{

        margin-top:25px;

    }

    .hero{

        padding:55px 0 45px;

    }

    .eyebrow{

        font-size:.72rem;

        padding:8px 18px;

    }

    .hero h1{

        font-size:1.9rem;

    }

    .hero p{

        font-size:.95rem;

    }

    .hero-actions .btn{

        width:100%;

    }

    .btn{

        padding:15px 24px;

        font-size:.95rem;

    }

    .card{

        padding:26px;

    }

    .card h2{

        font-size:1.25rem;

        padding-left:58px;

    }

    .card h2::before{

        width:42px;

        height:42px;

        font-size:1rem;

    }

    .panel{

        padding:24px 22px;

        border-radius:20px;

    }

    .feature-card{

        padding:26px 22px;

        border-radius:20px;

    }

    .feature-card h3{

        font-size:1.15rem;

    }

    .section-heading h2{

        font-size:1.7rem;

    }
 .header-contact{

        Display:none;

    }
}


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

img{

    max-width:100%;

    display:block;

    height:auto;

}


/*==================================================
        SMOOTH SCROLL
==================================================*/

html{

    scroll-behavior:smooth;

}


/*==================================================
        CUSTOM SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#eef4ff;

}

::-webkit-scrollbar-thumb{

    border-radius:30px;

    background:linear-gradient(

        180deg,

        #2f54eb,

        #00b4ff

    );

}

::-webkit-scrollbar-thumb:hover{

    background:linear-gradient(

        180deg,

        #1d4ed8,

        #0099ff

    );

}


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

::selection{

    background:#2f54eb;

    color:#ffffff;

}


/*==================================================
        GLOBAL TRANSITIONS
==================================================*/

.hero,
.section,
.card,
.panel,
.feature-card,
.btn{

    transition:all .35s ease;

}


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

a{

    text-decoration:none;

    transition:.3s ease;

}

a:hover{

    color:#2f54eb;

}


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

a:focus-visible,
button:focus-visible{

    outline:3px solid rgba(47,84,235,.35);

    outline-offset:4px;

}


/*==================================================
        PAGE ANIMATION
==================================================*/

.hero{

    animation:fadeHero 1s ease;

}

.section{

    animation:fadeSection .8s ease both;

}

.section:nth-of-type(2){

    animation-delay:.15s;

}

.section:nth-of-type(3){

    animation-delay:.30s;

}

.section:nth-of-type(4){

    animation-delay:.45s;

}


@keyframes fadeHero{

    from{

        opacity:0;

        transform:translateY(45px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


@keyframes fadeSection{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*==================================================
        BUTTON RIPPLE EFFECT
==================================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    top:50%;

    left:50%;

    width:0;

    height:0;

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

    border-radius:50%;

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

    transition:.5s;

}

.btn:hover::before{

    width:320px;

    height:320px;

}


/*==================================================
        CARD HOVER ENHANCEMENT
==================================================*/

.card:hover,
.panel:hover,
.feature-card:hover{

    border-color:rgba(47,84,235,.18);

}


/*==================================================
        PRINT MODE
==================================================*/

@media print{

    .hero{

        background:#ffffff !important;

    }

    .btn{

        display:none;

    }

    .card,
    .panel,
    .feature-card{

        box-shadow:none;

        border:1px solid #cccccc;

    }

}
/*==================================================
        END OF ABOUT PAGE
==================================================*/	
	
	
    @media (max-width: 1024px){
      .hero-grid,.feature-grid,.footer-grid,.content-grid{grid-template-columns:1fr 1fr}
      .header-contact{margin-left:0}
      .main-nav{justify-content:flex-start}
    }
    @media (max-width: 900px){
      .hero-grid,.feature-grid,.footer-grid,.content-grid{grid-template-columns:1fr}
      .main-nav{
        width:100%;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:.65rem;
        padding:1rem 0 .25rem;
      }
      .main-nav.show{display:flex}
      .nav-item{
        width:100%;
        min-width:unset;
        justify-content:flex-start;
      }
      .menu-toggle{display:inline-flex}
      .header-contact{
        width:100%;
        justify-content:space-between;
      }
    }
    @media (max-width: 700px){
      .form-grid{grid-template-columns:1fr}
    }
    @media (max-width: 640px){
      .brand-tagline{display:none}
      .phone-link{font-size:.95rem}
      .apply-btn{padding:.75rem 1rem}
      .header-contact{gap:.75rem}
    }
	
	.go-top-btn{
  position:fixed;
  right:1.4rem;
  bottom:1.4rem;
  width:32px;
  height:32px;
  border-radius:50%;
  border:0;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-size:1.2rem;
  font-weight:700;
  box-shadow:0 12px 30px rgba(37,99,235,.35);
  cursor:pointer;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:800;
  transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.go-top-btn.show{
  display:flex;
  opacity:1;
}
.go-top-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(37,99,235,.45);
}