/* #trafrom slider navigation (prev left / next right, vertically centered) */
#trafrom .swiper-button-prev.horizontal-scoll-wrapper-prev,
#trafrom .swiper-button-next.horizontal-scoll-wrapper-next {
top: 50%;
bottom: auto;
transform: translateY(-50%);
display: flex;
opacity: 1;
visibility: visible;
z-index: 10;
cursor: pointer;
background-color: #fff;
border-radius: 50%;
width: 68px;
height: 68px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
#trafrom .swiper-button-prev.horizontal-scoll-wrapper-prev { right: 20px; left: inherit; transform: rotate(180deg); }
#trafrom .swiper-button-next.horizontal-scoll-wrapper-next { left: 20px; right: inherit;transform: rotate(180deg); }

/* ===============================================================
   #trafrom DESKTOP: GSAP ScrollTrigger pinned horizontal scroll.
   Each card is a full-viewport panel laid out in a row; GSAP
   translates them (RTL aware, see initHorizontalScroll in main.js).
   Mobile (<=768px) keeps the Swiper slider untouched.
   =============================================================== */
@media (min-width: 769px) {
  #trafrom .horizontal { display: flex; flex-wrap: nowrap; }
  #trafrom .card {
    min-width: 100vw;
    width: 100vw;
    height: 100vh;
    flex-shrink: 0;
  }
  /* Scroll drives the slides on desktop — hide the Swiper arrows. */
  #trafrom .swiper-button-next.horizontal-scoll-wrapper-next,
  #trafrom .swiper-button-prev.horizontal-scoll-wrapper-prev {
    display: none !important;
  }
}

@media (min-width: 3840px) {

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1900px;
}

#YearInReview .card-wrapper:last-of-type {
    height: 56vh;

}
.navbar .nav-search .search-input::placeholder {
  font-size: 30px;
  line-height: 20px;
} 
.navbar .nav-search .search-input { font-size: 30px !important; }

.nav-logo img {max-width: 70px;}
.energy-label,.report-label,.menu-label {font-size: 36px;}
.lang-switch {font-size: 28px;}
.navbar .nav-search .search-icon svg,.download-icon svg { width: 40px !important; height: 40px !important; }
.hamburger {width: 36px;gap: 7px;}
.community-section .community-left-wrap .community-left { margin: auto; width: 1100px; }
.common-ttle, .common-ttle2 {font-size: 90px;}
.main-text {font-size: 46px;}
p,#VisionMission .values-grid span,#VisionMission .vision-card h6,#VisionMission .strength-list li,#VisionMission .strength-list span,#MessageFromChairman .Meggagedesc,#MessageFromChairman .message-slider .message-right .image-wrap .cta-box h6,#YearInReview #awards .awardsCards .awardsCardsRight p,#businessSection .nav-tabs .nav-link,#businessSection .rar-title,.revenue .keyBrands h5,.region-map-section .Meggagedesc,.map-container .card-header,#backlog .Meggagedesc,#backlog .chart-title,.management-review .MoreContent p,#WhyInvestment .Meggagedesc,#ShareholderInformation .shareholderBaseGraphContainer h2,#Digital .digital-section .digital-content .Meggagedesc,#Downloads .Meggagedesc,.hero-footer__contact-item span { font-size: 36px; }

.sub-ttle,#PerfromanceHilight .ph-tab {font-size: 46px;}
#VisionMission .values-grid img { width: 50px; }
#VisionMission .vision-card {height: 600px;}
#VisionMission .strength-list span {line-height: 26px; width: 32px;
    height: 33px;}
.toggle {width: 60px;
    height: 30px;}
#MessageFromChairman .quote .common-ttle,#YearInReview #awards .awardsCards .awardsCardsRight h2 {font-size: 46px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box h5 {font-size: 26px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box span {font-size: 22px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box {padding: 13px;}
#PerfromanceHilight .ph-tab .label .fin-icon img { width: 50px; }
#PerfromanceHilight .ph-icon, #PerfromanceHilight .ph-tab .icon {width: 45px;
    height: 45px; font-size: 52px;}
#PerfromanceHilight .ph-item h2 {font-size: 70px;}
.advancingSlide {transform: scale(1.5);}
#YearInReview .quarter-section .card-top h5,#YearInReview #signature .project-card h5{ font-size: 48px; }
#YearInReview .quarter-section .card-text {font-size: 24px;
    line-height: 1.1;
    margin-bottom: 22px;
    }
    #YearInReview .quarter-section .quarter-card {height: 340px;width: 440px;} 
    .read-btn {font-size: 19px;padding: 5px 14px;}
    .popup-overlay.active .popup-box {
    transform: translateY(0) scale(2.4);
}
.popup-item {font-size: 18px;}
#YearInReview #signature {
/*     transform: scale(1.22); */
    /* padding-top: 100px; */
}
#banner .container h1 {width: 500px;}
#YearInReview #signature .project-card p { line-height: 33px; }
#YearInReview #awards .awardsCards .awardsCardsRight h6 {font-size: 43px;}
#YearInReview #awards {padding: 100px 0;}
#YearInReview #awards .swiperControl {bottom: 18px; right: 210px;}
#YearInReview #awards .swiperControl .swiper-pagination {line-height: 17px;font-size: 28px;}
#YearInReview #awards .awardsCards .awardsCardsRight p {line-height: 42px;}
#ThematicStories .connectivity-grid {transform: scale(1.2); margin-top: 130px; }
#ThematicStories .card-hover p { font-size: 32px; }
#ThematicStories .download-btn { font-size: 28px; }
#businessSection .rar-item {font-size: 32px;}
.revenue .rev-right .desc {font-size: 32px;}
#backlogChart .Meggagedesc { font-size: 40px; }
.revenue .menu .item {font-size: 34px;}
.revenue .percent { font-size: 56px; }
.revenue .label,.revenue .value .sub {font-size: 24px;}
.revenue .value { font-size: 47px; }
.map-container .card-row, .map-container .portfolio-row {font-size: 35px;}
.map-container .info-card {width: 500px;}
#backlog .v-tab-btn {font-size: 43px;}
#backlog .pct-label {font-size: 26px;max-width: 255px;}
.management-review .accordion-button {font-size: 40px;}
.management-review .MoreContent {padding: 40px 60px;}
.management-review .MoreContent h3 {font-size: 44px;}
.finance-section .finance-menu .menu-item { font-size: 34px; }  
.finance-section .finance-table th { font-size: 52px; }
.finance-section .finance-table td { font-size: 38px; }
#WhyInvestment .edge-card {height: 730px;}
#WhyInvestment .edge-card h4 {font-size: 30px;}
#WhyInvestment .edge-card .edge-number {font-size: 46px;}
#WhyInvestment .edge-card span {font-size: 26px;}
#ShareholderInformation {padding-bottom: 240px;}
#ShareholderInformation .container {transform: scale(1.1);}
#ShareholderInformation .holding-head h3,#ShareholderInformation h2 {font-size: 34px;}
#ShareholderInformation .holding-row,#ShareholderInformation .share-card h4 { font-size: 18px; }
#ShareholderInformation .shareholderBaseGraphContainer h2 span {font-size: 25px;}
#ShareholderInformation .value {font-size: 54px;}
#ShareholderInformation .share-item,#ShareholderInformation .label {line-height: 22px;font-size: 18px;width: 322px;}
    #land .landmarkLHS p {
        font-size: 42px;
        line-height: 50px;
    }
#land .landmarkLHS h6 {font-size: 40px;}
#land .landmarkLHS h3 {font-size: 50px;}
#land .landmarkLHS h5 {font-size: 30px;}
#land .arch__left .arch__info {max-width: 580px;}
#land .landmarkLHS .location,.downloads .download-item span,.hero-footer__bottom-bar .copyright {font-size: 40px;}
#Digital .kpi-item p {font-size: 32px;}
#Digital .digital-bottom .footnote {font-size: 14px;}
.hero-footer__bottom-bar .socials span {font-size: 22px;}

.toggle-thumb {width: 22px;
    height: 22px;}

.community-section .community-left-wrap .icon-line {width: 108px;}  
.community-section .MoreContent { height: auto; overflow: auto; }
#MessageFromChairman .message-slider .message-right .image-wrap .info-box,#MessageFromChairman .message-slider .message-right .image-wrap .cta-box {width: 420px;}
#MessageFromChairman .message-slider .message-right .image-wrap .cta-box .thumbImg img {width: 260px;}
#MessageFromChairman .message-slider .message-right .image-wrap .cta-box .thumbImg {   
    left: -260px;
    top: -79px;}
#PerfromanceHilight .ph-note p {font-size: 21px;}
#PerfromanceHilight .ph-item h2 small {font-size: 48px;}
#PerfromanceHilight .currency img {
    width: 36px;
}

#ThematicStories .card {height: 874px;}
#ThematicStories .card-hover h4 {font-size: 46px;}
#businessSection .rs-head-title {font-size: 48px;}
#businessSection .rs-head,#businessSection .im-subtitle {font-size: 40px;}
#businessSection .rs-text,#businessSection .im-body,#businessSection .im-tag,#businessSection .sv-desc {font-size: 31px;}
#businessSection .im-grid {gap: 0 0px;}
#businessSection .im-icon {width: 74px;height: 74px;}
#businessSection .oval,#businessSection .im-grid,#businessSection .sv-slide {border-radius: 80px;}
#businessSection .sv-name {font-size: 50px;}

#businessSection .sv-slide {
    height: 680px;
}

.revenue .rev-right .title {font-size:45px;}
.revenue .keyBrands .brands-list {justify-content: right;}
.revenue .revenue-container {grid-template-columns: 360px 1fr 1fr;}
.map-container .card-header .dot {width: 24px;height: 24px;}
.management-review .accordion-button {padding: 35px 24px;}
#backlog .v-tabs {width: 370px;}
#backlog .chart-wrap {height: 345px;}
#backlog .card-chart {height: 450px;}

