/* fonts  */
@font-face {
    font-family: JosefinSans-Regular;
    src: url(../fonts/Josefin_Sans/JosefinSans-Regular.ttf);
}
@font-face {
    font-family: Montserrat-Regular;
    src: url(../fonts/Montserrat/Montserrat-Regular.ttf);
}
@font-face {
    font-family: OrelegaOne-Regular;
    src: url(../fonts/Orelega_One/OrelegaOne-Regular.ttf);
}
@font-face {
    font-family: Poppins-Regular;
    src: url(../fonts/Poppins/Poppins-Regular.ttf);
}
@font-face {
    font-family: Poppins-Medium;
    src: url(../fonts/Poppins/Poppins-Medium.ttf);
}
@font-face {
    font-family: Poppins-Thin;
    src: url(../fonts/Poppins/Poppins-Thin.ttf);
}
@font-face {
    font-family: Roboto-Regular;
    src: url(../fonts/Roboto/Roboto-Regular.ttf);
}
@font-face {
    font-family: Roboto-Light;
    src: url(../fonts/Roboto/Roboto-Light.ttf);
}
@font-face {
    font-family: Roboto-Bold;
    src: url(../fonts/Roboto/Roboto-Bold.ttf);
}
@font-face {
    font-family: Abel-Regular;
    src: url(../fonts/Abel/Abel-Regular.ttf);
}
@font-face {
    font-family: Livvic-Regular;
    src: url(../fonts/Livvic/Livvic-Regular.ttf);
}
/* fonts  */
/* global variable fonts */
:root{
    --josefin-reg: JosefinSans-Regular;
    --montserrat-reg: Montserrat-Regular;
    --orelegaone-reg: OrelegaOne-Regular;
    --popins-reg: Poppins-Regular;
    --popins-mid: Poppins-Medium;
    --popins-thin: Poppins-Thin;
    --roboto-reg: Roboto-Regular;
    --roboto-light: Roboto-Light;
    --roboto-bold: Roboto-Bold;
    --livvic-reg: Livvic-Regular;
    --abel-reg: Abel-Regular;
}
/* global variable fonts */
/* global variable colors */
:root{
    --red: #EA062B;
    --black: #111111;
    --white: #FFFFFF;
    --bg: #F5F5F5;
}
/* global variable colors */
/* global valiables  */
.red{
    color: var(--red) !important;
}
.bg-red{
    background-color: var(--red) !important;
}
.black{
    color: var(--black) !important;
}
.bg-black{
    background-color: var(--black) !important;
}
.white{
    color: var(--white) !important;
}
.bg-white{
    background-color: var(--white) !important;
}
.bg{
    background-color: var(--bg) !important;
}
.font-sm{
    font-size: 14px;
}
.livvic-reg{
    font-family: var(--livvic-reg);
}
.text-justify{
    text-align: justify !important;
}
.bold{
    font-weight: 700;
}
.text-cap{
    text-transform: uppercase;
}
.title{
    font-family: var(--josefin-reg);
    font-size: 40px;
    font-weight: 900;
}
/* global valiables  */
*{
    margin: 0;
    padding: 0;
}
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    font-family: var(--popins-reg);
    font-size: 17px;
    background: var(--bg);
  }
/* topbar start  */
.top-bar{
    height: 60px;
}
.topbar-icons{
    position: absolute;
    top: 0;
    right: 0;
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
    height: 60px;

}
.topbar-icons span{
    margin-top: 5px;
    float: left;
}
.topbar-icons .icons div{
    height: 40px;
    width: 40px;
    text-align: center;
    margin-top: 10px;
    padding: 8px;
    margin-left: 20px;
    cursor: pointer;
}
/* topbar end  */
/* main navbar start  */
    /* toggler animation  */
    .bar1, .bar2, .bar3 {
        width: 30px;
        height: 3px;
        background-color: rgb(255, 255, 255);
        margin: 5px 0;
        transition: 0.4s;
      }

      .change .bar1 {
        -webkit-transform: rotate(-45deg) translate(-0px, 0px);
        transform: rotate(-45deg) translate(-5px, 3px);
      }

      .change .bar2 {opacity: 0;}

      .change .bar3 {
        -webkit-transform: rotate(45deg) translate(-8px, -8px);
        transform: rotate(45deg) translate(-8px, -8px);
      }
    /* toggler animation  */
