/*=========================================
ENQUIRY NOTIFICATION
=========================================*/


.enquiry-notification{

    position:fixed;

    right:35px;

    bottom:35px;

    width:390px;

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:26px;

    background:

    linear-gradient(
        145deg,
        rgba(255,255,255,.08),
        rgba(255,255,255,.02)
    );


    backdrop-filter:blur(20px);


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


    border-radius:24px;


    box-shadow:

    0 30px 80px rgba(0,0,0,.65);


    overflow:hidden;


    z-index:99999;


    animation:

    notificationIn .6s cubic-bezier(.2,.8,.2,1);


}




/* CLOSE */

.notification-close{

    position:absolute;

    top:14px;

    right:14px;


    width:26px;

    height:26px;


    border-radius:50%;


    border:0;


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


    color:#888;


    cursor:pointer;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:11px;

}


.notification-close:hover{

    color:#fff;

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

}



/* ICON */

.notification-icon{

    flex-shrink:0;

}



.icon-circle{

    width:56px;

    height:56px;


    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:22px;


}



.success .icon-circle{


    color:#17C652;


    background:

    rgba(23,198,82,.12);


    border:

    1px solid rgba(23,198,82,.25);


}



.error .icon-circle{


    color:#ff5252;


    background:

    rgba(255,82,82,.12);


    border:

    1px solid rgba(255,82,82,.25);


}




/* CONTENT */


.notification-content{

    padding-right:20px;

}


.notification-content span{


    display:block;


    color:#17C652;


    font-size:12px;


    font-weight:600;


    letter-spacing:.7px;


    text-transform:uppercase;


    margin-bottom:5px;


}



.error .notification-content span{

    color:#ff5252;

}



.notification-content h4{


    color:#fff;


    font-size:17px;


    line-height:1.4;


    margin-bottom:8px;


}



.notification-content p{


    color:#999;


    font-size:14px;


    line-height:1.6;


    margin:0;


}




/* PROGRESS TIMER */


.notification-progress{


    position:absolute;


    left:0;

    bottom:0;


    height:3px;


    width:100%;


    background:#17C652;


    animation:

    notificationTimer 5s linear forwards;


}



.error .notification-progress{

    background:#ff5252;

}





/* ANIMATIONS */


.success .icon-circle i{


    animation:

    checkAnimation .6s ease;


}



.error .icon-circle i{


    animation:

    shakeAnimation .5s ease;


}




@keyframes notificationIn{


    from{

        opacity:0;

        transform:

        translateY(40px)

        scale(.95);

    }


    to{

        opacity:1;

        transform:

        translateY(0)

        scale(1);

    }

}



@keyframes notificationTimer{


    from{

        width:100%;

    }


    to{

        width:0%;

    }

}




@keyframes checkAnimation{


    0%{

        transform:scale(0);

    }


    60%{

        transform:scale(1.3);

    }


    100%{

        transform:scale(1);

    }

}




@keyframes shakeAnimation{


    0%,100%{

        transform:translateX(0);

    }


    25%{

        transform:translateX(-5px);

    }


    75%{

        transform:translateX(5px);

    }

}




@media(max-width:600px){


    .enquiry-notification{


        left:20px;

        right:20px;

        bottom:20px;

        width:auto;


    }


}