body{
    overflow-x: hidden;
}
.mt-50{
   margin-top: 50px;
}


.mt-100{
   margin-top: 100px;
}

.ml-15{
   margin-left: 15px;
}

.ml-30{
   margin-left: 30px;
}

.pt-100{
   padding-top: 100px;
}

.pb-100{
   padding-bottom: 100px;
}

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

.radius-8{
   border-radius: 8px;
}


.pbg-button-bg{
   background-color: #08BABB;
}
.pbg-bg{
   background-color: #08BABB;
}

.btn-pbg{
   background-color: #08BABB;
   border: none;
}

.justify{
   text-align: justify;
}

button{
   border-radius: 4px;
}

.loader {
   border: 5px solid white;
   border-radius: 50%;
   border-top: 5px solid #343a40;
   border-bottom: 5px solid #343a40;
   width: 20px;
   height: 20px;
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
   margin: auto;
}

.pbg-button:hover{
   background-color: #E7E9EA;
   color: black;
   box-shadow: none;
   transform: scale(1.05);
   padding: 8px 24px;
}

.btn-pbg-dark{
   background-color: #0A1F2E;
}

.btn-pbg-dark:hover{
   background-color:#08BABB;
}

.btn-pbg-dark:hover .text-primary {
   color: #071620 !important;
 }


.bg-dark{
   background-color: #071620!important;
}


.center{
   text-align: center;
}

.pb-10{
   padding-bottom: 10px;
}

.black-text{
   color: black;
}

.text-danger{
   color: #BB0808;
}

.text-right{
   text-align: right;
}


.pbg-button{
   background-color: #08BABB;
   border-radius: 8px;
   min-width: 60px;
   height: 53px;
   color: black;
   font-size: 13px;
   font-weight: bold;
}

.pbg-shadow{
   box-shadow: 10px 10px #0A1F2E,
   10px 10px 0px 1px #08BABB;
}

.pbg-shadow-dash{
   box-shadow: 7px 7px #0A1F2E,
   9px 9px 0px 1px #08BABB;
   transition: all 0.3s ease;
}

.no-left-padding{
   padding-left: 0;
}

.text-primary{
   color: #08BABB!important;
}

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

.page-blue{
   background-color: #0A1F2E;
}

.nav-expand-header{
   background-color: #344552;
   height: 94px;
   padding-top: 20px;
   font-size: 30px;
}


.our-story{
   clear: both;
}

.hero-text{
   color: white;
   text-align: justify;
}

.hero-text h4,p{
   color: white;
}

.hero-content .cta{
   padding-top: 30px;
}

.our-story{
   padding-top: 120px;
   padding-bottom: 50px;
}


@keyframes spin {
   to { transform: rotate(360deg); }
 }

 .stroke-dotted {
   opacity: 0;
   stroke-dasharray: 4,5;
   stroke-width: 1px;
   stroke: #08BABB;
   transform-origin: 50% 50%;
   animation: spin 4s infinite linear;
   transition: opacity 1s ease,
               stroke-width 1s ease;
 }
 .stroke-solid {
   stroke-dashoffset: 0;
   stroke-dashArray: 300;
   stroke: #08BABB;
   stroke-width: 4px;
   transition: stroke-dashoffset 1s ease,
               opacity 1s ease;
 }

 .icon {
   transform-origin: 50% 50%;
   transition: transform 200ms ease-out;
 }

 .play-icon:hover {
   .stroke-dotted {
     stroke-width: 4px;
     opacity: 1;
   }
   .stroke-solid {
     opacity: 0;
     stroke-dashoffset: 300;
   }
   .icon {
     transform: scale(1.05);
   }
 }

 .play-icon {
   cursor: pointer;
   position: relative;
   color: #08BABB;
   transition: transform 0.3s ease;
   z-index: 10;
 }



.landing-page-video {
   position: relative;
   width: 100%;
   height: 100vh;
   background-position: center;
   background-size: cover;
   overflow: hidden;
}

.landing-video-overlay {
   position: relative;
   background-color: #071621D6;
   height: 100%;
   padding-left: 70px;
   padding-top: 70px;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
   color: white;
   transition: opacity 0.3s ease;
}

.landing-video-overlay.hidden {
   opacity: 0;
   pointer-events: none;
   z-index: 1;
}

#landing-video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   z-index: 1;
   display: none;
}

#landing-video.playing {
   display: block;
   z-index: 20;
}

.video-cta {
   cursor: pointer;
   z-index: 3;
}


.landing-page-video{
   height: 566px;
   background-color: #071621D6;
   width: 100%;
   margin-top: 70px;
   overflow: hidden;
}

.landing-page-video .video-cta .fa-circle-play{
   font-size: 60px;
}

.play-text{
   padding-top: 30px;
}

/* .pause-icon {
   color: #08BABB;
   font-size: 2em;
   animation: blink-animation 1.5s infinite;
} */


/* .play-icon {
   color: #08BABB;
   font-size: 2em;
   animation: blink-animation 1.5s infinite;
} */

@keyframes blink-animation {
   0%, 100% {
       opacity: 1;
   }
   50% {
       opacity: 0;
   }
}


/* .landing-video-overlay{

} */

.landing-overview{
   padding-top: 150px;
}

.overview-image{
   /* height: 392px; */
   height: 320px;
   max-width: 600px;
   border-radius: 8px;
   position: relative;
   transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
   overflow: hidden;
}

.overview-image::before{
   content:"";
   position:absolute;
   top:0;
   left: -100%;
   width:100%;
   height:100%;
   background:linear-gradient(120deg, transparent,rgba(255,255,255,.25), transparent);
   transition: all 0.5s ease;
}

/* .overview-image::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.3);
   opacity: 0;
   transition: opacity 0.4s ease;
} */


/* .overview-image:hover::after {
   opacity: 1;
} */

.overview-image:hover:before{
   left:100%;
}

.overview-image:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}


.bg-image{
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover;
   /* border-bottom-left-radius: 10px; */
   border-top-left-radius : 10px;
}

.csr-image{
   border-radius : 10px;
}

.landing-overview h4{
   padding-bottom: 50px;
}

.mega-menu-column, .nav-expand-header{
   padding-left: 70px!important;
}

.mega-menu-column{
   min-width: 450px!important;
   border-right: solid 1px #344552!important;
}

.sub-menu-container li{
   padding-top: 15px!important;
}

.landing-overview .cta{
   padding-top: 50px;
}

.landing-section{
   padding-top: 150px;
}

.landing-section .header{
   margin-bottom: 50px;
}

.main-investor-box{
   height: 590px;
   position: relative;
   transition: transform 0.4s ease;
}

.main-investor-box::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.5);
   opacity: 0;
   transition: opacity 0.4s ease;
}

.main-investor-box:hover {
   transform: scale(1.05);
}

.main-investor-box:hover::after {
   opacity: 1;
}



.investor-box{
   height: 262px;
   margin-bottom: 50px;
   margin-right: 10px;
   margin-left: 20px;
   border-radius: 8px;
   padding: 15px;
}

.pbg-radius{
   border-radius: 8px;
}

.investor-box .box-title{
   min-height: 180px;
   font-size: 16px;
}

.investor-box .box-arrow{
   text-align: right;
   font-size: 20px;
   padding-top: 180px;
}

.learnMore:hover .get-direction{
   animation: pulsating 1s ease-in-out infinite;
}
.learnMore .get-direction{
   padding-left: 3px;
}

@keyframes pulsating {
   0% {
       transform: translateX(0) scale(1);
   }
   50% {
       transform: translateX(10px) scale(1.1);
   }
   100% {
       transform: translateX(0) scale(1);
   }
}



.investor-box:hover .box-arrow{
   animation: pulsate 1s ease-in-out infinite;
}

.main-investor-box .box-title{
   padding-top: 450px;
   font-size: 16px;
   padding-left: 20px;
   text-align: left;
   transition: color 0.4s ease;
}

.main-investor-box .box-arrow{
   font-size: 20px;
   padding-top: 450px;
   padding-left: 20px;
   transition: transform 0.4s ease;
}

.main-investor-box:hover .box-title, .main-investor-box:hover .box-arrow  {
   color: #08BABB;
   cursor: pointer;
}

.main-investor-box:hover .box-arrow {
   transform: translateY(50px);
   animation: pulsate 1s ease-in-out infinite;
}


@keyframes pulsate {
   0% {
       transform: translateY(0) scale(1);
   }
   50% {
       transform: translateY(10px) scale(1.1);
   }
   100% {
       transform: translateY(0) scale(1);
   }
}


.investor-box:hover .box-title {
   transition: 1s all ease;
   padding-top: 180px;
   color: #08BABB;

}

.investor-box:hover .box-arrow {
   transition: 1s all ease;
   color: #08BABB;
}

#corporate-governance{
   background-image: linear-gradient(rgba(10, 31, 46, 0.7), rgba(10, 31, 46, 0.7)), url('../images/corporate-governance.jpeg');
}
#quaterly-financial{
   background-image: linear-gradient(rgba(10, 31, 46, 0.7), rgba(10, 31, 46, 0.7)), url('../images/homepage/holding_companies.png');
}
#annual-report{
   background-image: linear-gradient(rgba(10, 31, 46, 0.7), rgba(10, 31, 46, 0.7)), url('../images/investor-relations/reports/annual-report-2024.png');
}

/* #annual-report:hover{
   background-image: linear-gradient(rgba(10, 31, 46, 0.7), rgba(10, 31, 46, 0.7)), url('../images/annual-report.jpeg');
}
 */
#share-price{
   background-image: linear-gradient(rgba(10, 31, 46, 0.7), rgba(10, 31, 46, 0.7)), url('../images/homepage/shareholders_corner.png');
}

.footer-socials .fa-brands:hover{
   /* color: #08BABB; */

}
.footer-socials .fa-envelope:hover{
   /* color: #08BABB; */
}

.fa-brands{
   cursor:pointer;
}


.bs-padding{
   padding-left: 15px;
   padding-right: 15px;
}

.news-see-more{
   text-align: right;
   padding-top: 50px;
   padding-bottom: 100px;
}

/* Ensure news section grid is responsive */
.news-corner .row {
   margin: 0;
}

.news-corner .col-12.col-lg-4 {
   padding: 0 10px;
   margin-bottom: 20px;
}

/* Fix for news content overflow */
.news-title h4 {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   line-height: 1.3;
}

.latestNewsDetails h6 {
   max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   line-height: 1.4;
}

/* Responsive fixes for news-see-more */
@media (max-width: 768px) {
   .news-see-more {
       text-align: center;
       padding-top: 30px;
       padding-bottom: 50px;
   }
}

@media (max-width: 480px) {
   .news-see-more {
       padding-top: 20px;
       padding-bottom: 30px;
   }
}



.news-container {
   position: relative;
   overflow: hidden;
   margin: 0;
   border-radius: 5px;
   height: 100%;
   min-height: 350px;
}

.news-image {
   position: relative;
   background-size: cover;
   background-position: center;
   height: 350px;
   min-height: 350px;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   overflow: hidden;
   object-fit: cover;
   transition: transform 0.4s ease, background-size 0.4s ease;
   width: 100%;
}


.news-container:hover .news-image {
   transform: scale(1.1);
}

.news-container:hover{
   border-radius: 5px;
}

