/*
Theme Name: Blood Donation Campaign Pro
Theme URI: https://www.theclassictemplates.com/products/portfolio-wordpress-theme
Author: Theclassictemplates
Author URI: https://www.theclassictemplates.com/
Description: Premium Portfolio WordPress Theme is a theme all creatives need to display their work to potential clients. Be it writers, designers, illustrators, cartoonists, web developers, photographers, architects, fashion designers, or marketing and advertising professionals, if you have a portfolio to show, this theme is all you need. Tell your clients about what you do and yourself under “About Me” as it becomes your call-to-action (CTA) tool. With sleek, modern design layouts, well-structured configuration, this theme is cross-platform and all-browsers compatible, making it responsive. The bug and breach free theme reassures for a faster loading website that won’t keep your clients waiting for pages to load.
Version: 0.0.1
Requires at least: 5.0
Tested up to: 6.0
Requires PHP: 5.6
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Text Domain: blood-donation-campaign-pro
Tags: one-column, right-sidebar, custom-menu, editor-style, featured-images, full-width-template, sticky-post, theme-options, threaded-comments
developed by Theclassictemplates(Theclassictemplates.net), 2023.
Blood Donation Campaign Pro WordPress Theme is released under the terms of GNU GPL

/* Basic Style */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
:root {
  --white: #ffffff;
  --black: #070603;
  --brown: #B79455;
  --red: #A41214;
  --light-red: #E6EFF6;
}
:root {
  --pri-font: "Poppins", sans-serif;;
  --h3-font : "Roboto", sans-serif;
  overflow: auto;
}
#wpadminbar {
  position: fixed !important;
}
section{
  padding: 4% 0px;
  position: relative;
}
html body {
  margin: 0;
  padding: 0;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  position: relative;
  color: var(--color-black);
  font-weight: 300;
  font-size: 15px;
  font-family: var(--font-var(--pri-font));
  overflow-x: hidden;
  background-color:var(--color-white);
  overflow-x: hidden;
  width: 100%;
}
/* owl-nav */
.owl-dots{
  width: fit-content;
  margin: 4% auto 0 auto;
}
#partners .owl-dots {
  width: fit-content;
  margin: 0% auto 0 auto;
}
.owl-carousel button.owl-dot {
  border-radius: 0px !important;
  width: 10px !important;
  height: 10px !important;
  color: #fff;
  border: 1px solid var(--red) !important;
  margin: 0px 4px;
}
.owl-carousel button.owl-dot.active{
  background: var(--red);
}
button.owl-prev {
  position: absolute;
  top: 45%;
  bottom: 0;
  left: -100px;
  height: fit-content !important;
  margin: 0 auto;
  border: none !important;
}
button.owl-next {
  position: absolute;
  top: 45%;
  bottom: 0;
  right: -100px;
  height: fit-content !important;
  margin: 0 auto;
  border: none !important;
}
#Upcoming_event .owl-nav,#our-team .owl-nav,#blog .owl-nav{
  display: block !important;
}
.owl-nav i {
  color: var(--black) !important;
  border: 3px solid var(--black);
  width: 40px;
  height: 40px;
  line-height: 35px;
  font-size: 35px;
  border-radius: 50px;
}
#Upcoming_event .owl-nav i,#Upcoming_event .owl-nav i:hover,#Upcoming_event .owl-nav .owl-next i{
  border: none;
}
.owl-nav i:hover,.owl-nav .owl-next i {
  color: var(--red) !important;
  border: 3px solid var(--red);
}
.owl-nav{
  display: none;
}
h6{
  font: 400 20px/27px var(--h3-font);
  color: var(--red);
  margin: 0px;
}
h5 {
  font: 400 18px / 24px var(--pri-font);
  color: var(--red);
  text-decoration: underline;
  margin: 0;
}
h4{
  font: 500 20px/27px var(--h3-font);
  color: var(--black);
  margin: 0;    
}
h3,h3 a{
  font: 600 27px / 45px var(--pri-font);
  color: #000000;
}
h2{
  font: 900 60px / 65px var(--h3-font);
  color: var(--black);
  margin: 0;
}
h1{
  font: 600 70px / 90px var(--h3-font);
  color: #fff;
  margin: 0px;
}
p{
  font: 300 14px/25px var(--h3-font);
  color: var(--black);
  margin: 0;
}
#reply-title{
  font: 400 35px/60px var(--pri-font);
  color: var(--blackk);
  margin: 0;
}
.page-title{
  color: #000;
  font: 600 40px/52px var(--h1-font);
}
.button-box .btn-text {
  background: var(--brown);
  color: #fff;
  font: 500 15px / 15px var(--h3-font);
  padding: 12px 24px;
  position: relative;
}
.button-box .btn-icon {
  background: var(--brown);
  padding: 6px 12px;
  color: #fff;
  font-size: 21px;
  position: relative;
  top: 2px;
}
.button-box .btn-text:after {
  content: '';
  border: 1px solid #fff;
  width: 95%;
  height: 85%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.button-box .btn-icon:after {
  content: '';
  border: 1px solid #fff;
  width: 87%;
  height: 87%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.button-box:hover .btn-text{
  background: var(--black);
  color: var(--white);
  transition: all 0.5s ease 0s;
}
.button-box:hover .btn-icon,.form-submit:hover .submit{
  background: var(--black) !important;
  transition: all 0.5s ease 0s;
}
.button-box:hover .btn-icon i {
  -webkit-transition: .7s;
  -moz-transition: .7s;
  -ms-transition: .7s;
  -o-transition: .7s;
  -webkit-transform: rotateY(360deg);
  -moz-transform: rotateY(360deg);
  -o-transform: rotateY(360deg);
  -ms-transform: rotateY(360deg);
  transform: rotateY(360deg);
}
.newsletter-cons-form-box .submit-box .submit:hover::after,.form-submit:hover::after{
  background: var(--red);
  color: #fff;
  transition: all 0.5s ease 0s;
}
.newsletter-head-form-box form p:nth-child(3):hover::after{
  background: var(--red);
  color: #fff;
  transition: all 0.5s ease 0s;
}
.owl-next:hover .carousel_next_text,.owl-prev:hover .carousel_prev_text{
  background: var(--black);
  transition: all 0.5s ease 0s;
}
.bypostauthor {
  font-weight: 600;
}
.wpcf7-spinner {
  display: none;
}
/* loader */
.eco-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background: var(--red);
  cursor: pointer;
  z-index: 9999;
}
.loader {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto;
}
.loader {
  width: 48px;
  height: 48px;
  display: inline-block;
  color: #FFF;
  border: 1px solid;
  box-sizing: border-box;
  animation: fill 2s linear infinite alternate;
}
@keyframes fill {
  0% {
    box-shadow: 0 0  inset;
  }
  100% {
    box-shadow: 0 -48px inset;
  }
}
/* faq page */
#faq-page .accordion-button:not(.collapsed){
  border: none;
  background: var(--red);
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font: 500 16px/28px var(--pri-font);
}
#faq-page .accordion-body{
  font: 400 14px/28px var(--pri-font);
}
#faq-page .accordion-item{
  border: none;
  box-shadow: 0px 0px 2px 0px #9e9c9c;
  border-radius: 10px;
  margin-bottom: 10px;
  position: relative;
  z-index: 0;
}
#faq-page .accordion-button{
  box-shadow: 0px 0px 2px 0px #9e9c9c;
  border-radius: 10px;
  padding: 12px 30px;
  color: #000;
  font: 500 16px/28px var(--pri-font);
}
#faq-page .accordion-button.collapsed::after {
  content: '\f067';
}
#faq-page .accordion-button::after {
  content: '\f068';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  background-image: unset !important;
  height: unset !important;
  width: unset !important;
  transition: unset !important;
}
#faq-page .faq-image img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top;
}
/* contact */
.contact-outer-form{
  gap: 50px 0px;
  justify-content: space-between;
}
.get-contact-small-head {
  padding: 5% 10px 5% 0px;
}
.contact-touch-form-box .newsletter-head-form-box .wpcf7 form.invalid .wpcf7-response-output{
  color: #000;
}
.checkbox .wpcf7-list-item-label{
  color: var(--red);
  font: 300 14px/14px var(--pri-font);
  padding-left: 6px;
}
.contact-touch-form-box form .get:nth-child(5)-box input[type="text"]{
  padding-bottom: 40px;
}
.contact-touch-form-box .wpcf7-checkbox input {
  background: transparent;
}
.contact-detail-box svg path{
  fill: var(--red);
}
.contact-touch-form-box .wpcf7-checkbox input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  border: 1px solid var(--red);
  border-radius: 3px;
  background-color: #fff;
  padding: 1px;
}
.contact-touch-form-box .wpcf7-checkbox input[type=checkbox] {
  position: relative;
  cursor: pointer;
}
.contact-touch-form-box .wpcf7-checkbox input {
  background: transparent;
}
.contact-touch-form-box form .submit p input[type="submit"] {
  font: 500 16px / 20px var(--pri-font);
  color: var(--white);
  background: var(--brown);
  border: none;
  padding: 13px 25px;
  width: max-content;
}
.contact-touch-form-box .submit-box .submit p{
  position: relative;
}
.contact-touch-form-box .button-box .btn-text{
  padding: 0;
}
.contact-touch-form-box .button-box .btn-text:after {
  content: '';
  border: 1px solid #fff;
  width: 95%;
  height: 85%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}