.navbar{
    font-family: var(--josefin-reg);
}
.navbar-brand{
    z-index: 99999;
}
.get-app{
    z-index: 99999;
}
.navbar-toggler{
    z-index: 9999;
    border: none;
}
.logo-bg{
    position: absolute;
    top: 60px;
    left: 0;
    min-height: 96px;
    width: 15%;
    z-index: 999;
}
.navbar-nav .nav-item .nav-link{
    text-decoration: none;
  }

  .navbar-nav .nav-item .nav-link{
    position: relative;
  }

  .navbar-nav .nav-item .nav-link::before{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background-color: #0074D9;
    transition: width 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  }

  @media (hover: hover) and (pointer: fine) {
    .navbar-nav .nav-item .nav-link:hover::before{
      left: 0;
      right: auto;
      width: 100%;
    }
  }
  .dropdown-menu{
    clip-path: polygon(42% 0%, 48% 4%, 100% 4%, 100% 100%, 0 100%, 0 4%, 36% 4%);
  }
  .notification-dropdown-menu{
      width: 312px;
      margin: 0;
      position: absolute;
      left: -100px !important;
        z-index: 1000;
        min-width: 10rem;
        padding: 0.5rem 0;
        margin: 0;
        text-align: left;
        background: var(--bg);
        clip-path: polygon(42% 0%, 48% 4%, 100% 4%, 100% 100%, 0 100%, 0 4%, 36% 4%);

  }
  .notification-dropdown-menu li{
      padding: 10px;
  }
  .notification-dropdown-menu li a{
      white-space: inherit !important;
      text-decoration: none;
  }
  .nested-notifi-list{
      list-style: none;
      padding: 0;
      margin: 0;
      max-height: 200px;
      overflow-y: scroll;
  }
  .nested-notifi-list::-webkit-scrollbar{
    background: transparent;
    width: 0;
}
  .nested-notifi-list .dropdown-li{
      transition: all 0.3s;
  }
  .nested-notifi-list .dropdown-li:hover{
      transition: all 0.3s;
      background: #7979793a;
  }
  .nested-notifi-list .dropdown-li a{
      color: rgb(73, 71, 71);
      transition: all 0.3s;
  }
  .nested-notifi-list .dropdown-li:hover a{
      color: #000;
      transition: all 0.3s;
  }

  .profile{
      z-index: 99999999;
  }


/* main navbar end  */
/* banner start  */
#banner {
    background-image: url(../images/banner/background-banner.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#banner .banner-body{
    padding-top: 100px;
    background: rgba(0, 0, 0, 0.493);
    height: 450px;
}
.banner-body h6{
    font-family: var(--montserrat-reg);
    font-weight: 600;
}
.banner-body h1{
    font-family: var(--orelegaone-reg);
    font-weight: 600;
}
/* Banner Button start  */
.banner-body .button{
    height: 70px;
    width: 200px;
    margin-top: 70px;
    font-family: var(--josefin-reg);
}
.button{
    border: none;
    letter-spacing: 1px;
    cursor:pointer;
    transition: all .3s;
    background: transparent;
    position: relative;
}
    .button:focus{
      outline: none;
    }

.button{
    overflow: hidden;
    transition: background .3s;
}
.button:hover{
      background: #000;
      color: #fff;
    }

.button::before{
      content: "";
      position: absolute;
      width: 250%;
      height: 50px;
      top: -100%;
      right: 0;
      background-color: hsla(0,0%,100%,.5);
      transform: rotate(-45deg);
      box-shadow: 10px 0 2px #fff;
      filter: blur(10px);
      transition: all 2s;

    }

.button:hover::before{
      transform: translate(200%, 500%);
    }
    /* banner button end  */

/* banner end  */

/* about info section start  */
.info-card .info-no{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 900;
}
.info-card .sub-info .info-line{
    margin-top: 12px;
    margin-right: 5px;
    background-color: #000;
    width: 100px;
    height: 5px;
}
.info-card .sub-info span{
    font-family: var(--josefin-reg);
    font-size: 20px;
    font-weight: bold;
}
.info-card .info-details{
    text-align: justify;
    font-size: 15px;
    font-family: var(--montserrat-reg);
}
/* about info section end  */

/* register and donate section start  */
.register-box{
    text-decoration: none;
    padding: 10px;
    height: 150px;
    border-right: 1px solid var(--black);
}
.register-box:hover{
    background-color: var(--red) !important;
    transition: background 0.3s;
}
.reg-icon{
    margin-top: 50%;
}
.donate-box{
    text-decoration: none;
    padding: 10px;
    height: 150px;
    border-left: 1px solid var(--red);
}
.donate-box:hover{
    background-color: var(--black) !important;
    transition: background 0.3s;
}
/* register and donate section end  */

