body{
    background-color: #fcfafa;
}


.all-content{
    width: calc(100% - 40px);
    margin-left: 20px;
    align-items: center;
    display: block;
    margin-top: 7rem;
    height: max-content;
    align-items: center;
    align-self: center;
    background-color: rgb(241, 236, 236);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.199);
}

.all-content p{
    font-size: 2.5em;
    width: 800px;
    background-color: rgba(255, 235, 205, 0.637);
    height: max-content;
    font-family: 'Times New Roman', Times, serif;
    padding: 10px;
    margin-top: 15px;
    margin-left: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
}

.all-content .nav{
    display: flex;
    width: 100%;
    height: max-content;
    align-items: center;
    align-self: flex-start;
    padding: 10px;
}

.all-content .nav .all-nav1{
    width: 1000px;
    display: block;
    height: fit-content;
    background-color: rgba(211, 207, 207, 0.644);
    margin-left: 100px;
    /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.281);
}

.all-content .nav .all-nav1 h1{
    text-align:start;
    font-size: 22px;
    margin-left: 20px;
}

.all-content .nav .all-nav1 nav{
    font-size: 1.8rem;
    display: block;
    padding: 30px;
    line-height: 30px;
}

.all-content .nav .all-nav1 nav .in{
    font-size: 2.2rem;
    font-family: Georgia, 'Times New Roman', Times, serif;
    margin-left: 50px;
    text-decoration: underline;
    font-weight: 500;
}

.all-content .nav .all-nav1 nav .in2{
    font-size: 2rem;
    margin-left: 40px;
    font-weight: 520;
    display: list-item;
}


.all-content #banners{
    display: block;
    height: max-content;
}

.all-content .all-nav2{
    width: 300px;
    display: block;
    height: fit-content;
    background-color: rgba(235, 247, 166, 0.082);
    margin-left: 40px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.199);
    text-align: center;
    padding-top: 10px;
    margin-top: 30px;
}

.all-content .all-nav2 nav{
    font-size: 1.8rem;
    width: 100%;
    height: fit-content;
    margin-bottom: 5px;
    padding-bottom: 2px;
}

.all-content .all-nav2 nav .span1{
    font-size: 1.6rem;
    width: 100%;
    height: fit-content;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    padding: 10px;
    letter-spacing: 2px;
}


/* The wrapper container */
 .all-content .all-nav2 .image-container {
  position: relative;
 /* display: inline-block;  Keeps container strictly wrapped around the image size */
  display: flex;
  width: 100%;
  height: 100%;
  animation: autoSlide 12s infinite; /* 12 seconds total loop, repeats forever */
}

/* 1. Outer Container: Acts as a window showing only one image at a time */
.all-content .all-nav2 .slider-container {
  width: 100%;         /* Set your preferred layout width */
  height: fit-content;        /* Set your preferred layout height */
  overflow: hidden;     /* Hides the images that are out of bounds */
  position: relative;
  margin: 0 auto;
}

/* The image itself */
 .all-content .all-nav2 .image-container img {
  display: block; /* Removes unnecessary bottom whitespace gaps */
  width: 100%;
  height: auto;
  flex-shrink: 0;       /* Prevents images from squeezing together */
  object-fit: cover;    /* Keeps image proportions clean */
}



/* 4. Animation Keyframes: Moves the row leftward and holds on each image */
@keyframes autoSlide {
  /* Slide 1 (Visible at start) */
  0%, 25% {
    transform: translateX(0);
  }
  /* Transition to Slide 2 */
  30%, 55% {
    transform: translateX(-100%);
  }
  /* Transition to Slide 3 */
  60%, 85% {
    transform: translateX(-200%);
  }
  /* Smooth transition back to Slide 1 */
  100% {
    transform: translateX(0);
  }
}

/* The text overlay */
 .all-content .all-nav2 .text-overlay {
  position: absolute;
  color: rgba(255, 255, 255, 0.795); /* Choose a contrasting color */
  font-family: sans-serif;
  font-size: 24px;
  font-weight: bold;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  opacity: 30%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.527); /* Improves readability over complex images */
}

 .all-content .all-nav2 .text-overlay2 {
  position: absolute;
  color: rgba(255, 255, 255, 0.788); /* Choose a contrasting color */
  font-family: sans-serif;
  font-size: 20px;
  font-weight: bold;

  text-align: center;
  opacity: 50%;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.527); /* Improves readability over complex images */
  margin-left: 50px;
  letter-spacing: 2px;
  margin-top: -90px;
}

.all-content .all-nav1 .photo{
    width: max-content;
    height:max-content;
    margin-left:300px;
    display: flex;
    align-items: center;
    align-self: center;
    align-content: center;
    padding: 10px;
    margin-top: 20px;
}

.all-content .all-nav1 .photo img{
    width: 200px;
    height: 180px;
    margin-left:10px;
    padding: 5px;
    border-radius: 4px;
}



.all-content #document p{
    font-size: 2.2em;
    width: 1000px;
    background-color: rgba(255, 235, 205, 0.637);
    height: max-content;
    font-family: 'Times New Roman', Times, serif;
    padding: 10px;
    margin-top: 15px;
    margin-left: 20px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    margin-left: 250px;
    text-align: center;
}

.all-content #document #rarep{
    width:calc(100% - 60px);
    height: max-content;
    background-color: rgba(255, 235, 205, 0.527);
    margin-left:30px;
    padding:5px;
}

.all-content #document #rarep h1{
    margin-left: 100px;
    font-size: 2.4rem;
}

.all-content #document #rarep .table1{
    margin-left: 200px;
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.all-content #document #rarep .table1 .grp2{
    width: max-content;
    text-align: right;
    color: rgb(43, 23, 23);
}

.all-content #document #rarep .table1 .grp1{
    width: 60px;
    text-align: center;
}


.all-content #document #rarep .table1 .grp3{
    width: max-content;
    text-align: left;
    font-weight: 100;
    font-family: Georgia, 'Times New Roman', Times, serif;
}
.all-content #document #rarep .table2{
    margin-left: 100px;
    font-size: 1.8rem;
}

.all-content #document #rarep .table2 .grp4{
    width: max-content;
    text-align: left;
    font-weight: 100;
    font-family:  'Times New Roman';
}

.all-content #document #rarep table th{
    margin-top: 5px;
}