html {
    height: 100%;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    color: #333;  
    box-sizing: border-box;
    font-size: 70.5%;
    scroll-behavior: smooth;
    animation: fadeIn 1.1s ease-in-out;

}
@keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

body {
    background-image: url("images/PRESBY.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    min-height: 100vh;
}

.background-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -5;
}


 
.container {
    position: relative;
    max-width: 1025px;
    margin: 0 auto;
    padding: 0 20px; 
    color: white;
}


.back-to-top{
    float: right;
    margin-top: 20px;
  }

.back-to-top p{
    font-size: 13px;
  }

 

.modal-new {
    display: none; 
    position: fixed;
    z-index: 10; 
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-content-new{
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    border-radius: 5px;
    width: 30%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
  }

.modal-header-new {
    padding: 2px 6px;
    background-color:#2E81DF;
    color: white;
  }

    /* Add Animation */
    @-webkit-keyframes animatetop {
        from {top:-300px; opacity:0} 
        to {top:0; opacity:1}
      }
      
      @keyframes animatetop {
        from {top:-300px; opacity:0}
        to {top:0; opacity:1}
      }
      
.close {
        color: white;
        float: right;
        font-size: 28px;
        font-weight: bold;
      }
      
      .close:hover,
      .close:focus {
        color: #000;
        text-decoration: none;
        cursor: pointer;
      }
      

header {
    text-align: center;
    position: relative;
}

.logo-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
}

.logo {
    height: 60px;
}

.PCG-logo {
    height: 90px;
}

.KNUST-logo {
    height: 100px;
}
header h2{
    font-family: 'Times New Roman', Times, serif;
    font-size: 30px;
    color: rgb(47, 35, 35);
    margin-bottom: 2px;
}

header h5 {
    color: #dd3113;
    font-family: "Kaushan Script";
    font-size: 30px;
    margin-bottom: 10px;
    margin-top: 5px;
}


nav {
    background-color: #2E81DF;
    padding: 10px;
    display: flex;
    flex-wrap: wrap; 
    justify-content: space-between;
    border-radius: 7px;
    margin-top: 20px;

    min-height: 70px;
    position: sticky;
    top: 0;
    overflow: hidden;
    left: 0;
    width: 100%;
    z-index: 1000;
}



nav a {
    text-decoration: none;
    font-size: 19px;
    margin: 0 15px;
    color: white;
    padding: 20px;
}

nav a:hover {
    text-decoration: underline;
    color: black;
}

main {
    margin-top: 20px;
}

section {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 20px;
    border-radius: 5px;
    margin-top: 20px;

}


section h5 {
    padding-left: 20px;
    border-left: solid black;
    font-size: 20px;
}



.latest-posts {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 20px;
    margin-top: 50px;
}



  .latest-news{
    border-left: 2px solid black;
    padding-left: 5px;
  }

  .latest-flex{
    display: flex;
    flex-direction: column ;
    
  }


  .latest-flex1 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    grid-gap: 10px;
    margin-bottom: 50px;
}

.latest-flex2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    grid-gap: 10px;
    margin-bottom: 50px;
}

  .latest-flex1-grid1{
    border-radius: 5px;
  }

  .latest-flex1-image img {
    height: 320px;
    width: 100%;
    max-width: 300px;
    border-radius: 5px;
    box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: 0.2s;
}

  .latest-flex1-image img:hover {
    transform: translateY(-2%);
    box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.3);
}



  
  .upcoming-events h2{
    border-left: 2px solid black;
    padding-left: 5px;
    
  }

  .card-content {
    padding: 1rem;
    border-radius: 5px;
    border-bottom: 2px solid rgb(226, 217, 217);
}

.card-header{
    font-size: 1.8rem;
    font-weight: 100;
    color: #0d0d0d;
    margin-bottom: 1.5rem;
}

.card-text{
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    line-height: 1.2;
    color: #3d3d3d;
    margin-bottom: 2.5rem;

}

.show-more{
    margin-top: -20px;
    margin-bottom: 30px;
}