.contact-touch-form-box .submit-box .submit p:after {
  /* position: absolute;
  background: var(--brown);
  color: #fff;
  width: 45px;
  height: 100%;
  line-height: 45px;
  right: -50px;
  top: 0;
  content: '\f061';
  font-family: 'FontAwesome';
  text-align: center; */
}
.contact-touch-form-box form .submit p input[type="submit"]:hover{
  background: var(--red);
  color: #fff;
}
.contact-bg-colr{
  background: #006940 0% 0% no-repeat padding-box;
  opacity: 0.1;
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="date"], input[type="phone"], input[type="password"], textarea{
  background: #fff;
}
.contact-form-content-box { 
  background: #ffffff;
  padding: 25px 35px;
  box-shadow: 0px 1px 2px 0px #999999;
}
.contact-touch-form-box input[type="text"], .contact-touch-form-box input[type="tel"], .contact-touch-form-box input[type="email"], .contact-touch-form-box input[type="number"], .contact-touch-form-box input[type="date"], .contact-touch-form-box input[type="phone"], .contact-touch-form-box input[type="password"], .contact-touch-form-box textarea, .contact-touch-form-box select {
  font-size: 16px !important;
  padding: 14px 18px !important;
  width: 100%;
  border-radius: 0px;
  line-height: 16px;
  font-family: var(--pri-font);
  border: none;
  box-shadow: 0px 2px 3px 0px #999999;
}
/* our-work */
.our-work-cont-box{
  padding: 0 26px;
}
.our-work-cont-box h6{ 
  font: 500 18px/25px var(--pri-font);
}
.our-work-cont-box p{ 
  font: 400 14px/20px var(--h3-font);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.our-work-image-box {
  position: relative;
}
.our-work-image-box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid var(--red);
  background: transparent;
  transition: all 0.6s ease 0s;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.our-work-head-content-box:hover .our-work-image-box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #fff;
  background: transparent;
  transition: all 0.6s ease 0s;
  z-index: 1;
  width: 94%;
  height: 92%;
}
.our-work-head-content-box:hover .our-work-image-box:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--red);
  opacity: 0.4;
  transition: all 0.6s ease 0s;
  z-index: 1;
  width: 100%;
  height: 100%;
}
/* our-features */
.features-description-box .features-description-text {
  font: 400 22px / 25px var(--pri-font);
  color: var(--red);
}
.desc-counter-box{
  list-style-type: disc;
}
.desc-counter-box li{
  font: 300 18px / 55px var(--pri-font);
}
.features-image-box {
  box-shadow: 0px 0px 8px 4px var(--red);
}
.features-image-box img{
  /* box-shadow: 0px 0px 8px 4px var(--red); */
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.features-image-box {
  height: 400px;
  width: auto;
  position: relative;
}
.features-box {
  width: 60px;
  height: 60px;
  margin: auto;
}
.features-box img{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.features-content-box h6 {
  font: 500 18px / 20px var(--h3-font);
  color: #070603;
  margin: 0px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.features-content-box p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.features-inner-boxed {
  position: relative;
  border: 1px solid var(--red);
  height: 180px;
  padding: 15px 5px;
  margin-bottom: 0px;
  background: #fff;
  z-index: 1;
}
.features-inner-boxed:hover:after {
  background: var(--red);
  height: 100%;
}
.features-inner-boxed:after {
  content: '';
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  transition: all 1s;
  z-index: -1;
}
.features-inner-boxed:hover .features-content-box h6,.features-inner-boxed:hover .features-content-box p{
  color: #fff;
}
.features-inner-boxed:hover .features-icon-img path{
  fill: #fff;
}
.features-main-box .features-inner-box:nth-child(1):hover .features-icon-img path:nth-child(2),.features-main-box .features-inner-box:nth-child(1):hover .features-icon-img path:nth-child(3) {
  fill: var(--red) !important;
}
/* about */
.overlay-bg-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* opacity: 0.1; */
  z-index: -1;
}
.about-counter-box{
  background: var(--brown);
  padding: 20px 40px;
  border-radius: 15px;
  justify-content: space-around;
}
.about-inner-title{
  color: var(--white);
  font: 700 32px/37px var(--h3-font);
}
.about-inner-paragraph{
  font: 500 18px/22px var(--h3-font);
  color: var(--white);
}
.about-paragraph{
  width: 95%;
}
.about-box:hover .about-inner-title,.about-box:hover .about-inner-paragraph{
  color: var(--red);
}
.about-main-img-one img{
  border-radius: 0px 50px 0px 50px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-main-img-one{
  -webkit-mask-image: url(assets/images/about/about-shape.png);
  mask-image: url(assets/images/about/about-shape.png);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  position: relative;
  width: 100%;
  height: 100%;
}
.About-image{
  width: fit-content;
  height: 500px;
}
.About-image img{
  width: 100%;
  height: 100%;
}
p.about-count-text {
  font: 300 18px / 30px var(--h3-font);
}
.why-choose-main-img-three{
  position: relative;
  overflow: hidden;
}
.about-main-img-four:hover::after,.why-choose-main-img-three:hover::after,.why-choose-main-img-two:hover::after {
  transform: scaleY(1);
}
.about-main-img-four:hover::before,.why-choose-main-img-three:hover::before,.why-choose-main-img-two:hover::before {
  transform: scaleX(1);
}
.about-main-img-four::before, .about-main-img-four::after,.why-choose-main-img-three::before, .why-choose-main-img-three::after,.why-choose-main-img-two::after,.why-choose-main-img-two::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.4;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  transform: scaleX(0);
  transition: all 0.6s ease 0s;
}
.why-choose-main-box:hover .why-choose-main-img-four,.why-choose-main-box:hover .why-choose-main-img-one {
  animation: tilt-in-top-2 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
@keyframes tilt-in-top-2{
  0% {
    -webkit-transform: rotateY(-30deg) translateY(-300px) skewY(30deg);
    transform: rotateY(-30deg) translateY(-300px) skewY(30deg);
    opacity: 0;
  }
  100% {
      -webkit-transform: rotateY(0deg) translateY(0) skewY(0deg);
      transform: rotateY(0deg) translateY(0) skewY(0deg);
      opacity: 1;
  }
}
@keyframes shake{
  0%, 100% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
      -webkit-transform: translateX(-10px);
      -ms-transform: translateX(-10px);
      transform: translateX(-10px);
  }
  20%, 40%, 60%, 80% {
      -webkit-transform: translateX(10px);
      -ms-transform: translateX(10px);
      transform: translateX(10px);
  }
}
/* checklist */
.eligibility-left-box h3{
  font: 600 22px / 45px var(--pri-font);
  color: #12A44A;
}
.eligibility-right-box h3{
  font: 600 22px / 45px var(--pri-font);
  color: var(--red);
}
.eligibility-content-box span svg{
  width: 20px;
  height: 20px;
}
.eligibility-right-box{
  border-left: 1px solid var(--black);
}
.eligibility-content-box p{
  font: 400 18px / 27px var(--h3-font);
  color: var(--black);
}
/* upcoming */
.upcoming-event-outer-box:hover .event-content-inner:before, .upcoming-event-outer-box:hover .event-content-inner:after ,.features-image-box:hover:before ,.features-image-box:hover:after {
  transform: scaleX(1);
}
.event-content-inner:before, .event-content-inner:after ,.features-image-box:before ,.features-image-box:after{
  content: "";
  width: 100%;
  height: 100%;
  background-color: #a412149e;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1;
  transform: scaleX(0);
  transition: all 1s ease 0s;
  opacity: 0.8;
}
.event-content-inner:after,.features-image-box:after {
  transform: scaleY(0);
}
.event-content-inner,.features-image-box{
  position: relative;
  overflow: hidden;
}



.event-img{
  height: 500px;
}
.event-img img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.event-meta-date span svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
#Upcoming_event .owl-item.active:nth-child(1) .event-content-wrap .event-content-inner{
  /* background: #a412149e; */
}
#Upcoming_event .event-content-wrap:hover .event-content-inner{
  /* background: #a412149e; */
}
#Upcoming_event .event-content-wrap:hover .upcoming-event-outer-box:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid transparent;
  background: transparent;
  transition: all 3s;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#Upcoming_event .event-content-wrap:hover .upcoming-event-outer-box:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--red);
  transition: all 0.6s ease 0s;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}
