/*
Theme Name: Nonprofit Give
Theme URI: https://www.seothemesexpert.com/products/nonprofit-give
Author: drakearthur
Author URI: https://www.seothemesexpert.com/
Description: Nonprofit Give is a versatile website theme tailored for charity organizations dedicated to social causes, community service, and effective fundraising initiatives. It offers a well-structured layout that showcases essential information like mission statements, ongoing projects, volunteer opportunities, and contact details in an organized fashion. This design promotes clear content sections, allowing users to prioritize and present information effectively. The theme often features homepage blocks for spotlighting donation campaigns, events, and updates, helping organizations communicate their activities in a straightforward manner. Built with responsive design principles, the website adapts seamlessly to various screen sizes, including mobile devices and tablets. Customization options facilitate menu management, widget areas, and layout adjustments, enabling users to enhance the appearance without requiring advanced technical expertise. Additionally, it typically supports integration with popular crowdfunding tools and contact forms, bolstering fundraising and engagement efforts. Overall, Nonprofit Give emphasizes a simple yet functional structure for showcasing nonprofit-related content online, encouraging users to give back and actively participate in social welfare initiatives.
Version: 1.2.4
Tested up to: 7.0
Requires PHP: 7.2
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: nonprofit-give
Template: expert-ngo-volunteer
Tags: one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, grid-layout, wide-blocks, editor-style, full-width-template, custom-background, custom-colors, custom-header, custom-logo, custom-menu, sticky-post, featured-images, footer-widgets, flexible-header, featured-image-header, post-formats, theme-options, threaded-comments, translation-ready, rtl-language-support, portfolio, news, blog

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
:root {
    --color-primary1: #FB6563;
    --color-primary2: #FD8565;
    --font-awesome: 'FontAwesome';
}
body p{
    font-family: "Roboto", sans-serif;
  }
 body{
    font-family: "Roboto", sans-serif;
    overflow-x: hidden;
  }
a{
    text-decoration: none;
    color: var(--color-primary2);
}

.blog-item.inner-related-post .post-title a{
  color: var(--color-primary2);
  text-decoration: none;
}
.singel-page-area a{
  color: var(--color-primary2);
}
.page-template-template-frontpage .navbar-menubar .main-navigation .menu > li > a:hover, 
.page-template-template-frontpage .navbar-menubar .page_item a:hover{
  color: var(--color-primary1);
}
.main-menu i.fas.fa-caret-down.abc{
  color: #fff;
}
.navbar-menubar .main-navigation .menu > li > a:hover, .navbar-menubar .page_item a:hover{
  color: #000;
}
.page-template-template-frontpage h1.site-title a:hover, .page-template-template-frontpage p.site-title a:hover{
  color: #fff;
}
.navbar-menubar i.fas.fa-caret-down.abc {
    color: #fff;
}
.navbar-menubar .page_item_has_children ul li a{
  padding: 10px;
}
.page-template-template-frontpage .main-navigation li.current_page_item > a, 
.page-template-template-frontpage .main-navigation li.current-menu-item > a{
  color: var(--color-primary1);
}
.main-navigation li.current_page_item > a, .main-navigation li.current-menu-item > a{
  color: #000;
}
h1.site-title a:hover, p.site-title a:hover{
  color: #000;
}
.logo {
    position: relative;
    z-index: 99;
}
.main-header{
  position: relative;
}
h1.site-title a, p.site-title a, p.site-description{
  color: #fff;
}
.page-template-template-frontpage h1.site-title a,
.page-template-template-frontpage  p.site-title a,.page-template-template-frontpage  p.site-description{
  color: #000;
}
.page-template-template-frontpage .middle-header-area{
  content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: auto;
    background: url(assets/images/slider-shape.png) no-repeat left top;
    background-size: 100% 100%;
    background: transparent;
}
.middle-header-area{
  background: var(--color-primary1);
}
.menubox{
    position: relative;
    z-index: 99;
}
.navbar-menubar .main-navigation .menu > li > a, .navbar-menubar .page_item a{
  color: #fff;
  font-family: "Hedvig Letters Serif", serif;
  font-weight: 400;
    letter-spacing: 1px;
}
.navbar-menubar .main-navigation .menu > li > a, .navbar-menubar .page_item a{
  padding: 0;
  font-size: 13px;
}
/*--------------------------------------------------------------
SLIDER
--------------------------------------------------------------*/
#slider {
  max-width: 100%;
  margin: auto;
  height: 600px;
  padding: 0;
  z-index: 9;
  position: relative;
  overflow: visible;
  background-color: #000;
}
#main-slide{
  position: relative;
}
#main-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 55%;
  height: 600px;
  background: url('assets/images/slider-shape.png') no-repeat left top;
  background-size: 100% 100%;
  z-index: 2;
}
#slider img, #slider .slider-color-box {
  width: 100%;
  height: 600px;
  object-fit: cover;
  opacity: 1;
}
#slider .slider-color-box{
  background-color: #0c3851;
}
#slider .carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  text-align: left;
  left: 8%;
  right: 60%;
  z-index: 99;
  bottom: 0;
}
#slider .inner_carousel p.slidetop-text {
  color: #000000;
  font-size: 14px;
  position: relative;
  font-weight: 600;
  padding-left: 14%;
}
#slider .inner_carousel p.slidetop-text:after {
  position: absolute;
  content: "";
  border-bottom: 3px solid #000;
  width: 10%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  margin: 0 10px;
}
#slider .inner_carousel .red-text{
  color: #45B29D;
}
#slider .inner_carousel h1{
  font-weight: normal;
  line-height: 1.2;
}
#slider .inner_carousel h1 a{
  color: #000000;
  font-size: 34px;
  text-transform: capitalize;
  font-weight: 800;
}
#slider .inner_carousel h1 a:hover{
  color: var(--color-primary1);
}
#slider .inner_carousel {
  height: 50px;
}
#slider .inner_carousel {
  color: #000000;
}
#slider .inner_carousel p.slider-content {
  font-size: 16px;
  margin-top: 10px;
  color:#000000;
  line-height: 1.8;
  font-weight: 300;
}
#slider .slide-btn2 a,#slider .slide-btn1 a:hover{
  background: #000;
  color: #fff;
}
#slider .slide-btn2 a:hover, #slider .slide-btn1 a{
  background: var(--color-primary1);
  color: #fff;
}
#slider .slide-btn2 a, #slider .slide-btn1 a{
  display: inline-block;
  text-align: center;
  font-weight: 600;
  padding: 11px 22px;
  font-size: 14px;
  border-radius: 10px;
}
#slider{
  margin-bottom: 0;
}

