body{
  font-family: Leelawadee,"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
  background-color:#f5f5f7;
  color:#222;
  -webkit-font-smoothing:antialiased;
}
@font-face{
  font-family: Arvo Bold;
  src:local('../Arvo/Arvo-Bold'),url('../Arvo/Arvo-Bold.ttf') format('truetype');
}
@font-face{
  font-family: Arvo Bold;
  src:local('../Arvo/Arvo-Bold'),url('../Arvo/Arvo-Bold.ttf') format('truetype');
}

/* Typography resets */
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
p,
blockquote,
th,
td {
  margin: 0;
  padding: 0;
  font-family: 'Crimson Text', serif;
   }

/* Default Link Styles */
a {
    color: green;
    text-decoration: none;
    font-family: 'Crimson Text', serif;
    line-height: inherit; 
  }
  a:hover, a:focus 
    {
      color: #0078a0; 
    }

/* Default paragraph styles */
p {
    font-family: 'Crimson Text', serif;
    font-weight: normal;
    font-size: 1rem;
    line-height: 2.0rem;
    margin-bottom: 1.25rem;
    text-rendering: optimizeLegibility; 
  }

/* Default header elements */
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.4; 
  }
  h1,h2{
    color:#000086;
    text-align:center;
    color: red;
    font-weight: lighter;  
    font-family: 'Crimson Text', serif;
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    margin-top: 0.5rem;
    margin-bottom: 0.8rem;
    line-height: 1.8; 
  }
  h3,h4,h5,h6{
    text-align:left;
    text-transform: capitalize;
    font-weight: lighter;  
    font-family: 'Crimson Text', serif;
    font-weight: normal;
    font-style: normal;
    text-rendering: optimizeLegibility;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
  }
h1 {
  font-size: 2.125rem; 
  color: #b30000;
}
h2 {
  font-size: 1.9875rem; 
  font-size: 35px;  
  font-family: "Roboto Slab";
  font-weight: bolder;
  color: #b30000;
}
h3 {
  font-size: 1.675rem; 
  font-size: 25px;  
  color: #b30000;
  font-family: "Roboto Slab";
  text-transform: capitalize;
}
h4 {
  font-size: 1.325rem; 
  font-size: 25px;
  color: #b30000;
}
h5 {
  font-size: 1.225rem; 
}
h6 {
  font-size: 1rem; 
  font-size: 20px;
  font-family: "Roboto Slab";
  text-transform: capitalize;
  color: #b30000;
}
/*image element*/
img{
  width: auto;
  height: auto;
} 
/*list elements*/
ol,ul,li{
font-family: 'Crimson Text', serif; 
line-height: 1.8;
}

/*table property*/
table{
  width: 100%;
  margin: 20px;
  padding: 0px;
  caption-side: top;
  text-align: left;
  border: 0.01em solid #1E2E38;
  border-spacing: 0.02em;
}
th{
  background-color: #17D8D8 ;;
}
td{
  border: 0px solid #1E2E38 ;
  padding: 10px;
}

/*the navigation element*/
#navi{

}
#navi ul li a{  
    font-family:"Roboto Slab",Leelawadee,"Helvetica Neue", "Helvetica", 
    Helvetica, Arial, sans-serif;
    font-size: 13px;

}
#navi ul li a:hover,
#navi ul li a.active{
font-family:"Roboto Slab",Leelawadee,"Helvetica Neue", "Helvetica", 
Helvetica, Arial, sans-serif;
background-color:red;
}

p{  
  color:#000;
  font-size: 20px;
  text-align:justify;
  font-family: 'Crimson Text', serif;
}
ul li {
  font-size: 18px;
  text-align:justify;
  font-family:Arvo Bold; 
}
ul li a {
  background-color:rgba(100, 100, 100, 0.5);
}
span{
  color:#2e4450;
  font-size: 16px;
  text-align:justify;
  font-family:Arvo Bold;
}
input[type=text] {
   
    color: #fff;
}
input[type=email] {
   
    color: #fff;
}
textarea{
    color: #fff;
}
.volunteer{
  background-color: blue;
  padding-top:20px;
}
hr{
  color:#fff;
  padding:0;
  margin:40px 0px;
}
.footer{
  padding-top:20px;
}
.copyright{
  background-color: #666;
}

/* Story gallery sections */
.story-section-wrapper {
  padding: 40px 0;
  background-color: #f9f9f9;
}
.story-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.story-section-title {
  text-align: center;
  margin-bottom: 10px;
}
.story-section-text {
  max-width: 700px;
  margin: 0 auto 25px auto;
}
.story-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.story-gallery-item {
  overflow: hidden;
  border-radius: 6px;
  height: 210px;
}
.story-gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 640px) {
  .story-section-wrapper {
    padding: 30px 0;
  }
  .story-gallery-item {
    height: 190px;
  }
}

/* Polished cards/panels */
.panel.callout,
.header_shadow {
	background-color:#ffffff !important;
	border-radius:6px;
	box-shadow:0 2px 10px rgba(0,0,0,0.08);
	border:1px solid #e0e0e0 !important;
}

/* Buttons (Foundation .button) */
.button {
	background-color:red;
	border:none;
	border-radius:4px;
	text-transform:uppercase;
	font-size:0.85rem;
	letter-spacing:0.03em;
}
.button:hover,
.button:focus {
	background-color:#b30000;
}

/* Footer text improvements */
.footer p,
.copyright p {
	font-size:14px;
	line-height:1.6;
}

/* ===================================
   SECTION BACKGROUND CLASSES
   Use these to add consistent
   background colors to page sections
   =================================== */

/* Base section styling (applies to all) */
.section {
  padding: 3rem 0;
  position: relative;
  overflow: hidden;
}

/* White - Clean content areas */
.section-white {
  background-color: #ffffff;
}

/* Light cool grey - Neutral backgrounds */
.section-light-grey {
  background-color: #f7f7f9;
}

/* Pale blue-grey - Academic/learning sections */
.section-accent-blue {
  background-color: #f4f7fb;
}

/* Warm cream - Story/community sections */
.section-warm-cream {
  background-color: #f9f4f2;
}

/* Soft beige - Testimonials/team */
.section-soft-beige {
  background-color: #fdf7f2;
}

/* Very pale red - CTAs/important notices */
.section-soft-red {
  background-color: #fff5f5;
}

/* Stronger pale red - High-priority CTAs */
.section-soft-red-strong {
  background-color: #fff0f0;
}

/* Utility classes for spacing */
.section-padding-sm {
  padding: 2rem 0;
}

.section-padding-lg {
  padding: 4.5rem 0;
}

/* Add a subtle top border to some sections */
.section-border-top {
  border-top: 1px solid rgba(0,0,0,0.05);
}

/* Container for section content */
.section-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section {
    padding: 2rem 0;
  }
  
  .section-padding-lg {
    padding: 3rem 0;
  }
}