/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Jun 19, 2025, 10:06:49 AM
    Author     : tstee
*/

html {
    scroll-behavior: smooth;
}

    body {
      margin: 0;
    }
    
    .bad-script-regular {
  font-family: "Bad Script", cursive;
  font-weight: 400;
  font-style: normal;
}

.lora-script {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


/* ********************************************************* */


    /* Menu styles */
/*    .side-menu {
      position: fixed;
      top: 0;
      left: -250px;
      width: 250px;
      height: 100%;
      background-color: black;  #333; 
      color: white;
      padding-top: 60px;
      transition: left 0.3s ease;
      z-index: 1000;
      opacity: 80%;
    }

    .side-menu a {
      padding: 15px 20px;
      display: block;
      color: white;
      text-decoration: none;
      border-bottom: 1px solid #444;
    }

    .side-menu a:hover {
      background-color: maroon;  #444; 
    }

     Menu toggle button 
    .menu-toggle {
      position: fixed;
      top: 15px;
      left: 15px;
      background-color: black;  #333; 
      color: white;
      border: none;
      padding: 10px 15px;
      font-size: 16px;
      cursor: pointer;
      z-index: 1100;
    }

     Menu open state 
    .side-menu.open {
      left: 0;
    }

     Responsive tweaks 
    @media (max-width: 768px) {
      .side-menu {
        width: 200px;
      }
    }*/


/* *****************Toggle Menu ********************************** */

    /* Hamburger Button */
    .menu-toggle {
/*      position: absolute;
      top: 20px;
      left: 20px;*/
      font-size: 1.4rem;
      cursor: pointer;
      color: white;
      margin-right: 1rem;
/*      z-index: 2;*/
font-family: "Lora", serif;
    }

    /* Menu Panel */
    .side-menu {
      position: fixed;
      top: 0;
      left: -250px;
      width: 250px;
      height: 100%;
      background: black; /* #333; */
      color: white;
      padding-top: 60px;
      transition: left 0.3s ease;
      z-index: 1;
      opacity: 75%;
      font-family: "Lora", serif;
    }

    .side-menu.active {
      left: 0;
    }

    .side-menu ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .side-menu li {
      padding: 15px 20px;
      cursor: pointer;
    }

    .side-menu li:hover {
      background: maroon; /* #444; */
    }

    /* Sub-menu */
    .submenu {
      display: none;
      background-color: black; /* #444; */
      margin-top: 5px;
    }

    .submenu li {
      padding-left: 30px;
    }

    .has-submenu.open .submenu {
      display: block;
    }
    
    
    .menuLink{
        color: white;
    }
    
    .menuLink a{
        color: white;
    }
/* *********************************************************** */

.flyerImage{
      width: 100%;
      height: 500px; /* Change as needed */
      overflow: hidden;
      position: relative;
/*      background-color: black; */
      object-fit: fill; /* fill;   cover;   Maintains aspect ratio and fills container */
      display: block;
      

}



    .video-container {
      width: 100%;
      height: 500px; /* Change as needed */
      overflow: hidden;
      position: relative;
      background-color: black;
    }

    .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover; /* fill;   cover;   Maintains aspect ratio and fills container */
      display: block;
      opacity: 50%;

      
      clip-path: polygon(
        0% 0%,          Top-left corner 
        100% 0%,        Top-right corner 
        100% 100%,      Bottom-right 
        50% 95%,        Upward peak in center 
        0% 100%         Bottom-left 
      );
      
    }

    .text-overlay {
      position: absolute;
      top: 0;
/*      left: 0;*/
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: white;
     /* background-color: rgba(0, 0, 0, 0.3);  optional overlay */
/*      z-index: 1;*/
    }

    .text-overlay h1 {
      font-size: 3rem;
      margin: 0;
    }

    .text-overlay ul {
      list-style: none; 
     
    } 
    
    .main_title1 {
      font-size: 2.8rem;
      margin: 0;
      
  font-family: "Bad Script", cursive;
  font-weight: 400; 
  font-style: normal;
    }
    
    
    .main_title2 {
      font-size: 2.6rem;
      margin: 0;
    }
    
    .topHeader {
/*    flex: 1 0 65rem;*/
    display: flex;
   
    height: 2rem;


    justify-content: space-between;
    align-items: center;
    background-color: maroon;  
    
}
    .topHeader ul {
      list-style: none; 
      color: white;
      font-size: 1rem;
    } 
    .topHeader li {
      list-style: none; 
      color: white;
      font-size: 1rem;
      display: inline;
      
    } 
    
    .socialmedia{
        width: 2rem;
        height: 2rem;
        
    }
    
    .mainheader {
/*    flex: 1 0 65rem;*/
    display: flex;
   
    height: 5rem;


    justify-content: space-between;
    align-items: center;
    background-color: black; 
    
}

