* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(200, 194, 194, 0.26) transparent;
}

ul,
ol,
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #ffffff;
}
a:hover {
  color: #ffffff;
}

body {
  /* background-color: #161a38;
  color: #fff; */
  overflow-x: hidden;
}

@font-face {
  font-family: "Source_Sans_3";
  src: url(../fonts/Source_Sans_3/SourceSans3-VariableFont_wght.ttf);
  font-style: normal;
  font-weight: 100 900;
}

@font-face {
  font-family: "Inter";
  src: url(../fonts/Inter/Inter-VariableFont_opsz\,wght.ttf);
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family:"Poppins-Regular";
  src: url(../fonts/Poppins/Poppins-Regular.ttf);
  font-weight: 400;
}
@font-face {
  font-family:"Poppins-Medium";
  src: url(../fonts/Poppins/Poppins-Medium.ttf);
  font-weight: 500;
}
@font-face {
  font-family:"Poppins-ExtraBold";
  src: url(../fonts/Poppins/Poppins-ExtraBold.ttf);
  font-weight: 800;
}
@font-face {
  font-family:"Urbanist";
  src: url(../fonts/Urbanist/Urbanist-VariableFont_wght.ttf);
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family:"Roboto";
  src: url(../fonts/Roboto/Roboto-VariableFont_wdth\wght.ttf);
  font-style: normal;
  font-weight: 100 900;
}
@font-face {
  font-family:"Montserrat";
  src: url(../fonts/Montserrat/Montserrat-VariableFont_wght.ttf);
  font-style: normal;
  font-weight: 100 900;
}

:root {
  --white-color: #ffffff;
  --btn-color: #76ea85;
  --black-color: #000000;

  /* ======== Gradient Color Variable ======== */
  --number-color: linear-gradient(180deg, #ffffff 0%, #434c5d 77.69%);
}
.mb_3 {
  margin-bottom: 20px;
}
.mb_70 {
  margin-bottom: 70px;
  z-index: 99;
}

.sustainability-section {
  position: relative;
  width: 100%;
  height: 800px;
  background: url("../images/banner-image.png") no-repeat center center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
}

.sustainability-quote {
  background-color: #fff;
  padding: 30px 25px;
  max-width: 417px;
  border-left: 20px solid #ffc247;
  border-bottom: 15px solid #ffc247;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.sustainability-quote p {
  margin: 0;
  font-weight: 800;
  font-size: 34px;
  line-height: 45px;
  color: var(--black-color);
  font-family: "Source_Sans_3";
}

/* section2 */
.chairman-section {
  padding: 80px 80px;
  background-color: #ffffff;
}
.chairman-section .left-content-main {
  padding-top: 50px;
}
.chairman-section .chairman-title {
  font-weight: 800;
  color: #02033b;
  font-family: "Inter" !important;
  font-size: 36px;
  line-height: 45px;
}

.chairman-section .chairman-text {
  font-size: 20px;
  color: #02033b;
  line-height: 30px;
  font-family: "Inter";
  font-weight: 400;
}

.chairman-section .read-more-btn {
  background-color: #fbbc2b;
  padding: 16px 40px;
  border-radius: 30px;
  font-weight: 800;
  font-size: 19px;
  color: #02033b;
  border: none;
  font-family: "Inter";
}

.chairman-section .image-container {
  position: relative;
  display: inline-block;
}

.chairman-section .yellow-box {
  position: absolute;
  top: -10px;
  right: -20px;
  bottom: -10px;
  left: 10px;
  background-color: #fbbc2b;
  z-index: 0;
}

.chairman-section .chairman-img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
}
/*key-highlights-section  */
.key-highlights-section .section-title {
  font-weight: 800;
  font-size: 36px;
  line-height: 45px;
  color: #0c0c3f;
  font-family: "Inter";
}

.key-highlights-section .highlight-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 20px;
  text-align: left;
  height: 100%;
  box-shadow: 5px 5px 20px 0px #00000012;
}

.key-highlights-section .highlight-box .icon {
  font-size: 24px;
}

.key-highlights-section .highlight-box .label {
  font-size: 14px;
  color: #727272;
  margin: 0;
  font-weight: 400;
  font-size: 12px;
  font-family: "Poppins-Regular";
}

.key-highlights-section .highlight-box .value {
  font-size: 30px;
  font-weight: 500;
  color: #484c52;
  font-family: "Poppins-Medium";
  margin: 0;
}
.key-highlights-section .value .unit {
  font-size: 16px;
  font-weight: 400;
  margin-left: 2px;
  color: #484c52;
  font-family: "Poppins-Regular";
}

