/* =========================
   RESET + GLOBAL
========================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {

    width: 100%;
    height: 100%;

}

body {

    overflow: hidden;

    font-family: 'Montserrat', sans-serif;

    background: #061522;

    color: white;

}


/* =========================
   PREMIUM ANIMATED BACKGROUND
========================= */

.background {
    position: fixed;
    top:0;
    left:0;

    width:100%;
    height:100vh;

    background-image: url("./assets/background-contours.png") !important;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    z-index:-1;
}



@keyframes gradientMove {


    0% {

        background-position: 0% 50%;

    }


    50% {

        background-position: 100% 50%;

    }


    100% {

        background-position: 0% 50%;

    }

}




/* =========================
   LARGE MOVING LIGHT BLOBS
========================= */


.glow {


    position: absolute;


    border-radius: 50%;


    filter: blur(100px);


    opacity: .22;
    
    z-index:2;

    animation:

    moveGlow 18s infinite alternate ease-in-out;

}




.glow-one {


    width: 500px;

    height: 500px;


    background: #1d5b8f;


    top: -180px;

    left: -150px;


}




.glow-two {


    width: 450px;

    height: 450px;


    background: #0d3558;


    bottom: -150px;

    right: -120px;


    animation-delay: 3s;


}





.glow-three {


    width: 350px;

    height: 350px;


    background: #2b6ea6;


    top: 35%;

    left: 45%;


    opacity: .12;


    animation-delay: 6s;


}




@keyframes moveGlow {


    from {

        transform: translate(0,0) scale(1);

    }


    to {

        transform: translate(90px,60px) scale(1.15);

    }


}


/* =========================
   FLOATING ICON SYSTEM
========================= */


.particles {

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    pointer-events:none;

    overflow:hidden;

    z-index:1;

}





.shape {

    position:absolute;


    object-fit:contain;


    opacity:0;


    filter:

    drop-shadow(0 0 20px rgba(100,180,255,.25));


    animation:

    iconAppear 1.8s ease forwards,

    iconFloat 14s ease-in-out infinite;


}





/* =========================
   INDIVIDUAL ICONS
========================= */


/* Calculator */

.shape-one {


    width:110px;

    height:110px;


    top:12%;

    left:8%;


    animation-delay:.8s, 2.5s;


}





/* Chart */

.shape-two {


    width:90px;

    height:90px;


    top:22%;

    right:10%;


    animation-delay:1.2s, 4s;


}





/* Document */

.shape-three {


    width:75px;

    height:75px;


    bottom:18%;

    left:15%;


    opacity:.75;


    animation-delay:1.6s, 6s;


}





/* Graduation */

.shape-four {


    width:120px;

    height:120px;


    bottom:12%;

    right:12%;


    animation-delay:2s, 5s;


}





/* Certificate */

.shape-five {


    width:85px;

    height:85px;


    top:50%;

    left:52%;


    animation-delay:2.4s, 7s;


}





/* Percentage */

.shape-six {


    width:95px;

    height:95px;


    top:35%;

    right:38%;


    animation-delay:2.8s, 8s;


}





/* =========================
   ICON APPEAR ANIMATION
========================= */


@keyframes iconAppear {


    from {


        opacity:0;


        transform:

        translateY(50px)

        scale(.7)

        rotate(-20deg);


        filter:

        blur(8px)

        drop-shadow(0 0 0 transparent);


    }



    to {


        opacity:.18;


        transform:

        translateY(0)

        scale(1)

        rotate(0deg);


        filter:

        blur(0)

        drop-shadow(

        0 0 20px rgba(100,180,255,.25)

        );


    }


}






/* =========================
   FLOATING MOTION
========================= */


@keyframes iconFloat {


    0% {


        margin-top:0;

        rotate:0deg;


    }


    25% {


        margin-top:-25px;

        rotate:8deg;


    }


    50% {


        margin-top:-55px;

        rotate:-5deg;


    }


    75% {


        margin-top:-20px;

        rotate:6deg;


    }


    100% {


        margin-top:0;

        rotate:0deg;


    }


}






/* =========================
   DIFFERENT DEPTH LEVELS
========================= */


/* background icons */

.shape-three,

.shape-five {


    opacity:.10;


}





/* middle layer */

.shape-two,

.shape-six {


    opacity:.15;


}





/* foreground layer */

.shape-one,

.shape-four {


    opacity:.20;


}
/* =========================
   MAIN LANDING STRUCTURE
========================= */


.landing {

    height:100vh;
    width:100%;

    display:flex;
    flex-direction:column;

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

    position:relative;

    z-index:2;

}








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


.cards {


    display:flex;


    gap:45px;


    align-items:center;


    justify-content:center;


}





/* =========================
   PREMIUM GLASS CARDS
========================= */