#Upcoming_event .event-content-wrap:hover .upcoming-event-outer-box:after{
  border: 1px solid #fff;
  background: transparent;
  transition: all 3s;
  z-index: 1;
  width: 96%;
  height: 96%;
  opacity: 1;
}
.upcoming-event-outer-box:after{
  opacity: 0;
}
.event-content-innner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.event-content-inner{
  position: absolute;
  bottom: 20px;
  padding: 15px;
  background: #b794559e;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
h6.event-title {
  font: 500 20px/25px var(--h3-font);
  color: #fff;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.event-meta-date a{
  font: 300 16px / 20px var(--h3-font);
  color: #fff;
}




/* register donor */
#registerDonor .get-box p{
  display: flex;
  justify-content: space-between;
}
#registerDonor .request-blood-form-overlay {
  width: 100%;
  position: absolute;
  height: 100%;
  opacity: 0.2;
  background: var(--red);
  top: 0;
  left: 0;
  z-index: 0;
}
#registerDonor label {
  font-size: 15px;
  line-height: 20px;
  color: #222222;
  width: 50%;
  font-weight: 300;
  font-family: var(--h3-font);
  align-self: center;
}
#registerDonor .notes-label.head-label{
  width: 20%;
}
#registerDonor .get-box .wpcf7-form-control-wrap{
  width: 100%;
}
#registerDonor .get-box p input[type="text"], #registerDonor .get-box p input[type="tel"], #registerDonor .get-box p input[type="email"], #registerDonor .get-box p input[type="number"], #registerDonor .get-box p input[type="date"], #registerDonor .get-box p input[type="phone"], #registerDonor .get-box p input[type="password"], #registerDonor .get-box p textarea{
  box-shadow: 0px 0px 4px 0px #00000040 inset;
  border: none;
  background: #fff;
  padding: 8px 12px;
  width: 100%;
}
#registerDonor .request-blood-form-main-box {
  background: #ffffffe0;
  padding: 6% 6% 3% 8%;
  clip-path: polygon(814.086px 0.5px, 1050.5px 160.754px, 1050.5px 765.5px, 0.5px 765.5px, 0.5px 0.5px, 788.086px -5.5px);
  position: relative;
}
#registerDonor .submit-box{
  justify-content: start;
  position: relative;
  /* right: 50px; */
  cursor: pointer;
}
#registerDonor .submit-box .submit p {
  position: relative;
}
/* #registerDonor .submit-box .submit p:before {
  content: '';
  border: 1px solid #fff;
  width: 95%;
  height: 85%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 1;
}
#registerDonor .submit-box .submit p:after {
  width: 45px;
  height: 100%;
  line-height: 45px;
  content: '\f061';
  border-radius: 0;
  font-family: 'FontAwesome';
  text-align: center;
  background: var(--brown);
  color: #fff;
  font-size: 22px;
} */


#registerDonor .donor-btn.button-box {
  width: fit-content;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
#registerDonor .donor-btn.button-box .btn-text {
  background: var(--brown);
  color: #fff;
  font: 500 15px / 15px var(--h3-font);
  padding: 6px 6px;
  position: relative;
  z-index: 2;
}
#registerDonor .donor-btn.button-box:hover .btn-text, #registerDonor .donor-btn.button-box:hover .btn-text input {
  background: var(--black) !important;
  color: var(--white) !important;
}
#registerDonor .donor-btn .button-box .btn-text:after {
  content: '';
  border: 1px solid #fff;
  width: 95%;
  height: 85%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
#registerDonor .btn-text-after-box {
  content: '';
  border: 1px solid #fff;
  width: 95%;
  height: 85%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}
#registerDonor .donor-btn.button-box:hover input:hover {
  background: #000;
}
#registerDonor .submit input {
  border: none;
  padding: 8px 20px;
  position: relative;
  z-index: 3;
  background: var(--brown);
  color: #fff;
}
#registerDonor .button-box .btn-icon {
  top: 0px;
  padding: 0;
  height: 43px;
  width: 40px;
  line-height: 40px;
  text-align: center;
}
#registerDonor .button-box .btn-icon:after {
  width: 85%;
  height: 87%;
}
#registerDonor .blood-svg-img {
  position: absolute;
  width: fit-content;
  top: 10px;
  left: 3%;
  bottom: 10px;
}
#registerDonor .blood-svg-img svg{
  height: 100%;
}
#registerDonor label {
  font-size: 14px;
  line-height: 20px;
  color: #222222;
  width: 100%;
  font-weight: 600;
  font-family: var(--pri-font);
  align-self: center;
}
#registerDonor span.wpcf7-list-item.first {
  margin: 0px 40px 0px 0px;
}
#registerDonor .slick-track{
  display: grid;
  text-align: end;
}
#registerDonor .slick-list.draggable {
  height: 920px !important;
  padding: 0px 0px !important;
}
#registerDonor .slick-vertical .slick-slide {
  display: block;
  height: auto;
  border-radius: 15px;
  border: 1px solid transparent;
  width: 270px !important;
  text-align: start;
}
#registerDonor .slick-dotted.slick-slider{
  margin: 0px !important;
  position: relative;
  top: -55px !important;
}
#registerDonor .slick-track{
  left: 50px !important;
}
#registerDonor .slick-dots {
  position: absolute;
  display: grid;
  top: 50%;
  right: 0px;
  height: fit-content;
  width: max-content;
  list-style: none;
  bottom: 0;
  margin: 0 auto;
}
#registerDonor .slick-dots li {
  position: relative;
  width: 10px;
  height: 10px;
  margin: 5px;
  padding: 0;
  cursor: pointer;
}
#registerDonor .slick-dots li button{
  font-size: 0;
  line-height: 0;
  display: block;
  width: 14px;
  height: 14px;
  padding: 5px;
  cursor: pointer;
  color: #f01c1c;
  border: 0;
  outline: none;
  background: #a4121461;
}
#registerDonor .slick-dots .slick-active button {
  background: var(--red);
}
#registerDonor .slick-dots .slick-active button{
  background: var(--red);
}
.donors-slider-outer-box{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.featured-carousel-content-box{
  position: relative;
  left: 30px;
}
#registerDonor .slick-track {
  position: relative;
  top: -70px;
}
.featured-carousel-title,.featured-carousel-content-box img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.featured-carousel-content-box.slick-current.slick-active{
  position: relative;
  margin: 10px 0px !important;
  /* height: 350px !important; */
}

/* .featured-carousel-content-box.slick-active:nth-child(1),.featured-carousel-content-box.slick-active:nth-child(1) .featured-carousel-title{
  height: 350px;
} */
.featured-carousel-content-box.slick-current.slick-active:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #fff;
  background: transparent;
  transition: all 0.6s ease 0s;
  z-index: 1;
  width: 94%;
  height: 92%;
}
.featured-carousel-content-box.slick-current.slick-active:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--red);
  opacity: 0.4;
  transition: all 0.6s ease 0s;
  z-index: 1;
  width: 100%;
  height: 100%;
}


