/* Responsive adjustments for very small screens (e.g., small phones) */
@media (max-width: 576px) {
  :root {
    font-size: 16px; /* Default base size for larger screens (desktops) */
}

/* Font size classes using rem units */
.fontSize1 {
    font-size: 2.5rem; /* 40px if base size is 16px */
}

.fontSize2 {
    font-size: 2.25rem; /* 36px if base size is 16px */
}

.fontSize3 {
    font-size: 2rem; /* 32px if base size is 16px */
}

.fontSize4 {
    font-size: 1.25rem; /* 20px if base size is 16px */
}

.fontSize5 {
    font-size: 1rem; /* 16px if base size is 16px */
}

.fontSize6 {
  font-size: 0.8rem; /* 16px if base size is 16px */
}

  .imageContainer {
    height: 37rem; /* Adjust height for smaller mobile devices */
    background-position: center center; /* Center the image */
}

.Footercontainer1{
  /* Adjust height for smaller mobile devices */
  background-position: center center; /* Center the image */
}

  .logo img {
    width: 100%; 
    height: 45%;
    left:0%;
    top:-5%; 
    transform: scale(1.3);
  }

  .card-container{
    display: grid;
    /* gap:17px */
   }

   .card{
    width:100%;
    max-width: 300px;
    height: 100%;
   }

   .about-container {
    flex-direction: row; /* Row layout for larger screens */
}

.about-text-box {
    position: absolute;
    top: 59%;
    left: 65%; /* Adjust text box positioning on wider screens */
    transform: translate(-55%, 7%);
    width: 30vh;
}

.mobile-container {
  flex-direction: row;
  align-items: baseline;
  text-align: left;
}

.form-group {
  flex-direction: column; /* Stack vertically on smaller screens */
  align-items: flex-start;
}

.form-group label,
.form-group input {
  width: 100%; /* Full width on mobile */
}

.containerMaplebkg {
  flex-direction: column; /* Stack the elements vertically on smaller screens */
  height: auto;
}

.containerMaple, .bazzarheader {
  width: 100%; /* Full width on small screens */
  padding: 5%; /* Add more padding for mobile */
}

.arrow-circle {
  
  padding: 0.5em;
}
.footlogo img {
  width: 48%;
  /* height: 45%; */
  left: -26%;
  top: -15%;
  transform: scale(1.2);

}


}

@media (max-height: 799px) {
    
.containerMaple1 {
    /* padding: 5%; */
    height: 63vh;   
    
    }
.about-text-box {
            top: 55%;
            left: 64%;
            width: 34vh;
            padding: 1% 4%
    }

.learnmore{
        margin-left: 6rem !important;
}
}