@media (width < 768px) {

  nav{
    height: 25vh;
    /* position: fixed; */
  }
    
  .navbar-toggler-icon {
    background-color: white;
    /* position: fixed; */
  } 
  #navbarNavDropdown{
    position: relative;
    background-color: black;
    z-index: 10;

  }
  /* ************************************************************* */
  .card-content{
    width: 90vw;
    height: auto;
    /* background-color: orange;  */
}

#home marquee{
  margin-top: 10vh;
  margin-bottom: 0;
  
}

.live-button{
  margin-left: 25px;
}
    /* ****************************************************************************************** */
  
#typewriter {
  margin-top: 30px;
  white-space: wrap;
  height: auto;
  width: 90vw;
  color: white;
   /* background-color: red;   */
}
#text{
  width: 100%;
  font-size: 50px;
  
}
/* ***************************************** */
#typewrite {
  display: flex;
  height: 16vh;
  width: 90vw;
  color: white;
  /* background-color: yellow; */
}

#desc{
  width: 100%;
  font-size: 30px;
  /* background-color: blue; */
}

/* &********************************************* */
#typewr {
  margin-top: 10px;
  width: 90vw;
  color: white;
  /* background-color: orange; */
}
#slogan{
  width: 100%;
  font-size: 40px;
  /* background-color: blue; */

}
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
  
#play-vid{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100vw;
    height: auto;
    margin-bottom: 15px;
}

.vid-left, .vid-ryt{
  display:flex;
  align-items: center;
  justify-content: center;
  width: 80%;
  height: 300px; 
  padding: 10px; 
  /* background-color: orange;  */
}

.motion{
  width: 100%;
  height: 100%;
}
/* ****************************************** */
/*  ABOUT  */
.AboutUs{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: auto;
}
.us1{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%; 
  height: auto;
  padding: 10px 10px;
  margin-top: 20px;
  /* background-color: #454545;  */
}

.us2{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 65%; 
  height: auto;
  padding: 0 10px;
  margin-top: 10px;
  /* background-color: #454545;  */
}
.four-fold{
  padding: 15px;
  width: 100%;
  height: auto;
  display: block;
  justify-content: center;
}
/* *********************************************** */
  /*START THE THEME FOR THE YEAR  */
  #themes{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: auto;
    /* margin: 0 50px; */
}
.theme-month, .theme-year{
  display:flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;  
  margin-bottom: 10px; 
}

.theme-month img, .theme-year img{
  position: relative;
  width: 100%;
  height: 100%;
}
/* END THE THEME FOR THE YEAR */
/* ************************************* */
/* MEDIA BEGINS FROM HERE */
#media{
  width: 100vw;
  height: auto;
}
#overalldrop{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}
#pastor-desk{
  width: 100%;
   height: auto;
}
#pastor-desk h1,h3{
  font-weight: bold;
}
#pastor-desk .msg{
  width: 100%;
  padding: 5px;
  font-size: 20px;
  color: white;
}
#pastor-desk img{
    width: 80px;
    height: 80px;
    border-radius: 60px;
    margin-left:.5rem;
    shape-outside:circle();
    float: left;
    margin-right:1.5rem;
}

#live-stream{
  padding-top: 10px;
  width: 100%;
  height: auto;
}

#live-stream p{
  padding: 10px;
}
#live-stream .btn{
  width: 230px;
  height: 40px;
}

#weekActs{
    padding-top: 10%;
    width: 100%;
    height: auto;
}

#weekActs p{
    text-align: center;
}
/* &&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& */
#anthem{
    margin: 30px 0;
    padding: 30px;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    align-items: center;
    justify-content: center;
}

/* ************************************ */
  #gallery {
    height: auto; /* Adjust height to fit smaller viewport */
    width: 100vw;
    padding-top: 60px; 
    
  }

  .gallery-container {
    flex-direction: row; /* Switch back to horizontal layout */
    flex-wrap: wrap; /* Allow images to wrap onto multiple rows */
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
  }

  .gallery-item {
    width: 150px; 
    height: 150px;
    align-items: center;
    justify-content: center;
  }

  .gallery-item img {
    height: 140px;
    width: 140px; 
  }

  .lightbox img {
    max-width: 85%; /* Slightly reduce image size in lightbox */
  }


/* TESTIMONY SECTION BEGINS HERE  */
#testimony{
  height: auto;
  width: 100vw;
  display: flex;
}

.testy-cover{
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}
.testy1, .testy2{
  width: 90%;
  height: 40%;
  margin: 10px 0;
  background-color: red;
}

.testy1 img, .testy2 img{
  width: 100%;
  height: 100%;
}



/* LOCATION AND MAP  */
#contact-us{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: auto;
    }
.contact-msg{
    padding: 10px;
    width: 90%;
    height: auto;
    /* background-color: red; */

}
/* .contact-msg p{
  font-size: 13px;
} */
/* &********************************* */
.Location-WriteUs{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: auto;
        margin-right: 0;
        /* background-color: palegreen; */
    }
    
    .map iframe{
        width: 90vw;
        height: 150px;
        margin-bottom: 20px;
        padding-left: 0;
        margin-left: 0;
        /* background-color: blue; */
    }

    .lets_talk{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        /* background-color: yellow; */
       
    }
   
    form input{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
        width: 350px;
        height: 40px;
        border-radius: 3px;
        border: black 1px solid;
        padding-left: 5px;
        /* background-color: fuchsia; */
    }
    
    textarea{
        width: 350px;
        height: 35vh;
        border-radius: 3px;
        padding-left: 0;
        border: black 1px solid;
        padding-left: 5px;
    }
    
    
    .submit{
        display: flex;
        align-items: center;
        width: 350px;
        height: 40px;
    }




/* FOOTER BEGINS HERE  */
footer{
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  gap: 50px;
  padding: 15px 0;
}

.follow-us, .address, .copyright{
   width: 55%;
   /* background-color: purple; */
}


}


/* START HERE MEDIA QUERY FOR THE ABOUT PAGE */
/* @media (width < 768px) {

  #big-box{
      width:100%;
      height: auto;
      color: white;
  }
  .opeilu{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center; 
    text-align: center; 
    width: 100%; 
}

  .opeilu img{
      height: 55px;
      width: 55px;
  }

  .opeilu h1{
      font-size: 22px;
  }
  .opeilu p{
      font-size: 14px;
      text-align: center;
      text-shadow: red 1px 1px 1px;
      letter-spacing: 1px;
  }   
  .aboutUs{
      width: 90%;
  }

  .aboutUs h1{
      font-size: 22px;
      letter-spacing: 2px;
      text-shadow: red 3px -3px 3px;       
  }

  .aboutUs h2{
      font-size: 18px;
      letter-spacing: 2px;
  }
  .aboutUs p{
      font-size: 13px;
      line-height: 20px;
  }

  .img-fold img{
      width: 25px;
      height: 25px;

  }

  .tenets-heading{
      padding-top: 5px;
      font-size: 21px;
      text-shadow: red 2px -2px 2px;
      width:100%;
      height: 13vh;        
  }

  .accordion-flush{
      width: 80vw;
      margin-left: 10%;
  }

  .accordion-body{
     font-size: 13px;        
  }

  .accordion-button.collapsed{
      font-size: 17px;
      font-weight: bold;
  }
 
.free-gift{
  margin-left: 160px;
}
footer .top{
  visibility: visible;
}
} */