@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/brands.min.css');

/* General Stylings */
* {
  margin: 0;
  padding:0;
  box-sizing: border-box;
}

body {
background-color: #edd358;
width:100%;
}

/* Nav Bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding: 20px 50px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  height: 140px;
}

.logo {
  margin-right: auto;
}

.logo img {
    height: 315px;
    position: absolute;
    top: -90px;
}

.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-links li {
  margin: 0 20px;
  list-style: none;
}

.nav-links li a {
  font-family: 'Playfair Display', serif; 
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 22px;
}

.nav-links li a:hover {
  color: #81609C;
}

.nav-links li a.donate {
    margin-left: 0;
  color: white;
  font-size: 22px;
  
}

.donate {
  padding: 8px 20px;
  background-color: #81609C;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-weight: bold;
  margin-left: 20px;
}


.nav-links li a.donate:hover {
  opacity: 0.8;
}

.burger {
display: none;
}

@media screen and (min-width: 992px) and (max-width: 1440px) { 
    .container {
      margin-top: 20%;
    }
    
    .container p {
      width: 95%;
    }
    
    .nav-links li a {
      font-size: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .logo img {
      height: 164px;
    top: -76px;
    }
    
    .navbar {
        height: 176px;
    }
    
    .container p {
      width: 95%;
    }
    
    .nav-links li a {
      font-size: 20px;
    }
    .nav-links li a.donate {
    margin-left: 0;
    color: white;
    font-size: 20px;
}
}
/* media query for mobile screens */

@media (max-width: 768px) {
.container {
  margin-top: 40%;
}

.logo img {
  height: 75px;
  top: -40px;
}

.navbar {
  height: 100px;
}

.nav-links {
  position: fixed;
  top: 0;
  right: -100%;
  height: 100vh;
  width: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
}

.nav-links li {
  opacity: 0;
  font-size: 18px;
}

.nav-links.active {
  right: 0;
}

.nav-links.active li {
  opacity: 1;
  transition: opacity 0.5s ease 0.3s;
}

.burger {
  display: block;
  position: fixed;
  right: 30px;
  cursor: pointer;
  z-index: 2;
}

.burger .line1,
.burger .line2,
.burger .line3 {
  width: 25px;
  height: 3px;
  background: #333;
  margin: 5px;
  transition: all 0.3s ease;
  background-color: black;
}

.burger .line1,
.burger .line2,
.burger .line3 {
  border-radius: 3px;
}

.burger.active .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.burger.active .line2 {
  opacity: 0;
}

.burger.active .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.nav-links {
  font-size: 2rem;
}

.nav-links li {
  margin: 20px;
  list-style: none;
  text-align: center;
}

.nav-links li a {
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

}

/*Footer*/

footer {
background-color: #fff;
font-family: 'Playfair Display', serif; 
padding: 20px;
text-align: center;
}

.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 2% 4%;
}

.footer-address {
width: 33%;
text-align: left;
}

.footer-nav {
width: 33%;
text-align: center;
}

.footer-nav ul {
list-style: none;
margin: 0;
padding: 0;
}

.footer-nav li {
display: inline-block;
margin-right: 20px;
}

.footer-nav a {
color: #81609C;
text-decoration: underline;
}

.footer-social {
width: 33%;
text-align: right;
}

.footer-social i {
font-size: 50px;
color: #81609C;
margin-left: 10px;
}

.watermark p{
    font-family: 'Kanit', sans-serif;
    font-size: 12px;
}