/* testimonial */
#testimonial .heading-box h5{
  color: var(--red);
}
#testimonial .heading-box p{
  font: normal normal normal 14px/25px var(--pri-font);
}
.testimonial-lft-box h2 {
  font: 900 50px / 60px var(--h3-font);
}
.testimonial-lft-box svg{
  width: 100px;
  margin: 0px 0px 30px 0px;
}
.testimonial-client-image {
  width: 65px;
  height: 65px;
}
.testimonial-client-image img {
  width: 100% !important;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--red);
  padding: 3px;
}
.testimonial-title-box {
  color: #000;
  font: normal normal 600 17px / 20px var(--pri-font);
}
.our-testimonial-box .swiper-horizontal {
  margin-left: 2%;
}
.our-testimonial-box {
  padding: 8% 0px;
}
.swiper-pagination.owl-dots{
  position: unset !important;
}
.testimonial-content-box {
  padding: 40px 40px;
  background: var(--white);
  opacity: 1; 
  border: 1px solid var(--red);
}
.testimonial-para-content-box{
  font: normal normal normal 14px/22px var(--pri-font);
}
.testimonial-content-main-box .quote-img {
  position: absolute;
  right: 16px;
  top: 30px;
}
.testimonial-content-main-box:hover .testimonial-title-box{
  color: var(--red);
}
#testimonial .swiper {
  width: 100%;
  height: 100%;
  overflow: visible;
}
#testimonial .swiper-slide {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 12px;
  transition: transform 0.3s ease, z-index 0.3s ease;
  position: relative;
}
#testimonial .swiper-slide.swiper-slide-next{
  left: -4%;
}
#testimonial .swiper-slide-active {
  /* z-index: 3; */
  transform: scale(1.05);
  margin-left: 4%;
}
#testimonial .swiper-slide-active .testimonial-content-box{
  background: var(--brown);
  color: #fff;
  border: none;
  z-index: 3;
}
#testimonial .swiper-slide-active .testimonial-client-image img{
  border: 1px solid #fff;
}
#testimonial .swiper-slide-active .testimonial-title-box{
  color: #fff;
}
#testimonial .swiper-slide-next {
  z-index: 2;
  transform: scale(0.95);
}
#testimonial .swiper-slide-prev {
  z-index: 1;
  transform: scale(0.95);
}
#testimonial .swiper-slide-active {
  z-index: 2 !important;
}
#testimonial .swiper-slide-next {
  z-index: 1 !important;
}
#testimonial .swiper-slide-active .testimonial-content-box:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #fff;
  background: transparent;
  transition: all 0.6s ease 0s;
  z-index: -1;
  width: 95%;
  height: 95%;
}
#testimonial .swiper-pagination-bullet-active,#partners .swiper-pagination-bullet-active{
  background: var(--red) !important;
}
#testimonial .swiper-pagination-bullet,#partners .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  border-radius: 0px;
  border: 1px solid var(--red);
  background: transparent;
  opacity: 1;
}
#testimonial .swiper-slide-active .testi-rating i{
  font-size: 25px;
}
#testimonial .testi-rating i{
  font-size: 20px;
  color: #FFE836;
}

/* blood request */
#requestForm .get-box p{
  display: flex;
  justify-content: space-between;
}
#requestForm .request-blood-form-overlay {
  width: 100%;
  position: absolute;
  height: 100%;
  opacity: 0.2;
  background: var(--red);
  top: 0;
  left: 0;
  z-index: 0;
}
#requestForm label {
  font-size: 15px;
  line-height: 20px;
  color: #222222;
  width: 50%;
  font-weight: 300;
  font-family: var(--h3-font);
  align-self: center;
}
#requestForm .notes-label.head-label{
  width: 20%;
}
#requestForm .get-box .wpcf7-form-control-wrap{
  width: 100%;
}
#requestForm .get-box p input[type="text"], #requestForm .get-box p input[type="tel"], #requestForm .get-box p input[type="email"], #requestForm .get-box p input[type="number"], #requestForm .get-box p input[type="date"], #requestForm .get-box p input[type="phone"], #requestForm .get-box p input[type="password"], #requestForm .get-box p textarea{
  box-shadow: 0px 0px 4px 0px #00000040 inset;
  border: none;
  background: #fff;
  padding: 6px;
  width: 100%;
}
#requestForm .request-blood-form-main-box {
  background: #ffffffe0;
  padding: 6% 6% 3% 8%;
  clip-path: polygon(814.086px 0.5px, 1050.5px 160.754px, 1050.5px 765.5px, 0.5px 765.5px, 0.5px 0.5px, 788.086px -5.5px);
  position: relative;
}
#requestForm .submit-box{
  justify-content: end;
  display: flex;
  cursor: pointer;
}
#requestForm .donor-btn.button-box {
  width: fit-content;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
#requestForm .donor-btn.button-box .btn-text {
  background: var(--brown);
  color: #fff;
  font: 500 15px / 15px var(--h3-font);
  padding: 6px 6px;
  position: relative;
  z-index: 2;
}
#requestForm .donor-btn.button-box:hover .btn-text, #requestForm .donor-btn.button-box:hover .btn-text input {
  background: var(--black) !important;
  color: var(--white) !important;
}
#requestForm .donor-btn .button-box .btn-text:after {
  content: '';
  border: 1px solid #fff;
  width: 95%;
  height: 85%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
#requestForm .btn-text-after-box {
  content: '';
  border: 1px solid #fff;
  width: 95%;
  height: 85%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 0;
}
#requestForm .donor-btn.button-box:hover input:hover {
  background: #000;
}
#requestForm .submit input {
  border: none;
  padding: 8px 20px;
  position: relative;
  z-index: 3;
  background: var(--brown);
  color: #fff;
}
#requestForm .button-box .btn-icon {
  top: 0px;
  padding: 0;
  height: 43px;
  width: 40px;
  line-height: 40px;
  text-align: center;
}
#requestForm .button-box .btn-icon:after {
  width: 85%;
  height: 87%;
}
#requestForm .blood-svg-img {
  position: absolute;
  width: fit-content;
  top: 10px;
  left: 3%;
  bottom: 10px;
}
#requestForm .blood-svg-img svg{
  height: 100%;
}
/* fact-donation */
.fact-donation-arrow-box i {
  color: var(--red);
  transform: rotate(-45deg);
}
.fact-donation-arrow-box a {
  background: #ffffff;
  width: 35px;
  height: 35px;
  line-height: 35px;
  padding: 7px 10px;
  border-radius: 8px;
}
.fact-donation-arrow-box {
  opacity: 0;
  transition: 0.5s ease-in-out;
}
.fact-donation-head-image-box:hover .fact-donation-arrow-box{
  opacity: 1;
}
.fact-donation-img-box{
  width: 80px;
  height: 80px;
  margin: auto;
}
.fact-donation-img-box svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.fact-donation-inner-box .fact-text{
  font: 500 16px/30px var(--h3-font);
}
.fact-donation-outer-box {
  position: relative;
  padding: 30px 20px;
  background: #fff;
  z-index: 1;
}
.fact-donation-outer-box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid var(--red);
  background: transparent;
  transition: all 0.6s ease 0s;
  z-index: 0;
  width: 100%;
  height: 100%;
}
.fact-donation-head-image-box:hover .fact-donation-outer-box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #fff;
  background: transparent;
  transition: all 0.6s ease 0s;
  z-index: 1;
  width: 90%;
  height: 90%;
}
.fact-donation-head-image-box:hover .fact-donation-outer-box:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: var(--red);
  /* opacity: 0.4; */
  transition: all 0.6s ease 0s;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.fact-donation-head-image-box:hover .fact-donation-img-box svg path{
  fill: #fff;
}
.fact-donation-head-image-box:hover .fact-donation-content-box h4,.fact-donation-head-image-box:hover .fact-donation-content-box p,.fact-donation-head-image-box:hover .fact-donation-inner-boxed .fact-text{
  color: #fff;
}
/* faq */
#our_faq .accordion-button:not(.collapsed){
  border: none;
  background: var(--red);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0px;
  font: 400 18px / 28px var(--h3-font);
}
#our_faq .accordion-body {
  font: 300 16px / 28px var(--h3-font);
  padding: 15px 10px;
}
#our_faq .accordion-item {
  border: none;
  border-radius: 0px;
  margin-bottom: 20px;
  position: relative;
  z-index: 0;
}
#our_faq .accordion-button {
  border-radius: 0;
  padding: 12px 22px;
  color: #000;
  font: 400 18px / 28px var(--h3-font);
  border: none !important;
  box-shadow: 0px 0px 5px 2px #0000002e;
}
#our_faq .accordion-button.collapsed::after {
  transform: rotate(180deg);
  background: var(--black);
}
#our_faq .accordion-button::after {
  content: '';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 14px;
  background-image: unset !important;
  height: 20px !important;
  width: 30px !important;
  transition: unset !important;
  background: var(--white);
  clip-path: polygon(50% 40%, 0% 90%, 100% 90%);
  transform: rotate(0deg);
  position: relative;
  top: 5px;
}
#our_faq .accordion-button:not(.collapsed)::after{
  position: relative;
  top: 0px;
}
.faq-image-right-box .faq-image-right-content-box{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: fit-content;
  width: fit-content;
  text-align: center;
  z-index: 1;
}
.faq-image-right-box:before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--red);
  transition: all 0.6s ease 0s;
  z-index: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}