/* welcome section start  */
.welcome-images{
    display: flex;
    align-items: center;
}
.welcome-images .image-box{
    width: 300px;
    display: flex;
}
.welcome-images .image-box .image-box2{
    height: 430px;
    width: 300px;
    clip-path: polygon(0 0, 0% 100%, 100% 0);
    background-color: var(--red);
    z-index: 99;
}
.welcome-images .image-box img{
    height: 430px;
    width: 300px;
    padding: 15px -15px 0 15px;
    z-index: 999;
    position: absolute;
    margin-top: 15px;
    margin-left: 15px;
}
.welcome-images .image-box3{
    width: 150px;
    height: 150px;
    background: var(--bg);
    border-radius: 50%;
    z-index: 9999;
    margin-left: -50px;
}
.welcome-images .image-box3 img{
    width: 100%;
    height: 100%;
    padding: 4px;
    border-radius: 50%;
}
.welcome-texts .des{
    font-family: var(--roboto-reg);
    font-size: 16px;
}
.icon-double-arrow{
    transition: padding 0.3s;
}
.tag:hover .icon-double-arrow{
    transition: padding 0.3s ease-in-out;
    padding-left: 20px;
}
.tag:hover .bold{
    transition: color 0.3s ease-in;
    color: var(--red) !important;
}
.welcome-texts .button{
    height: 70px;
    width: 200px;
    margin-top: 35px;
    font-family: var(--josefin-reg);
}
/* welcome section end  */

/* counter section start  */
.counter{
    font-family: var(--josefin-reg);
    font-style: italic;
}
/* counter section end  */

/* service section start  */
.service-card .card{
    border: none;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.418);
    position: relative;
}
.service-card .card .top-img{
    background: var(--black);
    margin: 10px;
    overflow: hidden;
}
.service-card .card .top-img img{
    width: 100%;
    opacity: 0.6;
    transition: all 1s ease;
}
.service-card:hover .card .top-img img{
    transform: scale(1.3);
}
.service-card .card .center-icon{
    width: 80px;
    height: 80px;
    position: absolute;
    top: 180px;
    left: 130px;
    transition: all 1s ease;
}
.service-card .card .center-icon img{
    width: 90%;
    filter: grayscale(0.8);
}
.service-card:hover .card .center-icon{
    background: var(--red) !important;
    transition: all 1s ease;
}
.service-card:hover .card .center-icon img{
    filter: sepia();
    transition: all 1s ease;
}
.service-card .card .card-title{
    font-size: 30px;
}
.service-card:hover .card .button{
    background-color: var(--red) !important;
      color: #fff;
}
/* service section end  */

/* process section start  */
.process-row{
    margin-top: 80px;
}
.pr-box-1{
    height: 200px;
    border-right: 3px dashed var(--red);
    transform: rotate(-8deg);
}

