* {
  box-sizing: border-box;
}

body {
  background-color: #f1f1f1;
  font-family: 'Noto Serif', serif;
    line-height: 25px;
}

/* --------- Navigation menu  -------- */

@import url("https://fonts.googleapis.com/css2?family=Changa:wght@200&family=Fondamento&family=Yuji+Boku&display=swap");

* {
  margin: 0;
  padding: 0;
  scroll-behavior: smooth;
}

.logo img {
  width: 180px;
}

nav {
  height: 75px;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-around;
  margin: 0;
  padding: 0 1rem;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

ul {
  margin-bottom: 0;
}

.navigation {
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 999;
}

.nav-menu li {
  list-style: none;
  padding: 0 1rem;
}

.nav-menu {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0 auto;
  text-align: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: distribute;
  justify-content: space-around;
}

a.nav-link {
  color: #0070cc;
  text-decoration: none;
  font-size: 1.9rem;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

a.nav-link:hover {
  color: #fa7f4b;
}

.hamburger {
  display: none;
}

.bar,
.fa-times {
  width: 1.5rem;
  height: 3px;
  display: block;
  color: #fff;
  padding: 0;
  margin: 6px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  background-color: #0070cc;
}

.bar:nth-child(1) {
  width: 100%;
}

.bar:nth-child(2) {
  width: 200%;
}

.bar:nth-child(3) {
  width: 300%;
}


.container.Rec_pay {
  padding: 20px;
  font-style: italic;
  line-height: 2;
  background: #edf7ff;
  font-size: 13px;
}

.featured_title .tax_text, .content-wrap .tax_text {
  font-style: italic;
  color: #065eac;
}
.personal_information h4{
    margin:20px  15px;
    padding-bottom:10px;
    border-bottom:1px solid #e5e5e5;
}
.payment{
    margin-top:30px;
}
.site-footer{
    background:#065eac;
    color:#fff;
    padding:20px 0;
}
.site-footer a{
    color:#fff;
}
.copy-text{
    float:left;
}
.powered-text{
    float:right;
}
@media (max-width: 992px) {
  .hamburger {
    display: block;
  }
.navigation ul.nav-menu.active {
    right: 0;
    z-index: 100;
    transition: 0.2s ease;
    position: absolute;
}

  .active .bar:nth-child(2) {
    opacity: 0;
  }

  .active .bar:nth-child(1) {
    -webkit-transform: translateY(8px) rotate(-315deg);
    transform: translateY(8px) rotate(-315deg);
    width: 300%;
  }

  .active .bar:nth-child(3) {
    -webkit-transform: translateY(-10px) rotate(-45deg);
    transform: translateY(-10px) rotate(-45deg);
    width: 300%;
  }

  nav {
    display: flex;
  }

  .nav-menu {
    width: 100%;
    height: 40%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 75px;
    right: -100%;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    margin: 0 auto;
    background-color: #f1f1f1;
  }

  .nav-menu li {
    padding: 1rem 0;
  }

  a.nav-link {
    margin: 1rem 0;
    z-index: 1;
  }

 

  .form-container {
    background: #fff;
    position: relative;
    margin-top: -100px;
    z-index: 100;
  }
  .logo {
    margin-left: -30px;
}

.form-horizontal .col-md-6, .col-md-12 {
  padding-right: 0;
  padding-left: 0;
}
}


@media only screen and (max-width: 767px) {

  .carousel-inner .item {
    height: 56vh !important;
  }

  .intro-section .intro-content h1 {
    font-size: 2.8rem;
  }

  .intro-section .intro-content h6 {
    font-size: 1.4rem;
  }

  .intro-section .intro-content .changing {
    font-size: 1.5rem;
  }

  .intro-section .intro-content .header-btn a {
    font-size: 1.25rem;
  }
.donation-tab{
margin:0 15px;
}

}

.col-md-6.dis-hide {
  display: none;
}

/* small mobile :320px. */

@media only screen and (max-width: 479px) {

  .intro-inner .intro-content h1 {
    font-size: 2rem;
    letter-spacing: 1px;
  }

  .intro-inner .intro-content p {
    margin-top: 10px;
  }

  .content-wrap #account_information .nav-tabs li a:hover {
    width: 102px;
    display: none;
  }

  .form-horizontal .nav-tabs>li>a {
    font-size: 14px;
  }

  .content-wrap input#customeamount {
    margin: 0 0 5% 0;
  }

  .content-wrap .previous {
    width: 35%;
  }

  .content-wrap .step-next {
    width: 35%;
  }

  .content-wrap .custome-amount {
    width: 100% !important;
    float: left;
    margin: 0 0 5% 0 !important;
  }

  .container .contact_title h4 {
    line-height: 36px;
  }

}

