/*==============================
  RESET
==============================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    min-height:100vh;
    overflow-x:hidden;
    background:#07070b;
    color:#fff;
    position:relative;
}


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

.background{
    position:fixed;
    inset:0;
    overflow:hidden;
    z-index:-5;
    background:
    radial-gradient(circle at top left,#0b2d65 0%,transparent 35%),
    radial-gradient(circle at bottom right,#7b0066 0%,transparent 35%),
    radial-gradient(circle at center,#181829 0%,#07070b 70%);
}


/*==============================
  PAINT BLOBS
==============================*/

.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:.55;
    animation:float 18s ease-in-out infinite;
}

.blob1{
    width:420px;
    height:420px;
    background:#1fa2ff;
    top:-120px;
    left:-120px;
}

.blob2{
    width:500px;
    height:500px;
    background:#ff006a;
    right:-150px;
    top:20%;
    animation-delay:4s;
}

.blob3{
    width:450px;
    height:450px;
    background:#ffb000;
    bottom:-150px;
    left:25%;
    animation-delay:8s;
}


/*==============================
  PAINT WAVES
==============================*/

.paint-wave{
    position:absolute;
    width:170%;
    height:260px;
    left:-35%;
    border-radius:50%;
    filter:blur(60px);
    opacity:.25;
}

.wave1{
    bottom:-120px;

    background:
    linear-gradient(
        90deg,
        #ff003c,
        #ff7b00,
        #ffe600,
        #39d353,
        #00b7ff,
        #7d4dff,
        #ff0077
    );

    animation:waveMove 18s linear infinite;
}

.wave2{
    top:-120px;

    background:
    linear-gradient(
        90deg,
        #00c2ff,
        #0047ff,
        #842cff,
        #ff0062,
        #ff9800
    );

    animation:waveMoveReverse 22s linear infinite;
}


/*==============================
  DECORATIVE CIRCLES
==============================*/

.circle{
    position:fixed;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
    animation:rotateSlow 40s linear infinite;
}

.circle1{
    width:500px;
    height:500px;
    top:-250px;
    right:-120px;
}

.circle2{
    width:350px;
    height:350px;
    bottom:-170px;
    left:-130px;
}

.circle3{
    width:180px;
    height:180px;
    right:10%;
    bottom:18%;
}


/*==============================
  LAYOUT
==============================*/

.container{
    width:min(1180px,92%);
    margin:auto;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:60px 0;
}


/*==============================
  GLASS CARD
==============================*/

.glass-card{

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

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

    backdrop-filter:blur(25px);

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

    border-radius:35px;

    padding:55px;

    text-align:center;

    box-shadow:
    0 25px 80px rgba(0,0,0,.45);

}


/*==============================
  LOGO
==============================*/

.logo-box img{

    width:180px;

    display:block;

    margin:auto;

    margin-bottom:30px;

}


/*==============================
  BADGE
==============================*/

.badge{

    display:inline-block;

    padding:10px 22px;

    border-radius:100px;

    background:linear-gradient(
        135deg,
        #ff1744,
        #ff9100
    );

    font-size:.82rem;

    font-weight:600;

    letter-spacing:2px;

    margin-bottom:22px;

}


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

h1{

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

    font-weight:800;

    line-height:1.1;

    margin-bottom:22px;

}

h1 span{

    background:linear-gradient(
        90deg,
        #ff1744,
        #ff9800,
        #ffd600,
        #39d353,
        #00c2ff,
        #7b61ff
    );

    -webkit-background-clip:text;

    color:transparent;

}


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

.description{

    max-width:650px;

    margin:auto;

    color:#d8d8d8;

    line-height:1.9;

    margin-bottom:45px;

    font-size:1.02rem;

}


/*==============================
  COUNTDOWN
==============================*/

.countdown{

    display:grid;

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

    gap:18px;

    margin-bottom:45px;

}

.time-box{

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

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

    border-radius:20px;

    padding:22px;

}

.time-box span{

    display:block;

    font-size:2rem;

    font-weight:700;

}

.time-box small{

    color:#bbbbbb;

}


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

.buttons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

    margin-bottom:50px;

}

.btn{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#fff;

    padding:16px 28px;

    border-radius:14px;

    font-weight:600;

    transition:.35s;

}

.whatsapp{

    background:#25D366;

}

.secondary{

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

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

}

.btn:hover{

    transform:translateY(-6px);

    box-shadow:0 15px 40px rgba(0,0,0,.35);

}


/*==============================
  CONTACT
==============================*/

.contact-grid{

    display:grid;

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

    gap:22px;

}

.contact-item{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:25px;

    border-radius:18px;

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

}

.contact-item i{

    font-size:1.4rem;

    color:#ff9f1a;

}

.contact-item h4{

    margin-bottom:10px;

}

.contact-item a{

    display:block;

    color:#d8d8d8;

    text-decoration:none;

    margin-bottom:6px;

}

.contact-item a:hover{

    color:#fff;

}


/*==============================
  FLOATING DROPS
==============================*/

.drops span{

    position:fixed;

    width:12px;

    height:12px;

    border-radius:50%;

    background:white;

    opacity:.15;

    animation:drop 12s linear infinite;

}

.drops span:nth-child(1){left:8%;animation-delay:0s;}
.drops span:nth-child(2){left:25%;animation-delay:2s;}
.drops span:nth-child(3){left:42%;animation-delay:4s;}
.drops span:nth-child(4){left:61%;animation-delay:6s;}
.drops span:nth-child(5){left:80%;animation-delay:8s;}
.drops span:nth-child(6){left:92%;animation-delay:10s;}


/*==============================
  FOOTER
==============================*/

footer{

    text-align:center;

    color:#bcbcbc;

    padding:25px;

}


/*==============================
  ANIMATIONS
==============================*/

@keyframes float{

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

    50%{
        transform:translateY(-60px) translateX(40px);
    }

}

@keyframes waveMove{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes waveMoveReverse{

    from{
        transform:rotate(360deg);
    }

    to{
        transform:rotate(0deg);
    }

}

@keyframes rotateSlow{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes drop{

    0%{
        transform:translateY(-100vh);
        opacity:0;
    }

    20%{
        opacity:.2;
    }

    100%{
        transform:translateY(120vh);
        opacity:0;
    }

}


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

@media(max-width:900px){

    .glass-card{
        padding:40px 30px;
    }

    .countdown{
        grid-template-columns:repeat(2,1fr);
    }

    .contact-grid{
        grid-template-columns:1fr;
    }

}

@media(max-width:600px){

    h1{
        font-size:2.4rem;
    }

    .description{
        font-size:.95rem;
    }

    .logo-box img{
        width:140px;
    }

    .buttons{
        flex-direction:column;
    }

    .btn{
        justify-content:center;
        width:100%;
    }

    .countdown{
        gap:12px;
    }

    .time-box{
        padding:18px;
    }

}