.pr-box-4{
    height: 200px;
    border-left: 3px dashed var(--red);
    transform: rotate(8deg);
}
.pr-box-5{
    height: 200px;
    border-right: 3px dashed var(--red);
    transform: rotate(-8deg);
}
.pr-box-8{
    height: 200px;
    transform: rotate(8deg);
}
.pr-box-1 .pr-count1{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: absolute;
    left: 97%;
    margin-top: -20px;
    transform: rotate(8deg);
    padding-top: 5px;
    font-family: var(--roboto-bold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.39);
}
.pr-box-4 .pr-count1{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: absolute;
    left: -4%;
    margin-top: -20px;
    transform: rotate(-8deg);
    padding-top: 5px;
    font-family: var(--roboto-bold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.39);
}
.pr-box-5 .pr-count1{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: absolute;
    left: 97%;
    margin-top: -20px;
    transform: rotate(8deg);
    padding-top: 5px;
    font-family: var(--roboto-bold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.39);
}
.pr-box-8 .pr-count1{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    position: absolute;
    left: -4%;
    margin-top: -20px;
    transform: rotate(-8deg);
    padding-top: 5px;
    font-family: var(--roboto-bold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.39);
}
.pr-box-1 .item{
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.336));
}
.pr-box-1 .item .pr-item1{
    height: 200px;
    clip-path: polygon(90% 0, 90% 20%, 95% 27%, 90% 37%, 90% 100%, 0 100%, 0 0);
    transform: rotate(8deg);
    position: absolute;
    z-index: 999;
    border: none;
    margin-top: -90px;
}
.pr-box-4 .item{
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.336));
}
.pr-box-4 .item .pr-item1{
    height: 200px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 10% 45%, 5% 36%, 10% 28%);
    transform: rotate(-8deg);
    position: absolute;
    z-index: 999;
    border: none;
    margin-top: -110px;
}
.pr-box-5 .item{
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.336));
}
.pr-box-5 .item .pr-item1{
    height: 200px;
    clip-path: polygon(90% 0, 90% 20%, 95% 27%, 90% 37%, 90% 100%, 0 100%, 0 0);
    transform: rotate(8deg);
    position: absolute;
    z-index: 999;
    border: none;
    margin-top: -90px;
}
.pr-box-8 .item{
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.336));
}
.pr-box-8 .item .pr-item1{
    height: 200px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 10% 45%, 5% 36%, 10% 28%);
    transform: rotate(-8deg);
    position: absolute;
    z-index: 999;
    border: none;
    margin-top: -110px;
}
.pr-box-1 .item .pr-item1 .title{
    font-size: 28px;
    padding: 30px 0 0 30px;
}
.pr-box-1 .item .pr-item1 .dec{
    padding: 10px 30px 0 30px;
    font-family: var(--josefin-reg);
}
.pr-box-4 .item .pr-item1 .title{
    font-size: 28px;
    padding: 30px 0 0 15%;
}
.pr-box-4 .item .pr-item1 .dec{
    padding: 10px 20px 0 15%;
    font-family: var(--josefin-reg);
}
.pr-box-5 .item .pr-item1 .title{
    font-size: 28px;
    padding: 30px 0 0 30px;
}
.pr-box-5 .item .pr-item1 .dec{
    padding: 10px 20px 0 30px;
    font-family: var(--josefin-reg);
}
.pr-box-8 .item .pr-item1 .title{
    font-size: 28px;
    padding: 30px 0 0 15%;
}
.pr-box-8 .item .pr-item1 .dec{
    padding: 10px 20px 0 15%;
    font-family: var(--josefin-reg);
}
.pr-box:hover .pr-count1{
    background: var(--red) !important;
}
.pr-box:hover .pr-count1 h3{
    color: var(--white) !important;
}
.pr-box .item:hover .pr-item1{
    color: var(--white) !important;
    background: var(--red) !important;
}



.process-row2{
    margin-top: 60px;
}
.process-row2 .pr-item .line{
    height: 220px;
    width: 30px;
    margin-left: 20px;
    border-left: 3px dashed var(--red);
}
.process-row2 .pr-item .line.border-none{
    border: none;
}
.process-row2 .pr-item .line .pr-count1{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    padding-top: 5px;
    margin-left: -35px;
    margin-top: -5px;
    font-family: var(--roboto-bold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.39);
}
.process-row2 .pr-item .line.border-none .pr-count1{
    margin-left: -32px;
}
.process-row2 .pr-item .items{
    filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.336));
}
.process-row2 .pr-item .items{
    height: 200px;
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 10% 45%, 5% 36%, 10% 28%);
    z-index: 999;
    border: none;
    position: absolute;
    margin-top: -60px;
    right: 0;
}
.process-row2 .pr-item .items .item .pr-item1 .title{
    font-size: 28px;
    padding: 30px 0 0 15%;
}
.process-row2 .pr-item .items .item .pr-item1 .dec{
    padding: 10px 10px 10px 15%;
    font-family: var(--josefin-reg);
    text-align: justify;
}
.pr-item:hover .pr-count1{
    background: var(--red) !important;
}
.pr-item:hover .pr-count1 h3{
    color: var(--white) !important;
}
.pr-item .items:hover .pr-item1{
    color: var(--white) !important;
    background: var(--red) !important;
}
/* process section end  */

/* call now section start  */
.call-now{
    background-image: url(../images/banner/slider1.jpg);
    background-size: cover;
}
.call-now-inner{
    background: rgba(0, 0, 0, 0.37);
    padding: 50px 0;
}
.call-now-inner .container .icon{
    height: 30px;
    width: 30px;
    background: var(--red);
    transform: rotate(45deg);
    display: inline-block;
    padding: 3px;
    position: absolute;
    margin-top: -13px;
}
.call-now-inner .container .icon i{
    transform: rotate(45deg);
}
.call-now-inner .container .box{
    border: 5px solid var(--red);
    padding: 30px 0;
}
.call-box .top-subtitle{
    margin-top: 20px;
    padding-left: 30px;
}


/* call now section end  */

