/* ===========================================
   ROOT MY TRIP - COMING SOON
   PART 1
=========================================== */

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

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    font-family:'Poppins',sans-serif;
    color:#fff;
    background:#07131f;
}

a{
    text-decoration:none;
    color:inherit;
}

img{
    max-width:100%;
    display:block;
}

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

.background{
    position:fixed;
    inset:0;
    background:url("../images/bg.jpg") center center/cover no-repeat;
    z-index:-5;
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(6,18,34,.72);
    z-index:1;
}

.gradient{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(0,194,255,.30),
        transparent 45%),

        radial-gradient(circle at bottom left,
        rgba(255,209,102,.20),
        transparent 45%),

        linear-gradient(135deg,
        rgba(6,18,34,.55),
        rgba(8,34,58,.65));

    animation:gradientMove 14s ease infinite alternate;
    z-index:2;
}

@keyframes gradientMove{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.15);
    }

}

.stars{

    position:absolute;
    inset:0;
    background-image:

        radial-gradient(#ffffff 1px,transparent 1px),

        radial-gradient(#ffffff 1px,transparent 1px);

    background-size:120px 120px,
                     180px 180px;

    background-position:0 0,
                        60px 60px;

    opacity:.18;

    animation:stars 50s linear infinite;

}

@keyframes stars{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-120px);
    }

}

/*==================================
MAIN CONTAINER
==================================*/

.container{

    width:100%;
    height:100vh;

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

    padding:40px;

    position:relative;
    z-index:5;

}

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

.glass-card{

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

    padding:60px;

    text-align:center;

    border-radius:30px;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

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

    box-shadow:

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

        inset 0 0 0 1px rgba(255,255,255,.05);

    animation:cardFade 1.2s ease;

}

