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

  }
  #how-it-works{
  background-color:#00CDD4;
  }
.navbar a.navbar-brand{
font-size: 0.9em;
}
    body {
      font-family: 'Comfortaa', sans-serif;
      background-color: #F4F4F8;
      color: #333;
    }
	body *{
		 font-family: 'Comfortaa', sans-serif;
	}
    .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;
    }
	 footer.dark {
      background-color:#99CDD4;
	  padding: 20px;
	  color:#666;
	 }
	 footer.dark a{
	  color:#666;
	 }
	 footer.dark a:hover{
	  color:#FFF;
	 }
	 footer img {
		  filter: grayscale(100%);
		  opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
		}
		
	footer img:hover {
		  filter: grayscale(0%);
		  opacity: 1;
		}

footer.dark a{
	 opacity: 0.6;
  transition: filter 0.3s ease, opacity 0.3s ease;
	
}
footer.dark a{
	 opacity: 1;
}

    @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;
	  text-align: center;
    }
#preview{
      display: none;
}
#preview  h1{
		text-align:left;
			font-size: 1.5em;
	}
#preview h2{
		text-align:left;
			font-size: 1.2em;
	}
#preview{
		text-align:left;
		font-size: 0.85em;
	}
.excerpt {
    position: relative;
    max-height: 150px;
    overflow: hidden;
    line-height: 1.6;
    color: #111;
}
#preview .fade {
        position: relative;
		opacity:1;
    margin-top: -106px;
    inset: auto 0 0 0;
    height: 106px;
    background: linear-gradient(180deg, transparent, #F4F4F8);
}	
.hint {
    font-size: 12px;
    color: var(--muted);
}

.plans button.active {
    border-color: #4f46e5;
    box-shadow: 0 0 0 4px #eef2ff;
}

.plans button {
    width: 100%;
    text-align: left;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 14px 16px;
    background: #fff;
}
#payment_note{
	display:none;
}
#hidden{display: none;}
@media (max-width: 576px) {
  .form-floating label {
    white-space: normal;
	font-size: 0.85em;
        padding: .7rem .65rem;
  }
}
.tg{
	width:15px; margin-top:-3px
}

.progress-container {
      position: relative;
      width: 200px;
      height: 200px;
	  margin-top:-200px;
    }


    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .percentage {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 2rem;
      font-weight: bold;
      color: #00CDD4;
    }

    .loading-text {
      margin-top: 30px;
      font-size: 1.2rem;
      text-align: center;
    }
	
	  svg {
  stroke-dasharray: 269.7405090332031px;
  stroke-dashoffset: 0;
  animation: heartBeat 190s linear reverse infinite;
  transform: rotate(-90deg);
}

@keyframes heartBeat {
  50% {
    stroke-dashoffset: 269.7405090332031px;
  }
  50.01% {
    stroke-dashoffset: -269.7405090332031px;
  }
}