:root{
  --font-family: "poppins", sans-serif;
  --font-weight: 400;
  --font-style: normal;
}

*{
   font-family: var(--font-family);
   font-weight: var(--font-weight);
   box-sizing: border-box ! important;
}


html{
  scroll-behavior: smooth;
}

body{
  margin:0px ! important;
}

main{
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right); 
  margin-bottom:100px !important;
}

section{
  margin-top:0px ! important; 
}



.slideVideo{
      width:100% ! important;
      aspect-ratio:16/9;
      object-fit: contain ! important;
      
  }
  
 .podcastDiv{
    width:100% ! important;
    display: flex ! important;
    gap:20px !important;
    flex-wrap: nowrap ! important; /* Prevents wrapping to the next line */
    
    h3, img{
       white-space: nowrap ! important; /* Keeps the text on a single line */
       flex-shrink: 1 ! important; /* Allows the item to scale down to fit the row */
    }
    
    
 }
 
 
 .aDs{
   width:100% ! important;
   height:360px ! important;
   margin-top:70px ! important;
   background: blue;
   display: grid ! important;
   place-items: center ! important;
   color: white;
   font-weight:bold ! important;
 }
 
  .myCard{
       --cards-bg-color: #DBDBDB;
       --arrow-bg-color: orangered;
       --cards-title-color: black;
       
       h1{
          font-size:10px ! important;
          color: var(--cards-title-color);
      }
  }
  
   .myCarousel{
       width:100%;
       overflow-x:auto;
       margin: .5em auto;
       display: flex;
       gap: 1em;
       scroll-behavior: smooth;
       anchor-name: --myCarousel;
       scroll-snap-type: x mandatory;
       scroll-marker-group: after;
   }
   
   .myCarousel::-webkit-scrollbar{
       display: none ! important;
   }
   
   .myCarousel::scroll-marker-group{
       display: flex;
       justify-content: center;
       gap:.5em;
       margin-top:-3px ! important;
   }
   
   .myCard::scroll-marker{
       content: '';
       width:1em;
       height:1em;
       border-radius:50%;
       background-color:yellow;
      
   }
   
    .myCard::scroll-marker:target-current{
      background-color: orangered;
   }
   
   
   .myCarousel::scroll-button(right){
       content:'→' ! important;
       background-color: yellow;
       font-size:20px ! important;
       font-family: consolas;
       width:60px;
       height:60px;
       border-radius:50%;
       padding: .1em;
       cursor: pointer;
       position: absolute ! important;
       top:34%;
       right: 9% ! important;
       z-index: 10 ! important;               
   }
   
   .myCarousel::scroll-button(left){
       content:'←' ! important;
       background-color: yellow;
       font-size:20px ! important;
       font-family: consolas;
       width:60px;
       height:60px;
       border-radius:50%;
       padding: .1em;
       cursor: pointer;
       position: absolute ! important;
       top:34%;
       left:8% ! important;
       z-index: 10 ! important;               
    
       
   }
   
   
   .myCarousel::scroll-button(right):disabled, .myCarousel::scroll-button(left):disabled{
        opacity: 0.5;
        cursor: pointer;
    }
   
   .myCard{
       flex: 0 0 20em;
       height: 15em;
       background-color: var(--cards-bg-color);
       padding: 1em;
       border-radius: 1em;
       text-align: center;
       align-content: center;
       scroll-snap-align: start;
       
   }
   
.d-block, .card-body, video, #dImg, #cutImg, #politicoImg, #mImg{
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
	border-radius: 12px;
}

.container-fluid h1{
	padding-top: 0px;
}


a{
	color:black !important;
	font-weight: 500 !important;
	text-decoration: none !important;
	
}

#lN{
  font-weight:500 ! important;
}

#hedin{font-size:2vw !important; margin-top:0px;
    font-weight:bold;
}

#introI{font-size:2vw !important; margin-top:5px; font-weight:normal;}

em{
    color:green;
    font-style:normal;
}

.row h1{
	font-size: 2vw;	
}

.col-sm-7{
    background:whitesmoke ! important;
    border-radius:12px ! important;
   
}


#mic{
  width:10% ! important;
}
	
#hTd{width: 300px;}


#detailImg{
    width:100% ! important;
    height: auto ! important;
    aspect-ratio: 16/9 ! important;
    margin-top:10px ! important;
}

img{width: 100%;}
	
