/* Updated Section Styling */
  .card-container {
    position: relative;
    overflow: hidden; 
    margin-top: 0px;
    width: 100%;
    margin: 0 auto;
    text-align: center;

  }
  .card-cross{
    position: relative;
    width: fit-content;
    margin-top: -50px;
    height: 580px;
    background-color: #19164d;
    --c: 90px; /* control the curvature (works with percentage) */
  aspect-ratio: 1;
  /* you can also update the 60%  */
  mask: radial-gradient(60% var(--c) at 50% var(--c),#0000 calc(100% - 2px),#000) 0 calc(-1*var(--c));
   scrollbar-width: none; /* Firefox */
   width: 100%;
     overflow-x: hidden;
  }
.card-cross::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
  .card-wrapper {
    position: absolute;
    top: 75px;
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    min-width: max-content;
    gap: 100px;
    position: relative;
    animation: slide-cards 60s linear infinite;
    box-sizing: border-box;
    /* margin-top: -290px; */
    animation-play-state: running; 
   
  }
  .card-wrapper:hover {
    animation-play-state: paused;
  }
  .animated-card {
    flex: 0 0 auto;
    width: 400px;
    height: 433px; 
    margin-right: 10px;
    padding: 0px;
    box-sizing: border-box;
    transition: transform 0.3s ease-in-out;
    z-index: 1; 
    margin-bottom: 0px;
    background: white; 
    
  }


 
  /* .cards-image{
   
   height: 180px;
  } */


  /* .cards-image img {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center ;
  } */




    .card-container h2 {
      font-size: 2rem;
      margin-bottom: 15px;
      font-weight: 600;
      color: #4440DB;
    }
    
    .card-container p {
  
      color: #020202;
      margin-bottom: 60px;
      margin-top: 30px;
    }

    
    
    @keyframes slide-cards {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    
  

    /* .card-info {
      
    
      padding: 25px;
      text-align: center;
      
    }
     */

    
    /* .card-user-info {
      display: flex;
      align-items: center;
      justify-content: start;
      width: 100%;
      height: auto;
      padding: 10px 0;
      border-bottom: 1px solid #ddd;
  }
    */
    /* .user-icon {
      display: flex;
      align-items: center;
      gap: 8px;
  } */
  /* .user-icon img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
} */
    
.user-icon p {
  font-size: 12px;
  color: #333;
  font-weight: 600;
  margin: 0;
}

/*     
  .card-date-info {
    display: flex;
    height: 30px;
    align-items: center;
    margin-left: 30px;
   
  } */


   .top-section {
      text-align: center;
      margin: 0;
      padding: 50px;
      height: 250px;
      clip-path: ellipse(100% 100% at 50% 0%); /* Curve on TOP */
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
      background-image: url('../../../public/assets/section0.png');
        


  }

  
  .top-section>p{
    color: white;
    font-size: 34px;
    line-height: 44px;
    font-weight: 600;
  }
  
  
  .bottom-section {
      text-align: center;
      margin: 0;
      padding: 10px;
      background-color: #4440DB;
      clip-path: ellipse(100% 50% at 50% 0%); /* Curved top */
      box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
  }
  
  
  /* .date-icon {
    width: 16px;
    height: 16px;
} */


.date-text {
  font-size: 12px;
  color: #666;
  margin: 0;
}
 
    
    /* Divider style */
.divider {
  margin-bottom: 20px;
  border: 0;
  border-top: 2px solid #ccc; 
  width: 90%; 
  margin-left: 10px; 
}

/* Existing styles */
.youtube-link {
  color: #ff0000;
  text-decoration: none;
  font-size: 1rem;
  display: block;
  margin-top: -120px; 
  margin-left: 10px;
}

.read-more-button{
  display: flex;
  justify-content: space-around;
  align-items: center;
   background-color: #ECECEC;
   width: 156px;
   height: 48px;
   margin-top: 31px;
   background-color: white;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
   border: none;
   cursor: pointer;
   
}
.read-more-button:hover{
  color: white;
  background-color: #4440DB;
}
.read-more-button>img{
 
  width: 15px;
  height: 15px;
 
}


  .card-desc{
    text-align: start;
    width: 314px;
    height: 58px;
    margin-top: 30px;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden; 
    text-overflow: ellipsis; 

  }
  @media screen and (max-width: 768px) {
    .card-wrapper {
      /* width: 130%;
      min-width: 177%; */
      gap: 50px;
      /* border: 1px solid red; */
    }
  
    .animated-card {
      width: 280px;
      height: 350px; /* Adjusted height for smaller screens */
    }
  
    .cards-image {
      margin-top: -10px;
      height: 140px;
    }
  
    .cards-image img {
      height: 160px;
      object-position: center;
    }
  
    .card-info {
      padding: 15px;
    }
  
    .card-user-info {
      padding: 8px 0;
    }
  
    .card-date-info {
      margin-left: 15px;
    }
  
    .card-desc {
      width: 250px;
      height: auto;
      margin-top: 20px;
    }
  
    .read-more-button {
      width: 130px;
      height: 42px;
      margin-top: 20px;
    }
  
    .read-more-button img {
      width: 12px;
      height: 12px;
    }
  
    /* Adjusted top section with curved effect */
    .top-section {
      
      height: 150px;
      padding: 10px;
      clip-path: ellipse(100% 100% at 50% 0%); 
      /* border: 1px solid red; */
    }
  



    .top-section > p {
      font-size: 26px;
      line-height: 36px;
    }
  
    .card-cross {
      height: 490px;
    }
  
    /* Adjusting the bottom-section to maintain symmetry */
    .bottom-section {
      clip-path: ellipse(120% 50% at 50% 100%); /* Mirroring the curve */
    }
  }


  @media screen and (min-width: 769px) and (max-width: 1024px) {
    .card-cross {
      height: 510px;
    }
  
    .card-wrapper {
      /* width: 156%;
      min-width: 156%; */
      gap: 70px;
      
      /* border: 1px solid red; */
    }
  
    .animated-card {
      width: 320px;
      height: 370px;
    }
  
    .cards-image {
      height: 160px;
     
    }
  
    .cards-image img {
      height: 160px;
      /* border: 1px solid red; */
      object-fit: cover;
      
    }
  
    .card-info {
      padding: 15px;
    }
  
    .card-desc {
      width: 280px;
      height: 60px;
      margin-top: 25px;
    }
  
    .card-desc p {
      font-size: 14px !important;
      line-height: 22px !important;
    }
  
    .read-more-button {
      width: 140px;
      height: 45px;
      margin-top: 0px;
    }
  
    .top-section {
      height: 200px;
      padding: 25px;
    }
  
    .top-section > p {
      font-size: 28px;
      line-height: 38px;
    }
  
    .user-icon p,
    .date-text {
      font-size: 11px;
    }
  }

  
  @media screen and (max-width: 660px) {
    .card-wrapper {
      /* width: 200%;
      min-width: 258%; */
      gap: 30px; /* Reduced gap */
      top: 62px;
     
    }
    
    .animated-card {
      width: 200px; /* Slightly wider for better content display */
      height: 250px; /* Adjusted height */
    }
    
    .cards-image {
      height: 90px; /* Reduced height */
    }
    
    .cards-image img {
      width: 100%;
      height: 100px; /* Adjusted height */
      object-position: center ;
  
    }
    
    .card-info {
      padding: 10px;
    }
    
    .card-user-info {
     
      gap: 5px;
      padding: 5px 0;
    }
    
    .user-icon {
      gap: 5px;
    }
    
    .user-icon img {
      width: 12px;
      height: 12px;
    }
    
    .user-icon p {
      font-size: 8px;
    }
    
    .card-date-info {
      font-size: 8px;
      margin-left: 0;
      height: auto;
    }
    
    .date-icon {
      width: 10px;
      height: 10px;
    }
    
    .date-text {
      font-size: 8px;
      margin-left: 5px;
    }
    
    .card-desc {
      width: 100%;
      height: auto;
      margin-top: 10px;
    }
    
    .card-desc p {
      font-size: 10px !important;
      line-height: 14px !important;
      margin: 5px 0 !important;
    }
    
    .read-more-button {
      width: 100px;
      height: 30px;
      margin-top: 15px;
      padding: 0 10px;
      font-size: 10px;
    }
    
    .read-more-button img {
      width: 8px;
      height: 8px;
    }
    
    .top-section {
      padding: 10px;
      height: 150px;
      margin-bottom: 80px;
    }
    
    .top-section > p {
      font-size: 16px;
      line-height: 24px;
     
    }
    
    .card-cross {
      margin-top: -100px;
      height: 360px;
      --c: 50px;
    }
  }