@charset "utf-8";
/* CSS Document */

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

.coming-soon{
    position:relative;
    width:min(95vw,900px);
    aspect-ratio:16/9;
    display:flex;
    justify-content:center;
    align-items:center;
	    margin: auto;
}

/*=========================
    STETHOSCOPE PNG
=========================*/

.stethoscope{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
    pointer-events:none;
    transform-origin:center top;
    animation:swinga 5s ease-in-out infinite;
}

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

.contentsgh{
    position:relative;
    z-index:10;
    text-align:center;
}

.contentsgh h3{
    font-size:clamp(42px,8vw,95px);
    font-weight:900;
    letter-spacing:6px;
    color:#0B3C89;
    line-height:.9;
    text-transform:uppercase;
    animation:glow1 3s ease-in-out infinite;
}

.contentsgh span{
    display:block;
    margin-top:12px;
    color:#1E88E5;
}

/*=========================
        HEARTBEAT
=========================*/

.heartbeat1{
    position:absolute;
    bottom:5%;
    left:50%;
    transform:translateX(-50%);
    width:45%;
    height:2px;
    background:#d6e9ff; 
    overflow:hidden;
}

.heartbeat1::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    left:-100%;
    background:linear-gradient(90deg,
    transparent,
    #2196F3,
    transparent);
    animation:heartbeat1 2.8s linear infinite;
}

/*=========================
        DOTS
=========================*/

.dot1{
    position:absolute;
    width:10px;
    height:10px;
    background:#2196F3;
    border-radius:50%;
    opacity:.3;
    animation:float 4s ease-in-out infinite;
}

.dot1:nth-child(4){
    left:10%;
    top:12%;
}

.dot1:nth-child(5){
    right:10%;
    top:18%;
}

.dot1:nth-child(6){
    left:15%;
    bottom:18%;
}

.dot1:nth-child(7){
    right:12%;
    bottom:12%;
}

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

@keyframes swinga{

    0%,100%{ transform: scale(1);
        /*transform:rotate(-1deg);*/
    }

    50%{ transform: scale(.9);
       /* transform:rotate(1deg);*/
    }

}

@keyframes glow1{

    0%,100%{
        text-shadow:none;
        transform:scale(1);
    }

    50%{

        text-shadow:
        0 0 12px rgba(30,136,229,.4),
        0 0 28px rgba(30,136,229,.25);

        transform:scale(1.02);

    }

}

@keyframes.heartbeat1{

    from{
        left:-100%;
    }

    to{
        left:100%;
    }

}

@keyframes float{

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

    50%{
        transform:translateY(-15px);
        opacity:1;
    }

}

/*=========================
      TABLET
=========================*/

@media(max-width:768px){

    .coming-soon{

        width:95vw;
        aspect-ratio:1/1;

    }

    .contentsgh h3{

        letter-spacing:3px;

    }

    .heartbeat1{

        width:60%;

    }

}

/*=========================
      MOBILE
=========================*/

@media(max-width:480px){

    .coming-soon{

        aspect-ratio:1/1.2;

    }

    .contentsgh h3{

        font-size:clamp(34px,12vw,55px);
        letter-spacing:2px;

    }

    .heartbeat1{

        width:75%;

    }

    .dot1{

        display:none;

    }

}