@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');


.center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

.popup-box{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.popup-text {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin: 2px;
}
.popup-text .icon {
    margin-right: 10px;
}
.popup{
    border-radius: 30px;
    width: max-content;
    padding: 50px 20px;
    background: radial-gradient(ellipse at bottom, #264e85 0%, rgba(59, 60, 83, 0.97) 100%);
    box-sizing:border-box;
    z-index:2;
    text-align:center;
    opacity:0;
    top:-200%;
    transform:translate(-50%,-50%) scale(0.5);
    transition:opacity 300ms ease-in-out,top 1000ms ease-in-out, transform 1000ms ease-in-out;

}
.popup.active{
    opacity: 1;
    top: 51.5%;
    transform:translate(-50%,-50%) scale(1);
    transition:transform 300ms cubic-bezier(0.18,0.89,0.43,1.19);
}

.popup .title{
    margin:5px 0px;
    font-size:30px;
    font-weight:600;
}
.popup .description{
    color:#222;
    font-size:15px;
    padding:5px;
}
.popup .dismiss-btn{
    margin-top:15px;
}
.dismiss-btn button ,.open-btn button{
    padding:10px 20px;
    background-color: #111;
    color:#f5f5f5;
    border: 2px solid #111;
    font-size:16px;
    font-weight:600;
    outline:none;
    border-radius:10px;
    transition:all 300ms ease-in-out;
    cursor:pointer;
}
.dismiss-btn button:hover,.open-btn button:hover{
    color:#111;
    background:#f5f5f5;
}

.popup > div{
    position:relative;
    top:10px;
    opacity:0;
}
.popup.active > div{
    top:0px;
    opacity:1;
}

.popup.active .icon{
    transition: all 300ms ease-in-out 250ms;
}
.popup.active .title{
    transition: all 300ms ease-in-out 250ms;
}
.popup.active .description{
    transition: all 300ms ease-in-out 250ms;
}
.popup.active .dismiss-btn{
    transition: all 300ms ease-in-out 400ms;
}