/* --------- Navigation menu End ---------- */

/*  ------- Form Section Start ------- */

#regForm {
  background-color: #fff;
  margin: 100px auto;
  /* font-family: Lora; */
  padding: 20px;
  width: 70%;
  min-width: 300px;
  box-shadow: 0 0 16px rgb(0 0 0 / 20%);
  border-radius: 5px;
}

#regForm .container {
  width: 100%;
}

h1 {
  text-align: center;
}

h2.bottom_space {
  margin-bottom: 35px;
}

input {
  padding: 10px;
  width: 100%;
  font-size: 17px !important;
  /* font-family: Lora !important; */
  border: 1px solid #aaaaaa;
  border-radius: 5px;
}

/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

button {
  color: #ffffff !important;
  border: none;
  padding: 10px 20px;
  cursor: pointer !important;
  width: 175px;
  height: 55px;
  margin: 10px 5px !important;
  border-radius: 5px;
  background-color: #fa7f4b;
  font-size: 20px !important;
  font-weight: 700 !important;
}

button:hover {
  background-color: #065eac;
}

#prevBtn {
  background-color: #bbbbbb;
}

/* Make circles that indicate the steps of the form: */
.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  border: none;
  border-radius: 50%;
  display: inline-block;
  opacity: 0.5;
}

.step.active {
  opacity: 1;
}

/* Mark the steps that are finished and valid: */
.step.finish {
  background-color: #065eac;
}

/* ----- Price Button  */
.radio-toolbar {
  margin: 10px;
}

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.radio-toolbar label {
  display: inline-block;
  background-color: #cccccc;
  padding: 10px 20px;
  font-weight: 700;
  line-height: 21px;
  font-size: 16px;
  border: 2px solid #cccccc;
  color: #065eac;
  border-radius: 5px;
  margin: 15px;
}

.radio-toolbar label:hover {
  background-color: #fa7f4b;
  border: 2px solid #fa7f4b;
  color: #fff;
}

.radio-toolbar input[type="radio"]:focus+label {
  border: 2px dashed #44444444;
}

.radio-toolbar input[type="radio"]:checked+label {
  background-color: #fa7f4b;
  border-color: #fa7f4b;
  color: #fff;
}

/*  --- Tab menu -----  */
.nav-tabs{
    border-bottom:0;
}
.nav-tabs>li{
width:45%;
text-align:center;
}
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
  border: 0 solid #065eac;
 background-color: #065eac ;
  color: #fff;
  margin-right:0;
 
}

.nav-tabs>li>a {
  border: 2px solid #dddddd;
 padding:15px 0;
  color: #065eac;
  font-size: 16px;
  font-weight: 700;
  border-radius:5px;
  margin-right:0px;
}

.content-wrap p {
  font-size: 16px;
}

.content-wrap  hr {
  margin-top: 20px;
  margin-bottom: 10px;
  border: 0;
  border-top: 3px dotted #b1acac;
}

