@import url('https://fonts.googleapis.com/css2?family=Abel&family=Merriweather:wght@300&family=Source+Sans+Pro:wght@200&family=Ubuntu:wght@300&family=Vollkorn&family=Zen+Kaku+Gothic+New:wght@300&family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abel&family=Bitter&family=Comfortaa:wght@300&family=Hind+Siliguri:wght@300&family=Merriweather:wght@300&family=PT+Sans&family=Raleway:wght@200&family=Source+Sans+Pro:wght@200&family=Ubuntu:wght@300&family=Vollkorn&family=Zen+Kaku+Gothic+New:wght@300&family=Zen+Kurenaido&display=swap');

* {
  margin: 0;
  padding: 0;
  text-decoration: none;

}

/* ------Nav-bar----- */
.nav-bar {
  position: sticky;
  top: 0;
  z-index: 10;
}

.navbar-brand img {
  height: 40px;
  padding-left: 25px;
}

.dropdown-menu.show {
  display: block;
  background: #F8E2CF;
  border: none;
}

.dropdown-menu.show a:hover {
  background: #F6D7A7;
}

.navbar-nav li {
  padding: 0 10px;
}

.navbar-nav li a {
  color: #000 !important;
  font-weight: 300;
  text-align: center;
  font-family: 'Comfortaa', cursive;   // New font

}

.navbar-nav li a:hover {
  color: #FF4848 !important;
  transition: all 0.5s ease-in;    // New effect

}


.fa-stream {
  color: #000;
  font-size: 25px !important;
}

.fa-stream:hover {
  color: #FF4848 !important;
}

.navbar-toggler {
  outline: none !important;
}

/* ------home-section----- */
#title {
  background: #F8E2CF;
}

.container-fluid {
  padding-top: 20px;
  background: #F8E2CF;
}

.title-image {
  width: 60%;
  position: absolute;
  right: 30%;

}

.info-1 {
  padding-top: 100px;
}

.info-1 h1, p {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;


}

.info-1 h1 {
  font-family: 'Vollkorn', serif;
  color: #C70039;
  font-weight: bold;
  text-shadow: 2px 1px 5px #CF455C;
}

.info-1 p {
  font-family: 'Abel', serif;
  font-size: 17px;
  color: #E23E57;
}

.title-image:hover {
  transform: translate(2);
}

.bottom-img {
  width: 100%;
  background: #F8E2CF;
}



/* -------second-page------ */

#second-page {}


#second-page {
  padding-bottom: 100px;
  /* background: #FAF3F3; */
  background-image: radial-gradient(circle, #fcfdff, #f9f8fb, #f7f3f6, #f5eff1, #f2eaea);
}

.text-info-1 {
  padding-top: 9%;
  color: #000;
}

.text-info-1 h2 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
}

.text-info-1 p {
  font-family: 'Merriweather', serif;
}

.right-ctn {
  padding-top: 6%;
}

.btn-section {
  background: #EF4F4F;
  border-radius: 5px;
  box-shadow: 2px 4px 5px #BBBBBB;
  margin-bottom: 40px;
}

.btn-1, .btn-2 {
  color: #000;
  background: ;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bolder;
  padding: 8px;
  border-radius: 5px;
}

.btn-section-1 {
  padding-bottom: 20px;
  padding-top: 20px;
}

.btn-section-2 {
  padding-bottom: 20px;
  padding-top: 20px;
}

.btn-section:hover {
  transform: translateY(-10px);
}

.btn-1:hover, .btn-2:hover {
  text-decoration: none;
  color: black;
}



/* --------blood-type-neede-------- */

.upper-ctn hr {
  width: 18rem;
  border: 1px solid black;
  margin: auto;
}

.upper-ctn {
  padding-top: 3%;
}

.upper-ctn p {
  padding-top: 4%;
}

.col-lg-1 {
  margin-left: auto;
  padding-top: 3%;
  padding-bottom: 6%;
}

.upper-ctn h1 {
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
}

.upper-ctn p {
  font-family: 'Merriweather', serif;
  word-spacing: 2px;
}

< !-- ------Blood-stock-availablity---- -->

#blood-stock{

}
.stock{
  background: lightcoral;
}

.heading-section{
padding-bottom: 50px;
background: lightcoral;

}


#blood-stock hr{
  width: 18rem;
  border: 1px solid black;
  margin: auto;
}


