@import "https://fonts.googleapis.com/css2?family=Shrikhand&display=swap";
@import "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200&display=swap";
@import "https://fonts.googleapis.com/css2?family=Merienda+One&display=swap";
@import "https://fonts.googleapis.com/css2?family=Inknut+Antiqua:wght@300&display=swap";
#nav-on-scroll,
.progress {
    position: fixed;
    width: 100%;
}
.navbar-nav,
li {
    display: inline-block;
}
.nav-heading,
a {
    text-decoration: none;
}
.join,
.nav-heading,
.navbar-toggler i {
    -webkit-text-fill-color: transparent;
}
.nav-heading,
footer h1,
footer h4 {
    font-size: 1.8rem;
}
h1{
   text-align: center;
   text-transform: capitalize;
   font-size: 1.5rem;
   margin-bottom: 3rem;
   font-weight: bold;
    
}

h2 {
    
    font-size: 1.25rem; /* Equivalent to fs-5 in Bootstrap */
    margin-top: 3rem; /* Equivalent to mt-5 in Bootstrap */
    margin-bottom: 1.5rem; /* Equivalent to mb-3 in Bootstrap */
    font-weight: bold;
}

h3{
    font-size: 1.25rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    font-weight: bold;
}
h4{
        font-size: 1.25rem; /* fs-5 equivalent (adjust as needed) */
    margin-top: 3rem; /* mt-5 equivalent (adjust as needed) */
    margin-bottom: 1.5rem; /* mb-3 equivalent (adjust as needed) */
    font-weight: bold;
}
h5 {
    font-size: 1.25rem; /* fs-5 equivalent (adjust as needed) */
    margin-top: 3rem; /* mt-5 equivalent (adjust as needed) */
    margin-bottom: 1.5rem; /* mb-3 equivalent (adjust as needed) */
    text-transform: capitalize; /* text-capitalize equivalent */
    font-weight: bold;
}









.join,
footer h4 {
    font-weight: 700;
}
:root {
  --gray: #7B66FF; /* Light gray color */
  --white:#C5FFF8; /* White color */
  --black: #009cde; /* Dark blue color */
  --pink: #5FBDFF; /* Light pink color */
  --paypal-pink: #cce4f6; /* Light blue color */ 
}


body {
    text-align: center;
    color: var(--gray);
    background-color: white;
    scroll-behavior: smooth;
}
::-webkit-scrollbar {
    width: 0;
}
.progress {
    height: 0.3rem;
    background: 0 0;
    z-index: 99;
}
#navbarSupportedContent ul li button i,
.nav-heading,
.navbar-toggler i,
.progress__highlight {
    background: linear-gradient(158deg, #91A6FF 22%, #91A6FF 90%, 
#FFFFFF 10%);
}
.progress__highlight {
    transition: width 0.15s linear;
}
#nav-on-scroll,
.navbar {
    transition-duration: 0.5s;
}
.navbar {
    padding: 0.3rem 0;
}
#nav-on-scroll {
    z-index: 9;
    background: #f8f9fa;
    box-shadow: 0.2rem 0.2rem 0.5rem var(--gray);
}
.navbar-brand img {
    width: 2.7rem;
    height: 3rem;
}
.nav-heading {
    position: relative;
    top: 0.2rem;
    left: -0.2rem;
    font-family: Shrikhand;
    transform: scaleX(1.1) scaleY(1.7);
    -webkit-background-clip: text;
}
.nav-item span,
.text-capitalize {
    font-family: Inknut Antiqua;
    font-size: 0.8rem;
}
#navbarSupportedContent ul li button,
.join {
    height: 3rem;
    background-color: #f2f2f2;
    box-shadow: inset 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.05), 0.15rem 0.25rem 0.1rem rgba(0, 0, 0, 0.17), 0.15rem 0.7rem 0.7rem rgba(0, 0, 0, 0.17), inset -0.15rem -0.15rem 0.2rem rgba(255, 255, 255, 0.1);
}
.navbar-toggler {
    border: none;
    outline: 0;
    padding: 0;
}
.navbar-toggler:focus {
    box-shadow: none;
}
.navbar-toggler i {
    position: relative;
    top: -0.4rem;
    left: -0.6rem;
    transform: rotate(270deg) scaleX(1.9) scaleY(2.4);
    -webkit-background-clip: text;
}
li {
    padding: 0 0.8rem;
}
a {
    color: var(--g);
}
#navbarSupportedContent ul li button {
    padding-left: 0;
    border: none;
    width: 3rem;
    border-radius: 0.5rem;
    border: 0.05rem solid var(--white);
}
#navbarSupportedContent ul li button i {
    position: relative;
    left: 0.2rem;
    top: 0.2rem;
    font-size: 1.5rem;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-item span {
    position: relative;
    top: 0.2rem;
    left: 0.1rem;
}
.join {
    width: 8rem;
    border: 0.1rem solid red;
    border-radius: 0.3rem;
    font-family: Inknut Antiqua;
    border: 0.05rem solid var(--gray);
    background: linear-gradient(158deg, #863fa6 22%, #e12c61 50%, #f46f46 80%);
    -webkit-background-clip: text;
}
main {
    width: 90%;
    overflow: hidden;
}
footer h1,
footer h4 {
    font-family: Inknut Antiqua;
}