.logo {
    height: 4.4rem;
}



.generalInfoTitle{
    display: flex;
    font-size: 2.4rem;
    color: white;
    box-shadow: 10px 5px 5px maroon;    
    font-family: "Bad Script", cursive;
    
}

.generalInfo{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
        
     font-family: "Lora", serif;
/*    margin-top:.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom:.5rem;*/
    
    background-color: black;
    color: white;
    
/*    align-content: center;*/
    align-items: center;
/*    justify-content: center;*/
    justify-items: center;
    
/*      clip-path: polygon(
        0% 0%,          top-left 
        100% 0%,        top-right 
        100% 95%,       just above bottom-right 
        50% 100%,       tip of downward triangle 
        0% 95%          just above bottom-left 
      );*/
    
}



.generalInfoArea{
/*    height: 20rem;*/
    height: auto;
    /*
    flex: 1 0 25rem;
    */
/*    flex: 1 0 20rem;*/

    
/*    background-color: white;
    border-style: solid;
    border-width: .1rem;
    border-color: #D5D5D6;
    border-radius:.5rem;*/
    
    color: white;
    
/*    margin-top: 3rem;
    margin-bottom: 3rem;*/
    
/*    box-shadow: 10px 5px 5px gray;*/
    
}

.generalInfoHeading{
    flex: 1 0 20rem;
    
    height:2.5rem;
    font-weight: bold;
    text-align: center;
    
/*    background-color:  #0846A8;*/
     
/*    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;*/
    color: white;
    font-size: 2rem;
    
    padding-bottom: 1rem;
    padding-top: 1rem;
    
     
    
    
}
.generalInfoBody{
    flex: 1 0 20rem;
    
/*    height: 18rem;*/
    height: auto;
    font-size: 1.5rem;
/*    align-content: center;
    justify-content: center;
    align-items: center;*/
    text-align: center;
    
        
    
    color: maroon;
        
}

.fontWhite{
    font-size: 1.5rem;
    color: white;
/*     font-family: "Lora", serif;*/
      font-family: "Bad Script", cursive;
}

.generalInfoHeading3{
    flex: 1 0 20rem;
    
    height:2.5rem;
    font-weight: bold;
    text-align: center;
    
/*    background-color:  #0846A8;*/
     
/*    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;*/
    color: black;
    font-size: 1.8rem;
    
    padding-bottom: 1rem;
    padding-top: 1rem;
    
    margin-bottom: 1.6rem; 
    
/*    font-family: "Lora", serif;*/
     font-family: "Bad Script", cursive;
}
.generalInfoBody3{
    flex: 1 0 20rem;
    
/*    height: 18rem;*/
    height: auto;
    font-size: 1.5rem;
/*    align-content: center;
    justify-content: center;
    align-items: center;*/
    text-align: center;
    
    margin-bottom: 2rem;    
    
    color: maroon;
    font-family: "Lora", serif;
        
}
.generalInfoHeading4{
    flex: 1 0 20rem;
    
    height:2.5rem;
    font-weight: bold;
    text-align: center;
    
/*    background-color:  #0846A8;*/
     
/*    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;*/
    color: maroon;
    font-size: 1.6rem;
    
/*    padding-bottom: 1rem;
    padding-top: 1rem;*/
    
    margin-bottom: .5rem; 
    
/*    font-family: "Lora", serif;*/
     font-family: "Bad Script", cursive;
}

.generalInfoBody4{
    flex: 1 0 20rem;
    
    height:2.5rem;
    font-weight: bold;
    text-align: center;
    
/*    background-color:  #0846A8;*/
     
/*    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;*/
    color: black; /* green;  highlight; */
    background-color: yellow; 
    font-size: 1.6rem;
    
    text-align: center;
    justify-items: center;
    justify-content: center;
/*    padding-bottom: 1rem;
    padding-top: 1rem;*/
    
    margin-bottom: .5rem; 
    
    font-family: "Lora", serif;
/*     font-family: "Bad Script", cursive;*/
    border-color: yellow;
    border-style: solid;
    border-width: .2rem;
    border-radius: 5px;   
        
}
/* ********************************************************************* */

