.tab button{
margin: 10px;
padding: 5px;
  }

/* Basic button styles */
.btn-0 {
  position: relative;
  /* display: block; */
  /* width: 250px; Adjust width if needed */
  /* height: 80px; Adjust height if needed */
  margin: 1rem auto;
  text-transform: uppercase;
  text-align: center;
  /* line-height: 80px; Vertically center the text */
  color: #ff6347; /* Initial button text color */
  border: 1px solid #ff6347; /* Border color */
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif; /* Button text font */
  font-weight: bold;
  text-decoration: none;
  overflow: hidden;
  background-color: transparent; /* Transparent background initially */
  z-index: 1; /* Make sure the text is on top of the background */
}

/* Button hover effect */
.btn-0::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6347; /* The background color of the button when hovered */
  transform: translateX(-100%); /* Initially hide the background to the left */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the slide-in effect */
  z-index: -1; /* Ensure the background stays behind the text */
}

/* Change text color on hover */
.btn-0:hover {
  color: #ffffff; /* Change text color when hovered */
}

/* Slide-in effect on hover */
.btn-0:hover::before {
  transform: translateX(0); /* Slide the background into view */
}





.btn-1::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300%; /* Start the background with an expanded size */
  height: 300%; /* Start the background with an expanded size */
  background-color: #ff6347; /* Background color on hover */
  transform: translate(-50%, -50%) scale(0); /* Initially scale the background to 0 */
  transition: transform 0.5s ease; /* Smooth transition for the expansion */
  z-index: -1; /* Ensure the background is behind the text */
}

/* Change text color on hover */
.btn-1:hover {
  color: #ffffff; /* Text color change on hover */
}

/* Center expansion effect on hover */
.btn-1:hover::before {
  transform: translate(-50%, -50%) scale(1); /* Expand the background from the center */
}







/* therd button  */
/* Base button styles */
.btn-3 {
  position: relative;
  margin: 1rem auto;
  text-transform: uppercase;
  text-align: center;
  color: #ff6347; /* Initial button text color */
  border: 1px solid #ff6347; /* Border color */
  border-radius: 5px;
  font-family: 'Open Sans', sans-serif; /* Button text font */
  font-weight: bold;
  text-decoration: none;
  overflow: hidden;
  background-color: transparent; /* Transparent background initially */
  z-index: 1; /* Make sure the text is on top of the background */
}

/* Button hover effect */
.btn-3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6347; /* The background color of the button when hovered */
  transform: translateX(100%); /* Initially hide the background to the right */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the slide-in effect */
  z-index: -1; /* Ensure the background stays behind the text */
}

/* Change text color on hover */
.btn-3:hover {
  color: #ffffff; /* Change text color when hovered */
}

/* Slide-in effect from right to left on hover */
.btn-3:hover::before {
  transform: translateX(0); /* Slide the background into view from right to left */
}







/* Button hover effect */
.btn-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6347; /* The background color of the button when hovered */
  transform: translateY(-100%); /* Initially hide the background above the button */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the slide-in effect */
  z-index: -1; /* Ensure the background stays behind the text */
}

/* Change text color on hover */
.btn-4:hover {
  color: #ffffff; /* Change text color when hovered */
}

/* Slide-in effect from top to bottom on hover */
.btn-4:hover::before {
  transform: translateY(0); /* Slide the background into view from top to bottom */
}







/* Button hover effect five*/
.btn-5::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6347; /* Background color on hover */
  transform: translateY(100%); /* Initially hide the background below the button */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the slide-in effect */
  z-index: -1; /* Ensure the background is behind the text */
}

/* Change text color on hover */
.btn-5:hover {
  color: #ffffff; /* Text color change on hover */
}

/* Slide-in effect from bottom to top on hover */
.btn-5:hover::before {
  transform: translateY(0); /* Slide the background into view from bottom to top */
}




/* button six  */
.btn-6::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6347; /* The background color of the button when hovered */
  transform: scaleX(0); /* Initially scale the background horizontally to 0 */
  transform-origin: center; /* Ensure scaling happens from the center */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the fill effect */
  z-index: -1; /* Ensure the background stays behind the text */
}

/* Change text color on hover */
.btn-6:hover {
  color: #ffffff; /* Text color change on hover */
}

/* Left and right background fill effect on hover */
.btn-6:hover::before {
  transform: scaleX(1); /* Fill the button by scaling the background from left and right */
}





/* seven button css  */
.btn-7::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6347; /* The background color of the button when hovered */
  transform: scale(0); /* Initially, scale the background to 0 */
  transform-origin: top left; /* Scale from the top-left corner */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the fill effect */
  z-index: -1; /* Ensure the background stays behind the text */
}

/* Change text color on hover */
.btn-7:hover {
  color: #ffffff; /* Change text color when hovered */
}

/* Fill the button from left corner to right bottom */
.btn-7:hover::before {
  transform: scaleX(1); /* Scale to fill the button from top-left to bottom-right */
}





/* last button  */
.btn-8 {
  position: relative;
  margin: 1rem auto;
  /* padding: 10px 20px; */
  text-transform: uppercase;
  text-align: center;
  color: #ff6347; /* Initial button text color */
  border: 1px solid #ff6347; /* Border color */
  font-family: 'Open Sans', sans-serif; /* Button text font */
  font-weight: bold;
  text-decoration: none;
  background-color: transparent; /* Transparent background initially */
  overflow: hidden;
  cursor: pointer; /* Make it clickable */
  z-index: 1; /* Ensure text stays on top */
  transition: color 0.3s ease-in-out; /* Smooth text color transition */
}

/* Button hover effect with diagonal sliding fill */
.btn-8::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ff6347; /* The background color of the button when hovered */
  transform: scaleX(0) scaleY(0); /* Initially, scale the background to 0 */
  transform-origin: top left; /* Scale from the top-left corner */
  transition: transform 0.5s ease-in-out; /* Smooth transition for the fill effect */
  z-index: -1; /* Ensure the background stays behind the text */
}

/* Change text color on hover */
.btn-8:hover {
  color: #ffffff; /* Change text color when hovered */
}

/* Diagonal sliding fill effect on hover */
.btn-8:hover::before {
  transform: scaleX(1) scaleY(1); /* Scale to fill the button diagonally from top-left to bottom-right */
}

.page-title{
    height: 200px;
  }
@media (max-width: 768px) {

  .tab{

padding: 10px;
}

  .page-title{
    height: 166px;
  }
}

.tab{

padding: 30px;
}
.tab button{
padding: 5px;
  }