body {
  font-family: "Figtree", sans-serif;
}

/* font-sizes  */
.text-80{
  font-size: 80px;
  font-weight: 700;
  line-height: 96px;
  letter-spacing: -0.05em;
}
.text-64{
  font-size: 64px;
  font-weight: 700;
  line-height: 76.8px;
  letter-spacing: -0.04em;
}
.text-55{
  font-size: 55px;
  font-weight: 700;
  line-height: 76.8px;
  letter-spacing: -0.04em;
}
.text-48{
  font-size: 48px;
  font-weight: 500;
  line-height: 57.6px;
  letter-spacing: -0.04em;
}
.text-40{
  font-size: 40px;
  font-weight: 600;
  line-height: 46px;
}
.text-32{
  font-size: 32px;
  font-weight: 500;
  line-height: 38.4px;
  letter-spacing: -0.05em;
}
.text-28{
  font-size: 28px;
  font-weight: 400;
  line-height: 32.2px;
}
.text-24{
  font-size: 24px;
  font-weight: 400;
  line-height: 28.8px;
  letter-spacing: -0.04em;
}
.text-20{
  font-size: 20px;
  font-weight: 400;
  line-height: 23px;
}
.text-18{
  font-size: 18px;
  font-weight: 400;
  line-height: 30px;
}

/* color  */
.brown-color{
  color: rgba(28, 3, 1, 1);
}
.grey-color{
  color: rgba(103, 103, 103, 1);
}
.gold-color{
  color: rgba(255, 168, 0, 1);
}
.red-color{
  color: rgba(178, 21, 4, 1);
}
.blue-color{
  color: rgba(23, 15, 73, 1);
}
.lb-color{
  color: rgba(111, 108, 144, 1);
}

/* background color  */
.red-bg{
  background-color: rgba(178, 21, 4, 1);
}
.pink-bg{
  background-color: rgba(255, 168, 0, 0.1);
}
.brown-bg{
  background: rgba(28, 3, 1, 1);
}
.gold-bg{
  background-color: rgba(255, 168, 0, 1);
}
.blur-whitebg{
  background-color: rgba(255, 255, 255, 0.842);
}

/* nav bar  */
#home{
  color: rgba(178, 21, 4, 1);
}
.navbar{
  z-index: 1000;
}
.logbtn{
  background-color:rgba(178, 21, 4, 1) ;
  color: white;
  &:hover{
    background: white;
    color: rgba(178, 21, 4, 1) ;
    border: 2px solid rgba(178, 21, 4, 1) ;
  }
}
.btn-brown-con{
  color: white;
&:hover{
  color:  rgba(178, 21, 4, 1) ;
  border: 2px solid rgba(28, 3, 1, 1);
}
}

.arrow-icon {
  color: rgba(28, 3, 1, 1);
   padding:10px;
   font-size:20px;
   border-radius:50%;
   background-color: white;
}

.arrow-icon:hover {
  color: white;
  background-color: rgba(178, 21, 4, 1); /* Change background and text color on hover */
}


/* first section */
#first_section {
  background: radial-gradient(53.74% 62.32% at 44.5% 47.63%, #B21504 0%, #4C0902 70.08%);
  display: flex; 
  flex-direction: column;
  justify-content: flex-end; /* Push content to the bottom */
}
#hero-img{
  padding-top: 20%;
}
#astroimg {
 margin-top: 6%;
}

/* second section  */
#google-play{
  background: linear-gradient(56.02deg, #E94555 4.25%, #FAC411 34.43%, #59BB6A 68.59%, #3EC3F0 93.75%);
}
#app-store{
  background: linear-gradient(236.02deg, #1C0301 21.09%, #535251 100%);
}

/* third section  */

/* fourth section  */
#fourth-section {
  z-index: 1;
}
#fourth-section{
  margin-top: 100px;
}

/* fifth section  */
#fifth-section {
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
}

/* sixth section  */
/* testimonials  */
.mx-auto{
  text-align: center;
}
.navigation-btn{
  margin-top: -25%;
}

/* seventh section  */
#seventh-section{
  margin-top: 300px;
  background-image: url('./assets/home page/Rectangle 2096.png');
  background-size: cover;
  background-position: center;
  height: 600px;
  width: 100%;
}
.seventh-content{
  padding-top: 100px;
}