/* testimonial section start  */
.review-car .quate{
    font-size: 40px;
    margin-bottom: -15px;
}
.review-car .review-title{
    font-family: var(--josefin-reg);
}
.review-car .des{
    font-family: var(--josefin-reg);
}
.review-car .profile .avater{
    width: 100px;
    height: 100px;
}
.review-car .profile .avater img{
    width: 100%;
}
.review-car .profile .user-info .name{
    font-family: var(--josefin-reg);
    font-size: 30px;
}
.review-car .profile .user-info .deg{
    font-family: var(--josefin-reg);
    padding-top: 10px;
    font-size: 20px;
}
/* testimonial section end  */

/* member section start  */
.member-item .card .top-img{
    position: relative;
    width: 100%;
}
    .member-item .card .top-img .overlay {
        border: 5px solid transparent;
        box-sizing: border-box;
        /* width: 33.33%; */
        float: left;
        position: relative;
        cursor: pointer;
    }
        .member-item .card .top-img .overlay img {
        max-width: 100%;
        vertical-align: middle;
    }

    /* Image Placeholder Styles
    -------------------------------------------------------------- */
    .member-item .card .top-img .overlay:before,
    .member-item .card .top-img .overlay:after {
    /* padding-top: 33.33%; */
    content: "";
    display: block;
    }
    .member-item .card .top-img .overlay {
    /* background: #222; */
    /* box-shadow: 0 0 0 8px #222 inset, 0 0 0 9px #333 inset; */
    color: #444;
    line-height: 0;
    text-align: center;
    display: block;
    }

    /* The hover effect
    -------------------------------------------------------------- */
    .member-item .card .top-img .overlay:before {
    transition: all .5s ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
    transform: scale(0);
    }
    .member-item:hover .card .top-img .overlay:before {
    opacity: .5;
    transform: scale(1);
    }
    .member-item .card .top-img .overlay:after {
    transition: all .6s ease .2s;
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #aaa;
    background: #000;
    opacity: 0;
    transform: scale(0);
    }
    .member-item:hover .card .top-img .overlay:after {
    opacity: .35;
    transform: scale(1);
    }

.member-item .card .top-img .social{
    position: absolute;
    margin: 0 auto;
    text-align: center;
    left: 20%;
    width: 80%;
    margin-top: 130%;
    transition: all 0.3s linear;
    opacity: 1;
}
.member-item .card .top-img .social .icon{
    transition: all 0.3s linear;
    opacity: 0;
}
.member-item:hover .card .top-img .social .icon{
    opacity: 1;
    transition: all 0.3s linear;
    margin-top: -30%;
}
.member-item:hover .card .top-img .social .icon:nth-child(1){
    transition-delay: 0.0s;
}
.member-item .card .top-img .social .icon:nth-child(2){
    transition-delay: 0.1s;
}
.member-item .card .top-img .social .icon:nth-child(3){
    transition-delay: 0.2s;
}
.member-item .card .top-img .social .icon:nth-child(4){
    transition-delay: 0.3s;
}
.member-item .card .top-img .social .icon{
    height: 50px;
    /* width: 40px; */
    background-color: var(--white);
    font-size: 25px;
    padding: 3px 0px 5px 8px;
    margin: 0 5px 0 5px;
    z-index: 9999;
    /* transition: all 0.3s linear; */
}
/* .member-item:hover .card .top-img .social .icon{ */
    /* z-index: 9999; */
    /* transition: all 0.3s linear; */
    /* animation: icon 0.5s ease-out; */
    /* opacity: 1;
} */
.member-item .card .top-img .social .icon:hover{
    background: var(--red);
    color: var(--white) !important;
    transition-delay: 0s;
}


.member-item .card .top-img .social .icon.facebook{
    border-radius: 20px 0 0 20px;
    padding-left: 15px;
}
.member-item .card .top-img .social .icon.pinterest{
    border-radius: 0 20px 20px 0;
}
.member-item .card .member-name{
    font-family: var(--josefin-reg);
    font-size: 25px;
    font-weight: bold;
    text-align: center;
    padding-top: 30px;
}
.member-item .card .member-deg{
    font-family: var(--montserrat-reg);
    font-size: 16px;
    text-align: center;
    padding-top: 10px;
}
/* member section end  */