@media screen and (min-width: 992px) {
    .footer-container h3{
        font-size: 35px;
    }
    .footer-container p{
        font-size: 20px;
    }
    .footer-nav a {
        font-size: 18px;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .footer-container h3{
        font-size: 22px;
    }
    .footer-container p{
        font-size: 20px;
    }
    .footer-nav a {
        font-size: 20px;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .footer-container h3 {
        flex-direction: column;
        font-size: 20px;
    }
    .footer-container p{
        font-size: 17px;
    }
    .footer-address, .footer-nav, .footer-social {
        width: 100%;
        text-align: center;
        margin-bottom: 17px;
    }
    .footer-nav a {
        font-size: 17px;
    }
}

@media (max-width: 480px) {
    .footer-container h3{
        flex-direction: column;
        font-size: 20px;
    }
     .footer-container p{
        font-size: 17px;
    }
    .footer-address, .footer-nav, .footer-social {
        width: 100%;
        text-align: center;
        margin-bottom: 17px;
    }
    .footer-nav a {
        font-size: 17px;
    }
}

/* Home Page */

/* Carousel Images */

.carousel {
position: relative;
width: 100%;
height: 770px;
overflow: hidden;
}

.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
object-fit: cover;
filter: blur(2px); 
filter: brightness(0.5); /* Added */
} 

.carousel img.active {
opacity: 1; 
}

.carousel-text {
font-family: 'Dancing Script', cursive;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 3rem;
color: white;
text-align: center;
z-index: 1;
width: 95%;
}

/* Carousel Buttons */

.carousel-buttons {
position: absolute;
top: 60%;
left: 50%;
transform: translateX(-50%);
display: flex;
}

.carousel-text h1 {
  font-family: 'Dancing Script', cursive;
}

.carousel-text h2 {
  font-family: 'Kanit', sans-serif;
  font-size: 25px;
}

.cw-bttn {
background-color: white;
color: #81609C;
border: none;
border-radius: 20px;
padding: 15px 30px;
margin-right: 10px;
font-size: 30px;
cursor: pointer;
text-decoration: none;
}

.cp-bttn {
background-color: #81609C;
color: white;
border: none;
border-radius: 20px;
padding: 15px 30px;
font-size: 30px;
cursor: pointer;
text-decoration: none;
}

.cp-bttn, .cw-bttn {
  font-family: 'Kanit', sans-serif;
}

.cw-bttn:hover, .cp-bttn:hover {
    box-shadow: 8px 8px #99bdff;
    transition: .3s;
}

.cp-bttn:hover{
    box-shadow: 8px 8px #99bdff;
    transition: .3s;
}

.carousel-buttons a:not(:last-child) {
margin-right: 30px;
}

/* Carousel Mobile */
@media (min-width: 992px) {
    .carousel-text h1 {
        font-size: 50px;
    }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .cw-bttn,
    .cp-bttn {
      font-size: 28px;
      padding: 10px 12px;
      
    }
    
    .carousel-buttons button:not(:last-child) {
      margin-right: 10px;
    }
    .carousel-text h1 {
        font-size: 24px;
    }.carousel-text h1 {
        font-size: 50px;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {

    .carousel {
      height: 500px;
    }
    
    .carousel-text {
      font-size: 1.75rem;
    }
    .carousel-buttons {
      top: 70%;
      
    }
    
    .cw-bttn,
    .cp-bttn {
      font-size: 1rem;
      padding: 8px 11px;
      
    }
    
    .carousel-buttons button:not(:last-child) {
      margin-right: 10px;
    }
    
    .carousel-text h1 {
        font-size: 30px;
    }
}
@media (max-width: 480px) {

    .carousel {
      height: 500px;
    }
    
    .carousel-text {
      font-size: 1.75rem;
    }
    .carousel-buttons {
      top: 65%;
      
    }
    
    .cw-bttn,
    .cp-bttn {
      font-size: 13px;
      padding: 8px 8px;
      
    }
    
    .carousel-buttons button:not(:last-child) {
      margin-right: 10px;
    }
    .carousel-text h1 {
        font-size: 24px;
    }

}

/* Styles for the <noscript> element DHTML */

.carousel-noscript {
position: relative;
width: 100%;
height: 700px;
overflow: hidden;
}

.carousel-noscript img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
object-fit: cover;
filter: brightness(0.5); 
}

.carousel-static {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}

.carousel-static img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

/* Home - Image section */

.container_home {
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content:center;
}

.img_home {
padding: 6% 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 10px;
margin-top: -60px;
text-align: center;
width: 25%;
}

.img_home img {
width: 45px;
height: 45px;
object-fit: contain;
}

.img_home p {
margin: 30px 0;
font-size: 20px;
color:#333;
font-family: 'Spectral', serif;
height: 140px;
}

.img_home_bttn {
font-family: 'Kanit', sans-serif;
margin-top: 10px;
background-color: #81609C;
color: white;
border: none;
border-radius: 20px;
padding: 10px 30px;
font-size: 20px;
cursor: pointer;
text-decoration: none;
}

/* Home - Icon section mobile */
@media screen and (min-width: 768px) and (max-width: 992px) {
    .img_home {
      padding: 4% 0;
      display: flex;
      width: 100%;
    }
    
    .img_home p{
      height: 67px;
    }
    
    .img_home img {
      width: 30px;
      height: 30px;
    }
    
    .img_home_bttn {
        margin-top: 25px;
    }    
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .img_home {
      padding: 4% 0;
      display: flex;
      width: 100%;
      padding-bottom: 60px;
    }
    
    .img_home p{
      height: 67px;
    }
    
    .img_home img {
      width: 30px;
      height: 30px;
    }
    
    .img_home_bttn {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .img_home {
      padding: 4% 0;
      display: flex;
      width: 100%;
      padding-bottom: 80px;
    }
    
    .img_home p{
      height: 67px;
    }
    
    .img_home img {
      width: 30px;
      height: 30px;
    }
    .img_home_bttn {
        margin-top: 60px;
    }
}

/* Home - Testimonials */
.home_testimonials {
width: 100%;
display: flex;
flex-flow: row wrap;
padding-top: 3%;
padding-bottom: 6%;
color:#333;
background-color:white;
}

.home_testimonials h2 {
font-family: 'Oswald', sans-serif;
width: 100%;
text-align: center;
font-size: 32px;
padding-bottom: 30px;
color:#81609C;
}

.home_testimonials p {
width: 100%;
font-size: 20px;
padding: 2% 6%;
color: #333;
font-family: 'Spectral', serif;
}

.quote-columns {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
column-gap: 20px;
margin: auto;
}

.quote-columns img {
    width: 50px;
}

.quote-column {
flex: 1;
max-width: 350px;
padding: 20px;
border: 3px solid #81609C;
text-align: center;
border-radius: 10px;
box-shadow: 5px 5px 10px #00000033;
}

.quote-column:hover{
    transform: scale(1.1)
}

.quote-column {
    transition: 0.4s;
}

.quote-column p {
    font-family: 'Oswald', sans-serif;
    color:#81609C;
}
.title-head {
    width: 100%;
    padding-top: 50px;
    text-align: center;
}
.titlewelcometext {
    display: flex;
    align-content: center;
    justify-content: center;
}
.title-head h1{
    font-family: 'Kanit', sans-serif;
    color:#81609C;
}
.title-head h2{
    font-family: 'Kanit', sans-serif;
    color:#81609C;
}
.title-head p{
    width: 50%;
    font-family: 'Kanit', sans-serif;
    color:#81609C;
    text-align:center;
    margin: auto;
}
.title-head hr {
    width: 30%;
    margin: auto;
    border: 2px solid #81609C;
}
@media screen and (min-width: 992px) {
    .title-head img {
        height: 90px;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .title-head h1{
        font-size: 40px;
    }
    .title-head h2{
        font-size: 30px;
    }
    .title-head img {
        height: 90px;
    }
    .home_testimonials {
    flex-direction: column;
    align-items: center;
    padding: 0 2%;
    }
    .home_testimonials h2 {
        margin-top: 20px;
    font-size: 28px;
    padding-bottom: 20px;
    text-align: center;
    }
    .home_testimonials p {
        padding-top: 50px;
    font-size: 18px;
    padding: 2% 4%;
    }

  .quote-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
  }
  
  .quote-column {
    max-width: 100%;
    margin: 20px 0;
  }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .title-head {
        padding-bottom: 50px;
    }
    .title-head h1{
        font-size: 30px;
    }
    .title-head h2{
        font-size: 20px;
    }
    .title-head img {
        height: 80px;
    }
    .home_testimonials {
    flex-direction: column;
    align-items: center;
    padding: 0 2%;
    }
    .home_testimonials h2 {
    font-size: 28px;
    padding-bottom: 20px;
    text-align: center;
    }
    .home_testimonials p {
        padding-top: 50px;
    font-size: 18px;
    padding: 2% 4%;
    }

  .quote-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
  }
  
  .quote-column {
    max-width: 100%;
    margin: 20px 0;
  }
}

@media (max-width: 480px) {
    .title-head {
        padding-bottom: 40px;
    }
    .title-head h1{
        font-size: 20px;
    }
    .title-head h2{
        font-size: 17px;
    }
    .title-head img {
        height: 50px;
    }
        .home_testimonials {
    flex-direction: column;
    align-items: center;
    padding: 0 2%;
    
    }
    .home_testimonials h2 {
        margin-top: 20px;
    font-size: 28px;
    padding-bottom: 20px;
    text-align: center;
    }
    .home_testimonials p {
        padding-top: 50px;
    font-size: 18px;
    padding: 2% 4%;
    }

  .quote-columns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-left: 0;
  }
  
  .quote-column {
    max-width: 100%;
    margin: 20px 0;
  }
}

/* Events Page */

.container_events{
    display:block;
    margin-top: 200px;
    width: 100%;
    direction: rtl;
}

.container_events h2 {
  font-family: 'Kanit', sans-serif;
  text-align: center;
  font-size: 50px;
  color:#81609C;
  padding-top: 50px;
}

.container_events p {
  font-size: 20px;
   direction: rtl;
  padding: 20px 20px;
  color: #333;
  text-align:left;
  font-family: 'Spectral', serif;
}

.value-txt, .events-txt{
    padding-bottom:20px;
}

.google {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-bottom:40px;
}



@media only screen and (max-width: 768px) {
  .container_events {
    margin-top: 100px;
  }

  .container_events h2 {
    padding-top: 50px;
  }

  .container_events p {
    padding-bottom: 50px;
  }

  .google {
    margin-top: 4%;
  }

  #eventbrite-widget-container-618280372237 {
    width: 100%;
  }
}