#trafrom .swiper-button-prev.horizontal-scoll-wrapper-prev, #trafrom .swiper-button-next.horizontal-scoll-wrapper-next {width: 98px;
    height: 98px;}

#trafrom .swiper-button-next:after, #trafrom .swiper-button-prev:after {
    font-size: 50px;
}
#trafrom .firstSlide .container .common-ttle2 {
    font-size: 170px;
    padding-bottom: 220px;
}
#Digital .kpi-item h2 {font-size: 78px;}
.downloads .report-card .report-overlay span {font-size: 36px;}
#PerfromanceHilight .ph-grid {gap: 13px 30px;}
}

@media (min-width: 2880px) {
#YearInReview .card-wrapper:last-of-type {
    height: 45vh;

}

.nav-logo img {max-width: 70px;}
.energy-label,.report-label,.menu-label {font-size: 24px;}
.lang-switch {font-size: 22px;}
.navbar .nav-search .search-icon svg,.download-icon svg { width: 30px !important; height: 30px !important; }
.hamburger {width: 26px;}
.community-section .community-left-wrap .community-left { margin: auto; }
.common-ttle, .common-ttle2 {font-size: 70px;}
.main-text {font-size: 34px;}
p,#VisionMission .values-grid span,#VisionMission .vision-card h6,#VisionMission .strength-list li,#VisionMission .strength-list span,#MessageFromChairman .Meggagedesc,#MessageFromChairman .message-slider .message-right .image-wrap .cta-box h6,#YearInReview #awards .awardsCards .awardsCardsRight p,#businessSection .nav-tabs .nav-link,#businessSection .rar-title,.revenue .keyBrands h5,.region-map-section .Meggagedesc,.map-container .card-header,#backlog .Meggagedesc,#backlog .chart-title,.management-review .MoreContent p,#WhyInvestment .Meggagedesc,#ShareholderInformation .shareholderBaseGraphContainer h2,#Digital .digital-section .digital-content .Meggagedesc,#Downloads .Meggagedesc,.hero-footer__contact-item span { font-size: 28px; }
.sub-ttle,#PerfromanceHilight .ph-tab {font-size: 36px;}
#VisionMission .values-grid img { width: 40px; }
#VisionMission .vision-card {height: 440px;}
#VisionMission .strength-list span {line-height: 26px; width: 32px;
    height: 33px;}

#MessageFromChairman .quote .common-ttle,#YearInReview #awards .awardsCards .awardsCardsRight h2 {font-size: 46px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box h5 {font-size: 26px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box span {font-size: 22px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box {padding: 13px;}
#PerfromanceHilight .ph-tab .label .fin-icon img { width: 40px; }
#PerfromanceHilight .ph-icon, #PerfromanceHilight .ph-tab .icon {width: 45px;
    height: 45px; font-size: 52px;}
#PerfromanceHilight .ph-item h2 {font-size: 60px;}
.advancingSlide {transform: scale(1.5);}
#YearInReview .quarter-section .card-top h5,#YearInReview #signature .project-card h5{ font-size: 22px; }
#YearInReview .quarter-section .card-text {font-size: 19px;
    line-height: 1.1;
    margin-bottom: 22px;
    }
    .read-btn {font-size: 19px;padding: 5px 14px;}
    .popup-overlay.active .popup-box {
    transform: translateY(0) scale(1.5);
}
.popup-item {font-size: 18px;}
#YearInReview #signature {
    transform: scale(1.22);
}
#ThematicStories .card {height: 784px;}
#YearInReview #signature .project-card p { line-height: 33px; }
#YearInReview #awards .awardsCards .awardsCardsRight h6 {font-size: 28px;}
#YearInReview #awards {padding: 40px 0;}
#YearInReview #awards .swiperControl {bottom: 28px;right:200px;}
#YearInReview #awards .swiperControl .swiper-pagination {line-height: 17px;font-size: 28px;}
#YearInReview #awards .awardsCards .awardsCardsRight p {line-height: 42px;}
#ThematicStories .connectivity-grid {transform: scale(1.2); margin-top: 130px; }
#ThematicStories .card-hover p { font-size: 22px; }
#ThematicStories .download-btn { font-size: 18px; }
#businessSection .rar-item {font-size: 26px;}
.revenue .rev-right .desc {font-size: 22px;}
#backlogChart .Meggagedesc { font-size: 30px; }
.revenue .menu .item {font-size: 24px;}
.revenue .percent { font-size: 56px; }
.revenue .label,.revenue .value .sub {font-size: 24px;}
.revenue .value { font-size: 47px; }
.map-container .card-row, .map-container .portfolio-row {font-size: 22px;}
.map-container .info-card {width: 340px;}
#backlog .v-tab-btn {font-size: 22px;}
#backlog .pct-label {font-size: 26px;max-width: 255px;}
.management-review .accordion-button {font-size: 30px;}
.management-review .MoreContent {padding: 40px 60px;}
.management-review .MoreContent h3 {font-size: 44px;}
.finance-section .finance-menu .menu-item { font-size: 22px; }  
.finance-section .finance-table th { font-size: 32px; }
.finance-section .finance-table td { font-size: 28px; }
#WhyInvestment .edge-card {height: 680px;}
#WhyInvestment .edge-card h4 {font-size: 30px;}
#WhyInvestment .edge-card .edge-number {font-size: 46px;}
#WhyInvestment .edge-card span {font-size: 16px;}
#ShareholderInformation {padding-bottom: 240px;}
#ShareholderInformation .container {transform: scale(1.1);}
#ShareholderInformation .holding-head h3,#ShareholderInformation h2 {font-size: 24px;}
#ShareholderInformation .holding-row,#ShareholderInformation .share-card h4 { font-size: 18px; }
#ShareholderInformation .shareholderBaseGraphContainer h2 span {font-size: 18px;}
#ShareholderInformation .value {font-size: 36px;}
#ShareholderInformation .share-item,#ShareholderInformation .label {line-height: 22px;font-size: 18px;}
#land .landmarkLHS p { font-size: 24px; line-height: 30px; }
#land .landmarkLHS h6 {font-size: 30px;}
#land .landmarkLHS .location,.downloads .download-item span,.hero-footer__bottom-bar .copyright {font-size: 24px;}
#Digital .kpi-item p {font-size: 22px;}
#Digital .digital-bottom .footnote {font-size: 14px;}
.hero-footer__bottom-bar .socials span {font-size: 22px;}

#CommunitySection .MoreContent {height: 720px;}

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1700px;
    }
#YearInReview .quarter-section .quarter-card {width: 390px;}

#businessSection .rs-head-title {font-size: 32px;}
#businessSection .rs-head,#businessSection .rs-text {font-size: 22px;}
#businessSection .im-subtitle,#businessSection .sv-name {font-size: 30px;}
#businessSection .im-body,#businessSection .sv-desc {font-size: 24px;}
#businessSection .im-tag {font-size: 20px;}
#businessSection .im-grid {gap: 0 0px;}
#businessSection .sv-slide {height: 630px;}
}

@media (min-width: 1921px) and (max-width: 2560px) {
#YearInReview .card-wrapper:last-of-type {
    height: 72vh;

}

.nav-logo img {max-width: 70px;}
.energy-label,.report-label,.menu-label {font-size: 24px;}
.lang-switch {font-size: 22px;}
.navbar .nav-search .search-icon svg,.download-icon svg { width: 30px !important; height: 30px !important; }
.hamburger {width: 26px;}
.community-section .community-left-wrap .community-left { margin: auto; }
.common-ttle, .common-ttle2 {font-size: 70px;}
.main-text {font-size: 34px;}
p,#VisionMission .values-grid span,#VisionMission .vision-card h6,#VisionMission .strength-list li,#VisionMission .strength-list span,#MessageFromChairman .Meggagedesc,#MessageFromChairman .message-slider .message-right .image-wrap .cta-box h6,#YearInReview #awards .awardsCards .awardsCardsRight p,#businessSection .nav-tabs .nav-link,#businessSection .rar-title,.revenue .keyBrands h5,.region-map-section .Meggagedesc,.map-container .card-header,#backlog .Meggagedesc,#backlog .chart-title,.management-review .MoreContent p,#WhyInvestment .Meggagedesc,#ShareholderInformation .shareholderBaseGraphContainer h2,#Digital .digital-section .digital-content .Meggagedesc,#Downloads .Meggagedesc,.hero-footer__contact-item span { font-size: 28px; }
.sub-ttle,#PerfromanceHilight .ph-tab {font-size: 36px;}
#VisionMission .values-grid img { width: 40px; }
#VisionMission .vision-card {height: 440px;}
#VisionMission .strength-list span {line-height: 26px; width: 32px;
    height: 33px;}

#MessageFromChairman .quote .common-ttle,#YearInReview #awards .awardsCards .awardsCardsRight h2 {font-size: 46px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box h5 {font-size: 26px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box span {font-size: 22px;}
#MessageFromChairman .message-slider .message-right .image-wrap .info-box {padding: 13px;}
#PerfromanceHilight .ph-tab .label .fin-icon img { width: 40px; }
#PerfromanceHilight .ph-icon, #PerfromanceHilight .ph-tab .icon {width: 45px;
    height: 45px; font-size: 52px;}
