.benefit-layout{
  display:flex;
  gap:24px;
  align-items:flex-start;
}

.benefit-badge{
  min-width:28px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  background:#e9ecef;
}

.benefit-main{
  flex:1 1 auto;
  min-width:0;
  width:100%;
}

.benefit-category-panel{
  display:none;
}

.benefit-category-panel.is-active{
  display:block;
}

.benefit-title{
  margin:0 0 8px 0;
  font-size:20px;
}

.benefit-subtitle{
  margin:0 0 16px 0;
  opacity:0.8;
}

.benefit-card-container{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 250px));
  gap:16px;
}

.benefit-location-tabs {
	justify-content:center;
	margin:80px auto!important;
}

.benefit-location-tabs .nav-link {
	border-bottom:1px solid #606060;
	border-radius:0;
	color:  #606060;
	width: 200px;
    text-align: center;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'ss02' on, 'ss03' on, 'ss04' on, 'ss05' on, 'ss06' on, 'ss07' on, 'ss08' on, 'ss09' on, 'ss10' on, 'liga' off;
    font-family: 'Raleway',sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.benefit-location-tabs .nav-link.active {
	color:#191919!important;
	background-color:transparent!important;
	border-bottom:2px solid #191919;
	border-radius:0;
}
.benefit-location-tabs .nav-item {
	border-bottom:1px solid #D8D8D8;
}
.benefit-location-tabs .nav-item .nav-link:hover {
	color:#191919;
	font-weight:500;
}
.see-more a , .benefit-card-box-hover a {
	color:#0A6F6F!important;
}

#gt-benefit-locations-content,.benefit-card-page {
	width:auto;
    margin-top: 80px;
}
.benefit-category-list {
	display: flex;
	padding: 24px;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	border-radius: 10px;
	background: #F7F8FA;
}
.benefit-category-list li::marker{
	content:"";
}
.benefit-category-list .benefit-category-link {
    display: flex;
    min-width:max-content;
    align-items: center;
    gap: 16px;
}
.benefit-category-list li, .benefit-category-list button{
	width:100%;
}
.benefit-category-list button {
	border:none;
	background-color:transparent;
	justify-content:space-between
}

.nav-link:hover {
	font-weight:500;
	color:#191919;
	border-radius:0;
}
.benefit-location-tabs  {
	margin-bottom:80px!important;
}
.benefit-location-tabs .nav-link {
    border-bottom:1px solid black;
    border-radius:0;
}

.benefit-category-link  {
    color: #606060;
    font-variant-numeric: lining-nums proportional-nums;
    font-feature-settings: 'liga' off;
    font-family: 'Montserrat',sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
}

.benefit-category-link.is-active {
	color:#0A6F6F!important;
}

.benefit-badge {
	color: #606060;
	text-align: center;
	font-variant-numeric: lining-nums proportional-nums;
	font-feature-settings: 'ss01' on, 'ss03' on, 'ss04' on, 'ss05' on, 'ss06' on, 'ss08' on, 'ss09' on, 'ss10' on, 'liga' off;
	font-family: 'Raleway',sans-serif;
	font-size: 14px;
	background: #FFF;
	font-weight: 600;
}

.benefit-category-link.is-active .benefit-badge{
	color:#0A6F6F!important;
}


.benefit-card-box-outer, .benefit-card-box {
	padding:0!important;
}

.benefit-title {
	border-bottom:solid 1px #EFF1F5;
	margin-bottom:40px;
	padding-bottom:10px;
	color: #464851;
	font-family: 'Raleway',sans-serif;
	font-size: 22px;
	font-style: normal;
	font-weight: 500;
	line-height: 32px;
}
.benefit-card-box-outer {
    max-width: 250px!important;
    position:relative;
}