.show-more p {
    float: right;
    color: red ;
    font-size: 15px;
    cursor: pointer;
}

.show-more a {
    color: red;
}


.show-more a:hover{
    color: blue;
}
.show-more p:hover{
    color: blue;
}

.show-more p::after {
    content: '→'; 
    margin-left: 8px; 
    font-weight: bold; 
}



.scroll {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px; 
    z-index: 6; 
    margin-top: 250px;
    padding-left: 50px;
}

.scroll img {
    width: 320%;
    height: 450px;
}

.scroll-button{
    border-radius: 9px;
    background-color: #f1f4f7;
    color: rgb(65, 41, 223);
    border: none;
    box-shadow: 0 3px 6px 6px rgba(0, 0, 0, 0.5); 
    padding: 2px 2px 2px 12px;
    cursor: pointer;
    position: absolute;
    top: 330px;
    left: 10%;
    transform: translateX(80%);
    width: fit-content;
}

.scroll-button:hover{
    background-color: rgb(67, 67, 238);
    color: #fff;
}



 .welcome-address {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    padding: 30px 10px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-image: url('./images/blurred_presby_shining_logo.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
}



.message {
    text-align: center;
}
.message h2  {
    font-size: 40px;
    text-align: center;
    padding-top: 20px;
    font-family: "Times New Roman";
    align-items: center;
    color: white;
}

.message h3 {
    font-size: 25px;
    font-weight: 100;
    
}



.welcome-address p {
    text-align: center;
    font-size: 20px;
    margin: 20px 0;
}



.welcome-address video {
    margin: 10px auto;
    width: 100%;
    max-width: 600px; 
    border-radius: 10px;
}

.modal-body-new p {
    color: black;
}

.modal-body-new li {
    list-style-type: disc;

}

.modal-body-new h2{
    color: black;
    text-align: center;
    text-decoration: underline;
}




.news-container{
    margin: 40px 0px 10px 0px;
    padding: 10px 10px 100px 10px;
    color: white;
    border-top: 1px solid #194ede;
    height: auto;
    top: 37em;
    z-index: -3;
    
}

.news-container h3{
    color: black;
    font-size: 30px;
    margin-top: -25px;
    background-color: #2E81DF;
    height: 40px;
    border-radius: 10px;
    color: white;
    font-family: 'Times New Roman', Times, serif;
    position: absolute;
    animation: glow 2s infinite alternate;
}

.news-container h2{
    font-size: 23px;
    font-weight: 100;
    border-left: 2px solid black;
    margin-top: 40px;
    color: black;
    padding-left: 5px;

}




.birthdays-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    color: black;
    padding: 1rem;
}

.no-data-message {
    font-size: 1.5em;
    color: #999; 
    text-align: center;
    padding: 20px;
}

.grid-item1 {
    background-color: #fff;
    border-radius: 0.4rem;
    overflow: hidden;
    box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: 0.2s;
    padding: 0.3rem;
}

.grid-item1:hover {
    transform: translateY(-0.5%);
    box-shadow: 0 4rem 8rem rgba(0, 0, 0, 0.5);
}

