style3.css

/* Navbar Styles */
.custhead{
  font-family: 'Montserrat', sans-serif;
}
.custom-navbar {
  width: 80%;
}
.custnav{
  border-radius: 25px;
  box-shadow: 2px 3px 8px 3px rgba(0, 0, 0, 0.449) inset;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: space-around;
  font-weight: 600;
}
.navalign{
  width: 80%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.navbar-brand {
  margin-right: 30px;
}
.navbar-nav .nav-link {
  padding: 0 20px;
}

/* Button Styles */
.custom-button {
  margin: 50px;
  border-radius: 15px; /* Curved edges */
  width: 400px; /* Custom width */
  height: 400px; /* Custom height */
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transitions for transform and box-shadow */
  cursor: pointer; /* Change cursor to pointer on hover */
  overflow: hidden; /* Ensure the shadow is visible */
  position: relative; /* Needed for the shadow effect */
  border: none;

}

.custom-button:hover {
  transform: scale(1.05); /* Scale up the button slightly on hover */
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Add a shadow on hover */
}

.custom-button:active {
  transform: scale(0.95); /* Scale down the button slightly when clicked */
  box-shadow: none; /* Remove shadow when clicked */
}

.button-1 {
  background-image: url('images/PXL_20230402_090317750.jpg'); /* Background image for button 1 */
}

.button-2 {
  background-image: url('images/PXL_20230402_120031175.jpg'); /* Background image for button 2 */
}


.button-title {
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 2.5rem; /* Adjust font size as needed */

}
a:hover {
  text-decoration: none;
}


.button-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* Allow the buttons to wrap to the next line if needed */
  gap: 50px; /* Maintain a consistent gap between the buttons */
  margin-top: 50px;
}

@media (max-width: 1200px) {
  .custom-button {
      width: 350px; /* Adjust width for large screens */
      height: 350px; /* Adjust height for large screens */
  }
}

@media (max-width: 992px) {
  .custom-button {
      width: 300px; /* Adjust width for tablets */
      height: 300px; /* Adjust height for tablets */
      margin: 30px;
  }
}

@media (max-width: 768px) {
  .button-container {
      flex-direction: column; /* Stack buttons vertically on mobile */
      align-items: center; /* Center-align buttons vertically */
  }

  .custom-button {
      width: 300px; /* Adjusted width for mobile devices */
      height: 300px; /* Adjusted height for mobile devices */
      margin-bottom: 20px; /* Space between vertically stacked buttons */
  }

  .button-1 {
      margin-top: 50px; /* Adjust margin for button 1 */
      margin-left: 0; /* Reset margin for button 1 */
  }

  .button-2 {
      margin-top: 20px; /* Adjust margin for button 2 */
      margin-left: 0; /* Reset margin for button 2 */
  }
}

@media (max-width: 576px) {
  .custom-button {
      width: 300px; /* Adjusted width for smaller devices */
      height: 300px; /* Adjusted height for smaller devices */
  }
}