#service .thumbnail img, #service .post-color,
.abt-content-box{
  height: 500px;
}
.youtube-icon-overlay{
  display: none;
}

/*domation*/
.donation-map {
  position: absolute;
  bottom: 0;
  right: 7%;
  left: 60%;
}
.donation-progress-card {
  max-width: 500px;
  padding: 25px 24px 32px;
  border-radius: 18px 18px 0 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.donation-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 110px;
  margin-bottom: 16px;
}
.donation-top-left,
.donation-top-right {
  display: flex;
  flex-direction: column;
}
.donation-label {
  display: block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 6px;
  letter-spacing: 1px;
}
.donation-amount {
  display: block;
  color: #ffffff;
  font-size: 23px;
  font-weight: 300;
  line-height: 1.1;
  margin-top: 5px;
}
.goal-text {
  display: inline-block;
  color: #ffffff;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.3;
  white-space: nowrap;
}
.donation-progress-bar {
  width: 100%;
  height: 5px;
  border-radius: 30px;
  background: #ffffff;
  overflow: hidden;
  margin-bottom: 14px;
}
.donation-progress-fill {
  display: block;
  height: 100%;
  border-radius: 30px;
  background: #ff6b6b;
  transition: width 0.4s ease;
}
.donation-supporters {
  color: #ffffff;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.4;
}

/*about*/
#service .right-abt-col {
    padding-right: 12%;
}
#service h2{
  margin-bottom: 17px;
  line-height: 1.2;
}
#service h2 a{
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0;
}
#service .abt-title:before{
  width: 7%;
  border-bottom: 2px solid #fff;
}
#service .abt-title {
  color: #fff;
  text-transform: capitalize;
  font-size: 16px;
  position: relative;
  padding-left: 50px;
  font-weight: 600;
  letter-spacing:0;
  margin-bottom: 20px;
  padding-left: 8%;
}
#service .abt-content {
    color: #fff;
    line-height: 2;
    font-size: 15px;
    font-weight: 300;
}
.abt-content-box {
  background: linear-gradient(
    to right,
    var(--color-primary2),
    var(--color-primary1)
  );
}
#service .read-btn a{
  background: #fff;
  color: #000;
  padding: 15px 40px;
  border-radius: 10px;
  font-size: 14px;
  display: inline-block;
  font-weight: 600;
  margin-top: 20px;
  text-transform: capitalize;
}