.heading-section h1{
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
}

.main-section p{
  font-family: 'Merriweather', serif;
  word-spacing: 2px;
  padding: 10px;
}

.main-section{
  padding-bottom: 40px;
  background: lightcoral;

}

.btn-lg {
  width: 15rem;
  color: ghostwhite;
  background-color: #b30059;
  border: none;
  border-radius: 7px;
  margin-top: 35px;
}

.search-btn:hover {
  background-color: #ff0080;
  text-decoration: none;
  color: ghostwhite;
}

/* -------Doner-eligiblity------- */

#Eligiblity {
  text-align: center;
  background: ghostwhite;
  padding-top: 10px;

}

#Eligiblity h1{
  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
}

#Eligiblity hr{
  width: 18rem;
  border: 1px solid black;
  margin: auto;
}

.info-3 h4 {
  font-family: sans-serif;
  font-weight: 600;
  padding: 15px 20px;
}

.info-3 p {
  font-family: 'Merriweather', serif;
}

.diseases-card {
  padding-bottom: 25px;
}

.vaccine-img {
  width: 100px
}

.tattoo-img {
  width: 100px;
}

.card-deck {
  margin: 30px 25px;
}

.card {
  background-image: radial-gradient(circle, #ddd9e3, #dcd8e3, #dcd7e3, #dbd6e3, #dad5e3);
  border-radius: 3px;
}


/* ---------Donation-Process------ */


#Donation-Process {
  background-image: linear-gradient(to bottom, #e37171, #ea7373, #f17575, #f87676, #ff7878);
}

.donation-process h1 {

  font-family: 'Ubuntu', sans-serif;
  font-weight: 600;
  color: ghostwhite;
  text-shadow: 2px 1px 5px #CF455C;
}

.donation-process hr {
  width: 20rem;
  border: 1px solid #8d2b2b;
  margin: auto;
}

.donation-process h3 {
  font-family: 'Source Sans Pro', sans-serif;
  color: #8d2b2b;
  font-weight: bold;
  padding-bottom: 7px;
  padding-top: 7px;
}

.donation-process p {
  color: #fdd9d9;
  font-family: 'Merriweather', serif;
  font-size: 20px;
}

.donation-process img {
  width: 50px;
}

.card {
  box-shadow: 0 4px 4px #5c8a8a;
  /* width: 20rem; */
}

.card:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* ----------Registertion----------- */



#Registertion {
  padding: 80px 80px;
  background: #ed938c;
}


.blood-icon{
  height: 80px;

}

.btn-lg {
  width: 15rem;
  color: ghostwhite;
  background-color: #b30059;
  border: none;
  border-radius: 7px;
  margin-top: 35px;
}

.btn-lg:hover {
  background-color: #ff0080;
  text-decoration: none;
  color: ghostwhite;
}

.donation-icon{
  height : 100px;

}

.icon{
    padding: 30px;
}

iframe{
  padding-top: 25px;

}

.abc{
  padding-left: 27%;
}


/* ------------campaign----------- */

#campaign{
background: whitesmoke;
}

.camp-img{
  height: 400px;
  width: 100%;
}

/* ----------Footer---------- */


#footer{
  background: black;
  color: whitesmoke;
  padding: 110px;
}

.text-ctnt{
  padding-left: 15%;
}

.logo-img{
  height: 80px;
}





/* ----New---Registratin---form----  */

.list-bgrp{
  display:grid;
  align-items: center;

}

.R-form{
    /* background: #F8E2CF; */
    background-image: linear-gradient(to right bottom, #00deff, #27d3ff, #6bc5ff, #a5b2ff, #d59dfc, #e88de6, #f77ccc, #ff6eae, #ff6098, #ff5480, #ff4966, #ff434b);
}

.R-form h1{
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  color: #C70039;
  text-shadow: 2px 1px 5px white;
}

.R-form h6{
    color: #E23E57;
}
.second-div{
  padding-top: 20px;
}

.R-form input{
  margin-bottom: 15px;
  background: #D5D5D5;
  border-style: none;

}

.check_eligiblity{
  padding-top: 20px;
}



/* ------media-query------ */

@media (max-width: 1028px) {
  #title {
    text-align: center;
  }

  .title-image {
    position: static;
  }

 #footer .footer-ctnt{
   padding-bottom: 30px;
 }

}