/* ===== Custom Homepage Styles (local_home) ===== */
body{
  padding-left: 5%; padding-right: 5%;
}
.custom-hero {
  background-repeat: no-repeat;  background-position: center; 
  background-size: cover; text-align: center;
}
.headerlayer{
  color: #fff; display: flex; flex-wrap: wrap;
  padding: 3%;
}
.flex-1{
  flex:1; padding: 5%; min-width: 300px;
}
.mcfbg{
  background-repeat: no-repeat;   /* prevents tiling */
         /* scales to fill background-size: cover; */
  background-position: center;   /* centers the image */
}
.dark-flex{
  background-color:rgba(61, 59, 59, 0.3);
}
.custom-hero h1 {
  font-size: 2.8rem;
  margin-bottom: 10px;
}

.custom-hero p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  max-width: 50vh;
  margin-left: auto;
  margin-right: auto;
}

.custom-hero .btn {
  display: inline-block;
  background: #fff;
  color: #640D5F;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.2s ease;
}
.custom-hero .btn:hover {
  background: #ffdb57;
  color: #fff;
}

/* Features */
.features {
  display: grid; 
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px; padding: 60px 20px;  text-align: center;
  /*background: radial-gradient(circle, #ffdb57, #977bb6, #025752, #19196f);*/
}

.features .feature {
  background-color: rgb(255,255,255,0);
  padding: 20px;color:black;
  transition: transform .15s ease;
}
.features .feature:hover { transform: translateY(-4px); }
.pillars{
  width: 100%; 
  text-align: center;color: white;
  background: radial-gradient(circle, #ffdb57, #977bb6, #025752, #19196f);
;
}

/* Courses */
.courses {
  padding: 60px 20px;
  text-align: center;
}
.courses h2 {
  margin-bottom: 30px;
  font-size: 2rem;
  color: #0D1164;
}
.course-list {
  display: flex; flex-wrap: wrap;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.course {
  background: #fff;  border-radius: 12px;  overflow: hidden; 
  flex:1; min-width: 150;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); text-align: left;
}
.course:hover { transform: translateY(-4px); cursor: pointer; }
.course img { width: 100%; height: 160px; object-fit: cover; display: block; }
.course-content { padding: 15px; }
.course-content h4 { margin: 0 0 8px; color: #EA2264; }

/* Make sure content spans wide in Moove */
.path-local-home #region-main { width: 100%; }

.footermain {
    width: 100%; position: relative;  bottom: 0;
    background-color: #fff; text-align: center;
}

.footermain img {
    max-width: 100%; height: auto; display: inline-block;
}
.course-img{width: 150px; height: 100px;}

@media (max-width: 1000px) {
h3{display: none;}
}