.design-section {
  padding: 50px 20px;
}

h1{
  text-align: center;
  padding: 3rem;
  font-size: 2.5rem;
  color: #005;
}

 .design-content {
  display: flex;
  flex-direction: row; 
  align-items: center;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto; 
}

.designimage-container {
  flex: 1; 
  margin-right: 20px; 
}

.designimage-container img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.designtext-container {
  flex: 1; 
  margin-left: 20px; 
  /* height: 500px; */
  max-height: 600px; /* Set a max height for container */
  overflow: hidden; /* Hide overflow initially */
  position: relative; /* Ensure proper positioning for absolute buttons */
}  

.text-content {
  padding-right: 30px; /* Adjust padding to accommodate buttons */
  overflow-y: scroll; /* Enable vertical scrolling */
  max-height: 600px; /* Ensure content does not exceed container height */
  margin-right: -20px; /* Adjust for scrollbar width */
  pointer-events: none; 
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none;  /* For Internet Explorer and Edge */
}

.text-content::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}

.text-content::-webkit-scrollbar {
  width: 0; /* Ensure no width for scrollbar in Chrome, Safari, and Opera */
}

/* .text-content::-webkit-scrollbar-track {
  background: transparent; 
}

.text-content::-webkit-scrollbar-thumb {
  background-color: transparent; 
} */

.read-more-btn,
.show-less-btn{
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  right: 10px;
  pointer-events: auto;
}


p {
  font-size: 18px;
  text-align: justify;
  /* margin-bottom: 20px; */
}

.design-content2 {
  display: flex;
  flex-direction: row; /* Set flex direction to row */
  align-items: center;
  justify-content: center;
  max-width: 1300px;
  margin: 0 auto;
}

.designimage-container2 {
  flex: 1; /* Set flex-grow to 1 to allow the image container to grow */
  margin-left: 20px;
}

.designimage-container2 img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
}

.designtext-container2 {
  flex: 1; /* Set flex-grow to 1 to allow the text container to grow */
  margin-right: 20px;
  max-height: 600px; /* Set a max height for container */
  overflow: hidden; /* Hide overflow initially */
  position: relative; /* Ensure proper positioning for absolute buttons */
}

.expert{
  background-image: url(images/back3.jpg);
  background-size: 100% 100%;
  /* background-size: contain; */
  height: 200px;
  background-position: fixed;
}

h2{
  text-align: center;
  padding: 1.5rem;
  padding-bottom: 0.5rem;
  font-size: 2.5rem;
  color: #005;
}
.expert p{
  text-align: center;
  width: 800px;
  margin: 0 auto;
  font-size: 18px;
}

@media (max-width: 768px) {
  .design-section {
    padding: 20px;
  }
  
  h1{
    padding: 1.5rem;
    font-size: 1.5rem;
  }
  
  .design-content {
    display: flex;
    flex-direction: column; 
  }
  
  p {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  .designimage-container {
    margin-right: 0px;
  }
  

  .designtext-container {
    max-height: none; /* Remove max height on smaller screens */
    overflow: visible; /* Show all content */
    margin-left: 0px;
  }
  .text-content {
    overflow-y: visible; /* Remove scrolling */
    max-height: none; /* Show all content */
    /* margin-right: -20px; */
    pointer-events: auto; /* Enable interactions */
  }
  .designtext-container2 {
    max-height: none; /* Remove max height on smaller screens */
    overflow: visible; /* Show all content */
    margin-left: 0px;
  }
  .show-less-btn, .read-more-btn{
    display: none;
  }
  .design-content2 {
    display: flex;
    flex-direction: column-reverse; 
  }
  
  .designimage-container2 {
    margin-left: 0px;
  }
  
  .designtext-container2 {
    margin-right: 0px;
  }
  
  .expert{
    height: auto;
  }
  .expert p{
    width: 100%;
    font-size: 16px;
    padding-bottom: 50px ;
  }
 
  h2{
    padding: 1.5rem;
    padding-bottom: 0.5rem;
    font-size: 1.5rem;
  }
 
}


.circle-bullet {
  list-style-type: circle;
  display: list-item;
  margin-left: 20px; 
}
.square-bullet {
  list-style-type: square;
  display: list-item;
  margin-left: 20px; 
}
.disc-bullet {
  list-style-type: disc;
  display: list-item;
  margin-left: 20px; 
}