.faq-image-right-box:after,.faq-contact-right-content-box:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #fff;
  background: transparent;
  transition: all 0.6s ease 0s;
  width: 90%;
  height: 90%;
}
.faq-image-right-box:after{
  z-index: 0;
}
.faq-contact-right-content-box:after{
  z-index: -1;
}
.faq-image-right-content-box p{
  color: #fff;
  font: 300 22px / 25px var(--h3-font);
}
.faq-image-right-content-box h2 {
  font: 600 48px / 65px var(--h3-font);
  color: #fff;
}
.faq-contact-right-content-box {
  background: var(--red);
  padding: 40px;
  text-align: center;
}
.faq-contact-right-content-box svg {
  animation: tada 3s linear infinite;
}
.faq-contact-right-content-box h6 {
  font: 400 20px / 22px var(--h3-font);
  color: #fff;
}
.faq-contact-right-content-box p {
  color: #fff;
  font: 400 16px / 35px var(--h3-font);
}
/* partners */
.patner-image img {
  border: 1px solid var(--red);
  height: 100%;
  object-fit: contain;
  background: #fff;
  width: auto;
}
#partners .swiper {
  width: 100%;
  height: 100%;
}
#partners .swiper-slide {
  text-align: center;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
}
#partners .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#partners .swiper-pagination{
  position: unset;
  padding-top: 30px;
}
/* team */
.team-image-outer img {
  border-radius: 50%;
  position: relative;
  z-index: 1;
}
.team-title{
  color: #000;
}
.teambox:hover .team-title{
  color: var(--red);
}
.team-image{
  position: relative;
  padding: 15px;
  border-radius: 50%;
}
.team-image::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  background: var(--red);
  transition: all 0.8s ease;
  -moz-transition: all 0.8s ease;
  -webkit-transition: all 0.8s ease;
  z-index: 0;
}
.team-content p{
  font: 400 14px/20px var(--h3-font);
}
.teambox{
  margin: 1% 2px;
}
.teambox:hover .team-image::after {
  height: 100%;
}
.team-image-outer {
  box-shadow: 0px 0px 5px 0px #acaaaa;
  background: #fff;
}
.team-designation-box{
  padding: 15px;
  box-shadow: 0px 0px 5px 0px #acaaaa;
  justify-content: space-between;
}
/* blog */
@keyframes shine{
  100% {
    left: 125%;
  }
}
.blog-image-box{
  margin: 0px 3px;
  overflow: hidden;
  border: 2px solid #070603;
}
.blog-contents-box {
  padding: 15px 15px 15px 15px;
}
.blog-contents-box h6 a{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.blog-contents-box p{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.blog-img-box{
  overflow: hidden;
}
.blog-img-box .post-img:after{
  position: absolute;
  top: 0;
  left: -86%;
  z-index: 2;
  display: block;
  content: '';
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.blog-image-box:hover .blog-img-box .post-img{
  transform: scale(1.07);
  overflow: visible;
  transition: 0.5s ease-in-out;
  border-radius: 10px;
}
.blog-image-box:hover .blog-img-box .post-img:after{
  -webkit-animation: shine .75s;
  animation: shine 2s;
}
@keyframes shine{
  100% {
    left: 125%;
  }
}
.blog-img-box .post-img{
  width: 100%;
  height: 230px;
  position: relative;
}
.blog-img-box .post-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* border-radius: 10px 10px 0px 0px; */
}
.blog-image-box:hover h6,.blog-image-box:hover p{
  color: var(--red);
}
.blog-admin-content-box{
  width: 95%;
  justify-content: space-between;
}
.blog-arrow-box{
  opacity: 0;
  transition: 0.5s ease-in-out;
}
.blog-image-box:hover .blog-arrow-box{
  opacity: 1;
}
.blog-arrow-box i{
  color: #fff;
  transform: rotate(-45deg);
}
.blog-arrow-box a {
  background: var(--red);
  width: 35px;
  height: 35px;
  line-height: 35px;
  padding: 7px 10px;
  border-radius: 8px;
}
.blog-image-box:hover{
  border: 2px solid var(--red);
  transition: 0.5s ease-in-out;
}
/* newsletter */
.newsletter-outer-box {
  padding: 40px 50px;
  position: relative;
  z-index: 1;
  width: 80%;
  margin: auto;
}
.newsletter-outer-box::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border: 1px solid #fff;
  background: transparent;
  transition: all 0.6s ease 0s;
  z-index: -1;
  width: 97%;
  height: 80%;
}
.newsletter-outer-box .newsletter-cons-form-box label {
  color: #fff;
  font: 400 14px / 14px var(--pri-font);
  text-align: start;
}
.newsletter-cons-form-box .submit-box .submit {
  position: relative;
}
.newsletter-social-icons span{
  font: 600 16px / 20px var(--pri-font);
  color: #fff;
}
.newsletter-social-icons .social_icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}
.newsletter-social-icons i{
  color: #fff;
}
#newsletter .heading-box h6{
  color: var(--white);
}
#newsletter .heading-box h3{
  color: var(--white);
}
.newsletter-head-content-box h3, .newsletter-head-content-box p{
  color: #000000;
}
.newsletter-head-content-box p{
  width: 80%;
}
#newsletter .newsletter-head-form-box .wpcf7 input[type="email"] {
  padding: 12px 50px;
  border: none;
  border-radius: 0px;
  background-color: #fff !important;
  color: #000 !important;
  width: 100% !important;
  margin: 10px auto !important;
}
#newsletter .wpcf7-form-control-wrap{
  font: 400 14px / 20px var(--pri-font);
  color: #000;
}
.newsletter-head-form-box form p:nth-child(3){
  align-self: center;
  position: relative;
}
#newsletter input[type="submit"] {
  background: var(--red);
  border-radius: 0;
  color: #fff;
  padding: 12px 25px;
  font: 400 16px / 20px var(--pri-font);
  width: fit-content;
  border: none;
}
#newsletter input[type="submit"]:hover{
  background: var(--black);
  color: #fff;
}
#newsletter form{
  display: flex;
  justify-content: space-around;
}
#newsletter .wpcf7 form.invalid .wpcf7-response-output{
  color: #fff;
}
.newsletter-head-form-box form p:nth-child(2){
  width: 80%;
  margin-right: 10px;
}
#newsletter .wpcf7-not-valid-tip{
  position: absolute;
  /* top: 10px; */
}
#newsletter .newsletter-head-form-box .wpcf7 form .wpcf7-response-output{
  position: absolute;
  width: fit-content;
  color: #fff;
  bottom: 4px;
  top: unset;
  font-size: 12px;
  left: 20px;
  margin: 0px 6px;
  padding: 0px 2px;
  bottom: -20px;
}
@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
    transform: translate3d(100%, 0, 0) skewX(-30deg);
    opacity: 0;
  }
  60% {
      -webkit-transform: skewX(20deg);
      transform: skewX(20deg);
      opacity: 1;
  }
  80% {
      -webkit-transform: skewX(-5deg);
      transform: skewX(-5deg);
  }
  100% {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
}

/* quotation form */
.quotation-form-box{
  box-shadow: 0px 1px 5px 0px #b1b1b1;
  padding: 50px;
  border-radius: 0px;
}
.quotation-form-box .head-label {
  font-size: 22px !important;
  line-height: 35px;
  font-weight: 600 !important; 
}
.quotation-form-box .waste-box label {
  font-weight: 500;
  font-size: 18px;
  line-height: 35px;
}
.quotation-form-box input[type="text"], .quotation-form-box input[type="tel"], .quotation-form-box input[type="email"], .quotation-form-box input[type="number"], .quotation-form-box input[type="date"], .quotation-form-box input[type="phone"], .quotation-form-box input[type="password"], .quotation-form-box textarea, .quotation-form-box select {
  font-size: 16px !important;
  padding: 14px 18px !important;
  width: 100%;
  border-radius: 0px;
  line-height: 16px;
  font-family: var(--pri-font);
  border: none;
  box-shadow: 0px 1px 3px 0px #999999;
  background: #fff;
}
.quotation-form-box form .submit p input[type="submit"] {
  font: 500 16px / 20px var(--pri-font);
  color: var(--white);
  background: var(--red);
  border: none;
  border-radius: 50px 0px 0px 50px;
  padding: 10px 25px;
  width: max-content;
}
.quotation-form-box .submit-box .submit p:after {
  position: absolute;
  background: #000;
  color: #fff;
  width: 45px;
  height: 100%;
  line-height: 40px;
  right: -50px;
  top: 0;
  content: '\f061';
  border-radius: 0px 50px 50px 0px;
  font-family: 'FontAwesome';
  text-align: center;
}
.quotation-form-box form .submit p input[type="submit"]:hover {
  background: var(--black);
  color: #fff;
}
.quotation-form-box .submit-box:hover .submit p:after{
  background: var(--red);
  color: #fff;
}
.single-services-img-box {
  height: 100%;
}
.single-services-img-box img{
  height: 100%;
  object-fit: cover;
}