#PerfromanceHilight .ph-item h2 {font-size: 60px;}
.advancingSlide {transform: scale(1.5);}
#YearInReview .quarter-section .card-top h5,#YearInReview #signature .project-card h5{ font-size: 22px; }
#YearInReview .quarter-section .card-text {font-size: 19px;
    line-height: 1.1;
    margin-bottom: 22px;
    }
    .read-btn {font-size: 19px;padding: 5px 14px;}
    .popup-overlay.active .popup-box {
    transform: translateY(0) scale(1.5);
}
.popup-item {font-size: 18px;}
#YearInReview #signature {
    transform: scale(1.22);
}
#ThematicStories .card {height: 784px;}
#YearInReview #signature .project-card p { line-height: 33px; }
#YearInReview #awards .awardsCards .awardsCardsRight h6 {font-size: 28px;}
#YearInReview #awards {padding: 40px 0;}
#YearInReview #awards .swiperControl {bottom: 28px;right:200px;}
#YearInReview #awards .swiperControl .swiper-pagination {line-height: 17px;font-size: 28px;}
#YearInReview #awards .awardsCards .awardsCardsRight p {line-height: 42px;}
#ThematicStories .connectivity-grid {transform: scale(1.2); margin-top: 130px; }
#ThematicStories .card-hover p { font-size: 22px; }
#ThematicStories .download-btn { font-size: 18px; }
#businessSection .rar-item {font-size: 26px;}
.revenue .rev-right .desc {font-size: 22px;}
#backlogChart .Meggagedesc { font-size: 30px; }
.revenue .menu .item {font-size: 24px;}
.revenue .percent { font-size: 56px; }
.revenue .label,.revenue .value .sub {font-size: 24px;}
.revenue .value { font-size: 47px; }
.map-container .card-row, .map-container .portfolio-row {font-size: 22px;}
.map-container .info-card {width: 340px;}
#backlog .v-tab-btn {font-size: 22px;}
#backlog .pct-label {font-size: 26px;max-width: 255px;}
.management-review .accordion-button {font-size: 30px;}
.management-review .MoreContent {padding: 40px 60px;}
.management-review .MoreContent h3 {font-size: 44px;}
.finance-section .finance-menu .menu-item { font-size: 22px; }  
.finance-section .finance-table th { font-size: 32px; }
.finance-section .finance-table td { font-size: 28px; }
#WhyInvestment .edge-card {height: 680px;}
#WhyInvestment .edge-card h4 {font-size: 30px;}
#WhyInvestment .edge-card .edge-number {font-size: 46px;}
#WhyInvestment .edge-card span {font-size: 16px;}
#ShareholderInformation {padding-bottom: 240px;}
#ShareholderInformation .container {transform: scale(1.1);}
#ShareholderInformation .holding-head h3,#ShareholderInformation h2 {font-size: 24px;}
#ShareholderInformation .holding-row,#ShareholderInformation .share-card h4 { font-size: 18px; }
#ShareholderInformation .shareholderBaseGraphContainer h2 span {font-size: 18px;}
#ShareholderInformation .value {font-size: 36px;}
#ShareholderInformation .share-item,#ShareholderInformation .label {line-height: 22px;font-size: 18px;}
#land .landmarkLHS p { font-size: 24px; line-height: 30px; }
#land .landmarkLHS h6 {font-size: 30px;}
#land .landmarkLHS .location,.downloads .download-item span,.hero-footer__bottom-bar .copyright {font-size: 24px;}
#Digital .kpi-item p {font-size: 22px;}
#Digital .digital-bottom .footnote {font-size: 14px;}
.hero-footer__bottom-bar .socials span {font-size: 22px;}

#CommunitySection .MoreContent {height: 720px;}

    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1700px;
    }
#YearInReview .quarter-section .quarter-card {width: 390px;}

#businessSection .rs-head-title {font-size: 32px;}
#businessSection .rs-head,#businessSection .rs-text {font-size: 22px;}
#businessSection .im-subtitle,#businessSection .sv-name {font-size: 30px;}
#businessSection .im-body,#businessSection .sv-desc {font-size: 24px;}
#businessSection .im-tag {font-size: 20px;}
#businessSection .im-grid {gap: 0 0px;}
#businessSection .sv-slide {height: 630px;}
}

@media (min-width: 1600px) and (max-width: 1919px) {

.common-ttle{ font-size: 46px;}
.common-desc{ font-size: 20px;}
.common-cta{ font-size: 15px;}
}

/* 
@media  screen and (max-width: 1440px) {

.common-ttle{ font-size: 46px;}
.common-desc{ font-size: 20px;}
.common-cta{ font-size: 15px;}
#value-creation .creationRight {padding: 40px;}


}
*/
@media only screen and (min-width: 1400px) and (max-width: 1599px) {
.community-section .community-left-wrap .community-left {padding-top: 60px;}
.community-section .community-left-wrap .MoreContent {height: 400px;}

#VisionMission {
    padding-bottom: 80px;
}
#VisionMission .vision-slider {margin-top: -180px;}
#VisionMission .vision-card {padding: 30px 30px;height: 320px;}
#YearInReview .quarter-section .container {padding-top: 130px;justify-content: start;}
#YearInReview #signature { padding-top: 40px; }
#YearInReview #signature .common-ttle {
    padding-bottom: 20px;
}
#LandmarkProjects .common-ttle {margin-bottom: 50px;}
#LandmarkProjects .landmarkLHS .location {font-size: 14px;}
.community-section .community-left-wrap .community-left {width: 750px;}

#trafrom .swiper-button-prev.horizontal-scoll-wrapper-prev, #trafrom .swiper-button-next.horizontal-scoll-wrapper-next {width: 58px;
    height: 58px;}

}

@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .community-section .community-left-wrap .community-left {padding-top: 40px;}
.community-section .community-left-wrap .MoreContent {height: 400px;}

#VisionMission {
    padding-bottom: 80px;
}
#VisionMission .vision-slider {margin-top: -180px;}
#VisionMission .vision-card {padding: 22px 22px;height: 320px;}
#YearInReview .quarter-section .container {padding-top: 90px;justify-content: start;}
#YearInReview #signature { padding-top: 40px; }
#YearInReview #signature .common-ttle {
    padding-bottom: 20px;
}
#LandmarkProjects .common-ttle {margin-bottom: 50px;}
#LandmarkProjects .landmarkLHS .location {font-size: 14px;}
#VisionMission .vision-card p {line-height: 1.4;}
#VisionMission .strength-list li {margin-bottom: 7px;}
#MessageFromChairman .MoreContent {padding-bottom: 30px;}
#PerfromanceHilight .ph-content {padding: 40px 30px;}
#PerfromanceHilight .ph-grid {
    display: grid;
    gap: 40px 30px;
    grid-template-columns: 380px 320px;
}
#PerfromanceHilight .ph-tab {width: 80px;}
#YearInReview .quarter-section .quarter-card { width: 100%;padding: 16px; height: 250px; }
#YearInReview .quarter-section .card-text {line-height: 1.5;font-size: 13px;}
#YearInReview #awards {padding-top: 50px;}
#ThematicStories .card-default h4,#ThematicStories .card-hover h4 {font-size: 28px;}
.map-container .stat-item .percent {font-size: 46px;}
.map-container .stat-item .label {font-size: 15px;}
.map-container .stat-item {margin-bottom: 10px;}
.management-review .MoreContent {
    padding: 30px 80px;
}
.management-review .MoreContent {height: 450px;}
#WhyInvestment .edge-card {padding: 19px;}
#WhyInvestment .edge-card p {line-height: 1.5;}
#WhyInvestment .Meggagedesc {font-size: 18px;}
#ShareholderInformation .value {font-size: 22px;}
#ShareholderInformation .label {font-size: 11px;}
#ShareholderInformation .share-item {min-width: 130px;}
#ShareholderInformation .shareholding-sec {height: 258px;}
#land .landmarkLHS p {font-size: 15px;line-height: 1.4;}
#land .landmarkLHS .location {font-size: 13px;}
#land .landmarkLHS h5 {font-size: 18px;}
#land .landmarkLHS h3 {font-size: 37px;}
#trafrom .esgContent {
    height: 410px;
}

.downloads .download-grid {
    gap: 9px 40px;
}
/* #land .arch__right .img-wrapper img {height: 90%;} */
#MessageFromChairman .MoreContent {
    height: 460px;
}
p {
    font-size: 14px;
    line-height: 1.4;
    font-weight: normal;
}
#trafrom .esgContent .tag {font-size: 10px;}
.community-section .community-left-wrap .community-left {width: 630px;}
}


/* 3. scale and layout setting at 150% */
@media (resolution: 1.5dppx) {

}



/* 4. scale and layout setting at 175% */
@media (resolution: 1.75dppx) {
}

/* Medium */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {

.row {
margin-left: 0px;
margin-right: 0px;
}


#banner .bannerBg img { height: 800px; object-fit: cover; }

.mob-energy {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex: 0 0 auto;
  padding-left: 10px;
}

.mob-energy .toggle {
  width: 34px;
  height: 18px;
}


/* home */
#LandmarkProjects {overflow: hidden; padding: 30px 0px;}  
#LandmarkProjects .wrapper { position: relative;  }
#LandmarkProjects .swiper-pagination {  bottom: 20px;}
#LandmarkProjects .swiper-pagination-bullet { background-color: #fff; }
#LandmarkProjects .item { display: block; position: relative; box-shadow: none; }
#LandmarkProjects .list { justify-content: start; }
#LandmarkProjects .bigTitle {font-size: 50px;padding-left: 0px; margin-bottom: 20px; text-align: center; opacity: 0.15; letter-spacing: -1.4px; }
#LandmarkProjects .ResponsibleCards .ResponsibleLeft {transform: translate(0px, 0px);}
#LandmarkProjects .item:nth-child(even) .ResponsibleCards .ResponsibleLeft {transform: translate(0px, 0px);}
#LandmarkProjects .ResponsibleCards .ResponsibleContent,#LandmarkProjects .item:nth-child(even) .ResponsibleCards .ResponsibleContent {
background-color: #fff;
padding: 20px;
padding-left: 20px;
}
#LandmarkProjects .ResponsibleCards .ResponsibleContent p {
font-size: 20px;
line-height: 1.3;
}

#LandmarkProjects .ResponsibleCards .ResponsibleLeft .ResponsibleTitle {
position: absolute;
left: 20px;
bottom: 20px;
}

#LandmarkProjects .page-title2,#LandmarkProjects .page-title {
font-size: 32px;
}

#LandmarkProjects .wrapper {
height: auto;
}

#LandmarkProjects .swiper-pagination {
bottom: 0px;
position: relative;
}
#LandmarkProjects .item { margin-top: 0px; }

