.carousel{
		  	margin-bottom:5em;
		  }
    .carousel-item {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 15px;
    }
      .news-card {
      position: relative;
      color: white;
      background-size: cover;
      background-position: center;
      border-radius: 8px;
      overflow: hidden;
    }
    .news-card .content {
      position: absolute;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
      padding: 1em;
      width: 100%;
    }
    .category-badge {
      position: absolute;
      top: 10px;
      left: 10px;
      background-color: #28a745;
      padding: 0.3em 0.6em;
      border-radius: 3px;
      font-size: 1em;
    }
    .icon {
      font-size: 1em;
      color: white;
    }
    .small-news-card {
      position: relative;
      color: white;
      background-size: 100% 100%;
      background-position: center;
      border-radius: 8px;
      overflow: hidden;
	height: 29.3vh;
    margin-top: -7px;
    }
    .small-news-card .content {
      position: absolute;
      bottom: 0;
      background: rgba(0, 0, 0, 0.2);
      padding: 0.5em;
      width: 100%;
    }
		 div .img20{
		  	height: 59vh;
    width: 64.3vw;
    background-size: 100% 100%;
			
		  }
		  .left{
		  	position:relative;
			  left:-63px;
			  background-color:black;
		  }
		  .right{
		  	position:relative;
			  right:-63px;
			  background-color:black;
		  }
		 .p{
		  	display:none;
		  }
		  
.content:hover  .p {
  display: block !important;
	overflow:hidden;
	height:10vh;
}
	@media (max-width: 1024px) {
  .carousel-item {
    flex-direction: column;
    gap: 10px;
  }

  .news-card, .small-news-card {
    border-radius: 5px;
  }

  div .img20 {
    height: 50vh ;
    width: 64vw ;
  }

  .small-news-card {
    height: 25vh;
  }

  .left, .right {
    left: 0;
    right: 0;
  }
}
@media (min-width: 1300px) and (max-width: 1439px) {

    div .wid{
        width: 72em !important;
        }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .carousel-item {
    flex-direction: row;
    gap: 12px;
  }
.dispan{
    display:none;
}
#stickyContainer{
    display:none;
}
.ads5{
									
	height:27vh; 
	width:83vw !important; 
	margin-bottom:30px ; 
	margin-left:4em ; 
	margin-top:-2em ;
								}
  .news-card {
    height: auto;
    border-radius: 6px;
  }

 div .img20 {
    height: 40vh !important;
        width: 64vw !important;
  }

  .small-news-card {
    height: 24vh;
    width: 49vw;
  }

  .left, .right {
    background-color: black;
    width: 40px;
    height: 40px;
  }

  div .category-badge {
    font-size: 1em;
    padding: 0.3em 0.5em;
  }
  img .imgin{
            height:50vh ;
            width:86vw ;
        }
		.sp{
			margin-left:-3em !important;
		}
		.wid{
			width:57em !important;
		}
		div .ads5{
									
			height:27vh; 
			width:83vw !important; 
			margin-bottom:30px ; 
			margin-left:4em ; 
			margin-top:2em ;
								}
		div.ad12{
		    height: 48vh !important;
        width: 80vw !important;
        margin-bottom: 2em;
        margin-left: 4em;
        border-radius: 5px;
		}
}
@media (min-width: 1497px) and (max-width: 1596px) {
    .wid{
    width:80em !important;
    }
}
@media (min-width: 1440px) and (max-width: 1496px) {
    .wid{
    width:77em !important;
    }
}
@media (min-width: 1025px) and (max-width: 1439px) {
  .carousel-item {
    flex-direction: row;
    gap: 15px;
  }

  .news-card {
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
  }

  div .img20 {
    height: 59vh;
        width: 64vw;
  }

  .small-news-card {
    height: 29vh;
    width: 30vw;
  }

  .left, .right {
    background-color: black;
    width: 50px;
    height: 50px;
  }

  div .category-badge {
    font-size: 1em;
    padding: 0.4em 0.7em;
  }
  .ads5{
									
			height:27vh; 
			width:83vw !important; 
			margin-bottom:30px ; 
			margin-left:4em ; 
			margin-top:-2em ;
								}
  .ad12{
      height: 48vh !important;
        width: 29vw !important;
        margin-bottom: 2em;
        margin-left: 4em;
        border-radius: 5px;
  }
  .wid{
			width:115% !important;
		}
		div .card2 {
            border: none !important; /* Remove card border */
            border-radius: 10px !important; /* Rounded corners */
            overflow: hidden !important; /* Ensure no overflow */
            min-width: 203px !important; /* Set a min width for cards */
            margin-right: 10px !important; /* Space between cards */
			background-color:#222327 !important;
			height: 43vh !important;
			width: 25vw !important;
			display:flex !important;
			flex-direction: row;
            flex-wrap: wrap;
			
        }
}
@media (max-width: 1024px) {
div .img20 {
    height: 56vh ;
    width: 64vw ;
  }
.small-news-card {
    height: 28vh;
    width: 30vw;
  }
  
   .left, .right {
    background-color: black;
    width: 50px;
    height: 50px;
  }

  div .category-badge {
    font-size: 1em;
    padding: 0.4em 0.7em;
  }
  .ads5{
									
			height:27vh; 
			width:83vw !important; 
			margin-bottom:30px ; 
			margin-left:4em ; 
			margin-top:-2em ;
								}
  .ad12{
      height: 48vh !important;
        width: 29vw !important;
        margin-bottom: 2em;
        margin-left: 4em;
        border-radius: 5px;
  }
  .wid{
			width:51em ;
		}
		div .card2 {
            border: none !important; /* Remove card border */
            border-radius: 10px !important; /* Rounded corners */
            overflow: hidden !important; /* Ensure no overflow */
            min-width: 203px !important; /* Set a min width for cards */
            margin-right: 10px !important; /* Space between cards */
			background-color:#222327 !important;
			height: 43vh !important;
			width: 25vw !important;
			display:flex !important;
			flex-direction: row;
            flex-wrap: wrap;
			
        }
}
/* For mobile devices */
@media (max-width: 768px) {
    .content h3, h4{
		        display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
		  }
		  
  .carousel-item {
    flex-direction: column;
    gap: 5px;
  }
	 .carousel{
		  	margin-bottom:3em;
		  }
  .news-card, .small-news-card {
    font-size: 0.9em;
  }

  div .category-badge {
    font-size: 0.9em;
    padding: 0.2em 0.4em;
  }
     div .imgin{
            height:50vh !important;
            width:90vw !important;
        }
  div .img20 {
    height: 35vh;
    width: 88vw;
  }

  .small-news-card {
    height: 20vh;
    width:100%;
  }
  wid{
			width:78em;
		}
}

/* For smaller mobile devices */
@media (max-width: 576px) {
  .news-card .content, .small-news-card .content {
    padding: 0.5em;
  }
	 .carousel{
		  	margin-bottom:1em;
		  }
		  .content h3, h4{
		        display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
		  }
		  div .imgin{
            height:35vh !important;
            width:91vw !important;
        }
.wid{
			width:40em;
		}
  .img20 {
    height: 33vh;
	  margin-bottom:1em;
  }

  .small-news-card {
    height: 29vh;
	  width:100%;
	  margin-right:-0.3em;
  }
	.disp{
		display:flex;
	}
	.wid20{
		width:53% !important;
		margin-right: -1.3em;
	}
	h3 a{
	 	font-size:0.7em;
	}
	.p{
		font-size:0.7em;
	}
}	

@media (min-width:321px) and (max-width: 375px) {
    
    .wid20{
		width:51% !important;
		margin-right: -1.3em;
	}
}