/************ engage section ******************************/

.engage-section {
   position: relative;
   background-size: cover;
   background-position: center;
   padding: 65px 0;
}

.engage-content-container.custom-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: left;
}

.engage-section h3 {
   margin: 0;
   color: #070707;
   font-size: 30px;
}

/**************************** engage section end*********************************/



/********************************* footer styles ********************************/
.footer-logo {
   height: 36px;
}

footer {
   background: linear-gradient(180deg, #F3FFE2 0%, #E8ECFF 100%);
   padding-top: 38px;
   color: #39474F;
   width: 100%;
   position: relative;
}

.footer-container {
   display: flex;
   justify-content: space-between;
   gap: 30px;
   flex-wrap: wrap;
}

.footer-column {
   flex: 1;
}

.logo-column {
   flex: 2;
   max-width: 50%;
}

.footer-columns-wrapper {
   display: flex;
   justify-content: space-between;
   flex: 1;
   margin-top: 80px;
   flex-wrap: wrap;
}

.links-column {
   display: flex;
   flex-direction: column;
}

.links-column a {
   color: inherit;
   text-decoration: none;
   margin-bottom: 5px;
   padding: 5px 0;
   display: flex;
   align-items: center;
   transition: color 0.3s ease;
}

.links-column a:hover {
   color: #8DC63F;
}

.logo-column .footer-description {
   margin-top: 39px;
   color: #39474F;
   line-height: 2.0;
   font-size: 14px;
   white-space: normal; 
   max-width: 441px;
   font-weight: 300;
}

.footer-bottom {
   margin-top: 30px;
   padding: 25px 0;
   color: #626464;
   font-size: 13px;
   border-top: 1px solid rgba(92,119,57, 0.2); 
   width: 100%;
}

.footer-bottom .custom-container {
   display: block;
}

.footer-bottom-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
}

.footer-bottom p {
   margin: 0;
}

.footer-links {
   display: flex;
   gap: 15px; 
   flex-wrap: wrap;
}

.footer-links a {
   position: relative;
   color: inherit;
   text-decoration: none;
   transition: color 0.3s ease;
}

.footer-links a:hover {
   color: #8DC63F;
}

.footer-links a:not(:last-child)::after {
   content: '|';
   position: absolute;
   right: -10px; 
   color: #626464; 
}

/*********************** footer styles end**************************/

/******************** driving *************************************/
.driving-experience-section {
   position: relative;
   background-image: url(../images/revolutions-bg.jpg); 
   background-size: cover;
   background-position: center;
   padding: 60px 0 85px;
   text-align: center;
   color: #FFFFFF;
   overflow: visible;
   z-index: 1;
}

.driving-experience-container.custom-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.driving-experience-text h3 {
   margin-bottom: 18px;
   max-width: 571px;
}

.driving-experience-text p {
   font-size: 16px;
   max-width: 536px; 
   margin-bottom: 70px;
}

.logos {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 132px;
}

body .logo-lokatag,
body .logo-lokatoo {
   height: 48px;
   max-width: 100%;
   transition: transform 0.3s ease;
   width: auto;
}
body .logo-lokatag {
   height: 48px;
}

body .logo-lokatoo {
   height: 27px;
}

.logo-lokatag-wrapper,
.logo-lokatoo-wrapper {
   position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   z-index: 1;
}

/* .large-white-circle {
   position: absolute;
   width: 123px;
   height: 123px;
   border-radius: 50%;
   border: 1.5px solid #FFFFFF;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
} */

