/*
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 website theme designed for organizations focused on charitable activities, community service, and fundraising initiatives. It provides a structured layout that helps present key information such as mission statements, ongoing projects, volunteer opportunities, and contact details in an organized manner. The design typically supports clear content sections, allowing users to arrange information based on priority and relevance. The theme often includes homepage blocks for highlighting featured campaigns, events, and updates. These sections help organisations communicate their activities straightforwardly. It is generally built with responsive design principles, allowing the website to adjust across different screen sizes, including mobile devices and tablets. Customization options usually include menu management, widget areas, and layout adjustments, enabling users to modify the appearance without advanced technical skills. It may also support integration with common donation tools and contact forms to assist with fundraising and engagement efforts. Overall, Nonprofit Give focuses on providing a simple and functional structure for presenting nonprofit-related content online.
Version: 1.1
Tested up to: 6.9
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;
   }
}