@media only screen and (max-width: 805px) {
  .radio-toolbar label {
    padding: 10px 15px;
    margin: 10px 5px;
  }

  .radio-toolbar {
    text-align: center;
  }

  button {
    padding: 10px 20px;
    width: 140px;
    height: 40px;
    margin: 10px 5px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

@media only screen and (max-width: 677px) {

 .radio-toolbar label {
    padding: 5px 10px;
    margin: 10px 5px;
  }

  .radio-toolbar {
    text-align: center;
  }

  button {
    padding: 10px 20px;
    width: 140px;
    height: 40px;
    margin: 10px 5px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }
}

.featured_title {
  text-align: left;
  margin: 8% 5% 8% 20%;
}

.featured_title h5 {
  font-size: 24px;
  line-height: 32px;
  color: #065eac;
  font-weight: 400;
  font-style: italic;
  font-family: "Playfair Display";
}

.featured_title h4 {
  font-size: 36px;
  line-height: 60px;
  color: #424242;
  font-weight: 700;
  font-family: "Lora";
}

.featured_title p {
  font-size: 20px;
  line-height: 1.5em;
  color: #616161;
  font-weight: 400;
}

/*  ------- Form Section End ------- */

/*  ------- Slider Section Start ------- */


@font-face {
  font-family: "WC Mano Negra Bta";
  src: url(../WC-Mano-Negra-Bta/WCManoNegraBoldBta.otf);
}

.carousel-inner .item {
  /*   max-height: 680px; */
  height: 100vh;
  background: url('../img/background.jpeg') #ffffff no-repeat right top;
 
}


.carousel-control {
  width: 10%;
}

.carousel-control .fa {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}

.carousel-control .fa.fa-chevron-right {
  right: 50%;
  margin-right: -10px;
}

@media screen and (min-width: 768px) {
  .carousel-control .fa-chevron-left {
    margin-left: -15px;
  }

  img {
    display: block;
    height: auto;
    left: 50%;
    min-height: 100%;
    min-width: 100%;
    object-fit: contain;
    position: relative;
    top: 50%;
    transform: translate(-50%, 0%);
    width: auto;
  }

  .carousel-caption {
    right: 20%;
    left: 20%;
    top: 20%;
  }


  .carousel-control .fa {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    font-size: 30px;
  }
}

/*   Slider caption   */

.right.carousel-control,
.left.carousel-control {
  display: none;
}

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 18% !important;
  top: 18%;
  left: 10%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: left !important;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0%);
}

.carousel-caption h2 {
  width: 552px;
  height: 70px;
  font-size: 75px;
  line-height: 72px;
  color: #000;
  font-weight: 700;
  font-family: "WC Mano Negra Bta";

}

.carousel-caption p {
    width: 70%;
    margin: 20px 0;
    font-weight: 300;
    font-size: 24px;
    line-height: 1.3em;
    color: #000;
}

.carousel-indicators {
  z-index: 9 !important;
}

.carousel-indicators .active {
  background-color: #065eac !important;
}

.carousel-indicators li {
  border: 1px solid #fa7f4b !important;
}

@media only screen and (max-width: 768px) {
    
.carousel-inner .item{
    background-position: 83% 0;
   background-size:225% 75%;
   
}
  .carousel-caption h2 {
    width: 552px;
    height: 20px;
    font-size: 30px;
    line-height: 0px;
  }

  .carousel-caption p {
    font-size: 15px;
    width: 60%;
  }
.carousel-caption{
    top:5%;
    left:3%;
}

.donation-tab li a, .content-wrap li a{
    font-size:14px;
}

  a.btn.btn-transparent.btn-rounded.btn-large {
    width: 135px;
  }


  #circ ul {
    margin-top: 20px;
  }

  #circ ul li {
    width: 35px;
    height: 35px;
    margin: 0 8px 0px 8px;
  }

  .icon {
    font-size: 1.5em;
  }


}

@media only screen and (max-width: 420px) {



  .carousel-caption h2 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 30px;
  }

  .carousel-caption p {
    font-size: 15px;
  }
}

@media only screen and (max-width: 350px) {
  .form-horizontal .nav-tabs>li>a {
    font-size: 12px;
  }

  #personal_information .btn {
    padding: 6px 3px;
  }
}

.btn-rounded {
  border-radius: 70px;
}

.btn-large {
  padding: 11px 45px;
  font-size: 18px;
}

a.btn.btn-transparent.btn-rounded.btn-large {
  width: 180px;
  border-radius: 27px;
  background-color: #fa7f4b;
  font-size: 16px;
  color: #ffffff;
  font-weight: 400;
  text-align: center;
}

/*  Change animation duration    */

.animated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

.blogs img {
  width: 100%;
}

/* @import "bourbon";

@import url(https://fonts.googleapis.com/css?family=Damion); */

.icon {
  position: absolute;
  width: 100%;
  margin-top: 0;
  display: block;
  color: #fff;
  background-color: #cccccc;
  font-size: 2.2em;
  transition-timing-function: (all 2s ease-in-out);
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}

.icon:hover {
  background-color: #fa7f4b;
  border: solid 3px #fa7f4b;
}