.key-highlights-section .highlights-img {
  /* max-height: 400px; */
  width: 100%;
  object-fit: contain;
}
.key-highlights-section .left-part-main {
  padding-left: 49px;
}
/* .key-highlights-section end */
/* Approach to Sustainability start */
.approach-sustainability-section {
  padding: 50px;
}
.approach-sustainability-section .approach-box-main {
  padding: 50px;
}
.approach-sustainability-section .title-text-dark-blue {
  font-size: 36px;
  line-height: 45px;
  font-weight: 800;
  color: #02033b;
  font-family: "Inter";
}

.approach-sustainability-section .sustainability-wrapper {
  position: relative;
  padding-bottom: 10px;
  padding-right: 10px;
  display: inline-block;
}

.approach-sustainability-section .sustainability-box {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px;
  height: 100%;
  position: relative;
  z-index: 1;
}
.approach-sustainability-section .box-title {
  font-size: 12px;
  color: #727272;
  font-family: "Poppins-ExtraBold";
  font-weight: 800;
}
.approach-sustainability-section .box-para {
  font-size: 12px;
  color: #727272;
  font-family: "Poppins-Medium";
  font-weight: 500;
}

/* Colored Borders Outside Box */
.approach-sustainability-section .sustainability-wrapper::after,
.sustainability-wrapper::before {
  content: "";
  position: absolute;
  z-index: 0;
}

.approach-sustainability-section .sustainability-wrapper::after {
  height: 10px;
  bottom: 0;
  left: 0;
  width: 100%;
}

.approach-sustainability-section .sustainability-wrapper::before {
  width: 10px;
  top: 0;
  right: 0;
  height: 100%;
}

/* Specific Colors */
.approach-sustainability-section .orange-border::after,
.orange-border::before {
  background-color: #fdb44b;
}

.approach-sustainability-section .yellow-border::after,
.yellow-border::before {
  background-color: #f8f948;
}

.approach-sustainability-section .red-border::after,
.red-border::before {
  background-color: #ff5c4d;
}

.approach-sustainability-section .dark-yellow-border::after,
.dark-yellow-border::before {
  background-color: #f8b84e;
}
/* Approach to Sustainability end */
/*  Environmental Stewardship Section start */
.environment-section {
  background-color: #f3fafa;
  padding: 55px 20px 70px 20px;
  margin-bottom: 100px;
}

.environment-section .env-title {
  font-weight: 600;
  font-size: 40px;
  margin-bottom: 15px;
  font-family: "Urbanist";
  color: #000000;
  margin-bottom: 0;
}

.environment-section .env-subtitle {
  font-size: 18px;
  color: #3a4963;
  line-height: 29px;
  margin-bottom: 0px;
  font-family: "Roboto";
  font-weight: 400;
  text-align: justify;
  margin-top: 16px;
}

.environment-section .read-more-btn {
  background-color: #36689e;
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 8px;
  font-weight: bold;
  margin-top: 32px;
  font-size: 14px;
  font-weight: 700;
  font-family: "Montserrat";
}

.environment-section .read-more-btn:hover {
  background-color: #163258;
}

.environment-section .sustainability-box {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  height: 100%;
}

.environment-section .sustainability-box h5 {
  font-size: 20px;
  font-weight: 700;
  color: #28407d;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  /* font-family: "Roboto" !important; */
}

.environment-section .sustainability-box ul {
  padding-left: 20px;
  font-size: 14px;
  color: #000000;
  font-weight: 400;
  line-height: 20px;
  font-family: "Montserrat";
}

.environment-section .sustainability-box ul li {
  margin-bottom: 6px;
  list-style: disc;
}
/*  <!-- Environmental Stewardship Section end --> */
/* social-responsibility-section start */
.social-responsibility-section {
  background-color: #ffffff;
}
.social-responsibility-section .custom-bg {
  padding: 20px 0 20px 30px;
}
.social-responsibility-section .title {
  font-size: 48px;
  color: #000000;
  font-weight: 700;
  /* font-family: "Roboto";/ */
}
.social-responsibility-section .sub-title {
  font-size: 16px;
  color: #000000;
  font-weight: 600;
  /* font-family: "Roboto";/ */
}
.social-responsibility-section .para {
  font-size: 18px;
  color: #000000;
  font-weight: 400;
  margin-top: 24px;

  /* font-family: "Roboto";/ */
}
.social-responsibility-section .social-responsibility {
  margin-top: 80px;
  padding: 0 30px;
}
.social-responsibility-section .card-text-padding {
  padding: 24px;
}
.social-responsibility-section .consumer-card-padding{
  padding:13px  24px;
}
.social-responsibility-section .social-card-subtitle {
  color: #000;
  font-size: 16px;
  font-weight: 600;
}
.social-responsibility-section .social-card-title {
  color: #000;
  font-size: 24px;
  font-weight: 700;
  /* font-family: "Roboto"; */
  margin-top: 10px;
}
.social-responsibility-section .social-card-para {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  margin-top: 10px;
}