/* single service */
#single-Case-studies .single-case-studies-title a{
  font: 700 24px / 24px var(--h3-font);
}
#single-Case-studies .case-studies-image{
  height: 430px;
}
#single-Case-studies .case-studies-para p, #single-Case-studies .services-list-items li,#single-Case-studies .case-studies-para {
  font: 300 15px/25px var(--pri-font);
  color: #000;
}
#single-Case-studies .case-studies-image img{
  height: 100%;
  width: 100%;
  object-fit: cover;
}
#single-Case-studies .nav-pills .nav-link {
  color: #fff;
  padding: 15px 6px;
  font: 500 16px / 25px var(--pri-font);
  border-radius: 6px;
  box-shadow: 0px 0px 6px 0px #a2a2a2;
  width: 90%;
  text-align: center;
  background-color: var(--black);
}
#single-Case-studies .nav-pills .nav-link.active {
  background-color: var(--red);
}
#single-Case-studies .nav-pills .nav-item{
  width: 100%;
}
#single-Case-studies .top_title {
    font: normal normal 600 26px/30px var(--pri-font);
    color: var(--black);
}
#single-Case-studies .about_me p span,#single-Case-studies .about_me p{
    color: #000;
}
#single-Case-studies .about_me{
  box-shadow: rgb(0 0 0 / 10%) 0px 0px 12px;
  background-color: #fff;
  border-radius: 25px;
  padding: 40px;
  margin-right: 10%;
}
.sidebar4 .add-title i{
  font-size: 20px;
}
#case-studies-page .heading-box{
  display: none;
}
.single-post-content {
  font: 400 16px / 25px var(--pri-font);
}
.case-studies-list-items{
  padding-top: 20px;
  list-style-type: decimal;
  padding-left: 18px;
}
.case-studies-list-items li,.case-studies-para{
  font: normal normal normal 14px / 25px var(--pri-font);
  color: var(--black);
}
.single-post-content li {
  font: 600 15px / 30px var(--pri-font);
}
.single-case-studies-img-box , .single-case-studies-img-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}



/* ---Single Post Page----- */
.single-post-img img{
  height: 100%;
  width: 100%;
  border-radius: 10px;
}
#single-post .single-author-image{
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
#single-post .author-name{
  font: normal normal 600 14px / 24px var(--pri-font);
  text-transform: capitalize;
  color: #000000;
}
.meta-heading{
  font: 500 15px / 16px var(--pri-font);
  letter-spacing: 0px;
  color: #000000;
}
.social-share-icon-main{
  position: absolute;
  display: flex;
  right: 0;
  text-align: center;
  gap: 5px;
  opacity: 0;
}
.social-share-icon-main a{
  background: #000000;
  height: 25px;
  width: 25px;
  line-height: 25px;
  text-align: center;
  color: #fff;
  border-radius: 0;
  font-size: 12px;
  margin: 0 auto;
}
.social-share-icon-main a:hover{
  background: var(--red);
  color: #fff;
}
.share_icon:hover .social-share-icon-main{
  opacity: 1;
  cursor: pointer;
}
.blog-que{
  font: 600 20px / 26px var(--pri-font);;
  letter-spacing: 0px;
  color: #000000;
}
.single-blog-content p{
  font: 400 15px / 28px var(--pri-font);
  color: #000000;
  opacity: 0.7;
}
#single-post hr:not([size]) {
    height: 1px;
    background-color: #000;
    opacity: inherit;
}

#single-post .comment-respond{
  width: 100%;
  max-width: 40%;
  height: 100%;
  order: 1;
  background: #fff;
  box-shadow: 0px 0px 5px 0px #c1c1c1;
  padding: 20px;
  border-radius: 0px;
}
#single-post #commentform {
  display: flex;
  flex-wrap: wrap;
}
.comment-list{
  list-style-type: none;
  width: 55%;
  order: 2;
}
#comments h2.comments-title {
  display: none;
}
#single-post .comment-form-url,.comment-notes{
  display: none;
}
#single-post .comment-form-author{
  order: 2;
  width: 100%;
  display: grid;
}
#single-post .comment-form-email{
  order: 3;
  width: 100%;
  display: grid;
}
#single-post .comment-form-comment{
  order: 4;
  width: 100%;
  display: grid;
}
/*------------------ Comments BOX ------------------*/
#comments {
  float: left;
  width: 100%;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
}
#comments h2.comments-title {
  font-size: 20px;
  font-weight: bold;
}
#comments h3.comment-reply-title {
  font-size: 20px;
  font-weight: bold;
  clear: both;
}
#comments input[type="text"], #comments input[type="email"], #comments textarea {
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid #2F363C;
  border-radius: 6px;
  font-family: var(--pri-font);
  width: 100%;
}
#comments textarea {
  height: 120px;
}
#comments input[type="submit"].submit {
  border-radius: 0px;
  background: var(--red);
  font: 400 14px / 20px var(--pri-font);
  letter-spacing: 0px;
  color: #FFFFFF;
  padding: 10px 18px;
  border: none;
}
#comments input[type="submit"].submit:hover{
background-color: var(--red);
}
#reply-title{
position: relative;
}
#comments a time {
  color: black;
  font-weight: bold;
  font-size: 12px;
}
#comments .comment-metadata {
  width: 90%;
  float: left;
  padding: 1% 0 0 0;
}
#comments .comment-content {
  width: 90%;
  text-align: left;
  margin-left: 7%;
}
.comment-awaiting-moderation, #comments .says{
  display: none !important;
}
#comments h2#reply-title {
  margin-bottom: 15px;
  font: normal normal 600 24px / 28px var(--pri-font);;
  letter-spacing: 0px;
  color: #2F363C;
}
#single-post-page #commentform{
  display: flex;
  flex-wrap: wrap;
}
.comment-form-email{
  order: 1;
}
.comment-notes{
  order: 2;
}
.comment-form-author{
  order: 3;
}
.comment-form-comment{
  order: 4;
}
.comment-form-cookies-consent{
  order: 5;
  display: flex;
  align-items: start;
}
input#wp-comment-cookies-consent{
  margin-right: 10px;
  margin-top: 6px;
}
.form-submit{
  order: 6;
  width: fit-content;
  position: relative;
}
.form-submit:after{
  /* position: absolute;
  background: #000;
  color: #fff;
  width: 45px;
  height: 100%;
  line-height: 37px;
  right: -50px;
  top: 0;
  content: '\f061';
  border-radius: 0px 50px 50px 0px;
  font-family: 'FontAwesome';
  text-align: center; */
}
.comment-form-url, .reply>a i{
  display: none;
}
.comment-respond label{
  font: 500 14px / 20px var(--pri-font);;
  letter-spacing: 0px;
  color: #2F363C;
}
.comment-author.vcard img{
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.comment-author.vcard{
  display: flex;
  align-items: center;
  gap: 10px;
}
cite a{
  font: 500 20px / 28px var(--pri-font);;
  letter-spacing: 0px;
  color: #000;
  text-transform: capitalize;
}
.reply>a{
  font: 500 14px / 26px var(--pri-font);;
  letter-spacing: 0px;
  color: #000000;
}
.comment-list li{
  background: #fff;
  box-shadow: 0px 0px 5px 0px #c1c1c1;
  padding: 20px;
  border-radius: 0px;
}

#newsletter .newsletter-head-form-box .wpcf7 form.invalid .wpcf7-response-output {
  bottom: -22px;
  font-size: 12px;
  width: fit-content;
  left: unset;
  padding: 2px;
  line-height: 13px;
  margin: auto;
  right: 0;
  top: unset;
  text-align: center;
}
#newsletter .newsletter-cons-form-box .wpcf7 form .wpcf7-response-output{
  bottom: 0;
  font-size: 12px;
  width: fit-content;
  left: 30px;
  padding: 2px;
  line-height: 11px;
  margin: 0 0px;
  right: 0;
  position: absolute;
  top: unset;
}
.wpcf7 form .wpcf7-response-output {
  margin: 10px 0px;
  padding: 4px;
  border: 2px solid #00a0d2;
  font-size: 12px;
  width: fit-content;
  text-align: center;
  display: flex;
}
.wpcf7-not-valid-tip{
  font-size: 12px;
  line-height: 14px;
}


/* media css */

@media screen and (max-width: 1400px) and (max-width: 1500px){
	.button.owl-prev{
		left: -60px;
	}
	.button.owl-next{
		right: -60px;
	}
}
@media screen and (max-width: 1400px){
  h1 {
    font: 600 65px / 90px var(--h3-font);
  }
  .slider-para {
    width: 65%;
  }
  .header_navigation_box:after {
    content: '';
    background: var(--red);
    inset: 0 74% 0 0;
  }
  .faq-image-right-content-box p {
    color: #fff;
    font: 300 20px / 25px var(--h3-font); 
  }
  .our-work-cont-box {
    padding: 0 10px;
  }
}
@media screen and (min-width:1200px) and (max-width: 1600px){
  #registerDonor .slick-list.draggable {
    height: 870px !important;
  }
  #registerDonor .slick-vertical .slick-slide{
    width: 250px !important;
  }
  .fact-donation-outer-box {
    padding: 30px 15px;
  }
  .fact-donation-content-box h4 {
    font: 500 18px / 27px var(--h3-font);
  }
  .fact-donation-content-box p {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}