/* gallery section start  */
.gallery-box .g-img{
    position: relative;
    width: 100%;
}
.gallery-box .g-img {
        border: 5px solid transparent;
        box-sizing: border-box;
        /* width: 33.33%; */
        float: left;
        position: relative;
        cursor: pointer;
    }
    .gallery-box .g-img img {
        vertical-align: middle;
    }

    /* Image Placeholder Styles
    -------------------------------------------------------------- */
    .gallery-box .g-img:before,
    .gallery-box .g-img:after {
    /* padding-top: 33.33%; */
    content: "";
    display: block;
    }
    .gallery-box .g-img {
    /* background: #222; */
    /* box-shadow: 0 0 0 8px #222 inset, 0 0 0 9px #333 inset; */
    color: #444;
    line-height: 0;
    text-align: center;
    display: block;
    }

    /* The hover effect
    -------------------------------------------------------------- */
    .gallery-box .g-img:before {
    transition: all .5s ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
    transform: scale(0);
    }
    .gallery-box:hover .g-img:before {
    opacity: .5;
    transform: scale(1);
    }
    .gallery-box .g-img:after {
    transition: all .6s ease .2s;
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #aaa;
    background: #000;
    opacity: 0;
    transform: scale(0);
    }
    .gallery-box:hover .g-img:after {
    opacity: .35;
    transform: scale(1);
    }
    .gallery-box .g-img .icon{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 6px;
        box-shadow: 0 0 10px black;
        position: absolute;
        top: 50%;
        left: 48%;
        z-index: 99;
        opacity: 0;
        transition: all 0.3s linear;
    }
    .gallery-box:hover .g-img .icon{
        opacity: 1;
        transition: all 0.3s linear;
    }
/* gallery section end  */

