body {
  font-family: "Figtree", sans-serif;
}
/* font-sizes  */
.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-32{
    font-size: 32px;
    font-weight: 500;
    line-height: 38.4px;
    letter-spacing: -0.05em;
    }
    .text-80{
    font-size: 80px;
    font-weight: 700;
    line-height: 96px;
    letter-spacing: -0.05em;
    }
    .text-40{
    font-size: 40px;
    font-weight: 600;
    line-height: 46px;
    }
    .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  */
    .navbar{
        z-index: 1000;
        border-bottom: 5px solid rgba(178, 21, 4, 1) ;
    }
    /* hero section  *//* Astro Container styling */
.astro-container {
  padding-top: 100px; /* Padding to adjust space above the image */
  position: relative; /* Ensure the content is positioned correctly inside the container */
  height: 600px; /* You can adjust the height as needed */
  width: 100%;
}

/* Background image */
.bg-image {
  position: absolute; /* Ensure the image stays behind the content */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Makes sure the image covers the entire container without stretching */
  z-index: 1; /* Ensure the image stays behind the content */
}

/* Content styling */
.content {
  z-index: 2; /* Ensure content is above the background image */
  top: 50%; /* Vertically center the content */
  left: 50%;
  transform: translate(-50%, -50%); /* Center content horizontally and vertically */
  text-align: center; /* Center-align the text */
}
/* Responsive adjustments */
@media (max-width: 768px) {
  .astro-heading {
      font-size: 2.2rem;
  }
  .astro-subheading {
      font-size: 1rem;
  }
}

    #service{
      color: rgba(178, 21, 4, 1);
    }
    .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-12 {
    background-image: url('./assets/services page/sun.png'); /* Replace with your actual sun image path */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 255px; /* Keeps background height to 255px */
    height: 600px;
}
#first-section{
    margin-top: 100px;
}
/* Styling for the iPhone image */
.img1 {
    width: auto;
    height: 780px;
    display: block;
    margin: 0 auto;
    margin-top: -20%;
}

/* second section  */
#second-12 {
    background-image: url('./assets/services page/sun.png'); /* Replace with your actual sun image path */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 255px; /* Keeps background height to 255px */
    height: 600px;
    margin-top: 100px;
}
#second-section{
    margin-top: 150px;
}

/* third section  */
#third-12 {
    background-image: url('./assets/services page/sun.png'); /* Replace with your actual sun image path */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 255px; /* Keeps background height to 255px */
    height: 600px;
    margin-top: 100px;
}
#third-section{
    margin-top: 150px;
}

/* fourth section  */
#fourth-12 {
    background-image: url('./assets/services page/sun.png'); /* Replace with your actual sun image path */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 255px; /* Keeps background height to 255px */
    height: 600px;
    margin-top: 100px;
}
#fourth-section{
    margin-top: 150px;
}

/* fifth section  */
#fifth-12 {
    background-image: url('./assets/services page/sun.png'); /* Replace with your actual sun image path */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 255px; /* Keeps background height to 255px */
    height: 600px;
    margin-top: 100px;
}
#fifth-section{
    margin-top: 150px;
}

/* sixth section  */
#sixth-12 {
    background-image: url('./assets/services page/sun.png'); /* Replace with your actual sun image path */
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: auto 255px; /* Keeps background height to 255px */
    height: 600px;
    margin-top: 100px;
}
#sixth-section{
    margin-top: 150px;
}

/* seventh 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%);
  }

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

/* Responsive styles */
@media screen and (max-width: 768px) {
    /* Adjust background size and height for smaller screens */
    #first-12 {
        background-size: auto 150px; /* Reduce background image size */
        height: auto; /* Let the container height adjust based on content */
        margin-top: 50px; /* Reduce margin for smaller screens */
    }
    #second-12 {
        background-size: auto 150px; /* Reduce background image size */
        height: auto; /* Let the container height adjust based on content */
        margin-top: 50px; /* Reduce margin for smaller screens */
    }
    #third-12 {
        background-size: auto 150px; /* Reduce background image size */
        height: auto; /* Let the container height adjust based on content */
        margin-top: 50px; /* Reduce margin for smaller screens */
    }
    #fourth-12 {
        background-size: auto 150px; /* Reduce background image size */
        height: auto; /* Let the container height adjust based on content */
        margin-top: 50px; /* Reduce margin for smaller screens */
    }
    #fifth-12 {
        background-size: auto 150px; /* Reduce background image size */
        height: auto; /* Let the container height adjust based on content */
        margin-top: 50px; /* Reduce margin for smaller screens */
    }
    #sixth-12 {
        background-size: auto 150px; /* Reduce background image size */
        height: auto; /* Let the container height adjust based on content */
        margin-top: 50px; /* Reduce margin for smaller screens */
    }

    /* Adjust iPhone image for tablet and smaller devices */
    .img1 {
        height: 500px; /* Smaller height for mobile */
        margin-top: 0; /* Remove negative margin */
    }
}

@media screen and (max-width: 480px) {
    #first-12 {
        background-size: auto 100px; /* Further reduce background image size */
        margin-top: 30px;
    }
    #second-12 {
        background-size: auto 100px; /* Further reduce background image size */
        margin-top: 30px;
    }
    #third-12 {
        background-size: auto 100px; /* Further reduce background image size */
        margin-top: 30px;
    }
    #fourth-12 {
        background-size: auto 100px; /* Further reduce background image size */
        margin-top: 30px;
    }
    #fifth-12 {
        background-size: auto 100px; /* Further reduce background image size */
        margin-top: 30px;
    }
    #sixth-12 {
        background-size: auto 100px; /* Further reduce background image size */
        margin-top: 30px;
    }

    .img1 {
        height: 400px; /* Smaller image for mobile phones */
    }
    .content{
      margin-top: 100px;
    }
    .hero-content{
      margin-bottom: 100px;
      margin-top: 50px;
    }
}
.hero-main-con{
  font-size: 84px;
}
@media screen and (min-width: 375px) {
  .hero-main-con h1{
    padding: 0px 30px 0px 30px;
    font-size: 70px;
    line-height: 1;
  }
}