.benefit-card-box-outer > .wp-block-column {
    display: flex;
    padding: 10px;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    border-radius: 16px;
    background: #F7F8FA;
    position:relative;
}
.benefit-card-box {
	width:100%;
	min-height:300px;
}
.benefit-card-box > .wp-block-column{
    display: flex;
    padding: 8px 10px;
    flex-direction: column-reverse!important;
    align-items: center;
    gap: 16px;
    align-self: stretch;
    border-radius: 15px;
    background: #FFF;
    justify-content: space-between;
    width:100%;
}
.benefit-card-box > .wp-block-column .discount {
	color:#0A6F6F;
    text-align: center;
    font-family: 'Montserrat',sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

.benefit-card-box-hover {
    position:absolute;
    display: inline-flex;
    padding: 20px!important;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 0 4px 7.7px 0 #D6D9DE;
}
.benefit-card-box-hover .wp-block-list {
	padding-left:15px;
}
.benefit-card-box-hover .wp-block-list li::marker {
	font-size:10px;
}
.benefit-card-box-hover h4{
	color: #191919;
    font-family:'Montserrat',sans-serif!important;
    font-size: 14px!important;
    font-style: normal;
    font-weight: 600;
    line-height: 20px;
}
.benefit-card-box-hover li, .benefit-card-box-hover p {
	color: #191919;
    font-family: 'Montserrat',sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}
.benefit-card-box-hover > .wp-block-column {
	display:flex;
	flex-direction:column;
	gap:5px;
}

.benefit-hotspot {
	position:absolute;
	top:18px;
	left:18px;
	z-index:30;
}

.benefit-card-box-outer .benefit-card-box-hover{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease;
    top:40px;
    left:20px;
    z-index:999;
    min-width:319px;
}

.benefit-card-box-outer.is-open .benefit-card-box-hover{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.benefit-dropdown{
    display:none;
    position:relative;
    width:100%;
    margin-bottom:12px;
}

.benefit-dropdown-toggle{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-radius:12px;
    border:1px solid #ddd;
    background:#fff;
    cursor:pointer;
}


.benefit-dropdown-menu{
    position:absolute;
    left:0;
    right:0;
    top:calc(100% + 8px);
    background:#fff;
    border:1px solid #ddd;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    display:none;
    z-index:9999;
    max-height:320px;
    overflow-y:auto;
}

.benefit-dropdown.is-open .benefit-dropdown-menu{
    display:block;
}

.benefit-dropdown-item{
    width:100%;
    border:0;
    background:transparent;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    cursor:pointer;
    text-align:left;
}

.benefit-dropdown-item:hover{
    background:#f6f7f9;
}

.benefit-dropdown-item.is-active{
    background:#eef6ff;
    font-weight:600;
}

.benefit-dropdown-caret {
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M6.82776 6.82764C6.55237 7.10303 6.10705 7.10303 5.83459 6.82764L0.206665 1.20264C-0.0687256 0.927246 -0.0687256 0.481933 0.206665 0.209472C0.482056 -0.0629889 0.927367 -0.0659185 1.19983 0.209472L6.32678 5.33643L11.4567 0.206543C11.7321 -0.0688477 12.1774 -0.0688477 12.4498 0.206543C12.7223 0.481934 12.7252 0.927246 12.4498 1.19971L6.82776 6.82764Z' fill='%23191919'/%3E%3C/svg%3E");
}

.benefit-layout {
	gap:60px;
}

.benefit-sidebar {
	flex-basis:380px;
}
.benefit-card-box img {
	object-fit:contain!important;
}

@media screen and (max-width:1570px) {
	.benefit-layout {
		margin:auto 20px;
	}
}

@media screen and (max-width:1350px){
    .benefit-card-container {
        grid-template-columns: repeat(3, minmax(0, 250px));
    }
}

@media screen and (max-width:1200px) {
    .is-open .benefit-dropdown-caret {
		content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' viewBox='0 0 13 8' fill='none'%3E%3Cpath d='M5.82752 0.206542C6.10291 -0.0688481 6.54822 -0.0688481 6.82068 0.206542L12.4486 5.83154C12.724 6.10693 12.724 6.55225 12.4486 6.82471C12.1732 7.09717 11.7279 7.1001 11.4554 6.82471L6.32849 1.69775L1.19861 6.82764C0.923219 7.10303 0.477907 7.10303 0.205446 6.82764C-0.0670151 6.55225 -0.0699448 6.10693 0.205446 5.83447L5.82752 0.206542Z' fill='%23191919'/%3E%3C/svg%3E")!important;
	}
	.benefit-card-box-outer {
		max-width:unset!important;
	}
	#gt-benefit-locations-content, .benefit-card-page {
        margin-top:0!important;
	}
	.benefit-card-box-outer .benefit-card-box-hover {
        margin-left:-20px;
        margin-top:0px;
        transition:margin 0.2s ease-in-out;
	}
	.benefit-card-box-outer.is-open .benefit-card-box-hover {
		margin-top:20px;
	}
    .benefit-card-box-outer,.benefit-card-box {
        margin:0!important;
    }
    .benefit-location-tabs,
    .benefit-sidebar{
        display:none !important;
    }

    .benefit-dropdown{
        display:block;
    }
  	.benefit-card-page {
		margin:0 20px!important;
	}
	.dropdown-benefit-card-wrapper {
		display:flex;
		gap:30px;
		align-items:center;
		justify-content:center;
		margin:40px auto;
		flex-wrap:wrap!important;
		row-gap:10px!important;
	}
	.benefit-dropdown {
		width:fit-content;
	}
	.benefit-dropdown-toggle {
	    width:fit-content;
		min-width:380px;
		height:fit-content!important;
		min-height:unset;
	}
	.benefit-dropdown-label {
		color: #0A6F6F;
        font-family: 'Montserrat',sans-serif;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
	}
	.benefit-dropdown-menu {
		top:100%;
	}
	.benefit-location-dropdown.is-open .benefit-dropdown-toggle,
    .benefit-category-dropdown.is-open .benefit-dropdown-toggle {
		border-radius: 12px 12px 0 0;
	}
	.benefit-dropdown-item {
		font-weight:500!important;
		color: #606060 !important;
	}
	.benefit-dropdown-item.is-active {
		background:transparent;
		font-weight: 500 !important;
        color: #0A6F6F !important;
        background: unset;
	}
	.benefit-dropdown-menu {
		border-radius: 0 0 12px 12px;
	}
}
@media (max-width: 1000px){
    .benefit-card-container{
        grid-template-columns:repeat(3, minmax(0, 250px));
    }
}

@media (max-width: 768px){
    .benefit-layout{
        flex-direction:column;
    }
    .benefit-sidebar{
        width:100%; flex:0 0 auto;
    }
    .benefit-card-container{
        grid-template-columns:repeat(2, minmax(0, auto));
    }
}

@media screen and (max-width:580px) {
    .benefit-card-container{
        grid-template-columns:repeat(1, minmax(0, auto));
    }
    .benefit-dropdown-toggle {
		min-width:100%;
		width:100%;
	}
	.benefit-dropdown {
		width:100%;
	}
	.dropdown-benefit-card-wrapper {
		margin:40px 20px;
	}
    .benefit-card-box-outer .benefit-card-box-hover {
        min-width: unset;
    }
}