@media screen and (min-width:1200px) and (max-width: 1399px){
  .about-inner-title {
    color: var(--white);
    font: 700 28px / 37px var(--h3-font);
  }
  .about-inner-paragraph {
    font: 500 14px / 22px var(--h3-font);
  }
  #Upcoming_event button.owl-next {
    position: absolute;
    right: -40px;
    left: unset;    
  }
  #Upcoming_event button.owl-prev {
    position: absolute;
    left: -40px;
    right: unset;
  }
}
@media screen and (max-width: 1199px){
  #testimonial .swiper-slide-active .testi-rating i {
    font-size: 16px;
  }  
  .testimonial-lft-box h2 {
    font: 900 45px / 55px var(--h3-font);
  }
  .testimonial-content-box {
    padding: 22px 22px;
  }
  .testimonial-lft-box svg {
    margin: 0px 0px 0px 0px;
  }
  .title-box {
    height: 250px;
  }
  .event-img {
    height: 450px;
  }
  .event-meta-date a {
    font: 300 14px / 20px var(--h3-font);
  }
  .event-meta-date span svg {
    width: 15px;
    height: 15px;
  }
  #requestForm label {
    font-size: 14px;
  }
  #newsletter{
    top: 0px;
  }
  .newsletter-outer-box{
    width: 100%;
    padding: 30px 20px;
  }
  .newsletter-outer-box:after{
    height: 95%;
  }
  .main-navigation #menu-primary-menu a{
    padding: 15px 10px;
    font: 400 14px / 14px var(--h3-font);
  }
  .button-box .btn-text{
    padding: 12px 18px;
  }
  .header_navigation_box:after{
    inset: 0 75% 0 0;
  }
  #header_navigation .menu-item-has-children:after{
    right: 13px;
  }
  h1 {
    font: 600 60px / 70px var(--h3-font);
  }
  h3, h3 a {
    font: 600 27px / 37px var(--pri-font);
    color: #000000;
  }
  .slider-right-img {
    height: 450px;
  }
  .about-counter-box{
    padding: 15px 15px
  }
  .about-inner-title {
    font: 700 26px / 36px var(--h3-font);
  }
  .about-inner-paragraph {
    font: 500 13px / 20px var(--h3-font);
  }
  p.about-count-text {
    font: 300 16px / 25px var(--h3-font);
  }
  .features-content-box h6 {
    font: 500 15px / 20px var(--h3-font);
  }
  .features-content-box p {
    font: 300 13px / 25px var(--h3-font);
  }
  .features-description-box .features-description-text {
    font: 400 20px / 25px var(--pri-font);
  }
  .desc-counter-box li {
    font: 300 16px / 35px var(--pri-font);
  }
  div#footer{
    margin-top: 0;
  }
  .footer1 .widget_media_image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
}
@media screen and (min-width:992px) and (max-width: 1199px) {
  #testimonial .testi-rating i {
    font-size: 15px;
  }
  #testimonial .swiper-slide.swiper-slide-next {
    left: 0%;
  }
  .featured-carousel-content-box {
    position: relative;
    left: 0px;
  }
  #registerDonor .slick-track {
    left: 0px !important;
  }
  #registerDonor .slick-vertical .slick-slide {
    /* width: 790px !important; */
  }
  #registerDonor .slick-list.draggable {
    height: 845px !important;
  }
}
@media screen and (min-width:768px) and (max-width: 991px){
  #registerDonor .slick-list.draggable {
    height: 960px !important;
  }
  #registerDonor .slick-track ,.featured-carousel-content-box{
    left: 0px !important;
  }
  #registerDonor .slick-vertical .slick-slide{
    width: 250px !important;
  }
  #testimonial .swiper-slide.swiper-slide-next {
    left: -1%;
  }
  .error-img {
    width: auto;
    margin: auto;
  }
}
@media screen and (max-width: 991px){     
  
  #registerDonor .slick-dotted.slick-slider{
    top: 0 !important;
  }
  .event-meta-date a {
    font: 300 14px / 20px var(--h3-font);
  }
  .event-meta-date span svg {
    width: 15px;
    height: 15px;
  }
  .event-img {
    height: 400px;
  }
  #requestForm .request-blood-form-main-box{
    clip-path: none;
  }
  #requestForm{
    padding: 8% 0px !important;
  }
  #requestForm .notes-label.head-label {
    width: 50%;
  }
  .slider-right-img {
    height: 400px;
  }
  .eligibility-right-box h3 ,.eligibility-left-box h3{
    font: 600 17px / 25px var(--pri-font);
  }  
  h1 {
    font: 600 45px / 60px var(--h3-font);
    width: 100%;
  }
  .Slider-left-box h4 {
    font: 500 20px / 35px var(--h3-font);
    width: 100%;
  }
  .topbar-social-box{
    width: fit-content;
    margin: 10px auto 0 auto;
  }
  .header_navigation_box:after {
    background: var(--red);
    inset: 0 65% 0 0;
  }
  .header-main-box{
    text-align: center;
  }
  .About-image {
    width: fit-content;
    height: 300px;
  }
  .features-inner-boxed {
    padding: 20px 0px;
    height: unset;
  }
  .eligibility-content-box span svg {
    width: 15px;
    height: 15px;
  }
  .faq-image-right-box .faq-image-right-content-box{
    padding: 0px 20px;
  }
  .faq-image-right-content-box h2 {
    font: 600 45px / 65px var(--h3-font);
    color: #fff;
  }
  #blog{
    padding-bottom: 0;
  }
  .title-box h1 {
    color: #fff;
    font-size: 30px;
    line-height: 40px;
  }
  .banner-heading{
    /* padding-top: 5%; */
  }
  .copyright-menus-box{
    width: fit-content;
    margin: auto;
  }
  .footer1 .widget_media_image img {
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
  }
  .fact-donation-content-box h4 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }  
  .testimonial-lft-box svg {
    margin: 0px 0px 0px 0px;
    height: 100px;
  }
  #single-event .single-img {
    height: 200px;
  }
  .content-details-main{
    margin-top: 0px;
    margin-left: 4px;
  }
}

