* {
  box-sizing: border-box;
}

/* Center website */
.main {
  max-width: 1080px;
  margin: auto;
}

.title, .school_Title {
  width: 100%; /* Full width of the container */
  text-align: center; /* Center the text inside the title */
  margin-bottom: 20px; /* Add some space below the title */
}

h1 {
  font-size: 50px;
  word-break: break-all;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -16px;
}

/* Add padding BETWEEN each column */
.row,
.row>.column {
  padding: 8px;
}

/* Create three equal columns that floats next to each other */
.column {
  float:left;
  width: 33.333333333%;
  display: none;
  /* Hide all elements by default */
}

/* Clear floats after rows */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Content */
.content {
  padding: 10px;
}

/* The "show" class is added to the filtered elements */
.show {
  display: block;
}

/* Style the buttons */
.btn {
  text-decoration: none;
  /* Text color for links */
  display: inline;
  /* Make links block-level for spacing */
  margin-bottom: 20px;
  margin-right: 10px;
  /* Optional margin for spacing */
  background-color: rgba(255, 255, 255, 0.8);
  /* Background color for the entire aside */
  padding: 10px;
  /* Add padding to create individual boxes */
  border: 2px solid rgb(0, 33, 91);
  /* Border for individual boxes */
  border-radius: 50px;
  /* Rounded corners for individual boxes */
  box-shadow: 0 0 20px rgba(0, 34, 92, 0.9);
  cursor: pointer;
  color: #00215b;
}

.btn:hover {
  background-color: rgba(0, 33, 91, 0.2);
}

.btn.actives {
  color: #ee4924;
  transform: scale(1.2);
  box-shadow: 5px 5px 10px -2px#ee4924;
}

h1 {
  text-decoration: none;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #00215b;
}

h2 {
  text-decoration: none;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: underline;
  color: #00215b;
}

h3 {
  text-decoration: none;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #00215b;
  margin-left: -20px;
}

p {
  text-align: left;
  max-width: 600px;
  /* Adjust the max-width as needed */
  margin: 20px auto;
  font-family: Arial, Helvetica, sans-serif;
  color: #000000;
  font-weight: 500px;
  opacity: 1;
}

/* Tablet view: 2 columns */
@media (max-width: 960px) {
  .btn{
  margin-left: 20px;
  }
  .column {
    width: 50%; /* Each column takes up half the width */
  }
}

/* Mobile view: 1 column */
@media (max-width: 600px) {
  .column {
    width: 100%; /* Each column takes full width */
  }

  .title, .school_Title{
    width: 400px;
    margin-left: 10%;
  }

  h1,
	h2,
	h3 {
		font-size: x-large;
	}
}