.news-date, .news-tag, .news-title, .latestNewsDetails {
   transition: transform 0.4s ease, opacity 0.4s ease;
}



/* .news-container:hover .news-date,
.news-container:hover .news-tag,
.news-container:hover .news-title h4,
.news-container:hover .latestNewsDetails h6 {
   transform: translateY(-10px);
} */


.news-image::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   z-index: 1;
   transition: opacity 0.2s ease;
   border-radius: 5px;

}

.news-image::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, 0.7);
   z-index: 1;
   opacity: 0;
   transition: opacity 0.2s ease;
}

.news-container:hover .news-image {
   opacity: 0.6;
}

.news-container:hover .news-image::after {
   opacity: 1;
}

.news-date {
   position: absolute;
   top: 40px;
   left: 30px;
   color: white;
   font-size: 12px;
   font-weight: bold;
   z-index: 2;
   transition: color 0.2s ease;
}

.news-tag {
   position: absolute;
   bottom: 90px;
   left: 15px;
   background-color: #DDFFFF;
   color: #0A1F2E;
   padding: 4px 10px;
   border-radius: 10px;
   z-index: 2;
   font-size: 10px;
   font-weight: bold;
   transition: transform 0.7s ease;
}

.news-container:hover .news-tag {
   bottom: 90px;
   left: 38px;
   transform: translateY(-130px);
   background-color: #071621;
   color: #fff;
}

.news-title {
   position: absolute;
   bottom: 10px;
   left: 10px;
   color: white;
   z-index: 2;
   padding: 5px 5px;
   border-radius: 3px;
   transition: transform 0.7s ease, color 0.7s ease;
}

.news-title h4{
   font-size: 13px !important;
   line-height: 1.3;
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
}
.latestNewsDetails h6 p{
   font-size: 11px !important;
   color: #0C2C3F !important;
   line-height: 1.4;
   word-wrap: break-word;
   overflow-wrap: break-word;
   hyphens: auto;
}

.news-container:hover .news-image::before {
   background: rgba(0, 0, 0, 0.2);
}




.news-container:hover .news-title h4, .news-container:hover .latestNewsDetails h6 p{
   color: #071621;
   font-weight: bold;
   font-size: 20px;
   opacity: 1;
   transform: translateY(0);
}


.news-container:hover .news-date {
   color: #071621;
}

.news-title h4 {
   margin: 0;
   font-size: inherit;
   font-weight: bold;
}

.latestNewsDetails {
   opacity: 0;
   transform: translateY(30px);
   transition: opacity 0.4s ease, transform 0.5s ease;
   position: relative;
   color: #0A1F2E;
   padding: 10px;
   z-index: 3;
}


.news-container:hover .latestNewsDetails {
   opacity: 1;
   transform: translateY(-30px);
}

.news-container:hover .latestNewsDetails h6 p{
   opacity: 1;
   padding: 30px 30px 0px 30px;
}

/* News Section Responsive Fixes */

/* Large tablets and small desktops */
@media (max-width: 1200px) {
   .news-container {
       min-height: 320px;
   }
   
   .news-image {
       height: 320px;
       min-height: 320px;
   }
   
   .news-title h4 {
       font-size: 12px !important;
   }
   
   .latestNewsDetails h6 p {
       font-size: 10px !important;
   }
}

/* Tablets */
@media (max-width: 991px) {
   .news-container {
       min-height: 300px;
       margin-bottom: 20px;
   }
   
   .news-image {
       height: 300px;
       min-height: 300px;
   }
   
   .news-title {
       bottom: 15px;
       left: 15px;
       right: 15px;
   }
   
   .news-title h4 {
       font-size: 11px !important;
   }
   
   .latestNewsDetails h6 p {
       font-size: 9px !important;
   }
   
   .news-container:hover .latestNewsDetails h6 p {
       padding: 20px 20px 0px 20px;
   }
   
   .news-container:hover .news-title {
       padding: 10px 20px 40px 20px;
   }
}

/* Mobile devices */
@media (max-width: 768px) {
   .news-container {
       min-height: 280px;
       margin-bottom: 15px;
   }
   
   .news-image {
       height: 280px;
       min-height: 280px;
   }
   
   .news-date {
       top: 20px;
       left: 20px;
       font-size: 11px;
   }
   
   .news-tag {
       bottom: 70px;
       left: 20px;
       font-size: 9px;
       padding: 3px 8px;
   }
   
   .news-title {
       bottom: 10px;
       left: 10px;
       right: 10px;
   }
   
   .news-title h4 {
       font-size: 10px !important;
       line-height: 1.2;
   }
   
   .latestNewsDetails h6 p {
       font-size: 8px !important;
       line-height: 1.3;
   }
   
   .news-container:hover .news-tag {
       left: 20px;
       transform: translateY(-100px);
   }
   
   .news-container:hover .latestNewsDetails h6 p {
       padding: 15px 15px 0px 15px;
   }
   
   .news-container:hover .news-title {
       padding: 8px 15px 30px 15px;
       transform: translateY(-70px);
   }
}

/* Small mobile devices */
@media (max-width: 480px) {
   .news-container {
       min-height: 250px;
       margin-bottom: 10px;
   }
   
   .news-image {
       height: 250px;
       min-height: 250px;
   }
   
   .news-date {
       top: 20px;
       left: 25px;
       font-size: 10px;
   }
   
   .news-tag {
       bottom: 60px;
       left: 15px;
       font-size: 8px;
       padding: 2px 6px;
   }
   
   .news-title {
       bottom: 8px;
       left: 8px;
       right: 8px;
   }
   
   .news-title h4 {
       font-size: 9px !important;
       line-height: 1.1;
   }
   
   .latestNewsDetails h6 p {
       font-size: 7px !important;
       line-height: 1.2;
   }
   
   .news-container:hover .news-tag {
       left: 25px;
       transform: translateY(-80px);
   }
   
   .news-container:hover .latestNewsDetails h6 p {
       padding: 12px 12px 0px 25px;
   }
   
   .news-container:hover .news-title {
       padding: 6px 12px 25px 12px;
       transform: translateY(-60px);
   }

   .news-container:hover .news-title h4{
      transform: translateY(20px);
   }
}

/* Extra small devices */
@media (max-width: 360px) {
   .news-container {
       min-height: 220px;
   }
   
   .news-image {
       height: 220px;
       min-height: 220px;
   }
   
   .news-date {
       top: 10px;
       left: 10px;
       font-size: 9px;
   }
   
   .news-tag {
       bottom: 50px;
       left: 10px;
       font-size: 7px;
       padding: 2px 5px;
   }
   
   .news-title {
       bottom: 5px;
       left: 5px;
       right: 5px;
   }
   
   .news-title h4 {
       font-size: 8px !important;
   }
   
   .latestNewsDetails h6 p {
       font-size: 6px !important;
   }
   
   .news-container:hover .news-tag {
       left: 10px;
       transform: translateY(-70px);
   }
   
   .news-container:hover .latestNewsDetails h6 p {
       padding: 10px 10px 0px 10px;
   }
   
   .news-container:hover .news-title {
       padding: 5px 10px 20px 10px;
       transform: translateY(-50px);
   }
}

/* Landscape orientation on mobile */
@media (max-width: 768px) and (orientation: landscape) {
   .news-container {
       min-height: 200px;
   }
   
   .news-image {
       height: 200px;
       min-height: 200px;
   }
   
   .news-title h4 {
       font-size: 8px !important;
   }
   
   .latestNewsDetails h6 p {
       font-size: 6px !important;
   }
   
   .news-container:hover .news-tag {
       transform: translateY(-60px);
   }
   
   .news-container:hover .news-title {
       transform: translateY(-40px);
   }
}

.news-container:hover .news-title {
   padding: 10px 30px 60px 30px;
   transform: translateY(-90px);
}


.latestReadMore a {
   font-weight: bold;
   position: relative;
   color: #0A1F2E;
   font-size: 14px;
   padding: 10px 20px;
   display: inline-block;
   text-decoration: none;
   border: 2px solid transparent;
   background: transparent;
   transition: all 0.6s ease;
   overflow: hidden;
   border-radius: 5px;
}

.latestReadMore a::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 200%;
   height: 200%;
   background: linear-gradient(45deg, #0A1F2E, #071621);
   transition: all 0.6s ease;
   z-index: -1;
   transform: scale(0);
}

.latestReadMore a:hover {
   color: #fff;
   border-color: #0A1F2E;
}

.latestReadMore a:hover::before {
   transform: scale(1);
}

.latestReadMore a:hover {
   background-color: transparent;
   color: #fff;
}

.latestReadMore a::after {
   content: '';
   position: absolute;
   top: 0;
   left: -2px;
   width: 100%;
   height: 100%;
   border-left: 2px solid #0A1F2E;
   border-bottom: 2px solid #0A1F2E;
   z-index: -1;
}


/*
.latestReadMore a {
   font-weight: bold;
   position: relative;
   color: #0A1F2E;
   font-size: 14px;
   padding: 0px 5px;
   display: inline-block;
}

.latestReadMore a::after {
   content: '';
   position: absolute;
   left: 0;
   width: 100%;
   bottom: -2px;
   height: 2px;
   background-color: #071621;
   transform: scaleX(0) translateX(-50%);
   transition: transform 0.4s ease, bottom 0.4s ease;
   transform-origin: center;
}

.latestReadMore a:hover::after {
   transform: scaleX(1);
   bottom: 0;
   color: #0A1F2E;
   background-color: #071621
}

.latestReadMore a:hover {
   color: #071621;
} */

.text-white {
   color: white;
}



.footer-socials{
   font-size: 30px;
}

.about-banner{
   height: 480px;
   background-color: black;
   opacity: 0.7;
}

.page-title-container{
   background-color: #0A1F2E;
   max-width: 497px;
   width: 320px;
   min-height: 180px;
   padding-left: 50px;
   padding-top: 50px;
   margin-left: 100px;
   color: white;
   position: absolute;
   margin-top: -100px;
   /* bottom: 0; */
}

.contact-banner::before{
   transform: rotate(90deg);
}

.page-title-container .text-primary{
   font-weight: bold;
}

.glance-container .col-lg-4{
   /* width: 200px !important; */
   margin: 0 auto;
   border-radius: 10px;
}

.glance-box {
   height: 250px;
   background-color: #0A1F2E;
   margin-bottom: 30px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
   padding: 20px;
   transition: box-shadow 0.3s ease, transform 0.3s ease, filter 0.3s ease;
   border-radius: 12px;
   overflow: hidden;
   position: relative;
}

.glance-box:hover {
   box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
   transform: translateY(-10px) scale(1.05);
   border-radius: 12px;
   filter: brightness(1.1);
}

.glance-box-figure{
   font-size: 24px;
   padding-top: 5px;
}

#footer .footer-widgets-wrap{
   padding-top: 20px;
   padding-bottom: 10px;
}

.brands-over-years, .brands-over-years-btn{
   padding-bottom: 70px;
}

.brands-over-years .brand-box{
   height: 200px;
   background-color: #E7E9EA;
   margin-bottom: 20px;
   text-align: center;
   padding-top: 15%;
}

.brands-over-years .brand-box img{
   max-height: 70%;
}

#load-more-button{
   min-width: 200px;
   min-height: 40px;
   font-weight: bold;
}

#copyrights{
   padding: 30px 15px;
   /* padding-bottom: 15px; */
}

