body {
   background-color: #fff;
   }
   a {
      color: #FD5E00;
      text-decoration: none;
   } /*ye latest styling code hai*/
   a:hover,
   a:focus {
      color: #f57207;
      text-decoration: underline;
   }

   ul li {
   list-style: circle;
   font-size: 14px;
   }
   ul li img {
   cursor: pointer;
   }
   .modal-body {
   padding: 5px !important;
   }
   .modal-content {
   border-radius: 0;
   }
   .modal-dialog img {
   text-align: center;
   margin: 0 auto;
   }
   .controls {
   width: 50px;
   display: block;
   font-size: 11px;
   padding-top: 8px;
   font-weight: bold;
   }
   .next {
   float: right;
   text-align: right;
   }
   /*override modal for demo only*/
   .modal-dialog {
   max-width: 50%;
   padding-top: 90px;
   }
   @media screen and (min-width: 768px) {
   .modal-dialog {
   width: 50%;
   padding-top: 90px;
   }
   }
   a.anchor {
   display: block;
   position: relative;
   top: -50px;
   visibility: hidden;
   }
   .link-style{
      color: #FD5E00;
      text-decoration: none;
   }
   .center {
      margin: auto;
      text-align: center;
      margin-top: 0cm;
   }
   @import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');
   .cool-font{
      font-family: 'Audiowide', cursive !important;
   }
   #main-content ul > li {
      padding: 0.1%;
      text-align: justify;
      margin-top: 2%;
   }

   #main-content li > h6 {
      padding: 0.1%;
   }

   .my-btn {
      background-color: #FD5E00; 
      color: white; 
      border: 2px solid #FD5E00; 
      border-radius: 10px;
      transition: all 0.3s ease; 
      text-align: center;
      font-size: inherit;
      margin: 5px; 
      padding: 7px 7px; 
      display: flex; /* Ensures buttons behave flexibly */
      align-items: center; /* Centers text vertically */
      justify-content: center; /* Centers text horizontally */
      min-width: 100px; /* Prevents buttons from collapsing */
      flex-grow: 1; /* Allows buttons to expand evenly */
  }
  
  /* Container for button panel */
  .button-panel {
      display: flex;
      flex-wrap: wrap;  /* Ensures buttons move to the next line when screen is small */
      justify-content: center; /* Centers the buttons */
      gap: 10px; /* Adds spacing between buttons */
  }
  
  /* Make buttons stack on smaller screens */
  @media (max-width: 750px) {
      .button-panel {
          flex-direction: column; /* Stack buttons vertically */
          align-items: center; /* Center them */
      }
  
      .my-btn {
          width: 70%; /* Make buttons take up more width */
      }
  }
  
   .setup{
      width: 28%;
      float: right;
      padding: 0;
      position: relative;
      margin: 20px;
      right: 0;
      border-radius: 5px;
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   }
   h2{
      margin-bottom: 10px;
      margin-top: 10px;
   }
   .carousel{
      height: auto !important;
   }
   .para-title{
      font-size: 1rem;
   }
   .recording-section {
     padding-top: 20px; 
     margin: 5px 10px; 
     font-family: Arial, sans-serif;
     display: flex;
     align-items: flex-start;
     gap: 10px;
 }
   
   .recording-content {
      flex: 1;
   }
 
   .recording-title {
      color: #333;
      font-size: 22px;
      font-weight: bold;
      font-family: 'Arial', sans-serif;
   }
 
   .recording-paragraph {
      line-height: 1.6;
      color: #444;
      font-size: 14px;
      font-family: 'Arial', sans-serif;
   }
   
   .recording-list-title {
      font-size: 18px;
      color: #333;
      margin-top: 20px;
   }
   
   .recording-list {
      padding-left: 20px;
      color: #444;
      font-family: 'Arial', sans-serif;
   }
   
   /* Image container adjustments */
   .recording-image-container {
      flex: 0 0 25%; /* Adjusted to take up less space */
      text-align: center;
      margin-left: -150px; /* Removed negative margin */
      display: flex;
      justify-content: center; /* Centers the image */
      align-items: center;
   }

   /* Image styling */
   .recording-image {
      max-width: 100%; /* Reduced width to prevent overlap */
      height: auto; /* Maintain aspect ratio */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      margin-top: -10px; /* Moves image slightly up */
      margin-left: -80px;
   }

   /* Make it responsive */
   @media (max-width: 768px) {
      .recording-image-container {
         flex: 0 0 100%; /* Allow full width */
         margin-left: -100px; /* Reset margin */
      }

      .recording-image {
         max-width: 100%; /* Scale image properly */
         margin-top: 0; /* Reset margin */
         margin-left: -60px;
      }
   }