.generalInfoTitle2{
    display: flex;
    font-size: 3.4rem;
    color: black;
/*    background-color: wheat;*/
/*    box-shadow: 10px 5px 5px  maroon;    */
    
/*    align-items: center;*/
    justify-content: center;
/*    justify-items: center;*/
    padding-top: 2rem;
    padding-bottom: 2rem;
    
    font-family: "Bad Script", cursive;
}

.generalInfoTitle2_W{
    display: flex;
    font-size: 3.4rem;
    color: white;
/*    box-shadow: 10px 5px 5px  maroon;    */
    
/*    align-items: center;*/
    justify-content: center;
/*    justify-items: center;*/
    padding-top: 2rem;
    padding-bottom: 2rem;
    
    font-family: "Bad Script", cursive;
}

.generalInfo2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
        
    
/*    margin-top:.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom:.5rem;*/
    
    background-color: white;
    color: black;
    
/*    align-content: center;*/
    align-items: center;
/*    justify-content: center;*/
    justify-items: center;
    
/*      clip-path: polygon(
        0% 0%,          top-left 
        100% 0%,        top-right 
        100% 95%,       just above bottom-right 
        50% 100%,       tip of downward triangle 
        0% 95%          just above bottom-left 
      );*/
    
}

.generalInfoArea2{
/*    height: 20rem;*/
    height: auto;
    /*
    flex: 1 0 25rem;
    */
/*    flex: 1 0 20rem;*/

    
/*    background-color: white;
    border-style: solid;
    border-width: .1rem;
    border-color: #D5D5D6;
    border-radius:.5rem;*/
    
    color: black;
    
/*    margin-top: 3rem;
    margin-bottom: 3rem;*/
    
/*    box-shadow: 10px 5px 5px gray;*/
    
}

.generalInfoHeading2{
    flex: 1 0 20rem;
    
    height:2.5rem;
    font-weight: bold;
    text-align: center;
    
/*    background-color:  #0846A8;*/
     
    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;
    color: black;
    font-size: 2rem;
    
    padding-bottom: 1rem;
    padding-top: 1rem;
    
     
    
    
}
.generalInfoBody2{
    flex: 1 0 20rem;
    
/*    height: 18rem;*/
    height: auto;
    font-size: 1.5rem;
/*    align-content: center;
    justify-content: center;
    align-items: center;*/
    text-align: center;
    
        
    
    color: maroon;
        
}

.generalInfoTitle3{
    display: flex;
    font-size: 3rem;
    color: black;
/*    background-color: wheat;*/
/*    box-shadow: 10px 5px 5px  maroon;    */
    
/*    align-items: center;*/
    justify-content: center;
/*    justify-items: center;*/
    padding-top: 2rem;
    padding-bottom: 2rem;
    
    font-family: "Bad Script", cursive;
}

.watchLiveArea{
    flex: 1 0 20rem;
    
    height:auto;
    font-weight: bold;
    text-align: center;
    
/*    background-color:  #0846A8;*/
     
/*    border-top-left-radius:.5rem;
    border-top-right-radius:.5rem;*/
    color: black;
    font-size: 2rem;
    background-color: wheat;
    
    padding-bottom: 1rem;
    padding-top: 1rem;
    
    justify-items: center;
    align-items: center;
    align-content: center;
    
    
    
/*    border-color: maroon;
    border-style: solid;
    border-width: .2rem;
    border-radius: 5px;    */
/*    background-color: wheat;  */

}

.liveFrame{
    display: flex;
/*    flex: 1 0 56rem;*/
/*    width="560" height="315"*/
    width: 60rem;
    height: 33.75rem;
/*    max-width: 100%;
    object-fit: cover;*/
    
    border-color: maroon;
    border-style: solid;
    border-width: .2rem;
    border-radius: 5px;    
    
    box-shadow: 10px 5px 5px maroon;  
/*    background-color: wheat;  */ 
}

.flyerFrame{
    display: flex;
/*    flex: 1 0 56rem;*/
/*    width="560" height="315"*/
    width: 60rem;
    height: 33.75rem;
    
    align-content: center;
    justify-content: center;
    
/*    max-width: 100%;
    object-fit: cover;*/
    
/*    border-color: maroon;
    border-style: solid;
    border-width: .2rem;*/
    border-radius: 5px;    
    
    box-shadow: 10px 5px 5px maroon;  
/*    background-color: wheat;  */ 
}

