*{
    font-family: 'Poppins', sans-serif;
}
.swal2-border-radius {
    -webkit-border-radius: 20px !important;
    -moz-border-radius: 20px !important;
    border-radius: 20px !important;
}
.center{
    text-align: center;
}
.flex-center{
    justify-content: center;
    align-items: center;
}
.flex-even{
    justify-content: space-evenly;
}
.flex-between{
    justify-content: space-between;
}
.gradient-custom {
    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(180deg, rgb(206, 231, 255, 0.05), rgba(1, 74, 107, 0.2));
    
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(180deg, rgb(206, 231, 255, 0.05), rgba(1, 74, 107, 0.2))
    }
/* --------------------------------CHATBOX------------------------- */

@keyframes jump {
    0%   { transform: scale(1,1)      translateY(0); }
    10%  { transform: scale(1.1,.9)   translateY(0); }
    30%  { transform: scale(.9,1.1)   translateY(-70px); }
    50%  { transform: scale(1.05,.95) translateY(0); }
    57%  { transform: scale(1,1)      translateY(-8px); }
    64%  { transform: scale(1,1)      translateY(0); }
    100% { transform: scale(1,1)      translateY(0); }
}
@keyframes shadow-glow{
    0% {
        -webkit-filter: drop-shadow(0px 25px 5px rgba(187, 187, 187, .7));
    }
    40%{
        -webkit-filter: drop-shadow(0px 25px 8px rgba(139, 139, 139, .7));
    }
    65%{
        -webkit-filter: drop-shadow(0px 10px 7px rgba(61, 61, 61, 0.5)); 
    }
    85%, 100% {
        -webkit-filter: drop-shadow(0px 10px 6px rgba(54, 54, 54, .5)); 
        
    }
}
@keyframes logo-glow{
    0% {
        -webkit-filter: drop-shadow(0 0 8px rgba(35, 167, 255, 0.6));
    }
    100% {
        -webkit-filter: drop-shadow(0px 0px 1px rgba(0, 58, 112, 0.7));
    }
}

.c-boxIcon{
    width: 70px;
    height: 50px;
    position: fixed;
    inset: auto 2rem 3rem auto;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-name: jump;
    animation-timing-function: cubic-bezier(0.280, 0.840, 0.420, 1);
    z-index: 99;
}
.chatIcon{
    width: 70px;
    justify-self: center;
    margin-bottom: 3px;
    cursor: pointer;
    animation: shadow-glow 2s infinite;
}
.msgbox {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform:scale(0);
    opacity: 0;
    inset: auto 2% 10% auto;
    padding-bottom: 10px;
    /* max-width: 310px;
    max-height: 400px; */
    min-width: 20rem;
    min-height: 30rem;
    border-radius: 20px;
    transform-origin: bottom right;
    animation: logo-glow 1.2s infinite alternate;
    transition: .3s ease-in-out;
}
#cbox:checked~.msgbox{
    transform: scale(1);
    opacity: 1;
    transition: opacity .5s ease-in-out;
    z-index: 99;
}
#cbox:checked~.c-boxIcon{
    display: none;
    transition: .7s ease-in-out;
}
.cboxClose{
    position: absolute;
    right: 0;
    top: 0;
    padding: 4px 7px;
    border-radius: 0 15px 0 0;
    font-weight: bolder;
    color: crimson;
    cursor: pointer;
}
.cboxClose:hover{
    color:#04507c;
}
#list {
    inset: 0;
    margin: auto;
    max-width: 300px;
    max-height: 25rem;
    margin-bottom: 5px;
    padding: 25px 10px;
    overflow-x: auto;
    scroll-behavior: smooth !important;
    outline: none;
    border: none;
    background-color: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(2px);

}
.botRes{
    background:linear-gradient(180deg,rgba(255, 206, 210, 0.05), rgba(177, 0, 38, 0.2));
    justify-self: end;
}
.botRes span{  
    text-align: right;
}
.userInput span, .botRes span{
    display: block;
    margin-block-start: 0;
    margin-block-end: 4px;
    align-items: center;
    font-size: var(--card-p);
    font-weight: bolder;
    color: var(--text-color);
}
.userInput{
    background:linear-gradient(180deg,rgb(206, 231, 255, 0.05), rgba(1, 74, 107, 0.2));
}
.userInput, .botRes{
    text-align: center;
    margin: 10px 0;
    border-bottom: 3px solid rgba(1, 77, 148, 0.5);
    width: fit-content;
    padding: 2px 10px;
    font-size: var(--head-font);
    word-wrap: break-word;
    border-radius:8px;
}
.entryBox{
    min-width: 320px;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    inset: auto 0 .7rem 0;
    padding: 10px 5px;
}
.entryBox img{
    max-width: 40px;
}
@keyframes pushbtn{
    0%{
        transform: translateX(-3px);
    }
    100%{
        transform: translateX(3px);
    }
}
.pushIcon{
    padding-bottom: 5px;
    font-size: calc(1rem + .3vw);
    animation: pushbtn .5s infinite alternate;
}
#input_cmt {
    outline: none;
    border: none;
    border-bottom: 1px solid gray;
    min-width: 200px;
    font-size: clamp(.8rem, +.6vw, .9rem);
    background-color: aliceblue;
}
#btn_post {
    border: none;
    border-radius: 7px;
    padding: 2px 8px;
    font-weight: bold;
    color: #04507c;
    background-color: orange;
    cursor: pointer;
    
}
.nav-link{
    font-weight: bold !important;
}