.nav-arrow {
   position: absolute;
   bottom: -30px; 
   left: 0;
   right: 0;
   margin: auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.arrow-circle {
   width: 50px;  
   height: 50px; 
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: #8DC63F; 
   transition: transform 0.3s ease;
}

.arrow-circle img {
   filter: brightness(0) invert(1); 
   width: 30px;
   height: 15px;
}

/* .logo-lokatag-wrapper:hover .nav-arrow,
.logo-lokatag-wrapper:hover .large-white-circle,
.logo-lokatoo-wrapper:hover .nav-arrow,
.logo-lokatoo-wrapper:hover .large-white-circle {
   opacity: 1;
   transform: scale(1.1);
} */

.logo-lokatag-wrapper:hover .nav-arrow,
.logo-lokatoo-wrapper:hover .nav-arrow {
   transform: translateY(-10px); 
}

/* .logo-lokatag-wrapper:hover .large-white-circle,
.logo-lokatoo-wrapper:hover .large-white-circle {
   transform: translate(-50%, -50%) scale(1.1);
} */

.logo-lokatag-wrapper:hover .arrow-circle,
.logo-lokatoo-wrapper:hover .arrow-circle {
   transform: scale(1.1); 
}

/****************** driving end********************************/




/*********************** commitment ****************************/
.sustainable-future-section {
   padding: 80px 0;
   /* background-image: url(../img/bg-future.jpg); 
   background-size: cover; 
   background-position: center;  */
}

.sustainable-future-section .custom-container {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
}

.commitment-text {
   width: 47%;
   margin-bottom: 30px; 
}

.commitment-text h3 {
   font-size: 30px;
   color: #585F5D;
   margin-bottom: 15px;
   max-width: 613px;
}

.commitment-text p {
   font-size: 16px;
   color: #585F5D;
   max-width: 550px; 
}

.commitment-nav {
   width: 37%;
   display: flex;
   flex-direction: column;
   gap: 15px;
}

.sf-nav-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px 20px;
   border: 1px solid #BBBBBB;
   border-radius: 19px;
   transition: all 0.5s ease;
   position: relative;
   background-color: #FFFFFF; 
}

.sf-nav-item span {
   font-size: 18px;
   color: #39474F; 
   position: relative; 
   z-index: 1;
   transition: color 0.3s ease;
}

.sf-nav-item .background-span {
   position: absolute;
   border-radius: 19px;
   z-index: 0;
}

.sf-nav-item .background-span::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #2B3990;
   border-radius: 19px;
   transform: translateX(-100%);
   transition: transform 0.3s ease;
}

.sf-nav-item .sf-nav-arrow {
   display: flex; 
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background-color: #8DC63F;
   position: absolute;
   right: 0; 
   top: 50%;
   transform: translateY(-50%);
   opacity: 0; 
   transition: opacity 0.3s ease 0.3s, right 0.3s ease 0.3s, transform 0.3s ease 0.3s; 
   z-index: 2; 
}

.sf-nav-item:hover {
   background-color: #2B3990;
   border-color: #2B3990;
}

.sf-nav-item:hover .background-span::before {
   transform: translateX(0);
}
.sf-nav-item:hover span {
   color: #FFFFFF; 
}
.sf-nav-item:hover .sf-nav-arrow {
   opacity: 1; 
   right: -12px;
}

.sf-nav-arrow img {
   filter: brightness(0) invert(1); 
   width: 30px;
   height: 15px;
}

/**************************** commitment end *******************************/


/********************* Media Centre Section ********************************/
.media-centre-section  {
   padding: 40px 0;
}

.media-centre-container.custom-container {
   display: flex;
   flex-direction: column;
}

.mch-slider-div {
   display: flex;
   align-items: center;
   margin-left: auto;
   padding: 0 50px;
   height: 50px;
   position: relative;
}

.customSwiper-child {
   width: 60px; 
   text-align: center;
}

.customSwiper-child.swiper-container .custom-swiper-button {
   top: 50%;
   transform: translate(0, -50%);
}

.customSwiper-child .swiper-button-prev {
   left: 0;
}

.customSwiper-child .swiper-button-next {
   right: 0;
}

.media-centre-header:before {
   content: "";
   /* border-bottom: 1.5px solid #D4D4D4; */
   border-bottom: 2px solid #D4D4D4;
   position: absolute;
   width: 100%;
   height: calc(100% + 2px);
   top: 0;
   right: 100%;
}

.media-centre-header {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 10px;
   /* border-bottom: 1.5px solid #D4D4D4; */
   border-bottom: 2px solid #D4D4D4;
   overflow: hidden;
}

.media-centre-header:after {
   content: "";
   /* border-bottom: 1.5px solid #D4D4D4; */
   border-bottom: 2px solid #D4D4D4;
   position: absolute;
   width: 100%;
   height: calc(100% + 2px);
   top: 0;
   left: 100%;
}

.media-centre-header h3 {
   margin: 0;
   font-size: 30px;
   color: #585F5D;
}

.carousel-controls {
   display: flex;
   align-items: center;
   gap: 10px;
}

.carousel-arrow-wrapper {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   border: 1px solid #BBBBBB;
   background-color: transparent;
}

