/* =========================
   IT COMPANY PREMIUM UI
========================= */

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

body{

    font-family:'Poppins',sans-serif;
    background:#050b1f;
    color:#fff;
    overflow-x:hidden;

}


/* =========================
   Animated Background
========================= */

body:before{

    content:"";
    position:fixed;
    width:100%;
    height:100%;
    background:
    linear-gradient(120deg,
    rgba(37,99,235,.25),
    transparent,
    rgba(124,58,237,.25));

    z-index:-3;

}


.bg-shape{

    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    animation:float 8s infinite alternate;
    z-index:-1;

}


.shape1{

    width:350px;
    height:350px;
    background:#2563eb;
    top:-120px;
    left:-100px;

}


.shape2{

    width:300px;
    height:300px;
    background:#7c3aed;
    right:-80px;
    top:250px;

}


.shape3{

    width:250px;
    height:250px;
    background:#06b6d4;
    bottom:50px;
    left:45%;

}


@keyframes float{

    from{

        transform:translateY(0);

    }

    to{

        transform:translateY(50px);

    }

}



/* =========================
 NAVBAR
========================= */

.navbar{

    padding:25px 0;

}


.logo{

    color:white!important;
    font-size:26px;
    font-weight:700;

}


.logo i{

    color:#38bdf8;
    margin-right:10px;

}


.secure-badge{

    background:rgba(255,255,255,.1);
    backdrop-filter:blur(10px);
    padding:12px 22px;
    border-radius:50px;
    color:#38bdf8;
    border:1px solid rgba(255,255,255,.2);

}




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


.hero{

    min-height:80vh;
    display:flex;
    align-items:center;

}


.hero-tag{

    background:rgba(56,189,248,.15);
    color:#38bdf8;
    padding:10px 20px;
    border-radius:50px;
    border:1px solid rgba(56,189,248,.4);
    display:inline-flex;
    gap:10px;

}



.hero h1{

    margin-top:25px;
    font-size:58px;
    font-weight:700;
    line-height:1.2;

}


.hero h1 span{

    background:linear-gradient(
    90deg,
    #38bdf8,
    #8b5cf6);

    -webkit-background-clip:text;
    color:transparent;

}



.hero p{

    color:#cbd5e1;
    font-size:17px;
    line-height:1.8;

}



/* Feature Badge */

.hero-feature div{

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,.15);
    color:white;
    padding:12px 20px;
    border-radius:12px;

}


.hero-feature i{

    color:#38bdf8;

}




/* =========================
 Verification CARD
========================= */


.verify-card{

    background:
    linear-gradient(
    145deg,
    rgba(255,255,255,.15),
    rgba(255,255,255,.05));

    backdrop-filter:blur(20px);

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

    padding:45px;

    border-radius:30px;

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

    animation:cardMove 5s infinite alternate;


}



@keyframes cardMove{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}



.card-icon{

    width:90px;
    height:90px;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #8b5cf6);

    border-radius:25px;

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

    margin:auto;

    font-size:40px;

    box-shadow:
    0 20px 40px rgba(37,99,235,.5);

}




.verify-card h3{

    margin-top:25px;
    font-weight:600;

}


.verify-card p{

    color:#cbd5e1;

}



/* Input */


.input-group-text{

    background:#2563eb;
    color:white;
    border:none;

}



.form-control{

    height:58px;
    background:rgba(255,255,255,.1);
    border:none;
    color:white;

}



.form-control::placeholder{

    color:#94a3b8;

}



.form-control:focus{

    background:rgba(255,255,255,.15);
    color:white;
    box-shadow:0 0 0 2px #38bdf8;

}




/* Button */

.verify-btn{

    height:58px;

    background:
    linear-gradient(
    90deg,
    #2563eb,
    #8b5cf6);

    color:white;

    border-radius:15px;

    font-weight:600;

    transition:.4s;

}



.verify-btn:hover{

    transform:scale(1.05);

    box-shadow:
    0 20px 40px rgba(37,99,235,.5);

}



/* Stats */


.stats h4{

    color:#38bdf8;

}



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


.features{

    padding:80px 0;

}



.feature-card{

    height:100%;

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

    backdrop-filter:blur(15px);

    border-radius:25px;

    padding:35px;

    text-align:center;

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

    transition:.4s;

}



.feature-card:hover{

    transform:translateY(-15px);

    border-color:#38bdf8;

}




.feature-card i{

    width:75px;
    height:75px;

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

    margin:auto;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    #2563eb,
    #8b5cf6);

    font-size:30px;

}




.feature-card p{

    color:#cbd5e1;

}



/* Footer */


footer{

    background:#020617;

    padding:25px;

    color:#94a3b8;

}




/* =========================
 Mobile
========================= */


@media(max-width:768px){


.hero h1{

font-size:38px;

}


.verify-card{

padding:25px;

}


}