* {
   box-sizing: border-box;
 }

 body {
   overflow-x: hidden;
   background-color: rgb(229, 225, 225);
 }

 main {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }

 /* navBar */
 .sec_part2 {
   background-color: rgba(255, 255, 255, 0.269);
   backdrop-filter: blur(10px);
   border-bottom-left-radius: 10px;
   width: 45%;
   padding: 10px;
 }

 .sec_part a {
   color: #434343;
 }

 .sec_part2 a {
   color: #353535;
 }

 .sec_part2 li {
   display: block;
   margin: 20px;
   margin-top: 0px;
   margin-bottom: 20px;
 }

 .sec_part li:hover,
 .sec_part2 li:hover {
   color: black;
   cursor: pointer;
   background-color: transparent;
 }

 /*banner*/
 .banner-container {
   width: 100%;
   overflow: hidden;
   background: #000000;
   padding: 20px 0;
 }

 .image-track {
   display: flex;
   width: calc(250px * 16);
   /* 8 images * 2 for seamless loop */
   animation: scrollBanner 30s linear infinite;
 }

 .image-track img {
   width: 250px;
   height: 150px;
   object-fit: cover;
   margin: 0 10px;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
   transition: transform 0.3s ease;
 }

 .image-track {
   display: flex;
   width: calc(250px * 14);
   /* 7 images * 2 for seamless loop */
   animation: scrollBanner 30s linear infinite;
 }


 @keyframes scrollBanner {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 /*tag line*/
 .tagline-wrapper {
   position: relative;
   width: 90%;
   max-width: 1000px;
   height: 150px;
   display: flex;
   justify-content: center;
   align-items: center;
   align-content: center;
 }

 .tagline {
   position: absolute;
   font-size: 2.8rem;
   font-weight: 700;
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-align: center;
   opacity: 0;
   transform: translateY(50px);
   animation: fadeSlide 15s infinite;
   letter-spacing: 1.5px;

 }

 /* Individual gradient styles */
 .tagline:nth-child(1) {
   background-image: linear-gradient(90deg, #14998c, #149746);
   animation-delay: 0s;
 }

 .tagline:nth-child(2) {
   background-image: linear-gradient(90deg, #ff7f7f, #ffcc70);
   animation-delay: 5s;
 }

 .tagline:nth-child(3) {
   background-image: linear-gradient(90deg, #7fbfff, #b07fff);
   animation-delay: 10s;
 }

 @keyframes fadeSlide {
   0% {
     opacity: 0;
     transform: translateY(50px);
   }

   10% {
     opacity: 1;
     transform: translateY(0);
   }

   30% {
     opacity: 1;
     transform: translateY(0);
   }

   40% {
     opacity: 0;
     transform: translateY(-50px);
   }

   100% {
     opacity: 0;
     transform: translateY(-50px);
   }
 }

 @media (max-width: 768px) {
   .tagline {
     font-size: 1.8rem;
     padding: 0 10px;
   }
 }

 /* about */
 .about {
   margin-top: 40px;
   margin: 20px;
 }

 .about h1 {
   margin-bottom: 10px;
   color: #0aaada;
   position: relative;
   display: inline-block;
 }

 .about h1::after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 3px;
   background-image: linear-gradient(rgb(0, 166, 255), rgb(33, 211, 33));
 }

 .about p {
   font-size: 16px;
   color: rgb(40, 40, 40);
 }

 /*pics*/
 .slideshow {
   position: relative;
   width: 90%;
   height: 600px;
   overflow: hidden;
   border-radius: 20px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
 }

 .slideshow img {
   position: absolute;
   width: 100%;
   height: 100%;
   object-fit: cover;
   opacity: 0;
   transform: scale(1.1);
   filter: blur(4px);
   animation: slideFadeZoom 20s infinite;
   transition: opacity 1s ease-in-out;
 }

 .slideshow img:nth-child(1) {
   animation-delay: 0s;
 }

 .slideshow img:nth-child(2) {
   animation-delay: 6s;
 }

 .slideshow img:nth-child(3) {
   animation-delay: 12s;
 }

 .slideshow img:nth-child(4) {
   animation-delay: 18s;
 }

 .slideshow img:nth-child(5) {
   animation-delay: 24s;
 }

 .slideshow img:nth-child(6) {
   animation-delay: 30s;
 }

 .slideshow img:nth-child(7) {
   animation-delay: 36s;
 }

 @keyframes slideFadeZoom {
   0% {
     opacity: 0;
     transform: scale(1.1);
     filter: blur(4px);
   }

   5% {
     opacity: 1;
     transform: scale(1.05);
     filter: blur(0);
   }

   30% {
     opacity: 1;
     transform: scale(1);
     filter: blur(0);
   }

   40% {
     opacity: 0;
     transform: scale(1.1);
     filter: blur(4px);
   }

   100% {
     opacity: 0;
     transform: scale(1.1);
     filter: blur(4px);
   }
 }

 .tag_img {
   width: 80%;
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: center;
 }

 .tag_img img{
  width: 300px;
 }

 .go_home {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 30px;
 }

 .go_home button {
   padding: 10px 20px;
   border-radius: 10px;
   background-color: #7fbfff;
   cursor: pointer;
   border: none;
   font-weight: 700;
   transition: all 0.5s linear;
   text-transform: none;
 }

 .go_home button:hover {
   background-color: rgb(48, 92, 194);
   color: white;
 }

 .message-section {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 95%;
   background-color: white;
   margin-top: 100px;
 }

 
.message-section {
  background-color: #f1f1f1;
  padding: 20px;
  width: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: left;
  font-family: Arial, sans-serif;
}

.message-section img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
  width: 150px;
  height: 150px;
}

.message-section h2 {
  color: #333;
  margin-bottom: 10px;
}

.message-section p {
  font-size: 1rem;
  line-height: 1.6;
  color: #666;
}


 @media (max-width : 500px) {
   .tag_img {
     display: flex;
     flex-direction: column-reverse;
   }
 }