@media screen and (min-width: 575px) and (max-width:767px){
  .faq-image{
    display: flex;
    justify-content: space-between;
  }
  .faq-contact-right-content-box {
    width: 250px;
    margin: 0px !important;
  }
  .faq-image-right-box.position-relative {
    width: 250px;
  }
  .faq-image-right-content-box h2 {
    font: 600 38px / 55px var(--h3-font);
  }
  .faq-image-right-content-box p {
    font: 300 20px / 25px var(--h3-font);
    padding: 0 20px;
  }
}
@media screen and (max-width:767px){
  .post-meta-inner {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 5px;
    text-align: center;
  }
  #single-post .comment-respond ,.comment-list{
    max-width: 100% !important;
    width: 100%;
  }
  .comment-list li{
    margin-bottom: 12px;
  }
  #comments{
    display: block;
  }
  #registerDonor .slick-vertical .slick-slide{
    width: 360px !important;
  }
  .footer1{
    text-align: center;
  }
  .location{
    justify-content: center;
  }
  .footer-contact-box{
    margin: 0 auto;
  }
  .event-meta-date a {
    font: 300 14px / 20px var(--h3-font);
  }
  .event-meta-date span svg {
    width: 15px;
    height: 15px;
  }
  .event-img {
    height: 350px;
  }
  #our_faq .accordion-button::after{
    height: 12px !important;
    width: 20px !important;
  }
  .donors-slider-outer-box {
    position: unset;
  }
  .slick-list.draggable {
    height: 820px !important;
  }
  section {
    padding: 7% 0px;
  }
  .topbar-text,.top-social-share{
    width: fit-content;
    margin: 8px auto;
  }
  .header_navigation_box:after {
    inset: 0 58% 0 0;
  }
  .slider-box h1{
    width: 100%;
  }
  .slidemainbox-col1 {
    padding: 10% 0px !important;
  }
  .slider-right-img {
    height: 350px;
  }
  .About-image {
    width: fit-content;
    height: 300px;
    margin: auto;
  }
  .about-counter-box .row{
    gap: 20px 0px;
  }
  p.about-count-text {
    font: 300 16px / 25px var(--h3-font);
  }
  .desc-counter-box li {
    font: 300 18px / 35px var(--pri-font);
  }
  #our_faq .accordion-button {
    border-radius: 0;
    padding: 6px 10px;
    color: #000;
    font: 400 16px / 20px var(--h3-font);
  }
  #our_faq .accordion-body {
    font: 300 15px / 22px var(--h3-font);
    padding: 8px 10px;
  }
  #our_faq .accordion-button:not(.collapsed){
    padding: 8px 22px;
    font: 400 16px / 25px var(--h3-font);
  }
  .faq-image-right-content-box h2 {
    font: 600 45px / 65px var(--h3-font);
    color: #fff;
  }
  .team-content {
    width: fit-content;
    margin: auto;
  }
  .footer-copy {
    font: 300 14px / 20px var(--pri-font);
  }  
  .title-box {
    height: 200px;
  }  
  .banner-heading{
    width: 80%;
  }
  div#comments{
    padding: 0;
  }
  .footer-content .footer1 p{
    width: 100%;
  }
  .our-work-cont-box {
    padding: 0 18px;
  }
  .our-work-cont-box h6 {
    font: 500 16px / 25px var(--pri-font);
  }
  .features-content-box p {
    font: 300 14px / 25px var(--h3-font);
  }
  .radio-box{
    text-align: center;
  }
  #registerDonor .submit-box .submit p {
    width: fit-content;
    margin: auto;
  }
  #newsletter .wpcf7-not-valid-tip{
    position: unset;
  }
  .features-content-box h6 {
    font: 500 18px / 20px var(--h3-font);
  }
  .testimonial-lft-box svg {
    margin: 0px 0px 0px 0px;
    height: 100px;
  }
  .testimonial-lft-box h2 {
    font: 900 40px / 45px var(--h3-font);
  }
  .testimonial-content-box {
    padding: 30px 30px;
  }
  #testimonial .swiper-slide {
    width: 65%;
  }
}
@media screen and (max-width:575px){  
  #testimonial .swiper-slide {
    width: 96%;
  }
  #registerDonor .slick-track{
    top: -150px;
  }
  .testimonial-para-content-box {
    font: normal normal normal 12px / 20px var(--pri-font); 
  }
  #testimonial .swiper-slide-active .testi-rating i {
    font-size: 18px;
  }
  .heading-box h3 {
    font: 600 23px / 29px var(--pri-font);
    padding-top: 3%;
  }
  .desc-counter-box li {
    font: 300 16px / 30px var(--pri-font);
  }
  .features-description-box .features-description-text {
    font: 400 18px / 20px var(--pri-font);
    padding-bottom: 10px;
  }
  #requestForm .get-box p{
    display: block;
  }
  #requestForm .blood-svg-img{
    display: none;
  }
  #requestForm .submit-box {
    justify-content: center;
    right: 20px;
  }  
  .header_navigation_box:after,#topBar:after{
    display: none;
  }
  .logo-main-box{
    background: var(--red);
  }
  .slider-box h1{
    width: 100%;
  }
  .slider-right-img {
    height: 250px;
  }
  .eligibility-left-box,.eligibility-right-box{
    width: 80%;
    margin: auto;
  }
  .eligibility-left-box h3,.eligibility-right-box h3 {
    font: 600 18px / 30px var(--pri-font);
  }
  .eligibility-content-box p {
    font: 400 16px / 22px var(--h3-font);
  }
  .eligibility-content-box span svg {
    width: 15px;
    height: 15px;
  }
  .eligibility-right-box{
    border: none;
  }


  .error-img {
    width: auto;
    margin: auto;
  }
  .banner-heading {
    /* padding-top: 20%; */
  }
  .title-box h1 {
    color: #fff;
    font-size: 20px;
    line-height: 26px;
  }
  .footer-content{
    text-align: center;
  }
  .footer-contact-box,.footer-call-box {
    margin: auto;
  }
  .footer-content .footer1 p{
    width: 90%;
    margin: auto;
  }
  .location{
    justify-content: center;
  }
  .footer2 h4, .footer3 h4 {
    padding-bottom: 4%;
    padding-top: 10%;
  }
  .footer1 .widget_media_image, .footer4 h4 {
    padding-bottom: 5%;
    padding-top: 10%;
  }
  .logo{
    width: fit-content;
    margin: auto;
  }
  .header-main-outer-box:before{
    display: none;
  }
  h1 {
    font: normal normal 800 20px / 30px var(--h3-font);
  }
}
@media screen and (max-width:480px){
  .featured-carousel-content-box {
    position: relative;
    left: 0px;
  }
  #registerDonor .slick-track {
    left: 0px !important;
  }
  #registerDonor .slick-vertical .slick-slide{
    width: 260px !important;
  }
  #registerDonor .slick-list.draggable {
    height: 620px !important;
  }
  #newsletter .newsletter-cons-form-box .wpcf7 form .wpcf7-response-output{
    bottom: -4px;
    font-size: 12px;
    width: fit-content;
    left: 0;
    padding: 2px;
    line-height: 11px;
    margin: 0 0px;
    right: 0;
    position: relative;
    top: unset;
  }
  #newsletter .newsletter-head-form-box .wpcf7 form .wpcf7-response-output {
    position: relative;
    bottom: -19px;
    top: unset;
    margin: 0 auto;
    left: 10px;
    right: 10px;
    padding: 0;
    font-size: 12px;
    line-height: 16px;
  }
  #newsletter form{
    width: 100%;
  }
  .newsletter-head-form-box form p:nth-child(3) {
    width: fit-content;
    margin: auto;
  }
  .counter-heading-box h6{
    font: 500 15px/18px var(--pri-font);
  }
  .counter-heading-box h3{
    font: 800 18px / 25px var(--h3-font);
  }
  .why-choose-icon-box {
    width: 90px;
    height: 60px;
    padding: 10px;
  }
  section {
    padding: 8% 0px;
  }
  .banner-heading {
    /* padding-top: 20%; */
  }
  #newsletter form{
    display: block;
  }
  .newsletter-head-form-box form p:nth-child(2) {
    width: 100%;
  }
  .why-choose-image {
    grid-template-rows: repeat(6, 18px);
    grid-template-columns: repeat(27, 1fr);
  }
  a.single-services-button.btn{
    padding: 12px 20px;
  }
  .slider-circle-img {
    height: 430px;
    position: relative;
    bottom: -11px;
    right: 0;
    z-index: 1;
  }
  .slider-bg-overlay-box{
    clip-path: unset;
  }
  .slider-overlay-img {
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 1;
    width: auto;
    height: auto;
  }
}
@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  
  80% {
    transform: translateX(10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  
  80% {
    transform: translateX(-10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/* tada  */
@keyframes tada{
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  10%, 20% {
      -webkit-transform: scale(0.9) rotate(-3deg);
      -ms-transform: scale(0.9) rotate(-3deg);
      transform: scale(0.9) rotate(-3deg);
  }
  30%, 50%, 70%, 90% {
      -webkit-transform: scale(1.1) rotate(3deg);
      -ms-transform: scale(1.1) rotate(3deg);
      transform: scale(1.1) rotate(3deg);
  }
  40%, 60%, 80% {
      -webkit-transform: scale(1.1) rotate(-3deg);
      -ms-transform: scale(1.1) rotate(-3deg);
      transform: scale(1.1) rotate(-3deg);
  }
  100% {
      -webkit-transform: scale(1) rotate(0);
      -ms-transform: scale(1) rotate(0);
      transform: scale(1) rotate(0);
  }
}

@keyframes bouncess{
  0% {
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  100% {
      -webkit-transform: translateY(-30px);
      transform: translateY(-15px);
  }
}


.fact-donation-head-image-box:hover::after{
  content: '';
  pointer-events: none;
  opacity: .6;
  background: radial-gradient(circle at 20% 35%, transparent 0, transparent 2px, var(--white) 3px, var(--white) 4px, transparent 4px), radial-gradient(circle at 75% 44%, transparent 0, transparent 2px, var(--white) 3px, var(--white) 4px, transparent 4px), radial-gradient(circle at 46% 52%, transparent 0, transparent 4px, var(--white) 5px, var(--white) 6px, transparent 6px), radial-gradient(circle at 33% 44%, transparent 0, transparent 4px, var(--white) 5px, var(--white) 6px, transparent 6px), radial-gradient(circle at 65% 40%, transparent 0, transparent 2px, var(--white) 3px, var(--white) 4px, transparent 4px), radial-gradient(circle at 30% 32%, transparent 0, transparent 2px, var(--white) 3px, var(--white) 4px, transparent 4px);
  width: 100%;
  height: 300%;
  top: 0;
  left: 0;
  position: absolute;
  animation: bubbles 5s linear infinite both;
  z-index: 1;
}
.fact-donation-head-image-box{
  overflow: hidden;
  position: relative;
}
@keyframes bubbles{
  0% {
    transform: translate();
  }

  100% {
      transform: translate(0, -66.666%);
  }
}