@font-face {
  font-family: 'GeneralSansRegular';
  src: url(/assets/fonts/GeneralSans-Regular.woff2);
}
@font-face {
  font-family: 'GeneralSansRegularItalic';
  src: url(/assets/fonts/GeneralSans-RegularItalic.woff2);
}
@font-face {
  font-family: 'GeneralSansLight';
  src: url(/assets/fonts/GeneralSans-Light.woff2);
}
@font-face {
  font-family: 'GeneralSansSemiBold';
  src: url(/assets/fonts/GeneralSans-Semibold.woff2);
}
@font-face {
  font-family: 'BoskaLight';
  src: url(/assets/fonts/Boska-Light.woff2);
}
@font-face {
  font-family: 'BoskaRegular';
  src: url(/assets/fonts/Boska-Regular.woff2);
}
@font-face {
  font-family: 'BoskaItalicLight';
  src: url(/assets/fonts/Boska-LightItalic.woff2);
}
@font-face {
  font-family: 'BoskaItalicRegular';
  src: url(/assets/fonts/Boska-MediumItalic.woff2);
}
body {
  padding-left: 30px !important;
  padding-right: 30px !important;
}
body, html {
  font-family: 'GeneralSansRegular';
  background-color: #f6f5e9;
  overflow-x: hidden;
  cursor: url('/storage/Artboard2.png'), pointer  !important;
}.banner-container {
  position: relative;
  width: 100%;
  justify-self: center;
  height: 300px;
  overflow: hidden;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
}.banner-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.5s ease;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1; 
  /* filter: brightness(60%); */
  cursor: url('/storage/Artboard3.png'), pointer  !important;
}
.zoom-in {
  transform: scale(1); /* Zoom out effect */
}.zoom-out {
  transform: scale(1.1); /* Zoom in effect */
}.banner-content {

  padding: 20px; /* Add padding for some spacing */
  border-radius: 8px; /* Optional: rounded corners */
  z-index: 2; /* Ensure it appears above the image */
  position: relative;
  max-width: 60%; /* Optional: restrict the width */
  text-align: center; /* Optional: center text */
  cursor: url('/storage/Artboard2.png'), pointer  !important;
}.banner-title {
  font-family: 'GeneralSansRegular';
  font-size: 33px;
  font-weight: bold;
  color:#fff;
}.banner-description {
  font-family: 'GeneralSansRegular';
  font-size: 18px;
  text-align:justify; /* Optional: center text */
  color:#fff;
  margin-top: 10px; /* Add some spacing between title and description */
}/* Heritage Section */
.section-wrapper {
  width: 100%;
  justify-self: center;
  display: flex;
  flex-direction: column;
  gap: 20px; /* Unified gap between Heritage and New Two-Column Sections */
}

/* Heritage Section */
.heritage-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heritage-section .container {
  display: flex;
  gap: 20px;  /* Unified gap between elements in the heritage section */
  padding: 0px;
  width: 100%;
  max-width: 100%; /* Ensure it doesn't exceed parent width */
  border-radius: 15px;
  margin: 0;
  box-sizing: border-box; /* Include padding and border in width calculation */
}

.heritage-section .left, 
.heritage-section .right {
  width: 40%;
  display: flex;
  border-radius: 15px;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Ensures the container doesn't grow with the image */
  transition: transform 0.3s;
}

.heritage-section .left:hover, 
.heritage-section .right:hover {
transform: translateY(-5px);
}

.heritage-section .left img, 
.heritage-section .right img {
  aspect-ratio: 9 / 12;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  transition: transform 1.5s ease; /* Smooth zoom transition */
}

.zoom-in {
  transform: scale(1); /* Default (zoomed out) */
  border-radius: 15px;
}

.zoom-out {
  transform: scale(1.05); /* Zoom in effect */
  border-radius: 15px;
}
.image-popup{
  transform:  scale(1.05);
}


.zoom-in {
  transform: scale(1); /* Default (zoomed out) */
}