/* blood owner section start  */
.video-sec{
    background-image: url(../images/banner/slider1.jpg);
    background-size: cover;
    background-position: center;
    min-height: 350px;
}
.video-sec .overlay{
    padding-top: 30px;
    width: 100%;
    height: 350px;
    background-color: rgba(0, 0, 0, 0.815);
}
.video-sec .overlay .play{
    width: 50px;
    height: 50px;
    padding: 12px;
    border-radius: 50%;
    padding-left: 15px;
    border-radius: 50%;
    cursor: pointer;
}
.play {
        border: 5px solid transparent;
        box-sizing: border-box;
        /* width: 33.33%; */
        position: relative;
        line-height: 0;
    }

    /* The hover effect
    -------------------------------------------------------------- */
    .play:before {
    transition: all .5s ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: rgb(253, 253, 253); */
    transform: scale(0);
    border-radius: 50%;
    }
    .paly:hover:before {
    opacity: .5;
    transform: scale(1);
    }
    .play:after {
    transition: all .6s ease .2s;
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 2px solid rgb(252, 252, 252);
    background: rgba(73, 73, 73, 0.575);
    opacity: 0;
    transform: scale(0);
    border-radius: 50%;
    }
    .play:hover:after {
    opacity: .35;
    transform: scale(2.5);
    border-radius: 50%;
    }
    .requests, .request-form{
        margin-top: -70px;
    }
    .blood-request div .requests .card .title, .request-form .card .title{
        font-size: 30px;
    }
    .request-row{
        border: 1px 0 1px 0 solid black !important;
        cursor: pointer !important;
        /* background-color: var(--black) !important; */
        padding: 5px 0 5px 0;
        transform: scale(1);
        transition: all 0.5s ease;
    }
    .request-row:hover{
        background-color: rgba(0, 0, 0, 0.137);
        color: white;
        transition: all 0.5s ease;
        transform: scale(1.06);
    }
    .request span{
        font-family: var(--josefin-reg);
        opacity: 1;
        font-style: italic;
    }
    .requests .card, .request-form .card{
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .request-form .card{
        max-height: 430px;
    }
    .blood-requests{
        max-height: 355px;
        overflow-x: hidden;
        overflow-y: scroll;
    }
    .blood-requests::-webkit-scrollbar, .request-form .card::-webkit-scrollbar{
        background: transparent;
    }
    .appointment div div input{
        font-family: var(--josefin-reg);
    }
    .appointment div div input::placeholder{
        font-family: var(--josefin-reg);
    }
    .appointment div div input:focus-visible,.appointment div div textarea:focus-visible{
        /* border: 1px solid red !important; */
        outline: 0;
    }
    .appointment div div select{
        font-family: var(--josefin-reg);

    }
    .appointment div div select:focus-visible{
        outline: 0;
    }
/* blood owner section end  */

/* blog section start  */
.news{
    background-color: var(--white);
}
.blog:hover{
    cursor: pointer;
}
.blog .top-img{
    position: relative;
    width: 100%;
}
.blog .top-img {
        border: 5px solid transparent;
        box-sizing: border-box;
        /* width: 33.33%; */
        float: left;
        position: relative;
        cursor: pointer;
    }
    .blog .top-img img {
        vertical-align: middle;
    }

    /* Image Placeholder Styles
    -------------------------------------------------------------- */
    .blog .top-img:before,
    .blog .top-img:after {
    /* padding-top: 33.33%; */
    content: "";
    display: block;
    }
    .blog .top-img {
    /* background: #222; */
    /* box-shadow: 0 0 0 8px #222 inset, 0 0 0 9px #333 inset; */
    color: #444;
    line-height: 0;
    text-align: center;
    display: block;
    }
    .blog .top-img img {
        max-width: 100%;
        vertical-align: middle;
    }


    /* The hover effect
    -------------------------------------------------------------- */
    .blog .top-img:before {
    transition: all .5s ease;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #333;
    transform: scale(0);
    }
    .blog:hover .top-img:before {
    opacity: .5;
    transform: scale(1);
    }
    .blog .top-img:after {
    transition: all .6s ease .2s;
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid #aaa;
    background: #000;
    opacity: 0;
    transform: scale(0);
    }
    .blog:hover .top-img:after {
    opacity: .35;
    transform: scale(1);
    }
    .blog .top-img .icon{
        width: 30px;
        height: 30px;
        border-radius: 50%;
        padding: 6px;
        box-shadow: 0 0 10px var(--white);
        background: green;
        position: absolute;
        top: 46%;
        left: 46%;
        z-index: 99;
        opacity: 0;
        transition: all 0.3s linear;
    }
    .blog:hover .top-img .icon{
        opacity: 1;
        transition: all 0.3s linear;
        color: var(--white);
    }

.blog .card-body .card-title{
    font-size: 25px;
}
/* blog section end  */

/* footer section start  */
.footer{
    background-image: url(../images/banner/world-map.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.footer .opacity{
    background-color: #f6f6f6ad;
}
.f-about-us h3{
    font-family: var(--josefin-reg);
    font-weight: 700;
}
.f-about-us .des, .f-about-us .contact-info{
    font-family: var(--josefin-reg);
}
.f-quick-link h3{
    font-family: var(--josefin-reg);
    font-weight: 700;
}
.f-quick-link .tag-list div div .tag{
    padding: 5px 0 5px 0;
}
.font-sm-f{
    font-size: 14px;
}
.subscribe .form-group input{
    font-family: var(--josefin-reg);
    box-shadow: 0 0 10px rgb(196, 196, 196) !important;
    border: 1px solid rgb(156, 156, 156);
}
.subscribe .form-group input::placeholder{
    font-family: var(--josefin-reg);
}
.subscribe .form-group input:focus-visible{
    /* border: 1px solid red !important; */
    outline: 0;
}
.subscribe .title{
    font-size: 20px;
}
.subscribe .form-group .button{
    font-family: var(--josefin-reg);
    margin-left: -5px;
}

.social-follow{
    font-family: var(--josefin-reg);
    font-weight: 700;
}
.social-follow .social-btn a{
    color: var(--white);
    background: var(--red);
    transition: all 0.3s ease;
    margin-left: 10px;
    padding: 15px 20px;
}
.social-follow .social-btn a div{
    height: 20px;
    width: 20px;
}
.social-follow .social-btn a:hover{
    color: red;
    background: var(--white);
    transition: all 0.3s ease;
    box-shadow: 0 0 10px black;
}
/* footer section end  */


/* ------------------- news feed section start ------------------- */
.post-box form .post-details{
    border: none;
}
.input-file-container {
    position: relative;
    width: 150px;
  }
  .js .input-file-trigger {
    padding: 10px;
    background: var(--red);
    color: #fff;
    font-size: 1em;
    transition: all .4s;
    cursor: pointer;
  }
  .js .input-file {
    position: absolute;
    top: 0; left: 0;
    opacity: 0;
    padding: 14px 0;
    cursor: pointer;
    width: 130px;
  }
  .js .input-file:hover + .input-file-trigger,
  .js .input-file:focus + .input-file-trigger,
  .js .input-file-trigger:hover,
  .js .input-file-trigger:focus {
    background: #34495E;
    color: #39D2B4;
    cursor: pointer;
  }

  .file-return {
    margin: 0;
  }
  .file-return:not(:empty) {
    margin: 1em 0;
  }
  .js .file-return {
    font-style: italic;
    font-size: .9em;
    font-weight: bold;
  }
  .js .file-return:not(:empty):before {
    content: "Selected file: ";
    font-style: normal;
    font-weight: normal;
  }

    /* post  */
    .post{
        border-radius: 10px;
        font-family: 'Josefin Sans', sans-serif;

    }

    #postdropdown{
        color: #E33E33 !important;
        margin: 10px;
        padding: 8px;
        border-radius: 50%;
    }
    #postdropdown:hover{
        transition: 0.3s;
    }
    .post-footer{
        width: 100%;
    }
    .post-footer .heart{
        padding: 5px;
        font-size: 29px;
        border-radius: 10px;
        cursor: pointer;

    }
    .post-footer .comments, .post-footer .share{
        font-size: 22px;
        padding: 5px;
        border-radius: 10px;
        cursor: pointer;
    }
    .post-footer .heart:hover, .post-footer .comments:hover, .post-footer .share:hover{
        background-color: rgba(175, 174, 172, 0.219);
        transition: 0.3s ease-in;
    }
    #heart-2{
        display: none;
        color: #E33E33;
    }
    .react-count div span{
        font-size: 14px;
        font-family: var(--montserrat-reg);
    }
    #comment-box{
        display: none;
    }
    /* post  */