.carousel-arrow-wrapper.active {
   background-color: #8DC63F;
   border-color: #8DC63F;
}

.carousel-arrow-wrapper img {
   width: 30px;
   height: 15px;
}

.carousel-arrow-wrapper.active img {
   filter: brightness(0) invert(1); 
}

.carousel-indicator {
   font-size: 16px;
   color: #585F5D;
}

body .customSwiper {
   overflow: hidden;
   position: relative;
   width: calc(100% + 40px);
   margin-left: -40px;
}

.swiper-slide.media-item {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   flex-shrink: 0;
   position: relative;
   width: 40%;
   height: auto;
   padding: 25px 40px;
   border-right: 2.0px solid #D4D4D4; 
}

.swiper-slide.media-item:hover {
   background-color: #2B3990; 
   border-bottom-right-radius: 20px; 
}

.media-date {
   font-size: 14px;
   color: #2B3990;
}

.media-title {
   font-size: 20px;
   margin-bottom: 15px;
}

.media-image-container {
   width: 100%;
   padding-top: 56.25%; 
   position: relative;
   margin-bottom: 20px;
   margin-top: auto;
   overflow: hidden;
}

.media-image-container img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; 
   /* border-radius: 20px; */
   transition: transform 0.3s;
}

body .swiper-slide.media-item.swiper-slide-active .media-image-container img,
body .swiper-slide.media-item:hover .media-image-container img {
   transform: scale(1.1);
}



.media-tag {
   background-color: #2B3990; 
   color: #ffffff;
   padding: 5px 12px;
   border-radius: 25px;
   font-size: 14px;
   display: inline-block;
   text-decoration: none;
   transition: all 0.3s ease;
   white-space: nowrap;
}

.media-tag:hover {
   background-color: #2B3990; 
}

.swiper-slide.media-item:hover .media-date,
.swiper-slide.media-item:hover .media-title {
   color: #2B3990;
}

.swiper-slide.media-item:hover .media-tag {
   background-color: #2B3990; 
   color: #ffffff; 
}

/************ responsive engage section ******************************/
@media (max-width: 1199px) {
   .engage-section h3 {
      font-size: 28px;
   }
}

@media (max-width: 991px) {
   .engage-section h3 {
      font-size: 24px;
   }
}
@media (max-width: 767px) {
   .engage-section h3 {
      font-size: 22px;
   }

   .engage-section {
      background-position: 65% 40%;
   }
}

@media (max-width: 576px) {
   .engage-section {
      background-position: 60% 40%;
   }

   .engage-content-container.custom-container {
      flex-direction: column;
      text-align: center;
      gap: 20px;
   }
   
   .engage-section h3 {
      font-size: 20px;
   }
}

/****************************responsive engage section end*********************************/

/********************************* responsive footer ********************************/

@media (max-width: 991px) {
   .logo-column .footer-description {
      max-width: 100%; 
      text-align: left;
   }
}

@media (max-width: 921px) {
   .footer-bottom-content {
      flex-direction: column;
      align-items: center;
      gap: 15px;
   }
}


@media (max-width: 767px) {
   .footer-logo {
      height: 30px; 
   }

   .logo-column .footer-description {
      max-width: 100%; 
      text-align: left;
      font-size: 13px;
   }

   .footer-bottom-content {
      flex-direction: column;
      align-items: center;
      gap: 15px;
   }

   .footer-links {
      justify-content: wrap;
   }
}

@media (max-width: 576px) {
   .footer-logo {
      height: 25px; 
   }
   .footer-container {
      flex-direction: column;
   }

   .logo-column {
      max-width: 100%;
   }

   .footer-columns-wrapper {
      flex-direction: column;
      /* margin-top: -20px;  */
      margin-top: 0;
   }

   .logo-column .footer-description {
      max-width: 100%; 
      margin-top: 15px; 
   }

   .links-column {
      margin-bottom: 20px;
   }

   .footer-bottom {
      padding: 20px 0;
   }

   .footer-bottom-content {
      flex-direction: column;
      align-items: center;
      gap: 10px;
   }

   .footer-links {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 5px 16px;
   }

   .footer-links span:not(:last-child)::after {
      content: '|';
      right: -10px;
   }
}

/*********************** responsive footer styles**************************/

/******************** responsive driving *******************************/