.mob-center img {height: 60px;}
.mob-navbar {padding: 38px 18px;}
/* #banner {height: 75vh;} */
#banner .bannerScroll {right: 12px;}
#banner .container h1 {font-size: 40px;margin-bottom: 30px; }
.community-section .community-left-wrap .community-left { width: 100%; padding: 28px 20px; }
.common-ttle, .common-ttle2 {letter-spacing: 0.7px;font-size: 36px;}
.community-section .community-left-wrap .icon-line {
    margin: 15px 0;
    margin-bottom: 25px;
    width: 78px;
}
.community-section .community-left-wrap .MoreContent {
    height: 280px;
    padding-bottom: 0px;
}
.main-text {margin-bottom: 6px;}

#AboutUs {
    background: #fff;
    padding: 50px 0px;
}

#VisionMission {padding-bottom: 40px;}
#VisionMission .VisionMissionImg img { width: 100%; height: 400px; object-fit: cover; }
#VisionMission .vision-slider {margin-top: -100px;padding: 20px;}
#VisionMission .swiper { padding-left: 0px; }
#VisionMission .vision-card {padding: 20px;}
#VisionMission .vision-card h6 {margin-bottom: 25px;}
#VisionMission .vision-card {height: 310px;  }
#VisionMission .swiper-pagination {bottom: inherit;
        right: inherit;
        width: fit-content;
        top: 15px;
        left: 20px; }
#VisionMission .swiper-pagination-clickable .swiper-pagination-bullet { background-color: #000; }

#MessageFromChairman .message-slider .message-left {
    padding-top: 50px;
}

#MessageFromChairman .MoreContent {padding-bottom: 30px;margin-bottom: 20px; height: 720px; }
#MessageFromChairman .scroll-btn {margin-bottom: 60px;}
#MessageFromChairman .message-slider .message-right .image-wrap {
    position: relative;
    padding-top: 0px;
}
#MessageFromChairman .message-slider .message-right .image-wrap .cta-box .thumbImg { display: none; }
#MessageFromChairman .message-slider .message-right .image-wrap .info-box,#MessageFromChairman .message-slider .message-right .image-wrap .cta-box { position: relative; bottom: 0px; }
#MessageFromChairman {padding-bottom: 50px;}

#PerfromanceHilight {padding: 50px 0px;}
#PerfromanceHilight .ph-tab {width: 100%;writing-mode: inherit;}
#PerfromanceHilight .ph-tab .label {writing-mode: inherit;
        font-size: 16px;
        letter-spacing: 0.6px;
        line-height: 18px;gap: 0px 7px;}
#PerfromanceHilight .ph-panel.active .icon {
    transform: translateX(-20%) rotate(0deg);
}
#PerfromanceHilight .ph-icon, #PerfromanceHilight .ph-tab .icon { left: inherit; right: 7px; width: 28px;
    height: 28px; }

#YearInReview {padding: 50px 0px;padding-bottom: 0px;}
#YearInReview .common-ttle {
    padding-bottom: 30px;
}
#YearInReview .card-wrapper {padding-top: 0;width: 100%;margin-bottom: 0px;}
#YearInReview .card { height: 100%;     display: block; }

#YearInReview .advancingPic img {width: 100%;
    height: 78vh;
    overflow: hidden;
    object-fit: cover;}
    #YearInReview .quarter-section .container {justify-content: start; padding-top: 50px; }
    #YearInReview .quarter-section .quarter-card { width: 100%;height: 300px; }
    #YearInReview .advancingSlide { margin-top: 30px; }


    #YearInReview .swiper-pagination {bottom: inherit;
    right: 20px;
    width: fit-content;
    top: 29px; left: inherit; }
#YearInReview .swiper-pagination-clickable .swiper-pagination-bullet { background-color: #000; }


#YearInReview #signature .nav-arrows {
    top: 0px;
    transform: scale(1);
}
#YearInReview #signature .project-card {padding-bottom: 30px;}
#YearInReview #awards {padding: 50px 0;}
#YearInReview .col-12 { padding: 0px; }
#YearInReview #awards .swiperControl {transform: scale(0.8);
        top: 59px;
        height: fit-content;
        bottom: inherit;}
#YearInReview #awards .common-ttle {
    padding-bottom: 60px;
}
#YearInReview .quarter-section .swiper-pagination {top: 10px;
        right: inherit;
        left: 10px;}
#YearInReview #awards .swiper-pagination {top:-11px;}
#YearInReview #awards .awardsCards .awardsCardsRight { padding: 0px 30px; }
#YearInReview #awards .awardsCards .awardsCardsRight h2 {font-size: 26px;margin-bottom: 14px;}
#YearInReview #awards .awardsCards .awardsCardsRight h6 {font-size: 18px;}
#YearInReview .card-wrapper:last-of-type { height: auto; }
#ThematicStories {padding: 30px 0px;padding-top: 50px;}
#ThematicStories .connectivity-grid {display: block;}
#ThematicStories .card-hover {transform: translateY(0px);
        background-color: #a0674a;
        opacity: 1;
        height: 280px;
        bottom: 0px;
        top: inherit; position: absolute; }
#ThematicStories .card-default { display: none; }
#ThematicStories .card { height: 100%; margin-bottom: 20px; }
#ThematicStories .card-hover h4 {font-size: 26px;}
#ThematicStories .card img {height: 460px; overflow: hidden; }
#ThematicStories .card-hover p { border-bottom: none; }
#businessSection .common-ttle {
    padding-bottom: 60px;
}

#businessSection .nav-tabs {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    #businessSection .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    #businessSection .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    #businessSection .nav-tabs .nav-link {padding: 12px 12px;font-size: 14px;letter-spacing: -0.2px;}
#businessSection .rar { padding: 0px; margin-top: 0px; }
#businessSection .rar-grid { display: block; }
#businessSection .rar-section {padding: 20px 10px;}
#businessSection .rar-section:nth-child(even) {
    padding-left: 0px;
    padding-right: 0;
}
#businessSection {padding-top: 40px;}
#businessSection .oval-wrap {margin-top: 10px;}
#businessSection .oval {padding: 10px;}
#businessSection .im-grid {padding: 17px;border-radius: 30px;}
#businessSection .im-left {margin-top: 11px;margin-left: 0px;}
#businessSection .im-right {padding-right:0px;}
#businessSection .sv-slide { height: auto; padding: 20px; }
#businessSection .oval { min-height:auto ; }
#businessSection .sv-item { display: block; }
#businessSection .sv-slide { border-radius: 30px; padding-bottom: 40px; }
#businessSection .oval-dots {
    position: relative;
    bottom: 20px;
    transform: translateX(-50%);
    width: fit-content;
}
#businessSection .dot {
    width: 12px;
    height: 12px;
}
.revenue {padding: 50px 0;}
.revenue .revenue-container { display: block; }
.revenue .Meggagedesc { margin-top: 20px; }
.revenue .col-12 { padding: 0px; }
.revenue .rev-center { margin-top: 20px; }
.revenue .percent {font-size: 26px;line-height: 1;}
.revenue .donut-text {transform: translate(-50%, -90%);} 
.revenue .value {font-size: 36px;}
.revenue .rev-right-content {padding-top: 22px;}
.revenue .brand-item img {
        height: 100%;
        width: 100%;
    }
.region-map-section { height: auto; padding: 50px 10px; }
.region-map-section .col-12 { padding:0px; }
.region-map-section .Meggagedesc { margin-top: 20px; }
.Meggagedesc { font-size: 18px !important; }
.map-container {padding-top: 40px;
    margin-top: 30px;gap: 13px;}
.region-map-section .regionLeftNos { display: flex;
    flex-wrap: wrap;
    gap: 2px; }

    .regionLeftNos .stat-item {
    flex: 1 1 100px; /* auto adjust width */
}

.map-container .region-stats .stat-item .percent {
        font-size: 36px;
    }
    .map-container .stat-item .label {
        font-size: 11px;
    }
    .map-container .stat-item {padding: 9px 12px;border: none;}
    .map-container .stat-item.active {
    background-color: #f1f1f1;
}   
.map-container .card-row, .map-container .portfolio-row {
        padding: 10px 14px;
    }
    .map-container .card-header {letter-spacing: 0.8px;}
.sub-ttle {margin-bottom: 18px;}

#backlog {
    padding: 50px 0px;
}
#backlog .Meggagedesc { margin-top: 30px; }
#backlog .card-chart {margin-top: 20px;}
#backlog .card-chart { display: block; }

#backlog .v-tabs { display: flex; width: 100%; flex-wrap: wrap; flex-direction: inherit; }
#backlog .v-tab-btn {width: 40%;
        padding: 10px 13px;}
#backlog .v-panels { padding: 0px; }
#backlog .pct-num {font-size: 42px;min-width: 80px;}
#backlog .chart-wrap { height: auto; }
#backlog .pct-label {max-width: 92px;}

.management-review {
    background: #fff;
    padding: 50px 0px;
}
.management-review .MoreContent {
    overflow-y: scroll;
    height: 500px;
   padding: 17px;
}
.management-review .img-wrap {
    height: auto;
}
.management-review .MoreContent h3 {font-size: 30px;}
.management-review .scroll-btn {margin-bottom: 50px;}
.management-review .icon-circle {width: 28px;
    height: 28px;}
    .management-review .icon-circle::before{width: 11px;}
    .management-review .accordion-button {font-size: 16px;
        letter-spacing:0.3px;
        line-height: 18px;}
        .management-review .accordion-button {padding: 22px 14px;}


        .finance-section {
    padding: 50px 0px;
}


