.social-links li {
   display: inline-block;
   margin-right: 15px;
 }

 .social-links a {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 38px;
   height: 38px;
   border-radius: 50%;
   text-decoration: none;
   transition: filter 0.3s;
 }

 .social-links .fa-facebook-f {
   background-color: #1877f3;
   color: #fff;
   font-size: 16px;
   width: 38px;
   height: 38px;
   line-height: 38px;
   border-radius: 50%;
   text-align: center;
 }

 .social-links .fa-instagram {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
   color: #fff;
   font-size: 16px;
   width: 38px;
   height: 38px;
   line-height: 38px;
   border-radius: 50%;
   text-align: center;
 }

 .social-links .fa-twitter {
   background-color: #1da1f2;
   color: #fff;
   font-size: 16px;
   width: 38px;
   height: 38px;
   line-height: 38px;
   border-radius: 50%;
   text-align: center;
 }

 .social-links .fa-youtube {
   background-color: #ff0000;
   color: #fff;
   font-size: 16px;
   width: 38px;
   height: 38px;
   line-height: 38px;
   border-radius: 50%;
   text-align: center;
 }

 .social-links a:hover {
   filter: brightness(1.15);
 }


 /* Tabs */
 .timeline-tabs {
   display: flex;
   justify-content: center;
   /* flex-wrap: wrap; */
   margin-bottom: 30px;
   list-style: none;
   padding: 0;
   gap: 15px;
 }

 .timeline-tabs li {
   padding: 10px 22px;
   border-radius: 30px;
   background: rgba(255, 255, 255, 0.08);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   cursor: pointer;
   transition: all 0.35s ease;
   font-weight: 500;
   letter-spacing: 0.4px;
 }

 .timeline-tabs li.active,
 .timeline-tabs li:hover {
   background: linear-gradient(135deg, #ffffff, #dcdcdc);
   color: #111;
   font-weight: 600;
   transform: translateY(-2px);
   box-shadow: 0 6px 16px rgba(255, 255, 255, 0.15);
 }

 /* Row Layout */
 .timeline-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 40px;
   position: relative;
   padding: 60px 30px;
   border-radius: 18px;


   overflow: hidden;
   transition: all 0.4s ease;
 }

 /* Subtle hover glow */
 .timeline-row:hover {
   transform: scale(1.02);
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.35);
 }

 /* Huge year in background */
 .year-background {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 180px;
   font-weight: 900;
   line-height: 1;
   color: rgba(255, 255, 255, 0.07);
   pointer-events: none;
   white-space: nowrap;
   z-index: 1;
   letter-spacing: -5px;
   text-shadow: 0 0 15px rgba(255, 255, 255, 0.05);
 }

 /* Image block */
 .timeline-image {
   flex: 1;
   max-width: 38%;
   z-index: 2;
   display: flex;
   justify-content: center;
 }

 .timeline-image img {
   width: 75%;
   border-radius: 20px;
   /* box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35); */
   transition: transform 0.4s ease, box-shadow 0.4s ease;
 }

 .timeline-image img:hover {
   transform: scale(1.05);
   box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
 }

 /* Right-side Text */
 .timeline-text {
   flex: 1;
   max-width: 55%;
   color: #fff;
   font-size: 18px;
   font-weight: 400;
   line-height: 1.9em;
   position: relative;
   z-index: 2;
   letter-spacing: 0.3px;
 }

 /* Year Progress Bar */
 .year-progress {
   margin-top: 45px;
   overflow-x: auto;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
   padding: 10px 0;
 }

 #yearList {
   display: inline-flex;
   gap: 20px;
   padding: 0;
   margin: 0;
 }

 #yearList li {
   cursor: pointer;
   padding: 10px 24px;
   border-radius: 30px;
   font-size: 15px;
   font-weight: 500;
   letter-spacing: 0.5px;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.18);
   transition: all 0.3s ease;
 }

 #yearList li.active,
 #yearList li:hover {
   background: linear-gradient(135deg, #fff, #ddd);
   color: #000;
   font-weight: 600;
   transform: translateY(-2px);
   box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2);
 }

 .year-progress {
   margin-top: 50px;
   padding: 28px 0 18px 0;
   width: 100%;
   overflow-x: auto;
   position: relative;
   z-index: 5;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
 }

 #yearList {
   display: flex;
   align-items: center;
   gap: 100px;
   padding: 0 13%;
   margin: 0;
   list-style: none;
   position: relative;
 }

 /* Timeline Connector Line */
 #yearList::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 7%;
   right: 7%;
   height: 6px;
   background: linear-gradient(90deg, #c7cfff 0%, #f8f8ff 100%);
   opacity: 0.22;
   z-index: 1;
   transform: translateY(-50%);
   border-radius: 6px;
 }

 /* Year Glass Cards */
 #yearList li {
   position: relative;
   z-index: 2;
   padding: 14px 28px;
   background: rgba(255, 255, 255, 0.17);
   border: 1.5px solid rgba(255, 255, 255, 0.19);
   border-radius: 20px;
   backdrop-filter: blur(8px);
   color: #eee;
   font-size: 1rem;
   font-weight: 500;
   box-shadow: 0 8px 28px -6px rgba(36, 39, 77, 0.18);
   cursor: pointer;
   transition: all 0.27s cubic-bezier(0.4, 1, 0.75, 1.3);
   margin-bottom: 3px;
   filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.19));
 }

 /* Connector arrow between year cards, except last */
 #yearList li:not(:last-child)::after {
   content: "";
   position: absolute;
   top: 48%;
   right: -18px;
   width: 28px;
   height: 6px;
   background: linear-gradient(90deg, #fff5 0%, #e3eefd 100%);
   border-radius: 3px;
   transform: translateY(-50%);
   z-index: 0;
   opacity: 0.66;
   display: none;
 }

 /* Active Year */
 #yearList li.active {
   background: rgba(255, 255, 255, 0.46);
   color: #111;
   font-weight: 700;
   box-shadow: 0 14px 36px -8px rgba(100, 160, 255, 0.22), 0 2px 8px 0px #fff7;
   border: 2.5px solid #fff;
   transform: scale(1.12) translateY(-4px);
   filter: drop-shadow(0 8px 24px rgba(140, 180, 255, 0.19));
 }

 /* Hover effect */
 #yearList li:not(.active):hover {
   background: rgba(255, 255, 255, 0.30);
   color: #303040;
   border: 1.5px solid #dde7ff;
   transform: scale(1.05);
   box-shadow: 0 7px 20px -7px rgba(130, 180, 241, .10);
 }

 /* Fancy indicator dot for active year */
 #yearList li.active::before {
   content: "";
   position: absolute;
   top: -13px;
   left: 50%;
   transform: translateX(-50%);
   width: 14px;
   height: 14px;
   background: linear-gradient(135deg, #fff 70%, #d5e3ff 100%);
   border-radius: 50%;
   box-shadow: 0 0 15px 3px #e6f2ff99, 0 2px 8px #c7e0ff44;
   border: 2px solid #a5bffc;
   z-index: 10;
   display: none;
 }

 @media (max-width: 700px) {
   #yearList {
     gap: 24px;
     padding: 0 5%;
   }

   #yearList li {
     font-size: 15px;
     padding: 9px 19px;
     border-radius: 13px;
   }

   #yearList li:not(:last-child)::after {
     width: 18px;
   }
 }

 .video-box {
   position: relative;
   overflow: hidden;
 }

 .video-box img {
   transition: transform 0.4s ease;
 }

 .video-box:hover img {
   transform: scale(1.1);
   filter: brightness(70%);
 }

 .video-btn {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: red;
   color: #fff;
   font-size: 28px;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   text-align: center;
   line-height: 60px;
   transition: all 0.3s ease;
   box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
 }

 .video-btn:hover {
   background: #fff;
   color: red;
   transform: translate(-50%, -50%) scale(1.1);
   box-shadow: 0 0 25px rgba(255, 0, 0, 0.8);
 }


 .video-thumb {
   position: relative;
   display: inline-block;
   overflow: hidden;
   border-radius: 20px;
   cursor: pointer;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
 }

 .video-thumb img {
   display: block;
   width: 100%;
   height: auto;
   transition: transform 0.6s ease, filter 0.6s ease;
 }

 /* Hover Zoom Effect */
 .video-thumb:hover img {
   transform: scale(1.1);
   filter: brightness(0.8);
 }

 /* Glass Overlay */
 .video-thumb::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   opacity: 0;
   transition: opacity 0.5s ease;
 }

 .video-thumb:hover::after {
   opacity: 1;
 }

 /* Play Button */
 .play-button {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(255, 0, 0, 0.85);
   border-radius: 50%;
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: all 0.4s ease;
   box-shadow: 0 0 20px rgba(255, 0, 0, 0.6);
 }

 .play-button::before {
   content: "";
   border-style: solid;
   border-width: 14px 0 14px 22px;
   border-color: transparent transparent transparent white;
   margin-left: 4px;
 }

 /* Hover Play Button Glow */
 .video-thumb:hover .play-button {
   transform: translate(-50%, -50%) scale(1.15);
   box-shadow: 0 0 25px rgba(255, 0, 0, 0.9), 0 0 40px rgba(255, 50, 50, 0.8);
 }

 .social-media {
   display: flex;
   /* make it flexible */
   flex-direction: column;
   /* force vertical layout */
   gap: 12px;
   /* spacing between rows */
 }

 .social-media a {
   display: flex;
   /* keep icon + text in one line */
   align-items: center;
   font-size: 16px;
   color: #333;
   text-decoration: none;
   transition: all 0.3s ease;
 }

 .social-media a i {
   margin-right: 8px;
   font-size: 18px;
 }

 /* Brand colors for icons */
 .social-media .fa-facebook-f {
   color: #1877f2;
 }

 .social-media .fa-twitter {
   color: #1da1f2;
 }

 .social-media .fa-linkedin-in {
   color: #0077b5;
 }

 .social-media .fa-instagram {
   background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }

 /* Hover */
 .social-media a:hover {
   transform: translateX(5px);
 }

 /* footer.css */
 footer {
   background-color: #1c1f26;
   color: #fff;
   padding: 20px 0px;
   font-family: Arial, sans-serif;
 }

 footer .footer-logo {
   max-width: 400px;
 }

 footer .footer-heading {
   text-align: right;
   margin-bottom: 10px;
   font-size: 14px;
   color: #ccc;
   text-transform: uppercase;
 }

 footer hr {
   border-color: #444;
   margin: 0 0 8px 0;
 }

 footer ul {
   list-style: none;
   padding: 0;
   margin: 0;
   line-height: 2;
 }

 footer a {
   color: #ccc;
   text-decoration: none;
 }

 footer .footer-social a {
   color: #fff;
   margin: 0 10px;
   font-size: 20px;
 }

 footer .footer-section h5 {
   margin-bottom: 15px;
   font-weight: bold;
   color: white;
 }

 footer .footer-address {
   color: #ccc;
   margin: 0;
 }

 footer .footer-phone {
   color: #ccc;
   margin: 5px 0;
 }

 footer .footer-map {
   border-radius: 12px;
   overflow: hidden;
   margin-top: 10px;
 }

 footer .footer-bottom {
   border-color: #444;
   margin: 30px 0;
   font-size: 14px;
   color: #aaa;
 }

 footer .footer-policy a {
   color: #aaa;
   text-decoration: none;
   margin-right: 20px;
 }

 footer .footer-powered img {
   height: 24px;
   margin-left: 8px;
 }