#dImg{width: 100%; height:420px;}

	
#cutImg{width: 100%;}
	
#mTd{width: 200px;}
	
#mImg{width: 100%;}

video{width: 100%;}

	
#dRow{

	 width: 100%;
	 margin: auto;
	 margin-top:20px; 
	 align-content: center; 
	 align-items: center;	
		
  }
	
.vFluid{
    margin-top:-20px ! important;
}
	

.prodDiv{
	margin-top:0px;
	align-content: center; 
	align-items: center;
	}
	
.card-deck{
  margin-top:0px; 
  border-width:0px;
  border:none ! important;
}
	
.card-body{
  border:none ! important;

}

#pimg{
  width:100%;
  object-fit: scale-down;
  border-radius: 5px;
  margin-bottom: 10px;
}
	
#pimg:hover{
	transition: all 0.3s ease;
	transform: scale(1.4); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
	border-radius: 5px;	
}


#h1{padding-left:25px;}

#latest{
   padding-left:0px; 
}

#hE{padding-left:25px; padding-top:50px;}


	

marquee{
    padding-top:40px;
}

.carousel-control-prev, .carousel-control-next{
    margin-top:80px ! important;
}
	
.firstSection{
    
   padding-top:20px ! important;
   padding-bottom:0px;
   
}


.secondSection{
   padding-top:0px ! important;
   padding-bottom: 10px;
   
}


.thirdSection{
    
   padding-top:10px ! important;
   padding-bottom: 10px;
   
}


.fourthSection{
   padding-top:10px ! important;
   padding-bottom: 100px;
   
}

.vidDiv{
 	padding-top:20px ! important;
	background: aliceblue ! important;;
    border-radius:12px ! important;;
}

.metroDiv{
   padding-top:100px ! important;
   padding-bottom: 0px;	
}
	
.latestDiv{
	padding-top:20px ! important;
	background: aliceblue ! important;;
    border-radius:12px ! important;;
}


 .content{
	display: none !important;
 }

 #ch{
	display: none !important;
 }

  #ch:checked ~ .content{
	display: block !important;
 }

#ch:checked ~ label{
	display: none !important;
 }


 label{
	display: inline-block !important;
	color: white !important;
	cursor: pointer !important;
	background: red !important;
	padding: 3px 13px !important;
	border-radius: 12px !important;
	margin-top: 12px !important;
	width: 40% !important;

 }	


#body::first-letter{
  font-size: 1.5rem;
  font-weight: bold;
  color: brown;
}


	
 /*For Desktop View*/

@media screen and (min-device-width: 1025px){
    
main{
margin-bottom:100px !important;
}

marquee{
  	font-size: 1vw !important;
}
	
#mobile, .mobile {display: none;}

a{
	font-size: 1vw !important;
}

em{
	font-size: 0.8vw !important;
}

.secondSection{
    
   padding-left:100px ! important;
   
}

.row{
  
  
}

.row h1{
	font-size: 1vw ! important;	
}

.myRow{
 
}

.col-sm-7{
    background:whitesmoke ! important;
    margin-left:-48px ! important;
}

	
.polDiv{
    width:92% ! important;
}

.col-sm-5 h1, .col-sm-3  h1{
	padding: 0px;
	font-size: 1vw ! important;	
}

.carousel-item h3{
  font-size:1.3vw ! important;
}

#date{
    font-size: 0.2vw !important;
}


 label{
  width: 20% !important;

 }	


.d-block, video{
  width:100% !important;
  max-height:510px !important;
  margin-top:0px;
}	

#hTd{
 margin-top:0px;
 width: 190px !important;
   
}

#mTd{
    margin-top:0px;
   
}

#h1{
  margin-left:-50px ! important;
}


#vh1{
  margin-left:50px ! important;
  margin-top:20px ! important;
  margin-bottom:-50px ! important;
}

#hedin{
   font-size: 0.5vw !important;
   margin-top:0px;
}

#introI{
    font-size:0.2vw !important;
     margin-top:5px;
    
}

	
#introP{
	 margin-top:0px;
}


#latest{
    font-size: 0.6vw !important; 
    margin-top:0px;
    
}



#lN{
    font-size:5vw !important;
    margin-top:0px;
   
}

	
#dRow{
    margin-top:42px;
    width:92% ! important;
}
	
	
.prodDiv{
	margin-top:0px;
	align-content: center; 
	align-items: center;
	}



#mImg{
   
}


