/*

Template Name: Tcn News

File: Layout CSS

Author: TemplatesOnWeb

Author URI: https://www.templateonweb.com/

Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>

*/



/*********************center_home****************/



.video{

width:60px;

height:60px;

line-height:60px; 

 }

.schedule2_left1_left3{

bottom:18%; 

 }

.schedule2_left1_left4{

border-radius:0px 0px 10px 10px; 

 }

 

.nav-tabs .nav-link.active {

    color: #000;

	border:none;

    border-bottom:3px solid var(--blue);

	font-weight:bold;

}

.nav-tabs .nav-link {

  border:none;

  border-bottom:3px solid transparent;

  color: #000;

  line-height:1.2em;

  padding: 0.3rem 1rem;

}

.nav-tabs .nav-link:hover {

border:none;

border-bottom:3px solid var(--blue);

}





.scroll-container {

            display: flex;

            overflow-x: auto;

            white-space: nowrap; /* Prevent items from wrapping to the next line */

            cursor: grab; /* Cursor to indicate draggable content */

        }

.scroll-container::-webkit-scrollbar {

            display: none; /* Hide scrollbar */

     }







.moment_1li2{

top:0;

padding-top:25%; 

width:100%;

height:100%;

display:none;

transition: 0.3s;

background:var(--bg_back);

 }

.moment_1li:hover .moment_1li2{

display:block;

transition: 0.3s; 

 }

#gallery .modal-dialog {

  max-width: 800px;

}

/*********************center_home_end****************/





@media screen and (max-width : 767px){

    #carouselMatches .row{

	   flex-wrap:nowrap;

	}

    #carouselMatches .carousel-inner{

	       overflow: auto;

	}

	#carouselMatches .carousel-item{

	       position: relative; 

		 display: flex!important; 

		 float: left; 

		 width: 100%; 

		 margin-right: 93px; 

		/*

		-webkit-backface-visibility: hidden;

		 backface-visibility: hidden; 

		 transition: transform .6s ease-in-out;

		 */

	}

.coverage_left{

margin-top:10px;

margin-bottom:10px; 

 }

.schedule2_left2 .ps-0{

padding-left:12px!important; 

 }

.schedule2_left2 .nav-tabs li a{

margin-top:5px;

margin-bottom:5px; 

 }

.series_left{

margin-top:5px;

margin-bottom:5px;  

 }

#carouselpickmobile{

margin-top:15px; 

 }

.pick_inner_left b{

display:none!important; 

 }

.moment_1l{

margin-top:10px; 

 }

 }





@media (min-width:576px) and (max-width:767px) {



 }

 

@media (min-width:768px) and (max-width:991px) {

.writer_inner_left img{

width:40px; 

 }

 }



@media (min-width:992px) and (max-width:1200px) {



 }



@media (min-width:1201px) and (max-width:1300px) {



 }

@media (min-width:1400px) and (max-width:2000px) {



 }


 button {
	background-color: #007bff; /* Button background color */
	color: white; /* Button text color */
	font-size: 16px; /* Font size */
	font-weight: bold; /* Bold text */
	padding: 10px 20px; /* Padding for the button */
	border: none; /* Remove default border */
	border-radius: 25px; /* Rounded corners */
	cursor: pointer; /* Pointer cursor on hover */
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Button shadow */
	transition: all 0.3s ease; /* Smooth transition effect */
}

button:hover {
	background-color: #0056b3; /* Darker background on hover */
	box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
	transform: translateY(-2px); /* Slight lift on hover */
}

button:active {
	background-color: #004080; /* Even darker background when clicked */
	transform: translateY(1px); /* Push effect when clicked */
}