/* About Page */

.titlehead img {
    width: 100%;
    object-fit: cover;
}

@media screen and (min-width: 992px) {
    .titlehead img{
    	height: 415px;
    	object-position: 0 35%;
    }
}
@media screen and (min-width: 576px) and (max-width: 992px) {
    .titlehead img{
    	height: 287px;
    	object-position: 50% 50%;
    }
}
@media screen and (max-width: 576px) {
    .titlehead img{
    	height: 240px;
    	object-position: 50% 50%;
    }
}

.centered {
    position: absolute;
    font-family: 'Kanit', sans-serif;
    color: #81609C;
}

@media screen and (min-width: 992px) {
    .centered {
        top: 67%;
        left: 50%;
        transform: translate(-50%, -50%);   
        font-size: 40px;
    }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
    .centered {
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);   
        font-size: 30px;
    }
}
@media screen and (min-width: 576px) and (max-width: 768px) {
    .centered {
        top: 65%;
        left: 50%;
        transform: translate(-50%, -50%);   
        font-size: 25px;
    }

}
@media screen and (max-width: 576px) {
    .centered {
        top: 70%;
        left: 50%;
        transform: translate(-50%, -50%);   
        font-size: 12px;
    }
}

  
.container_about{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  width: 100%;
}

.about {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 2%;
}