.card1 {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.card-img1 {
    width: 100%;
    height: auto;
    max-height: 30rem;
    object-fit: cover;
}

.card-content1 {
    padding: 0.3rem;
    text-align: center;
}

.card-header1 {
    font-size: 1.5rem;
    font-weight: 100;
    color: #0d0d0d;
    margin-bottom: 1rem;
}

.card-text1 {
    font-size: 1rem;
    letter-spacing: 0.1rem;
    line-height: 1.5;
    color: #3d3d3d;
    margin-bottom: 1.5rem;
}

.next-service{
    border-top: 3px solid black;
    margin-top: 70px;
}

.theme-title h1{
    font-size: 3rem;
    font-weight: 200;
    border-top: 4px solid red;
    width: 320px;
    padding-left: 5px;
    z-index: -5;
    margin-top: 0px;
    background-color: #5a5c5f;
}


.theme{
    border: #0d0d0d;
    padding-left: 5px;
    margin-top: 60px;
}

.theme p {
    font-size: 20px;
    font-family: "poppins";
    padding: 2px;
    color: black;
}

.theme h2{
    margin-top: 20px;
    margin-bottom: 2px;
    border-top: none;
    font-size: 35px;
    font-weight: bold;
}

.theme h4{
    color: black;
    font-size: 22px;
    font-weight: 80;
    padding-bottom: 0px;
}

.theme h5{
    margin-top: 20px;
    margin-bottom: 2px;
    border-top: none;
    font-size: 27px;
    color: black;
    padding-left: 2px;
    font-weight: 400;
}



.church-activities {
    border-top: 3px solid black;
    margin-top: 70px;
}

.theme1-title h1{
    font-size: 3rem;
    font-weight: 200;
    background-color: #295aa3;
    border-top: 4px solid red;
    width: 320px;
    padding-left: 5px;
    z-index: -5;
    margin-top: 0px;


}


.theme1{
   
    padding-left: 5px;
    padding-top: 15px;
}



.theme1 h2{
    margin-top: 5px;
    margin-bottom: 2px;
    font-weight: 100;
    font-family: 'Times New Roman', Times, serif;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 80%;
    border-top: 1px solid #1737c2;
    border-radius: 6px;
    margin: 0 auto;
    margin-top: 12em;
  }
  
  th{
    text-align: left;
    padding: 16px;
    color: black;
    background-color: white;
    font-size: 25px;
  }
  
  td {
    text-align: left;
    padding: 16px;
    font-size: 20px;

  }
  
  tr:nth-child(even) {
    background-color: #204cbb;
  }

  tr:nth-child(odd){ 
    color: #00040d;
  }


footer {
    text-align: center;
    margin-top: 20px;
    font-size: 15px;
}



@media(max-width: 1024px){

    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px;
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .scroll img {
        width: 40%;
        height: 520px; 
    }
    
    .scroll-button {
        position: absolute;
        top: 370px;
        border-radius: 7px;
        transform: translateX(130%);
        margin-top: 10px;
        padding: 8px;
    }
}



@media (max-width: 855px) {

    nav {
        padding: 6px;
        
    }

    nav a {
        margin: 0 10px;
        padding: 10px;
        font-size: 13px;
    }
    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px;
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .theme h2{
        font-size: 27px;
    }

    .theme h5{
        font-size: 25px;
    }
    .scroll img {
        width: 50%;
        height: 520px; 
    }
    
    .scroll-button {
        position: absolute;
        top: 370px;
        border-radius: 7px;
        transform: translateX(80%);
        margin-top: 10px;
        padding: 8px;
    }

    .modal-content-new{
        position: relative;
        background-color: #fefefe;
        margin: auto;
        height: 450px;
        overflow: auto;
        padding: 0;
        border: 1px solid #888;
        border-radius: 5px;
        width: 65%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
      }


  .modal-new {
    display: none; 
    position: fixed;
    z-index: 10; 
    left: 0;
    top: 2;
    padding-top: 30px;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4); 
}

.modal-body-new p{
    font-size: 20px;
}
}


@media (max-width: 480px) {

   
    
    nav {
        flex-direction: column;
    }

    nav a {
       
        font-size: 22px;
        
    }
    

    .latest-flex1-grid1,
    .card-content {
        padding: 10px;
    }

    .card-header {
        font-size: 1.5rem;
    }

    .card-text {
        font-size: 1.1rem;
    }

    .theme h2{
        font-size: 23px;
    }
    .theme h5{
        font-size: 22px;
    }
}

@media (max-width: 344px) {
    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px; 
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .scroll img {
        width: 100%;
        height: 320px; 
    }

    .logo-container h2 {
        font-size: 18px;
    }

    header h5 {
        font-size: 19px;
    }
    
    .scroll-button {
        position: absolute;
        top: 220px;
        border-radius: 5px;
        transform: translateX(10%);
        margin-top: 10px;
        font-size: 10px;
        width: fit-content;
    }



      .modal-header-new p{
        padding: 2px ;
        background-color: #2E81DF;
        color: white;
      }

}