@keyframes cardFade{

    from{

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

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

/*==================================
TOP TAG
==================================*/

.tag{

    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 22px;

    border-radius:100px;

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

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

    color:#FFD166;

    font-size:.9rem;
    font-weight:600;

    letter-spacing:.5px;

}

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

.brand{

    margin-top:28px;

    font-size:1.2rem;

    font-weight:700;

    letter-spacing:8px;

    color:#00C2FF;

    text-transform:uppercase;

}

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

.glass-card h1{

    margin-top:18px;

    font-size:4rem;

    line-height:1.15;

    font-weight:800;

    color:#fff;

    text-shadow:
        0 8px 25px rgba(0,0,0,.45);

}

.subtitle{

    max-width:700px;

    margin:22px auto 0;

    font-size:1.05rem;

    line-height:1.9;

    color:rgba(255,255,255,.82);

}

/*==================================
LAUNCH DATE
==================================*/

.launch-date{

    margin-top:38px;

}

.launch-date span{

    display:block;

    color:#9fdfff;

    font-size:.95rem;

    text-transform:uppercase;

    letter-spacing:3px;

}

.launch-date h2{

    margin-top:10px;

    font-size:2.2rem;

    font-weight:700;

    color:#FFD166;

    text-shadow:

        0 0 20px rgba(255,209,102,.25);

}
/* ===========================================
   ROOT MY TRIP - COMING SOON
   PART 2
=========================================== */


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

.countdown{
    margin-top:45px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.time-box{

    position:relative;

    padding:30px 20px;

    border-radius:22px;

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

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

    backdrop-filter:blur(12px);

    transition:.35s;

    overflow:hidden;

}

.time-box::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(135deg,
    rgba(0,194,255,.20),
    transparent,
    rgba(255,209,102,.15));

    opacity:0;

    transition:.4s;

}

.time-box:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(0,194,255,.18);

}

.time-box:hover::before{

    opacity:1;

}

.time-box h2{

    font-size:3rem;

    font-weight:700;

    color:#ffffff;

}

.time-box span{

    display:block;

    margin-top:10px;

    text-transform:uppercase;

    letter-spacing:2px;

    font-size:.8rem;

    color:#b8d8ec;

}


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

.contact{

    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

}

.contact a{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

    font-size:1rem;

    transition:.35s;

}

.contact a i{

    width:48px;

    height:48px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#00c2ff;

    color:#07131f;

    font-size:18px;

}

.contact a:hover{

    color:#FFD166;

    transform:translateY(-3px);

}


/*==============================
SOCIAL
==============================*/

.social{

    margin-top:35px;

    display:flex;

    justify-content:center;

    gap:16px;

}

.social a{

    width:52px;

    height:52px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

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

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

    transition:.35s;

    font-size:20px;

}

.social a:hover{

    background:#00c2ff;

    color:#07131f;

    transform:translateY(-6px) rotate(360deg);

}


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

.footer-text{

    margin-top:35px;

    color:#FFD166;

    letter-spacing:5px;

    font-size:.9rem;

}


/*==============================
FLOATING ICONS
==============================*/

.floating-icons i{

    position:absolute;

    color:rgba(255,255,255,.15);

    z-index:2;

}

.plane1{

    top:8%;

    left:6%;

    font-size:55px;

    animation:fly1 18s linear infinite;

}

.plane2{

    bottom:12%;

    right:8%;

    font-size:40px;

    animation:fly2 20s linear infinite;

}

.globe1{

    top:16%;

    right:12%;

    font-size:55px;

    animation:rotateGlobe 20s linear infinite;

}

.pin1{

    bottom:18%;

    left:10%;

    font-size:36px;

    animation:floatIcon 5s ease-in-out infinite;

}

.pin2{

    top:55%;

    right:18%;

    font-size:30px;

    animation:floatIcon 6s ease-in-out infinite;

}

@keyframes fly1{

    0%{
        transform:translateX(-100px) translateY(0) rotate(-10deg);
    }

    100%{
        transform:translateX(1700px) translateY(-120px) rotate(8deg);
    }

}

@keyframes fly2{

    0%{
        transform:translateX(100px);
    }

    100%{
        transform:translateX(-1700px);
    }

}

@keyframes rotateGlobe{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}

@keyframes floatIcon{

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

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

}


/*==============================
CLOUDS
==============================*/

.cloud{

    position:absolute;

    width:220px;

    height:70px;

    border-radius:100px;

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

    filter:blur(8px);

    z-index:1;

}

.cloud1{

    top:12%;

    left:-250px;

    animation:cloudMove 40s linear infinite;

}

.cloud2{

    top:65%;

    left:-350px;

    width:280px;

    animation:cloudMove 55s linear infinite;

}

.cloud3{

    top:35%;

    left:-300px;

    width:180px;

    animation:cloudMove 65s linear infinite;

}

@keyframes cloudMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(1800px);
    }

}


/*==============================
LOADER
==============================*/

#loader{

    position:fixed;

    inset:0;

    background:#07131f;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;

    transition:.6s;

}

.spinner{

    width:70px;

    height:70px;

    border-radius:50%;

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

    border-top:5px solid #00c2ff;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    to{

        transform:rotate(360deg);

    }

}


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

@media(max-width:992px){

    .glass-card{

        padding:45px 30px;

    }

    .glass-card h1{

        font-size:3rem;

    }

    .countdown{

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

    }

}

@media(max-width:600px){

    body{

        overflow:auto;

    }

    .container{

        padding:20px;

    }

    .glass-card{

        padding:35px 20px;

        border-radius:22px;

    }

    .brand{

        letter-spacing:4px;

        font-size:1rem;

    }

    .glass-card h1{

        font-size:2.2rem;

    }

    .subtitle{

        font-size:.95rem;

        line-height:1.7;

    }

    .launch-date h2{

        font-size:1.5rem;

    }

    .countdown{

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

        gap:12px;

    }

    .time-box{

        padding:20px 12px;

    }

    .time-box h2{

        font-size:2rem;

    }

    .contact{

        gap:18px;

        flex-direction:column;

    }

    .contact a{

        justify-content:center;

    }

    .social{

        flex-wrap:wrap;

    }

    .footer-text{

        letter-spacing:2px;

        font-size:.8rem;

    }

    .floating-icons{

        display:none;

    }

}