.finance-menu {
    display: flex;
    gap: 12px;
}
 .finance-menu {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 28px;
    }

    .finance-menu::-webkit-scrollbar {
        display: none;
    }

    .finance-menu .menu-item {
        flex: 0 0 auto;
    }
    .finance-section .col-12 { padding: 0px; }
    .finance-section .kpi {font-size: 42px;}
    .view-toggle {transform: scale(0.8);}
    .finance-section .finance-menu .menu-item { background-color: #fff; }
    .finance-section .finance-menu .active {background: #9c6a4f;
    color: #fff;}


.finance-section .common-ttle {
    margin-bottom: 30px;
}
#WhyInvestment {
    padding: 50px 0px;
    overflow: hidden;
}
#WhyInvestment .Meggagedesc { margin-top: 30px; }
#WhyInvestment .edge-card { height: 520px; }
#WhyInvestment .swiper-horizontal>.swiper-pagination-progressbar, #WhyInvestment .swiper-pagination-progressbar.swiper-pagination-horizontal {width: 57%;}
#ShareholderInformation {padding: 50px 0px;}
#ShareholderInformation .common-ttle {
    margin-bottom: 30px;
}

.shareholderGraph { width: 99%; overflow-x: scroll;}
.shareholderGraph img { width: 1200px; }
.shareholderBaseGraphContainer .col-lg-9 { padding: 0px; }
#ShareholderInformation .share-item {
        width: 48%;
        max-width: inherit;
        padding-right: 12px;
    }
    #ShareholderInformation h2 {margin-bottom: 15px;}
    #land .common-ttle {
    padding-top: 50px;
}
#Digital .digital-section {position: relative;background: #9c6a4f;}
#Digital .digital-section .digital-content {padding-top: 40px;margin-bottom: 20px;}
#Digital .digital-bottom {margin-bottom: 30px;}
#Digital .kpi-item h2 span {
    font-size: 25px;
}
#Digital .digital-bottom .footnote {bottom: 0px;
    right: 0px; position: relative; }
    #trafrom .card,#trafrom .firstSlide .container { display: block; }
    .downloads .download-grid { display: block; }  
    .downloads {padding: 50px 0;}
    #trafrom .firstSlide .container .common-ttle2 {font-size: 45px;}
    #trafrom .firstSlide .container { position: relative; background: #404040; padding-top: 30px; height: auto; max-width: 100%; }
#trafrom .esgImg img { width: 100%; height: 300px; overflow: hidden; object-fit: cover; }
#trafrom .esgContent {
    padding: 40px 20px;
    height: auto;
}
#trafrom .esgContent .esg-group { margin-bottom: 20px; }

#trafrom .esgContent .tag {font-size: 10px;padding: 5px;}
p { line-height: 1.5; }
    #trafrom .trafromPix img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        overflow: hidden;
    }
   #trafrom  .swiper-pagination-bullet { background-color: #000; }
   #trafrom .esgContent p {padding-bottom: 15px;}
   .downloads .download-item {padding: 15px 5px;}
   .downloads .report-card .report-overlay { position: relative; padding: 17px 12px; }
   .hero-footer__tagline {
        top: 65px;
        left: 20px;
    }
    .hero-footer__logo {
        top: 65px;
        right: 20px;
    }
    .hero-footer__logo img {
        width: 55px;
    }

    .hero-footer .scrollRight {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
    width: 119px;
    height: 124px;
    margin: auto;
}
.hero-footer__contact-wrap {
        gap: 15px;
    }

    #land { overflow: hidden; padding-bottom: 70px; }
    #land .arch {flex-direction: inherit;}
    #land .common-ttle {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #land .swiper-pagination { position: relative; bottom: 20px; }
    #land .landmarkLHS { padding: 20px; }
    #Digital .digital-bg img { height: 550px; object-fit: cover; width: 100%; overflow: hidden; }
    .community-section .community-left-wrap .scroll-btn {margin-bottom: 33px;}

.popup-item {padding: 10px 0;line-height: 1.4;}
.popup-content {padding: 2px 14px;}
.popup-title p {
        font-size: 16px;
    }

    .popup-close {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 27px;
}
.popup-content {
        padding: 2px 14px;
        /* overflow: scroll;
        height: 480px; */
    }
    
    .message-right {padding-top: 40px;}
    .nav-menu-item {
        padding: 20px 0;
    }
    .nav-menu-item a { opacity: 1; }
    body.menu-open .close-icon svg {
    transform: translate(0px, -2px);
}
    .menu-footer {
        padding: 9px 28px 34px;
        justify-content: end;
    }
    .menu-grid {
        grid-template-columns: 1fr 1fr 1fr;
        padding: 22px 18px 24px;
        gap: 0;
    }
    .menu-col:not(:first-child) {
    padding-left: 18px;
}
.nav-menu-item a {font-size: 18px;}

/*         .menu-overlay {
        top: inherit;
        padding-top: 130px;
        padding-bottom: 0px;
    } */
      .menu-overlay {top: 0px;}
    .toggle-thumb {top: 3px;}
    .menu-grid {overflow-y: scroll; height: 85dvh;padding-top: 50px;}
    .menu-overlay {/* overflow: scroll;  */display: block; height: 100vh; padding-top: 60px;padding-bottom: 85px; }
    /* .menu-overlay {height: calc(100vh - 10px);}
 */
 .map-container { display: flex; }
 .map-container .region-stats {
        width: 100%;
        max-width: 100%;
    }
    .map-container .map-wrapper { width: 78%;margin: auto; }
    .map-container .info-card {
        width: 44%;
        max-width: 100%;
        margin-top: 30px;
    }
#land .swiper-pagination-bullet { background-color: var(--black); }

#trafrom .firstSlide .container .scrollRight { display: none; }

#ThematicStories .connectivity-grid {display: flex;
gap: 30px;
margin-top: 40px;
flex-wrap: wrap;align-items: stretch; /* equal height */}

#ThematicStories .card {
margin-bottom: 20px;
width: calc(49% - 7.5px);
flex: auto;height: 740px; /* stretch equal height */
}

    .revenue .rev-right {
        grid-column: span 1;
        text-align: center;
    }
    .revenue .revenue-container { display: grid; }

.management-review .img-wrap img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.landmark-slide .img-wrapper img {width: 100%;}

}


/* Small */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)   {

.row {
margin-left: 0px;
margin-right: 0px;
}


#banner .bannerBg img { height: 800px; object-fit: cover; }

.mob-energy {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex: 0 0 auto;
  padding-left: 10px;
}

.mob-energy .toggle {
  width: 34px;
  height: 18px;
}


/* home */
#LandmarkProjects {overflow: hidden; padding: 30px 0px;}  
#LandmarkProjects .wrapper { position: relative;  }
#LandmarkProjects .swiper-pagination {  bottom: 20px;}
#LandmarkProjects .swiper-pagination-bullet { background-color: #fff; }
#LandmarkProjects .item { display: block; position: relative; box-shadow: none; }
#LandmarkProjects .list { justify-content: start; }
#LandmarkProjects .bigTitle {font-size: 50px;padding-left: 0px; margin-bottom: 20px; text-align: center; opacity: 0.15; letter-spacing: -1.4px; }
#LandmarkProjects .ResponsibleCards .ResponsibleLeft {transform: translate(0px, 0px);}
#LandmarkProjects .item:nth-child(even) .ResponsibleCards .ResponsibleLeft {transform: translate(0px, 0px);}
#LandmarkProjects .ResponsibleCards .ResponsibleContent,#LandmarkProjects .item:nth-child(even) .ResponsibleCards .ResponsibleContent {
background-color: #fff;
padding: 20px;
padding-left: 20px;
}
#LandmarkProjects .ResponsibleCards .ResponsibleContent p {
font-size: 20px;
line-height: 1.3;
}

#LandmarkProjects .ResponsibleCards .ResponsibleLeft .ResponsibleTitle {
position: absolute;
left: 20px;
bottom: 20px;
}

#LandmarkProjects .page-title2,#LandmarkProjects .page-title {
font-size: 32px;
}

#LandmarkProjects .wrapper {
height: auto;
}

#LandmarkProjects .swiper-pagination {
bottom: 0px;
position: relative;
}
#LandmarkProjects .item { margin-top: 0px; }

.mob-center img {height: 60px;}
.mob-navbar {padding: 38px 18px;}
#banner {height: 75vh;}
/* #banner .bannerScroll {right: 12px;} */
#banner .container h1 {font-size: 40px; margin-bottom: 30px; }
.community-section .community-left-wrap .community-left { width: 100%; padding: 40px 20px; margin-left: 0px; }
.common-ttle, .common-ttle2 {letter-spacing: 0.7px;font-size: 36px;}

.community-section .community-left-wrap .MoreContent {
    height: fit-content;
        padding-bottom: 0px;
        overflow: auto;
}

#AboutUs {
    background: #fff;
    padding: 50px 0px;
}

#VisionMission {padding-bottom: 40px;}
#VisionMission .VisionMissionImg img { width: 100%; height: 400px; object-fit: cover; }
#VisionMission .vision-slider {margin-top: -100px;padding: 20px;}
#VisionMission .swiper { padding-left: 0px; }
#VisionMission .vision-card {padding: 20px;}
#VisionMission .vision-card h6 {margin-bottom: 25px;}
#VisionMission .vision-card {height: 310px;  }
#VisionMission .swiper-pagination {bottom: inherit;
    right: inherit;
    width: fit-content;
    top: 15px; left: 20px; }
#VisionMission .swiper-pagination-clickable .swiper-pagination-bullet { background-color: #000; }

#MessageFromChairman .message-slider .message-left {
    padding-top: 50px;
}

#MessageFromChairman .MoreContent {padding-bottom: 30px;margin-bottom: 20px; height: 720px; }
#MessageFromChairman .scroll-btn {margin-bottom: 60px;}
#MessageFromChairman .message-slider .message-right .image-wrap {
    position: relative;
    padding-top: 0px;
}
#MessageFromChairman .message-slider .message-right .image-wrap .cta-box .thumbImg { display: none; }
/* #MessageFromChairman .message-slider .message-right .image-wrap .info-box,#MessageFromChairman .message-slider .message-right .image-wrap .cta-box { position: relative; bottom: 0px; } */
#MessageFromChairman {padding-bottom: 50px;}

#PerfromanceHilight {padding: 50px 0px;}
#PerfromanceHilight .ph-tab {width: 100%;writing-mode: inherit;}
#PerfromanceHilight .ph-tab .label {writing-mode: inherit;
        font-size: 16px;
        letter-spacing: 0.6px;
        line-height: 18px;gap: 0px 7px;}