@media (max-width: 540px) {

    body {
        background-attachment: fixed; 
    }

    .logo-container h2 {
        font-size: 18px;
    }

    header h5 {
        font-size: 19px;
    }

    nav {
        flex-direction: column;
        align-items: center;
    }

    nav a {
       
        font-size: 22px;
        
    }

    .theme h2{
        font-size: 25px;
    }

    .next-service h1{
        text-decoration: dashed;
        font-size: 2rem;
        font-weight: 200;
        background-color: #5a5c5f;
        border-top: 4px solid red;
        width: 200px;
        margin-bottom: 2px;
        margin-top: 1px;
        padding-left: 5px;
        z-index: -5;
    
    }

    .church-activities h1{
        text-decoration: dashed;
        font-size: 2rem;
        font-weight: 200;
        background-color: #295aa3;
        border-top: 4px solid red;
        width:250px;
        margin-bottom: 2px;
        margin-top: 1px;
        padding-left: 5px;
        z-index: -5;
    
    }

    .latest-flex1-grid1,
    .card-content {
        padding: 10px;
    }

    .card-header {
        font-size: 1.5rem;
    }

    .card-text {
        font-size: 1.1rem;
    }
    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px; 
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .scroll img {
        width: 60%;
        height: 320px; 
    }
    
    .scroll-button {
        position: absolute;
        top: 220px;
        border-radius: 5px;
        transform: translateX(60%);
        margin-top: 10px;
        font-size: 10px;
    }
    
}

@media (max-width: 390px) {
    nav a {
       
        font-size: 20px;
        
    }

    body {
       
        background-attachment: fixed;
       
    }
    
    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px; 
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .scroll img {
        width: 100%;
        height: auto; 
    }
    
    .scroll-button {
        position: absolute;
        top: 280px;
        border-radius: 5px;
        transform: translateX(15%);
        margin-top: 10px;
    }
    .logo-container h2 {
        font-size: 18px;
    }

    header h5 {
        font-size: 19px;
    }

    .news-container h3{
        color: white;
        font-size: 18px;
        margin-top: -25px;
        background-color: #2E81DF;
        height: 30px;
        border-radius: 7px;
       
    }

    .next-service h1{
        text-decoration: dashed;
        font-size: 2rem;
        font-weight: 200;
        background-color: #5a5c5f;
        border-top: 4px solid red;
        width: 200px;
        margin-bottom: 2px;
        margin-top: 1px;
        padding-left: 5px;
        z-index: -5;
    
    }

    .theme h2{
        font-size: 17px
    }

    .theme h4{
        font-size: 16px;
    }

    .theme h5{   
        font-size: 15px;
    }

    .church-activities h1{
        text-decoration: dashed;
        font-size: 2rem;
        font-weight: 200;
        background-color: #295aa3;
        border-top: 4px solid red;
        width:250px;
        margin-bottom: 2px;
        margin-top: 1px;
        padding-left: 5px;
        z-index: -5;
    
    }

    td {
        text-align: left;
        padding: 10px;
        font-size: 15px;
    
      }

    
}

@media (max-width: 430px) {
    .modal-header-new p{
        padding: 2px ;
        background-color: #2E81DF;
        color: white;
      }

      .modal-body-new

    .logo {
        height: 40px;
    }

    .theme1 h2{
        margin-top: 20px;
        margin-bottom: 2px;
        font-weight: 100;
        font-family: 'Times New Roman', Times, serif;
        font-size: 18px;
    }

    .logo-container h2 {
        font-size: 18px;
    }

    header h5 {
        font-size: 19px;
    }
    
    .PCG-logo {
        height: 50px;
    }
    
    .KNUST-logo {
        height: 50px;
    }

    header h2{
        font-size: 15px;
       
    }
    
    header h5 {
       
        font-size: 15px;
        
    }
    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px; 
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .scroll img {
        width: 90%;
        height: 320px; 
    }
    
    .scroll-button {
        position: absolute;
        top: 220px;
        border-radius: 5px;
        transform: translateX(10%);
        margin-top: 10px;
    }

    td {
        text-align: left;
        padding: 10px;
        font-size: 17px;
    
      }
    
}