#circ {
  max-width: 100%;
  width: 1280px;
  text-align: left;
  margin: 0 auto;
  float: none;
}

#circ ul {
  list-style: none;
  padding: 0;
  margin-top: 30px;
  width: 100%;
  text-align: left;
}

#circ ul li {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  width: 50px;
  height: 50px;
  margin: 0 10px 0px 10px;
  text-align: center;
  background: #cccccc;
  border: solid 2px #cccccc;
  position: relative;
  transition: (all .4s);
}

#circ ul li:hover {
  background-color: #fa7f4b;
  border: solid 3px #fa7f4b;
  color: #fff;
  transition: (all .4s);
  cursor: pointer;
}

@media only screen and(max-width: 1200px) {

  .icon {
    position: relative;
    margin-top: 0 !important;
    color: #fa7f4b;
    background-color: #fa7f4b;
    font-size: 2.2em;
    transition-timing-function: ease-in-out;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
  }

  .icon:hover {
    background-color: #fa7f4b;
  }

  #circ ul li {
    width: 50px;
    height: 50px;
    margin: 0 5px 5px 5px;
  }

  #circ ul li:hover .icon {
    font-size: 2.2em;
  }
}

@media only screen and(max-width: 690px) {

  #circ ul li {

    border-radius: 0;
    border: none;
    margin: 0;
  }

  #circ ul li:hover {
    border: none;
  }
}

/*  ------- Slider Section End ------- */
/*  ------- Card  Section Start ------- */

section.Card-section {
  margin: 50px 0;
}

.container .contact_title {
  text-align: center;
}

.container .contact_title p {
  font-size: 24px;
  line-height: 32px;
  color: #424242;
  font-weight: 400;
  font-style: italic;
}

.container .contact_title h4 {
  font-size: 36px;
  line-height: 21px;
  color: #065eac;
  font-weight: 700;
  margin-bottom: 70px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-gap: 20px;
  align-items: stretch;
}

.grid>article {
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  text-align: center;
  border-radius: 5px;
}

.grid>article:hover {
  border: 1px solid #fa7f4b;
  box-shadow: 2px 2px 6px 0px rgb(250 127 75);
}

.grid>article i {
  font-size: 48px;
  line-height: 70px;
  height: 80px;
  width: 80px;
  border: 6px solid #cccccc;
  border-radius: 50%;
  background-color: #cccccc;
  text-align: center;
  color: white;
  margin-top: -36px;
}

.grid>article i:hover {
  border: 6px solid #fa7f4b;
  border-radius: 50%;
  background-color: #fa7f4b;
}

.grid .text {
  padding: 16px 20px 30px;
}

.grid .text h3 {
  font-size: 21px;
  line-height: 30px;
  color: #424242;
  font-weight: 700;
}

.grid .text h5 {
  font-size: 14px;
  line-height: 30px;
  color: #616161;
  font-weight: 400;
  font-style: italic;
}



@media only screen and (max-width: 991px) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-gap: 55px;
    align-items: stretch;
  }

  .col-md-6.mob-hide {
    display: none;
  }

  .col-md-6.dis-hide {
    display: block;
    margin-bottom: 5%;
  }

  .featured_title {
    text-align: left;
    margin-left: 5%;
    margin-top: 5%;
  }
.content-wrap #account_information .nav-tabs {
    margin: 0 0 0 0px;
  }
 
  .content-wrap .custome-amount {
    width: 74%;
    float: left;
    margin-right: 6%;
    margin-left: 0%;
  }

}

/*  ------- Card  Section End ------- */

/* --------------- Responsive Start ---------------*/

@media only screen and (max-width: 966px) {

  

 
}

@media only screen and (max-width: 600px) {
  #regForm {
    width: 90%;
  }

  .content-wrap input#customeamount {
    margin: 0 0 0px 0px;
  }

 
}

@media only screen and (min-width: 475px) and (max-width: 600px) {
  .form-horizontal .nav-tabs>li>a {
    font-size: 14px;
  }

  
.step-next{
    float:left !important;
}
 

  .content-wrap .custome-amount {
    width: 100%;
    float: left;
    margin: 0 0 5% 0 !important;
  }
}

@media only screen and (max-width: 463px) {
  .nav-tabs {
    
  }

}

/* --------------- Responsive End ---------------*/