.zoom-out {
  transform: scale(1.05); /* Zoom in effect */
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* On top */
  padding-top: 5%;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2); /* Dark background */
  text-align: center;
  border-radius: 15px;
}

.modal-content {
  max-width: 80%;
  max-height: 80%;
  margin: auto;
  display: block;
  border-radius: 15px;
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  z-index: 999;
}

.close:hover,
.close:focus {
  color: #535353;
  text-decoration: none;
  cursor: pointer;
}

/* Image styles */
.image-popup {
  cursor: pointer;
  transition: 0.3s;
  border-radius: 15px;
}

.image-popup:hover {
  filter: brightness(90%);
  border-radius: 15px;
}


.heritage-section .middle {
  width: 40%;
  background-color: #f6f5e9;
  /* border: 1px solid #bebebe; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30);
  /* background: linear-gradient(to bottom right, #f6f5e9, #f6f5e9, #effcd3, #e2ffa0); */
  /* background: linear-gradient(to top, #f6f5e9, #fffde6, #effcd3, #e2ffa0); */
  /* background-color: #d3ff6a; */
  /* background: linear-gradient(to top, #d7d6fb, #e5e4ff, #effcd3, #e2ffa0); */
  padding: 20px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center; /* Center elements horizontally */
  justify-content: center; /* Center elements vertically */
  text-align: center;
  cursor: url('/storage/Artboard3.png'), pointer !important;
}

.heritage-section .middle h2 {
  margin-top: -30%;
  font-size: 28px;
  color: #1c1c1a;
  margin-bottom: 10px;
}

.heritage-section .middle p {
  text-align: justify; /* Makes the text justified */
  width: 100%; /* Adjust width to take up more space */
  max-width: 90%; /* Limits the max width of the text for better readability */
  font-size: 16px;
  color: #1c1c1a;
  line-height: 1.5;
  font-family: 'GeneralSansRegular';
  margin-top: 24.674px !important;
}

/* New Two-Column Section */
.new-two-column-section {
  display: flex;
  justify-content: center;
  align-items: stretch; /* Ensure columns have equal height */
  background-color: #f6f5e9;
  gap: 20px;  /* Unified gap for new-two-column-section */
  /* margin: 20px auto; */
  max-width: 3000px;
  height: 100%;
  border-radius: 15px;
}

.column-1 {
  flex: 1;
  padding: 20px;
  background-color: #f6f5e9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  /* border: 1px solid #bebebe; */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(to top right, #f6f5e9, #f6f5e9, #effcd3, #e2ffa0); */
  /* background: linear-gradient(to bottom, #f6f5e9,#fffde6, #effcd3, #e2ffa0); */
  /* background-color: #d3ff6a; */
  /* background: linear-gradient(to bottom, #d7d6fb,#e5e4ff, #effcd3, #e2ffa0); */
  /* background: linear-gradient(to top right, #d7d6fb, #effcd3, #e2ffa0, #effcd3); */
  /* background: radial-gradient(circle at top right, #d7d6fb, #effcd3, #e2ffa0, #effcd3); */
  border-radius: 15px;
  display: flex;
  align-items: center;
  flex-direction: column;
  cursor: url('/storage/Artboard3.png'), pointer  !important;
}
.column {
  flex: 1;
  padding: 10px;
  background-color: #f6f5e9;
  /* border: 1px solid #bebebe; */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  /* background: linear-gradient(to top left,  #f6f5e9, #f6f5e9, #effcd3, #e2ffa0); */
  /* background: linear-gradient(to bottom, #f6f5e9, #fffde6, #effcd3, #e2ffa0); */
  /* background-color: #d3ff6a; */
  /* background: linear-gradient(to bottom, #d7d6fb, #e5e4ff, #effcd3, #e2ffa0); */
  /* background: linear-gradient(to top left, #d7d6fb, #effcd3, #e2ffa0, #effcd3); */
  /* background: radial-gradient(circle at top left, #d7d6fb, #effcd3, #e2ffa0, #effcd3); */
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  cursor: url('/storage/Artboard3.png'), pointer  !important;
}