.glass-card {


    width:470px;


    height:260px;


    display:flex;


    flex-direction:column;


    justify-content:center;


    align-items:center;


    text-decoration:none;


    color:white;


    position:relative;


    overflow:hidden;


    border-radius:30px;



    background:


    linear-gradient(

        145deg,

        rgba(40,90,135,.35),

        rgba(8,25,45,.55)

    );



    border:

    1px solid rgba(190,225,255,.18);



    backdrop-filter:blur(18px);



    box-shadow:


    0 25px 60px rgba(0,0,0,.45),


    0 0 45px rgba(40,120,200,.15);



    opacity:0;


    animation:

    cardAppear 1.2s ease forwards;



    transition:

    .6s ease;


}







.audit-card {


    animation-delay:.8s;


}




.academy-card {


    animation-delay:1.2s;


}






@keyframes cardAppear {


    from {


        opacity:0;


        transform:

        translateY(100px)

        scale(.85);



        filter:blur(12px);


    }



    to {


        opacity:1;


        transform:

        translateY(0)

        scale(1);



        filter:blur(0);


    }


}








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


.glass-card:hover {


    transform:

    translateY(-18px)

    scale(1.04);



    border-color:

    rgba(130,210,255,.8);



    box-shadow:


    0 0 70px rgba(70,160,240,.35),


    0 30px 70px rgba(0,0,0,.5);



}





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


.glass-card h1 {


    font-size:34px;
    
    font-family:'Montserrat', sans-serif;

    letter-spacing:3px;


    text-align:center;


    color:#f5f8ff;


    transition:.5s ease;


}





.glass-card:hover h1 {


    transform:scale(1.05);


}






/* =========================
   SIGNATURE SUBTITLE
========================= */

.glass-card h2 {

    margin-top:18px;

    font-size:35px;

    font-family:'Parisienne', cursive;

    font-weight:400;

    letter-spacing:.5px;

    color:#D4AF37;

    text-shadow:
    0 0 12px rgba(212,175,55,.35),
    0 0 30px rgba(212,175,55,.15);

}

.glass-card h3 {

    margin-top:5px;

    font-size:15px;

   

    font-weight:400;

    letter-spacing:.5px;

    color:#ffffff;

    text-shadow:
    0 0 12px rgba(212,175,55,.35),
    0 0 30px rgba(212,175,55,.15);

}




/* =========================
   CARD IMAGE LIGHT EFFECT
========================= */


.card-shine {


    position:absolute;


    top:-120%;


    left:-120%;


    width:250%;


    height:250%;



    background:


    linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.18),

        transparent

    );



    transform:rotate(25deg);



    transition:

    1s ease;



    pointer-events:none;


}





.glass-card:hover .card-shine {


    top:100%;


    left:100%;


}
/* =========================
   PARTNERS SECTION
========================= */


.partners {

    margin-top:55px;

    display:grid;

    grid-template-columns:repeat(2, auto);

    column-gap:180px; /* increase space between left group and right group */

    row-gap:18px;

    justify-content:center;

    align-items:center;

}





.partner {


    opacity:0;


    animation:

    partnerAppear 1s ease forwards;



    padding:

    10px 28px;



    border-radius:50px;



    color:#f5f8ff;



    font-size:14px;


    letter-spacing:.4px;



    background:


    linear-gradient(

        145deg,

        rgba(35,80,120,.35),

        rgba(10,25,45,.45)

    );



    border:


    1px solid rgba(180,220,255,.15);



    backdrop-filter:

    blur(10px);



    box-shadow:


    0 10px 30px rgba(0,0,0,.25);



    transition:

    .4s ease;


}






.partner:hover {


    transform:

    translateY(-5px);



    border-color:

    rgba(212,175,55,.5);



    box-shadow:


    0 0 25px rgba(212,175,55,.18);


}






.partner:nth-child(1){

    animation-delay:2s;

}



.partner:nth-child(2){

    animation-delay:2.3s;

}



.partner:nth-child(3){

    animation-delay:2.6s;

}



.partner:nth-child(4){

    animation-delay:2.9s;

}





@keyframes partnerAppear {


    from {


        opacity:0;


        transform:

        translateY(40px);


        filter:blur(8px);


    }



    to {


        opacity:1;


        transform:

        translateY(0);


        filter:blur(0);


    }


}








/* =========================
   FINAL BACKGROUND PARTICLES
   (SUBTLE FINANCIAL FEEL)
========================= */



.background::selection {


    background:#1d5b8f;


}







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


@media(max-width:1100px){






    .cards {


        flex-direction:column;


        gap:25px;


    }




    .glass-card {


        width:90vw;


        max-width:470px;


        height:240px;


    }



    .partners {


        margin-top:35px;


    }


}







@media(max-width:600px){



    body {


        overflow:auto;


    }




    .landing {


        min-height:100vh;


        height:auto;


        padding:50px 20px;


    }

    .glass-card {


        height:220px;


    }



    .glass-card h1 {


        font-size:26px;


    }





    .glass-card h2 {


        font-size:38px;


    }





    .partners {


        grid-template-columns:1fr;


        width:100%;


    }





    .partner {


        text-align:center;


    }



    .shape {


        transform:scale(.7);


    }



}