/* eighth section  */
.eight-content{
  margin-top: 100px;
  margin-bottom: 50PX;
}

/* ninth section  */
/* Accordion button styles */
.accordion {
  width: 100%;
  max-width: 600px;
  margin: 20px auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.accordion-item {
  border-bottom: 1px solid #ccc;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f1f1f1;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.accordion-header:hover {
  background-color: #e0e0e0;
}
.icon-wrapper i {
  font-size: 20px;
  color: #000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: #fff;
  padding: 0 15px;
}
.accordion-content p {
  margin: 15px 0;
}
.ninth-section{
  margin-top: 100px;
}
.accordion.active .icon-wrapper i {
  transform: rotate(180deg); /* Rotate the icon */
}

/* footer  */
hr{
  margin-top: 120px;
  margin-bottom: 50px;
}
.footer-content{
  justify-content: center;
}

/* responsive styles */
@media screen and (max-width: 1200px) {
  #hero-img{
    display: none;
  }
  .text-64{
    font-size: 40px;
    line-height: 50px;
  }
  .text-48{
    font-size: 30px;
  }
  #first_section{
    height: 620px;
  }
  /* sixth section  */
  .navigation-btn{
    display: none !important;
  }
  /* seventh section  */
  #seventh-section{
    margin-top: 30px;
  }
  /* eighth section  */
  .eight-content{
    margin-top: 50px;
  }
  /* ninth section  */
  .ninth-section{
    margin-top: 50px;
  }
  /* footer  */
  hr{
    margin-top: 50px;
  }
}
@media screen and (max-width: 992px) {
  #hero-img{
    display: none;
  }
  .text-64{
    font-size: 40px;
    line-height: 50px;
  }
  .text-48{
    font-size: 30px;
  }
  #first_section{
    height: 620px;
  }
  /* sixth section  */
  .navigation-btn{
    display: none !important;
  }
  /* seventh section  */
  #seventh-section{
    margin-top: 30px;
  }
  /* eighth section  */
  .eight-content{
    margin-top: 50px;
  }
  /* ninth section  */
  .ninth-section{
    margin-top: 50px;
  }
  /* footer  */
  hr{
    margin-top: 50px;
  }
}
@media screen and (max-width: 768px) {
  #hero-img{
    display: none;
  }
  .text-64{
    font-size: 40px;
    line-height: 50px;
  }
  .text-48{
    font-size: 30px;
  }
  #first_section{
    height: 620px;
    text-align: center;
    justify-content: center;
  }
  /* sixth section  */
  .navigation-btn{
    display: none !important;
  }
  /* seventh section  */
  #seventh-section{
    margin-top: 30px;
  }
  /* eighth section  */
  .eight-content{
    margin-top: 50px;
  }
  /* ninth section  */
  .ninth-section{
    margin-top: 50px;
  }
  /* footer  */
  hr{
    margin-top: 50px;
  }
}
@media screen and (max-width: 600px) {
  #hero-img{
    display: none;
  }
  .text-64{
    font-size: 40px;
    line-height: 50px;
  }
  .text-48{
    font-size: 30px;
  }
  #first_section{
    height: 620px;
  }
  /* sixth section  */
  .navigation-btn{
    display: none !important;
  }
  /* seventh section  */
  #seventh-section{
    margin-top: 30px;
  }
  /* eighth section  */
  .eight-content{
    margin-top: 50px;
  }
  /* ninth section  */
  .ninth-section{
    margin-top: 50px;
  }
  /* footer  */
  hr{
    margin-top: 50px;
  }
}
@media screen and (max-width: 375px) {
  #hero-img{
    display: none;
  }
  .text-64{
    font-size: 40px;
    line-height: 50px;
  }
  .text-48{
    font-size: 30px;
  }
  #first_section{
    height: 620px;
  }
  /* sixth section  */
  .navigation-btn{
    display: none !important;
  }
  /* seventh section  */
  #seventh-section{
    margin-top: 30px;
  }
  /* eighth section  */
  .eight-content{
    margin-top: 50px;
  }
  /* ninth section  */
  .ninth-section{
    margin-top: 50px;
  }
  /* footer  */
  hr{
    margin-top: 50px;
  }
}