#dImg{
    height:500px !important;
    
}




#pimg{
  width:100% !important;
  height: auto !important;
  max-height:220px !important;
  margin-top:0px;
  object-fit: scale-down;
  border-radius: 5px;
  margin-bottom: 0px;
}	


#cutImg{
  width:100% !important;
  height: auto !important;
  max-height:380px !important;
  margin-top:0px;
  object-fit: scale-down;
  border-radius: 5px;
  margin-bottom: 0px;
}	

#politicoImg{
    
  width:150px;
  max-height:220px !important;
  margin-top:0px;
  object-fit: scale-down;
  border-radius: 5px;
  margin-bottom: 0px; 
}

.card-body{
  width:100%;
  max-height: 320px;
}

	
.card-body h1{
  font-size:1vw ! important;

}

.card-title{
  margin-top:0px;
  
}

.card-footer{
	margin-top:60px;
}	



    
}
	

	
/* For Tablet Landscape View */
@media only screen and (min-device-width: 641px)
and (max-device-width: 1024px) {
    
 	
.card-body h1{
  font-size:1vw ! important;

}

}
	
	

/* For Tablet Portrait View */
@media only screen and (min-device-width: 421px)
and (max-device-width: 640px) {
	
	
.card-body h1{
  font-size:2vw ! important;

}


}
		

@media screen and (max-width:420px){
	
#desk, .col-sm-3{display: none;}

main{
   padding-left:5px ! important;
   padding-right:5px ! important;
}


marquee{
  margin-top:0px ! important;
  font-size: 3vw ! important;
}



 .aDs{
   width:100% ! important;
   height:200px ! important;
   margin-top:50px ! important;
 }
 
 
.carousel{
  margin-top:-18px ! important;
}

.carousel-item h3{
    font-size:4vw ! important;
}

h1{
 font-size:3.2vw ! important;
}

h3{
  font-size:4.5vw ! important;
}

.col-sm-7{
  margin-bottom:20px ! important;
   
}

 #vidVid, #dImg, #cutImg, #politicoImg, #mImg{
	width: 100%;
	height: auto;
	aspect-ratio: 10/8;
	border-radius: 12px;
}

.d-block, video{
  	width: 100%;
	height: auto;
	aspect-ratio: 10/7;
	border-radius: 12px;  
}


#topVid{
    margin-top:-10px ! important;
}

.autor{
    font-size:3vw ! important;
}

#hTd{
    width: 200px; 
   font-size:4.5vw !important;
    
}

#cutImg{width: 100%;}


#mTd{
    width: 200px;
    font-size:2.6vw !important;
}

#mImg{width: 100%;}


a {color:black !important;}


em{
   font-size:2.4vw ! important;
}
	

#lN{
    font-size:3vw !important;
    margin-top:0px;
   
}



#pimg{
  width:100%;
  max-height:350px;
  margin-top:0px;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
  
}

#politicoImg{
  width:100%;
  max-height:320px;
  margin-top:0px;
  margin-bottom: 10px;
  object-fit:contain;
  border-radius: 5px;
   
}


#hedin{font-size:4vw !important; margin-top:0px;}

#introI{font-size:4vw !important; margin-top:5px;}

#h1{
    font-size:6vw !important; 
    margin-top:-10px ! important; 
    padding-left:0px ! important;
}

#vh1{
    font-size:6vw !important; 
    margin-top:0px; 
    padding-left:14px ! important;
}


#latest{font-size:6vw !important; margin-top:0px;}

#hE{padding-left:0px; font-size:6vw !important; margin-top:0px; }

#dRow{
  margin-top:0px ! important;
}

#body{
  font-size:3vw ! important;
}

.vFluid{
    margin-top:-50px ! important;
}

.prodDiv{
	margin-top:0px;
	align-content: center; 
	align-items: center;
	}
	
.card{
    height:auto ! important;
    margin-top:-10px ! important;
}

.card p{
   
}
	
.card-deck{
  margin-top:10px; 
  border-width:0px;
}
	
.card-body{
  max-height:450px;

}

.card-body h1{
  font-size:3.2vw ! important;

}

#vidVid{
    max-height:150px ! important;
}


#introP{
	font-size:3.2vw; margin-top:0px;
}


#date{
    font-size: 1.1vw !important;
}


.desK{
    display:none ! important;
}

.metroDiv{
  margin-top:-70px ! important;
}

label{
 
}

}