/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
  :root {
    font-size: 18px; /* Default base size for larger screens (desktops) */
}

/* Font size classes using rem units */
.fontSize1 {
  font-size: 2.2rem; /* 40px if base size is 16px */
}

.fontSize2 {
  font-size: 2rem; /* 36px if base size is 16px */
}

.fontSize3 {
  font-size: 1.78rem; /* 32px if base size is 16px */
}

.fontSize4 {
  font-size: 1.1rem; /* 20px if base size is 16px */
}

.fontSize5 {
  font-size: 0.89rem; /* 16px if base size is 16px */
}

.fontSize6 {
  font-size: 0.71rem; /* 16px if base size is 16px */
}


  .imageContainer {
    height: 37rem; /* Adjust height for mobile devices */
    background-position: center center; /* Center the image */
}   

.Footercontainer1{
  
  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.75em; /* Adjust size for smaller screens */
}
.footlogo img {
  width: 50%;
  /* height: 45%; */
  left: -26%;
  top: -15%;
  transform: scale(1.2);

}
}