#pbv-copyrights{
   padding: 50px 15px;
   font-size: 14px;
}



.brand-box {
   position: relative;
   overflow: hidden;
   cursor: pointer;
}

.brand-box img {
   transition: transform 0.3s ease;
}

.content-area {
   position: absolute;
   bottom: -100%;
   left: 0;
   right: 0;
   width: 90%;
   margin: 0 auto;
   height: 60px;
   background-color: white;
   border-left: 3px solid #08BABB;
   transition: bottom 0.6s ease;
   opacity: 0;
}

.content-area p{
   display: flex;
   align-items: center;
   justify-content: center;
   color: black;
   padding:7px;
   font-size: 14px;
}

.brand-box:hover .content-area {
   bottom: 20%;
   transform: translateY(50%);
   opacity: 1;
}

.brand-box:hover img {
   transform: scale(1.11);
}




.widget_links div{
   font-size: 0.8rem !important;
}


.contact-info-box{
   background-color: #071621;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 10px 10px #0A1F2E,
   10px 10px 0px 1px #08BABB;
   /* padding-bottom: 50px; */
   padding-left: 35px;
   min-height: 300px;
}

.contact-info-box-small{
   /* width: 90%; */
   /* margin: auto; */
   /* margin-right: 30px; */
}

.contact-info-box-big{
   /* width: 97%; */
   margin: auto;
   margin-top: 100px;
   margin-bottom: 50px;
}

.contact-info-box-small h2{
   margin-bottom: 1px;
}

.contact-info-box .brand-name{
   margin-bottom: 20px;
}

.brand-table table{
   width: 100%;
}

.brand-table table tr{
   background-color: #071620;
   padding: 10px;
   border-radius: 8px;
}

.brand-table table tr td{
   text-align: center;
}

.brand-table table tr td .pill{
   margin: 10px;
   font-weight: bold;
   padding-top: 20px;
   height: 60px;
   border-radius: 8px;

}

.brand-table table tr td .pill.active {
   background-color: #08BABB;
   color: black;
}

.foot-print-container{
   padding: 20px;
   padding-top: 100px;
   padding-bottom: 100px;
}

/* Mobile Responsive Styles for Foot Prints Page */
@media (max-width: 768px) {
   .about-banner {
       height: 300px !important;
       min-height: 300px !important;
       background-size: cover !important;
       background-position: center !important;
       background-repeat: no-repeat !important;
   }

   .page-title-container {
       position: relative !important;
       margin: 20px auto !important;
       margin-left: auto !important;
       margin-right: auto !important;
       margin-top: 20px !important;
       width: 90% !important;
       max-width: 90% !important;
       min-height: auto !important;
       padding: 30px 20px !important;
       text-align: center;
   }

   .page-title-container h4 {
       font-size: 1.8rem !important;
       margin-bottom: 10px !important;
   }

   .page-title-container .text-primary {
       font-size: 1.2rem !important;
   }

   .landing-section {
       padding: 30px 15px !important;
   }

   .landing-section h3 {
       font-size: 20px !important;
       line-height: 1.3 !important;
       margin-bottom: 15px !important;
   }

   .landing-section p {
       font-size: 14px !important;
       line-height: 1.5 !important;
       margin-bottom: 15px !important;
   }

   .foot-print-container {
       padding: 20px !important;
       padding-top: 50px !important;
       padding-bottom: 50px !important;
   }

   .foot-print-container h5 {
       font-size: 16px !important;
       line-height: 1.4 !important;
   }

   .overview-image {
       height: 250px !important;
       margin-bottom: 15px !important;
   }

   .bg-dark {
       padding: 30px 15px !important;
   }

   .bg-dark h3 {
       font-size: 22px !important;
       margin-bottom: 25px !important;
   }

   .accordion-button {
       font-size: 16px !important;
       padding: 15px !important;
       line-height: 1.3 !important;
   }

   .accordion-body {
       padding: 15px !important;
   }

   .accordion-body p {
       font-size: 14px !important;
       line-height: 1.5 !important;
   }

   .pt-100, .pb-100 {
       padding-top: 50px !important;
       padding-bottom: 50px !important;
   }
}

@media (max-width: 480px) {
   .about-banner {
       height: 200px !important;
       min-height: 200px !important;
   }

   .page-title-container {
       padding: 20px 15px !important;
       margin-top: 15px !important;
   }

   .page-title-container h4 {
       font-size: 1.5rem !important;
   }

   .page-title-container .text-primary {
       font-size: 1rem !important;
   }

   .landing-section {
       padding: 20px 10px !important;
   }

   .landing-section h3 {
       font-size: 18px !important;
   }

   .landing-section p {
       font-size: 13px !important;
   }

   .foot-print-container {
       padding: 15px !important;
       padding-top: 30px !important;
       padding-bottom: 30px !important;
   }

   .foot-print-container h5 {
       font-size: 15px !important;
   }

   .overview-image {
       height: 200px !important;
   }

   .bg-dark {
       padding: 20px 10px !important;
   }

   .bg-dark h3 {
       font-size: 20px !important;
   }

   .accordion-button {
       font-size: 15px !important;
       padding: 12px !important;
   }

   .accordion-body {
       padding: 12px !important;
   }

   .accordion-body p {
       font-size: 13px !important;
   }

   .pt-100, .pb-100 {
       padding-top: 30px !important;
       padding-bottom: 30px !important;
   }
}


.pbg-accordion{
}

.pbg-accordion .accordion-item{
   background-color: #0A1F2E;
   margin-bottom: 20px;
   border-radius: 7px;
   border: none;
}

.pbg-accordion .accordion-header{
   border-bottom: none;
   width: 90%;
   margin: auto;
   color: white;
}

.pbg-accordion .accordion-body{
   border-top: solid 1px #08BABB;
   width: 90%;
   margin: auto;
   color: white;
}

.pbg-accordion .accordion-button{
   background-color: transparent;
   font-size: 21px;
   color: white;
   box-shadow: none;
}


div.get-in-touch{
   margin-top: 10em;
}

div.contact-message{
   font-size: small;
}

form {
   display: flex;
   flex-direction: column;
   gap: 34px;
}

.form-control {
   padding: 24px;
   border-radius: 7px;
   font-size: 16px;
   border: 1px solid #ced4da;
}

.form-control::placeholder {
   color:#071620;
}

.custom-form-group {
   display: flex;
   gap: 15px;

}

textarea.form-control {
   resize: none;
}

div.custom-form-group{
   display: flex;
   justify-content: space-between;
}


.map-container iframe {
   width: 100%;
   height: 600px;
   border: 0;
}

.pill {
   cursor: pointer;
   transition: transform 5s ease-in-out;
}


.pill.active {
   background-color: #007bff;
   color: white;
   font-weight: bold;
}



div.our-brand-card {
   /* width: 100%; */
   min-height: 300px;
   max-height: 60rem;
   overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   flex-shrink: 0;
   position: relative;
   margin: 0 auto;
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}


.our-brand-card:hover {
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
   transform: translateY(-5px) scale(1.0);
}


.card-overlay{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: none;
   color: white;
   padding: 20px;
   box-sizing: border-box;
}

.our-brand-card:hover .card-overlay {
   display: block;
   transform: translateY(0);
}


.hamburger-menu {
   position: absolute;
   top: 22px;
   right: 18px;
   cursor: pointer;
   font-size: 14px;
   background-color: #08BABB;
   border-radius: 5px;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 14px;
   padding-right: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform 0.3s ease-in-out;
}

.menu-icon {
   color: #fff;
}

.menu-content {
   position: absolute;
   top: 39vh;
   right: 12px;
   background-color: white;
   color: #333;
   padding: 10px;
   border-radius: 5px;
   border-left: 10px solid #08BABB;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   width: 93%;
   display: none;
   transform: translateY(20px);
   transition: transform 0.8s ease;
}

.menu-content p.our-brand-header{
   color: #000;
   font-weight: bold;
}

.menu-content span.details{
   color: #000;
   font-size: 10px;
}






.card-details.show {
   display: block;
   opacity: 1;
   transform: translateY(0);
}


.hamburger-menu:hover {
   transform: scale(1.2);
}

.our-brand-card:hover .menu-content {
   display: block;
   opacity: 1;
   transform: translateY(0);
}

.card-details, .card-details * {
   color: #000;
}