.new-two-column-section .column h2, .new-two-column-section .column-1 h2 {

  text-align: center;
  font-size: 28px;
  color: #1c1c1a;
  margin-bottom: 20px
}

.new-two-column-section .column-content {
  font-family: 'GeneralSansRegular';
  font-size: 18px;
  color: #333;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.new-two-column-section .column-content-1 {
  text-align: justify;
  width: 90%;
  font-family: 'GeneralSansRegular';
  font-size: 16px;
  color: #1c1c1a;
  line-height: 1.5;
  
  /* margin-bottom: 58%; */
    /* shape-outside: circle(125px at center); 
  clip-path: circle(125px at center);     */
}

/* Infographic Container */
.infographic-container {
  margin-top: -2%;
  display: grid;
  height: auto;
  grid-template-columns: 1fr;
  gap: 15px;
  /* max-width: 500px; */
  /* margin-left: 8%; */
  width: 80%;
  padding: 15px;
  cursor: url('/storage/Artboard3.png'), pointer  !important;
}

/* Info item style */
.info-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  /* border: 1px groove #d3ff6a; */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.30), 0 2px 5px rgba(0, 0, 0, 0.2); /* Increased shadow depth */
  align-items: flex-start;
  border-radius: 12px;
  /* padding-top: 0px; */
  /* padding-bottom: 0px; */
  /* padding-right: 8px; */
  /* padding-left: 8px; */
  transition: transform 0.3s, box-shadow 0.3s;
}

.info-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 3px 7px rgba(0, 0, 0, 0.15); /* Enhanced shadow on hover */
}

/* Number style */
.info-number {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 100%;
  border-radius: 12%;
  font-size: 24px;
  font-weight: lighter;
  background-color: #d3ff6a;
  color: #1c1c1a;
  font-family: 'GeneralSansRegular';
  margin-right: 20px;
}

/* Title style */
.dropdown-title {
  font-family: 'GeneralSansRegular';
  -webkit-text-stroke: 0.5px black;
  font-size: 18px;
  color: #1c1c1a;
  padding: 10px 0;
  cursor: pointer;
  width: 100%;
  position: relative;
  list-style: none;
}

/* Styling for dropdown sections */
details {
  width: 100%;
  padding: 5px 0;
}

.dropdown-desc {
  font-size: 16px;
  color: #1c1c1a;
  margin-top: -10px;
  /* padding-left: 10px; */
  transition: 0.3s ease-out;
}

/* Expand/collapse symbols */
details[open] summary::after {
  /* content: "-"; */
  font-size: 16px;
  font-weight: normal;
  position: absolute;
  right: 0;
  transition: 3s ease-in;
}

details summary::after {
  /* content: "+"; */
  font-size: 18px;
  font-weight: normal;
  position: absolute;
  right: 0;
  transition: 3s ease-out;
}



.circular-wrapper {
  margin-top: -135px;
  margin-bottom: -135px;
  justify-items: center;
  position: relative;
  height: 250px; /* Increased height */
  width: 250px; /* Increased width */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  background-color: #f6f5e9;
  z-index: 10;
  box-sizing: border-box;
  cursor: url('/storage/Artboard3.png'), pointer  !important;
  left: 40%;
  shape-outside: circle(50%);
  clip-path: circle(50%);
  margin-left: 20px;
 
}
.circular-img {
  position: absolute;
  width: 50%; /* Adjusted to fit in larger circle */
  height: 50%; /* Adjusted to fit in larger circle */
  cursor: url('/storage/Artboard2.png'), pointer  !important;
}

.circular-text {
  font-family: 'GeneralSansRegular';
  color: #807dff;
  font-size: 22px; /* Increased font size */
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}




/* .circular-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: rotate 10s linear infinite;
  text-align: center;
} */