/* ------------------- news feed section end ------------------- */

/* groups section start  */
.sidebar-toggler{
    position: absolute;
    background-color: transparent;
    z-index: 99999;
    color: #000;
}
.sidebar-toggler{
    background-color: var(--black);
    border-radius: 0 50% 50% 0;
    color: var(--white);
    width: 50px;
    height: 50px;
    margin-left: -30px;
}
.sidebar-toggler i{
    margin-top: 10px;
    animation: side-i 1s infinite;
    font-size: 30px;
}
@keyframes side-i {
    0%{
        opacity: 0;
        margin-left: 0;
    }50%{
        opacity: 1;
        margin-left: 25px;
    }100%{
        opacity: 0;
        margin-left: 40px;
    }
}
.main-sidebar{
    position: absolute;
    animation: sidebar 0.3s linear;
    transition: all 0.3s linear;
}
@keyframes sidebar {
    0%{
        margin-left: -200px;
    }100%{
        margin-left: 0;
    }
}
.mygroups{
    width: 100%;
    max-height: calc(60vh);
    overflow-y: scroll;
}
.mygroups::-webkit-scrollbar{
    color: transparent;
}
.group-list2:hover{
    background: rgba(141, 141, 141, 0.226);
    transition: 0.3s;
}
.group-list{
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.315) !important;
}
.group-list:hover{
    background: rgba(141, 141, 141, 0.226);
    transition: 0.3s;
}
.groups-list{
    max-height: calc(109vh);
    overflow-y: scroll;
}
.groups-list::-webkit-scrollbar{
    color: transparent;
}
/* groups section end  */

/* blood request start  */
.brequest{
    overflow-x: hidden;
}
.table{
    display: block;
    overflow: auto;
    white-space: nowrap;
}
/* blood request end  */

/* login section start  */
.gradient-custom-2 {
    /* fallback for old browsers */
    background: #fccb90;

    /* Chrome 10-25, Safari 5.1-6 */
    background: -webkit-linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);

    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    background: linear-gradient(to right, #ee7724, #d8363a, #dd3675, #b44593);
    }

    @media (min-width: 768px) {
    .gradient-form {
    height: 100vh !important;
    }
    }
    @media (min-width: 769px) {
    .gradient-custom-2 {
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    }
    }
    .form-outline .form-control~.form-label {
        position: absolute;
        margin-top: -37px;
        margin-left: 75px;
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        left: 0.75rem;
        padding-top: 0.37rem;
        pointer-events: none;
        transform-origin: 0 0;
        transition: all .2s ease-out;
        color: rgba(0,0,0,.6);
        margin-bottom: 0;
    }
    .form-outline .form-control:focus {
        box-shadow: none!important;
        border: 1px solid var(--black);
    }
    .form-outline .form-control:focus~.form-label{
        margin-top: -54px;
        font-size: 15px;
        background-color: white;
    }
    .form-outline .form-control{
        min-height: auto;
        padding: 0.33em 0.75em;
        background: transparent;
        transition: all .2s linear;
    }
    INPUT:not(:-webkit-autofill), SELECT:not(:-webkit-autofill), TEXTAREA:not(:-webkit-autofill) {
        animation-name: onautofillcancel;
    }
    .register-2{
        background-color: rgba(0, 0, 0, 0.418);
        height: 100%;
        width: 100%;
    }
    .form-control:focus{
        /* border: 1px solid red !important; */
        outline: 0;
        box-shadow: none;
        border-color: #000;
        border-width: 1px 1px 1px 0;
    }
    #password:focus{
        border-color: green !important;
    }
/* login section end  */