@import url('https://fonts.googleapis.com/css2?family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
:root{
    --gray:#7F7F7F;
    --blue:#0D53CC;
    --sky-blue:#66A4E7;
    --pink:#F06292;
    --orange:#FF7042;
    --light-blue:#26C6DB;
    --purple:#BA68C8;
    --yellow:#FFCA28;  

    --playmore:#F06292;
    --enjoymore:#BA68C8;
    --knowmore:#63B5F7;
    --domore:#26C6DB;
    --learnmore:#4DB6AC;
    --sharemore:#D4E257;
    --showcase:#FFCA28;
    --contribute:#FF7042;
}
*{
    box-sizing: border-box;
}
html, body{
    font-family: 'Livvic', sans-serif;
    font-size: 15px;
    color: #7F7F7F;
    font-weight: normal;
    background-color: #FBFBFB;
}
h1, h2, h3, h4, h5, h6{
    font-weight: normal;
}
img{
    max-width: 100%;
}
a{
    color: var(--blue);
    text-decoration: none;
}
a:hover{
    text-decoration: none;
    color: var(--blue);
}
.sec_padd{
    padding-top: 50px;
    padding-bottom: 50px;
}
.sec_padd_t{
    padding-top: 50px;
}
.sec_padd_b{
    padding-bottom: 50px;
}
.heading h1{
    color: var(--blue);
    font-size: 28px;
    font-weight: 600;
}
.heading h2{
    color: var(--gray);
}
.text-orange{
    color:var(--orange)
}
.text-blue{
    color:var(--blue)
}
@media only screen and (max-width:767px){
    .heading h1{font-size: 28px;}
}
.radius6{
    border-radius: 6px;
}
.round{
    border-radius: 50px;
}
.btn{
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 25px;
    padding-right: 25px;
}
.btn-sky-blue{
    background-color: var(--sky-blue);
    color: #fff;
}
.btn-sky-blue:hover{
    background-color: var(--gray);
    color: #fff;
}
.btn-blue{
    background-color: var(--blue);
    border-radius: 50px;
    color: #fff;
    border:#fff solid 1px
}
.btn-blue:hover{
    background-color:var(--orange) ;
    color: #fff;
}
.btn-orange{
    background-color: var(--orange);
    color: #fff;
}
.btn-orange:hover{
    background-color: #b6411a;
    color: #fff;
}
.btn-pink{
    background-color: var(--pink);
    color: #fff;
}
.btn-pink:hover{
    background-color: #d64072;
    color: #fff;
}
input:focus{
    box-shadow: inherit;
    border-color: var(--blue);
}
select:focus{
    box-shadow: inherit;
    border-color: var(--blue);
}
.form-control:focus, .form-select:focus{
    color: #212529;
    background-color: #fff;
    border-color:var(--blue);
    outline: 0;
    box-shadow: inherit;
}


/* Slik Slider */
.slick-slide {
    margin: 0px 20px;
  }

  .slick-slide img {
    width: 100%;
  }

  .slick-prev:before,
  .slick-next:before {
    color: black;
  }


  .slick-slide {
    transition: all ease-in-out .3s;
    opacity: .2;
  }
  
  .slick-active {
    opacity: .5;
  }

  .slick-current {
    opacity: 1;
  }
/* Silk Slider End */

/* Site Header */
.site_header{
    padding-top: 40px;
    background:url(../images/header-cir.png) -162px -243px no-repeat;
    /* position: sticky; */
    top: 0px;
    width: 100%;
    z-index: 11;
    background-color: #FBFBFB;
    padding-bottom: 5px;
}
.site_header .search{
    margin: 0 auto;
}
.site_header .main{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search{
    margin-left: auto;
    max-width: 200px;
}
.search .form-control{
    border-radius: 0px;
    border:0px;
    border-bottom: var(--gray) solid 1px;
    padding-left: 0px;
    background-color: inherit;
}
.search .input-group-text{
    border-radius: 0px;
    background-color: inherit;
    border: 0px;
    border-bottom: 1px solid var(--gray);
}
.site_header .main .login a{
    font-weight: 600;
}

.site_header .search{
    margin: 0 auto;
}
.menu-header{
    padding-top: 40px;
    background:url(../images/header-cir.png) -162px -243px no-repeat;
    /* position: sticky; */
    top: 0px;
    width: 100%;
    z-index: 11;
    /* background-color: #FBFBFB; */
    padding-bottom: 5px;
}
.menu-header .navbar-light .navbar-nav .nav-link{
    color: var(--blue);
    border-bottom:transparent solid 2px;
    font-weight: 500;
}
.menu-header .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
    color: var(--pink);
    border-bottom:var(--pink) solid 2px;
}
.menu-header .navbar-light .navbar-nav .nav-link.active{
    color: var(--pink);
    border-bottom:var(--pink) solid 2px;
}
/* Site header End */

/* Banner section Start */
.banner-pattern-image{
    background: url(../images/banner-pt.png) -315px -124px no-repeat;   
}
.banner{
    padding: 100px 0;
}
.banner .swiper-slide{
    padding: 30px;
}
.banner img{
    box-shadow:#0000001f -7px 7px 13px 0px;
    border-radius: 10px;
    height: 370px;
    object-fit: cover;
    object-position: center center;
}
.banner h1{
    font-weight: 600;
}
.banner .learn-more{
    display: inline-block;
    margin-top: 20px;
}
/* Banner Section End */

/* Activities Section */
.activities{
    padding-top: 80px;
}
.activities .acti{
    border-radius: 10px;
    color: #fff;
    padding: 12px;
    box-shadow: #0000002e 0px 7px 7px;
    position: relative;
    transition: all 1s ease;
    overflow: hidden;
}
.activities .acti .cover-para{
    height: 180px;
    margin-bottom: 0px;
    overflow: hidden;
    background: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.activities .acti .cover-para p{
    color: #000;
    margin-bottom: 0px;
    text-align: center;
    padding: 10px;
}
.activities .acti .cover img{
    height: 180px;
    object-fit: cover;
    border-radius: 6px;
}
.activities .acti .cover p{
    margin-bottom: 0px;
}
.activities .acti .c-img{
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center center;
    border-radius: 10px;
}
.activities .acti a{
    color: #fff;
}
.activities .acti .cir{
    box-shadow: #0000001f 0px 0px 6px 0px;
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    text-align: center;
    padding-top: 8px;
}
.activities .acti .on-hover{
    display: none;
    transition: all 1s ease;
}
.activities .acti:hover .non-hover{
    display: none;
    transition: all 1s ease;
}
.activities .acti:hover .on-hover{
    display: block;
    transition: all 1s ease;
}




.color1{
    background-color: #F06292;
}
.color2{
    background-color: #BA68C8;
}
.color3{
    background-color: #63B5F7;
}
.color4{
    background-color: #26C6DB;
}
.color5{
    background-color: #4DB6AC;
}
.color6{
    background-color: #D4E257;
}
.color7{
    background-color: #FFCA28;
}
.color8{
    background-color: #FF7042;
}

.accordion-button:not(.collapsed)::after{
    color: #fff;
}
.activitiesdrop .accordion-item{
    border-radius: 10px;
    overflow: hidden;
}
.activitiesdrop .accordion-item button{
    font-size: 18px;
}
.activitiesdrop .accordion-button:not(.collapsed){
    box-shadow: inherit;
}
.activitiesdrop .accordion-item{
    margin-bottom: 7px;
}
.activitiesdrop p{
    color: #fff;
    padding-top: 10px;
}
.activitiesdrop .cir{
    box-shadow: #0000001f 0px 0px 6px 0px;
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    text-align: center;
    padding-top: 8px;
}
#PlayMore button{
    background-color: #f06291d5;
    color: #fff;
    box-shadow: inherit;
}
#playmore{
    background-color: #F06292;
}
#FeelMore button{
    background-color: #ba68c8d2;
    color: #fff;
    box-shadow: inherit;
}
#feel-more{
    background-color: #BA68C8;
}
#EnjoyMore button{
    background-color: #63b4f7da;
    color: #fff;
    box-shadow: inherit;
}
#enjoy-more{
    background-color: #63B5F7;
}
#DoMore button{
    background-color: #26c6dbd5;
    color: #fff;
    box-shadow: inherit;
}
#do-more{
    background-color: #26C6DB;
}
#LearnMore button{
    background-color: #4db6acd8;
    color: #fff;
    box-shadow: inherit;
}
#learn-more{
    background-color: #4DB6AC;
}
#Share button{
    background-color: #d4e257d3;
    color: #fff;
    box-shadow: inherit;
}
#share-more{
    background-color: #D4E257;
}
#Showcase button{
    background-color: #ffc928d7;
    color: #fff;
    box-shadow: inherit;
}
#showcase-more{
    background-color: #FFCA28;
}
#Contribute button{
    background-color: #ff7142dc;
    color: #fff;
    box-shadow: inherit;
}
#contribute-more{
    background-color: #FF7042;
}
.accordion-button.collapsed::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Activities section end */