.about-text h2{
  font-family: 'Kanit', sans-serif;
  width: 100%;
  text-align: center;
  font-size: 50px;
  padding-bottom: 30px;
  color:#81609C;
}

.about img {
  width: 80%;
  height: 500px;
  object-fit: cover;
}

.about-text {
  font-family: 'Spectral', serif;
  width: 90%;
  font-size: 20px;
  padding: 2% 6%;
  padding-bottom: 100px;
  color:#333;
  text-align: center;
}

.about-text p {
  font-family: 'Spectral', serif;
  padding-bottom: 20px;
}

.founder {
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  padding: 2% 0;
  padding-top: 40px;
  background-color: #81609C;
}

.founder img {
  padding-left: 20px;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founderInfo {
  width: 60%;
}

.founderInfo h2 {
  font-family: 'Oswald', sans-serif; 
  width: 100%;
  text-align: left;
  font-size: 32px;
  padding: 0 2% 2% 2%;
  color:#edd358;
}

.founderInfo p {
  font-family: 'Spectral', serif;
  width: 100%;
  font-size: 20px;
  padding: 0 2% 2% 2%;
  padding-bottom: 40px;
  color:white;
  text-align: left;
}

.founderInfo h3 {
  font-family: 'Oswald', sans-serif;
  font-weight: bold;
  width: 100%;
  font-size: 20px;
  padding: 0 2% 2% 2%;
  color:white;
  text-align: left;
}


/*Gallery Stylings */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-top: 50px;
padding: 0 8% 50px 8%;
}

