*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html,
body{
    width:100%;
    overflow-x:hidden;
}

body{

    min-height:100vh;

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

    padding:20px;

    position:relative;

    background:#fff url('/images/bg2.jpg') center center no-repeat;
    background-size:cover;
    background-attachment:fixed;

    overflow-x:hidden;
    overflow-y:auto;

}

/* Background Glow */

body::before,
body::after{

    content:"";
    position:fixed;
    border-radius:50%;
    z-index:0;
    pointer-events:none;

}

body::before{

    width:500px;
    height:500px;

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

    background:linear-gradient(135deg,#005bea,#00c6fb);
    opacity:.06;

    animation:float1 10s ease-in-out infinite;

}

body::after{

    width:450px;
    height:450px;

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

    background:linear-gradient(135deg,#0093E9,#80D0C7);
    opacity:.05;

    animation:float2 12s ease-in-out infinite;

}

@keyframes float1{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(30px);
    }

}

@keyframes float2{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-30px);
    }

}

/* Floating Circles */

.circle{

    position:fixed;
    border-radius:50%;
    background:linear-gradient(135deg,#00b4db,#0083b0);
    opacity:.08;
    z-index:0;

}

.c1{

    width:80px;
    height:80px;

    top:8%;
    right:5%;

    animation:move1 8s infinite;

}

.c2{

    width:55px;
    height:55px;

    bottom:10%;
    left:8%;

    animation:move2 7s infinite;

}

.c3{

    width:30px;
    height:30px;

    top:28%;
    left:18%;

    animation:move3 5s infinite;

}

@keyframes move1{

    50%{
        transform:translateY(-18px);
    }

}

@keyframes move2{

    50%{
        transform:translateY(18px);
    }

}

@keyframes move3{

    50%{
        transform:translateY(-12px);
    }

}

/* Container */

.container{

    position:relative;
    z-index:5;

    width:100%;
    max-width:850px;

    padding:45px 35px;

    text-align:center;

    background:rgba(255,255,255,.15);
    backdrop-filter:blur(8px);

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    animation:fadeIn .8s ease;

}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

/* Logo */

.logo{

    width:180px;
    margin:0 auto 30px;

    animation:logoFloat 4s ease-in-out infinite;

}

.logo img{

    width:100%;
    display:block;

}

@keyframes logoFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-10px);
    }

}

/* Text */

h1{

    font-size:52px;
    color:#111827;
    font-weight:700;
    margin-bottom:15px;

}

.highlight{

    background:linear-gradient(90deg,#005bea,#00c6fb);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;

}

h2{

    font-size:24px;
    color:#555;
    font-weight:500;
    margin-bottom:25px;

}

.divider{

    width:90px;
    height:5px;

    margin:30px auto;

    background:linear-gradient(90deg,#005bea,#00c6fb);

    border-radius:20px;

}

p{

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

}

/* Contact */

.contact-info{

    margin-top:35px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;

    flex-wrap:wrap;

    font-size:18px;

}

.contact-info i{

    color:#0066ff;
    font-size:22px;

}

.contact-info a{

    color:#0066ff;
    text-decoration:none;

}

.contact-info a:hover{

    text-decoration:underline;

}

/* Footer */

.footer{

    margin-top:35px;
    color:#777;
    font-size:14px;

}

/* Tablet */

@media (max-width:992px){

    h1{

        font-size:42px;

    }

    h2{

        font-size:20px;

    }

}

/* Mobile */

@media (max-width:768px){

    body{

        padding:15px;
        background-attachment:scroll;
        align-items:flex-start;

    }

    body::before,
    body::after{

        display:none;

    }

    .circle{

        display:none;

    }

    .container{

        width:100%;
        margin:20px auto;
        padding:30px 20px;
        border-radius:18px;

    }

    .logo{

        width:130px;
        margin-bottom:20px;

    }

    h1{

        font-size:30px;
        line-height:1.35;

    }

    h2{

        font-size:17px;
        margin-bottom:18px;

    }

    .divider{

        width:70px;
        margin:22px auto;

    }

    p{

        font-size:15px;
        line-height:1.7;

    }

    .contact-info{

        flex-direction:column;
        gap:8px;
        font-size:16px;

    }

    .contact-info i{

        font-size:20px;

    }

    .footer{

        margin-top:25px;
        font-size:13px;

    }

}