.card-details {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #08BABB;
   color: #000;
   padding: 20px;
   box-sizing: border-box;
   display: none;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   z-index: 3;

   transform: translateY(-20px);
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-details.show {
   display: flex;
}

.our-brand-header {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: absolute;
   top: 10px;
   left: 0;
   right: 0;
   padding: 0 20px;
}

.brand-logo {
   display: flex;
   align-items: center;
   margin-top: 20px;
}

.brand-logo img {
   max-height: 120px;
   width: 132px;
   border-radius: 5px;
}

.close-details {
   cursor: pointer;
   font-size: 30px;
   background-color: white;
   color: #08BABB;
   border-radius: 5px;
   padding: 5px;
   width: 40px;
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 4;
   position: absolute;
   top: 15px;
   right: 20px;
   transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.close-details:active {
   background-color: #07a7a7;
   transform: scale(0.95);
   transition: transform 0.1s ease-out;
}






.details-content {
   text-align: left;
   font-family: sans-serif;
   font-size: 12px;
   line-height: 130%;
   margin-top: 140px;
   width: 100%;
}

.details-content p{
   margin-bottom: 13px !important;
}

/* .details-content h5 {
   /* margin-bottom: 7px;
} */


/* .details-content p {
   margin-top: 10px;
   margin-bottom: 20px;
} */

.read-more-link a {
   text-decoration: none;
   color: #000;
   font-weight:700;
   display: inline-flex;
   align-items: center;
}

.read-more-link a i {
   margin-left: 8px;
}

.read-more-link a:hover , .read-more-link i:hover{
   color: #fff
}


/**
** Video
*/
.video-container {
   position: relative;
   height: 300px;
   overflow: hidden;
   max-width: 100%;
   background: #000;
   margin-top: 50px;
   border-radius: 20px;
}

.video-container video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.video-container-overlay {
   position: absolute;
   bottom: 30px;
   left: 80px;
   width:32%;
   height: 150px;
   text-align: left;
   padding:20px;
   background: rgba(0, 0, 0, 0.8);
   box-sizing: border-box;
   opacity: 0.8;
}

.video-container-overlay h3{
   color: #08BABB;
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
}

.video-container-overlay p{
   color: #ced4da;
   font-size: 12px;
   font-style: normal;
   font-weight: 700;
   margin-bottom: 15px;
}

.our-brand-container{
   margin: 0 auto;
   width:80%;
}


.img-container {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   /* width: 250px;*/
   height: 270px;
   margin-bottom: 14px;
   transition: transform 0.7s ease;
}

.img-container img {
   width: 100%;
   height: 100%;
   display: block;
   object-fit: cover;
   margin:15px;
   border-radius: 10px;
   transition: transform 0.8s ease-in-out;
}

.text-overlay {
   position: absolute;
   left: 20px;
   top: 80%;
   transform: translateY(-50%);
   background: #fff;
   width: 70%;
   height: 60px;
   box-sizing: border-box;
   border-left: 4px solid #08BABB;
}

.text-overlay p{
   color: #000;
   padding: 10px;
   font-size: 10px;
   font-style: normal;
   font-weight: bold;
   transition: transform 0.1s ease;
}

.icon-overlay {
   position: absolute;
   right: 3px;
   bottom: 28px;
   background-color:#08BABB;
   padding: 1px;
   border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
   transition: transform 0.3s ease;
}

.icon-overlay img {
   width: 20px;
   height: auto;
}

.img-container:hover img {
   transform: scale(1.01);
}

.img-container:hover .icon-overlay {
   transform: scale(1.01);
}

.img-container:hover {
   transform: scale(1.01);
}

/*
/**
**News Room
*/

.news-category{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.ul-container {
   display: flex;
   gap: 100px;
   color: #FFF;
   font-family: sans-serif;
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%;
}

.ul-container ul {
   list-style-type: none;
   padding: 0;
}

.ul-container li {
   display: flex;
   align-items: center;
   margin-bottom: 20px;
   line-height: 7px;
}

.ul-container li::before {
   content: '';
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background-color: #ced4da;
   display: inline-block;
   margin-right: 15px;
}


.ul-container li.active::before {
   background-color: #08BABB;
}

.search-container {
   position: relative;
}

.search-container input {
   width: 400px;
   height: 20px;
   padding-left: 70px;
   padding-right: 15px;
   border: 1px solid #ced4da;
   border-radius: 8px;
   font-size: 14px;
   margin-top: 50px;
}

.search-container input::placeholder {
   color: #6c757d;
   font-size: 12px;
}

.search-container .fa-search {
   position: absolute;
   left: 25px;
   top: 50%;
   transform: translateY(-50%);
   font-size: 15px;
   color: #000;
}


div.newsroom-biobin{
   background-color: #071620;
   border-radius:  10px;
   margin-top: 120px;
   width:90%;
}

.row.newsroom-biobin {
   display: flex;
   align-items: stretch;
   height: 500px;
}

.newsroom-biobin .col-lg-6.col-md-12 {
   padding-left: 0;
}


.newsroom-biobin .col-lg-6.col-md-12 img {
   display: block;
   width: 100%;
   height: 500px;
   object-fit: cover;
   border-top-left-radius: 10px;
   border-bottom-left-radius: 10px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;

}

.newsroom-biobin img {
   width: 100%;
   height: auto;
}

.newsroom-text {
   padding: 100px;
}

.newsroom-text h2 {
   color: #08BABB;
   font-size: 1.4rem;
   padding-left: 50px;
   padding-top: 80px;
}

.newsroom-text p {
   font-size: 0.8rem;
   padding-right: 50px;
   padding-left: 50px;
}

.newsroom-text .date {
   display: block;
   margin-top: 50px;
   font-size: 1rem;
   font-weight: bold;
   padding-left: 50px;
}

.newsroom-info-box{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 20px 20px #0A1F2E,
   20px 20px 0px 1px #08BABB;

}


.overlay-button {
   position: absolute;
   top: 20px;
   left: 20px;
   padding: 10px 20px;
   background-color: #DDFFFF;
   color: #0A1F2E;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   z-index: 1;
   font-size: 12px;
   font-weight: bold;
}


div.newsroom-plant{
   background-color: #071621;
   padding:30px 30px;
}

.newsroom-crop{
   width: 90%;
}


.newsroom-crop .col-lg-5.col-md-12 img {
   width: 100%;
   height: auto;
   border-radius: 12px;
   display: block;
}
.newsroom-plant h4{
   color: #08BABB;
   font-size: 1.2rem;
}

.newsroom-plant p {
   font-size: 0.8rem;
}


.newsroom-crop-box{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 20px 20px #0A1F2E,
   20px 20px 0px 1px #08BABB;
   overflow: hidden;
   padding: 0;
}

.newsroom-div {
   margin-left: 70px;
}

.detail-news{
   background-color: #071621;
   font-size: 16px;
}

.col-lg-6.col-md-6.news-room-content{
   padding-left: 0;
   padding-right: 0;
   margin-left: 0;
   margin-right: 0;
}

.detail-news p{
  color :#08BABB;
  margin-bottom: 3px;
  font-weight: bold;
  padding: 15px 20px;
}

/* .detail-news span{
   font-size: 10px;
   color: #888;
   font-weight: 400;
   padding: 20px;
} */

.detail-news p.date{
   color :#fff;
   font-size: 14px;
   font-weight: 100;
}



.all-news-class{
   width: 85%;
   margin: 0 auto;
}


.news-box {
   position: relative;
   overflow: hidden;
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   background-color: #071620;
}


.news-box img {
   width: 100%;
   height: auto;
   display: block;
   transition: transform 0.3s ease;
}

.overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.5);
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
   transition: background 0.3s ease;
}

.overlay span {
   position: absolute;
   top: 10px;
   right: 10px;
   background: #DDFFFF;
   color: #0A1F2E;
   padding: 5px 10px;
   border-radius: 5px;
   font-size: 0.7em;
   font-weight: 700;
}


.news-room-text {
   padding: 15px;
}

.news-room-title {
   font-size: 0.8em;
   font-weight: 700;
   color: #08BABB;
}


.news-room-container:hover {
   transform: scale(1.05);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.news-room-container:hover .overlay {
   opacity: 1;
}

.news-box:hover img {
   transform: scale(1.1);
}

/* .news-meta {
   display: flex;
   justify-content: space-between;
   align-items: center;
} */

.news-room-container{
   background-color: #071620;
   margin: 15px 12px;
   display: flex;
   flex-direction: column;
   height: 100%;
   border-radius: 8px;
   overflow: hidden;
   border: 1px solid #08BABB;
   transition: box-shadow 0.3s ease;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.news-room-date {
   font-size: 14px;
   font-weight: 400;
   color: #ABABAB;
   margin-bottom: 0px;
}

.read-more {
   display: none;
   color: #08BABB;
   cursor: pointer;
   font-size: 0.9em;
}

/* Show the "Read more" on hover */
.news-box:hover .read-more {
   display: block;
}


.news-title{
   color: #08BABB;
   font-size: 18px;
   font-style: normal;
   font-weight: 700;
}


.news-info-box{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 10px 10px #0A1F2E,
   10px 10px 0px 1px #08BABB;
   overflow: hidden;
   padding: 0;
}



/**
** OUR REACH
**/

.key-features{
   background-color: #0A1F2E;
}

.key-features .container{
   margin-top:200px;
   margin-bottom: 200px;
}



.grid-container {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* Creates 3 equal-width columns */
   gap: 0; /* Remove spacing between grid items */
}

/* Grid item styling */
.grid-item {
   background-color: #f1f1f1;
   border: 1px solid #ddd;
   text-align: left;
   box-sizing: border-box;
   height: 200px;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;

}


.right-grid {
   position: relative;
}

.right-grid .grid-container {
   position: absolute;
   top: -100px;
   left: 0;
}

.col-lg-6, .col-md-12 {
   padding: 0;
}


.key-features h2 {
   margin-bottom: 20px;
   padding-left: 270px;
}


.left-grid {
   position: relative;
}

.right-grid {
   position: relative;
   top: -100px;
}

.col-lg-6, .col-md-12 {
   padding: 0;
}


.custom-color-1{
   background-color: #08BABB;
   border:1px solid #08BABB;
   color: #0A1F2E;
}

.custom-color-2{
   background-color: #344552;
   border:1px solid #344552;
   color: #FFFFFF;
}

.custom-color-3{
   background-color: #0A1F2E;
   border:1px solid #0A1F2E;
   color: #08BABB;
   font-size: 12px;
}

.custom-color-4{
   background-color: #E7E9EA;
   border:1px solid #E7E9EA;
   color: #0A1F2E;

}

.transparent{
   background-color: transparent;
   border: 1px solid transparent;
}

.custom-bg-left-5{
   background-image: url('/images/investors-bg.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border: 1px solid transparent;
}

.custom-bg-right-5{
   background-image: url('/images/our-brands/image-11.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   border: 1px solid transparent;
}




/**
**
* Phoenix Earth
*
*/
div.main-section{
   background-color:#071620;

}

/* div.main-section .row {
   width: 100%;
   max-width: 100%;
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
} */


.smaller-text{
   font-size: 14px;
   text-align: justify;
}

.small-text{
   font-size: 18px;
   text-align: justify;
   padding-right: 20px;
}

/**
** Carousel
**/

/* Slider */

.slick-slide {
   margin: 0px 15px;
}

.slick-slide img {
   width: 100%;
}


/***
*** Innovation
***
**/

.inovation-info-box{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 20px 20px #0A1F2E,
   20px 20px 0px 1px #08BABB;
   transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
   /* padding-bottom: 50px; */
}

.inovation-info-box-right{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 20px 20px #0A1F2E,
   20px 20px 0px 1px #08BABB;
   transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
   /* padding-bottom: 50px; */
}


.sustainability-info-box{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 20px 20px #0A1F2E,
   20px 20px 0px 1px #08BABB;
   /* padding-bottom: 50px; */
}

.sustainability-info-box:hover::after {
   opacity: 1;
}

.sustainability-info-box:hover {
   transform: translateY(-5px) scale(1.01);
   opacity: 0.7;
   box-shadow: none;
}



.csr-info-box{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 20px 20px #0A1F2E,
   20px 20px 0px 1px #08BABB;
   /* padding-bottom: 50px; */
}

.csr-info-box:hover::after {
   opacity: 1;
}

.csr-info-box:hover {
   transform: translateY(-5px) scale(1.01);
   opacity: 0.7;
   box-shadow: none;
}

/**
**
** Our Leadership
**
**/

.our-leadership .tab-content > .tab-pane {
   display: none;
}
.our-leadership .tab-content > .tab-pane.active {
   display: block;
}

.our-leadership .nav{
   width: 50%;
   margin: 0 auto;
   background-color: #0A1F2E;
   padding: 1rem;
   border-radius: 7px;
   flex-wrap: nowrap;
}

/* .nav-pills .nav-item {
   margin: 0 0.6rem;
} */

.our-leadership .nav-pills {
   justify-content: center;
}
.our-leadership .nav-pills .nav-link {
   border-radius: 0.4rem;
   background-color: #0A1F2E;
   padding: 1rem 2.0rem;
   color: #fff;
   font-weight: bold;
   font-size:1rem;
}
.our-leadership .nav-pills .nav-link.active {
   background-color: #08BABB;
   color: #0A1F2E;
}



/* .our-leadership .nav-pills .nav-link:hover {
   background-color: #08BABB;
   color: #0A1F2E;
} */

.our-leadership .tab-content {
   padding: 1rem;
   width: 75%;
   margin: 0 auto;
   border-radius: 0.375rem;
}



.our-leadership-card {
   /* width: 310px;
   height: 279px; */
   position: relative;
   transition: transform 0.4s;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;
}


.our-leadership-card img{
    object-fit: cover;
    height: 279px;
    border-radius: 8px;
}


.our-leadership .menu-content p.our-leadership-header{
   color: #000;
   font-weight: bold;
}


.our-leadership .card-overlay {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   color: white;
   display: block;
   padding: 0;
   box-sizing: border-box;
   opacity: 0;
   visibility: hidden;
   transform: translate(100%, 100%);
   transition: opacity 1s ease, transform 1.5s ease;
}



/* .our-leadership .card-overlay{
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   color: white;
   display: block;
   padding: 0;
   box-sizing: border-box;
} */

.our-leadership .card-overlay .menu-content{
   display: none;
}

/* .our-leadership-card:hover .card-overlay {
   display: block;
   transform: translateY(0);
} */

.our-leadership-card:hover .card-overlay {
   opacity: 1;
   visibility: visible;
   transform: translate(0, 0);
}


/* .our-leadership .add-menu {
   position: absolute;
   top: 230px;
   right: 10px;
   cursor: pointer;
   font-size: 14px;
   background-color: #08BABB;
   border-radius: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: right 0.8s ease;
   z-index: 3;
} */


.our-leadership .add-menu {
   position: absolute;
   top: 230px;
   right: 10px;
   cursor: pointer;
   font-size: 14px;
   background-color: #08BABB;
   border-radius: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 10px;
   padding-right: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: right 0.8s ease;
   z-index: 3;
}

.our-leadership .menu-icon {
   color: #0A1F2E;
   font-size: 18px;
   font-weight: bold;
}

.our-leadership .menu-content {
   position: absolute;
   top: 200px;
   bottom: 0;
   background-color: white;
   color: #333;
   border-left: 10px solid #08BABB;
   box-shadow: 0 2px 10px rgba(0,0,0,0.1);
   display: none;
   left: 0;
   width: 100%;
   opacity: 0;
   transform: translateY(-100%);
   transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
   padding: 10px;
   box-sizing: border-box;
   z-index: 1;
}


.our-leadership .menu-content p.our-leadership-header{
   color: #000;
   font-weight: bold;
   margin : 0;
}

.our-leadership .menu-content span.details{
   color: #000;
   font-size: 8px;
   margin : 0;
   display: block;
   width: 70%;
   white-space: normal;
}


.our-leadership-card:hover .menu-content {
   display: block;
   opacity: 1;
   transform: translateY(0);
}

.card-details, .card-details * {
   color: #000;
}

/* .our-leadership-card .card-details {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #08BABB;
   color: #000;
   padding: 20px;
   box-sizing: border-box;
   display: none;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   z-index: 3;
   transition: right 0.5s ease;
   border: 1px solid ;
} */

.card-details.show {
   display: flex;
}

.leadership-header {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: absolute;
   top: 10px;
   left: 0;
   right: 0;
   padding: 0 20px;
}

.leadership-logo {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 10px;
}

.leadership-logo img {
   max-height: 100px;
   width: 100px;
   border-radius: 5px;
}

.our-leadership-card  .close-details {
   cursor: pointer;
   font-size: 20px;
   background-color: white;
   color: #08BABB;
   border-radius: 5px;
   padding: 5px;
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 4;
   position: absolute;
   top: 0;
   right: 20px;
}

.our-leadership-details-content {
   text-align: left;
   font-size: 12px;
   line-height: 130%;
   margin-top: 80px;
   width: 100%;
}


.our-leadership-details-content h5 {
   margin-top: 15px;
   margin-bottom: 0px;
}

.our-leadership-details-content span {
   font-weight: bold;
   font-size: 11px;
}

.our-leadership-details-content p.desc{
   margin-top: 8px;
   margin-bottom: 10px;
}

.our-leadership-details-content .read-more-link button {
   text-decoration: none;
   color: #000;
   font-weight:700;
   padding: 0;
   margin: 0;
   font-size: 12px;
}

.our-leadership-details-content .read-more-link button i {
   margin-left: 8px;
}

.our-leadership-details-content .read-more-link button:hover{
   color: #fff;
}



/**
** Chairman Messages
*/

div.messages{
   background-color: #071620;
   width: 100%;
}

.my-slider {
   position: relative;
   width: 100%;
   max-width: 2000px;
   overflow: hidden;
   height: auto;
   min-height: 500px;
   max-height: 700px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.my-slides {
   display: flex;
   transition: transform 0.75s ease-in-out;
   width: 100%;
   height: 100%;
   box-sizing: border-box;
}

.my-slide {
   flex: 0 0 100%;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
   transition: opacity 0.7s ease-in-out;
}

.my-slider, .my-slides, .my-slide {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

.my-slide img {
   width: 100%;
   height: 400px;
   object-fit: cover;
   transition: opacity 0.7s ease-in-out;
}

.message-content {
   padding: 40px;
   height: auto;
   min-height: 400px;
   box-sizing: border-box;
   overflow: visible;
   text-align: justify;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

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


.message-content span {
   color: #08BABB;
}

.controls {
   position: absolute;
   bottom: 20px;
   right: 20px;
   display: flex;
   gap: 10px;
   z-index: 10;
}

.controls button {
   background-color: transparent;
   color: #08BABB;
   border: 2px solid #08BABB;
   cursor: pointer;
   padding: 10px 15px;
   font-size: 18px;
   border-radius: 5px;
   transition: background-color 0.3s, color 0.3s;
}

.controls button:hover {
   background-color: #08BABB;
   color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
   .my-slider {
       min-height: 400px;
       max-height: 600px;
   }
   
   .message-content {
       padding: 20px;
       min-height: 350px;
   }
   
   .message-content p {
       font-size: 13px;
       line-height: 1.5;
   }
   
   .controls {
       bottom: 15px;
       right: 15px;
   }

   .controls button {
       font-size: 16px;
       padding: 8px 12px;
   }
}

@media (max-width: 480px) {
   .my-slider {
       min-height: 350px;
       max-height: 500px;
   }
   
   .message-content {
       padding: 15px;
       min-height: 300px;
   }
   
   .message-content h4 {
       font-size: 18px;
       margin-bottom: 15px;
   }
   
   .message-content p {
       font-size: 12px;
       line-height: 1.4;
   }
   
   .controls {
       bottom: 10px;
       right: 10px;
   }
   
   .controls button {
       font-size: 14px;
       padding: 6px 10px;
   }
}





/***
**
** Corporate Governance
**
*/

.corporate-governance .tab-content > .tab-pane {
   display: none;
}
.corporate-governance .tab-content > .tab-pane.active {
   display: block;
}


.corporate-governance .nav{
   width: 85%;
   margin: 0 auto;
   background-color: #0A1F2E;
   padding: 20px;
   border-radius: 7px;
}


.corporate-governance .nav-pills {
   justify-content: center;
}
.corporate-governance .nav-pills .nav-link {
   border-radius: 0.4rem;
   background-color: #0A1F2E;
   padding: 1.3rem 3.75rem;
   color: #fff;
   font-weight: bold;
}
.corporate-governance .nav-pills .nav-link.active {
   background-color: #08BABB;
   color: #0A1F2E;
}
.corporate-governance .nav-pills .nav-link:hover {
   background-color: #08BABB;
   color: #0A1F2E;
}

.corporate-governance .tab-content {
   padding: 1rem;
   width: 75%;
   margin: 0 auto;
   border-radius: 0.375rem;
}

.corporate-governance .tab-content .coporate-document{
   background-color: #0A1F2E;
}

.corporate-governance .tab-content .coporate-document-box {
   display: flex;
   justify-content: space-between;
}


.corporate-governance .tab-content .coporate-document-box .coporate-document{
   padding: 30px;
   width: 50%;
   margin:5px;
   border-radius: 7px;
}

.corporate-governance .tab-content .coporate-document-box .coporate-document div{
   color: #08BABB;
}

.compliance{
   /* font-size: 13px; */
   text-align: justify;
}


/***
**
** Operation Structure
**/
.op-chart{
   text-align:center;
   margin-bottom: 250px;
}



/**
**
** Holding Companies
**/
.holding-companies .tab-content {
   padding: 1rem;
   width: 100%;
   margin: 0 auto;
   border-radius: 0.375rem;
}

.holding-companies .tab-content .coporate-document-box {
   display: flex;
   flex-wrap: wrap;
   gap: 1rem;
}

.holding-companies .tab-content .coporate-document {
   background-color: #0A1F2E;
   padding: 20px;
   width: calc(25% - 1rem);
   box-sizing: border-box;
   border-radius: 7px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
}

.holding-companies .tab-content .coporate-document p {
   margin: 0 0 10px 0;
}

.holding-companies .tab-content .coporate-document .document-actions {
   display: flex;
   align-items: center;
   color: #08BABB;
   gap: 10px;
   font-size:13px;
}

.our-holding-location{
   font-size:13px;
}

#chartdiv {
   width: 100%;
   height: 550px;
 }

p.e-shop {
   color:#000;
   font-size:10px;
}

button.visit-shop, button.visit-shop:hover{
   background-color: #08BABB;
   color:#071621;
}

div.accordion-item{
   background-color: #fff;
   color:#071621;
}

.accordion-button{
   background-color: #fff;
}

.investor-relations-dark{
   background-color: #071621;
   font-size: 14px;
}

.investor-relations-dark .card-header{
   background-color: #08BABB;
   color:#0A1F2E;
   padding: 12px 12px 12px 24px;
   font-weight: bold;
   font-size: 19px;
}

.investor-relation-img-footer{
   position: absolute;
   bottom: -5;
   width: 100%;
   opacity: 0;
   padding: 12px;
   background: rgba(8, 186, 187, 0.9);
   color: #0A1F2E;
   text-align: center;
   font-size: 14px;
   height: 60px;
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
}

.investor-relation-img-footer h5 {
   text-align: center;
   align-items: center;
   color: #0A1F2E;
   cursor: pointer;
}


.shareholders-border{
   border: 1px solid #08BABB;
   border-radius: 5px;
   padding: 7px 15px;
}

.picl-badge{
   background-color: #0A1F2E;
   color:#E7E9EA;
   padding: 5px 14px;
   border: 1px solid #E7E9EA;
}

.cicl-badge{
   background-color: #E36C37;
   color:#E7E9EA;
   padding: 5px 14px;
}

.pbl-badge{
   background-color: #08BABB;
   color:#0A1F2E;
   padding: 5px 14px;
}

.investor-relations-dark .date{
   color:#E7E9EA;
   font-size: 10px;
   font-weight: bold;
   padding: 7px 0px
}

.investor-relations-dark .learn-more:hover{
   color: #08BABB;
}

.investor-relations-dark .document-actions{
   display: flex;
   align-items: center;
   color: #08BABB;
   gap: 5px;
   font-size:13px;
}



/* .investor-relations .tab-content > .tab-pane {
   display: none;
} */
.investor-relations .tab-content > .tab-pane.box-active {
   display: block;
}


.investor-relations .nav{
   width: 100%;
   margin: 0 auto;
   background-color: #0A1F2E;
   padding: 30px 10px;
   border-radius: 7px;
   transition: 0.25s ease-out;
}


.investor-relations .nav-pills {
   transition: 0.25s ease-out;
}

.investor-relations .nav-pills .nav-link {
   border-radius: 0.4rem;
   background-color: #0A1F2E;
   color: #fff;
   font-weight: bold;
   margin: 0px 10px;
   cursor: pointer;
   transition: color 0.2s ease, background-color 0.3s ease, transform 0.3s ease;
}

.investor-relations .dark{
   background-color: #071620 !important;
}
.investor-relations .dark-nav-item{
   background-color: #071620 !important;
}


.dark-document{
   background-color: #071620 !important;
}


.investor-relations .nav-pills .nav-link.box-active {
   background-color: #08BABB !important;
   color: #0A1F2E !important;
}


.investor-relations .nav-pills .nav-link.active,
.investor-relations .nav-pills .nav-link.box-active {
   background-color: #08BABB !important;
   color: #0A1F2E !important;
   transform: scale(1.05); /* Optional: subtle scaling effect */
}



/* Smooth transition for tab content */
/* .investor-relations .tab-content .tab-pane {
   opacity: 0;
   visibility: hidden;
   transition: transform 0.4s ease, opacity 0.4s ease;
}

.investor-relations .tab-content .tab-pane.show.active {
   opacity: 1;
   visibility: visible;
   transition: opacity 0.25s ease-in-out; /* Fade in
} */

.investor-relations .tab-content {
   position: relative;
   height: 100%;  /* Ensure that the content stays within the container */
}

.investor-relations .tab-content .tab-pane {
   position: absolute;
   top: 0;
   left: 100%; /* Start off-screen to the right */
   right: 0;
   opacity: 0;
   visibility: hidden;
   transform: translateX(100%); /* Slide content from the right */
   transition: transform 0.4s ease, opacity 0.4s ease; /* Smooth sliding and fading */
}

.investor-relations .tab-content .tab-pane.show.active {
   left: 0;
   opacity: 1;
   visibility: visible;
   transform: translateX(0);
}

/* For tabs switching in the opposite direction (optional for reverse sliding) */
.investor-relations .tab-content .tab-pane-prev {
   left: -100%;
   transform: translateX(-100%);
   opacity: 0;
   visibility: hidden;
}


/* .investor-relations .nav-pills .nav-link:hover {
   background-color: transparent !important;
   color: #08BABB !important;
   /* padding: 1.3rem 3.75rem;
} */

.investor-relations .tab-content {
   padding: 1rem;
   width: 75%;
   margin: 0 auto;
   border-radius: 0.375rem;
}

.investor-relations .tab-content .coporate-document{
   background-color: #0A1F2E;
}

.investor-relations .tab-content .coporate-document-box {
   display: flex;
   justify-content: space-between;
}


.investor-relations .tab-content .coporate-document-box .coporate-document{
   padding: 30px;
   width: 50%;
   margin:5px;
   border-radius: 7px;
}

.investor-relations .tab-content .coporate-document-box .coporate-document div{
   color: #08BABB;
}



/*
.box-active {
   background-color: #08BABB !important;
   color: #0A1F2E !important;
} */


.dash-slider {
   position: relative;
}

.dash-containers {
   display: flex;
   flex-grow: 1;
   overflow: hidden;
   position: relative;
}

.dash-container {
   width: fit-content;
   height: auto;
   min-height: 370px;
   transition: transform 0.5s ease-in-out, opacity 0.5s ease;
   position: relative;
   top: 0;
   left: 0;
   opacity: 0;
   display: none;
}

.dash-container.active {
   display: block;
   transform: translateX(0);
   opacity: 1;
}

.dash-container:not(.active) {
   transform: translateX(100%);
}

.dash-controls {
   display: flex;
   flex-direction: column;
   justify-content: center;
   right: 0;
   top: 0;
   position: absolute;
}



.dash-control::before {
   content: '';
   display: none;
   width: 10px;
   height: 10px;
   background-color: #FFFFFF;
   position: absolute;
   top: 5px;
   left: 5px;
   border-radius: 2px;
}

.dash-control.active::before {
   display: block;
}


.dash-control {
   width: 7px;
   height: 50px;
   background-color: #344552;
   transition: width 0.3s, background-color 0.3s;
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.dash-control.active {
   transform: translateX(-10px);
   background-color: #08BABB;
}


.dash-control.hovered, .dash-control:hover {
   width: 100px;
   background-color: #344552;
   transform: translateX(0);
}


.dash-control.hovered.active {
   background-color: #08BABB;
}


.dash-control.hovered span {
   display: block;
}

.dash-control span {
   /* display: none; */
   position: absolute;
   left: 25px;
   top: 30%;
   font-weight: bold;
   font-size: 10px;
   color: white;
}


.learnMore a {
   font-weight: bold;
   position: relative;
   color: #08BABB;
}

.learnMore a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -5px;
   width: 100%;
   height: 1px;
   background-color: #08BABB;
   transform: scaleX(0);
   transition: transform 0.5s ease;
   transform-origin: left;
}

.learnMore a:hover::after {
   transform: scaleX(1);
   height: 3px;
}



.learnMoreDash a {
   font-weight: bold;
   position: relative;
   color: #0A1F2E;
   font-size: 14px;
}

.learnMoreDash a::after {
   content: '';
   position: absolute;
   left: 0;
   bottom: -5px;
   width: 100%;
   height: 1px;
   background-color: #0A1F2E;
   transform: scaleX(0);
   transition: transform 0.5s ease;
   transform-origin: left;
}

.learnMoreDash a:hover::after {
   transform: scaleX(1);
   height: 3px;
}




/* Homepage Slider */

.hero-content {
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
}

.slider {
   width: 100%;
   position: relative;
}

.slide-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 20px;
   height: 100%;
}

.left-content {
   width: 40%;
   padding-right: 50px;
   padding-left: 60px;
}

.right-content {
   width: 55%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

.right-content img {
   width: 100%;
   height: auto;
   object-fit: cover;
   transform: scale(1);
   transition: transform 10s ease-in-out;
   transform-origin: center center;
}

.dashSlides {
   display: flex;
   transition: transform 0.5s ease-in-out;
}

.dashSlide {
   min-width: 100%;
   box-sizing: border-box;
   transition: transform 0.5s ease-in-out;
}

.csrSlide {
   min-width: 100%;
   box-sizing: border-box;
   transition: transform 0.5s ease-in-out;
}

.image-container {
   width: 100%;
   height: 620px;
   position: relative;
   overflow: hidden;
}


.dashSlide.active .image-container img {
   transform: scale(1);
}

.csrSlide.active .image-container img {
   transform: scale(1);
}

.slow-pulse {
   animation-duration: 13s !important;
   animation-timing-function: ease-in-out !important;
}


/* @keyframes zoomIn {
   0% {
       transform: scale(1);
   }
   100% {
       transform: scale(1.2);
   }
} */



/* Navigation Buttons */
.navBtn {
   position: absolute;
   bottom: 120px;
   left: 700px;
   display: flex;
   gap: 20px;
   z-index: 1000;
}

.dashPrev, .dashNext {
   background-color: #071620;
   color: #08BABB;
   border: none;
   cursor: pointer;
   padding: 10px 15px;
   font-size: 18px;
   border-radius: 5px;
   transition: background-color 0.3s, color 0.3s;
}


.dashPrev:hover, .dashNext:hover {
   background-color: #08BABB;
   color: #071620;
}


/* Indicators */
.indicators {
   text-align: center;
   position: absolute;
   bottom: 120px;
   left: 400px;
}


.indicator {
   display: inline-block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #344552;
   cursor: pointer;
   margin: 0 5px;
   transition: background 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;
}


.indicator.active {
   background: #08BABB;
   width: 22px;
   height: 8px;
   border-radius: 5px;
}

.indicator:hover {
   background: #08BABB;
   width: 24px;
   height: 8px;
   border-radius: 5px;
}


/**
**Sustainability
**/
.landing-section-sus{
   padding-top: 70px;
}


.sustainability-info-box{
   background-color: #071621;
   border-radius: 8px;
   box-shadow: 20px 20px #0A1F2E,
   20px 20px 0px 1px #08BABB;
   /* padding-bottom: 50px; */
}

.sus-read-more{
   margin-top: 10px;
   color: #08BABB;
   font-size: 18px;
   font-weight: bold;
   letter-spacing: 1px;
   cursor: pointer;
}


.back-button {
   position: absolute;
   /* left: 0;  */
   top: 0;
   font-size: 16px;
   color: #08BABB;
   cursor: pointer;
   transition: color 0.3s ease;
}

.back-button:hover {
   color: #fff;
}

.phoenix-bev-text {
   font-size: 16px;
   line-height: 1.6;
   text-align: left;
}

.header {
   position: relative;
}




/* Edena*/

.phoenix-bev-list {
   margin-top: 10px;
   padding-left: 20px;
   text-align: left;
   font-size: 16px;
}

.phoenix-bev-list li {
   margin-bottom: 5px;
}



.read-time{
   color: #08BABB;
}


/**
Annual Report
*/

.report-section{
   padding-left: 70px;
   padding-top: 110px;
}


.report-main-section{
   background-color:#071620;
   padding: 100px 0px;
}

.report-cards {
   background-color: #0A1F2E;
   border-bottom: 1px solid rgba(8, 186, 187, 0.2);
   padding: 20px;
   transition: background-color 0.3s ease, transform 0.3s ease;
   border-radius: 4px;
}

.report-cards:hover {
   background-color: #0C2C3F;
   transform: translateY(-5px);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.report-cards .document-actions{
   color: #08BABB;
   font-size: 14px;
   cursor: pointer;
}

.ann-report{
   font-size: 14px;
   font-weight: bold;
   color:#fff;
}


/**Report -Integrated Report **/


.integrated-reports .tab-content > .tab-pane {
   display: none;
}

.integrated-reports .tab-content > .tab-pane.active {
   display: block;
}

.integrated-reports .nav{
   width: 80%;
   margin: 0 auto;
   background-color: #0A1F2E;
   padding: 15px;
   border-radius: 7px;
}


.integrated-reports .nav-pills {
   justify-content: center;
   flex-wrap: wrap;
}

.integrated-reports .nav-pills .nav-link {
   border-radius: 0.4rem;
   background-color: #0A1F2E;
   font-size: 14px;
   /* padding: 1.3rem 3.75rem; */
   color: #fff;
   font-weight: bold;
   margin: 5px;
}

.integrated-reports .nav-pills .nav-link.active {
   background-color: #08BABB;
   color: #0A1F2E;
}
.integrated-reports .nav-pills .nav-link:hover {
   background-color: #08BABB;
   color: #0A1F2E;
}

.integrated-reports .tab-content {
   padding: 1rem;
   width: 70%;
   margin: 0 auto;
   border-radius: 0.375rem;
}

.integrated-reports .tab-content .coporate-document{
   background-color: #0A1F2E;
}

.integrated-reports .tab-content .coporate-document-box {
   display: flex;
   justify-content: space-between;
}


.integrated-reports .tab-content .coporate-document-box .coporate-document{
   padding: 30px;
   width: 50%;
   margin:5px;
   border-radius: 7px;
}

.integrated-reports .tab-content .coporate-document-box .coporate-document div{
   color: #08BABB;
}


.integrated-report-cards{
   background-color: #0A1F2E;
   border-bottom: 1px solid rgba(8, 186, 187, 0.2);
   padding: 24px;
   transition: background-color 0.3s ease, transform 0.3s ease;
   border-radius: 4px;
}

.integrated-report-cards:hover {
   background-color: #0C2C3F;
   transform: translateY(-5px);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.integrated-report-cards .document-actions{
   color: #08BABB;
   font-size: 14px;
   cursor: pointer;
}


@media (max-width: 768px) {
   .integrated-reports .nav {
       padding: 10px;
   }

   .integrated-reports .nav-pills .nav-link {
       font-size: 12px;
       padding: 10px;
   }

   .integrated-reports .tab-content {
       width: 95%;
   }
}



/** holding reports **/


.holding-reports .tab-content > .tab-pane {
   display: none;
}

.holding-reports .tab-content > .tab-pane.active {
   display: block;
}

.holding-reports .nav{
   width: 60%;
   margin: 0 auto;
   background-color: #0A1F2E;
   padding: 15px;
   border-radius: 7px;
}


.holding-reports .nav-pills {
   justify-content: center;
   flex-wrap: wrap;
}

.holding-reports .nav-pills .nav-link {
   border-radius: 0.4rem;
   background-color: #0A1F2E;
   font-size: 14px;
   /* padding: 1.3rem 3.75rem; */
   color: #fff;
   font-weight: bold;
   margin: 5px;
}
.holding-reports .nav-pills .nav-link.active {
   background-color: #08BABB;
   color: #0A1F2E;
}
.holding-reports .nav-pills .nav-link:hover {
   background-color: #08BABB;
   color: #0A1F2E;
}

.holding-reports .tab-content {
   padding: 1rem;
   width: 70%;
   margin: 0 auto;
   border-radius: 0.375rem;
}

.holding-reports .tab-content .coporate-document{
   background-color: #0A1F2E;
}

.holding-reports .tab-content .coporate-document-box {
   display: flex;
   justify-content: space-between;
}


.holding-reports .tab-content .coporate-document-box .coporate-document{
   padding: 30px;
   width: 50%;
   margin:5px;
   border-radius: 7px;
}

.holding-reports .tab-content .coporate-document-box .coporate-document div{
   color: #08BABB;
}


.integrated-report-cards{
   background-color: #0A1F2E;
   border-bottom: 1px solid rgba(8, 186, 187, 0.2);
   padding: 24px;
   transition: background-color 0.3s ease, transform 0.3s ease;
   border-radius: 4px;
}

.integrated-report-cards:hover {
   background-color: #0C2C3F;
   transform: translateY(-5px);
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.integrated-report-cards .document-actions{
   color: #08BABB;
   font-size: 14px;
   cursor: pointer;
}


@media (max-width: 768px) {
   .holding-reports .nav {
       padding: 10px;
   }

   .holding-reports .nav-pills .nav-link {
       font-size: 12px;
       padding: 10px;
   }

   .holding-reports .tab-content {
       width: 95%;
   }
}



.ireport{
   height: 95vh;
}

.ir-section{
   background-color: #071620;
   padding-top: 60px;
}

.card-title {
   font-weight: bold;
}

.card-text {
   padding: 10px 0;
}


.responsive-image {
   width: 100%;
   height: 87vh;
   object-fit: cover;
}

.ir-card{
   background-color: #0A1F2E;
   transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
   border-radius: 10px;
   overflow: hidden;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
   color: #fff;
   cursor: pointer;
}

.green-caret{
   color: #33CA40;
}

.red-caret{
   color :#CA4233;
}

.ir-card:hover {
   transform: translateY(-5px) scale(1.05);
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}


.ir-section-details{
   background-color: #0A1F2E;
   color: #fff;
   padding-top: 60px;
}



/**
***Shareholders
****
*/

.shareholders-table {
   border-collapse: separate;
   border-radius: 10px;
   overflow: hidden;
   width: 100%;
}

.shareholders-table thead th {
   background-color: #E7E9EA;
   color: #0A1F2E;
   padding: 10px;
   font-size: 13px;
}

.shareholders-table tbody td {
   color:#D8D8D8;
   background-color: #071620;
   font-size: 13px;
   padding: 10px;
}

.shareholders-table tbody tr {
   border-bottom: 1px solid #071620;
}

.smallest-text{
   font-size: 12px;
}



.large-p {
   font-size: 6em;
   font-weight: bold;
   color: #08BABB;
   line-height: 0.8;
   float: left;
   margin-right: 15px;
}

.column-padding {
   padding: 20px;
}


/** Share Holder **/
.circle {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   background-color: #fff;
   border: 5px solid #3498db;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   margin: 10px;
   transition: all 0.6s ease;
}

.circle::after {
   content: attr(data-percentage);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   font-size: 20px;
   opacity: 0;
   animation: fadeIn 0.6s forwards;
}

@keyframes fadeIn {
   from { opacity: 0; }
   to { opacity: 1; }
}


/*
*our culture
**/
.our-culture-img {
   transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.our-culture-img:hover {
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
   transform: translateY(-6px) scale(1.05);
}


/***Shareholders **/
.chart-container {
   text-align: center;
}


.line-chart-container {
   background-color: #071620;
   padding: 25px;
}
.canvas-container {
   background-color: #071620;
   padding: 25px;
   margin-bottom: 50px;
   text-align: center;
}



canvas#doughnutChart3, canvas#doughnutChart1{
   width: 220px !important;
   height:220px !important;
}


.market-details{
   display: flex;
   justify-content:space-between;
   border-bottom:1px solid white;
   font-size:14px;
   padding-bottom:12px;
   padding-top: 5px;
}

.text-justify{
   text-align: justify;
}

@media (max-width: 768px) {
   .slide-content {
     flex-direction: column; /* Stack content on smaller screens */
   }

   .left-content,
   .right-content {
     flex: none;
     width: 100%; /* Make the left and right sections take up full width */
     padding: 10px;
     text-align: center;
   }

   .bg-image {
     max-width: 100%;
     height: auto;
   }

   .cta button {
     width: 100%;
     font-size: 14px;
   }
 }

 @media (max-width: 480px) {
   .cta button {
     font-size: 12px;
     padding: 8px 16px;
   }

   .left-content h4,
   .right-content h4 {
     font-size: 18px; /* Adjust heading size for smaller screens */
   }

   .left-content p,
   .right-content p {
     font-size: 14px; /* Adjust text size for smaller screens */
   }
 }


.counter {
 animation-duration: 1s;
 animation-delay: 0s;
}


.inovation-info-box::before{
   content: '';
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 100%;
   background:linear-gradient(120deg, transparent,rgba(255,255,255,.25), transparent);
   transition: all 0.5s ease;
}


.inovation-info-box:hover:before{
   left:100%;
}

.inovation-info-box:hover {
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/**
***CSR INDICATOR
***/

.csr-indicators {
   text-align: center;
   position: absolute;
   bottom: 170px;
   left: 200px;
}

.csr-indicator {
   display: inline-block;
   width: 9px;
   height: 9px;
   border-radius: 50%;
   background: #344552;
   cursor: pointer;
   margin: 0 5px;
   transition: background 0.3s ease, width 0.3s ease, height 0.3s ease, border-radius 0.3s ease, transform 0.3s ease;
}


.csr-indicator.active {
   background: #08BABB;
   width: 22px;
   height: 8px;
   border-radius: 5px;
}

.csr-indicator:hover {
   background: #08BABB;
   width: 24px;
   height: 8px;
   border-radius: 5px;
}

hr.gradient {
    height: 4px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(
      90deg,
      rgba(193, 197, 199) 0%,
      rgba(100, 115, 116) 21%,
      rgb(255, 255, 255) 51%,
      rgba(8, 186, 187) 100%
    );
  }

/* Custom Mega Menu Responsive Fixes */

/* Fix mega menu positioning on smaller screens */
@media (max-width: 991px) {
    .is-expanded-menu .mega-menu-content {
        width: 90% !important;
        left: 5% !important;
        transform: none !important;
        max-width: calc(100vw - 20px);
    }
    
    .is-expanded-menu .mega-menu:not(.mega-menu-small) .mega-menu-content {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 90% !important;
        max-width: 500px;
        max-height: 80vh;
        overflow-y: auto;
        z-index: 9999;
    }
    
    /* Ensure mega menu stays within viewport */
    .is-expanded-menu .mega-menu-content .container {
        max-width: 100% !important;
        padding: 15px !important;
    }
    
    /* Make mega menu columns stack on mobile */
    .is-expanded-menu .mega-menu-content .mega-menu-column {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 10px 0 !important;
    }
    
    /* Remove borders between columns on mobile */
    .is-expanded-menu .mega-menu-content:not(.border-0) .sub-menu-container.mega-menu-column:not(:first-child) {
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 15px !important;
    }
}

/* Additional fixes for very small screens */
@media (max-width: 767px) {
    .is-expanded-menu .mega-menu-content {
        width: 95% !important;
        left: 2.5% !important;
        max-width: calc(100vw - 10px);
    }
    
    .is-expanded-menu .mega-menu:not(.mega-menu-small) .mega-menu-content {
        width: 95% !important;
        max-width: calc(100vw - 10px);
    }
    
    /* Reduce padding on mobile */
    .is-expanded-menu .mega-menu .mega-menu-style-2 .mega-menu-column {
        padding: 1rem 0.75rem !important;
    }
    
    /* Make menu items more touch-friendly */
    .is-expanded-menu .mega-menu-content .menu-item > .menu-link {
        padding: 12px 8px !important;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    /* Ensure images don't overflow */
    .is-expanded-menu .mega-menu-content img {
        max-width: 100%;
        height: auto;
    }
}

/* Fix for medium screens */
@media (min-width: 992px) and (max-width: 1199px) {
    .is-expanded-menu .mega-menu-content {
        width: 80% !important;
        left: 10% !important;
        transform: none !important;
    }
}

/* Ensure mega menu doesn't go off-screen on any device */
.is-expanded-menu .mega-menu-content {
    box-sizing: border-box;
}

/* Add a backdrop for better visibility on mobile */
@media (max-width: 991px) {
    .is-expanded-menu .mega-menu:not(.mega-menu-small) .mega-menu-content::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* Improve touch targets on mobile */
@media (max-width: 767px) {
    .is-expanded-menu .mega-menu-content .menu-item > .menu-link {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Make sure sub-menu indicators are visible and touchable */
    .is-expanded-menu .mega-menu-content .menu-link div > i.sub-menu-indicator {
        font-size: 14px;
        margin-left: 8px;
        padding: 4px;
    }
}

/* Mobile mega menu close button */
@media (max-width: 991px) {
    .is-expanded-menu .mega-menu-content {
        position: relative;
    }
    
    .is-expanded-menu .mega-menu-content::after {
        content: '×';
        position: absolute;
        top: 10px;
        right: 15px;
        width: 30px;
        height: 30px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        font-weight: bold;
        color: white;
        cursor: pointer;
        z-index: 10;
        transition: background-color 0.2s ease;
    }
    
    .is-expanded-menu .mega-menu-content::after:hover {
        background: rgba(255, 255, 255, 0.2);
    }
    
    /* Ensure the close button is clickable */
    .is-expanded-menu .mega-menu-content {
        padding-top: 50px;
    }
}

/* Mobile Hero Section - Default styles (hidden on desktop) */
.mobile-hero-content {
    display: none;
}

/* Overview Section Mobile Responsive */
@media (max-width: 768px) {
    .dash-slider {
        padding: 0 15px;
    }
    
    .dash-containers {
        margin-bottom: 30px;
    }
    
    .dash-container {
        min-height: auto;
        padding: 20px 0;
    }
    
    .overview-image {
        height: 250px !important;
        margin-bottom: 20px;
        border-radius: 12px;
    }
    
    .dash-container h4 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        text-align: center;
    }
    
    .dash-container p {
        font-size: 0.9rem;
        line-height: 1.6;
        text-align: center;
        margin-bottom: 20px;
    }
    
    .dash-container .cta {
        text-align: center;
    }
    
    .dash-container .learnMore a {
        display: inline-block;
        padding: 10px 25px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.3s ease;
    }
    
    .dash-container .learnMore a:hover {
        transform: translateY(-2px);
    }
    

}

@media (max-width: 480px) {
    .overview-image {
        height: 200px !important;
    }
    
    .dash-container h4 {
        font-size: 1.3rem;
    }
    
    .dash-container p {
        font-size: 0.85rem;
    }
    
    .dash-container .learnMore a {
        padding: 8px 20px;
        font-size: 0.9rem;
    }
}

/* Investors Corner Mobile Responsive */
@media (max-width: 768px) {
    .investors-corner {
        padding: 0 15px;
    }
    
    .investors-corner h4 {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 25px;
    }
    
    .main-investor-box {
        height: 300px !important;
        margin-bottom: 20px;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .main-investor-box .box-title h5 {
        font-size: 1.4rem;
        margin-bottom: 10px;
    }
    
    .main-investor-box .box-title {
        font-size: 0.9rem;
        line-height: 1.4;
    }
    
    .investor-box {
        height: 200px !important;
        margin-bottom: 15px;
        border-radius: 12px;
        overflow: hidden;
    }
    
    .investor-box .box-title {
        font-size: 0.9rem;
        line-height: 1.3;
        padding: 15px;
    }
    
    .investor-box .box-arrow {
        font-size: 16px;
        padding-top: 15px;
    }
    
    .main-investor-box .box-arrow {
        font-size: 18px;
        padding-top: 15px;
    }
}

@media (max-width: 480px) {
    .investors-corner h4 {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .main-investor-box {
        height: 250px !important;
    }
    
    .main-investor-box .box-title h5 {
        font-size: 1.2rem;
    }
    
    .main-investor-box .box-title {
        font-size: 0.8rem;
    }
    
    .investor-box {
        height: 180px !important;
    }
    
    .investor-box .box-title {
        font-size: 0.8rem;
        padding: 12px;
    }
    
    .investor-box .box-arrow {
        font-size: 14px;
        padding-top: 12px;
    }
    
    .main-investor-box .box-arrow {
        font-size: 16px;
        padding-top: 12px;
    }
}

/* Footer Mobile Responsive & Beautiful Design */
@media (max-width: 768px) {
    #footer {
        padding: 0 15px;
    }
    
    .footer-widgets-wrap {
        padding: 2rem 0 !important;
    }
    
    .widget {
        text-align: center;
    }
    
    .footer-logo {
        max-width: 180px;
        height: auto;
        margin-bottom: 1rem;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    
    .widget h4 {
        font-size: 1.2rem;
        margin-bottom: 1rem;
        color: #08BABB;
        font-weight: 600;
        border-bottom: 2px solid #08BABB;
        padding-bottom: 0.5rem;
        display: inline-block;
        text-align: center;
    }
    
    .widget_links ul {
        list-style: none;
        padding: 0;
        margin: 0;
        text-align: center;
    }
    
    .widget_links ul li {
        margin-bottom: 0.8rem;
        transition: all 0.3s ease;
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    .widget_links ul li a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 0.9rem;
        transition: all 0.3s ease;
        display: inline-block;
        position: relative;
        text-align: center;
    }
    
    .widget_links ul li a:hover {
        color: #08BABB;
        transform: translateX(5px);
    }
    
    .widget_links ul li a::before {
        content: '→';
        position: absolute;
        left: -15px;
        opacity: 0;
        transition: all 0.3s ease;
        color: #08BABB;
    }
    
    .widget_links ul li a:hover::before {
        opacity: 1;
        left: -10px;
    }
    
    .footer-socials {
        display: flex;
        gap: 1rem;
        margin-top: 1rem;
        justify-content: center;
    }
    
    .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: rgba(8, 186, 187, 0.1);
        border: 2px solid #08BABB;
        border-radius: 50%;
        color: #08BABB;
        text-decoration: none;
        transition: all 0.3s ease;
        font-size: 18px;
    }
    
    .social-link:hover {
        background: #08BABB;
        color: white;
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(8, 186, 187, 0.3);
    }
    
    .contact-info address {
        font-style: normal;
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    .contact-info p {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.9rem;
        margin: 0;
        text-align: center;
    }
    
    /* Copyright Section */
    #copyrights {
        padding: 1.5rem 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .copyright-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .copyright-links a {
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        font-size: 0.8rem;
        transition: color 0.3s ease;
        border-bottom: 1px dotted rgba(255, 255, 255, 0.3);
    }
    
    .copyright-links a:hover {
        color: #08BABB;
        border-bottom-color: #08BABB;
    }
}

@media (max-width: 480px) {
    .footer-widgets-wrap {
        padding: 1.5rem 0 !important;
    }
    
    .footer-logo {
        max-width: 150px;
    }
    
    .widget h4 {
        font-size: 1.1rem;
    }
    
    .widget_links ul li a {
        font-size: 0.85rem;
    }
    
    .social-link {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }
    
    .contact-info address,
    .contact-info p {
        font-size: 0.85rem;
        text-align: center;
    }
    
    .copyright-links {
        flex-direction: column;
        align-items: center;
        gap: 0.3rem;
    }
    
    .copyright-links a {
        font-size: 0.75rem;
    }
}

/* Desktop Footer Enhancements */
@media (min-width: 769px) {
    .footer-widgets-wrap {
        padding: 3rem 0 !important;
    }
    
    .widget {
        text-align: left;
    }
    
    .widget h4 {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
        color: #08BABB;
        font-weight: 600;
        position: relative;
        text-align: left;
    }
    
    .widget h4::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 30px;
        height: 2px;
        background: #08BABB;
        transition: width 0.3s ease;
    }
    
    .widget:hover h4::after {
        width: 50px;
    }
    
    .widget_links ul {
        text-align: left;
    }
    
    .widget_links ul li {
        text-align: left;
        display: block;
        justify-content: flex-start;
    }
    
    .widget_links ul li a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        display: inline-block;
        position: relative;
        text-align: left;
    }
    
    .widget_links ul li a:hover {
        color: #08BABB;
        transform: translateX(8px);
    }
    
    .widget_links ul li a::before {
        content: '→';
        position: absolute;
        left: -20px;
        opacity: 0;
        transition: all 0.3s ease;
        color: #08BABB;
    }
    
    .widget_links ul li a:hover::before {
        opacity: 1;
        left: -15px;
    }
    
    .footer-socials {
        display: flex;
        gap: 1.2rem;
        margin-top: 1.5rem;
        justify-content: flex-start;
    }
    
    .social-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: rgba(8, 186, 187, 0.1);
        border: 2px solid #08BABB;
        border-radius: 50%;
        color: #08BABB;
        text-decoration: none;
        transition: all 0.3s ease;
        font-size: 20px;
    }
    
    .social-link:hover {
        background: #08BABB;
        color: white;
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(8, 186, 187, 0.4);
    }
    
    .contact-info address,
    .contact-info p {
        text-align: left;
    }
}

/* Gentle Mobile Hero Section Improvements */

@media (max-width: 768px) {
    /* Hide desktop hero content on mobile */
    .hero-content {
        display: none !important;
    }
    
    /* Show mobile hero content */
    .mobile-hero-content {
        display: block !important;
    }
    
    /* Mobile hero styling */
    .mobile-hero-content {
        background-color: #0A1F2E;
        padding: 0;
        min-height: 100vh;
        display: flex;
        align-items: center;
    }
    
    .mobile-hero-slide {
        display: none;
        text-align: center;
        padding: 0;
    }
    
    .mobile-hero-slide.active {
        display: block;
    }
    
    .mobile-hero-image {
        width: 100%;
        height: 500px;
        object-fit: cover;
        border-radius: 0;
        margin-bottom: 25px;
    }
    
    .mobile-hero-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #08BABB;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    
    .landing-section{
      padding-top: 100px;;
    }
    .mobile-hero-description {
        font-size: 1rem;
        color: #FFFFFF;
        margin-bottom: 25px;
        line-height: 1.5;
        text-align: justify;
    }
    
    .mobile-hero-button {
        background: #08BABB;
        border: 2px solid #08BABB;
        color: white;
        padding: 8px 12px;
        border-radius: 8px;
        box-shadow: 5px 5px #0A1F2E,
        7px 7px 0px 1px #08BABB;
        font-weight: 600;
        font-size: 0.95rem;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        min-width: 200px;
        margin: 20px 0px;
    }
    
    .mobile-hero-button:hover {
      background-color: #E7E9EA;
      color: black;
      box-shadow: none;
      transform: scale(1.05);
      border:none;
    }
    
    /* Mobile indicators */
    .mobile-indicators {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 20px;
    }
    
    .mobile-indicator {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #344552;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .mobile-indicator.active {
        background: #08BABB;
        width: 25px;
        border-radius: 5px;
    }
}

/* Smaller mobile devices */
@media (max-width: 480px) {
    .hero-content {
        padding: 0;
    }
    
    .slide-content {
        padding: 0;
        gap: 20px;
    }
    
    .right-content {
        max-width: 100%;
    }
    
    .image-container {
        height: 180px;
    }
    
    .left-content h4 {
        font-size: 1.4rem;
        margin-bottom: 12px;
    }
    
    .left-content p {
        font-size: 0.9rem;
        margin-bottom: 18px;
    }
    
    .cta button {
        padding: 10px 25px;
        font-size: 0.9rem;
        min-width: 120px;
    }
}

/* Extra small devices */
@media (max-width: 360px) {
    .right-content {
        max-width: 100%;
    }
    
    .image-container {
        height: 150px;
    }
    
    .left-content h4 {
        font-size: 1.3rem;
    }
    
    .left-content p {
        font-size: 0.85rem;
    }
    
    .cta button {
        padding: 8px 20px;
        font-size: 0.85rem;
        min-width: 110px;
    }
}

/* Video Section Mobile Responsive */
@media (max-width: 768px) {
    .landing-page-video {
        height: auto;
        min-height: 400px;
        padding: 40px 20px;
    }
    
    .landing-video-overlay {
        padding-left: 20px;
        padding-top: 20px;
        padding-right: 20px;
    }
    
    .landing-video-overlay .row {
        flex-direction: column;
        text-align: center;
    }
    
    .landing-video-overlay .col-lg-6 {
        margin-bottom: 30px;
    }
    
    #text-content h4 {
        font-size: 1.5rem;
        margin-bottom: 15px;
        text-align: center;
    }
    
    #text-content h6 {
        font-size: 0.9rem;
        text-align: center;
        line-height: 1.4;
    }
    
    .video-cta {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        position: relative;
        z-index: 10;
    }
    
    .play-icon {
        cursor: pointer;
        transition: transform 0.3s ease;
        position: relative;
        z-index: 15;
    }
    
    .play-icon:hover {
        transform: scale(1.1);
    }
}

@media (max-width: 480px) {
    .landing-page-video {
        min-height: 350px;
        padding: 30px 15px;
    }
    
    .landing-video-overlay {
        padding-left: 15px;
        padding-top: 15px;
        padding-right: 15px;
    }
    
    #text-content h4 {
        font-size: 1.3rem;
        margin-bottom: 12px;
    }
    
    #text-content h6 {
        font-size: 0.8rem;
    }
    
    .play-icon {
        height: 80px !important;
        width: 80px !important;
    }
}