/* Fida Marwat (Sr. UXUI and Front End Developer) */

body{
  font-family: 'Poppins', sans-serif;
}

/* For modern browsers */
input::placeholder{
  color: rgba(68, 68, 68, 0.5) !important; 
}

/* For older versions of Internet Explorer */
input:-ms-input-placeholder{
  color: rgba(68, 68, 68, 0.5) !important; 
}

textarea::placeholder{
  color: rgba(68, 68, 68, 0.5) !important; 
}

/* For older versions of Internet Explorer */
textarea:-ms-input-placeholder{
  color: rgba(68, 68, 68, 0.5) !important; 
}

p{
	line-height: 28px;
  font-size: 16px;
  font-family: 'Poppins', sans-serif;
  color: #5E6282;
}

ul{
  line-height: 32px;
  font-family: 'Poppins', sans-serif;
  list-style: none;
  color: #5E6282;
}

h1{
  font-family: 'Poppins', sans-serif;
  font-size: 40px;
  line-height: 60px;
  color: #343434;
  font-weight: 700;
}

h2{
  font-family: 'Poppins', sans-serif;
  font-size: 32px;
  line-height: 44px;
  color: #343434;
  font-weight: 700;
}

h3{
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  line-height: 44px;
  font-weight: 600;
}

h4{
  color: #5E6282;
}

h5{
  font-family: 'Poppins', sans-serif;
  color: #343434;
  font-size: 18px;
  font-weight: 700;
  line-height: 30px;
}

.form-control,
.form-select{
  height: 44px;
}

textarea{
  min-height: 100px !important;
}

.carousel-caption{
  top: 40%;
}

.text-primary{
  color: #157FBF !important;
}

.text-success{
  color: #099348 !important;
}

.text-warning{
  color: #F8A214 !important;
}

.line-warning{
  width: 70px;
  height: 5px;
  background-color: #F8A214;
  border-radius: 5px;
}

.line-danger{
  width: 70px;
  height: 5px;
  background-color: #FF0607;
  border-radius: 5px;
}

.line-success{
  width: 70px;
  height: 5px;
  background-color: #099348;
  border-radius: 5px;
}

.btn-primary{
	background-color: #157FBF  !important;
  border-color: #157FBF !important;
  color: #fff;
  padding: 8px 16px;
}

.btn-danger{
  background-color: #FF0607 !important;
  border-color: #FF0607;
}

.btn-dark{
  background-color: #242424 !important;
  border-color: #242424;
}

.btn-primary:hover,
.btn-danger:hover,
.btn-success:hover{
  border-color: #242424 !important;
  background-color: #242424 !important;
}


.btn-warning:hover{
  border-color: #242424 !important;
  background-color: #242424 !important;
  color: #fff;
}

.btn-success{
  background-color: #099348 !important;
  border-color: #099348;
}

.navbar-nav{
  line-height: unset;
}

.navbar .nav-item{
  padding-left: 0px !important;
  padding-right: 20px !important;
}

.navbar .nav-item .nav-link{
  color: #101010;
}

.nav-link:focus, .nav-link:hover{
  color: #FF0607 !important;
}

.bg-primary{
  background-color: #157FBF !important;
}

.bg-danger{
  background-color: #FF0607 !important;
}

.bg-warning{
  background-color: #F8A214 !important;
}

.bg-success{
  background-color: #099348 !important;
}

.bg-grey{
  background-color: #F0EFF4 !important;
}

.bg-light{
  background-color: #f8f8ff !important;
}

.card{
  border-radius: 16px;
  border: 0px solid red;
  background-color: #F5F5F5;
  border-bottom: 7px solid;
}

.badge{
  border-radius: 100px;
  padding: 8px 15px;
}

.progress{
  background-color: #E5E5E5;
  height: 14px;
  border-radius: 100px;
}

.border-success{
  border-color: #099348 !important;
}

.border-warning{
  border-color: #F8A214 !important;
}

.border-danger{
  border-color: #FF0607!important;
}

.border-primary{
  border-color: #157FBF !important;
}

#top-header{
  padding: 16px 0px;
}

#top-header a{
  width: 20%;
}

#marque{
  padding: 10px 0px;
}

/* cause carousel */

@media (min-width: 768px) {
  .custom-cause .carousel-item {
    margin-right: 12px;
    margin-left: 12px;
    flex: 0 0 30.111111%;
    display: block;
  }

  .custom-cause .carousel-inner {
    display: flex;
  }
}

@media(min-width:768px) and (max-width:991px) {
  .custom-cause .carousel-item {
    margin-right: 12px;
    margin-left: 12px;
    flex: 0 0 26.66666666%;
    display: block;
  }

  .custom-cause .carousel-inner {
    display: flex;
  }
}

.custom-cause .carousel-control-prev{
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background-color: #F8A214;
  opacity: 1;
  padding: 5px;
  top: 50%;
  left: 0%;
}

.custom-cause .carousel-control-next{
  width: 30px;
  height: 30px;
  border-radius: 100px;
  background-color: #F8A214;
  opacity: 1;
  padding: 5px;
  top: 50%;
  right: 0%;
}

/* about */

#about,
#cause,
#kindness,
#story-mission,
#news,
#quenching,
#footer,
#volunteer-and-support,
#map{
  margin-top: 70px;
}

#about .img-box{
  overflow: hidden;
  border-top: 8px solid #FF0607;
  border-bottom: 8px solid #F8A214;
  border-top-right-radius: 70px;
  border-bottom-left-radius: 70px;
}

#kindness .img-box-bottom{
  overflow: hidden;
  height: 550px;
  display: flex;
  align-items: center;
  border-bottom: 8px solid #157FBF;
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
}

#kindness .img-box-top{
  overflow: hidden;
  height: 550px;
  display: flex;
  align-items: center;
  border-top: 8px solid #F8A214;
  border-top-left-radius: 70px;
  border-bottom-right-radius: 70px;
}


#quenching{
  background-image: url('../images/quenching-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 70px 0px;
}


/* fotter */

#footer{
  background-image: url('../images/footer-bg.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px 0px;
}

#footer p,
#footer h3,
#footer a{
  color: rgba(255, 255, 255, 0.8);
}

#bottom-footer{
  background-color: #001409;
}

#bottom-footer p{
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}


/* inner head */

#inner-head{
  background-image: url('../images/inner-bg-img.jpg');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 70px 0px;
}

/* volunteer and support */

#volunteer-and-support{
  padding: 70px 0px;
  background-color: #f9f9f9;
}

#volunteer-and-support .card{
  border-bottom: 5px solid;
  width: 25%;
}

#volunteer-and-support .card .circle{
  width: 90px;
  height: 90px;
}

/* about */

#quenching .circle{
  width: 90px;
  height: 90px;
}

.custom-card{
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background-image: url(../images/about-us-pattern.png);
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: contain;
  border-bottom: 6px solid;
}