h1 {   
    font-family: "p22-cezanne-pro", sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size: 140px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    background-color: rgb(202, 202, 202);
}

@media screen and (max-width: 1200px) {
  h1 {
      font-size: 120px; 
  }
}
@media screen and (max-width: 1000px) {
  h1 {
      font-size: 100px; 
  }
}
@media screen and (max-width: 850px) {
  h1 {
      font-size: 80px; 
  }
}
@media screen and (max-width: 750px) {
  h1 {
      font-size: 60px; 
  }
}

/* Set height of body and the document to 100% to enable "full page tabs" */
body, html {
  height: 100%;
  margin: 0;
  font-family: Arial;
}

nav {
  display:flex;
  align-items: stretch;
}


/* Style tab links */
.tablink {
  background-color: #555;
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 15px;
  width: 16%;
  width: calc(100% / 6); /* Divide the width equally among 6 tabs */
    /* Other existing styles for the tab buttons */
  font-family: "chandler-42-regular", sans-serif;
  font-weight: 400;
  font-style: normal;
}

    @media screen and (max-width: 750px) {
      nav {
        flex-wrap: wrap;
      }
      .tablink {
          width: 100%
      }
    }

.tablink:hover {
  background-color: #777;
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: rgb(0, 0, 0);
  display: none;
  padding: 100px 20px;
  /* height: 100%; */
  min-height: 100%;

}

p {
  font-family: "chandler-42-regular", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
}

h3 {
  font-family: "chandler-42-regular", sans-serif;
  font-weight: 800;
  font-style: italic;
  font-size: 30px;
  text-align: center;
}


.FirstTab {background-color: rgb(161, 155, 141);}
.SecondTab {background-color: rgb(180, 168, 152);}
.ThirdTab {background-color: rgb(190, 179, 159);}
.FourthTab {background-color: rgb(205, 203, 186);}
.FifthTab {background-color: rgb(202, 190, 170);}
.SixthTab {background-color: rgb(212, 205, 179);}



* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 500px;
  position: relative;
  margin: auto;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}



/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.intro img {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%; /* Make sure the image takes up the full width */
  max-width: 1000px; /* Limit the maximum width of the image */
  
}


            .container-about {
              width: 80%; /* Adjust the width as needed */
              margin: auto; /* Center the container */
              padding: 0 20px; /* Add padding to the sides */
            }

            .container-about img {
              width: 100%; /* Make sure the image takes up the full width */
              max-width: 400px; /* Limit the maximum width of the image */
              float: left; /* Float the image to the left */
              margin-right: 20px; /* Add margin to create space between image and text */
            }


            .container1 {
              display: flex;
                justify-content: center;
                align-items: center;
              width: 500px;
              height: 150px;
              position: relative; /* Needed for absolute positioning of the box */
            }

            .box1 {
              width: 500px;
              height: 150px;
              background-color: rgb(190, 179, 159);
              position: absolute; /* Position the box relative to the container */
              top: 50%; /* Position the box 50% from the top of the container */
              left: 50%; /* Position the box 50% from the left of the container */
              transform: translate(-50%, -50%); /* Center the box horizontally and vertically */
              text-align: center; /* Center the text horizontally */
              font-size: 50px;
            }

            .box1 p {
              font-size: 18px;
            }

                      @media screen and (max-width: 750px) {
                        .container1 {
                            width:100%
                        }
                      }

            .container2 {
              display: flex;
                justify-content: center;
                align-items: center;
              width: 500px;
              height: 150px;
              position: relative; /* Needed for absolute positioning of the box */
            }

                    @media screen and (max-width: 750px) {
                      .container2 {
                          width:100%
                      }
                    }

            .box2 {
              width: 500px;
              height: 150px;
              background-color: rgb(205, 203, 186);
              position: absolute; /* Position the box relative to the container */
              top: 50%; /* Position the box 50% from the top of the container */
              left: 50%; /* Position the box 50% from the left of the container */
              transform: translate(-50%, -50%); /* Center the box horizontally and vertically */
              text-align: center; /* Center the text horizontally */
              font-size: 50px;
            }

            .box2 p {
              font-size: 18px;
            }

            .container3 {
              display: flex;
                justify-content: center;
                align-items: center;
              max-width: 500px;
              /* height: 150px; */
              position: relative; /* Needed for absolute positioning of the box */
            }

                    @media screen and (max-width: 750px) {
                      .container3 {
                          width:100%
                      }
                    }

            .box3 {
             max-width: 500px;
              /* height: 150px; */
              background-color: rgb(202, 190, 170);
             /*  position: absolute; Position the box relative to the container */
             /*  top: 50%; Position the box 50% from the top of the container */
              /* left: 50%; Position the box 50% from the left of the container */
              /* transform: translate(-50%, -50%); Center the box horizontally and vertically */
              text-align: center; /* Center the text horizontally */
              font-size: 50px;
            }

            .box3 p {
              font-size: 18px;
            }

            .container4 {
              display: flex;
                justify-content: center;
                align-items: center;
              width: 500px;
              height: 150px;
              position: relative; /* Needed for absolute positioning of the box */
            }

                    @media screen and (max-width: 750px) {
                      .container4 {
                          width:100%
                      }
                    }

            .box4 {
              width: 500px;
              height: 150px;
              background-color: rgb(212, 205, 179);
              position: absolute; /* Position the box relative to the container */
              top: 50%; /* Position the box 50% from the top of the container */
              left: 50%; /* Position the box 50% from the left of the container */
              transform: translate(-50%, -50%); /* Center the box horizontally and vertically */
              text-align: center; /* Center the text horizontally */
              font-size: 50px;
            }

            .box4 p {
              font-size: 18px;
            }
/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 4px 8px;
  position: absolute;
  bottom: 10px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 25px 10px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}