#PerfromanceHilight .ph-panel.active .icon {
    transform: translateX(-20%) rotate(0deg);
}
#PerfromanceHilight .ph-icon, #PerfromanceHilight .ph-tab .icon { left: inherit; right: 7px; width: 28px;
    height: 28px; }

#YearInReview {padding: 50px 0px;padding-bottom: 0px;}
#YearInReview .common-ttle {
    padding-bottom: 30px;
}
#YearInReview .card-wrapper {padding-top: 0;width: 100%;margin-bottom: 0px;}
#YearInReview .card { height: 100%;     display: block; }

#YearInReview .advancingPic img {width: 100%;
    height: 68vh;
    overflow: hidden;
    object-fit: cover;}
    #YearInReview .quarter-section .container {justify-content: start; padding-top: 50px; }
    #YearInReview .quarter-section .quarter-card { width: 100%;height: 300px; }
    #YearInReview .advancingSlide { margin-top: 30px; }


    #YearInReview .swiper-pagination {bottom: inherit;
    right: inherit;
    width: fit-content;
    top: 29px; left: 10px; }
#YearInReview .swiper-pagination-clickable .swiper-pagination-bullet { background-color: #000; }


#YearInReview #signature .nav-arrows {
    top: 0px;
    transform: scale(1);
}
#YearInReview #signature .project-card {padding-bottom: 30px;}
#YearInReview #awards {padding: 50px 0;}
#YearInReview .col-12 { padding: 0px; }
#YearInReview #awards .swiperControl {transform: scale(0.8);
        top: 59px;
        height: fit-content;
        bottom: inherit;
        right: inherit;}
#YearInReview #awards .common-ttle {
    padding-bottom: 60px;
}

#YearInReview .quarter-section .swiper-pagination {top:30px;}
#YearInReview #awards .swiper-pagination {top:-11px;}

#YearInReview #awards .awardsCards .awardsCardsRight { padding-left: 0px; padding-top: 20px; }
#YearInReview #awards .awardsCards .awardsCardsRight h2 {font-size: 26px;margin-bottom: 14px;}
#YearInReview #awards .awardsCards .awardsCardsRight h6 {font-size: 18px;}
#YearInReview .card-wrapper:last-of-type { height: auto; }
#ThematicStories {padding: 30px 0px;padding-top: 50px;}
#ThematicStories .connectivity-grid {display: block;}
#ThematicStories .card-hover { position: relative;transform: translateY(0px); background-color: #a0674a; opacity: 1; }
#ThematicStories .card-default { display: none; }
#ThematicStories .card { height: 100%; margin-bottom: 20px; }
#ThematicStories .card-hover h4 {font-size: 26px;}
#ThematicStories .card img {height: 460px; overflow: hidden; }
#ThematicStories .card-hover p { border-bottom: none; }
#businessSection .common-ttle {
    padding-bottom: 60px;
}

#businessSection .nav-tabs {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    #businessSection .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    #businessSection .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    #businessSection .nav-tabs .nav-link {padding: 12px 12px;font-size: 14px;letter-spacing: -0.2px;}
#businessSection .rar { padding: 0px; margin-top: 0px; }
#businessSection .rar-grid { display: block; }
#businessSection .rar-section {padding: 20px 10px;}
#businessSection .rar-section:nth-child(even) {
    padding-left: 0px;
    padding-right: 0;
}
#businessSection {padding-top: 40px;}
#businessSection .oval-wrap {margin-top: 10px;}
#businessSection .oval {padding: 10px;}
#businessSection .im-grid {padding: 17px;border-radius: 30px;}
#businessSection .im-left {margin-top: 11px;margin-left: 0px;}
#businessSection .im-right {padding-right:0px;}
#businessSection .sv-slide { height: auto; padding: 20px; }
#businessSection .oval { min-height:auto ; }
#businessSection .sv-item { display: block; }
#businessSection .sv-slide { border-radius: 30px; padding-bottom: 40px; }
#businessSection .oval-dots {
    position: relative;
    bottom: 20px;
    transform: translateX(-50%);
    width: fit-content;
}
#businessSection .dot {
    width: 12px;
    height: 12px;
}
.revenue {padding: 50px 0;}
.revenue .revenue-container { display: block; }
.revenue .Meggagedesc { margin-top: 20px; }
.revenue .col-12 { padding: 0px; }
.revenue .rev-center { margin-top: 20px; }
.revenue .percent {font-size: 26px;line-height: 1;}
.revenue .donut-text {transform: translate(-50%, -90%);} 
.revenue .value {font-size: 36px;}
.revenue .rev-right-content {padding-top: 22px;}
.revenue .brand-item img {
        height: 100%;
        width: 100%;
    }
.region-map-section { height: auto; padding: 50px 10px; }
.region-map-section .col-12 { padding:0px; }
.region-map-section .Meggagedesc { margin-top: 20px; }
.Meggagedesc { font-size: 18px !important; }
.map-container {padding-top: 40px;
    margin-top: 30px;gap: 13px;}
.region-map-section .regionLeftNos { display: flex;
    flex-wrap: wrap;
    gap: 2px; }

    .regionLeftNos .stat-item {
    flex: 1 1 100px; /* auto adjust width */
}

.map-container .region-stats .stat-item .percent {
        font-size: 36px;
    }
    .map-container .stat-item .label {
        font-size: 11px;
    }
    .map-container .stat-item {padding: 9px 12px;border: none;}
    .map-container .stat-item.active {
    background-color: #f1f1f1;
}   
.map-container .card-row, .map-container .portfolio-row {
        padding: 10px 14px;
    }
    .map-container .card-header {letter-spacing: 0.8px;}
.sub-ttle {margin-bottom: 18px;}

#backlog {
    padding: 50px 0px;
}
#backlog .Meggagedesc { margin-top: 30px; }
#backlog .card-chart {margin-top: 20px;}
#backlog .card-chart { display: block; }

#backlog .v-tabs { display: flex; width: 100%; flex-wrap: wrap; flex-direction: inherit; }
#backlog .v-tab-btn {width: 40%;
        padding: 10px 13px;}
#backlog .v-panels { padding: 0px; }
#backlog .pct-num {font-size: 42px;min-width: 80px;}
#backlog .chart-wrap { height: auto; }
#backlog .pct-label {max-width: 92px;}

.management-review {
    background: #fff;
    padding: 50px 0px;
}
.management-review .MoreContent {
    overflow-y: inherit;
    height: auto;
   padding: 17px;
}
.management-review .MoreContent h3 {font-size: 30px;}
.management-review .scroll-btn {margin-bottom: 50px;}
.management-review .icon-circle {width: 28px;
    height: 28px;}
    .management-review .icon-circle::before{width: 11px;}
    .management-review .accordion-button {font-size: 16px;
        letter-spacing:0.3px;
        line-height: 18px;}
        .management-review .accordion-button {padding: 22px 14px;}


        .finance-section {
    padding: 50px 0px;
}


.finance-menu {
    display: flex;
    gap: 12px;
}
 .finance-menu {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 28px;
    }

    .finance-menu::-webkit-scrollbar {
        display: none;
    }

    .finance-menu .menu-item {
        flex: 0 0 auto;
    }
    .finance-section .col-12 { padding: 0px; }
    .finance-section .kpi {font-size: 42px;}
    .view-toggle {transform: scale(0.8);}
    .finance-section .finance-menu .menu-item { background-color: #fff; }
    .finance-section .finance-menu .active {background: #9c6a4f;
    color: #fff;}


.finance-section .common-ttle {
    margin-bottom: 30px;
}
#WhyInvestment {
    padding: 50px 0px;
    overflow: hidden;
}
#WhyInvestment .Meggagedesc { margin-top: 30px; }
#WhyInvestment .edge-card { height: 520px; }
#WhyInvestment .swiper-horizontal>.swiper-pagination-progressbar, #WhyInvestment .swiper-pagination-progressbar.swiper-pagination-horizontal {width: 57%;}
#ShareholderInformation {padding: 50px 0px;}
#ShareholderInformation .common-ttle {
    margin-bottom: 30px;
}

.shareholderGraph { width: 99%; overflow-x: scroll;}
.shareholderGraph img { width: 1200px; }
.shareholderBaseGraphContainer .col-lg-9 { padding: 0px; }
#ShareholderInformation .share-item {
        width: 48%;
        max-width: inherit;
        padding-right: 12px;
    }
    #ShareholderInformation h2 {margin-bottom: 15px;}
    #land .common-ttle {
    padding-top: 50px;
}
#Digital .digital-section {position: relative;background: #9c6a4f;}
#Digital .digital-section .digital-content {padding-top: 40px;margin-bottom: 20px;}
#Digital .digital-bottom {margin-bottom: 30px;}
#Digital .kpi-item h2 span {
    font-size: 25px;
}
#Digital .digital-bottom .footnote {bottom: 0px;
    right: 0px; position: relative; }
    #trafrom .card,#trafrom .firstSlide .container { display: block; }
    .downloads .download-grid { display: block; }  
    .downloads {padding: 50px 0;}
    #trafrom .firstSlide .container .common-ttle2 {font-size: 45px;}
    #trafrom .firstSlide .container { position: relative; background: #404040; padding-top: 30px; height: auto; max-width: 100%; }
#trafrom .esgImg img { width: 100%; height: 300px; overflow: hidden; object-fit: cover; }
#trafrom .esgContent {
    padding: 40px 20px;
    height: auto;
}
#trafrom .esgContent .esg-group { margin-bottom: 20px; }

