*{

    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) * 16s);

    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;

    }

}