@media (max-width: 375px) {


    .logo {
        height: 40px;
    }
    
    .PCG-logo {
        height: 50px;
    }
    
    .KNUST-logo {
        height: 50px;
    }

    header h2{
        font-size: 15px;
       
    }
    
    header h5 {
       
        font-size: 20px;
        
    }

    .news-container h3{
        color: white;
        font-size: 20px;
        margin-top: -25px;
        background-color: #2E81DF;
        height: 30px;
        border-radius: 7px;
       
    }
    .news-container h2{
        font-size: 20px;
        font-weight: 100;
        border-left: 2px solid black;
        margin-top: 50px;
        color: black;
        padding-left: 5px;

    }

    
   

    .next-service h1{
        text-decoration: dashed;
        font-size: 1.5rem;
        font-weight: 200;
        background-color: #5a5c5f;
        border-top: 4px solid red;
        width: 200px;
        margin-bottom: 2px;
        margin-top: 1px;
        padding-left: 5px;
        z-index: -5;
    
    }

    .theme h2{
        font-size: 15px;
        margin-top: 20px;
        margin-bottom: 2px;
    }

    .theme h3{
    margin-top: 20px;
    margin-bottom: 2px;
    border-top: none;
    font-size: 27px;
}
    .theme p {
        font-size: 15px;
        font-family: "poppins";
        padding: 2px;
        
    }
    
    .theme h4{
        font-size: 15px;
    }
    
    table {
        border-collapse: collapse;
        border-spacing: 0;
        width: 80%;
        border-top: 1px solid #1737c2;
        border-radius: 6px;
        margin: 0 auto;
        margin-top: 12em;
      }
      
      th{
        text-align: left;
        padding: 8px;
        color: black;
        background-color: white;
        font-size: 20px;
      }
      
      td {
        text-align: left;
        padding: 10px;
        font-size: 15px;
    
      }

      footer p{
        font-size: 10px;
      }
    .church-activities h1{
        text-decoration: dashed;
        font-size: 1.5rem;
        font-weight: 200;
        background-color: #295aa3;
        border-top: 4px solid red;
        width: 220px;
        margin-bottom: 2px;
        margin-top: 1px;
        padding-left: 5px;
        z-index: -5;
    
    }
    
    .church-activities p{
        color: black;
    }
   
  
    
    .theme1 h2{
        margin-top: 20px;
        margin-bottom: 2px;
        font-weight: 100;
        font-family: 'Times New Roman', Times, serif;
        font-size: 15px;
    }
    
    
    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px; 
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .scroll img {
        width: 90%;
        height: 320px;
    }
    
    .scroll-button {
        position: absolute;
        top: 220px;
        border-radius: 5px;
        transform: translateX(15%);
        margin-top: 10px;
    }
    .modal-body-new p{
        font-size: 12px;
    }
}

@media (max-width: 360px) {
    .scroll {
        position: relative;
        top: 0;
        right: 0;
        margin-top: 20px; 
        padding-left: 0;
        width: 100%;
        text-align: center; 
    }
    
    .scroll img {
        width: 100%;
        
        height: 320px; 
    }
    
    .scroll-button {
        position: absolute;
        top: 220px;
        border-radius: 5px;
        transform: translateX(5%);
        margin-top: 10px;
    }
    .modal-content-new{
        position: relative;
        background-color: #fefefe;
        margin: auto;
        height: 380px;
        overflow: auto;
        padding: 0;
        border: 1px solid #888;
        border-radius: 5px;
        width: 80%;
        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
        -webkit-animation-name: animatetop;
        -webkit-animation-duration: 0.4s;
        animation-name: animatetop;
        animation-duration: 0.4s
      }


  .modal-new {
    display: none; 
    position: fixed;
    z-index: 10;
    left: 0;
    top: 2;
    padding-top: 30px;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0,0.4); 
}

.modal-body-new p{
    font-size: 12px;
}

}