/*--------- Mobile Banner ------------*/
.horizontal-scroll {
    display: none;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 98%;
    margin-left: 6px;
}
.horizontal-scroll .banner-item {
    flex: 0 0 auto;
    width: 274px;
    height: 440px;
    position: relative;
	border: solid 1px #ddd;
	border-radius: 4px;
	margin: 6px;
	border-radius: 6px;
}
.mob-banner-img
{
    width: 100%;
    height: 100%;
    border-radius: 6px;
}
/*----- END -----------*/
/*------- CARD Container ------*/
.nav-card-container{
	display: flex;
	flex-direction: row;
	position: absolute;
	z-index: 80;
	left: 10;
	right: 10;
	top: 410px;
	padding-left: 18px;
	padding-right: 18px;
}

.nav-card-container1{
	display: flex;
	flex-direction: row;
	padding-left: 18px;
	padding-right: 18px;
}
.nav-cards-overlay{
	padding: 10px;
	width: 20%;
}
.sub_card_overlay{
	padding: 20px;
	background-color: white;
	height: 300px;
	border-radius: 6px;
}
.sub_card-overlay{
	background-color: white;
	height: 200px;
}
.nav-cards{
	padding: 0 10px 0 10px;
	width: 25%;
}
.sub_card{
	padding: 20px;
	background-color: white;
	height: 368px;
	border-radius: 6px;
}
.sub_card-title-container{ padding: 0px; }
h2.sub_card_title_text{ margin: 0px; padding-bottom: 8px; font-size: 18px; }

.sub_card1{
	background-color: white;
	height: 300px;
}
.nav-card-link{ color: blue; font-size: 12px; }
.nav-card-link{ color: blue; font-size: 12px; }
/*--------- CARD Container --------------*/
.card-imgs
{
    width: 100%;
    height: 100%;
}
.box { position: relative; }
.transparent_gradient {
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 19.0208333333vw;
	background: linear-gradient(180deg, transparent 0, #e3e6e6 100%);
}
.line-gap{ height: 20px; }
.line-gap1{ height: 34px; }

.carousel-container{ padding-left: 28px; padding-right: 28px;}

    /* Slideshow container */
    .slideshow-container {
        width: 100%;
        position: relative;
        overflow: hidden;
        height: 600px;
    }
    .bottm-container
    {
        text-align: center;
        padding: 10px;
    }
    .signin_btn
    {
        padding: 10px;
        background-color: #fff000;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        width: 200px;
    }
    /* Slides track/wrapper */
    .slides-track {
        display: flex;
        transition: transform 0.6s ease-in-out;
        height: 100%;
    }
    
    /* Individual slides */
    .mySlides {
        min-width: 100%;
        height: 100%;
        position: relative;
        flex-shrink: 0;
    }
    
    .imgs {
        width: 100%;
        height: 100%;
    }
    
    /* Next & previous buttons */
    .prev, .next {
        cursor: pointer;
        position: absolute;
        top: 25%;
        width: auto;
        padding: 16px;
        margin-top: -22px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        background-color: rgba(0,0,0,0.5);
        z-index: 98;
        text-decoration: none;
    }
    
    /* Position the "next button" to the right */
    .next {
        right: 0;
        border-radius: 3px 0 0 3px;
    }
    
    .prev {
        left: 0;
        border-radius: 0 3px 3px 0;
    }
    
    /* On hover, add a black background color */
    .prev:hover, .next:hover {
        background-color: rgba(0,0,0,0.8);
    }
    
    /* The dots/bullets/indicators */
    .dots-container {
        text-align: center;
        padding: 10px 0;
        display: none;
    }
    
    .dot {
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
        cursor: pointer;
        display: none;
    }
    
    .active {
        background-color: #717171;
        display: none;
    }

    .mostview-hscroll {
        display: flex;
        flex-wrap: nowrap;        /* keep items on one line */
        overflow-x: auto;         /* enable horizontal scrollbar */
        width: 100%;   /* constrained width reference */
        list-style-type: none;
        margin: 6px 10px 40px 6px;
        padding: 0px;
    }
    .mostview-hscroll .mvitem {
        flex: 0 0 auto;           /* items won't shrink or grow */
        width: 220px;
        position: relative;
        /*border: solid 1px #ddd;*/
        border-radius: 4px;
        margin: 0px 12px 12px 0px;
        padding: 10px;
        /* or width:150px for fixed size */
        /* optional margins/padding */
    }

    /* On smaller screens, decrease text size */
    @media only screen and (max-width: 300px) {
        .prev, .next, .text {font-size: 11px}
    }

    button{ border: none; cursor: pointer; color: white; background: none; transition: all .3s ease-in-out; }
    .container { width: 100%; height: 280px; display: flex; justify-content: center; align-items: center; background-color: none; padding: 0px; }
    .carousel-view { display: flex; justify-content: space-between; align-items: center; gap: 10px; transition: all 0.25s ease-in; }
    .carousel-view .item-list{
        max-width: 1400px; width: 86vw; padding: 10px 10px; display: flex;
        gap: 10px;
        scroll-behavior: smooth;
        transition: all 0.25s ease-in;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        overflow: auto;
        scroll-snap-type: x mandatory;
    }
    /* Hide scrollbar for Chrome, Safari and Opera */
    .item-list::-webkit-scrollbar { display: none; }
    .prev-btn { cursor: pointer; background-color: white; border: solid 1px #ccc; height: 120px; }
    .next-btn { cursor: pointer; background-color: white; border: solid 1px #ccc; height: 120px; }
    .item { scroll-snap-align: center; min-width: 250px; background-color: white; cursor: pointer; text-align: center; }
    @media screen and (max-width: 768px) { .carousel-view .item-list { max-width: 1400px; width: 77vw; padding: 10px 10px; display: flex; } }

    .single-banner
    {
        border-radius: 6px;
        display: block;
        width: 100%;
    }
    .single-banner-mobile
    {
        border-radius: 6px;
        display: none;
    }
    .single-banner-container
    {
        background-color: white; margin: 0 28px 0 28px; border-radius: 6px;
    }
/* On smaller screens, decrease text size */
@media only screen and (max-width: 600px) {
    .horizontal-scroll {
            display: flex;
        }
    .nav-card-container1, .nav-card-container{
    	flex-direction: column;
    	position: static;
    }
    .nav-cards, .nav-cards-overlay
    {
        width: 100%;
    }
    .sub_card_overlay
    {
        height: auto;
    }
    .prev-btn, .next-btn { display: none; }
    .box
    {
        display: none;
    }
    .nav-card-container, .nav-card-container1, .carousel-container{
        padding: 4px;
    }
    .line-gap{ height: 10px; }
    .line-gap1{ height: 10px; }
    .single-banner
    {
        display: none;
    }
    .single-banner-mobile
    {
        display: block;
    }
    .single-banner-container
    {
        margin: 0 12px 0 12px;
    }
}