.circular-text p {
  line-height: 1.6; /* Adjust line height to create spacing between lines */
  text-align: center; /* Center-aligns text if needed */
  margin: 0;
  padding: 0;
}


@keyframes rotate {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.circular-text span {
  position: absolute;
  left: 50%;
  font-family: 'GeneralSansRegular';
  font-size: 22px;
  transform-origin: 0 125px; /* Adjusted radius to spread around 300px */
}

* {
  margin: 0;
  padding: 0;

}


.additional-section {
  cursor: url('/storage/Artboard3.png'), pointer  !important;
  /* margin-top: 56.229px; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6f5e9; /* Light background color for contrast */
  /* padding: 30px; */
  margin-top: 30px;
  margin-bottom: 25px;
  width: 100%;
  border-radius: 10px;  
}.additional-content {
  text-align: center;
width: 100%;
}.additional-title {
  font-family: 'GeneralSansRegular';
  font-size: 28px;
  color: #807dff;
  margin-bottom: 10px;
}.additional-text {
  font-family: 'GeneralSansRegular';
  font-size: 16px;
  color: #333;
  line-height: 1.6;
  text-align: justify;
}.image-section {
  position: relative; /* Set positioning context for absolute children */
  display: flex;
  justify-content: center; /* Center the image */
  margin: 20px auto; /* Add margin to separate from other sections */
  cursor: url('/storage/Artboard2.png'), pointer  !important;
}.responsive-image {
  width: 100%; /* Set width to 80% of its container */
  height: auto; /* Maintain aspect ratio */
  border-radius: 15px; /* Optional: rounded corners for the image */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: shadow for depth */
  cursor: url('/storage/Artboard3.png'), pointer  !important;
}.svg-icon {
  position: absolute; /* Position absolutely relative to the parent */
  left: 2.5%;
  bottom: 0%; /* Adjust as necessary to position correctly */
  width: 50%; /* Set width to scale the SVG size */
  height: auto; /* Maintain aspect ratio */
  z-index: 1; /* Ensure it appears on top of the image */
  border-bottom-left-radius: 15px;
}.title {
  font-family: 'BoskaRegular'; /* Use appropriate font */
  font-size: 28px; /* Adjust title size */
  fill: #1c1c1a; /* Text color */  
}.description {
  font-family: 'GeneralSansLight'; /* Use appropriate font */
  font-size: 16px; /* Adjust description size */
  fill:  #1c1c1a; /* Text color */
}
/* .content-title {
margin-top: 5%;
  font-family: 'GeneralSansRegular';
  font-weight: bold;
  font-size: 28px;
  color: #807dff;
  flex-basis: 40%;
}.content-title2 {
  margin-top: 5%;
      font-family: 'GeneralSansRegular';
      font-weight: bold;
      font-size: 28px;
      color: #807dff;
      flex-basis: 40%;
      justify-content: flex-end;
}.content-description {
  font-family: 'GeneralSansRegular';
  font-size: 16px;
  color: #1c1c1a;
  flex-basis: 55%;
  line-height: 1.5;
} till this part */

/* .new-two-column-section .column-1 {
  flex: 1;
  padding: 10px;
  background-color: #d3ff6a;
  border-radius: 8px;
  max-height: 500px;
  height: 400px;
  width: 100%;
} */
/* .new-two-column-section .column {
  flex: 1; 
  padding: 10px;
  background-color: #d2ff6a00;
  max-height: 500px;
  width: 100%;
}
 */ 
/* .new-two-column-section .column-title {
  margin-top: 5%;
  margin-left: 30%;
  font-family: 'GeneralSansRegular';
  font-size: 28px;
  color: #6b7dfb;
  margin-bottom: 10px;
}.new-two-column-section .column-title-1 {
  margin-top: 5%;
  margin-left: 30%;
  margin-right: 5%;
  font-family: 'GeneralSansRegular';
  font-size: 28px; 
  color: #6b7dfb;
  margin-bottom: 10px;
}
.content-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 40px 20px;
  max-width: 100%;
  margin: 0 auto;
} */
/* Responsive Design for Banner and Heritage Sections */

/* 3840px - Very large screens */
/* @media (min-width: 2560px) {
  .banner-container {
    height: 500px;
  }
  .banner-title {
    font-size: 48px;
  }
  .banner-description {
    font-size: 28px;
  }
  .heritage-section {
    padding: 5%;
  }
  .heritage-section .left, .heritage-section .right, .heritage-section .middle {
    width: 30%;
  }
  .heritage-section .middle h2 {
    font-size: 42px;
  }
  .heritage-section .middle p {
    font-size: 22px;
  }
  .circular-wrapper {
    margin-top: -11%;
    margin-bottom: -11%;
    width: 400px;
    height: 400px;
  }
  .circular-text {
    font-size: 36px;
  }
  .circular-text span {
    font-size: 36px;
    transform-origin: 0 200px; /* Adjust origin for larger size */
  /* }
  .new-two-column-section {
    padding: 6.5%;
    gap: 3%;
  }
  .new-two-column-section .column h2 {
    font-size: 36px;
    margin-left: 25%;
  }
  .new-two-column-section .column-content, .new-two-column-section .column-content-1 {
    font-size: 22px;
  }
  .info-number {
    font-size: 42px;
  }
  .dropdown-title, .dropdown-desc {
    font-size: 24px;
  }
} */ 

/* 2560px */
/* @media (min-width: 1920px) and (max-width: 2559px) {
  .banner-container {
    height: 420px;
  }
  .banner-title {
    font-size: 42px;
  }
  .banner-description {
    font-size: 24px;
  }
  .heritage-section {
    padding: 4.5%;
  }
  .heritage-section .left, .heritage-section .right, .heritage-section .middle {
    width: 33%;
  }
  .heritage-section .middle h2 {
    font-size: 36px;
  }
  .heritage-section .middle p {
    font-size: 20px;
  }
  .circular-wrapper {
    margin-top: -13%;
    margin-bottom: -13%;
    width: 350px;
    height: 350px;
  }
  .circular-text {
    font-size: 34px;
  }
  .circular-text span {
    font-size: 34px;
    transform-origin: 0 175px;
  }
  .new-two-column-section {
    padding: 6%;
    gap: 2.5%;
  }
  .new-two-column-section .column h2 {
    font-size: 34px;
    margin-left: 28%;
  }
  .new-two-column-section .column-content, .new-two-column-section .column-content-1 {
    font-size: 20px;
  }
  .info-number {
    font-size: 38px;
  }
  .dropdown-title, .dropdown-desc {
    font-size: 20px;
  }
} */

/* 1920px */
/* @media (min-width: 1440px) and (max-width: 1919px) {
  .banner-container {
    height: 400px;
  }
  .banner-title {
    font-size: 36px;
  }
  .banner-description {
    font-size: 22px;
  }
  .heritage-section {
    padding: 4%;
  }
  .heritage-section .middle h2 {
    font-size: 32px;
  }
  .heritage-section .middle p {
    font-size: 18px;
  }
  .circular-wrapper {
    margin-top: -13.5%;
    margin-bottom: -13.5%;
    width: 300px;
    height: 300px;
  }
  .circular-text {
    font-size: 30px;
  }
  .circular-text span {
    font-size: 30px;
    transform-origin: 0 150px;
  }
  .new-two-column-section {
    padding: 5.5%;
    gap: 2%;
  }
  .new-two-column-section .column h2 {
    font-size: 30px;
  }
  .new-two-column-section .column-content, .new-two-column-section .column-content-1 {
    font-size: 18px;
  }
  .info-number {
    font-size: 36px;
  }
  .dropdown-title, .dropdown-desc {
    font-size: 18px;
  }
} */

/* 1440px */
/* @media (min-width: 1280px) and (max-width: 1439px) {
  .banner-container {
    height: 320px;
  }
  .banner-title {
    font-size: 32px;
  }
  .banner-description {
    font-size: 20px;
  }
  .heritage-section {
    padding: 3.5%;
  }
  .heritage-section .middle h2 {
    font-size: 28px;
  }
  .heritage-section .middle p {
    font-size: 16px;
  }
  .circular-wrapper {
    margin-top: -14%;
    margin-bottom: -14%;
    width: 260px;
    height: 260px;
  }
  .circular-text {
    font-size: 26px;
  }
  .circular-text span {
    font-size: 26px;
    transform-origin: 0 130px;
  }
  .new-two-column-section {
    padding: 5%;
    gap: 1.5%;
  }
  .new-two-column-section .column h2 {
    font-size: 28px;
  }
  .new-two-column-section .column-content, .new-two-column-section .column-content-1 {
    font-size: 16px;
  }
  .info-number {
    font-size: 32px;
  }
  .dropdown-title, .dropdown-desc {
    font-size: 16px;
  }
} */
/* @media (min-width: 1080px) and (max-width: 1279px) {
  .banner-container {
    height: 320px;
  }
  .banner-title {
    font-size: 32px;
  }
  .banner-description {
    font-size: 20px;
  }
  .heritage-section {
    padding: 3.5%;
  }
  .heritage-section .middle h2 {
    font-size: 28px;
  }
  .heritage-section .middle p {
    font-size: 16px;
  }
  .circular-wrapper {
    margin-top: -15%;
    margin-bottom: -15%;
    width: 260px;
    height: 260px;
  }
  .circular-text {
    font-size: 26px;
  }
  .circular-text span {
    font-size: 26px;
    transform-origin: 0 130px;
  }
  .new-two-column-section {
    padding: 5%;
    gap: 1.5%;
  }
  .new-two-column-section .column h2 {
    font-size: 28px;
  }
  .new-two-column-section .column-content, .new-two-column-section .column-content-1 {
    font-size: 16px;
  }
  .info-number {
    font-size: 32px;
  }
  .dropdown-title, .dropdown-desc {
    font-size: 16px;
  }
} */

/* 1080px */
/* @media (min-width: 768px) and (max-width: 1079px) {
  .banner-container {
    height: 300px;
  }
  .banner-title {
    font-size: 28px;
  }
  .banner-description {
    font-size: 18px;
  }
  .heritage-section {
    flex-direction: column;
  }
  .heritage-section .left, .heritage-section .right {
    width: 80%;
  }
  .heritage-section .middle {
    width: 100%;
    padding: 15px;
  }
  .circular-wrapper {
    margin-top: -15%;
    margin-bottom: -15%;
    width: 220px;
    height: 220px;
  }
  .circular-text {
    font-size: 24px;
  }
  .circular-text span {
    font-size: 24px;
    transform-origin: 0 110px;
  }
  .new-two-column-section {
    padding: 4%;
    gap: 1%;
  }
  .new-two-column-section .column h2 {
    font-size: 24px;
  }
  .new-two-column-section .column-content, .new-two-column-section .column-content-1 {
    font-size: 15px;
  }
  .info-number {
    font-size: 30px;
  }
  .dropdown-title, .dropdown-desc {
    font-size: 14px;
  }
} */

/* 768px */
/* @media (min-width: 480px) and (max-width: 767px) {
  .banner-container {
    height: 250px;
  }
  .banner-content {
    max-width: 80%;
  }
  .banner-title {
    font-size: 24px;
  }
  .banner-description {
    font-size: 16px;
  }
  .heritage-section {
    flex-direction: column;
    padding: 3%;
  }
  .heritage-section .left, .heritage-section .right {
    width: 90%;
  }
  .heritage-section .middle h2 {
    font-size: 24px;
  }
  .heritage-section .middle p {
    font-size: 15px;
  }
  .circular-wrapper {
    width: 180px;
    height: 180px;
  }
  .circular-text {
    font-size: 20px;
  }
  .circular-text span {
    font-size: 20px;
    transform-origin: 0 90px;
  }
  .new-two-column-section {
    flex-direction: column;
    gap: 5%;
  }
  .new-two-column-section .column h2 {
    font-size: 20px;
  }
  .new-two-column-section .column-content, .new-two-column-section .column-content-1 {
    font-size: 14px;
  }
  .info-number {
    font-size: 28px;
  }
  .dropdown-title, .dropdown-desc {
    font-size: 14px;
  }
} */
@media only screen and (max-width: 479px) {
  /* Adjust body to remove extra padding and ensure better fit */
  body {
    font-size: 14px; /* Adjust font size for readability on small screens */
  }
  
  /* Banner container adjustments */
  .banner-container {
    height: 200px;
    padding: 10px;
    border-radius: 10px;
  }
  .banner-content{

    padding: 20px; /* Add padding for some spacing */
    border-radius: 8px; /* Optional: rounded corners */
    z-index: 2; /* Ensure it appears above the image */
    position: relative;
    max-width: 90%; /* Optional: restrict the width */
    text-align: justify; /* Optional: center text */
  }
  .banner-title {
    font-size: 22px;
  }
  .banner-description {
    font-size: 14px;
    text-align: justify; /* Optional: center text */
  }

  /* Specific changes to Heritage Section for responsiveness */
  .heritage-section {
    flex-direction: column; /* Stack elements vertically */
    padding: 5%; /* Adjust padding */
    margin-bottom: 10px; /* Add space after the section */
    align-items: center; /* Center align all items */
  }

  .heritage-section .container {
    flex-direction: column; /* Stack inner containers vertically */
    gap: 15px;
    width: 100%; /* Full width for mobile */
  }
  
  .heritage-section .left, 
  .heritage-section .right {
    width: 100%; /* Ensure each part is full-width on mobile */
    margin: 10px 0; /* Space between stacked sections */
    padding: 10px;
  }
  .heritage-section .middle {
    width: 100%;
    background-color:  #d3ff6a; /* Light green background */
    padding: 20px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .heritage-section .middle h2 {
    font-size: 22px; /* Adjust text size */
  }
  
  .heritage-section .middle p {
    font-size: 14px; /* Adjust text size */
  }


  
  
  .new-two-column-section .column h2, .new-two-column-section .column-1 h2 {
    font-size: 20px;
    margin-left: 0;
    text-align: center;
  }

  .circular-wrapper {
    width: 200px;
    height: 200px;
    margin: 0 auto;
  }

  .circular-text {
    font-size: 22px;
  }

  .infographic-container {
    width: 100%;
    margin: 0;
    padding: 10px;
  }

  .info-item {
    padding: 5px;
  }

  .info-number {
    font-size: 24px;
  }

  .dropdown-title {
    font-size: 16px;
  }
  .text-philosophy{
    margin-top: 24.674px !important;
  }
}

@media (max-width: 768px) {
  body {
    padding: 0 !important;
  }
  .heritage-section {
    padding: 30px !important;
  }
  .heritage-section .left,
  .heritage-section .middle,
  .heritage-section .right{
    margin: 0 !important;
    padding: 0 !important;
  }
  .circular-wrapper {
    left: 0 !important;
    height: 250px !important;
    width: 250px !important;
  }
  .new-two-column-section {
    flex-direction: column;
    padding: 30px !important;
  }
  .skin-rituals {
    margin: 30px !important;
  }
  .additional-text ,
  .additional-title {
    margin: 25px !important;
  }

  .column-1 {
    padding: 25px !important;
  }
  .image-section {
    margin: 30px !important;
  }
  .heritage-section .middle h2 {
        margin-top: 0 !important;
        margin-top: 20px !important;
    }
    .heritage-section .middle p {
        margin-bottom: 20px !important;
    }
}