#trafrom .esgContent .tag {font-size: 10px;padding: 5px;}
p { line-height: 1.5; }
    #trafrom .trafromPix img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        overflow: hidden;
    }
   #trafrom  .swiper-pagination-bullet { background-color: #000; }
   #trafrom .esgContent p {padding-bottom: 15px;}
   .downloads .download-item {padding: 15px 5px;}
   .downloads .report-card .report-overlay { position: relative; padding: 17px 12px; }
   .hero-footer__tagline {
        top: 115px;
        left: 20px;
    }
    .hero-footer__logo {
        top: 105px;
        right: 20px;
    }
    .hero-footer__logo img {
        width: 55px;
    }

    .hero-footer .scrollRight {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
    width: 119px;
    height: 124px;
    margin: auto;
}
.hero-footer__contact-wrap {
        gap: 15px;
    }

    #land { overflow: hidden; padding-bottom: 70px; }
    #land .arch {flex-direction: inherit;}
    #land .common-ttle {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #land .swiper-pagination { position: relative; bottom: 20px; }
    #land .landmarkLHS { padding: 20px; }
    #Digital .digital-bg img { height: 440px; object-fit: cover; width: 100%; overflow: hidden; }
    .community-section .community-left-wrap .scroll-btn {margin-bottom: 50px;}

.popup-item {padding: 10px 0;line-height: 1.4;}
.popup-content {padding: 2px 14px;}
.popup-title p {
        font-size: 16px;
    }

    .popup-close {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 27px;
}
.popup-content {
        padding: 2px 14px;
        /* overflow: scroll;
        height: 480px; */
    }
    
    .message-right {padding-top: 40px;}
    .nav-menu-item {
        padding: 10px 0;
    }
    .menu-footer {
        padding: 9px 28px 34px;
        justify-content: flex-start;
    }
    .menu-grid {
        grid-template-columns: 1fr;
        padding: 22px 18px 24px;
        gap: 0;
    }

/*         .menu-overlay {
        top: inherit;
        padding-top: 130px;
        padding-bottom: 0px;
    } */
      .menu-overlay {top: 0px;}
    .toggle-thumb {top: 2px;}
    .menu-grid {overflow-y: scroll; height: 85dvh;}
    .menu-overlay {/* overflow: scroll;  */display: block; height: 100vh; padding-top: 60px;padding-bottom: 85px; }
    /* .menu-overlay {height: calc(100vh - 10px);}
 */
 .map-container { display: block; }
 .map-container .region-stats {
        width: 100%;
        max-width: 100%;
    }
    .map-container .map-wrapper { width: 78%;margin: auto; }
    .map-container .info-card {
        width: 100%;
        max-width: 100%;
        margin-top: 30px;
    }
#land .swiper-pagination-bullet { background-color: var(--black); }

#trafrom .firstSlide .container .scrollRight { display: none; }
   .landmark-slide .img-wrapper img {
        width: 100%;
    overflow: hidden;
    }

       .landmark-slide .img-wrapper img {
        width: 100%;
    overflow: hidden;
    }
}


/* Extra small */
@media (min-width: 320px) and (max-width: 767px) {
#trafrom .firstSlide .container .scrollRight { display: none; }
.row {
margin-left: 0px;
margin-right: 0px;
}

.mob-energy {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex: 0 0 auto;
  padding-left: 5px;
}

.mob-energy .toggle {
  width: 34px;
  height: 18px;
}


/* home */
#LandmarkProjects {overflow: hidden; padding: 30px 0px;}  
#LandmarkProjects .wrapper { position: relative;  }
#LandmarkProjects .swiper-pagination {  bottom: 20px;}
#LandmarkProjects .swiper-pagination-bullet { background-color: #fff; }
#LandmarkProjects .item { display: block; position: relative; box-shadow: none; }
#LandmarkProjects .list { justify-content: start; }
#LandmarkProjects .bigTitle {font-size: 50px;padding-left: 0px; margin-bottom: 20px; text-align: center; opacity: 0.15; letter-spacing: -1.4px; }
#LandmarkProjects .ResponsibleCards .ResponsibleLeft {transform: translate(0px, 0px);}
#LandmarkProjects .item:nth-child(even) .ResponsibleCards .ResponsibleLeft {transform: translate(0px, 0px);}
#LandmarkProjects .ResponsibleCards .ResponsibleContent,#LandmarkProjects .item:nth-child(even) .ResponsibleCards .ResponsibleContent {
background-color: #fff;
padding: 20px;
padding-left: 20px;
}
#LandmarkProjects .ResponsibleCards .ResponsibleContent p {
font-size: 20px;
line-height: 1.3;
}

#LandmarkProjects .ResponsibleCards .ResponsibleLeft .ResponsibleTitle {
position: absolute;
left: 20px;
bottom: 20px;
}

#LandmarkProjects .page-title2,#LandmarkProjects .page-title {
font-size: 32px;
}

#LandmarkProjects .wrapper {
height: auto;
}

#LandmarkProjects .swiper-pagination {
bottom: 0px;
position: relative;
}
#LandmarkProjects .item { margin-top: 0px; }

.mob-center img {height: 60px;transform: translate(-20px, 0px);}
.mob-navbar {padding: 38px 18px;}
#banner {height: 550px;}
#banner .bannerScroll {left: 20px;}
#banner .container h1 {font-size: 40px; margin-bottom: 30px; width: 230px; }
.community-section .community-left-wrap .community-left { width: 100%; padding: 40px 20px; }
.common-ttle, .common-ttle2 {letter-spacing: 0.7px;font-size: 26px;}

.community-section .community-left-wrap .MoreContent {
    height: fit-content;
        padding-bottom: 0px;
        overflow: auto;
}

#AboutUs {
    background: #fff;
    padding: 50px 0px;
}

#VisionMission {padding-bottom: 40px;}
#VisionMission .VisionMissionImg img { width: 100%; height: 400px; object-fit: cover; }
#VisionMission .vision-slider {margin-top: -100px;padding: 20px;}
#VisionMission .swiper { padding-left: 0px; }
#VisionMission .vision-card {padding: 20px;}
#VisionMission .vision-card h6 {margin-bottom: 25px;}
#VisionMission .vision-card {height: 310px;  }
#VisionMission .swiper-pagination {bottom: inherit;
    right: inherit;
    width: fit-content;
    top: 15px; left: 10px; }
#VisionMission .swiper-pagination-clickable .swiper-pagination-bullet { background-color: #000; }

#MessageFromChairman .message-slider .message-left {
    padding-top: 50px;
}

#MessageFromChairman .MoreContent {padding-bottom: 30px;margin-bottom: 20px; height: 866px; }
#MessageFromChairman .scroll-btn {margin-bottom: 60px;}
#MessageFromChairman .message-slider .message-right .image-wrap {
    position: relative;
    padding-top: 0px;
}
#MessageFromChairman .message-slider .message-right .image-wrap .cta-box .thumbImg { display: none; }
#MessageFromChairman .message-slider .message-right .image-wrap .info-box,#MessageFromChairman .message-slider .message-right .image-wrap .cta-box { position: relative; bottom: 0px; }
#MessageFromChairman {padding-bottom: 50px;}

#PerfromanceHilight {padding: 50px 0px;}
#PerfromanceHilight .ph-tab {width: 100%;writing-mode: inherit;}
#PerfromanceHilight .ph-tab .label {writing-mode: inherit;
        font-size: 16px;
        letter-spacing: 0.6px;
        line-height: 18px;gap: 0px 7px;}
#PerfromanceHilight .ph-panel.active .icon {
    transform: translateX(-20%) rotate(0deg);
}
#PerfromanceHilight .ph-icon, #PerfromanceHilight .ph-tab .icon { left: inherit; right: 7px; width: 28px;
    height: 28px; }

#YearInReview {padding: 50px 0px;padding-bottom: 0px;}
#YearInReview .common-ttle {
    padding-bottom: 30px;
}
#YearInReview .card-wrapper {padding-top: 0;width: 100%;margin-bottom: 0px;}
#YearInReview .card { height: 100%;     display: block; }

#YearInReview .advancingPic img {width: 100%;
    height: 92vh;
    overflow: hidden;
    object-fit: cover;}
    #YearInReview .quarter-section .container {justify-content: start; padding-top: 50px; }
    #YearInReview .quarter-section .quarter-card { width: 100%;height: 300px; }
    #YearInReview .advancingSlide { margin-top: 30px; }


    #YearInReview .swiper-pagination {bottom: inherit;
    right: inherit;
    width: fit-content;
    top: 29px; left: 10px; }
#YearInReview .swiper-pagination-clickable .swiper-pagination-bullet { background-color: #000; }


#YearInReview #signature .nav-arrows {
    top: 30px;
    transform: scale(0.7);
}
#YearInReview #signature .project-card {padding-bottom: 30px;}
#YearInReview #awards {padding: 50px 0;}
#YearInReview .col-12 { padding: 0px; }
#YearInReview #awards .swiperControl {transform: scale(0.8);
        top: 20px;
        height: fit-content;
        margin: auto; left: 0px; bottom: inherit;}
#YearInReview #awards .common-ttle {
    padding-bottom: 60px;
}
#YearInReview .swiper-pagination {top:20px;}
#YearInReview #awards .awardsCards .awardsCardsRight { padding-left: 0px; padding-top: 20px; }
#YearInReview #awards .awardsCards .awardsCardsRight h2 {font-size: 26px;margin-bottom: 14px;}
#YearInReview #awards .awardsCards .awardsCardsRight h6 {font-size: 18px;}
#YearInReview .card-wrapper:last-of-type { height: auto; }
#ThematicStories {padding: 30px 0px;padding-top: 50px;}
#ThematicStories .connectivity-grid {display: block;}
#ThematicStories .card-hover { position: relative;transform: translateY(0px); background-color: #a0674a; opacity: 1; }
#ThematicStories .card-default { display: none; }
#ThematicStories .card { height: 100%; margin-bottom: 20px; }
#ThematicStories .card-hover h4 {font-size: 26px;}
#ThematicStories .card img {height: 460px; overflow: hidden; }
#ThematicStories .card-hover p { border-bottom: none; }
#businessSection .common-ttle {
    padding-bottom: 60px;
}

#businessSection .nav-tabs {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
    }

    #businessSection .nav-tabs::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
    }

    #businessSection .nav-tabs .nav-item {
        flex: 0 0 auto;
    }

    #businessSection .nav-tabs .nav-link {padding: 12px 12px;font-size: 14px;letter-spacing: -0.2px;}
