/*==================================
Hero Slider
==================================*/


 .hero-slider {
     position: relative;
     height: 500px;
     overflow: hidden;
     background: #000;
 }

 .heroSwiper,
 .heroSwiper .swiper-slide {
     height: 500px;
 }

 /*====================================================
 Background Image
====================================================*/

 .slide-bg {
     position: absolute;
     inset: 0;
     background-size: cover;
     background-position: top center;
     background-repeat: no-repeat;
     animation: heroZoom 12s ease-in-out infinite alternate;
 }

 /*====================================================
 Dark Overlay
====================================================*/

 .overlay {
     position: absolute;
     inset: 0;
     background:
         linear-gradient(90deg,
             rgba(0, 0, 0, .88) 0%,
             rgba(0, 0, 0, .70) 35%,
             rgba(0, 0, 0, .45) 70%,
             rgba(0, 0, 0, .25) 100%);
 }

 .overlay:before {

     content: "";

     position: absolute;

     inset: 0;

     background:
         radial-gradient(circle at 20% 40%,
             rgba(255, 255, 255, .10),
             transparent 40%);

     animation: overlayMove 12s linear infinite;

 }

 /*====================================================
 Hero Content
====================================================*/

 .hero-content {

     position: relative;

     z-index: 5;

     display: flex;

     align-items: center;

     justify-content: space-between;

     height: 560px;

 }

 .hero-text {

     width: 52%;

     color: #fff;

 }

 /*====================================================
 Subtitle
====================================================*/

 .subtitle {

     display: inline-flex;

     align-items: center;

     gap: 10px;

     font-size: 13px;

     font-weight: 600;

     text-transform: uppercase;

     letter-spacing: 2px;

     color: #FFD54F;

     margin-bottom: 15px;

     opacity: 0;

     animation: fadeUp .7s forwards;

     animation-delay: .3s;

 }

 .subtitle:before {

     content: "";

     width: 40px;

     height: 2px;

     background: #FFD54F;

     animation: lineGrow 1s forwards;

 }

 /*====================================================
 Heading
====================================================*/

 .hero-text h1 {

     font-size: 54px;

     line-height: 1.15;

     font-weight: 700;

     color: #fff;

     margin-bottom: 18px;

     opacity: 0;

     animation: fadeUp .8s forwards;

     animation-delay: .6s;

 }

 .hero-text h1 span {

     color: #FFD54F;

 }

 /*====================================================
 Paragraph
====================================================*/

 .hero-text p {

     font-size: 16px;

     line-height: 1.8;

     color: #f3f3f3;

     max-width: 560px;

     margin-bottom: 28px;

     opacity: 0;

     animation: fadeUp .9s forwards;

     animation-delay: .9s;

 }

 /*====================================================
 Buttons
====================================================*/

 .hero-btns {

     display: flex;

     gap: 14px;

     opacity: 0;

     animation: fadeUp 1s forwards;

     animation-delay: 1.2s;

 }

 .theme-btn {

     position: relative;

     overflow: hidden;

     padding: 13px 30px;

     border-radius: 40px;

     background: #fc0d11;

     color: #fff;

     text-decoration: none;

     font-weight: 600;

     transition: .35s;

 }

 .theme-btn:hover {

     transform: translateY(-3px);

     box-shadow: 0 15px 35px rgba(252, 13, 17, .35);

     color: #fff;

 }

 .theme-btn:before {

     content: "";

     position: absolute;

     top: 0;

     left: -120%;

     width: 100%;

     height: 100%;

     background:
         linear-gradient(120deg,
             transparent,
             rgba(255, 255, 255, .45),
             transparent);

     transition: .8s;

 }

 .theme-btn:hover:before {

     left: 120%;

 }

 /* Outline Button */

 .btn-outline {

     padding: 13px 30px;

     border-radius: 40px;

     text-decoration: none;

     color: #fff;

     border: 1px solid rgba(255, 255, 255, .35);

     backdrop-filter: blur(8px);

     background: rgba(255, 255, 255, .08);

     transition: .35s;

 }

 .btn-outline:hover {

     background: #fff;

     color: #111;

 }

 /*====================================================
 Hero Image
====================================================*/

 .hero-image {

     width: 40%;

     text-align: right;

 }

 .hero-image img {

     max-width: 100%;

     animation: floatImage 5s ease-in-out infinite;

     filter: drop-shadow(0 20px 45px rgba(0, 0, 0, .35));

 }

 /*====================================================
 Right Aligned Slide
====================================================*/

 .text-right-slide .hero-content {

     justify-content: flex-end;

 }

 .text-right-slide .hero-text {

     margin-left: auto;

     text-align: right;

 }

 .text-right-slide .hero-text p {

     margin-left: auto;

 }

 .text-right-slide .hero-btns {

     justify-content: flex-end;

 }

 .text-right-slide .subtitle {

     justify-content: flex-end;

 }

 .text-right-slide .subtitle:before {

     display: none;

 }

 .text-right-slide .subtitle:after {

     content: "";

     width: 40px;

     height: 2px;

     background: #FFD54F;

 }

 /*====================================================
 Pagination
====================================================*/

 .heroSwiper .swiper-pagination {

     bottom: 22px !important;

 }

 .heroSwiper .swiper-pagination-bullet {

     width: 9px;

     height: 9px;

     background: #fff;

     opacity: .5;

 }

 .heroSwiper .swiper-pagination-bullet-active {

     width: 24px;

     border-radius: 20px;

     background: #FFD54F;

     opacity: 1;

 }

 /*====================================================
 Animations
====================================================*/

 @keyframes heroZoom {

     from {

         transform: scale(1);

     }

     to {

         transform: scale(1.08);

     }

 }

 @keyframes overlayMove {

     0% {

         transform: translateX(-5%);

     }

     50% {

         transform: translateX(5%);

     }

     100% {

         transform: translateX(-5%);

     }

 }

 @keyframes fadeUp {

     from {

         opacity: 0;

         transform: translateY(35px);

     }

     to {

         opacity: 1;

         transform: translateY(0);

     }

 }

 @keyframes floatImage {

     0%,
     100% {

         transform: translateY(0);

     }

     50% {

         transform: translateY(-12px);

     }

 }

 @keyframes lineGrow {

     from {

         width: 0;

     }

     to {

         width: 40px;

     }

 }

 /*====================================================
 Responsive
====================================================*/

 @media(max-width:991px) {

     .hero-slider,
     .heroSwiper,
     .heroSwiper .swiper-slide {

         height: 480px;

     }

     .hero-content {

         height: 480px;

         justify-content: center;

         text-align: center;

     }

     .hero-text {

         width: 100%;

     }

     .hero-image {

         display: none;

     }

     .hero-text h1 {

         font-size: 38px;

     }

     .hero-text p {

         max-width: 100%;

     }

     .hero-btns {

         justify-content: center;

     }

     .subtitle {

         justify-content: center;

     }

     .subtitle:before {

         display: block;

     }

     .text-right-slide .hero-text {

         text-align: center;

     }

     .text-right-slide .hero-btns {

         justify-content: center;

     }

     .text-right-slide .subtitle {

         justify-content: center;

     }

     .text-right-slide .subtitle:after {

         display: none;

     }

 }

 @media(max-width:576px) {

     .hero-slider,
     .heroSwiper,
     .heroSwiper .swiper-slide {

         height: 400px;

     }

     .hero-content {

         height: 400px;

     }

     .hero-text h1 {

         font-size: 30px;

     }

     .hero-text p {

         font-size: 14px;

         line-height: 1.6;

     }

     .hero-btns {

         flex-direction: column;

         gap: 10px;

     }

     .theme-btn,
     .btn-outline {

         width: 180px;

         text-align: center;

         padding: 11px 20px;

     }

 }




 /* about section */
 /*==================================================
ABOUT SECTION (COMPACT)
==================================================*/

 .wpo-about-section-s3 {
     position: relative;
     padding: 45px 0;

     overflow: hidden;
 }

 /* Decorative Shapes */

 .wpo-about-section-s3::before {
     content: "";
     position: absolute;
     width: 220px;
     height: 220px;
     background: rgba(252, 13, 17, .04);
     border-radius: 50%;
     top: -100px;
     right: -80px;
 }

 .wpo-about-section-s3::after {
     content: "";
     position: absolute;
     width: 140px;
     height: 140px;
     border: 2px dashed rgba(252, 13, 17, .08);
     border-radius: 50%;
     left: -50px;
     bottom: -50px;
 }

 /* Image */

 .about-img {
     position: relative;
     text-align: center;
 }

 .about-img::before {
     content: "";
     position: absolute;
     width: 82%;
     height: 82%;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     background: linear-gradient(135deg, #fc0d11, #ff6a4d);
     border-radius: 20px;
     opacity: .08;
 }

 .about-img img {
     position: relative;
     max-width: 85%;
     border-radius: 18px;
     transition: .4s;
     animation: floatImage 5s ease-in-out infinite;
 }

 .about-img:hover img {
     transform: scale(1.02);
 }

 /* Content */

 .about-content {
     position: relative;

     border-radius: 18px;
     padding: 24px;
     border: 1px solid #eceff5;

     transition: .35s;
 }

 .about-content:hover {
     transform: translateY(-4px);

 }

 .about-content::before {
     content: "";
     position: absolute;
     left: 0;
     top: 24px;
     width: 4px;
     height: 60px;
     border-radius: 5px;
     background: #fc0d11;
 }

 /* Tag */

 .about-tag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
     padding: 5px 14px;
     background: #fff4f4;
     color: #fc0d11;
     border-radius: 30px;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: .8px;
     text-transform: uppercase;
 }

 .about-tag::before {
     content: "";
     width: 7px;
     height: 7px;
     background: #fc0d11;
     border-radius: 50%;
 }

 /* Heading */

 .about-content h2 {
     margin: 12px 0;
     font-size: 30px;
     line-height: 1.25;
     font-weight: 700;
     color: #1f2937;
 }

 /* Paragraph */

 .about-content p {
     font-size: 14px;
     line-height: 1.8;
     color: #667085;
     margin-bottom: 12px;
 }

 /* Quote */

 .about-quote {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     padding: 14px 16px;
     background: #fff8f8;
     border-left: 3px solid #fc0d11;
     border-radius: 12px;
     margin-top: 15px;
 }

 .about-quote i {
     font-size: 20px;
     color: #fc0d11;
 }

 .about-quote em {
     font-size: 14px;
     color: #444;
     line-height: 1.6;
 }

 /* Animation */

 @keyframes floatImage {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-8px);
     }

 }

 /* Responsive */

 @media(max-width:991px) {

     .wpo-about-section-s3 {
         padding: 35px 0;
     }

     .about-content {
         margin-top: 20px;
         padding: 20px;
     }

     .about-content::before {
         display: none;
     }

     .about-content h2 {
         font-size: 24px;
     }

     .about-content p {
         font-size: 14px;
     }

     .about-img img {
         max-width: 100%;
     }

 }

 @media(max-width:767px) {

     .about-content {
         padding: 18px;
     }

     .about-content h2 {
         font-size: 22px;
         line-height: 1.35;
     }

     .about-tag {
         font-size: 10px;
         padding: 5px 12px;
     }

     .about-content p {
         font-size: 13px;
         line-height: 1.7;
     }

     .about-quote {
         padding: 12px;
     }

     .about-quote em {
         font-size: 13px;
     }

 }




 /*==================================================
Leadership Section
==================================================*/

 .leadership-area {
     padding: 55px 0;
     background: #f7f9fc;
     position: relative;
     overflow: hidden;
 }

 /*==================================================
Section Title
==================================================*/

 .section-title {
     margin-bottom: 35px;
     text-align: center;
 }

 .section-title span {
     display: inline-block;
     color: #E85D2A;
     font-size: 14px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     margin-bottom: 8px;
 }

 .section-title h2 {
     color: #0B3C6F;
     font-size: 38px;
     font-weight: 700;
     margin: 0;
 }

 .section-title h2::after {
     content: "";
     display: block;
     width: 70px;
     height: 4px;
     background: #E85D2A;
     border-radius: 20px;
     margin: 15px auto 0;
 }

 /*==================================================
Left Quote Card
==================================================*/

 .leader-message {
     position: sticky;
     top: 90px;
     background: linear-gradient(135deg, #0B3C6F, #16558F);
     color: #fff;
     border-radius: 18px;
     padding: 30px;
     height: 100%;
     overflow: hidden;
     box-shadow: 0 18px 40px rgba(11, 60, 111, .15);
 }

 .leader-message::before {
     content: "";
     position: absolute;
     width: 180px;
     height: 180px;
     border-radius: 50%;
     background: rgba(255, 255, 255, .08);
     top: -70px;
     right: -60px;
 }

 .leader-message i {
     width: 58px;
     height: 58px;
     background: #E85D2A;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 22px;
     margin-bottom: 18px;
 }

 .leader-message h3 {
     color: #fff;
     font-size: 25px;
     line-height: 1.6;
     font-weight: 600;
     margin: 0;
 }

 /*==================================================
Timeline
==================================================*/

 .timeline {
     position: relative;
     padding-left: 50px;
 }

 .timeline::before {
     content: "";
     position: absolute;
     left: 18px;
     top: 0;
     bottom: 0;
     width: 2px;
     background: #d8dee8;
 }

 /*==================================================
Timeline Item
==================================================*/

 .timeline-item {
     position: relative;
     margin-bottom: 18px;
 }

 .timeline-item:last-child {
     margin-bottom: 0;
 }

 /*==================================================
Timeline Circle
==================================================*/

 .circle {
     position: absolute;
     left: -50px;
     top: 18px;
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: #E85D2A;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 3px solid #fff;
     box-shadow: 0 0 0 4px rgba(232, 93, 42, .15);
     z-index: 2;
     transition: .3s;
 }

 .circle i {
     font-size: 16px;
 }

 /*==================================================
Timeline Card
==================================================*/

 .box {
     background: #fff;
     border: 1px solid #e7edf5;
     border-radius: 14px;
     padding: 18px 22px;
     box-shadow: 0 8px 22px rgba(0, 0, 0, .05);
     transition: all .35s ease;
 }

 .box:hover {
     transform: translateY(-4px);
     border-left: 4px solid #E85D2A;
     box-shadow: 0 15px 35px rgba(0, 0, 0, .08);
 }

 .timeline-item:hover .circle {
     background: #0B3C6F;
     transform: scale(1.08);
 }

 /*==================================================
Typography
==================================================*/

 .box h4 {
     color: #0B3C6F;
     font-size: 21px;
     font-weight: 700;
     margin-bottom: 10px;
     line-height: 1.35;
 }

 .box p {
     color: #5c6773;
     font-size: 15px;
     line-height: 1.7;
     margin: 0;
 }

 /*==================================================
Scrollbar Friendly
==================================================*/

 .timeline-item:last-child .box {
     margin-bottom: 0;
 }

 /*==================================================
Responsive
==================================================*/

 @media (max-width: 991px) {

     .leadership-area {
         padding: 45px 0;
     }

     .leader-message {
         position: relative;
         top: 0;
         margin-bottom: 30px;
         padding: 25px;
     }

     .leader-message h3 {
         font-size: 22px;
     }

     .timeline {
         padding-left: 35px;
     }

     .timeline::before {
         left: 13px;
     }

     .circle {
         left: -35px;
         width: 34px;
         height: 34px;
         top: 15px;
     }

     .circle i {
         font-size: 13px;
     }

     .box {
         padding: 16px 18px;
     }

     .box h4 {
         font-size: 19px;
     }

     .box p {
         font-size: 14px;
     }

 }

 @media (max-width: 767px) {

     .leadership-area {
         padding: 40px 0;
     }

     .leader-message {
         padding: 22px;
     }

     .leader-message h3 {
         font-size: 20px;
         line-height: 1.5;
     }

     .timeline {
         padding-left: 30px;
     }

     .timeline::before {
         left: 11px;
     }

     .circle {
         left: -30px;
         width: 30px;
         height: 30px;
     }

     .box {
         padding: 15px 16px;
     }

     .box h4 {
         font-size: 18px;
     }

     .box p {
         line-height: 1.6;
     }

 }




 /* Main Banner */

 .leader-cover {
     position: relative;
     height: 450px;
     overflow: hidden;
     border-radius: 20px;
     box-shadow: 0 18px 45px rgba(0, 0, 0, .12);
     animation: fadeUp .8s ease;
 }

 /* Image */

 .leader-cover img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     display: block;
     transition: transform 8s ease;
     animation: zoomImage 12s ease-in-out infinite alternate;
 }

 /* Decorative Border */

 .leader-cover::before {
     content: "";
     position: absolute;
     inset: 12px;
     border: 1px solid rgba(255, 255, 255, .25);
     border-radius: 14px;
     z-index: 2;
     pointer-events: none;
 }

 /* Gradient Overlay */

 .leader-cover::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg,
             rgba(0, 0, 0, .15) 0%,
             rgba(0, 0, 0, 0) 40%,
             rgba(252, 13, 17, .12) 100%);
     z-index: 1;
 }

 /* Hover */

 .leader-cover:hover img {
     transform: scale(1.05);
 }

 /* Decorative Shapes */

 .cover-shape {
     position: absolute;
     border-radius: 50%;
     z-index: 0;
 }

 .shape-1 {
     width: 180px;
     height: 180px;
     background: rgba(0, 0, 135, .05);
     top: -60px;
     left: -60px;
     animation: float 8s ease-in-out infinite;
 }

 .shape-2 {
     width: 100px;
     height: 100px;
     background: rgba(252, 13, 17, .08);
     top: 50px;
     right: 8%;
     animation: float 6s ease-in-out infinite;
 }

 .shape-3 {
     width: 70px;
     height: 70px;
     border: 2px solid rgba(252, 13, 17, .18);
     bottom: 40px;
     left: 10%;
     animation: float 10s ease-in-out infinite;
 }

 /* Animations */

 @keyframes zoomImage {
     from {
         transform: scale(1);
     }

     to {
         transform: scale(1.06);
     }
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-15px);
     }
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 /* Responsive */

 @media (max-width:991px) {

     .leader-cover {
         height: 320px;
         border-radius: 16px;
     }

     .leader-cover::before {
         inset: 8px;
     }

 }

 @media (max-width:576px) {

     .leader-cover {
         height: 220px;
     }

 }



 /* ==============================
   Journey Section - Premium Compact UI
   Color Theme: #fc0d11 + #ff7b54
============================== */

 .timelineSwiper {
     position: relative;
     padding: 15px 8px 45px;
 }

 .timelineSwiper .swiper-wrapper {
     align-items: stretch;
 }

 .timelineSwiper .swiper-slide {
     height: auto;
     display: flex;
 }

 .timelineSwiper .swiper-slide .timeline-card {
     width: 100%;
 }


 /* ==============================
   Timeline Card
============================== */

 .timeline-card {

     position: relative;

     display: flex;
     flex-direction: column;
     justify-content: flex-start;

     width: 100%;
     /* height: 100%;

     min-height: 220px; */

     background: #ffffff;

     border: 1px solid #E7EDF5;
     border-radius: 14px;

     padding: 16px;



     transition: all .35s ease;

     box-shadow:
         0 8px 20px rgba(15, 23, 42, .06);

 }


 /* Top Gradient Line */

 .timeline-card::before {

     content: "";

     position: absolute;

     left: 0;
     top: 0;

     width: 100%;
     height: 3px;

     background:
         linear-gradient(90deg,
             #fc0d11,
             #ff7b54);

 }


 /* Hover Effect */

 .timeline-card:hover {

     transform: translateY(-6px);

     border-color: #fc0d11;

     box-shadow:
         0 18px 35px rgba(252, 13, 17, .15);

 }



 /* ==============================
   Year Badge
============================== */

 .timeline-year {

     display: inline-flex;

     align-items: center;
     justify-content: center;

     width: max-content;

     min-width: 62px;
     height: 30px;

     padding: 0 14px;

     border-radius: 50px;


     background:
         linear-gradient(135deg,
             #fc0d11,
             #ff7b54);


     color: #ffffff;

     font-size: 13px;

     font-weight: 700;

     letter-spacing: .3px;

     margin-bottom: 10px;

     box-shadow:
         0 6px 15px rgba(252, 13, 17, .25);

 }



 /* ==============================
   Heading
============================== */

 .timeline-card h5 {

     font-size: 17px;

     font-weight: 700;

     line-height: 1.35;

     color: #122033;

     margin: 0 0 8px;

     min-height: 45px;

     transition: .3s;

 }


 .timeline-card:hover h5 {

     color: #fc0d11;

 }



 /* ==============================
   Description
============================== */

 .timeline-card p {

     color: #667085;

     font-size: 13px;

     line-height: 1.55;

     margin: 0;

     flex: 1;

 }



 /* ==============================
   Active Slide
============================== */

 .timelineSwiper .swiper-slide-active .timeline-card {

     border-color: #fc0d11;

     transform: translateY(-5px);

     box-shadow:

         0 20px 40px rgba(252, 13, 17, .15);

 }




 /* ==============================
   Navigation Buttons
============================== */

 .timelineSwiper .swiper-button-next,
 .timelineSwiper .swiper-button-prev {


     width: 40px;

     height: 40px;


     display: flex;

     align-items: center;
     justify-content: center;


     border-radius: 50%;


     background: #ffffff;


     border: 1px solid #f2d6d6;


     color: #fc0d11;


     box-shadow:
         0 8px 20px rgba(0, 0, 0, .08);


     top: 50%;

     transform: translateY(-50%);

     transition: .3s;

 }



 .timelineSwiper .swiper-button-prev {

     left: -14px;

 }



 .timelineSwiper .swiper-button-next {

     right: -14px;

 }



 .timelineSwiper .swiper-button-next::after,
 .timelineSwiper .swiper-button-prev::after {

     font-size: 14px;

     font-weight: 700;

 }



 .timelineSwiper .swiper-button-next:hover,
 .timelineSwiper .swiper-button-prev:hover {


     background:

         linear-gradient(135deg,
             #fc0d11,
             #ff7b54);


     color: #ffffff;


     border-color: #fc0d11;

 }



 /* ==============================
   Pagination
============================== */

 .timelineSwiper .swiper-pagination {

     bottom: 0 !important;

 }



 .timelineSwiper .swiper-pagination-bullet {

     width: 8px;

     height: 8px;

     background: #D2D6DC;

     opacity: 1;

     transition: .3s;

 }



 .timelineSwiper .swiper-pagination-bullet-active {


     width: 26px;

     border-radius: 20px;


     background:

         linear-gradient(90deg,
             #fc0d11,
             #ff7b54);

 }



 /* ==============================
   Responsive
============================== */

 @media(max-width:991px) {


     .timelineSwiper {

         padding: 10px 5px 35px;

     }



     .timeline-card {

         min-height: 200px;

         padding: 15px;

     }



     .timeline-year {

         height: 28px;

         font-size: 12px;

     }



     .timeline-card h5 {

         font-size: 16px;

         min-height: auto;

     }



     .timeline-card p {

         font-size: 12.5px;

     }



     .timelineSwiper .swiper-button-next,
     .timelineSwiper .swiper-button-prev {

         display: none;

     }

 }

 /*==============================
    TIMELINE LINE
==============================*/

 .timelineSwiper {
     overflow: visible;
 }

 .timelineSwiper::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 95px;
     /* Adjust according to card position */
     height: 4px;
     background: #e9e9e9;
     border-radius: 30px;
     z-index: 0;
 }

 .timelineSwiper::after {
     content: "";
     position: absolute;
     left: 0;
     top: 95px;
     height: 4px;
     width: var(--progress, 0%);
     background: linear-gradient(90deg, #fc0d11, #ff7b54);
     border-radius: 30px;
     transition: .45s ease;
     z-index: 1;
 }

 /* Keep cards above line */

 .timelineSwiper .swiper-wrapper {
     position: relative;
     z-index: 2;
 }

 .timeline-card {

     margin-top: 35px;
     overflow: visible;

 }

 /* Connector */

 .timeline-card::after {

     content: "";

     position: absolute;

     left: 50%;

     top: -35px;

     width: 2px;

     height: 35px;

     background: #ddd;

     transform: translateX(-50%);

     transition: .35s;

 }

 /* Timeline Dot */

 .timeline-year {

     position: relative;
 }

 .timeline-year::before {

     content: "";

     position: absolute;

     left: 50%;

     top: -52px;

     transform: translateX(-50%);

     width: 18px;

     height: 18px;

     border-radius: 50%;

     background: #fff;

     border: 4px solid #d7d7d7;

     transition: .35s;

     z-index: 5;

 }

 .timelineSwiper .swiper-slide-active .timeline-card {

     transform: translateY(-12px) scale(1.03);

     border-color: #fc0d11;

     box-shadow: 0 20px 45px rgba(252, 13, 17, .18);

 }

 /* Active Connector */

 .timelineSwiper .swiper-slide-active .timeline-card::after {

     background: #fc0d11;

 }

 /* Active Dot */

 .timelineSwiper .swiper-slide-active .timeline-year::before {

     border-color: #fc0d11;

     background: #fc0d11;

     box-shadow:
         0 0 0 6px rgba(252, 13, 17, .15),
         0 0 25px rgba(252, 13, 17, .35);

     animation: pulseDot 1.6s infinite;

 }

 .timelineSwiper .swiper-slide-active h5 {

     color: #fc0d11;

 }

 @keyframes pulseDot {

     0% {
         box-shadow:
             0 0 0 0 rgba(252, 13, 17, .35);
     }

     70% {
         box-shadow:
             0 0 0 12px rgba(252, 13, 17, 0);
     }

     100% {
         box-shadow:
             0 0 0 0 rgba(252, 13, 17, 0);
     }

 }

 /*====================================
 Testimonial Section
====================================*/

 .testimonial-section {
     padding: 40px 0;
     background: #F8FAFC;
 }

 /* Swiper */

 .testimonialSwiper {
     padding: 5px 2px 25px;
 }

 /* IMPORTANT - Equal Height */

 .testimonialSwiper .swiper-wrapper {
     align-items: stretch;
 }

 .testimonialSwiper .swiper-slide {
     height: auto;
     display: flex;
 }

 .testimonialSwiper .swiper-slide .testimonial-card {
     width: 100%;
 }

 /* Card */

 .testimonial-card {
     background: #fff;
     border: 1px solid #EEF2F7;
     border-radius: 14px;

     padding: 18px;

     width: 100%;
     height: 100%;
     min-height: 250px;
     /* Equal height */

     display: flex;
     flex-direction: column;

     transition: .3s;
     box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
 }

 .testimonial-card:hover {
     transform: translateY(-4px);
     border-color: #fc0d11;
     box-shadow: 0 12px 24px rgba(252, 13, 17, .10);
 }

 /* Quote */

 .quote-icon {
     width: 38px;
     height: 38px;
     border-radius: 50%;
     background: #FFF3F3;
     color: #fc0d11;

     display: flex;
     align-items: center;
     justify-content: center;

     font-size: 15px;
     margin-bottom: 12px;
 }

 /* Review Text */

 .testimonial-card p {
     font-size: 14px;
     line-height: 1.6;
     color: #5B6472;

     margin-bottom: 15px;

     flex: 1;
     /* Pushes user info to bottom */
 }

 /* User */

 .testimonial-user {
     display: flex;
     align-items: center;

     margin-top: auto;
     /* Always align at bottom */
 }

 .testimonial-user img {
     width: 46px;
     height: 46px;
     border-radius: 50%;
     object-fit: cover;
     margin-right: 12px;
 }

 .testimonial-user h5 {
     font-size: 15px;
     font-weight: 600;
     margin: 0;
     color: #1F2937;
 }

 .testimonial-user span {
     font-size: 12px;
     color: #7B8794;
 }

 /* Mobile */

 @media(max-width:768px) {

     .testimonial-card {
         min-height: 220px;
         padding: 15px;
     }

     .quote-icon {
         width: 34px;
         height: 34px;
         margin-bottom: 10px;
     }

     .testimonial-card p {
         font-size: 13px;
     }

     .testimonial-user img {
         width: 42px;
         height: 42px;
     }

 }


 /*==============================
VIDEO GALLERY
===============================*/

 .vgx-gallery-section {
     padding: 55px 0;
     background: #f0f1f1;
     overflow: hidden;
 }

 /* Heading */

 .vgx-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 22px;
 }

 .vgx-subtitle {
     display: inline-block;
     background: #fc0d11;
     color: #fff;
     padding: 6px 15px;
     border-radius: 30px;
     font-size: 12px;
     letter-spacing: 1px;
     text-transform: uppercase;
     font-weight: 600;
 }

 .vgx-header h2 {
     margin: 8px 0 0;
     font-size: 32px;
     font-weight: 700;
     color: #222;
 }

 .vgx-view-btn {
     color: #fc0d11;
     font-weight: 600;
     text-decoration: none;
     transition: .3s;
 }

 .vgx-view-btn i {
     margin-left: 5px;
     transition: .3s;
 }

 .vgx-view-btn:hover {
     color: #111;
 }

 .vgx-view-btn:hover i {
     transform: translateX(5px);
 }

 /*==========================
MAIN VIDEO
==========================*/

 .vgx-main-video {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
     height: 420px;
     box-shadow: 0 15px 45px rgba(0, 0, 0, .12);
 }

 .vgx-main-video img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: .5s;
 }

 .vgx-main-video:hover img {
     transform: scale(1.05);
 }

 .vgx-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to top,
             rgba(0, 0, 0, .85),
             rgba(0, 0, 0, .15),
             transparent);
 }

 /* Play Button */

 .vgx-play {
     position: absolute;
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
     width: 80px;
     height: 80px;
     border-radius: 50%;
     background: #fff;
     color: #fc0d11;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 28px;
     text-decoration: none;
     z-index: 5;
     animation: vgxPulse 2s infinite;
 }

 .vgx-play:hover {
     background: #fc0d11;
     color: #fff;
 }

 @keyframes vgxPulse {

     0% {
         box-shadow: 0 0 0 0 rgba(252, 13, 17, .45);
     }

     70% {
         box-shadow: 0 0 0 20px transparent;
     }

     100% {
         box-shadow: 0 0 0 0 transparent;
     }

 }

 /* Text */

 .vgx-content {
     position: absolute;
     left: 25px;
     bottom: 25px;
     right: 25px;
     color: #fff;
     z-index: 3;
 }

 .vgx-date {
     display: inline-block;
     background: rgba(255, 255, 255, .18);
     backdrop-filter: blur(8px);
     padding: 6px 12px;
     border-radius: 20px;
     margin-bottom: 12px;
     font-size: 13px;
 }

 .vgx-content h3 {
     font-size: 28px;
     line-height: 1.35;
     margin: 0;
 }

 /*=========================
PLAYLIST
==========================*/

 .vgx-playlist {

     height: 420px;

     overflow: auto;

     padding-right: 5px;

 }

 .vgx-playlist::-webkit-scrollbar {

     width: 5px;

 }

 .vgx-playlist::-webkit-scrollbar-thumb {

     background: #ddd;

     border-radius: 10px;

 }

 .vgx-item {

     display: flex;

     gap: 12px;

     padding: 10px;

     border-radius: 14px;

     margin-bottom: 12px;

     background: #fff;

     cursor: pointer;

     transition: .35s;

     box-shadow: 0 5px 18px rgba(0, 0, 0, .05);

 }

 .vgx-item:hover {

     transform: translateX(5px);

     box-shadow: 0 12px 25px rgba(0, 0, 0, .08);

 }

 .vgx-item.active {

     border-left: 4px solid #fc0d11;

 }

 .vgx-thumb {

     position: relative;

     width: 120px;

     min-width: 120px;

     height: 78px;

     border-radius: 12px;

     overflow: hidden;

 }

 .vgx-thumb img {

     width: 100%;

     height: 100%;

     object-fit: cover;

 }

 .vgx-thumb span {

     position: absolute;

     left: 50%;

     top: 50%;

     transform: translate(-50%, -50%);

     width: 34px;

     height: 34px;

     border-radius: 50%;

     background: #fff;

     display: flex;

     align-items: center;

     justify-content: center;

     color: #fc0d11;

     font-size: 13px;

 }

 .vgx-info {

     display: flex;

     flex-direction: column;

     justify-content: center;

 }

 .vgx-info h5 {

     font-size: 16px;

     font-weight: 600;

     line-height: 1.4;

     margin-bottom: 6px;

     color: #222;

 }

 .vgx-info small {

     color: #888;

     font-size: 13px;

 }

 /*=========================
Responsive
==========================*/

 @media(max-width:991px) {

     .vgx-main-video {

         height: 300px;

         margin-bottom: 20px;

     }

     .vgx-playlist {

         height: auto;

         overflow: visible;

     }

 }

 @media(max-width:767px) {

     .vgx-gallery-section {

         padding: 40px 0;

     }

     .vgx-header {

         flex-direction: column;

         align-items: flex-start;

         gap: 15px;

     }

     .vgx-header h2 {

         font-size: 26px;

     }

     .vgx-main-video {

         height: 240px;

     }

     .vgx-content {

         left: 18px;

         right: 18px;

         bottom: 18px;

     }

     .vgx-content h3 {

         font-size: 20px;

     }

     .vgx-play {

         width: 60px;

         height: 60px;

         font-size: 22px;

     }

     .vgx-thumb {

         width: 95px;

         min-width: 95px;

         height: 65px;

     }

 }