.announcementArea{
    display: flex;
    
    
}

.announcementArea img{
    flex: 1 1 20rem;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    
    box-shadow: 10px 5px 5px maroon;
}

.announcementArea2{
    display: flex;

    margin: 2rem;
    
    
}

.announcementArea2 img{
/*    flex: 1 1 30rem;*/
/*    max-width: 100%;*/
/*    width: 30rem;*/
 display: flex;
width: 40rem;
    height: auto;
    object-fit: cover;
    
    box-shadow: 10px 5px 5px maroon;
}

.paragraphArea{
    display: flex;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.2rem;
    
    width: 25rem;
    
    color: maroon;
    align-items: center;
    justify-items: center;
    
    font-family: "Lora", serif;
    margin-bottom: 2.5rem;
    
    border-color: maroon;
    border-style: solid;
    border-width: .1rem;
    border-radius: 5px;    
    background-color: wheat;
    
}

.bioArea{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
    height: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
        
/*    align-items: flex-start;*/
/*    margin-top:.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom:.5rem;*/
    
/*    background-color: white;*/
    color: black;
    
/*    align-content: center;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    justify-items: center;*/
    
/*      clip-path: polygon(
        0% 0%,          top-left 
        100% 0%,        top-right 
        100% 95%,       just above bottom-right 
        50% 100%,       tip of downward triangle 
        0% 95%          just above bottom-left 
      );*/
     
}

.bioPic{
    display: flex;
/*    flex: 1 0 18rem;*/
/*    padding-left: 2.5rem;
    padding-right: 2.5rem;*/
    font-size: 1.2rem;
    border-radius: 5px;
    
/*    width: 45rem;*/
/*width: 300px; 
height: 200px; */
overflow: hidden;

    color: black;
/*    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;*/


    
/*    margin-top: 5rem;
    margin-left: 10rem;
    margin-right: 10rem;
    margin-bottom: 5rem;*/
    
    
    font-family: "Lora", serif;
/*    margin-bottom: 2.5rem;*/
    
/*    border-color: maroon;
    border-style: solid;
    border-width: .1rem;
    border-radius: 5px;    */
/*    background-color: wheat;*/
    
/*    box-shadow: 10px 5px 5px maroon;*/
}

.bioPic img{
width: 100%;
height: 100%;
object-fit: contain;
     
}

.bioParagraph{
    display: flex;
/*    flex: 1 0 18rem;*/
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.2rem;
    
    text-indent: 2em;
    margin-bottom: 2rem;
/*    width: 45rem;*/
    
    color: black;
/*    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;*/
    
/*    margin-left: 10rem;
    margin-right: 10rem;*/
    
    
    font-family: "Lora", serif;
/*    margin-bottom: 2.5rem;*/
    
/*    border-color: maroon;
    border-style: solid;
    border-width: .1rem;
    border-radius: 5px;    */
/*    background-color: wheat;*/

    
}

.bioParagraphCenter{
    display: flex;
/*    flex: 1 0 18rem;*/
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 1.8rem;
    
    text-indent: 2em;
/*    margin-bottom: 2rem;*/
/*    width: 45rem;*/
    
    color: black;
/*    text-align: center;*/
    align-items: center;
/*    justify-items: center;*/
/*    align-content: center;*/
/*    justify-content: center;*/
    
    
/*    margin-left: 10rem;
    margin-right: 10rem;*/
    
    
    font-family: "Lora", serif;
/*    margin-bottom: 2.5rem;*/
    
/*    border-color: maroon;
    border-style: solid;
    border-width: .1rem;
    border-radius: 5px;    */
/*    background-color: wheat;*/
    
}

.bioTitle{
    display: flex;
/*    flex: 1 0 18rem;*/
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    font-size: 2rem;
    
/*    text-indent: 2em;*/
/*    margin-bottom: 2rem;*/
/*    width: 45rem;*/
    
    color: black;
    font-weight: bold;
/*    text-align: center;*/
/*    align-items: center;*/
/*    justify-items: center;*/
/*    align-content: center;*/
/*    justify-content: center;*/
    
   padding-top: 2rem;
/*    margin-left: 10rem;
    margin-right: 10rem;*/
    
    
    font-family: "Lora", serif;
/*    margin-bottom: 2.5rem;*/
    
/*    border-color: maroon;
    border-style: solid;
    border-width: .1rem;
    border-radius: 5px;    */
    background-color: wheat;
    
}
.midArea{
    background-color: wheat;
}