.social-responsibility-section .read-link {
  font-weight: 400;
  color: #000;
  text-decoration: none;
  font-size: 18px;
  margin-top: 24px;
}

.social-responsibility-section .read-link span {
  font-weight: bold;
  margin-left: 5px;
}
/* end */
/* start */
.supply-chain-section {
  margin: 100px 0;
}
.supply-chain-section .supply-heading {
  font-size: 48px;
  font-weight: 700;
  color: #000000;
  margin-bottom: 0;
  /* font-family: "Roboto";/ */
}

.supply-chain-section .supply-subheading {
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  margin-bottom: 0;
  /* font-family: "Roboto"; */
  margin-top: 18px;
}

.supply-chain-section .supply-text-box {
  background-color: #fff;
  padding: 30px;
  border-right: 16px solid #ff5e3a; /* right red border */
  border-bottom: 16px solid #ff5e3a; /* bottom red border */
  height: 100%;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
}

.supply-chain-section .supply-text-box ul {
  padding-left: 20px;
  margin: 0;
}

.supply-chain-section .supply-text-box ul li {
  list-style: disc;
  color: #000000;
  font-size: 15px;
  font-weight: 300;
  line-height: 48px;
  margin-bottom: 10px;
}

.supply-chain-section .supply-image-box {
  height: 100%;
  padding-right: 40px;
}

.supply-chain-section .supply-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* end */
/* impect section start */
/* style.css */
.impact-section {
  background-color: #3a747a;
  padding: 40px;
  margin-bottom: 80px;
}

.impact-section .impact-title {
  font-weight: 600;
  font-size: 32px;
  line-height: 42px;
  color: #ffffff;
  /* font-family: "Inter"; */
  margin-bottom: 0;
}

.impact-section .impact-list {
  margin-top: 20px;
}
.impact-section .impact-list li {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px;
  color: #e8f1f1;
}
.start-now {
  background: #d85151;
  padding: 12px 24px;
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  border-radius: 8px;
  margin-top: 22px;
}

.sketch-img {
  max-height: 300px;
}
/* end */
/* testymonoal start */

.testimonial-section {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-left: 30px;
  background-color: #f4fafa;
}

.testimonial-section .subheading {
  text-transform: uppercase;
  color: #36689e;
  font-weight: 700;
  font-size: 18px;
  line-height: 28px;
}

.testimonial-section .main-heading {
  font-size: 42px;
  font-weight: 600;
  line-height: 52px;
  margin-top: 20px;
  color: #282828;
}

.testimonial-section .testimonial-box {
  background: #fff;
  padding: 40px;
  border-radius: 10px;
  position: relative;
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06); */
  margin: 0 auto;
  box-shadow: 0px 4px 4px 0px #00000040;
  /* max-width: 500px; */
}

.testimonial-section .testimonial-box::after {
  content: "";
  position: absolute;
  bottom: -29px;
  left: 30px;
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 30px solid white;
  filter: drop-shadow(0 8px 2px rgba(0, 0, 0, 0.1));
}

.testimonial-section .testimonial-box p {
  font-size: 16px;
  color: #7C8893;
  line-height: 26px;
  /* font-family:"Inter"; */
}

.testimonial-section .author {
  margin-top: 40px;
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: 20px;
}

.testimonial-section .author img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.testimonial-section .author strong {
  font-size: 15px;
  color: #36689e;
  display: block;
  font-weight: 500;
}

.testimonial-section .author .role {
  font-size: 14px;
  font-weight: 400;
  color: #0d263b;
  /* font-family:"Inter"; */
}

.testimonial-section .swiper-pagination {
  margin-top: 25px;
  text-align: center;
  font-family: "Inter";
}

.testimonial-section .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: transparent;
  border: 1px solid #36689e;
  opacity: 1;
  margin: 0 5px;
}

.testimonial-section .swiper-pagination-bullet-active {
  background: #36689e !important;
}
.testimonial-slider {
  padding-bottom: 60px;
  margin-top: 48px;
}
/* end */
/* last start */

.downloads-container {
  background: #eff3f5;
  padding: 50px;
}

.downloads-container .downloads-title {
  font-family: "Georgia", serif;
  font-size: 57px;
  color: #03262C;
  margin-bottom: 40px;
  position: relative;
  padding-bottom: 10px;
  font-weight: 700;
  
}

.downloads-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100px;
  height: 4px;
  background-color: #008080;
}

/* Downloads Grid Layout */
.downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, minmax(200px, auto));
  gap: 20px;
  height: auto;
}

