body,html{
    width: 100%;
    margin: 0;
    height: 80PX;
   

}
#history{
  width: 100%;
  text-align: center;  
  justify-content: center;
   background-color:rgba(169, 117, 91, 0.473);
   color: #978b63;
   padding-top: 80px;
  }

/* Headings */
#history h2 {
  color:beige;
  margin-top: 20px;
  color: black;
  padding: 50px;
}
.p{
  color: #978b63;
  font-family: Helvetica;
}


#history h3 {
  
  font-weight: normal;
  font-style: oblique;
  }

#founder{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #883f08;
    font-family: Helvetica;
    padding-bottom: 50px;
  }


.founder-img {
  width: 300px;    /* resize image */
  height: 300px;    /* keep proportions */
  border-radius: 10px; /* soft corners */
  margin: 10px 0;
  display: flex;  /* puts image on its own line */
  margin-right: 20%;
  }
  
  .desc p{
    text-align: center;
    font-weight: 600;
    align-content: center;
    justify-content: center;
    
  }
  
  #Milestone{
    width: 100%;
    text-align: center;
    align-content: center;
    justify-content: center;
    background-color:rgba(169, 117, 91, 0.473);
  }
  .miles{
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
  }
  #orphanages img{
  width: 300px;
  height: 300px;

  }
  #refugehomes img{
   width: 300px;
  height: 300px;
}
#vunerable img{
  width: 300px;
  height: 300px;
}


#charism {
    display: flex;
    width: 80%;
    margin: 0 auto;
    text-align: center;
    background-color: brown;
    }

/* Charism block (stand-alone on top) */

#charism  h1,
#charism  img,
#charism  p {
    margin-bottom: 15px;
}

#charism  img {
    width: 200px;
    height: auto;
    padding: 10px;
    margin-left: 0;
    margin-right:auto ;
}

/* Flex container for the 3 sections */
#charism-sections {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* responsive on smaller screens */
    gap: 20px;
    margin-top: 30px;
    align-items: stretch; /* makes all children equal height */
}

/* Individual section cards */
#corevalues,
#spirituality,
#vision {
    background-color: #d9d7fe;
    border-radius: 10px;
    padding: 5px;
    flex: 1 1 250px; /* flexible width, min 250px */
    max-width: 300px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(139, 113, 26, 0.1);
    margin-left: 20px;
    font-family: Helvetica;
    display: flex;
    flex-direction:column;
    justify-content: space-between;

    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Hover effect */
#corevalues:hover,
#spirituality:hover,
#vision:hover {
    transform: scale(1.05); /* slight zoom */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2); /* deeper shadow */
}

/* Images */
#corevalues img,
#spirituality img,
#vision img {
    width: 150px;
    height: auto;
    margin: 0 auto 10px auto;
    transition: transform 0.3s ease;
}

/* Slight image lift on hover */
#corevalues:hover img,
#spirituality:hover img,
#vision:hover img {
    transform: translateY(-5px);
}

/* Headings */
h1{
    color: black;
    font-family: Arial, sans-serif;
    margin-bottom: 10px;
    padding: 50px;
}

h1 h2 {
    color: brown;
    font-family: Arial, sans-serif;
    margin-bottom: 10px;
}

/* Paragraphs */
p {
    font-size: 16px;
    line-height: 1.5;
    color: black;
}

#devotions{
    width: 100%;
     background-color:hsv(300, 22%, 75%);
     text-transform: none;
    text-decoration-color: coral;
  }
  
.dev img{
    width: 300px;
    height: 300px;
  }
  .dev h4{
    font-size: large;
    font-weight: 800;
    color: black;
   }