#businessSection .rar { padding: 0px; margin-top: 0px; }
#businessSection .rar-grid { display: block; }
#businessSection .rar-section {padding: 20px 10px;}
#businessSection .rar-section:nth-child(even) {
    padding-left: 0px;
    padding-right: 0;
}
#businessSection {padding-top: 40px;}
#businessSection .oval-wrap {margin-top: 10px;}
#businessSection .oval {padding: 10px;}
#businessSection .im-grid {padding: 17px;border-radius: 30px;}
#businessSection .im-left {margin-top: 11px;margin-left: 0px;}
#businessSection .im-right {padding-right:0px;}
#businessSection .sv-slide { height: auto; padding: 20px; }
#businessSection .oval { min-height:auto ; }
#businessSection .sv-item { display: block; }
#businessSection .sv-slide { border-radius: 30px; padding-bottom: 40px; }
#businessSection .oval-dots {
    position: relative;
    bottom: 20px;
    transform: translateX(-50%);
    width: fit-content;
}
#businessSection .dot {
    width: 12px;
    height: 12px;
}
.revenue {padding: 50px 0;}
.revenue .revenue-container { display: block; }
.revenue .Meggagedesc { margin-top: 20px; }
.revenue .col-12 { padding: 0px; }
.revenue .rev-center { margin-top: 20px; }
.revenue .percent {font-size: 26px;line-height: 1;}
.revenue .donut-text {transform: translate(-50%, -90%);} 
.revenue .value {font-size: 36px;}
.revenue .rev-right-content {padding-top: 22px;}
.revenue .brand-item img {
        height: 100%;
        width: 100%;
    }
.region-map-section { height: auto; padding: 50px 10px; }
.region-map-section .col-12 { padding:0px; }
.region-map-section .Meggagedesc { margin-top: 20px; }
.Meggagedesc { font-size: 18px !important; }
.map-container {padding-top: 40px;
    margin-top: 30px;gap: 13px;}
.region-map-section .regionLeftNos { display: flex;
    flex-wrap: wrap;
    gap: 2px; }

    .regionLeftNos .stat-item {
    flex: 1 1 100px; /* auto adjust width */
}

.map-container .region-stats .stat-item .percent {
        font-size: 36px;
    }
    .map-container .stat-item .label {
        font-size: 11px;
    }
    .map-container .stat-item {padding: 9px 12px;border: none;}
    .map-container .stat-item.active {
    background-color: #f1f1f1;
}   
.map-container .card-row, .map-container .portfolio-row {
        padding: 10px 14px;
    }
    .map-container .card-header {letter-spacing: 0.8px;}
.sub-ttle {margin-bottom: 18px;}

#backlog {
    padding: 50px 0px;
}
#backlog .Meggagedesc { margin-top: 30px; }
#backlog .card-chart {margin-top: 20px;}
#backlog .card-chart { display: block; }

#backlog .v-tabs { display: flex; width: 100%; flex-wrap: wrap; flex-direction: inherit; }
#backlog .v-tab-btn {width: 40%;
        padding: 10px 13px;}
#backlog .v-panels { padding: 0px; }
#backlog .pct-num {font-size: 42px;min-width: 80px;}
#backlog .chart-wrap { height: auto; }
#backlog .pct-label {max-width: 92px;}

.management-review {
    background: #fff;
    padding: 50px 0px;
}
.management-review .MoreContent {
    overflow-y: inherit;
    height: auto;
   padding: 17px;
}
.management-review .MoreContent h3 {font-size: 30px;}
.management-review .scroll-btn {margin-bottom: 50px;}
.management-review .icon-circle {width: 28px;
    height: 28px;}
    .management-review .icon-circle::before{width: 11px;}
    .management-review .accordion-button {font-size: 16px;
        letter-spacing:0.3px;
        line-height: 18px;}
        .management-review .accordion-button {padding: 22px 14px;}


        .finance-section {
    padding: 50px 0px;
}


.finance-menu {
    display: flex;
    gap: 12px;
}
 .finance-menu {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 28px;
    }

    .finance-menu::-webkit-scrollbar {
        display: none;
    }

    .finance-menu .menu-item {
        flex: 0 0 auto;
    }
    .finance-section .col-12 { padding: 0px; }
    .finance-section .kpi {font-size: 42px;}
    .view-toggle {transform: scale(0.8);}
    .finance-section .finance-menu .menu-item { background-color: #fff; }
    .finance-section .finance-menu .active {background: #9c6a4f;
    color: #fff;}


.finance-section .common-ttle {
    margin-bottom: 30px;
}
#WhyInvestment {
    padding: 50px 0px;
    overflow: hidden;
}
#WhyInvestment .Meggagedesc { margin-top: 30px; }
#WhyInvestment .edge-card { height: 520px; }
#WhyInvestment .swiper-horizontal>.swiper-pagination-progressbar, #WhyInvestment .swiper-pagination-progressbar.swiper-pagination-horizontal {width: 57%;}
#ShareholderInformation {padding: 50px 0px;}
#ShareholderInformation .common-ttle {
    margin-bottom: 30px;
}

.shareholderGraph { width: 99%; overflow-x: scroll;}
.shareholderGraph img { width: 1200px; }
.shareholderBaseGraphContainer .col-lg-9 { padding: 0px; }
#ShareholderInformation .share-item {
        width: 48%;
        max-width: inherit;
        padding-right: 12px;
    }
    #ShareholderInformation h2 {margin-bottom: 15px;}
    #land .common-ttle {
    padding-top: 50px;
}
#Digital .digital-section {position: relative;background: #9c6a4f;}
#Digital .digital-section .digital-content {padding-top: 40px;margin-bottom: 20px;}
#Digital .digital-bottom {margin-bottom: 30px;}
#Digital .kpi-item h2 span {
    font-size: 25px;
}
#Digital .digital-bottom .footnote {bottom: 0px;
    right: 0px; position: relative; }
    #trafrom .card,#trafrom .firstSlide .container { display: block; }
    .downloads .download-grid { display: block; }  
    .downloads {padding: 50px 0;}
    #trafrom .firstSlide .container .common-ttle2 {font-size: 45px;}
    #trafrom .firstSlide .container { position: relative; background: #404040; padding-top: 30px; }
#trafrom .esgImg img { width: 100%; height: 300px; overflow: hidden; object-fit: cover; }
#trafrom .esgContent {
    padding: 20px 10px;
    height: auto;
}
#trafrom .esgContent .esg-group { margin-bottom: 20px; }

#trafrom .esgContent .tag {font-size: 10px;padding: 5px;}
p { line-height: 1.5; }
    #trafrom .trafromPix img {
        width: 100%;
        height: 610px;
        object-fit: cover;
        overflow: hidden;
    }
   #trafrom  .swiper-pagination-bullet { background-color: #000; }
   #trafrom .esgContent p {padding-bottom: 15px;}
   .downloads .download-item {padding: 15px 5px;}
   .downloads .report-card .report-overlay { position: relative; padding: 17px 12px; }
   .hero-footer__tagline {
        top: 115px;
        left: 20px;
    }
    .hero-footer__logo {
        top: 105px;
        right: 20px;
    }
    .hero-footer__logo img {
        width: 55px;
    }

    .hero-footer .scrollRight {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
    width: 119px;
    height: 124px;
    margin: auto;
}
.hero-footer__contact-wrap {
        gap: 15px;
    }

    #land { overflow: hidden; padding-bottom: 40px }
    #land .arch {flex-direction: inherit;}
    #land .common-ttle {
        padding-top: 50px;
        padding-bottom: 50px;
    }
    #land .swiper-pagination { position: relative; bottom: 20px; }
    #land .landmarkLHS { padding: 20px 6px; }
    #Digital .digital-bg img { height: 300px; object-fit: cover; width: 100%; overflow: hidden; }
    .community-section .community-left-wrap .scroll-btn {margin-bottom: 50px;}

.popup-item {padding: 10px 0;line-height: 1.4;}
.popup-content {padding: 2px 14px;}
.popup-title p {
        font-size: 16px;
    }

    .popup-close {
    position: absolute;
    width: 40px;
    height: 40px;
    font-size: 27px;
}
.popup-content {
        padding: 2px 14px;
        overflow: scroll;
        height: 480px;
    }
    
    .message-right {padding-top: 40px;}
    .nav-menu-item {
        padding: 10px 0;
    }
    .menu-footer {
        padding: 9px 28px 34px;
        justify-content: flex-start;
    }
    .menu-grid {
        grid-template-columns: 1fr;
        padding: 22px 18px 24px;
        gap: 0;
    }

/*         .menu-overlay {
        top: inherit;
        padding-top: 130px;
        padding-bottom: 0px;
    } */
      .menu-overlay {top: 0px;}
    .toggle-thumb {top: 2px;}
    .menu-grid {overflow-y: scroll; height: 85dvh;}
    .menu-overlay {/* overflow: scroll;  */display: block; height: 100vh; padding-top: 60px;padding-bottom: 85px; }

    #land .swiper-pagination-bullet { background-color: var(--black); }
    .nav-menu-item a { opacity: 1; font-weight: 400; }
    #land .landmarkLHS .location {font-size: 13px;letter-spacing: -0.4px;}
    .landmark-slide .img-wrapper img {
        width: 100%;
    height: 300px;
    overflow: hidden;
    object-fit: cover;
    }

    #YearInReview #awards .swiperControl .swiper-pagination {top: -10px;}  
.MoreContent { padding-right: 0px; }
.community-section .community-left-wrap .community-left {margin-left: 0px;}
.community-section .community-left-wrap .community-left p {
    padding-left: 0px;
}

#trafrom .swiper-button-prev.horizontal-scoll-wrapper-prev, #trafrom .swiper-button-next.horizontal-scoll-wrapper-next {top: 36%; width: 48px;
    height: 48px;}
    #trafrom .swiper-button-next:after, #trafrom .swiper-button-prev:after {
    font-size: 18px;
}

}