.container h1 {
width: 100%;
text-align: center;
font-family: 'Kanit', sans-serif;
font-size: 40px;
padding-bottom: 30px;
color:#81609C;
}

.container p {
font-family: 'Kanit', sans-serif;
width: 90%;
font-size: 40px;
padding: 2% 6%;
padding-bottom: 100px;
color:#333;
text-align: center;
}

.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 30px;
}

.gallery a {
  position: relative;
}

.gallery a::after {
  content: "View";
  position: absolute;
  top: -260px;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

.gallery a:hover::after {
  opacity: 1;
}

.gallery img {
  width: 100%;
}

.gallery img:hover {
  filter: brightness(60%);
}

.gallery a:hover img {
  transform: scale(1.1);
  transition: transform 0.5s ease-in-out;
}


@media screen and (max-width: 768px) {

  .container_about{
    
  }

  .about-text img {
    width: 80%;
    height: 300px;
  }

  .about-text {
    width: 90%;
    padding: 3% 6%;
    padding-bottom: 100px;
  }

  .about-text p {
    padding-bottom: 10px;
  }

  .founder img {
    width: 100%;
    height: 100%;
  }

  .founderInfo {
    width: 90%;
  }

  .founderInfo h2 {
    width: 100%;
    text-align: center;
    padding: 25px 0;
  }

  .founderInfo h3 {
    text-align: center;
  }

  .founderInfo p {
    width: 100%;
    padding: 0;
    text-align: center;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .founder img {
        width: 300px;
        padding-left: 0px;
    }
    .founderInfo p {
        padding-bottom: 100px;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .founder img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 400px;
    }
    .founderInfo p {
        padding-bottom: 40px;
    }
    .founderInfo h3 {
        padding-bottom: 40px;
    }
}

@media (max-width: 480px) {
    .founder img {
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
    }
    .founderInfo p {
        padding-bottom: 30px;
    }
    .founderInfo h3 {
        padding-bottom: 30px;
    }
}
/* Donate Page */

.payments {
  display:block;
}

.payments p {
    text-align: center;
}

.payments ul, li {
  text-align: center;
}

.payments h1 {
  font-family: 'Kanit', sans-serif;
  font-size: 50px;
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
  color:#81609C;
}

.payments h2 {
    text-align: center;
}

.first-content{
    font-size: 20px;
  margin-top:50px;
  padding: 25px;
  margin-bottom: 20px;
  text-align:center;
}

.first-content ul, li{
    list-style-type:none;
}    
    
.preferred {
  padding: 20px;
  margin-bottom: 20px;
 
}

.preferred p {
  font-family: 'Spectral', serif;
  font-size: 20px;
  
}

.other-methods {
  padding: 20px;
  margin-bottom: 30px;
}

.other-methods h2 {
  font-family: 'Oswald', sans-serif; 
  text-align: center;
  font-size: 32px;
  margin-bottom: 20px;
  color:#81609C;
}

.other-methods h3 {
  font-family: 'Oswald', sans-serif; 
  text-align: center;
  font-size: 25px;
  margin-bottom: 10px;
  color:#81609C;
}

.other-methods ul {
  margin-bottom: 20px;
}

.other-methods li {
  font-size: 20px;
  margin-bottom: 10px;
}

.other-methods li b {
  font-weight: bold;
}

.other-methods p {
  font-family: 'Spectral', serif;
  font-size: 20px;
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) and (max-width: 992px) {
    .other-methods img {

    }
    .other-methods {
        margin-bottom: 100px;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    .other-methods img {
        height: 70px;
    }
    .other-methods {
        margin-bottom: 0px;
    }
}

@media (max-width: 480px) {
    .other-methods img {
        height: 50px;
    }
    .other-methods {
        margin-bottom: 0px;
    }
}

.donate-bttn {
  background-color: #81609C;
  font-size: 20px;
  color: white;
  padding: 10px 40px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin-top: 30px;
  max-width: 300px;
  text-align: center;
}

.donate-contact{
    display:block;
    padding: 40px 20px;
    margin: 0 auto;
    max-width: 800px;
    text-align: center;
}

.donate-button-container{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.donation-goals h2{
    font-family: 'Oswald', sans-serif; 
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
    color:#81609C;
}

.donation-goals p{
  font-family: 'Spectral', serif;
    font-size: 20px;
  margin-bottom: 10px;
}

.donation-goals ol {
  margin-bottom: 20px;
}

.donation-goals li {
  font-size: 20px;
  margin-bottom: 10px;
}

.eventbrite_text {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
  background-color: white;
}

.eventbrite_text h2 {
  font-family: 'Oswald', sans-serif; 
  width: 100%;
  text-align: center;
  font-size: 50px;
  margin-bottom: 20px;
  color:#81609C;
  padding-top: 20px;
}

.eventbrite_text p {
  font-family: 'Spectral', serif;
  width: 100%;
  text-align: center;
  font-size: 20px;
  text-align: left;
  margin:20px;
  padding: 2% 0;
  color: #333;
}

.eventbrite {
  width: 100%;
  height: 525px;
  padding: 30px 0px;
  background-color: #81609C;
  display: flex;
  justify-content: center; 
}

#eventbrite-widget-container-618280372237 {
  border: solid 5px #81609C;
  width: 80%;
}

@media screen and (max-width: 768px) {
  .payments {
    justify-content: center;
  }
  
  .payments h1{
    font-family: 'Kanit', sans-serif;
    font-size: 40px;
    padding-bottom: 30px;
  }
  
  .payments h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .preferred {
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .preferred p {
    font-family: 'Spectral', serif;
    font-size: 20px;
  }
  
  .other-methods {
    padding: 20px;
  }
  
  .other-methods h2 {
    font-size: 32px;
    margin-bottom: 20px;
  }
  
  .other-methods ul {
    margin-bottom: 20px;
  }
  
  .other-methods li {
    font-size: 20px;
    margin-bottom: 10px;
  }
  
  .other-methods li b {
    font-weight: bold;
  }
  
  .other-methods p {
    font-family: 'Spectral', serif;
    font-size: 20px;
    margin-bottom: 20px;
  }
  
  .donate-bttn {
    background-color: #81609C;
    font-size: 20px;
    color: white;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
    max-width: 300px;
    text-align: center;
  }
}  
/* Ways To Help Page Stylings*/

   .container-ways {
    display:block;
    /*margin-top: 300px;
    margin-bottom:40px;*/
    width: 100%;
    background-color: white;
    margin-top: 76px;
    margin-bottom: -15px;
    padding-top: 30px;
  }
  
  .container-ways h1 {
    width: 100%;
    text-align: center;
    font-family: 'Kanit', serif;
    font-size: 40px;
    padding-bottom: 30px;
    color: #81609C;
  }
  
  .container-ways h2 {
    text-align: center;
    font-family: 'Spectral', serif;
    font-size: 25px;
    padding-bottom: 0px;
    margin:15px 50px;
    color: #333;
  }
  
  .container-ways ul li{
    font-size: 20px;
    padding:10px 10px;
    padding-bottom:5px;
    color: #333;
    text-align: center;
  }
  
  .container-ways table, th, td {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: 'Spectral', serif; 
    border: 1px solid;
    border-collapse: collapse;
  }
  
  .container-ways table {
    width: 80%;
  }
    
  .container-ways th, td {
    padding: 15px;
    text-align: left;
    font-family: Verdana, sans-serif;
  }
  
  .container-ways th {
    background-color: #81609C;
    color: white;
  }
    
  .container-ways td {
    background-color: white;
  }
  
  .container-ways p {
    width: 90%;
    font-size: 20px;
    padding: 2% 6%;
    padding-bottom: 100px;
    color: #333;
    text-align: center;
  }
  
  .tips {
    border: 10px solid #ddd;
    border-radius: 0 30px 30px 30px;
    padding: 30px;
    background-color: #ccffff;
    display: none;
    position: absolute;
  }
  
  #termsAndConditions {
    display: none;
  }
  
  .errMsg {
    display: block;
    background-color: white;
    color: #ff6600;
    font-size: 0.8em;
    padding: 2px;
    position: relative;
    left: 0px;
  }
  
  .form {
  width: 60%;
  margin: 0 auto;
  padding: 20px;
  margin-bottom: 80px;
  margin-top: 70px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 20px;
  background-color: #81609C;
  color: #333;
}


.form h1 {
  text-align: center;
  font-family: 'Kanit', sans-serif;
  color: white; 
  font-size: 40px;
}

.form ul {
    font-family: 'Spectral', serif;
    color: white;
}

.form form {
  width: 60%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom:120px;
  font-size: 20px;
}

.form label {
  display: block;
  width: 100%;
  text-align: left;
  margin-bottom: 5px;
  color: white;
  font-family: 'Spectral', serif;
}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"] {
  width: 100%;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
}

.form input[type="checkbox"] {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.form input[type="checkbox"] + label {
  display: inline-block;
  vertical-align: middle;
}

.form input[type="submit"] {
  display: block;
  margin: 20px;
  padding: 12px 20px;
  border: none;
  border-radius: 25px;
  background-color: #edd358;
  color: #81609C;
  font-size: 20px;
  font-family: 'Kanit', sans-serif;
  cursor: pointer;
  
}

.ways-words{
    margin-top:300px;
    
}

.email-contact{
    margin-top:40px;
}

.info-txt{
    margin: 0 auto;
    text-align:center;
}


@media only screen and (min-width: 768px) {
  /*.container-ways {
    margin-top: 50px;
    margin-bottom: 0;
  }*/

  .email-contact {
    margin-top: 40px;
  }
}

@media only screen and (max-width: 768px) {
  .container-ways {
    margin-top: 150px;
    text-align:center;
    display:block;
  }
  
  .container-ways h1 {
    font-size: 24px;
    padding-bottom: 20px;
  }
  
  .container-ways p {
    font-size: 18px;
    padding: 2% 4%;
    padding-bottom: 50px;
  }
  
  .form {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    margin-bottom: 0;
  }
  
  .form h1 {
    font-size: 24px;
  }
  
  .form form {
    width: 90%;
    font-size: 16px;
  }
  
  .form input[type="text"],
  .form input[type="email"],
  .form input[type="tel"] {
    padding: 8px;
    margin-bottom: 10px;
  }
  
  .form input[type="submit"] {
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    width: 70%;
    font-size: 16px;
  }
  
  .email-contact {
    margin-top: 20px;
  }
}

/*Delete Page Stylings*/
    .mess{
        text-align: center;
        font-family: Verdana, sans-serif;
        color: #81609C;
    }
    .mess p {
        font-size: 30px;
    }
    .success {
        font-size: 40px;
    }

/*admin*/
    .adminnav ul{
        display: table;
        margin: 0 auto;
        list-style-type: none;
    }
    .adminnav li {
        display:inline;
        margin-right: 20px;
        margin-left: 20px;
    }
    .list {
        margin-bottom: 50px;
    }
    .list table, th, td {
        border: 1px solid;
        border-collapse: collapse;
    }
    .list table {
        width: 80%;
    }
    .list th, td {
        padding: 15px;
        text-align: left;
        font-family: Verdana, sans-serif;
    }
    .list th {
        background-color: #81609C;
        color: white;
    }
    .list td {
        background-color: white;
    }
    .itemlist {
        margin-left: auto;
        margin-right: auto;
    }
    .logout {
        text-align: center;
        padding-bottom: 55px;
    }
    .logout input[type=submit] {
        text-align: center;
        background-color: #81609C;
        border: none;
        color: white;
        padding: 16px 32px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }

/*log in*/
    .log {
        text-align:center;
        margin-bottom: 50px;
    }
    .log h1 {
        font-family: Verdana, sans-serif;
        color: #81609C;
    }
    .log label {
        font-family: Verdana, sans-serif;
        font-size: 20px;
    }
    .log input[type="text"], select, textarea {
        padding: 10px;
        margin-top: 4px;
        margin-bottom: 10px;
    }
    .log input[type="password"], select, textarea {
        padding: 10px;
        margin-top: 4px;
        margin-bottom: 10px;
    }
    .log input[type=submit] {
        text-align: center;
        background-color: #81609C;
        border: none;
        color: white;
        padding: 16px 32px;
        text-decoration: none;
        margin: 4px 2px;
        cursor: pointer;
    }
    
/*logout*/
    .message {
        text-align:center;
        padding-bottom: 175px;
    }
    .message h1{
        font-family: Verdana, sans-serif;
        color: #81609C;
    }
    .message h3{
        font-family: Verdana, sans-serif;
        color: #81609C;
    }
    
/*success*/
    .thanks {
        padding-top: 200px;
        padding-bottom: 50px;
        text-align: center;
        font-family: 'Spectral', serif;
    }

/*Contact Page Stylings 

            .container-contact {
              display: flex;
              justify-content: center;
              margin-top: 250px;
            }
            .form {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              font-size: 20px;
              color: #333;
            }
            
            .form h1 {
              font-family: 'Playfair Display', serif; 
              text-align: center;
              color: #81609C; 
              font-size: 40px;
        	    margin-top: 10px; 
        	    margin-bottom: 10px;
            }
            
            .form .submit {
              background-color: #81609C;
              font-size: 20px;
              color: white;
              padding: 10px 20px;
              border-radius: 25px;
              text-decoration: none;
              display: inline-block;
              margin-top: 20px;
            }
            
            .tips {
              border: 10px solid #ddd;
              border-radius: 0 30px 30px 30px;
              padding: 30px;
              background-color: #ccffff;
              display: none;
              position: absolute;
            }
            
            #termsAndConditions {
              display: none;
            }
            
            .errMsg {
              display: block;
              background-color: white;
              color: #ff6600;
              font-size: 0.8em;
              padding: 2px;
              position: relative;
              left: 0px;
            }
            
        
            .form {
              width: 80%;
              margin: 50px 0;
              padding: 20px;
              background-color: #eed9ff;
              border-radius: 5px;
            }
            
            input[type="text"], select, textarea {
              width: 100%;
              padding: 12px;
              border: 1px solid #ccc;
              border-radius: 4px;
              box-sizing: border-box;
              margin-top: 6px;
              margin-bottom: 16px;
              resize: vertical;
            }
            
            label {
              font-size: 20px;
            }
            
            .submit {
              background-color: #81609C;
              color: white;
              padding: 12px 20px;
              border: none;
              border-radius: 4px;
              cursor: pointer;
              font-size: 18px;
              text-align: center;
            }
            
            @media only screen and (max-width: 747px) {
                .container-contact {
                  margin-top: 100px;
                }
                
                .form {
                  width: 100%;
                  font-size: 16px;
                  padding: 10px;
                  margin-bottom: 0;
                }
                
                h2 {
                  font-size: 24px;
                  margin-bottom: 10px;
                }
                
                input[type="text"], select, textarea {
                  padding: 10px;
                  margin-top: 4px;
                  margin-bottom: 10px;
                }
                
                .submit {
                  font-size: 16px;
                  padding: 10px 16px;
                }
                
                .tips {
                  padding: 20px;
                  font-size: 14px;
                }
                
                .errMsg {
                  font-size: 0.7em;
                  padding: 1px;
                }
            }*/

/* Gallery */
@media only screen and (max-width: 768px) {
.container h2{
    font-family: 'Playfair Display', serif; 
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
    color:#81609C;
}

}
@media screen and (max-width: 992px) {
.containergs br {
    display: none;
}
}