body {
      margin: 0;
      padding: 0; 
      background-color: black;
      
    }

    .background-1{
      
      background-size: auto;
      background-repeat: no-repeat;
      
      height: 900px;
      width: 100%;
    }
    .background-5 {
  
  background-color: transparent;
  text-align: left;
  word-spacing: 5.5px;
  line-height:1.3;
  position: relative;
  box-sizing: border-box; /* Include padding and border in the width calculation */
  margin-left: auto;
  margin-right: auto;
  left:239px;
  padding: 15px;
  border: 3px solid rgb(1, 66, 1);

  
}

/* Desktop styles */
@media only screen and (min-width: 768px) {
  .background-5 {
    width: 60%; /* Adjust this percentage based on your desired width for desktop */
    max-width: 700px; /* Set a maximum width for larger screens if needed */
  }
}

/* Mobile styles */
@media only screen and (max-width: 767px) {
  .background-5 {
    width: 90%; /* Adjust this percentage based on your desired width for mobile */
    max-width: none; /* Remove any maximum width for smaller screens */
    left:800px
  }
}


    .background-3{
      
      width: 100%;
    }

    .background-1 {
  background-image: url("sss1.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
  text-align:right;
  padding-right: 60px;
  box-sizing: border-box;
  max-width: 100%; /* Ensure the element doesn't exceed the width of its container */
  margin: 0 auto; /* Center the element horizontally */
  font-family: 'Copperplate Gothic Light';
}

    .background-2,
    .background-3{
      background-color: black;
    }

    header {
      background-color: rgba(51, 51, 40, 0); 
      color: rgb(0, 117, 51);
      position: fixed;
      width: 100%;
      top: 0;
      transition: background-color 0.5s ease;
      z-index: 1000;
      display: flex;
      justify-content: center; 
      align-items: center; 
    }
   
    #myHeader img {
      height: 50px;
      margin-right: 10px;
      height: 50px; 
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    #section3 img {
      width: 12%; 
      height: auto; 
      margin: 20px 0px 5px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section4 img {
      width: 10%; 
      height: auto;
      margin: 10px 0px 10px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section5 img {
      width: 15%; 
      height: auto; 
      margin: 1px 0px 1px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section6 img {
      width: 13%; 
      height: auto; 
      margin: 5px 0px 5px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section7 img {
      width: 17%;
      height: auto; 
      margin: 1px 0px 0px 0px;
      transition: transform 0.5s ease;
      border: 3px solid rgb(3, 44, 3);
    }
    #section8 img {
      width: 10%; 
      height: auto; 
      margin: 30px 0px 30px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section9 img {
      width: 13%; 
      height: auto; 
      margin: 5px 0px 5px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section10 img {
      width: 13%; 
      height: auto; 
      margin: 20px 0px 5px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section11 img {
      width: 14%; 
      height: auto; 
      margin: 5px 0px 5px 0px;
      transition: transform 0.5s ease;
      border: 3px solid rgb(3, 44, 3);
    }
    #section12 img {
      width: 60%; 
      height: auto; 
      margin: auto;
      transition: transform 0.5s ease;
      border: 3px solid rgb(3, 44, 3);

    }
    #section13 img {
      width: 10%; 
      height: auto; 
      margin: 30px 0px 30px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
   
    #section15 img {
      width: 10%; 
      height: auto; 
      margin: 30px 0px 30px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section16 img {
      width: 12%; 
      height: auto; 
      margin: 5px 0px 5px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section17 img {
      width: 12%; 
      height: auto;
      margin: 5px 0px 5px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }
    #section18 img {
      width: 12%; 
      height: auto; 
      margin: 5px 0px 5px 0px;
      transition: transform 0.5s ease; 
      border: 3px solid rgb(3, 44, 3);
    }

    #section3 img:hover {
      transform: scale(1.5); 
    }
    #section4 img:hover {
      transform: scale(1.7); 
    }
    #section5 img:hover {
      transform: scale(1.5); 
    }
    #section6 img:hover {
      transform: scale(1.4); 
    }
    #section7 img:hover {
      transform: scale(1.4); 
    }
    #section8 img:hover {
      transform: scale(1.7);
    }
    #section9 img:hover {
      transform: scale(1.4); 
    }
    #section10 img:hover {
      transform: scale(1.5); 
    }
    #section11 img:hover {
      transform: scale(1.4); 
    }
    #section12 img:hover {
      transform: scale(1.4); 
    }
    #section13 img:hover {
      transform: scale(1.7); 
    }
    
    #section15 img:hover {
      transform: scale(1.7); 
    }
    #section16 img:hover {
      transform: scale(1.4); 
    }
    #section17 img:hover {
      transform: scale(1.4); 
    }
    #section18 img:hover {
      transform: scale(1.4); 
    }

    #scrollText div {
      display: inline-block;
      vertical-align: middle;
      text-align: center; 
     
    }

    #scrollText {
      opacity: 0; 
      transition: opacity 0.5s ease; 
      position: fixed;
      top: 0;
      margin: 1px 5px 2px 20px ; 
      text-align: center;
      vertical-align: middle;
      white-space: nowrap;
    }

    #scrollText img {
      margin-left: 90%;

      height: 30px; 
      transition: opacity 0.5s ease, transform 0.5s ease; 
    }

    #scrollText div {
      margin-right: 10px; 
      display: inline-block;
      vertical-align: middle;
    }

    section {
      margin-top: 0px; 
      padding: 20px;
      height: auto;
      transition: background-size 0.5s ease;
    }

    #section1 h2,
    #section2 h2,
    #section3 h2,
    #section4 h2,
    #section5 h2,
    #section6 h2,
    #section7 h2,
    #section8 h2,
    #section9 h2,
    #section10 h2,
    #section11 h2,
    #section12 h2,
    #section13 h2,
    #section15 h2,
    #section16 h2,
    #section17 h2,
    #section18 h2 {
      margin-top: 0;
      padding: 20px;
      color: white;
      text-align: center;
      font-family: 'Copperplate Gothic Light';
    
    }
    #section14 p{
      margin-top: 0;
      font-size: small;
      padding: 20px;
      color: white;
      text-align: center;
      font-family: 'Copperplate Gothic Light';
    
    }

    #section2
    {
      background-image:url("b.jpg");
      background-size: 1000px;
      background-repeat:no-repeat;
      background-position:right;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section3 {
      background-image:url("b.jpg");
      background-size: 1500px;
      background-repeat:no-repeat;
      background-position:right;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section4 {
      background-image:url("s.jpg");
      background-size: 1550px;
      background-repeat:no-repeat;
      background-position:left;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section8 {
      background-image:url("bcd.jpg");
      background-size: 1500px;
      background-repeat:no-repeat;
      background-position:left;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section5 {
      background-image:url("bcg.jpg");
      background-size: 1550px;
      background-repeat:no-repeat;
      background-position:center;
      background-color: black;
      height: 650px;
      color: white;
    }
    #section6 {
      background-image:url("bd.jpg");
      background-size: 1550px;
      background-repeat:no-repeat;
      background-position:center;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section9 {
      background-image:url("bgd.jpg");
      background-size: 1550px;
      background-repeat:no-repeat;
      background-position:center;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section10 {
      background-image:url("md.jpg");
      background-size: 1550px;
      background-repeat:no-repeat;
      background-position:left;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section11 {
      background-image:url("mg.jpg");
      background-size: 1590px;
      background-repeat:no-repeat;
      background-position:center;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section12 {
      background-image:url("l.jpg");
      background-size: cover;
      background-repeat:no-repeat;
      background-position:left;
      background-color: black;
      height: 730px;
      color: white;
      
    }
    #section13 {
      background-image:url("fbd.jpg");
      background-size: 1550px;
      background-repeat:no-repeat;
      background-position:right;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section14 {
      background-image:url("sss.jpg");
      background-size: 100px;
      background-repeat:no-repeat;
      background-position:center;
      background-color: black;
      height: 300px;
      color: white;
    }
    #section15 {
      background-image:url("sss.jpg");
      background-size: 100px;
      background-repeat:no-repeat;
      background-position:center;
      background-color: black;
      height: 600px;
      color: white;
    }
    
    
    #section7 {
      background-image:url("fr.jpg");
      background-size: 1650px;
      background-repeat:no-repeat;
      background-position:right;
      background-color: black;
      height: 650px;
      color: white;
    }
    
    #section19 {
      background-color:black;
      height: 400px;
      color: white;
    }
    #section3 img:hover +.overlay1,
    #section4 img:hover +.overlay2,
    #section8 img:hover +.overlay3,
    #section5 img:hover +.overlay4,
    #section6 img:hover +.overlay5,
    #section9 img:hover +.overlay6,
    #section10 img:hover +.overlay7,
    #section11 img:hover +.overlay8,
    #section12 img:hover +.overlay9,
    #section13 img:hover +.overlay10,
    #section14 img:hover +.overlay11,
    #section15 img:hover +.overlay12,
    #section16 img:hover +.overlay13,
    #section17 img:hover +.overlay14,
    #section7 img:hover +.overlay15,
    #section18 img:hover +.overlay16{
      opacity: 1;
      visibility: visible;
    }
    .overlay1,
    .overlay2,
    .overlay3,
    .overlay4,
    .overlay5,
    .overlay6,
    .overlay7,
    .overlay8,
    .overlay9,
    .overlay10,
    .overlay11,
    .overlay12,
    .overlay13,
    .overlay14,
    .overlay15,
    .overlay16 {
      position: absolute;
      font-family: 'Copperplate Gothic Light';
      transform: translate(-50%, -50%);
      font-size: 20px;
      font-weight: bold;
      color: rgb(16, 1, 1);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.5s ease, visibility 0.5s ease;
      left: 50%;
      bottom: auto;
      background-color: rgb(5, 106, 24);
      width: 400px;
      border: 5px solid rgb(3, 44, 3);
      padding: 15px;
      margin: 5px; 
      
    }
    

.overlay1,
.overlay2, 
.overlay3, 
.overlay4, 
.overlay5, 
.overlay6, 
.overlay7, 
.overlay8,
.overlay9, 
.overlay10, 
.overlay11, 
.overlay12,
.overlay13, 
.overlay14, 
.overlay15, 
.overlay16 {
   top: auto; }


    .zoom-out-bg {
      transition: background-size 0.5s ease;
    }
    p {
      text-align: center;
    }
    

    
    #myHeader h1 {
      align-items: center;
    }
    h1 {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#slideshow-container {
    position: center;
    max-width: 100%;
    margin: auto;
  }

  .mySlides {
    display: none;
  }

  .prev,
  .next {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -28px;
    color: black;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 0px 0px 0;
    cursor: pointer;
    
  }

  .prev {
    top:569%;
    left: 0;
  
  }

  .next {
    top:569%;
    right: 0;
    
  }

  .prev:hover,
  .next:hover {
    background-color: transparent;
  }
  #slideshow-images {
      display: none;
    }
    
    

  
    #section12 {
        transition: background-image 1s ease; 
        }