/*Google Map*/
.google-map {
    position: relative;
    width: 75%;
    padding-bottom: 45%; 
    margin: 0 auto;
    margin-bottom: 5%;
}
  
.google-map iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 5px solid #ff912a;
}
  
@media only screen and (max-width: 600px) {
    .google-map {
        padding-bottom: 150%; 
    }
}

h2{
    text-align: center;
}

/*Buttons*/
/* General button styling */
.custom-button {
  width: 85%;
  padding: 14px 20px;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
  font-weight: 600;
  border-radius: 1.5vh;
  background-color: white;
  color: #333;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  margin-bottom: 5%;
}

/* Hover effect */
.custom-button:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
  transform: translateY(-5px);
  text-decoration: none;
}

/* Individual color accents for brand identity */
.young-leaders {
  border-left: 1.5vh solid #7413dc;
}

.badge-placement {
  border-left: 1.5vh solid #00a794;
}

.about-us {
  border-left: 1.5vh solid #ffb4e5;
}

/*Page Divider*/

.degree-bl{
    width:100%;
    height:100px;
    left:0px;
    background: linear-gradient(to right bottom, #0A3786 49%, #f8f8f8 50%),    linear-gradient(-50deg, #f8f8f8 16px, #000 0);
}
  
.degree-br {
    width: 100%;
    height: 100px;
    left: 0;
    background: linear-gradient(to left bottom, #0A3786 49%, #f8f8f8 50%),    linear-gradient(50deg, #f8f8f8 16px, #000 0);
}
  
  
.degree-tl{
    width:100%;
    height:100px;
    left:0px;
    background: linear-gradient(to left bottom, #f8f8f8 49%, #0A3786 50%);
}
  
.degree-tr {
    width: 100%;
    height: 100px;
    left: 0;
    background: linear-gradient(to right bottom, #f8f8f8 49%, #0A3786 50%);
}

.colour-block {
    background:#0A3786;
    width:100%;
    padding: 7.5% 7.5% 5% 7.5%;
    padding-top: 100px;
    color:#F9A930;
}

.colour-block h2 {
    text-shadow: 1px 2px 3px #f9a93080 ;
    font-size: xx-large;
}
  
.white-block {
    background:#f8f8f8;
    width:100%;
    padding: 7.5% 7.5% 5% 7.5%;
    color:#0A3786;
}

.white-block h2 {
    text-shadow: 1px 2px 3px #0A378680;
    font-size: xx-large;
}
  
@media only screen and (max-width: 1000px) {
    .colour-block {
      background:#0A3786;
      width:100%;
      padding: 10% 5% 5% 5%;
      padding-top: 100px;
      color:#F9A930;
    }
    
    .white-block {
      background: #f8f8f8;
      width: 100%;
      padding: 20% 5% 5% 5%; /* Adjusted padding for better mobile experience */
      color: #0A3786;
    }
    
}

/*Javascript*/
.fromright {
  position: relative;
  right: -100%;
  opacity: 0;
  transition: right 0.75s ease-out, opacity 0.75s ease-out;
}

.fromright.active {
  right: 0;
  opacity: 1;
}

.fromleft {
  position: relative;
  left: -100%;
  opacity: 0;
  transition: left 0.75s ease-out, opacity 0.75s ease-out;
}

.fromleft.active {
  left: 0;
  opacity: 1;
}


.hero {
  width: 100%;
  border-bottom: 0.5vh solid #9d9d9d;
}

.columns {
  display: grid;
  grid-template-columns: 17.5% 17.5% 30% 17.5% 17.5%; /* Custom column sizes */
  width: 100%;
  background-color: #7413dc;
  padding: 10px;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2vh;
}

.box img {
  width: auto;
  height: 25vh; /* Fixed height for consistency */
  object-fit: cover;
  border: 0.5vh solid white;
  border-radius: 0.5vh;
}

/* 🔹 Updated Necker Image Styling */
.large {
  display: flex;
  justify-content: center;
  align-items: center;
}

.large img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* 🔹 Image Rotations */
.hero_angle {
  transform: rotate(10deg);
}

.hero_angle_inverted {
  transform: rotate(-10deg);
}

/* 🔹 Responsive Design */

/* 🖥️ Tablets (1024px and below) */
@media (max-width: 1024px) {
  .large img {
    margin: auto;
    max-width: 80%;
}
.columns {
  grid-template-columns: 1fr;
}

}

/* 📱 Mobile Phones (600px and below) */
@media (max-width: 600px) {
  .columns {
      grid-template-columns: 1fr;
  }

  .box img {
      height: auto; 
      max-width: 90%; 
  }

  .large img {
      max-width: 80%; 
  }
}

@media (max-width: 1111px) {  
  .hero_angle {
    display: none;
  }
  
  .hero_angle_inverted {
    display: none;
  }
}


.button {
  border-bottom: 0.1px solid #eeeeee; 
  border-left: 0.1px solid #ececec;
  border-right: 0.1px solid #ececec;
  border-top: 0.1px solid #eaeaea;
  width: 85%;
  padding: 2.5%;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  overflow: hidden;
  border-radius: 1.5vh; 
  background-color: #fff; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
  transition: all 0.3s ease;
  margin-bottom: 5%;
}

.button:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.45); 
  transform: translateY(-5px); 
}

.button img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}