﻿.tabbed-listing {
    position: relative;
    background: #08000A;
    padding: 50px 0 45px;
}

.tabbed-listing h2:not([class*="heading"]) {
    color: #FFFFFF;
    text-align: center;
}

.tab_area {
	width: 100%; 
	margin: 10px 0 0;
}


.tab_scroll {
    scroll-behavior: smooth;
    overflow-x: auto;
    width: calc(100% + 44px);
    margin-left: -22px;
    background: rgba(255, 255, 255, 0.18);
}

ul.tabs-list {
	margin: 0;
	padding: 0 0 0 22px;
	list-style: none;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
}

ul.tabs-list li {
	margin: 0;
	padding: 0 5px;
	position: relative;
    background: transparent;
    white-space: nowrap;
}

ul.tabs-list li::before {
    display: none;
}

ul.tabs-list li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 13px 35px;
	outline: none;
    background: #FFFFFF;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #535455;
    font-family: 'Montserrat', sans-serif;
}

ul.tabs-list li a i {
    font-size: 18px;
    font-weight: normal;
    vertical-align: middle;
    padding: 0 4px 5px 0;
}

 ul.tabs-list li.active a  {
	background: #065299;
	color: #FFFFFF;
}

/* Innerpage tabbed listing */
.tabbed-listing-inner .section-intro {
    color: var(--c-white);
    margin-bottom: 1.5rem;
}

.tabbed-listing-inner .tab_area {
    max-width: none;
}

.tabbed-listing-inner.tabbed-listing h2 {
    max-width: none;
    padding: 0 0 10px;
}

.tabbed-listing-inner .section-intro h2:not([class*="heading"]),
.tabbed-listing-inner .section-intro h3:not([class*="heading"]),
.tabbed-listing-inner .section-intro h4:not([class*="heading"]),
.tabbed-listing-inner .section-intro h5:not([class*="heading"]),
.tabbed-listing-inner .section-intro h6:not([class*="heading"]) {
    color: var(--c-white);
}

/* Slick tabs shown in mobile  */
.js-tabs-list-slider .slick-track {
    display: flex;
}

.js-tabs-list-slider .slick-slide{
    height: inherit !important;
}

.js-tabs-list-slider .slick-slide > div {
    height: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.js-tabs-list-slider:not(.slick-initialized) .tab-list-item:not(:first-child) {
    display: none;
}

.js-tabs-list-slider .tab-list-item {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 15px;
	outline: none;
    background: #FFFFFF;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    color: #535455;
    font-family: 'Montserrat', sans-serif;
    margin: 0 5px;
    text-align: center;
}

.js-tabs-list-slider .tab-list-item.icon {
    font-size: 18px;
    font-weight: normal;
    vertical-align: middle;
    padding: 0 4px 5px 0;
}

.js-tabs-list-slider .tab-list-item.slick-current  {
	background: #065299;
	color: #FFFFFF;
    font-weight: 700;
}

.js-tabs-list-slider .tab-list-item.slick-current .icon svg * {
    fill: #fff;
}

.js-tabs-list-slider .tab-list-title {
    display: flex;
    justify-content: center;
}

.js-tabs-list-slider .tab-list-title > span, 
.js-tabs-list-slider .tab-list-title > span .icon,
.js-tabs-list-slider .tab-list-title > span .icon svg {
    display: block;
    height: 25px;
    width: 25px;
    padding-right: 0.5rem;
    max-height: none;
    max-width: none;
}

.js-tab-container-slider.slick-initialized .fx-slide {
    display: inline-block;
    vertical-align: top;
}

.js-tab-container-slider:not(.slick-initialized) .fx-slide:not(:first-child) {
    display: none;
}

.tab_container.js-tab-container-tabbed .tab_content:not(.first-show) {
    display: none;
}

.tab_container {
	clear: both;
	width: 100%;
	background: transparent;
}

.tab_content {
	padding: 35px 0 0;
    color: #FFFFFF;
}

.tabbed-listing__details p {
    font-size: 16px;
    color: #FFFFFF;
}

.tab-image {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 300px;
}

@media (min-width: 768px) {
    .tabbed-listing {
        padding: 60px 0 60px;
    }

    .tab_scroll {
        width: calc(100% + 104px);
        margin-left: -52px;
        background: transparent;
    }
    
    .tab_area {
        margin: 25px 0 0;
    }

    .tab_content {
        padding: 45px 0 0;
    }

}

@media (min-width: 1200px) {
    .tabbed-listing {
        padding: 50px 0 60px;
    }

    .tab_area {
        max-width: 945px;
        margin: 25px 0 0 auto;
        position: relative;
        z-index: 1;
    }

    .tab_scroll {
        width: 100%;
        margin-left: 0px;
        scroll-behavior: smooth;
        overflow-x: hidden;
    }

    ul.tabs-list {
        padding: 0 0 0 0;
        justify-content: center;
        flex-wrap: wrap;
        background: transparent;
    }

    ul.tabs-list li {
        padding: 13px 10px;
        white-space: initial;
        
    }
    
    .tab_content {
        padding: 26px 0 0;
        max-width: 750px;
        margin: 0 auto;
    }

    .tabbed-listing__details p {
        font-size: 17px;
        padding-bottom: 30px;
    }

    .tabbed-listing h2 {
        max-width: 945px;
        margin: 0 0 0 auto;
        padding: 0 50px 10px;
    }

    ul.tabs-list li a:hover  {
        background: #065299;
        color: #FFFFFF;
    }

    ul.tabs-list li a:hover svg g path {
        fill: #FFFFFF !important;
   }
}

@media (min-width: 1366px) {
    .tabbed-listing h2 {
        padding: 0 150px 10px;
    }

    .tab-image {
        max-width: 410px;
    }

    .js-tabbbed-nav .slick-list {
        max-width: 1100px;
        margin: 0 auto;
        text-align: center;
    }
}

@media (min-width: 1440px) {
    .tab-image {
        max-width: 460px;
    }
}

@media (min-width: 1600px) {
    .tab-image {
        max-width: 530px;
    }
}
@media (min-width: 1800px) {
    .tab-image {
        max-width: 100%;
        left: 40px;
    }  
}

@media (min-width:1921px) {
    .tab-image {
        height: 819px;
    }
    .tab-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
ul.tabs-list li a{
    display: flex !important;
    align-items: center;
    transition: .35s all;
}
ul.tabs-list li a span i{
    display: flex;
    align-items: center;
    padding-bottom: 0;
}
ul.tabs-list li.active a svg g path {
    fill: #FFFFFF !important;
}