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

body{

    opacity:0;
    transform:translateY(18px);

    transition:
        opacity .55s ease,
        transform .55s ease;

}

body.page-loaded{

    opacity:1;
    transform:translateY(0);

}

/*=============================================
        ACTIVE NAVIGATION
=============================================*/

.nav-link{

    position:relative;
    transition:
        color .3s ease,
        text-shadow .3s ease;

}

.nav-link.active{

    color:#ffffff;

    text-shadow:
        0 0 8px rgba(59,130,246,.75),
        0 0 18px rgba(59,130,246,.35);

}

.nav-link.active::after{

    width:100%;

    animation:navGlow 2.5s infinite;

}

@keyframes navGlow{

0%,100%{

    box-shadow:0 0 6px rgba(59,130,246,.35);

}

50%{

    box-shadow:
        0 0 14px rgba(59,130,246,.85),
        0 0 28px rgba(59,130,246,.45);

}

}

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

.reveal{

    opacity:0;

    transform:translateY(45px);

    transition:

        opacity .9s ease,

        transform .9s ease;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*=============================================
    STAGGERED CARD ANIMATION
=============================================*/

.reveal-card{

    opacity:0;

    transform:translateY(35px);

    transition:
        opacity .7s ease,
        transform .7s ease;

}

.reveal-card.active{

    opacity:1;

    transform:none;

}

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

.hero__image img{

    animation:floatingImage 8s ease-in-out infinite;

}

@keyframes floatingImage{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-14px);

}

100%{

transform:translateY(0px);

}

}

/*=============================================
        BUTTON SHINE
=============================================*/

.btn{

    position:relative;

    overflow:hidden;

}

.btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:

        linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.28),

        transparent);

    transition:1s;

}

.btn:hover::before{

    left:150%;

}

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

.solution-card,
.contact-card,
.value-box,
.capability-card,
.mission-card{

transition:

transform .35s ease,

box-shadow .35s ease,

border-color .35s ease;

}

.solution-card:hover,
.contact-card:hover,
.value-box:hover,
.capability-card:hover,
.mission-card:hover{

box-shadow:

0 22px 45px rgba(0,0,0,.35),

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

}

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

body::before{

content:"";

position:fixed;

left:-180px;

top:-150px;

width:450px;

height:450px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(37,99,235,.12),

transparent 72%);

animation:blobMove1 18s ease-in-out infinite;

pointer-events:none;

z-index:-2;

}

body::after{

content:"";

position:fixed;

right:-220px;

bottom:-0px;

width:520px;

height:520px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(59,130,246,.10),

transparent 72%);

animation:blobMove2 20s ease-in-out infinite;

pointer-events:none;

z-index:-2;

}

@keyframes blobMove1{

50%{

transform:

translate(40px,-30px);

}

}

@keyframes blobMove2{

50%{

transform:

translate(-50px,25px);

}

}
/*==================================================
        TOP PROGRESS BAR
==================================================*/

.scroll-progress{

    position:fixed;

    left:0;

    top:0;

    width:0%;

    height:3px;

    z-index:999999;

    background:linear-gradient(
        90deg,
        #2563EB,
        #3B82F6
    );

    box-shadow:
        0 0 12px rgba(37,99,235,.65);

    transition:width .1s linear;

}

/*==================================================
        NAV ACTIVE
==================================================*/

.nav-link{

    transition:
        color .3s,
        text-shadow .3s,
        transform .3s;

}

.nav-link.active{

    transform:translateY(-1px);

    text-shadow:

        0 0 10px rgba(37,99,235,.7),

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

}

.nav-link.active::after{

    animation:activeNavGlow 2.2s infinite;

}

@keyframes activeNavGlow{

0%,100%{

box-shadow:0 0 5px #2563EB;

}

50%{

box-shadow:

0 0 15px #3B82F6,

0 0 30px rgba(59,130,246,.45);

}

}
/*==================================================
            PREMIUM CARD SPOTLIGHT
==================================================*/

.solution-card,
.capability-card,
.contact-card,
.value-box,
.mission-card{

    position:relative;
    overflow:hidden;

}

.solution-card::after,
.capability-card::after,
.contact-card::after,
.value-box::after,
.mission-card::after{

    content:"";

    position:absolute;

    width:260px;
    height:260px;

    left:var(--x,-300px);
    top:var(--y,-300px);

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

    border-radius:50%;

    background:
        radial-gradient(circle,
        rgba(59,130,246,.16),
        transparent 70%);

    pointer-events:none;

    transition:
        left .08s linear,
        top .08s linear;

}

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

.btn{

    position:relative;

    overflow:hidden;

}

.btn span.ripple{

    position:absolute;

    border-radius:50%;

    transform:scale(0);

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

    animation:ripple .6s linear;

}

@keyframes ripple{

to{

transform:scale(12);

opacity:0;

}

}

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

.hero__image img{

transition:

transform .5s ease,

filter .5s ease;

}

.hero__image:hover img{

transform:

scale(1.03)

rotate(-1deg);

filter:

drop-shadow(0 30px 60px rgba(37,99,235,.35));

}

/*==================================================
                FORM EFFECT
==================================================*/

input,
textarea,
select{

transition:

border-color .3s,

box-shadow .3s,

transform .3s;

}

input:focus,
textarea:focus,
select:focus{

transform:translateY(-1px);

box-shadow:

0 0 0 4px rgba(37,99,235,.12);

}

/*==================================================
            FAQ SMOOTHNESS
==================================================*/

details{

transition:.35s ease;

}

details[open]{

padding-bottom:10px;

}

details summary{

cursor:pointer;

transition:.3s;

}

details summary:hover{

color:#3B82F6;

}