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

html,
body{
    width:100%;
    height:100%;
    font-family: 'Poppins', sans-serif;
}

/* Background */
body{
    background:url('images/bg1.jpg') center center/cover no-repeat;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
}

/* Dark Overlay */
.overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.55);
    z-index:1;
}

/* Content */
.coming-soon-container{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
    padding:20px;
    max-width:800px;
    animation:fadeIn 1.5s ease;
}

.logo-box{
    width:220px;
    height:220px;
    background:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 30px;
    box-shadow:0 15px 40px rgba(0,0,0,.3);
    position:relative;
    overflow:hidden;
}

/* Common Logo Style */
.logo{
    position:absolute;
    width:140px;
    max-width:80%;
    animation:logoFloat 4s ease-in-out infinite;
}

/* Logo 1 */
.logo1{
    animation:
        logoFloat 6s ease-in-out infinite,
        fadeLogo1 6s infinite;
}

/* Logo 2 */
.logo2{
    opacity:0;
    animation:
        logoFloat 6s ease-in-out infinite,
        fadeLogo2 6s infinite;
}

.logo1,
.logo2{
    animation-duration:8s;
}
/* Floating Effect */
@keyframes logoFloat{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-10px);
    }
}

/* Show Logo 1 for 3 sec */
@keyframes fadeLogo1{
    0%,45%{
        opacity:1;
    }
    50%,95%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}

/* Show Logo 2 for 3 sec */
@keyframes fadeLogo2{
    0%,45%{
        opacity:0;
    }
    50%,95%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}
/* Heading */
h1{
    font-size:4rem;
    font-weight:700;
    margin-bottom:20px;
    letter-spacing:2px;
    text-transform:uppercase;
    animation:slideDown 1.2s ease;
}

/* Paragraph */
p{
    font-size:1.3rem;
    line-height:1.8;
    max-width:650px;
    margin:auto;
    animation:fadeUp 1.8s ease;
}

/* Fade In */
@keyframes fadeIn{
    from{
        opacity:0;
    }
    to{
        opacity:1;
    }
}

/* Heading Animation */
@keyframes slideDown{
    from{
        opacity:0;
        transform:translateY(-50px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Text Animation */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* Floating Logo */
@keyframes logoFloat{
    0%{
        transform:translateY(0px);
    }
    50%{
        transform:translateY(-12px);
    }
    100%{
        transform:translateY(0px);
    }
}

/* Large Desktop */
@media (min-width:1600px){

    .logo{
        width:220px;
    }

    h1{
        font-size:5rem;
    }

    p{
        font-size:1.5rem;
    }
}

/* Laptop */
@media (max-width:1200px){

    h1{
        font-size:3.5rem;
    }

    p{
        font-size:1.2rem;
    }
}

/* Tablet */
@media (max-width:768px){

    .logo{
        width:140px;
        margin-bottom:20px;
    }

    h1{
        font-size:2.5rem;
    }

    p{
        font-size:1rem;
        line-height:1.7;
    }
}

/* Mobile */
@media (max-width:480px){

    .coming-soon-container{
        padding:15px;
    }

    .logo{
        width:110px;
    }

    h1{
        font-size:2rem;
        margin-bottom:15px;
    }

    p{
        font-size:0.95rem;
    }
}

/* Small Mobile */
@media (max-width:320px){

    h1{
        font-size:1.7rem;
    }

    p{
        font-size:0.85rem;
    }
}