.bg-custom{
	background-color: #FED766;
  }
  a:hover{
	  color:#00cdd4;
  }
   a{
	  color:#003f63;
  }
  #pre-launch{
	background-color: #FED766;

  }
  #how-it-works{
  background-color:#00CDD4;
  }

    body {
      font-family: 'Comfortaa', sans-serif;
      background-color: #F4F4F8;
      color: #333;
    }
    .hero {
      background: url('../img/reading.png') no-repeat center center/cover;
      color: white;
      padding: 6rem 1rem;
      text-align: left;
	  
    }
    .hero h1 {
      font-size: 2.5rem;
	  text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
	  width:70%
    }
    .hero h2 {
      font-size: 1.1rem;
	  text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
    }
    .btn-custom {
      background-color: #FE4A49;
      color: white;
      font-weight: bold;
    }
	.btn-custom:hover{
	  background-color: #009FB7;
	}
	.navbar-custom{
		background-color:#00CDD4;
	}
    .card {
      border: none;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
	footer a:hover{
		color:#FFC;
	}
	footer a{
		color:#FFF;
		font-weight:bold;
		font-size: 0.8rem;
		text-decoration: none
	}
    footer {
      background-color:#00CDD4;
	  color:#FFF;
		font-size: 0.8rem;
    }
    @media (max-width: 767px) {
      .hero h1 {
        font-size: 2rem;
      }
      .hero p {
        font-size: 1rem;
      }
    }
	#callout{
		display:none;
	}
.bg-yellow{
	background-image: var(--bs-gradient);
	background-color: #FED766;
}
.yellow{color: #FED766;
}
.red{color: #FE4A49;
}
.bg-red{
	background-image: var(--bs-gradient);
	background-color: #FE4A49;
}
.bg-blue{
	background-image: var(--bs-gradient);
	background-color: #00CDD4;
}
.bg-indigo{
	background-image: var(--bs-gradient);
	background-color: #6610f2;

}
#request .card-icon{
    width: 86px;
    text-align: center;
    height: 86px;
    vertical-align: middle;
}
.custom-circle {
    width: 25px;
    height: 25px;
    margin-left: -45px;
    text-align: center;
}
.author{
	
	max-width: 40%;
	margin-left:30px;
}
#success-message {
      display: none;
      margin-top: 10px;
    }
@media (max-width: 576px) {
  .form-floating label {
    white-space: normal;
	font-size: 0.85em;
        padding: .7rem .65rem;
  }
}
.tg{
	width:15px; margin-top:-3px
}