/*responsive*/
@media screen and (max-width: 767px) {
  #service .abt-title{
    font-size: 13px;
  }
  #service .read-btn a{
    font-size: 12px;
    padding: 11px 33px;
  }
  #service .abt-content{
    font-size: 12px;
  }
  #service h2 a{
    font-size: 20px;
  }
  #service .right-abt-col{
    padding-right: 0;
  }
  #service .thumbnail img{
    height: 200px;
  }
  .abt-content-box{
    height: auto;
  }
  .logo .site-title a{
    font-size: 32px;
  }
  #slider, #main-slide::before, #slider img{
    height: 500px;
  }
  #main-slide::before{
    width: 40%;
  }
  #slider .slide-btn2 a, #slider .slide-btn1 a{
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 7px;
  }
  #slider .inner_carousel h1 a{
    font-size: 25px;
  }
  #slider .inner_carousel p.slidetop-text:after{
    border-bottom: 2px solid #000;
  }
  #slider .inner_carousel p.slidetop-text{
    display: block;
    font-size: 10px;
    padding-left: 17%;
  }
  #slider .carousel-caption{
    right: 20%;
    top: 20%;
    bottom: auto;
  }
   .page-template-template-frontpage .middle-header-area{
    position: static;
   }
  .donation-map {
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 5%;
    z-index: 999;
  }
  .logo{
    text-align: center;
    margin-bottom: 10px;
  }
  .donation-progress-card {
    max-width: 100%;
    padding: 18px 16px 16px;
    border-radius: 18px 18px 0 0;
  }

  .donation-top {
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }

  .donation-amount {
    font-size: 24px;
  }

  .goal-text {
    font-size: 13px;
  }

  .donation-supporters {
    font-size: 15px;
  }

  body{
    position: static;
    font-family: "Robot", sans-serif;
  }
}
@media (min-width: 768px) and (max-width: 999px) {
  #service .abt-title{
    font-size: 13px;
  }
  #service .read-btn a{
    font-size: 12px;
    padding: 11px 33px;
  }
  #service .abt-content{
    font-size: 12px;
  }
  #service h2{
    line-height: 1.1;
  }
  #service h2 a{
    font-size: 20px;
  }
  #service .right-abt-col{
    padding-right: 0;
  }
  .logo .site-title a{
    font-size: 32px;
  }
  .donation-label{
    font-size: 12px;
  }
  .logo{
    text-align: center;
  }
  #slider, #main-slide::before, #slider img{
    height: 450px;
  }
  #main-slide::before{
    width: 50%;
  }
  #slider .slide-btn2 a, #slider .slide-btn1 a{
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 7px;
  }
  #slider .inner_carousel p.slider-content{
    font-size: 12px;
  }
  #slider .inner_carousel h1 a{
    font-size: 25px;
  }
  #slider .inner_carousel h1{
    line-height: 1.2;
  }
  #slider .inner_carousel p.slidetop-text{
    display: block;
    font-size: 13px;
    padding-left: 15%;
  }
  #slider .carousel-caption{
    right: 50%;
    top: 20%;
    bottom: auto;
  }
   .page-template-template-frontpage .middle-header-area{
    position: static;
   }
  .donation-map {
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 55%;
    z-index: 999;
  }
  .logo{
    text-align: center;
  }
  .donation-progress-card {
    max-width: 100%;
    padding: 18px 16px 16px;
    border-radius: 18px 18px 0 0;
  }

  .donation-top {
    gap: 10px;
    margin-bottom: 14px;
  }

  .donation-amount {
    font-size: 22px;
  }

  .goal-text {
    font-size: 12px;
  }

  .donation-supporters {
    font-size: 15px;
  }
}
@media (min-width: 999px) and (max-width: 1024px) {
  #service .abt-title{
    font-size: 13px;
  }
  #service .read-btn a{
    font-size: 12px;
    padding: 11px 33px;
  }
  #service .abt-content{
    font-size: 12px;
  }
  #service h2{
    line-height: 1.1;
  }
  #service h2 a{
    font-size: 20px;
  }
  #service .right-abt-col{
    padding-right: 0;
  }
  .donation-label{
    font-size: 12px;
  }
  .logo{
    text-align: center;
  }
  #main-slide::before{
    width: 50%;
  }
  #slider .slide-btn2 a, #slider .slide-btn1 a{
    padding: 8px 16px;
    font-size: 13px;
    border-radius: 7px;
  }
  #slider .inner_carousel p.slider-content{
    font-size: 12px;
  }
  #slider .inner_carousel h1 a{
    font-size: 25px;
  }
  #slider .inner_carousel h1{
    line-height: 1.2;
  }
  #slider .inner_carousel p.slidetop-text{
    display: block;
    font-size: 13px;
    padding-left: 15%;
  }
  .donation-map {
    position: absolute;
    bottom: 0;
    right: 5%;
    left: 65%;
    z-index: 999;
  }
  .logo{
    text-align: center;
  }
  .donation-progress-card {
    max-width: 100%;
    padding: 18px 16px 16px;
    border-radius: 18px 18px 0 0;
  }

  .donation-top {
    gap: 10px;
    margin-bottom: 14px;
  }

  .donation-amount {
    font-size: 22px;
  }

  .goal-text {
    font-size: 12px;
  }

  .donation-supporters {
    font-size: 15px;
  }
    .navbar-menubar .main-navigation .menu > li > a, .navbar-menubar .page_item a{
      font-size: 12px;
    }
}
@media (max-width: 1000px) {
   .toggle-nav i{
    background: #fff;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
    color: var(--color-primary1);
   }
   .page-template-template-frontpage .toggle-nav i{
    color: #fff;
    background: var(--color-primary1);
   }
   .navbar-menubar .main-navigation .menu > li > a, .navbar-menubar .page_item a{
    padding: 10px;
   }
}