.download-card {
  background-color: #d3d3d3; /* Light grey for placeholders */
  /* border-radius: 8px; */
  display: flex;
  flex-direction: column; /* Stack content vertically */
  justify-content: flex-end; /* Align content to the bottom */
  padding: 20px;
  box-sizing: border-box; /* Include padding in the element's total width and height */
  position: relative; /* For absolute positioning of inner elements like arrow */
  color: #333; /* Default text color */
}

/* POSH Policy - Top right, shorter height */
.posh-policy {
  grid-column: 2 / span 2; /* Spans column 2 and 3 */
  grid-row: 1;
  min-height: 120px; /* Shorter height for POSH */
  background-color: #d3d3d3; /* Example color */
}

/* ESG Policy - Middle of the bottom row, with angled cut */
.esg-policy {
  grid-column: 2;
  grid-row: 2;
  background-color: #d3d3d3; /* Example color */
  clip-path: polygon(
    0 0,
    90% 0,
    100% 50%,
    90% 100%,
    0 100%
  ); /* Adjusted clip-path */
  display: flex;
  align-items: center; /* Center content vertically */
  justify-content: flex-start;
  padding-left: 30px; /* Adjust padding for text */
  position: relative; /* For arrow positioning */
  z-index: 1; /* Ensure it overlaps Code of Conduct visually if needed */
}

/* Code of Conduct - Rightmost of the bottom row, with angled cut */
.code-conduct {
  grid-column: 3;
  grid-row: 2;
  background-color: #d3d3d3; /* Example color */
  clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%, 25% 50%);

  display: flex;
  align-items: flex-end; /* Align content to the bottom */
  justify-content: flex-end; /* Align content to the right */
  padding-right: 20px;
  padding-bottom: 20px;
}

.downloads-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
  grid-template-rows: auto auto; /* Two rows, height determined by content */
  gap: 20px;
}

.download-card {
  background-color: #e0e0e0; /* Slightly different shade for distinction */
  /* border-radius: 8px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  min-height: 180px; /* Increase default height for all cards */
}

/* Card specific overrides */

.csr-policy {
  grid-column: 1;
  grid-row: 1 / span 2;
  background-color: #d3d3d3;
}

.posh-policy {
  grid-column: 2 / span 2;
  grid-row: 1;
  min-height: 100px;
  background-color: #d3d3d3;
}

.downloads-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* Three columns */
  grid-template-rows: 200px 100px 200px; /* Rough heights for rows to match visual proportions */
  gap: 20px;
  align-items: stretch; /* Stretch items to fill grid cells */
}

.download-card {
  background-color: #e0e0e0;
  /* border-radius: 8px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
  color: #333;
  overflow: hidden; /* Hide anything outside clip-path */
}

.download-card h3 {
  color: #52a41d;
  font-size: 20px;
  font-weight: 500;
  margin: 0;
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2; /* Ensure text is above background shapes */
}

/* POSH Policy - Shorter card top right */
.posh-policy {
  grid-column: 2 / span 2; /* Spans columns 2 and 3 */
  grid-row: 1;
  min-height: 100px; /* Explicitly set a shorter height */
  background-color: #d3d3d3;
  display: flex;
  align-items: flex-end; /* Align text to bottom */
  justify-content: flex-start;
}

.posh-policy h3 {
  position: absolute;
  margin: 0;
  color: #52a41d;
  left: 20px;
  top: 20px;
}

/* Sustainability Snapshot/Report - Bottom left, below CSR */
.sustainability-report {
  grid-column: 1;
  grid-row: 3;
  background-color: #d3d3d3;
}

/* ESG Policy - Middle bottom with arrow shape */
.esg-policy {
  grid-column: 2;
  grid-row: 2 / span 2;
  background-color: #d3d3d3;
  clip-path: polygon(
    0 0,
    90% 0,
    100% 50%,
    90% 100%,
    0 100%
  ); /* Adjusted clip-path for sharper angle */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: 30px;
  z-index: 1;
}

.esg-policy h3 {
  position: absolute;
  margin: 0;
  color: #52a41d;
  left: 27px;
  top: 20px;
}

.arrow-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 1.8rem;
  font-weight: bold;
}

.code-conduct {
  grid-column: 3;
  grid-row: 2 / span 2;
  background-color: #d3d3d3;

  clip-path: polygon(0% 0, 100% 0, 100% 100%, 0 100%, 10% 51%);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-right: 20px;
  padding-bottom: 20px;
}

.code-conduct h3 {
  color: #52a41d;
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  position: static;
  text-align: right;
}

.teal-banner {
  width: 100%;
  height: 70px;
  background-color: #1a4a4a;
  background: linear-gradient(135deg, #1a4a4a 0%, #0f3333 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}