/* --------------------home image slide---------------- */
.acon-slide {
    position: relative;
    display: flex;
    justify-content: center;
    justify-self: center;
    width: 95vw;
    height: 100vh;
    border-radius: 10px;
    overflow: hidden;
    mask-image: linear-gradient(
        to right,
        transparent,
        #000 2% 98%,
        transparent
    );
}
.aslider{
    --totalImg : 0;
    position: relative;
    display: flex;
    width: 100%;
    min-width: calc(100vw * var(--totalImg));
    min-height: 400px;
    left: 100%;
}
.aslider:hover .acard_img{
    animation-play-state: paused;
    filter: grayscale(100%);
}
.aslider .acard_img:hover{
    filter: grayscale(0%);
}
@keyframes homeSlide{
    to{
        left: calc(100vw * -.05);
    }
}
.acard_img{
    --cycleImg : calc(var(--totalImg) * 14s);
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: homeSlide var(--cycleImg) linear infinite;
    animation-delay: calc(var(--cycleImg) / var(--totalImg) * (var(--position) + 2) * -1);
    left: max(calc(100vw * var(--totalImg)), 100%);
    border-radius: 10px;
}
.nextprev-main{
    position: relative;
    width: 100%;
    height: 100px;
    transform: translateY(-100px);
}
/* --------------------privileges-------------------- */
@keyframes slide-up {
    from {
        opacity: 0;
        transform: translateY(80px);
    }

    to {
        opacity: 1;
        transform: translateY(120px);
    }
}

.privBtn{
    position: relative;
    display: flex;
    justify-content: center;
    justify-self: center;
    width: fit-content;
    cursor: pointer;
    height: 120px;
}
.privBtn img{
    min-width: 60px;
    max-width: 120px !important;
    width: 100%;
    height: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.privBtn img:hover{
    scale: 1.07;
}
.eprivOp{
    position: absolute;
    display: flex;
    padding: min(20px, 10%);
    color: white;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: max-content;
    height:auto;
    opacity: 0;
    transform: translateY(120px);
    line-height: 1.5rem;
    border: 1px solid white;
    background-color: rgba(38, 138, 253, 0.9);
    border-radius: 10px;
    box-shadow: 1px 0 5px #afafaf;
    z-index: 1;
    transition: .5s ease-in-out;
}
.eprivOp li, .eprivOp p{
    list-style:none;
    font-weight: bold;
    text-shadow: 0 1px 2px #6d6d6d;
}
@media(max-width: 576px) {
    .acon-slide, .acard_img, .aslider{
        max-height: 500px;
    }
}