.missionPic{
    display: flex;
/*    flex: 1 0 18rem;*/
/*    padding-left: 2.5rem;
    padding-right: 2.5rem;*/
    font-size: 1.2rem;
   
/*    margin: 5rem;*/
/*    width: 45rem;*/
/*width: 300px; 
height: 200px; */
overflow: hidden;

    color: black;
/*    align-items: center;
    justify-items: center;
    align-content: center;
    justify-content: center;*/


    
/*    margin-top: 5rem;
    margin-left: 10rem;
    margin-right: 10rem;
    margin-bottom: 5rem;*/
    
    
    font-family: "Lora", serif;
/*    margin-bottom: 2.5rem;*/
    
/*    border-color: maroon;
    border-style: solid;
    border-width: .1rem;
    border-radius: 5px;    */
    background-color: wheat;  
    
/*    box-shadow: 10px 5px 5px maroon;*/
}

.missionPic img{
width: 100%;
height: 100%;
object-fit: contain;
     padding: 5rem;
      border-radius: 5px;
}

/* ***************** buttons ******************************** */

.giveButton{
    width: 15rem;
    height: 4rem;
    background-color: wheat; 
    font-size: 1.5rem;
     
    
    text-align: center;
    align-content: center;
    
    color: black;
    
    border-color: maroon;
    border-style: solid;
    border-width: .3rem;
    border-radius: 5px;
    
    font-family: "Lora", serif;
/*    padding: .5rem;*/
    text-decoration: none;    
        
}

.giveButton:hover{
    background-color: maroon;
    color: white;
    border-color: wheat;
    cursor: pointer;
}

.directionsButton{
    width: 15rem;
    height: 5rem;
    background-color: wheat; 
    font-size: 1.4rem;
      padding: .5rem;
    
    text-align: center;
    align-content: center;
    
    color: black;
    
    border-color: maroon;
    border-style: solid;
    border-width: .4rem;
    border-radius: 5px;
    
    font-family: "Lora", serif;
/*    padding: .5rem;*/
/*    margin-top: 2rem;*/
/*    margin-bottom: 1rem;    */
        text-decoration: none;
}

.directionsButton:hover{
    background-color: maroon;
    color: white;
    border-color: wheat;
    cursor: pointer;
}

.previousLiveButton{
    width: 15rem;
    height: 5rem;
    background-color: maroon; 
    font-size: 1.4rem;
    padding: .5rem;
     
    
    text-align: center;
    align-content: center;
    
    color: white;
    
    border-color: black;
    border-style: solid;
    border-width: .2rem;
    border-radius: 5px;
    
    font-family: "Lora", serif;
/*     font-family: "Bad Script", cursive;*/
/*    padding: .5rem;*/
/*    margin-top: 2rem;
    margin-bottom: 1rem;    */
        text-decoration: none;
        
    margin-top: 2rem;    
}

.previousLiveButton:hover{
    background-color: white;
    color: maroon;
    border-color: maroon;
    cursor: pointer;
}
/* ******************************************** */

.footerAreaLine{
    display: flex;
    font-size: 1.2rem;
    color: white;
/*    box-shadow: 10px 5px 5px maroon;    */
    
    
}


.footerArea{
    
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    column-gap: 2rem;
    row-gap: 2rem;
    height: auto;
    padding: 2rem;
    
        
     font-family: "Lora", serif;
/*    margin-top:.5rem;
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom:.5rem;*/
    
    background-color: black;
    color: white;
    
/*    align-content: center;*/
    align-items: center;
/*    justify-content: center;*/
    justify-items: center;
    

}

    .footerHeader {
/*    flex: 1 0 65rem;*/
    display: flex;
   
    height: 2rem;


    justify-content: center;
    align-items: center;
/*    background-color: maroon;  */
    
}
    .footerHeader ul {
      list-style: none; 
      color: white;
      font-size: 1rem;
    } 
    .footerHeader li {
      list-style: none; 
      color: white;
      font-size: 1rem;
      display: inline;
      margin-right: .5rem;
    } 
    
        .footersocialmedia{
        width: 3rem;
        height: 3rem;
        
    }