/* Upcoming Events */
.event {
    background: url(../images/upcoming-pt.png) -415px -250px no-repeat;
}
.event .swiper-container{
    padding-bottom: 60px;
}
.event-card{
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    align-items: center;
    box-shadow: #ccc -1px 5px 8px 0px;
    background-color: #fff;
}
.event-card .date{
    flex-basis: 10%;
}
.event-card .name{
    flex-basis: 75%;
    padding-right: 5px;
}
.event-card .linkbutton{
    flex-basis: 10%;
    text-align: center;
}
.event-card .linkbutton a{
    display: block;
    width: 89px;
    padding: 6px 8px;
}
.event-card .linkbutton .time{
    margin-bottom: 3px;
    background: #fbc714;
    border-radius: 4px;
    color: #ffffff;
    font-size: 14px;
    display: inline-block;
    padding: 1px 7px 0px;
}
.event-card .name .whats, .event-card .name .whats p, .event-card .name .where, .event-card .name .where p{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.event .swiper-slide{
    padding: 5px;
}
.event-card .date span{
    display: block;
}
.event-card .date .dd{
    font-weight: 700;
    font-size: 18px;
}
.event-card .date .mm, .event-card .date .yy{
    font-size: 13px;
    text-transform: uppercase;
}
.event-card .name{
    text-align: left;
}
.event-card .name h4{
    font-size: 18px;
    margin-bottom: 0px;
    font-weight: 600;
}
.event-card .name p{
    margin-bottom: 0px;
}
/* .event-card .time{
    position: absolute;
    top: 0px;
    left: 0px;
} */

.event .swiper-button-next, .event .swiper-button-prev{
    top:inherit;
    bottom: 0px;
}
.event .swiper-button-next:after, .event .swiper-button-prev:after{
    font-size: 17px;
    color: #fff;
}
.event .swiper-button-next, .event .swiper-button-prev{
    background-color: var(--sky-blue);
    height: 40px;
    width: 40px;
    border-radius: 50px;
}
.event .swiper-button-next, .event .swiper-container-rtl .event .swiper-button-prev{
    right: 40%;
}
.event .swiper-button-prev, .event .swiper-container-rtl .event .swiper-button-next{
    left: 40%;
}

.for-mobile .event-card{
    background-color: var(--sky-blue);
    margin: 0px;
}
.for-mobile .event-card h4, .for-mobile .event-card p{
    color: #fff;
}
.for-mobile .event-card .cir {
    box-shadow: #0000001f 0px 0px 6px 0px;
    display: inline-block;
    height: 40px;
    width: 40px;
    border-radius: 50px;
    text-align: center;
    padding-top: 8px;
    background-color: #eab51b;
}
.for-mobile .event-card .date{
    background-color: #fff;
    width: 45px;
    text-align: center;
    border-radius: 10px;
}
.for-mobile .event-card .date span{
    text-align: center;
    color: #000;
    font-weight: 600;
}
.for-mobile .event-card .date span.mm{
    color: rgb(134, 133, 133);
    font-size: 12px;
    font-weight: 400;
}
/* Upcoming event ends */

.geo-achiver-left-pt{
    background:url(../images/geo-lates-pt.png) -50px 370px no-repeat;
}
/* Geo Stats */
.geo{
    background: url(../images/geo-pt.png) 1220px bottom no-repeat;
}
.geo .left-image{
    background-color: #fff;
    padding: 10px;
    box-shadow: rgba(0, 0, 0, 0.151) 0 0 10px 0;
}
.geo .counterdiv .col-12{
    position: relative;
    font-size: 17px;
}
.geo .counterdiv .col-12::after{
    position: absolute;
    right: 0px;
    content: '';
    height: 6px;
    width: 6px;
    border-radius: 50px;
    background-color: var(--sky-blue);
    top: 50%;
}
.geo .counterdiv .col-12:last-child:after{
    position: inherit;
}
.geo .counterdiv div{
    text-align: center;
}
.geo .counterdiv div strong{
    display: block;
    color: #EAB51B;
    font-size: 23px;
    position: relative;
}
.geo .counterdiv div strong::after {
    position: absolute;
    top: 0px;
    content: '+';
    padding-left: 2px;
}
@media only screen and (max-width:767px){
    .geo .counterdiv span{
        padding-left: 25px;
    }
}
/* Geo Stats End*/

/* Achivers */
.achive-slider{
    padding: 0 70px 40px;
}
.achive-slider .swiper-slide{
    height:auto;
}
.achivers .achi_card{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: #ccc 1px 1px 7px 0px;
    text-align: center;
    padding: 10px 5px;
    height: 100%;
}
.achivers .achi_card .user{
    padding:10px 0;
}
.achivers .achi_card h6{
    font-weight: 600;
}
.achivers .achi_card p{
    margin-bottom: 0px;
    font-size: 12px;
}

.achivers .swiper-button-next:after, .achivers .swiper-button-prev:after{
    font-size: 17px;
    color: #fff;
}
.achivers .swiper-button-next, .achivers .swiper-button-prev{
    background-color: var(--sky-blue);
    height: 40px;
    width: 40px;
    border-radius: 50px;
}
/* Achiver End */

/* Blog Css */
.blog_card{
    border: var(--sky-blue) solid 1px;
    padding: 10px;
    background-color: #fff;
}
.blog_card .content p{
    margin-bottom: 0px;
    font-size: 14px;
}
.blog_card .content{
    padding-top: 10px;
}
.blog_card .content h4 a{
    color: var(--sky-blue);
    font-size: 20px;
}
.blog_card .content .read-more{
    margin: 10px 0;
    display: block;
    color: var(--sky-blue);
}
/* Blog Css end */

/* Testimonial css */
.testimonial{
    background: url(../images/blog-patner.png) -130px -19px no-repeat;
    background-size:cover;
}
.testimonial .testi{
    background-color: #fff;
    border-radius: 10px;
    box-shadow: #00000038 0px 0px 4px;
    overflow: hidden;
}

.testimonial .testi .pic img{
    height: 200px;
    width: 100%;
    object-fit: cover;
    object-position: center center;
}
.testimonial .testi .content{
    padding:15px 30px;
}
.testimonial .testi .content .des p{
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
   -webkit-box-orient: vertical;
}
.testimonial .testi .content .by{
    margin: 0px;
    margin-bottom: 5px;
    text-transform: uppercase;
    font-size: 12px;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
.testimonial .testi.two{
    margin-top: 70px;
}
.testimonial .testi.three{
    margin-top: 140px;
}
.testimonial .testi.four{
    margin-top: 230px;
}
.testimonial-mobile  .swiper-slide .box{
    background-color: #fff;
    padding: 10px;
    box-shadow:#ccc 1px 1px 7px 0px;
    border-radius: 10px;
    margin: 10px;
}
.testimonial-mobile  .swiper-slide .box img{
    height: 68px;
    width: 68px;
    border-radius: 50px;
    object-fit: cover;
    object-position: center center;
}
.testimonial-mobile  .swiper-slide .box p{
    font-size: 14px;
}
.testimonial-mobile  .swiper-slide .box .des p{
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
   -webkit-box-orient: vertical;
}
.testimonial-mobile  .swiper-slide .box p.name{
    color:#000;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
}
/* Testimonial End */

/* partners css */
.partner-logo{
    background-color: #fff;
}
.partner-logo img{
    width: 100%;
    height: 90px;
    object-fit: contain;
}
/* Partner Css End */

/* Footer css */
.footer{
    background-color: var(--blue);
    color: #E9F2FB;
    padding: 50px 0 50px;
}
.footer h4{
    font-size: 20px;
    color: #E9F2FB;
    position: relative;
}
.footer h4::before{
    content: '';
    position: absolute;
    left: 0px;
    bottom: -10px;
    height: 1px;
    width: 80px;
    background-color: #E9F2FB;
}
.footer .f-ul{
    list-style: none;
    margin:0px;
    padding: 0px;
    margin-top: 20px;
}
.footer .f-ul li a{
    color: #E9F2FB;
    display: inline-block;
    padding-bottom: 6px;
}
.footer .social{
    list-style: none;
    margin:0px;
    padding: 0px;
    display: flex;
    margin-top: 20px;
}
.footer .social li a{
    color:var(--blue);
    display: flex;
    align-items: center;
    justify-content: center;
    height:35px;
    width: 35px;
    border-radius: 50px;
    margin-right: 5px;
    background-color: #fff;
}
.footer .foo-right p{
    font-size: 14px;
}
/* Footer end */
.whatsnew .swiper-container{
    padding-bottom: 40px;
}
.whats_card{
    background-color: #fff;
    border-radius: 10px;
    position: relative;
    box-shadow: #00000038 0 0 11px 0;
    margin: 10px;
    overflow: hidden;
}
.whats_card .card-img img{
    height: 300px;
    object-fit: cover;
    object-position: center center;
}
.whats_card .content{
    position: relative;
    padding: 10px;
    padding-right: 50px;
}
.whats_card .content p{
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 4; /* number of lines to show */
   -webkit-box-orient: vertical;
   margin-bottom: 0px;
}
.whats_card .arrow{
    position: absolute;
    bottom: -3px;
    right: -3px;
}
.sharebox{
    background-color: #D4E257;
    padding: 20px;
    border-radius: 35px;
    box-shadow: #ccc 2px 4px 3px 0px;
}
.sharebox .cover-img {
    height: 210px;
    object-fit: contain;
}
.sharebox .title h4{
    color: #000;
    font-weight: 600;
}
.sharebox h5{
    font-weight: 600;
}
.sharebox p{
    color: #000;
}
@media only screen and (max-width:1024px){
    .activities{
        padding-top: 0px;
    }
    .event .swiper-container{
        padding-bottom: 35px;
    }
    .geo .counterdiv{
        margin-top: 20px;
    }
}

@media only screen and (max-width:1023px){
    .whatsnew .swiper-slide{
        margin-right: 0px;
    }
    .whatsnew .swiper-container{
        padding-bottom: 0px;
    }
    .whats_card .content h5{
        color: var(--blue);
    }
    .whats_card .content{
        padding: 10px;
        padding-bottom:0px;
    }
    .whats_card .content p{
        margin-bottom: 0px;
        color: #ccc;
    }
    .whats_card{
        margin: 10px;
        padding: 10px;
    }
    .whats_card .card-img img{
        height: 195px;
        border-radius: 10px;
        object-fit: cover;
        object-position:center center;
    }
    .whats_card .content p{
        height: 116px;
        overflow: hidden;
    }
    .whats_card .arrow{
        display: none;
    }
}

@media only screen and (max-width:767px){
    .mobile-bg-wave-top{
        /* background: url(../images/mobile-header-top.png) 22px -69px no-repeat; */
    }
    .site_header{
        background: url(../images/header-cir.png) -225px -243px no-repeat;
        background-color: #FBFBFB;
    }
    .site_header .main .logo{
        flex-basis: 20%;
    }
    .site_header .main .search{
        flex-basis: 50%;
    }
    .site_header .main .login{
        flex-basis: 15%;
        text-align: right;
    }
    .site_header .main .login a{
        color: var(--gray);
        font-weight: 500;
    }
    .banner-pattern-image{
        background-image: inherit;
    }
    .banner{
        position: relative;
        overflow: hidden;
        padding:70px 0 15px 0;
        background: url(../images/mobile-banner-right.png) right top no-repeat;
    }
    .banner h1{
        padding:0 30px;
    }
    .banner img{
        margin-top: 70px;
    }
    .banner .learn-more{
        margin-top: 7px;
    }
    .activities{
        padding-top: 0px;
    }
    .activitiesdrop{
        padding-top: 70px;
        background: url(../images/mobile-activity.png) right -89px no-repeat;
    }
    
    .whatsnew .swiper-slide{
        margin-right: 0px;
    }
    .whatsnew .swiper-container{
        padding-bottom: 0px;
    }
    .whats_card .content h5{
        display: none;
    }
    .whats_card .content{
        padding: 10px;
        padding-bottom:0px;
    }
    .whats_card .content p{
        margin-bottom: 0px;
        color: var(--sky-blue);
    }
    .whats_card{
        margin: 10px;
        padding: 10px;
    }
    .whats_card .card-img img{
        height: 195px;
        border-radius: 10px;
        object-fit: cover;
        object-position:center center;
    }
    .whats_card .content p{
        height: 48px;
        overflow: hidden;
    }
    .whats_card .arrow{
        display: none;
    }
    .event{
        background: url(../images/mobile-event-top.png) -114px top no-repeat;
    }
    .event-card{
        position: relative;
    }
    .event-card .date .mm, .event-card .date .yy{
        font-size: 12px;
    }
    .event-card .name{
        padding:0 5px 0 10px;
    }
    .event-card .name p{
        font-size: 13px;
    }
    
    .event .swiper-button-next, .event .swiper-container-rtl .event .swiper-button-prev{
        right: 36%;
    }
    .event .swiper-button-prev, .event .swiper-container-rtl .event .swiper-button-next{
        left: 36%;
    }
    .geo-achiver-left-pt{
        background: url(../images/mobile-event-bottom.png) -114px -214px no-repeat;
    }
    .geo{
        background: inherit;
    }
    .geo .left-image{
        padding-bottom: 20px;
    }
    .geo .counterdiv div strong {
        display: inline-block;
        vertical-align: middle;
        font-weight: 600;
    }
    .geo .counterdiv .col-12::after{
        position: inherit;
    }
    .achive-slider {
        padding: 0 3px 15px;
    }
    .blog{
        position: relative;
        overflow-y: hidden;
    }
    .blog_card{
        background-color: var(--sky-blue);
    }
    .blog_card p{
        height: 67px;
        overflow: hidden;
        position: relative;
        color: #fff;
        font-weight: 600;
    }
    .blog_card h4, .blog_card .read-more, .blog_card .date{
        display: none!important;
    }
    .blog-testi-bg{
        background: url(../images/mobile-teati.png) center bottom no-repeat;
    }
    .testimonial{
        position: relative;
        overflow: hidden;
        background: inherit;
    }
    .testimonial .testi.two, .testimonial .testi.three, .testimonial .testi.four{
        margin-top: 20px;
    }
    .footer h4{
        margin-top: 15px;
    }
    .footer .social{
        margin-bottom: 15px;
    }
    .footer p, .footer ul li, .footer ul li a{
        font-size: 13px;
    }
  
}
.form-control{
    -webkit-appearance: auto;
    -moz-appearance: auto;
    appearance: auto;
}
.lgoin-main{
    background: url(../images/river-wave1.png) -50px bottom / cover no-repeat;
    position: relative;
}
.lgoin-main .icon-right{
    position: absolute;
    right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
}
.lgoin-main .icon-left{
    position: absolute;
    left: 0px;
    height: 100%;
    display: flex;
    align-items: center;
}
.lgoin-main .page-icon{
    position: absolute;
    right: 0px;
    height: 100%;
    display: flex;
    align-items: center;
}

.login-form{
    border:#ccc dashed 1px;
    background-color: #fff;
    font-size: 14px;
}
.login-form .nav li{
    width:50%;
}
.login-form .nav li button{
    width:100%;
    color: var(--gray);
    border-radius: 0px;
}
.login-form .nav li{
    border-bottom: #ccc solid 1px;
}
.login-form .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    border-bottom: var(--sky-blue) solid 4px;
    background-color: #fff;
    color: var(--gray);
}
.login-form .form-group{
    position: relative;
}
.login-form .form-group .form-control{
    border:0px;
    border-radius: 0px;
    border-bottom: #D1D1D6 solid 1px;
    padding-left: 45px;
    color: var(--gray);
}
.login-form .form-group .icon{
    position: absolute;
    left: 0px;
    top: 0px;
    background-color:#EAEAEA;
    height: 30px;
    width: 30px;
    display: flex;
    border-radius: 50px;
    align-items: center;
    justify-content: center;
    color: var(--sky-blue);
}
.login-form .form-group label{
    font-size: 14px;
    color: #1C1C1E;
}
.login-form .form-group .selectf{
    position: inherit;
    padding-left: 0px;
}
.btn{
    padding-top: 5px;
    padding-bottom: 5px;
}
.submit-btn{
    display: block;
    width: 100%;
}
.newforgot a{
    color: var(--gray);
    font-size: 14px;
}
.newforgot a:hover{
    color: var(--sky-blue);
}
.social-icon{
    list-style: none;
    padding:0px;
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.social-icon li{
    margin-right: 7px;
}
.social-icon li:last-child{
    margin-right: 0px;
}
.social-icon a{
    border:rgba(204, 204, 204, 0.288) solid 1px;
    border-radius: 4px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.register-type strong{
    font-weight: 600;
    color: #1C1C1E;
}
/* .email-login, .phone-login{
    display: none;
} */

.mobile-verification{
    height: 100vh;
    display: flex;
    align-items: center;
}
.login-form .weare{
    font-size: 20px;
    margin-bottom: 20px;
}
.login-form .loginemai, .login-form .loginmobile{
    font-size: 20px;
    color: var(--sky-blue);
}
.email-verify{
    font-size: 25px;
}
.email-verify .fa{
    color: var(--sky-blue);
    font-size: 80px;
    display: block;
}
@media only screen and (max-width:912px){
    .lgoin-main .icon-right, .lgoin-main .icon-left{
        display: none;
    }
    .mobile-verification{
        height: 70vh;
    }  
}

.user-main{
    position: relative;
}
.user-main .nav-pills button{
    text-align: left;
    background-color: var(--sky-blue);
    margin-bottom: 15px;
    color: #fff;
    border: transparent solid 4px;
}
.user-main .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: var(--sky-blue);
    border: #000 solid 4px;
}
.user-main .nav-pills button small{
    display: block;
}
.user-main .nav-pills button span{
    font-size: 18px;
    font-weight: 600;
}

.select-avatar h2{
    font-size: 20px;
    font-weight: 700;
}
.select-avatar .ab span{
    position: relative;
    height: 100%;
    display: inline-block;
}
.select-avatar .ab span .abedit{
    position: absolute;
    bottom: 6px;
    right: 0px;
    height: 20px;
    width: 20px;
    border-radius: 50px;
    background-color: var(--blue);
    color: #fff;
    text-align: center;
}
.earn-badges{
    font-size: 20px;
    font-weight: 700;
}

.achivesetting .cir{
    height: inherit;
}

.icon-left {
    position: absolute;
    left: 0px;
    bottom:100px
}
.tab3 .icon-left{
    position: inherit;
}
@media only screen and (max-width:767px){
    .icon-left{
        display: none;
    }
}

.playmorev1 h4{
    color: var(--blue);
    font-weight: 500;
}
.playmorev1 .activities .acti .cir{
    background-color: #FF0000;
    padding-top: 10px;
}
.playmorev1 .activities .acti{
    position: relative;
}
.playmorev1 .activities .acti .star1{
    background: url(../images/star1.png) left top / contain no-repeat;
    height:75px;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 500;
    position: absolute;
    top: -20px;
    right: -30px;
}

.game-des .content .tab-content{
    background: url(../images/g-text-beside.png) left top / cover no-repeat;
    width: 100%;
    background-color: #19002d;
    color: #fff;
    height: 600px;
    border-radius: 10px;
    border: #07274d solid 4px;
    /* display: flex;
    flex-direction: column;
    justify-content: center; */
    overflow-y:scroll;
}
.game-des .content .tab-content .tab-pane{
    height: 100%;
}
.jumb-main{
    padding:40px 55px;
    height: 100%;
    /*display: flex;*/
    align-items: center;
}
.jumb-main .jumb{
    background: rgba(255, 255, 255, .5);
    padding: 40px;
    border-radius: 10px;
}
.jumb-main .title{
    position: relative;
    text-align: center;
    margin-top: -57px;
    margin-bottom: 25px;
}
.jumb-main .title h4{
    text-align: center;
    background-color: #000;
    display: inline-block;
    padding: 8px 25px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.jumb-main .jumb p, .jumb-main .jumb ul, .jumb-main .jumb ol{
    color: #000;
    font-weight: 500;
}
.jumb-main .jumb .link-btn{
    text-align: center;
}
.jumb-main .jumb .link-btn .btn{
    font-weight: 600;
    padding: 5px 50px;
}
.game-des .nav-link img{
    width: 45px;
    display: block;
    margin: 0 auto;
    text-align: center;
}
.game-des .nav-link{
    color: #fff;
}
.game-des .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color:#07274D;
}
.game-des .flex-column{
    min-height: 325px;
    background-color: #19002D;
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
.game-data-table{
    background: #fff;
}
.game-data-table td{
    font-weight: 600;
    vertical-align: middle;
}
.game-data-table .text-blue{
    color: var(--sky-blue);
}
.game-data-table .fa-trophy{
    color: yellow;
    color: #de4b05;
    font-size: 22px;
    margin-right: 5px;
}
.game-data-table .trophy{
    display: flex;
    align-items: center;
}
.game-data-table .trophy img{
    margin-right: 5px;
}
.game-data-table .price{
    color: var(--sky-blue);
    font-size: 20px;
    padding-right: 10px;
}
.game-data-table{
    border: #6404af solid 4px;
}
.achivesetting  .badge-p{
    font-size: 20px;
}
@media only screen and (max-width:767px){
    .game-des .d-flex{
        flex-direction: column;
    }
    .game-des .align-items-center{
        align-items: inherit;
    }
    .game-des .flex-column{
        min-height: inherit;
        flex-direction: row!important;
        border-radius: 6px;
    }
    .game-des .nav-pills .nav-link{
        width: 120px;
    }
    .jumb-main{
        padding-right: 12px;
        padding-left: 12px;
    }
}
@media only screen and (max-width:1024px){
    .icon-left{left: -40px;}
    .achivesetting .badge-p{
        font-size: 18px;
    }
}


.know-more .maintb{
    border-radius: 20px;
    overflow: hidden;
}
.know-more .nav-fill .nav-item, .nav-fill>.nav-link{
    background-color: #f7b9cd;
    color: #fff;
    border-radius: 0px;
    font-size: 17px;
}
.know-more .nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: #F06292;
}
.pdf-link-card{
    border-radius: 6px;
    margin-bottom: 25px;
    /* border: var(--pink) solid 2px; */
}
.pdf-link-card .img{
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}
.pdf-link-card .name{
    background-color: var(--pink);
    height: 45px;
    overflow: hidden;
    display: flex;
    align-items: center;
    color: #fff;
    justify-content: center;
    padding: 0 5px;
    border-radius: 0 0 6px 6px;
    overflow: hidden;
}
.pdf-link-card .name span{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
}
.pdf-link-card .name img{
    padding-right: 5px;
}
.sub-tab-button .nav-link{
    margin-right: 10px;
    color: #000;
    background-color: #EEEEEE;
    font-weight: 500;
}
.sub-tab-button .nav-link:last-child{
    margin-right: 0px;
}
.sub-tab-button .nav-link.active{
    background-color: var(--sky-blue)!important;
    color: #fff;
    border-color: var(--sky-blue);
}
.purple-button .nav-link.active{
    background-color: var(--purple)!important;
    color: #fff;
    border-color: var(--purple);
}
.search-box{
    margin: 20px 0;
    text-align: right;
}
.search-box input{
    background-color: #EEEEEE;
    border: 0px;
    border-radius: 4px;
    padding:8px 8px;
    color: #000;
    width: 200px;
}
.search-box input:focus, .search-box input.active {
    /* border: #EEEEEE solid 1px; */
    box-shadow:inherit;
    outline: 0px;
}

@media only screen and (max-width:767px){
    .sub-tab-button .nav-link:last-child{
        margin-right: 10px;
    }
    .sub-tab-button .nav-link{
        margin-bottom: 5px;
    }
}

.blue-title h4, .blue-title h3{
    color: var(--blue);
    font-weight: 600;
}
.pdf-slider{
    padding-bottom: 15px;
}
.pdf-slider .swiper-button-next, .pdf-slider .swiper-button-prev{
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background-color: var(--blue);
}
.pdf-slider .swiper-button-next:after, .pdf-slider .swiper-button-prev:after{
    font-size: 18px;
    color: #fff;
}

.pdf-view{
    height: 440px;
    overflow: hidden;
    position: relative;
}
.pdf-view iframe{
    margin-right: 10px;
}
.pdf-action{
    list-style: none;
    margin: 0px;
    padding: 0px;
    color: #fff;
    border-radius: 0 0 15px 15px;
    overflow: hidden;
    display: flex;
    background-color: var(--pink);
    align-items: center;
    justify-content: center;
}
.pdf-action li a{
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-color: var(--pink);
    width: 70px;
    height: 58px;
}
.do-more-pdf-icon li a{
    background-color: var(--blue);
}
.pdf-action li a:hover{
    background-color: var(--gray);
}
.pdf-action li a i{
    font-size: 20px;
}
.pdf-action li a span{
    display: block;
    font-size: 11px;
}
.contribute-main{
    background: url(../images/make-diff-bg.png) left 300px  no-repeat;
}
.contribute-main .box{
    position: relative;
    transition: all 0.5 ease;
}
.contribute-main .box .circle-image{
    position: absolute;
    width: 100%;
    text-align: center;
}
.contribute-main .box .button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}
.contribute-main .box .button a{
    width: 250px;
    font-size: 17px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.contribute-main .box:hover .circle-image img{
    transform: rotate(360deg);
    transition: all 3s ease;
}
.object {
    animation: MoveUpDown 5s linear infinite;
    position: relative;
    transition: all 1s ease;
  }
  
  @keyframes MoveUpDown {
    0%, 100% {
      bottom: 0;
      transition: all 1s ease;
    }
    50% {
      bottom: 50px;
      transition: all 1s ease;
    }
  }
.choose-v .modal-content{
    border: 0px;
    background-color: inherit;
}
.choose-v .btn-close{
    color: #fff;
}
.choose-volunteer .box{
    background-color: #fff;
    min-height: 110px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: #fd7e14 -10px -9px 0px 0px;
    font-size: 20px;
}
.choose-volunteer .box.box2{
    box-shadow: #fd7e14 10px -9px 0px 0px;
}
.choose-volunteer .box.box3{
    box-shadow: #fd7e14 -10px 9px 0px 0px;
}
.choose-volunteer .box.box4{
    box-shadow: #fd7e14 10px 9px 0px 0px;
}
.choose-volunteer .box.box-cir{
    box-shadow: inherit;
    height: 177px;
    border-radius: 50%;
    border: var(--orange) solid 10px;
}
.choose-volunteer .box:hover{
    background-color: var(--orange);
    color: #fff;
    transition: all 0.5s ease;
}
@media only screen and (max-width:812px){
    .contribute-main{
        background-size: cover;
    }
    .choose-volunteer .box.box-cir{
        height: 170px;
        width: 170px;
        margin: 0 auto;
    }
}
@media only screen and (max-width:1024px){
    .choose-volunteer .box.box-cir{
        height: 170px;
        width: 170px;
        margin: 0 auto;
    }
}
@media (min-width: 576px){
    .choose-v .modal-dialog {
        max-width: 650px;
        margin: 1.75rem auto;
    }
}
@media (min-width: 1200px){
    .choose-v .modal-dialog {
        max-width: 810px;
        margin: 1.75rem auto;
    }
}
.enroll-content .g-map-locate{
    color: var(--blue);
    text-align: center;
}
.enroll-content .g-map-locate i{
    display: block;
    font-size: 35px;
}
.termscondi{
    display: flex;
    align-items: center;
    cursor: pointer;
}
.termscondi label{
    cursor: pointer;
    font-size: 20px;
}
.termscondi input{
    margin-right: 10px;
}
.enroll-main{
    background: url(../images/river-wave1.png) -50px bottom / cover no-repeat;
    position: relative;
}
.form-group label{
    color: #000;
    margin-bottom: 5px;
}
@media only screen and (max-width:992px){
    .termscondi label{
        font-size: 15px;
    }
}
.light-blue .nav-link.active{
    background-color: var(--light-blue)!important;
    border-color: var(--light-blue);
}
.do-more-card{
    background-color: var(--light-blue);
    padding:5px;
    border-radius: 4px;
    position: relative;
}
.feel-more-card{
    background-color: var(--purple);
    border-radius: 15px;
}
.do-more-card .icon{
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.473);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.do-more-card .badge-icon{
    background: url(../images/start-icon.png) left top / contain no-repeat;
    height: 75px;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 600;
    position: absolute;
    top: -30px;
    right: -20px;
}
.do-more-card .tag-plate{
    background: url(../images/tag-plate.png) center center / contain no-repeat;
    width: 220px;
    height:50px;
    display: flex;
    justify-content: center;
    color: #000;
    font-weight: 600;
    position: absolute;
    top:-35px;
    left: 50%;
    transform: translateX(-50%);
    padding-top: 8px;
}
.do-more-card .title{
    position: absolute;
    top: 0px;
    color: #fff;
    padding: 10px;
}
.do-more-card .title h6{
    font-weight: 600;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
   -webkit-box-orient: vertical;
}
.do-more-c .social{
    margin:0 20px;
    background-color: var(--light-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    border-radius: 0 0 8px 8px;
}
.feel-more-c .social{
    background-color: var(--purple);
    border-radius: 0 0 15px 15px;
}
.do-more-c .social a{
    width: 50px;
    display: inline-block;
}
.do-more-c .social i{
    color: #fff;
}
.do-more-c .social span{
    color: #fff;
    font-size: 14px;
}
.feel-more-bg{
    background: url(../images/make-diff-bg.png) left bottom / contain no-repeat;
}
.share-me{
    /* background: url(../images/share-me-bg.png) center bottom  no-repeat; */
    /* background-size: 100%; */
}
.share-me-card{
    background-color: #fff;
    border-radius: 20px;
    border:var(--blue) solid 8px;
    padding:10px;
    box-shadow: rgb(78 123 247) 1px 1px 0px 4px inset;
    position: relative;
    height: 100%;
}
.share-me-card h4{
    font-size: 17px;
    color: #000;
    font-weight: 600;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
   -webkit-box-orient: vertical;

}
.share-me-card p{
    margin-bottom: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show */
    -webkit-box-orient: vertical;

}
.share-me-card .tag-plate{
    background: url(../images/share-me-tag.png) center center / contain no-repeat;
    width: 250px;
    height: 60px;
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    padding-top: 10px;
}
.share-me-card .bottom-arrow{
    position: absolute;
    bottom:-20px;
    left: 50%;
    transform: translateX(-50%);
}
.share-me-card .cover-img{
    height:250px;
    width: 130px;
    object-fit: contain;
    margin: 0 auto;
}
.share-me .gy-7 {
    --bs-gutter-y: 6rem;
}
.search-blog{
    position: relative;
}
.search-blog .blog-search{
    border-radius: 50px;
    background-color: #EEEEEE;
    border: 0px;
    width: 100%;
    height: 55px;
    padding:14px 50px 14px 20px;
}
.search-blog button{
    border: 0px;
    background: inherit;
    position: absolute;
    right: 0px;
    /* top: 10px; */
    font-size: 20px;
    height: 55px;
    width: 55px;
}
.blog-post .top-bar h4{
    color: #000;
    font-weight: 600;
}
.blog-cards{
    border-radius: 20px;
    box-shadow: #8b8a8a30 1px 1px 5px 0px;
    overflow: hidden;
}
.blog-cards img{
    border-radius: 20px;
    overflow: hidden;
}
.blog-cards h4 a{
    font-weight: 600;
    color: #000;
}
.blog-cards p{
    color: #000;
}
.blog-post-detail .title h4{
    font-weight: 600;
    color: #000;
}
.blog-post-detail p{
    color: #000;
}
.other-blog .title h5{
    color: #000;
    font-weight: 600;
}
.other-blog .side-blog-card a h5{
    color: #000;
    font-weight: 600;
    margin-top: 8px;
    font-size: 16px;
}
.blog-share{
    display: flex;
    justify-content: space-between;
    background-color: #E3E3E3;
    padding: 10px 20px;
    border-radius:50px;
    max-width: 300px;
}
.blog-share a{
    color: #000;
    font-weight: 500;
}
.blog-share a:hover{
    color: var(--blue);
}
.blog-template-card{
    position: relative;
}
.blog-template-card .btn-black{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.712);
    color: #fff;
    font-weight: 600;
}
.blog-temp-nav .nav-link{
    border-radius: 50px;
}
.showcase-page .title h4{
    font-weight: 600;
    color: #000;
}
.showcase-card{
    background-color: var(--yellow);
    border-radius: 15px;
    overflow: hidden;
    transition: all .15s ease;
}
.showcase-card.color2{
    background-color: #FFCA28;
}
.showcase-card.color3{
    background-color: #63B5F7;
}
.showcase-card.color4{
    background-color: #BA68C8;
}
.showcase-card img{
    border-radius: 15px;
}
.showcase-card .content{
    color: #fff;
    padding: 15px 15px;
}
.showcase-card .content a h4{
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
   -webkit-box-orient: vertical;
}
.showcase-card .content .btn-outline{
    border:#fff solid 1px;
    color: #fff;
}
.showcase-card .content .btn-outline:hover{
    box-shadow:#0000005c 3px 2px 6px 0px;
}
.showcase-card:hover{
    box-shadow:#0000005c 3px 2px 6px 0px;
}
.showcase-slider{
    padding-bottom: 40px;
}
.showcase-page{
    background: url(../images/make-diff-bg.png) left bottom / contain no-repeat;
}
.showcase-page.detail{
    background: inherit;
}
.showcase-page .showcase-des{
    color: #000;
}
@media only screen and (min-width:992px){
    .showcase-page .showcase-des .cover-img{
        float: left;
        max-width: 600px;
        padding-right: 20px;
    }
}
.showcase-page .showcase-des h4{
    font-weight: 600;
}
.login svg{
    height: 25px;
    display: block;
    margin: auto;
}
.login svg path{
    fill:var(--blue);
}
.login .dropdown-menu li .dropdown-item{
    font-weight: 400;
}
.know-mc .img img{
    /* height: 200px; */
    width: 100%;
    /*object-fit: cover;*/
    object-position: center center;
}

.sub-tab-button{
  overflow: auto;
  white-space: nowrap;
}
.sub-tab-button .nav-link{
    border: 0px;
    border-radius: 4px;
    display: inline-block;
}
/* width */
.sub-tab-button::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    border-radius: 4px;
  }
  
  /* Track */
  .sub-tab-button::-webkit-scrollbar-track {
    background: #f7b9cd;
    border-radius: 4px;
  }
  
  /* Handle */
  .sub-tab-button::-webkit-scrollbar-thumb {
    background:#F06292;
    border-radius: 4px;
  }
  
  /* Handle on hover */
  .sub-tab-button::-webkit-scrollbar-thumb:hover {
    background:#F06292;
    border-radius: 4px;
  }
  .table-responsive .container-fluid{
      padding: 0px;
  }
  .comment-pop .modal-header{
      background-color: var(--blue);
      color: #fff;
  }
  .comment-pop .comment{
      display: flex;
  }
  .comment-pop .comment .image{
    width:60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
  }
  .comment-pop .comment .image img{
      height: 100%;
      width: 100%;
      object-fit: cover;
  }
  .comment-pop .comment h4{
    font-size: 20px;
    color: #000; 
  }
  .comment-pop .comment h4 small{
    margin-left: 15px;
    font-size: 14px;
    font-style: italic;
  }
  .foot-logo img{
    height: 100px;
    object-fit: contain;
    background-color: #fff;
    padding: 3px 10px;
  }

  .testi-modal .modal-body{
      position: relative;
      border: var(--sky-blue) solid 3px;
  } 
  .testi-modal .modal-body img{
      border-radius: 4px;
  }
  .testi-modal .modal-body .btn-close{
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: #c0dfe0;
  }
@media (min-width: 992px){
    .navbar-expand-lg .navbar-nav .nav-link {
        margin-right: .5rem;
        margin-left: .5rem;
        padding-left: 0px;
        padding-right: 0px;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        align-items: center;
    }
}
.d-flex-center-between{
    align-items: center;
    display: flex;
    justify-content: space-between;
}
.playmorev1 .activities .acti .photo{
    /* height: 125px;
    object-fit: cover; */
    border-radius: 10px;
}
@media only screen and (max-width:767px) {
    .playmorev1 .activities .acti .photo{
        height: 250px;
    }
}
@media only screen and (max-width:992px) {
    .playmorev1 .activities .acti .star1{
        right: 0px;
    } 
    .do-more-card .badge-icon{
        right: 0px;
    }
    
}

.clappoint{
    font-size: 18px;
    font-family: Roboto;
    font-weight: bold;
    color: #E48E24;
    text-shadow: 1px 1px black;
    margin-top: 50px;
}
.clappoint-enjoymore{
    font-size: 18px;
    font-family: Roboto;
    font-weight: bold;
    color: #E48E24;
    text-shadow: 1px 1px black;
    margin-top: 35px;
}
.badge-image{
    /*height: 100px;*/
    height: 140px;
}

.testi-modal .modal-body{
    position: relative;
    border: var(--sky-blue) solid 3px;
} 
.testi-modal .modal-body img{
    border-radius: 4px;
}
.testi-modal .modal-body .btn-close{
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: #c0dfe0;
}
.know-mc{
    position: relative;
    margin-top: 15px;
}
.know-mc .badge-icon {
    background: url(../images/start-icon.png) left top / contain no-repeat;
    height: 75px;
    width: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 600;
    position: absolute;
    top: -30px;
    right: -20px;
}
.polls-icons{
    list-style: none;
    margin: 0px;
    padding: 0px;
    text-align: center;
}
.polls-icons li{
    display: inline;
}
.polls-icons li a{
    display: inline-block;
    text-align: center;
    padding: 0 10px;
    color: #464444;
    font-size: 17px;
    line-height: 1.2;
}
.polls-icons li a span{
    display: block;
    font-size: 13px;
}
.survey-form .label{
    color: red;
}
.survey-form .fa-star{
    color:#ccc
}
.poll-post .card .card-title{
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   -webkit-box-orient: vertical;
   height: 45px;
}
.poll-post .funkyradio {
    height: 170px;
    overflow: auto;
}
/* width */
.poll-post .funkyradio::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .poll-post .funkyradio::-webkit-scrollbar-track {
    background: #eeeeee; 
    border-radius: 4px;
  }
   
  /* Handle */
  .poll-post .funkyradio::-webkit-scrollbar-thumb {
    background: rgb(202, 202, 202); 
    border-radius: 4px;
  }
  
  /* Handle on hover */
  .poll-post .funkyradio::-webkit-scrollbar-thumb:hover {
    background: rgb(202, 202, 202); 
  }
.poll-post .card{
    height: 100%;
}
.sm-bt{
    background-color: #ffffff;
    text-align: center;
    height: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    box-shadow: #eeeeee -1px 7px 0px 0px;
    padding-left: 6px;
    padding-right: 6px;
}
.sm-bt a{
    width:100%;
    padding-left: 6px;
    padding-right: 6px;
}

.ev-card{
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding:8px;
    box-shadow: #cccccc69 1px 1px 6px;
    color: #5c5c5c;
    margin-bottom: 10px;
}
.ev-card .date-time{
    flex:18%;
    padding-right: 18px;
    text-align: right;
}
.ev-card .title{
    flex:62%;
}
.ev-card .link{
    flex:20%;
}
.ev-card .date-time strong{
    font-size: 20px;
    line-height: 1.2;
}
.ev-card .date-time span{
    display: block;
    font-size: 13px;
}
.ev-card .title h5{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;

    color: #5c5c5c;
    font-weight: 600;
    margin-bottom: 3px;
    font-size: 18px;
}
.ev-card .title p{
    margin-bottom: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1; /* number of lines to show */
    -webkit-box-orient: vertical;
}
.ev-card .title p:last-child{
    margin-bottom: 0px;
}
.ev-card .link .btn{
    font-weight: 600;
    padding-top: 15px;
    padding-bottom: 15px;
    width: 100%;
}
.ribbon li{
    color: var(--blue);
    font-style: italic;
}
.ribbon li a{
    color:red;
    text-decoration: underline;
}
.evpop .modal-content{
   border-radius: 60px;
}
.evpop .modal-content .modal-body{
    padding: 0px;
}
.evpop .btns{
    display: flex;
    margin-top: -35px;
    justify-content: center;
}
.evpop .btns .btn-yellow{
    background-color: #EAB51B;
    color: #fff;
    border-radius: 20px;
    color: #fff;
    min-width: 115px;
}
.evpop .btns .btn-yellow:hover{
    background-color: #b48a0b;
}
@media only screen and (max-width:767px){
    .ev-card .title h5{
        font-size: 14px;
    }
    .ev-card .title p, .ev-card .date-time span  .ev-card .date-time .time{
        font-size: 11px;
    }
    .ev-card .date-time strong{
        font-size: 15px;
    }
    .ev-card .link .btn{
        padding: 15px 8px;
        width: 75px;
    }
    .ev-card .date-time{
        flex:26%
    }
    .ev-card .link{
        flex:26%
    }
    .ev-card .title {
        flex: 55%;
        padding-right: 7px;
    }
}
.comment-main .comment{
    display:flex;
}
.comment-main .comment .image{
    margin-right:15px;
}
.comment-main .comment .content h4{
    font-size: 20px;
    font-weight: 600;
}
.btn-home{
    background-color: #EAB51B;
    color: #fff;
    font-style: italic;
    border-radius: 10px;
}
.btn-home:hover{
    background-color: #ca9c13;
    color: #fff;
}
.poll-post .card img{
    height: 280px;
    width: 100%;
    object-fit: cover;
}
.funkyradio input[type="radio"]:empty ~ label, .funkyradio input[type="checkbox"]:empty ~ label{
    text-indent: inherit!important;
    line-height: inherit!important;
}
.funkyradio input[type="radio"]:empty ~ label:before, .funkyradio input[type="checkbox"]:empty ~ label:before{
    padding-top:10px!important;
}

.funkyradio label{
    padding:10px 45px
}

/* Color Theme */

.knowmore-theme .know-more .nav-pills .nav-link.active, .knowmore-theme .nav-pills .show>.nav-link, .knowmore-theme .sub-tab-button .nav-link.active{
    background-color: var(--knowmore)!important;
}
.knowmore-theme .know-more .nav-fill .nav-item, .nav-fill>.nav-link{
    background-color: #63b5f7ad;
}
.knowmore-theme .pdf-link-card .name{
    background-color: var(--knowmore);
}
.knowmore-theme .pdf-action li a{
    background-color: var(--knowmore);
}

.domore-theme .sub-tab-button .nav-link.active{
    background-color: var(--domore)!important;
}
.domore-theme .pdf-action li a{
    background-color: var(--domore);
}
.domore-theme .pdf-action li a:hover{
    background-color: var(--gray);
}
.showcase-theme .sub-tab-button .nav-link.active{
    background-color: var(--yellow)!important;
}
.contribute-theme .blue-title h4, .blue-title h3{
    color: var(--orange);
}
.contribute-theme .btn-blue{
    background-color: var(--orange);
}
.earn-badges h5{
    font-weight: 700;
}
.ncre{
    border:#ccc solid 4px;
    border-radius: 6px;
    text-align: center;
    padding: 11px;
}
.ncre h4, .ncre h5{
    font-weight: 600;
}
.ncre.play-more{
    border-color: #f06292;
    color: #f06292;
}
.ncre.enjoy-more{
    border-color: #ba68c8;
    color: #ba68c8;
}
.ncre.know-more{
    border-color: #63b5f7;
    color:#63b5f7;
}
.ncre.do-more{
    border-color: #26c6db;
    color: #26c6db;
}
.ncre.learn-more{
    border-color: #4db6ac;
}