@media (max-width: 767px) {
   .driving-experience-text h3 {
      font-size: 24px;
   }

   .driving-experience-text p {
      font-size: 14px;
   }

   .logos {
      flex-direction: column;
      gap: 20px;
   }

   body .logo-lokatag {
      height: 40px;
   }
   body .logo-lokatoo {
      height: 28px;
   }
   body .logo-lokatag {
      height: 50px;
      width: auto;
   }
}

@media (max-width: 576px) {
   .driving-experience-section {
      padding: 40px 0;
   }

   .driving-experience-text h3 {
      font-size: 20px;
   }

   .driving-experience-text p {
      font-size: 12px;
   }

   /*body .logo-lokatag,*/
   /*body .logo-lokatoo {*/
   /*   height: 36px;*/
   /*   height: 26px;*/
   /*   width: auto;*/
   /*}*/
   body .logo-lokatoo {
      height: 20px;
   }
    body .logo-lokatag {
        height: 35px;
    }
   .logos {
      gap: 16px;
   }
   .transformation-journey-bg 
   .tjb-title {
      font-size: 50px !important;
   }
}

/****************** responsive driving end********************************/

/*********************** responsive commitment ****************************/
@media (max-width: 1199px) {
   .commitment-text {
      width: 50%;
      margin-bottom: 20px;
   }

   .commitment-nav {
      width: 45%;
   }

   .commitment-text h3 {
      font-size: 28px;
   }

   .commitment-text p {
      font-size: 16px;
   }

   .nav-item {
      padding: 13px 18px;
   }

   .nav-item span {
      font-size: 17px;
   }

   .nav-item .nav-arrow {
      width: 48px;
      height: 48px;
   }

   .nav-item:hover .nav-arrow {
      right: -15px; 
   }
}

@media (max-width: 991px) {
   .commitment-text {
      width: 55%;
   }

   .commitment-nav {
      width: 40%;
   }

   .commitment-text h3 {
      font-size: 26px;
   }

   .commitment-text p {
      font-size: 14px;
   }

   .nav-item {
      padding: 12px 16px;
   }

   .nav-item span {
      font-size: 16px;
   }

   .nav-item .nav-arrow {
      width: 46px;
      height: 46px;
   }

   .nav-item:hover .nav-arrow {
      right: -15px; 
   }
}
@media (max-width: 767px) {
   .commitment-text {
      width: 100%;
      margin-bottom: 20px;
   }

   .commitment-nav {
      width: 100%;
      gap: 10px;
   }

   .nav-item {
      padding: 10px 15px;
   }

   .nav-item span {
      font-size: 16px;
   }

   .nav-item .nav-arrow {
      width: 42px;
      height: 42px;
   }

   .nav-item:hover .nav-arrow {
      right: -10px; 
   }
}

@media (max-width: 576px) {
   .sustainable-future-section {
      padding: 40px 0 10px;
   }

   .commitment-text h3 {
      font-size: 20px;
   }

   .commitment-text p {
      font-size: 14px;
   }

   .nav-item span {
      font-size: 14px;
   }

   .nav-item .nav-arrow {
      width: 40px;
      height: 40px;
   }

   .nav-item:hover .nav-arrow {
      right: -10px; 
   }
}

@media (max-width: 320px) {
    .transformation-journey-bg .tjb-title {
        font-size: 40px !important;
    }
}

/****************************responsive commitment end *******************************/

/********************* responsive Media Centre Section ********************/
@media (max-width: 1199px) {
   .media-centre-header h3 {
      font-size: 28px;
   }
   .media-title {
      font-size: 18px;
   }
}

@media (max-width: 991px) {
   .media-centre-header h3 {
      font-size: 24px;
   }
   .media-title {
      font-size: 18px;
   }
   .media-tag {
      font-size: 12px;
   }
   .swiper-slide.media-item {
      width: 45%; 
   }
}

@media (max-width: 767px) {
   .media-centre-header h3 {
      font-size: 20px;
   }
   .media-title {
      font-size: 16px;
   }
   .media-tag {
      font-size: 12px;
   }
   .swiper-slide.media-item {
      width: 100%; 
   }
}

@media (max-width: 576px) {
   .swiper-slide.media-item {
      width: 75%; 
   }
   .media-title {
      font-size: 14px;
   }
   .media-tag {
      font-size: 12px;
   }

}
@media (max-width: 375px) {
    .transformation-journey-bg .tjb-title {
        font-size: 40px !important;
    }
}

/******************** responsive Media Centre Section end ********************/