/* Override for anchor tags styled as buttons */
a.btn:hover,
a.btn:focus,
a.btn:active {
    color: #ffffff !important;
    background-color: #09f949 !important;
    border-color: #09f949 !important;
    text-decoration: none !important;
}


.header {
 
  	height: 60vh;
  	background-image: 
	  linear-gradient(to top, 
     rgba(0, 0, 0, 0.503),
     rgb(0, 170, 8)),
     url('../images/about-page/main_3.jpg');
  	 background-attachment: fixed;
	background-size: cover;
  	background-position: top;
  	position: relative;
 
  /*	clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%);*/
}

.brand-box {
  	position: absolute;
  	top: 40px;
  	left: 40px;
}

.brand { font-size: 20px; }

.text-box {
    color: #fff;
  	position: absolute;
  	top: 35%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	text-align: center;
}

.heading{
    font-size: 100px;

}
.heading-primary {
  	color: #fff;
  	text-transform: uppercase;

  	backface-visibility: hidden;
  	margin-bottom: 30px;
}

.heading-primary-main {
  	display: block;
  	font-size: 26px;
  	font-weight: 400;
  	letter-spacing: 5px;
}

.heading-primary-sub {
  	display: block;
  	font-size: 18px;
  	font-weight: 700;
  	letter-spacing: 7.4px;
}
/* Feature Banner */

.feature-banner {
      background-color: #fff;
      padding: 30px 0;
      border: 1px solid #eee;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
    .feature-item {
      text-align: center;
      padding: 0 15px;
    }
    .feature-icon {
      font-size: 2.5em;
      color: #3498db;
      margin-bottom: 10px;
    }
    .feature-title {
      font-size: 1.2em;
      color: #2c3e50;
      margin-bottom: 5px;
    }
    .feature-text {
      font-size: 0.9em;
      color: #7f8c8d;
      margin: 0;
    }


/* Purpose Section */
.purpose-section {
      background-color: #fff;
      padding: 60px 0;
      text-align: center;
    }
    .purpose-section h1 {
      font-size: 3em;
      color: #000;
      margin-bottom: 20px;
      font-weight: bold;
    }
    .purpose-section p {
      font-size: 1.2em;
      color: #333;
      max-width: 800px;
      margin: 0 auto;
    }


/* Mission and Vision Section */
   .mission-vision-section {
      padding: 40px 0;
      text-align: center;
    }
    .mission-card, .vision-card {
      background-color: #fff;
      border-radius: 10px;
      padding: 20px;
      width: 100%;
      min-height: 300px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      border: 1px solid #eee;
    }
    .mission-card .icon, .vision-card .icon {
      background-color: #e74c3c;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 auto 15px;
    }
    .mission-card .icon::before {
      content: "👁️";
      color: #fff;
      font-size: 1.5em;
    }
    .vision-card .icon::before {
      content: "🎯";
      color: #fff;
      font-size: 1.5em;
    }
    .mission-card h2, .vision-card h2 {
      font-size: 1.5em;
      color: #2c3e50;
      margin-bottom: 15px;
    }
    .mission-card p, .vision-card p {
      font-size: 1em;
      color: #7f8c8d;
      line-height: 1.5;
    }

/* Learner banner Section */
    .learner-section {
      padding: 60px 0;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .image-container {
      position: relative;
      border-radius: 10px; /* Adjusted to square corners instead of circle */
      overflow: hidden;
    
    }
    .image-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .image-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(11, 186, 26, 0.5), rgba(15, 214, 65, 0.5));
      border-radius: 10px; /* Match the container's border radius */
    }
    .text-container {
      padding-left: 40px;
      max-width: 500px;
    }
    .text-container h2 {
      font-size: 2.5em;
      color: #2c3e50;
      margin-bottom: 20px;
    }
    .text-container ul {
      list-style: none;
      padding: 0;
    }
    .text-container ul li {
      font-size: 1.1em;
      color: #7f8c8d;
      margin-bottom: 10px;
    }
    .text-container ul li:before {
      content: "✓";
      color: #e67e22;
      margin-right: 10px;
    }

    .footer-full-width {
    padding-left: 0 !important;
    padding-right: 0 !important;
}