@charset"utf-8";
:root {
  --primary: #233a80;
  --secondary: #f91e7d;
  --white: #ffffff;
  --black: #000000;
  --skyColor: #2ca8e4;
  --yellowColor: #f2b013;  
  --textColor: #6a6a6a;
  --lightGrayBorderColor: #e9e9e9;
  --deepGrayBorderColor: #3e3e3e;
  --hdnFontOne: "Josefin Sans", sans-serif;
  --hdnFontTwo: "Roboto Condensed", sans-serif;
  --hdnFontThree: "Oswald", sans-serif;
  --hdnFontFour: "Playfair Display", serif;
  --textFontOne: "Lato", sans-serif;
  --textFontTwo: "Poppins", sans-serif;
}


*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body, html { width: 100%; height: 100%; padding: 0; margin: 0; }
body{ font-family: var(--textFontOne); color: var(--primary); font-weight:400; font-size: 18px; line-height: normal; background-color: var(--white); }
div, table, td, tr, section, h1, h2, h3, h4, h5, h6 , p, section, article, figure{ margin:0; padding:0; }
h1, h2, h3, h4, h5, h6{ font-family: var(--hdnFontFour); font-weight: normal; }
a, input, textarea, button{ outline:0; transition: all ease-in-out 0.3s; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s; -o-transition: all ease-in-out 0.3s; }
input:focus, input:hover, textarea:focus, textarea:hover{ border-color: var(--primary) !important; box-shadow: none !important; outline: none; }
select { outline: 0; }
input::placeholder { opacity: 1; }
a{ text-decoration:none; border:none; outline:0; color: var(--primary); }
a:hover{ text-decoration:none; border:none; outline:0; color: var(--secondary); }
a:focus{ text-decoration:none; border:none; outline:0; }
button, button:focus{ text-decoration:none; border:none; outline:0; }
ul, ol, ul li, ol li{ list-style:none; margin:0; padding:0; }
p:empty{ display: none; }
img{ width:auto; max-width:100%; height: auto; }
body::selection{ background:#00589e; color:#ffffff; }
body::-moz-selection{ background:#00589e; color: #ffffff; }
p{ font-family: var(--textFontOne); font-size: 17px; color: var(--textColor); line-height: 28px; margin-bottom: 20px; }



.container{
  max-width: 1300px !important;
}
a.dfltBtn{
  font-family: var(--hdnFont);
  font-size: 15px;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  border-radius: 50px;
  padding: 17px 35px;
  background-image: linear-gradient(160deg, #ff006f, #8b003d);
  background-position: 100% 0;
  background-size: 300% 100%;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a.dfltBtn:hover{
  background-image: linear-gradient(160deg, #5a0027, #f10069);
}
a.borderBtn{
  font-family: var(--hdnFont);
  font-size: 15px;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-block;
  border-radius: 50px;
  padding: 17px 35px;
  border: 2px solid var(--secondary);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
a.borderBtn:hover{
  border-color: var(--yellowColor);
  color: var(--yellowColor);
}
.borderHdn{
  text-align: center;
}
.borderHdn h2{
  position: relative;
  font-size: 22px;
  color: var(--secondary);
  font-weight: 600;
  letter-spacing: 2px;
}
.borderHdn h3{
  position: relative;
  font-size: 44px;
  color: var(--yellowColor);
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 10px;
  padding-bottom: 20px;
}
.borderHdn h3::before{
  position: absolute;
  content: '';
  width: 60px;
  height: 2px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  background-color: var(--yellowColor);
}
.whiteHdnBrdr h2,
.whiteHdnBrdr h3{
  color: var(--white);
}
.whiteHdnBrdr.borderHdn h2::before,
.whiteHdnBrdr.borderHdn h3::before{
  background-color: var(--white) !important;
}
.borderLeftHdn{
  text-align: left !important;
}
.borderLeftHdn.borderHdn h3::before{
  display: none;
}
.borderLeftHdn.borderHdn h2{
  padding-left: 50px;
}
.borderLeftHdn.borderHdn h2::before{
  position: absolute;
  content: '';
  width: 40px;
  height: 2px;
  top: 14px;
  left: 0;
  background-color: var(--secondary);
}


.blackBg{
  background-color: #2b2b2b;
}

/*================ Header Style Start ================*/
.topMainHdr{
  position: relative;
  padding: 10px 0;
}
.topMainHdr .hdrRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
}
.hdrLogoClm{
  max-width: 150px;
}
.hdrLogoClm img{
  max-height: 80px;
}
/*================ Header Style End ================*/

/*================ Footer Style Start ================*/
.mainFooter{
  position: relative;
  background-color: #2b2b2b;
  padding: 80px 0 20px 0;
}
.fooerMenuRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.footerLogoClm{
  width: 28%;
}
.footerAddressClm{
  width: 28%;
}
.footerMenuClm{
  width: 15%;
}

.footerLogoClm img{
  max-width: 250px;
  max-height: 80px;
  margin-bottom: 20px;
}
.footerLogoClm p{
  font-weight: 300;
}


.mainFooter h2{
  font-family: var(--hdnFont);
  font-size: 16px;
  color: var(--yellowColor);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 15px;
}
.mainFooter h2::after {
  position: absolute;
  content: '';
  width: 70px;
  height: 2px;
  background-color: var(--yellowColor);
  bottom: 0;
  left: 0;
}
.mainFooter p{
  font-size: 16px;
  color: var(--white);
}
.mainFooter a:hover{
  color: var(--secondary);
}

.footerLogoClm p{
  line-height: 26px;
}
.footerAddressClm p span{
  font-size: 15px;
  color: var(--yellowColor);
  margin-left: 8px;
}

.footerMenuClm .footerMenuItem li{
  font-size: 16px;
  color: var(--white);
  font-weight: normal;
  margin-top: 15px;
}
.footerMenuClm .footerMenuItem li a{
  color: var(--white);
}
.footerMenuClm .footerMenuItem li a:hover{
  color: var(--yellowColor);
}

.ftrCopyrightBg{
  position: relative;
  background-color: #2b2b2b;
  padding: 20px 0;
  margin-top: -2px;
}
.footerCopyrightPrt{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--deepGrayBorderColor);
  padding-top: 40px;
}
.footerCopyrightPrt p{
  font-size: 14px;
  color: #c0c0c0;
  margin: 0;
}
.footerCopyrightPrt ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.footerCopyrightPrt ul li{
  margin-left: 8px;
}
.footerCopyrightPrt ul li a{
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 1px solid #c0c0c0;
  border-radius: 100%;
  text-align: center;
  line-height: 26px;
}
.footerCopyrightPrt ul li a .fa{
  font-size: 15px;
  color: #c0c0c0;
}
.footerCopyrightPrt ul li a:hover{
  background-color: var(--white);
}
.footerCopyrightPrt ul li a:hover .fa{
  color: var(--secondary);
}
/*================ Footer Style End ================*/



/*======================================================== Home Page Style Start ========================================================*/

/*=========== Home Banner Style Start ===========*/
.homBannerSec{
  position: relative;
}
.homBnrSlideImg{
  position: relative;
}
.homBnrSlideImg::before{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.homBnrSlideImg img{
  width: 100%;
  height: 630px;
  object-fit: cover;
  object-position: top;
}
.homBnrCaption{
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  z-index: 2;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.homBnrCaptionBox{
  padding: 0 100px;
  text-align: center;
}
.homBnrCaption h2{
  font-size: 100px;
  color: var(--white);
  font-weight: 700;
}
.homBnrCaption p{
  font-size: 30px;
  color: var(--white);
  font-weight: 300;
  margin-bottom: 40px;
}
.homBannerSec .homBnrSlidePrev,
.homBannerSec .homBnrSlideNext{
  position: absolute;
  width: 55px;
  height: 55px;
  background-color: rgba(255, 255, 255, 0.1);
  text-align: center;
  border-radius: 100%;
  top: calc(50% - 28px);
  opacity: 0;
  z-index: 4;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.homBannerSec .homBnrSlidePrev{
  left: 7%;
}
.homBannerSec .homBnrSlideNext{
  right: 7%;
}
.homBannerSec:hover .homBnrSlidePrev{
  left: 5%;
  opacity: 1;
}
.homBannerSec:hover .homBnrSlideNext{
  right: 5%;
  opacity: 1;
}
.homBannerSec .tiIcon{
  font-size: 20px;
  color: var(--white);
  line-height: 55px;
}


/*=========== Why Donate Style Start ===========*/
.whyDonateSec{
  position: relative;
  padding: 100px 0;
}
.whyDonateHdnRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.whyDonateHdnLeftClm{
  width: 40%;
}
.whyDonateHdnRightClm{
  width: 57%;
}


/*=========== About Us Style Start ===========*/
.aboutUsSec{
  position: relative;
  background: url(../images/donate-bg.jpg) no-repeat 0 0;
  background-attachment: fixed;
  background-size: cover;
  padding: 100px 0;
}
.aboutUsSec::before{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.75);
}
.aboutUsSec .container{
  position: relative;
  z-index: 2;
}
.aboutUsRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.aboutLeftDonatePrt{
  width: 40%;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 40px 70px;
  border-radius: 10px;
  text-align: center;
}
.aboutLeftDonatePrt h1{
  font-size: 40px;
  color: var(--primary);
  font-weight: 800;
  margin-bottom: 15px;
}
.aboutLeftDonatePrt p{
  color: var(--black);
}
.aboutLeftDonatePrt form{
  margin-top: 50px;
}
.aboutLeftDonatePrt input{
  font-size: 24px;
  color: var(--black);
  text-align: center;
  background-color: transparent;
  border: none;
  border-bottom: 2px solid var(--black);
  padding: 15px 20px;
  width: 100%;
}
.aboutLeftDonatePrt .dfltBtn{
  margin-top: 40px;
}
.aboutRightTextPrt{
  width: 60%;
  padding-left: 100px;
}
.aboutRightTextPrt p{
  color: var(--white);
}
.aboutRightTextPrt .borderHdn{
  margin-bottom: 30px;
}


/*=========== Meet Volunteers Style Start ===========*/
.meetVolunteerSec{
  position: relative;
  padding: 100px 0;
}
.meetVolunteerSec .borderHdn{
  margin-bottom: 50px;
}
.meetVolunteerPart{
  position: relative;
  padding: 0 15px;
}
.meetVolunteerPart .item{
  padding: 5px;
}
.meetVolunteerPart .meetVolunteerItem{
  background-color: #f1f5f9;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.03);
}
.meetVolunteerPart .meetVolunteerImg img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  object-position: top;
}
.meetVolunteerImg{
  position: relative;
}
.meetVolunteerImg::after{
  content: "";
  position: absolute;
  left: -20%;
  width: 140%;
  background: var(--white);
  height: 65%;
  bottom: -55%;
  border-radius: 50%;
}
.meetVolunteerPart .meetVolunteerText{
  background: #ffffff;
  border-radius: 0;
  position: relative;
  padding: 10px 15px;
  z-index: 3;
  text-align: center;
}
.meetVolunteerPart .meetVolunteerText h3{
  font-family: var(--hdnFontOne);
  font-size: 20px;
  color: var(--yellowColor);
  font-weight: 700;
  margin: 10px 0 5px 0;
}
.meetVolunteerPart .meetVolunteerText p{
  padding: 0;
  color: #545454;
}
.meetVolunteerPart .owl-prev,
.meetVolunteerPart .owl-next{
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: rgba(0, 0, 0, 0.2);
  text-align: center;
  border-radius: 100%;
  top: calc(50% - 28px);
  z-index: 4;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.meetVolunteerPart .owl-prev{
  left: -40px;
}
.meetVolunteerPart .owl-next{
  right: -40px;
}
.meetVolunteerPart .tiIcon{
  font-size: 20px;
  color: var(--white);
  line-height: 50px;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.meetVolunteerPart .owl-prev:hover .tiIcon,
.meetVolunteerPart .owl-next:hover .tiIcon{
  color: var(--secondary);
}


/*=========== Recent Projects Style Start ===========*/
.becomeVolunteerSec{
  position: relative;
  padding: 100px 0;
}
.becomeVolunteerRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 50px;
}
.becomeVolunteerLeftClm{
  width: 48%;
  background-color: var(--white);
/*  box-shadow: 0 0 12px rgba(44, 168, 228, 0.25);*/
  padding: 30px 30px;
  border-radius: 10px;
}
.becomeVolunteerLeftClm h2{
  font-size: 20px;
  color: var(--secondary);
}
.becomeVolunteerLeftClm h3{
  font-size: 30px;
  color: var(--yellowColor);
  font-weight: 800;
  margin: 5px 0 15px 0;
}
.becomeVolunteerRightClm{
  width: 48%;
}
ul.aboutCountPart{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
ul.aboutCountPart li{
  display: flex;
  flex-wrap: wrap;
  width: 48%;
  border: 1px solid var(--deepGrayBorderColor);
  border-radius: 6px;
  padding: 25px 20px;
  margin-top: 25px;
}
ul.aboutCountPart li:first-child,
ul.aboutCountPart li:nth-child(2){
  margin-top: 0;
}
ul.aboutCountPart li .tiIcon{
  font-size: 40px;
  color: var(--yellowColor);
  width: 50px;
  margin-right: 10px;
}
ul.aboutCountPart li .countArea{
  width: calc(100% - 60px);
}
ul.aboutCountPart li .countArea h4{
  font-family: var(--hdnFontOne);
  font-size: 30px;
  color: var(--white);
  font-weight: 600;
}
ul.aboutCountPart li .countArea h5{
  font-size: 20px;
  color: var(--white);
  font-weight: 600;
}


/*=========== Recent Projects Style Start ===========*/
.recentProjectsSec{
  position: relative;
  padding: 100px 0;
}
.recentProjectsSec .borderHdn{
  margin-bottom: 50px;
}
.galleryItem{
  position: relative;
  overflow: hidden;
  border: 1px solid var(--lightGrayBorderColor);
}
.galleryItem::before{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.galleryItem:hover::before{
  opacity: 1;
}
.galleryItem .glryItmCaption{
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  padding: 25px 25px;
  text-align: center;
  opacity: 0;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.galleryItem .glryItmCaption h4{
  font-size: 26px;
  color: var(--yellowColor);
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 5px;
}
.galleryItem .glryItmCaption p{
  color: var(--white);
  font-weight: 500;
}
.galleryItem:hover .glryItmCaption{
  top: 50%;
  opacity: 1;
}


/*=========== Blogs Style Start ===========*/
.homBlogListSec{
  position: relative;
  padding: 100px 0;
}
.homBlogListSec .borderHdn{
  margin-bottom: 50px;
}
.homBlogListRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.homBlogListItm{
  width: 23%;
  margin-top: 25px;
  border: 1px solid var(--lightGrayBorderColor);
  border-radius: 6px;
  overflow: hidden;
}
.homBlogListSec.blackBg .homBlogListItm{
  border-color: var(--deepGrayBorderColor);
}
.homBlogListItm .homBlogItmImg img{
  width: 100%;
  height: 300px;
  object-fit: cover;
}
.homBlogItmImg{
  position: relative;
}
.homBlogItmImg::after{
  content: "";
  position: absolute;
  left: -20%;
  width: 140%;
  background: var(--white);
  height: 65%;
  bottom: -55%;
  border-radius: 50%;
}
.homBlogListItm .homBlogItmContent{
  position: relative;
  background-color: var(--white);
  padding: 10px 20px 25px 20px;
  text-align: center;
  z-index: 3;
}
.homBlogItmContent h4{
  font-family: var(--hdnFontOne);
  font-size: 18px;
  color: var(--black);
  font-weight: 600;
  margin: 8px 0 20px 0;
}
.homBlogItmContent p{
  font-size: 13px;
  color: #6c6c6c;
  line-height: 18px;
  margin: 0;
}
.homBlogItmContent .tiIcon{
  font-size: 16px;
  vertical-align: bottom;
  margin-right: 6px;
}
.homBlogItmContent a.dfltBtn{
  font-size: 13px;
  padding: 13px 20px;
}
.homBlogListSec .moreBlogLink{
  margin-top: 50px;
  text-align: center;
}


/*=========== Contact Style Start ===========*/
.contactSec{
  position: relative;
  padding: 100px 0;
}
.contactSec .borderHdn{
  margin-bottom: 50px;
}
.contactRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 30px 0;
}
.contactLeftClm{
  width: 50%;
}
.contactRightClm{
  width: 45%;
}


.contactInfo{
  background-color: #ffffff;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.08);
  padding: 25px 40px;
  border-radius: 5px;
}
.contactInfo ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.contactInfo ul li{
  width: 48%;
  text-align: center;
  margin: 30px 0;
}
.contactInfo ul li .fa{
  position: relative;
  font-size: 40px;
  color: var(--yellowColor);
  text-align: center;
  line-height: 90px;
  width: 90px;
  height: 90px;
  border-radius: 100%;
  display: inline-block;
  background-color: rgb(242 176 19 / 5%);
}
.contactInfo ul li .fa.fa-envelope{
  font-size: 34px;
}
.contactInfo ul li p{
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin: 15px 0 0 0;
}

.contactRightClm iframe{
  width: 100%;
  height: 100%;
  border: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.03);
  padding: 8px;
  background-color: #ffffff;
}

/*======================================================== Home Page Style End ========================================================*/






/*========================= Inner Page Style Start =========================*/
.inrBannerSec{
  position: relative;
}
.inrBannerSec::after{
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.inrBnrImg img{
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  object-position: top;
}
.inrBnrCaption{
  position: absolute;
  width: 100%;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
  transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}
.inrBnrCaption h1{
  text-transform: uppercase;
  letter-spacing: 10px;
  display: inline-block;
  border: 4px double rgba(255, 255, 255, .9);
  border-width: 4px 0;
  padding: 20px 0 25px 0;
  font-size: 60px;
  font-weight: 600;
  color: var(--white);
}


/*======================================================== About Us Page Style Start ========================================================*/
.inrAboutSec{
  position: relative;
  padding: 100px 0;
}
.inrAboutRow{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.inrAboutLeftText{
  width: 60%;
}
.inrAboutLeftText ul.aboutCountPart{
  margin-top: 50px;
}
.inrAboutLeftText ul.aboutCountPart li{
  border-color: var(--lightGrayBorderColor);
}
.inrAboutLeftText ul.aboutCountPart li h4{
  color: var(--primary);
}
.inrAboutLeftText ul.aboutCountPart li h5{
  color: var(--primary);
}
.inrAboutRightImg{
  width: 35%;
}
.inrAboutRightImg img{
  width: 100%;
  height: 100%;
  max-height: 500px;
  object-fit: cover;
  border-radius: 0px 100px 0px 100px;
}


/*=========== Inner About Paralax Style Start ===========*/
.inrAboutParalax{
  position: relative;
  background: url(../images/paralax-bg1.jpg) no-repeat 0 0;
  background-attachment: fixed;
  background-size: cover;
  padding: 100px 0;
}
.inrAboutParalax::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
}
.inrAboutParalaxText{
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  z-index: 2;
}
.inrAboutParalaxText h2{
  font-size: 30px;
  color: var(--white);
  font-weight: 600;
  line-height: 45px;
  margin-bottom: 40px;
}
/*======================================================== About Us Page Style End ========================================================*/


/*======================================================== Blog List Page Style Start ========================================================*/
.inrBlogListSec .homBlogListItm{
  width: 32%;
  margin-top: 40px;
}
.inrBlogListSec .borderHdn{
  margin-bottom: 30px;
}
/*======================================================== Blog List Page Style End ========================================================*/






/*============================================ Responsive Style Sheet Start Here ============================================*/

@media only screen and (max-width:1365px){
  .meetVolunteerPart .owl-prev{
    left: -5px;
  }
  .meetVolunteerPart .owl-next{
    right: -5px;
  }
  .homBlogListItm{
    width: 24%;
  }
  .contactLeftClm{
    width: 53%;
  }
  .contactInfo ul li{
    width: 49%;
  }
}


@media only screen and (max-width:1199px){
  .homBnrSlideImg img{
    height: 450px;
  }
  .homBnrCaption h2{
    font-size: 65px;
    margin-bottom: 10px;
  }
  .homBnrCaption p{
    font-size: 20px;
  }
  .whyDonateHdnLeftClm{
    width: 42%;
  }
  .aboutRightTextPrt{
    width: 57%;
    padding-left: 0;
  }
  .aboutLeftDonatePrt{
    padding: 40px 30px;
  }
  .contactInfo ul li p{
    word-break: break-word;
  }
}


@media only screen and (max-width:992px){
  .homBnrSlideImg img{
    height: 350px;
  }
  .homBnrCaption h2{
    font-size: 50px;
  }
  .whyDonateHdnLeftClm,
  .whyDonateHdnRightClm{
    width: 100%;
  }
  .aboutUsSec{
    background-attachment: inherit;
  }
  .aboutLeftDonatePrt{
    width: 100%;
  }
  .aboutRightTextPrt{
    width: 100%;
    margin-top: 40px;
    text-align: center;
  }
  .aboutRightTextPrt .borderHdn{
    text-align: center !important;
  }
  .aboutRightTextPrt .borderLeftHdn.borderHdn h2{
    padding-left: 0;
  }
  .aboutRightTextPrt .borderLeftHdn.borderHdn h2::before{
    display: none;
  }
  .aboutRightTextPrt .borderLeftHdn.borderHdn h3::after{
    position: absolute;
    content: '';
    width: 60px;
    height: 2px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--white);
  }
  .becomeVolunteerRow{
    margin-top: 15px;
  }
  .becomeVolunteerLeftClm{
    width: 100%;
  }
  .becomeVolunteerRightClm{
    width: 100%;
    margin-top: 40px;
  }
  .recentProjectsSec .card-columns{
    column-gap: 0.75rem;
  }
  .galleryItem img{
    height: 200px;
  }
  .homBlogListSec .borderHdn{
    margin-bottom: 20px;
  }
  .homBlogListItm,
  .inrBlogListSec .homBlogListItm{
    width: 49%;
  }
  .contactLeftClm{
    width: 100%;
    order: 1;
    margin-top: 40px;
  }
  .contactRightClm{
    width: 100%;
    height: 450px;
  }


  .inrBnrImg img{
    max-height: 300px;
  }
  .inrBnrCaption h1{
    font-size: 45px;
    letter-spacing: 2px;
    padding: 10px 0 15px 0;
  }
  .inrAboutLeftText{
    width: 100%;
  }
  .inrAboutRightImg{
    width: 100%;
    text-align: center;
    margin-top: 40px;
  }
  .inrAboutParalax{
    background-attachment: inherit;
  }
  .inrAboutParalaxText h2{
    font-size: 22px;
    line-height: 36px;
    margin-bottom: 20px;
  }



  .mainFooter{
    padding-top: 30px;
  }
  .footerLogoClm{
    width: 100%;
    margin-bottom: 25px;
  }
  .footerMenuClm{
    width: 49%;
  }
  .footerAddressClm{
    width: 100%;
    margin-top: 35px;
  }
  .borderHdn h2{
    font-size: 18px;
    letter-spacing: 1px;
  }
  .borderHdn h3{
    font-size: 30px;
  }
  .borderLeftHdn.borderHdn h2::before{
    top: 9px;
  }
  .whyDonateSec,
  .aboutUsSec,
  .meetVolunteerSec,
  .becomeVolunteerSec,
  .recentProjectsSec,
  .homBlogListSec,
  .contactSec,
  .inrAboutSec,
  .inrAboutParalax{
    padding: 40px 0;
  }
}


@media only screen and (max-width:576px){
  .homBnrSlideImg img{
    height: 300px;
  }
  .homBnrCaptionBox{
    padding: 0;
  }
  .homBnrCaption h2{
    font-size: 30px;
  }
  .homBnrCaption p{
    font-size: 16px;
    margin-bottom: 15px;
  }
  .whyDonateSec{
    text-align: center;
  }
  .aboutLeftDonatePrt{
    padding: 20px 20px;
  }
  .aboutLeftDonatePrt h1{
    font-size: 28px;
  }
  .meetVolunteerSec .borderHdn{
    margin-bottom: 30px;
  }
  .meetVolunteerPart .meetVolunteerItem{
    max-width: 330px;
    margin: 0 auto;
  }
  .becomeVolunteerLeftClm{
    padding: 20px;
  }
  .becomeVolunteerLeftClm h3{
    font-size: 22px;
  }
  ul.aboutCountPart li{
    width: 100%;
    margin-top: 15px !important;
  }
  ul.aboutCountPart li .countArea h4{
    font-size: 25px;
  }
  ul.aboutCountPart li .countArea h5{
    font-size: 16px;
  }
  .homBlogListItm,
  .inrBlogListSec .homBlogListItm{
    width: 100%;
    max-width: 350px;
    margin: 15px auto 0 auto;
  }
  .recentProjectsSec .borderHdn,
  .contactSec .borderHdn{
    margin-bottom: 30px;
  }
  .contactRightClm{
    height: 350px;
  }
  .contactInfo ul li{
    width: 100%;
    margin: 15px 0;
  }
  .contactInfo{
    padding: 20px;
  }


  .inrBnrCaption h1{
    font-size: 30px;
    padding: 5px 0 10px 0;
  }
  .inrAboutLeftText ul.aboutCountPart{
    margin-top: 0;
  }


  .mainFooter{
    text-align: center;
  }
  .mainFooter h2::after{
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .footerLogoClm{
    margin-bottom: 0;
  }
  .footerMenuClm{
    width: 100%;
    margin-top: 25px;
  }
  .footerCopyrightPrt{
    padding-top: 20px;
  }
  .footerCopyrightPrt p{
    width: 100%;
    text-align: center;
    margin-top: 15px;
    order: 1;
  }
  .footerCopyrightPrt ul{
    width: 100%;
    justify-content: center;
  }
  .borderHdn.borderLeftHdn{
    text-align: center !important;
    margin-bottom: 20px;
  }
  .borderLeftHdn.borderHdn h2{
    padding-left: 0;
  }
  .borderLeftHdn.borderHdn h2::before{
    display: none;
  }
  .borderLeftHdn.borderHdn h3::after {
    position: absolute;
    content: '';
    width: 60px;
    height: 2px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--yellowColor);
  }
  .borderHdn h2{
    font-size: 17px;
  }
  .borderHdn h3{
    font-size: 25px;
  }
  a.dfltBtn,
  a.borderBtn{
    padding: 12px 25px;
  }
  p{
    font-size: 16px;
    line-height: 24px;
  }
}


@media only screen and (max-width:430px){
  .inrBnrCaption h1{
    font-size: 25px;
  }
  .borderHdn h3{
    font-size: 22px;
    margin-top: 8px;
    padding-bottom: 13px;
  }
}
/*============================================ Responsive Style Sheet End Here ============================================*/