/* new CSS */
:root {
    --global-padding:20px;
    --tt-gradient: linear-gradient(90deg, #FF6400 0%, #FFA500 60%, #FFC800 100%);
    --bt-gradient: linear-gradient(90deg, #284632 0%, #197D46 60%, #8CB400 100%);
    --ii-gradient: linear-gradient(90deg, #001C7B 0%, #005AC8 60%, #00A7E1 100%);
    --ts-gradient: linear-gradient(90deg, #D21E32 0%, #DC6464 65%, #E48E8D 100%);
    --blog-gradient: linear-gradient(90deg, #CC0000 0%, #EB5514 65%, #FFB900 100%);
}

.eb-garamond {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
}

#top {
    display:flex;
    flex-direction: column;
    align-items: center;
}

 h1, h2,
 p,
 span,
 a,
 p,
* {
    font-family: "Open Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 100;
}

#footerWrapper {
    width: 100%;
}

#headerWrap-2.topheader {
    z-index: 150 ;
    width: 100%;
}

#headerWrap-2.topheader>.header__inner {
    width: 100%;
    max-width: 100%;
    position: relative;
    padding:0px var(--global-padding);
}

#headerWrap-2.topheader>.header__inner>.header__info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 65%, #E48E8D 100%);
    padding: 55px 0px;
    margin: 0;
}

.menu-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.menu-container #secondary-menu-navi .header__link {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.menu-container #secondary-menu-navi .header__link .header__ul02>li>form {
    position:relative;
}

.menu-container #secondary-menu-navi .header__link .header__ul02>li>form::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.43 19.09'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:black;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eicon_search%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='popup'%3E%3Cpath class='cls-1' d='M18.15,17.39l-4.54-4.73a7.7,7.7,0,1,0-5.9,2.75A7.63,7.63,0,0,0,12.12,14l4.58,4.76a1,1,0,1,0,1.45-1.39ZM7.71,1.21a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,7.71,1.21Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    display:block;
    position: absolute;
    height: 15px;
    width: 15px;
    top: 7px;
    left: 10px;
}
.menu-container #secondary-menu-navi .header__link .header__ul02>li>form>input{
    border-radius:50px;
    border:0px;
    padding: 4px 16px 4px 42px;
}

.menu-container #secondary-menu-navi .header__link>li>a:hover {
    border-bottom: 2px solid white;
}
.menu-container #secondary-menu-navi .header__link>li>a {
    font-size: 16px;
    font-weight: 400;
    color: white;
    border-bottom: 2px solid transparent;
}

.menu-container #navi {
    background: none;
}

.menu-container .header__inner {
    padding: 0px;
}

.menu-container #navi::before,
.menu-container #navi::after {
    content: "";
}

#navi.pc-header__navi .header__ul01 {
    display: flex;
    gap: 2rem;
    align-items: center;
}

#navi.pc-header__navi .header__ul01>li {
    position: unset;
    float: none;
    margin: 0px;
}

#navi.pc-header__navi .header__ul01>li {
    /* padding-bottom: 10px;  */
    border-bottom: 3px solid transparent;
}

#navi.pc-header__navi .header__ul01>li:hover{
    border-bottom: 3px solid white;
}

#navi.pc-header__navi .header__ul01>li>a {
    font-size: 16px;
    font-weight: 700;
    color: white;
    height: unset;
    padding: unset;
}
#navi.pc-header__navi .header__ul01>li:hover .submenu{
    display:flex;
    flex-wrap:wrap;
    padding:40px 40px;
    justify-content: center;
    align-items: center;
    gap:2rem;
}

#navi.pc-header__navi .header__ul01>li .submenu>li:not(:last-child)>a::after {
        content: "";
        border: solid 1px white;
        margin-left: 2rem;
    }

#navi.pc-header__navi .header__ul01>li .submenu {
    /* top: 110px; */
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 65%, #E48E8D 100%);
    padding-top: 22px;
    top:92px;
    width:100%;
}

#navi.pc-header__navi .header__ul01>li .submenu>li {
    padding: 0px;
}

#navi.pc-header__navi .header__ul01>li .submenu>li>a {
    font-size: 14px;
    font-weight: 400;
    color:white;
    padding: 0px;
    min-height: unset;
    border-bottom: 0px;
}

/* Menu Mobile Button CSS */

.header_footer .menu-btn-new .burger-icon-top,
.header_footer .menu-btn-new .burger-icon-top::before,
.header_footer .menu-btn-new .burger-icon-top::after {
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%);
}

.header_footer .menu-btn-new.is-active .burger-icon-top,
.header_footer .menu-btn-new.is-active .burger-icon-top::before,
.header_footer .menu-btn-new.is-active .burger-icon-top::after,
.header_footer .menu-btn-new.is-active .burger-icon-x,
.header_footer .menu-btn-new.is-active .burger-icon-x::before,
.header_footer .menu-btn-new.is-active .burger-icon-x::after {
    background: white;
}

.header_footer .menu-btn-new {
    width: 42px;
    height: 42px;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
	float: right;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 2px 0 0;
	position: relative;
	z-index: 9999;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

.header_footer .menu-btn-new.is-active {
    background-color: transparent;
    height: 13px;
    width: 13px;
}

.header_footer .menu-btn-new .burger-icon {
	position: relative;
	margin-top: 7px;
	margin-bottom: 7px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.header_footer .menu-btn-new .burger-icon,
.header_footer .menu-btn-new .burger-icon::before,
.header_footer .menu-btn-new .burger-icon::after {
	display: block;
	width: 22px;
    height: 2.4px;
    top: -1px;
	background-color: #ffffff;
	outline: 1px solid transparent;
	-webkit-transition-property: background-color, -webkit-transform;
	-moz-transition-property: background-color, -moz-transform;
	-o-transition-property: background-color, -o-transform;
	transition-property: background-color, transform;
	-webkit-transition-duration: .3s;
	-moz-transition-duration: .3s;
	-o-transition-duration: .3s;
	transition-duration: .3s;
}

.header_footer .menu-btn-new .burger-icon::before,
.header_footer .menu-btn-new .burger-icon::after {
	position: absolute;
	content: "";
}

.header_footer .menu-btn-new .burger-icon::before {
	top: -7px;
}

.header_footer .menu-btn-new .burger-icon::after {
	top: 7px;
}

.header_footer .menu-btn-new.is-active .burger-icon-top, .header_footer .menu-btn-new.is-active .burger-icon-x {
	background: transparent;
}

.header_footer .menu-btn-new.is-active .burger-icon::before {
	-webkit-transform: translateY(7px) rotate(45deg);
	-moz-transform: translateY(7px) rotate(45deg);
	-ms-transform: translateY(7px) rotate(45deg);
	-o-transform: translateY(7px) rotate(45deg);
	transform: translateY(7px) rotate(45deg);
}

.header_footer .menu-btn-new.is-active .burger-icon::after {
	-webkit-transform: translateY(-7px) rotate(-45deg);
	-moz-transform: translateY(-7px) rotate(-45deg);
	-ms-transform: translateY(-7px) rotate(-45deg);
	-o-transform: translateY(-7px) rotate(-45deg);
	transform: translateY(-7px) rotate(-45deg);
}

.menu-btn-new.is-active .burger-top {
    background-color: transparent;
}

/* Menu Mobile CSS End */

.img-cover-top {
    width: 100%;
    object-fit: cover;
    position: relative;
}

.img-cover-top video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-cover-top-title {
    position: absolute;
    bottom: 100px;
    left: 50px;
    font-size: 64px;
    color: white;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.justified-text {
    text-align: justify;
}

.title p {
    display: flex;
    font-size: 20px;
    font-weight: 700;
    margin: 0px;
    /* if smartphone 20px if PC 32px */
}

.circle::after {
    opacity: .8;
    display: block;
    position: relative;
    content: '';
    width: 16px;
    /* if smartphone 16px if PC 24px */
    height: 16px;
    /* if smartphone 16px if PC 24px */
    border-radius: 50%;

}

.top-seller-circle::after {
    background: #CC0000;
}

.top-trending-circle::after {
    background-color: #FF6400;
}

.beaten-track-circle::after {
    background-color: #197D46;
}

.independent-iteneraries-circle::after {
    background-color: #005AC8;
}


.top-seller-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 275px;
}

.top-seller-text {
    display: flex;
    flex-direction: column;
}

.top-image-icon {
    width: 275px;
    height: 160px;
    border-radius: 8px;
    object-fit: cover;
}

.top-sellers .title {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    margin-bottom: 40px;
}

.top-sellers .right {
    justify-content: flex-end;
    text-align: right;
}

.top-sellers {
    display:flex;
    flex-wrap: wrap;
    padding: 50px 0px 50px 0px;
}

.item-title,
.item-text {
    margin: 0px;
}

.top-seller-item .item-title {
    font-size: 16px;
    font-weight: 700;
}

.top-seller-item .item-text {
    font-size: 12px;
    font-weight: 400;
}

.top-item-container {
    display: flex;
    gap: 2rem;
    overflow-x: scroll;
    width: 100vw;
    padding-bottom: 16px;
    scrollbar-color: linear-gradient(90deg, #D21E32 0%, #DC6464 65%, #E48E8D 100%) green;
}

/* width */
.top-item-container::-webkit-scrollbar {
    height: 0px;
    width: 0px;
    background: transparent;
    display: none;
}

.top-item-container {
    scrollbar-width: none;
}

.top-item-container::-webkit-scrollbar::after {
    content: 'swipe';
    position: relative;
}

/* Track */
.top-item-container::-webkit-scrollbar-track {
    -webkit-appearance: none;
    width: 100%;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    border-bottom: 2px solid transparent;
    border-top: 2px solid transparent;
    background-clip: content-box;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

/* Handle */
.top-item-container::-webkit-scrollbar-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 10px;
    padding: 5px;
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 65%, #E48E8D 100%);
    cursor: pointer;
    border-radius: 25px;
}

/* Top trending */
.top-trending-container::-webkit-scrollbar-thumb {
    background: var(--tt-gradient);
}

/* Off the beaten track */
.beaten-track-container::-webkit-scrollbar-thumb {
    background: var(--bt-gradient);
}

/* Independent Iteneraries */
.independent-iteneraries-container::-webkit-scrollbar-thumb {
    background: var(--ii-gradient);
}

.top-item-container::-webkit-scrollbar-track-piece:end {
    background: transparent;
    margin-right: 101px;
}

.top-item-container::-webkit-scrollbar-track-piece:start {
    background: transparent;
    margin-left: var(--global-padding);
}

.content-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    max-width:1160px;
}

#intro-text-content {
    background-repeat: no-repeat;
}

.section-container {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: all 1s ease;
}

.section-container.active {
    transform: translateY(0px);
    opacity: 1;
}

.section-container-two {
    position: relative;
    /* height: 556px; */
}

/* .section-container-two .container-bg {
    width: 200vw;
    z-index: -1;
    margin-left: -15px;
    position: absolute;
    height: 100%;
    background-color: #EFE8DF;
} */

.full-width-container-with-bg {
    width: 100%;
    height: 100%;
    background-color: #EFE8DF;
    display:flex;
    justify-content: center;
}


.slider-swipe {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 1rem;
    align-items: center;
    right: 0px;
    bottom: 20px;
    padding: 0px var(--global-padding);
    z-index: 99;
}

.slider-container {
    /* display: flex; */
    display:none;
    width: 100%;
    justify-content: flex-end;
    position: relative;
    bottom: -6px;
}

.bg {
    display: block;
    position: absolute;
    width: 100px;
    height: 20px;
    right: 0;
    bottom: 20px;
}

.bg-left {
    display: block;
    position: absolute;
    width: var(--global-padding);
    height: 20px;
    left: 0;
    bottom: 20px;
}

.top-seller-slider-bg {
    background-color: white;
}

.video-container {
    display: block;
    max-height: 685px;
    height: auto;
    width: 100%;
    object-fit: cover;
    position: relative;
    max-width: 1160px;
    margin: 40px 0px 40px 0px;
}

.video-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}

.video-container .video-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.video-container .video-btn svg {
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.video-container::after {
    content: '';
    /* opacity: 0.3; */
    background-clip: content-box;
    background-color: transparent;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
}

.top-package-item {
    display: flex;
    flex-direction: column;
    background-color: white;
    justify-content: space-between;
    border-radius: 8px;
    width: 260px;
    /* 260px if mobile, 275px if PC*/
    height: 301px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
}

.top-package-item:hover img,
.top-package-item:hover h1,
.top-package-item:hover p {
    opacity: .7;
}

.top-package-item:nth-child(1),
.top-seller-item:nth-child(1) {
    margin-left: var(--global-padding);
}

.top-package-item:last-child,
.top-seller-item:last-child {
    margin-right: var(--global-padding);
}

.top-package-icon {
    border-radius: 8px 8px 0px 0px;
    width: 260px;
    height: 161px;
    object-fit:cover;
}

.top-package-item .item-title {
    font-size: 16px;
    font-weight: 700;
    padding: 0px var(--global-padding);
}

.top-package-item .item-text {
    font-size: 12px;
    font-weight: 400;
    padding: 0px var(--global-padding);
}

.top-package-item-info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 15px 0px;
}

.top-package-item-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.top-packages-item-container {
    padding-bottom: 35px;
}

.top-packages-slider-bg {
    background-color: #EFE8DF;
}

.top-package-button {
    width: 118px;
    height: 30px;
    background-color: white;
    border-radius: 16px;
    margin: 0px 15px;
}

.top-package-button a{
    text-decoration: none;
}

.top-trending-button {
    background: linear-gradient(white, white) padding-box,
        var(--tt-gradient) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
}

.top-trending-button:hover {
    background: var(--tt-gradient) padding-box,
        var(--tt-gradient) border-box;
    color: white;
}

.top-trending-button:hover .top-trending-text,
.independent-iteneraries-button:hover .independent-iteneraries-text,
.beaten-track-button:hover .beaten-track-text {
    color: white;
    -webkit-text-fill-color: white;
}

.beaten-track-button {
    background: linear-gradient(white, white) padding-box,
        var(--bt-gradient) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
}

.beaten-track-button:hover {
    background: var(--bt-gradient) padding-box,
        var(--bt-gradient) border-box;
    color: white;
}

.independent-iteneraries-button {
    background: linear-gradient(white, white) padding-box,
        var(--ii-gradient) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
}

.independent-iteneraries-button:hover {
    background: var(--ii-gradient) padding-box,
        var(--ii-gradient) border-box;
    color: white;
}

.top-trending-text, .view-more-tt a:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    position: relative;
    background: var(--tt-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.beaten-track-text, .view-more-bt a:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: var(--bt-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.independent-iteneraries-text, .view-more-ii a:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: var(--ii-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.top-seller-gradient-clip-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    background: var(--ts-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.view-more-btn {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.view-more-btn a{
    color:black;
}

.view-more-btn a:hover {
    text-decoration: none;
}

.view-more-btn a, .view-more-btn a:hover {
    position: relative;
}

.view-more-btn a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Adjust as needed */
    width: 100%;
    height: 1px; /* Adjust as needed */ 
    background: black;
}

.view-more-btn a:hover::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px; /* Adjust as needed */
    width: 100%;
    height: 1.5px; /* Adjust as needed */
    
}

.view-more-tt a:hover::after {
    background: var(--tt-gradient);
}

.view-more-bt a:hover::after {
    background: var(--bt-gradient);
}

.view-more-ii a:hover::after {
    background: var(--ii-gradient);
}

.view-more-btn button {
    border: none;
    background-color: transparent;
}

.hidden-gem-images-container {
    display: grid;
    gap: .5rem;
    margin-left: var(--global-padding);
    margin-right: var(--global-padding);
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr .5fr .5fr;
    grid-template-areas:
        "one one one one"
        "two two three three"
        "four five five five";
    padding-bottom: 35px;
}

.hidden-gem-images-container div {
    max-width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.hidden-gem-images-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.hidden-gem-images-container div:nth-child(1) {
    grid-area: one;
}

.hidden-gem-images-container div::after {
    font-weight: 700;
    color: white;
    font-size: 16px;
    bottom: 10px;
    left: 10px;
    position: absolute;
}

.hidden-gem-images-container div:nth-child(1)::after {
    content: 'Naoshima Island';
}

.hidden-gem-images-container div:nth-child(2)::after {
    content: 'Shimanami Kaido';
}

.hidden-gem-images-container div:nth-child(3)::after {
    content: 'Asahi Funakawa';
}

.hidden-gem-images-container div:nth-child(4)::after {
    content: 'Wanko-Soba';
}

.hidden-gem-images-container div:nth-child(5)::after {
    content: 'Yamadera Temple';
}

.hidden-gem-images-container div:nth-child(2) {
    grid-area: two;
}

.hidden-gem-images-container div:nth-child(3) {
    grid-area: three;
}

.hidden-gem-images-container div:nth-child(4) {
    grid-area: four;
}

.hidden-gem-images-container div:nth-child(5) {
    grid-area: five;
}

.hidden-gem-images-container {
    height: auto;
}

#intro-text-content {
    width: 100%;
    display: flex;
    gap: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background-position: 60% 70%;
}

#intro-text-content p {
    width: 100%;
    font-weight: 400;
    font-size: 18px;
    line-height: 27px;
    text-align: center;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.intro-text-content-subsection {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 24px;
}

.intro-text-content-subsection h1 {
    text-align: left;
    position: relative;
    font-weight: 300;
    font-size: 48px;
    left: 30px;
}

.intro-text-content-subsection h1::after {
    opacity: .8;
    display: block;
    position: absolute;
    content: '';
    width: 48px;
    /* if smartphone 16px if PC 24px */
    height: 48px;
    /* if smartphone 16px if PC 24px */
    border-radius: 50%;
    top: -20px;
    left: -30px;
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 60%, rgba(230, 150, 150, 0.9) 100%);
    z-index: -1;
}

.intro-text-content-subsection span {
    text-align: justify;
    line-height: 18px;
    font-size: 12px;
    font-weight: 400;
}

/* The Modal (background) */
.modal {
    display: none;
    position: fixed;
    z-index: 101;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    opacity: 0;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
    transition: 1s all;
}

/* Modal Content/Box */
.modal-content {
    width: 100%;
    height: 100%;
    background: transparent;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
}

.modal-content video {
    width: 100%;
    position: relative;
    transition: all .3s ease-in;
}

.modal-content .content {
    margin: 20px;
    height: auto;
    position: relative;
}

/* The Close Button */
.close-btn {
    color: #f8f8f8;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 50px;
    z-index: 102;
    font-weight: bold;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Footer CSS */

#stay_touch {
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%);
    padding: 50px 20px 50px 20px;
}
#stay_touch .footer__inner01 h2 {
    font-weight: 700;
}

#stay_touch .footer__inner01 p {
    text-align: center;
    margin-top:4px;
    font-weight: 400;
}

#footerWrapper .header__navi, 
#navi-sp.header__navi {
    position: relative !important;
    background-color: white;
    padding: 20px;
    height: unset;
    z-index: 50;
}

#footerWrapper .header__ul01 .submenu li a, 
#navi-sp .header__ul01 .submenu li a,
.top-menu-underline {
    font-size: 14px;
    font-weight: 400;
    margin-left: 40px;
    padding: 0px;
    margin: 0px 0px 20px 40px;
    border: none;
    height: 24px;
    min-height: 24px;
    text-underline-offset: 8px;
}

#footerWrapper .header__navi .header__ul01>li.sub .submenu li, 
#navi-sp.header__navi .header__ul01>li.sub .submenu li {
    width: 100%;
    float: none;
    border: none;
    padding: 0px;
}

.header_footer .footer__inner01 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 16px;
    padding: 24px 10px 24px 10px;
}

#subscribeform {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 0px 10px;
}

#subscribeform p {
    text-align: center;
    margin-top:4px;
}

#subscribeform ol {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#subscribeform ol:first-child {
    margin-top: 24px;
}

#subscribeform ol>div {
    margin-bottom: 16px;
}

#subscribeform ol>div:nth-child(3) {
    margin-bottom: 24px;
}

#subscribeform ol,
#subscribeform ol div,
#subscribeform ol div input[type="text"],
#subscribeform ol div select {
    width: 100%;
}

#subscribeform ol div input,
#subscribeform ol div select {
    border-radius: 4px;
    border: 1px solid;
    padding: 14px 10px 14px 10px;
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 10px;
    font-family: Arial, sans-serif;
}

#subscribeform ol div input::placeholder {
    color: #999;
    font-size: 10x; /* Ensure same font size */
}

#subscribeform ol div select {
    /* border-right: 10px solid transparent;
    box-shadow: 0.5px 0px 0px 0px black; */
    -webkit-appearance: none; /* for Safari */
    -moz-appearance: none; /* for Firefox */
    appearance: none; /* for others */
    background-color: white;
    background-image: url('data:image/svg+xml,<svg fill="gray" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="10px" viewBox="0 0 96.154 96.154" xml:space="preserve"><g><path d="M0.561,20.971l45.951,57.605c0.76,0.951,2.367,0.951,3.127,0l45.956-57.609c0.547-0.689,0.709-1.716,0.414-2.61c-0.061-0.187-0.129-0.33-0.186-0.437c-0.351-0.65-1.025-1.056-1.765-1.056H2.093c-0.736,0-1.414,0.405-1.762,1.056c-0.059,0.109-0.127,0.253-0.184,0.426C-0.15,19.251,0.011,20.28,0.561,20.971z"/></g></svg>');
    background-repeat: no-repeat;
    background-position: right 10px top 50%;
    background-size: 10px;
    padding-right: 30px;
}

.form-submit-button {
    width: 80%;
    padding: 14px 91px 14px 91px;
    background-color: white;
    border-radius: 16px;
}

.form-submit-button-style {
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%) padding-box,
        linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%) border-box;
    border-radius: 50em;
    border: 2px solid transparent;
}

.form-submit-button-style:hover {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%) border-box;
}

.form-submit-text {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: white;
    -webkit-text-fill-color: white;
}

.form-submit-button:hover .form-submit-text {
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.form-submit-button:hover #arrow-sm {
    fill: url(#sm-gradient)
}

#arrow-sm {
    fill: white
}

.roobix-footer-container {
    background: linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%);
    padding: 80px 0px 40px 0px;
}

#roobix_footer {
    background-color: transparent;
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 0;
    border-bottom: 0px;
}

#roobix_footer>* {
    margin-bottom: 30px;
}

#roobix-header-container {
    background: white;
    position: unset;
    padding: 40px 20px 40px 20px;
    height: unset;
}

#roobix-header-container .menu-footer-menu-container>ul>li>a {
    color:black;
}

.menu-footer-menu-container ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

#footerWrapper .roobix-footer-container #roobix_footer .pc-menu-container .pc-top .menu-footer-menu-container ul a,
#footerWrapper .roobix-footer-container #roobix_footer .pc-menu-container .pc .menu-footer-menu-container ul a {
    color: white;
    font-size: 12px;
    font-weight: 400;
}

.social {
    width: 100%;
    display: flex;
    gap: 1rem;
}

.pc-menu-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.copyright-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.copyright-logo .logo {
    width: 200px;
    height: 45px;
}

.copyright-logo span {
    font-size: 10px;
    color:white;
}

#footerWrapper .header__ul01>li, 
#navi-sp .header__ul01>li{
    margin: 0px 0px 16px 0px;
}

#footerWrapper .header__ul01>li.sub .submenu {
    box-shadow: none;
}

#footerWrapper .header__ul01>li.sub.active {
    padding-bottom: 40px;
}

#footerWrapper .header__ul01>li a, 
#navi-sp .header__ul01>li a {
    display: flex;
    align-items: center;
    position: relative;
    gap: 1rem;
    padding:0px 0px 16px 0px;
    height: unset;
}

#footerWrapper .header__ul01>li>a::before, 
#navi-sp .header__ul01>li>a::before {
    content: "";
    border: 2px solid transparent;
    border-radius: 25%;
    height: 2rem;
}

/* Color thing beside the navaigation main items */

#footerWrapper .header__ul01>li:nth-child(1) a::before, #navi-sp .header__ul01>li:nth-child(1) a::before {
    background: linear-gradient(white, white) padding-box,
        var(--bt-gradient) border-box;
}

#footerWrapper .header__ul01>li:nth-child(2) a::before, #navi-sp .header__ul01>li:nth-child(2) a::before{
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #96003C 0%, #DC326E 60%, #FFA0DC 100%) border-box;
}

#footerWrapper .header__ul01>li:nth-child(3) a::before, #navi-sp .header__ul01>li:nth-child(3) a::before {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #005064 0%, #0082A0 60%, #3CC8D2 100%) border-box;
}

#footerWrapper .header__ul01>li:nth-child(4) a::before, #navi-sp .header__ul01>li:nth-child(4) a::before {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #CC0000 0%, #EB5514 60%, #FFB900 100%) border-box;
}

#footerWrapper .header__ul01>li:nth-child(5) a::before, #navi-sp .header__ul01>li:nth-child(5) a::before,
#footerWrapper .header__ul01>li:nth-child(10) a::before, #navi-sp .header__ul01>li:nth-child(10) a::before {
    background: linear-gradient(white, white) padding-box,
        var(--ii-gradient) border-box;
}

#footerWrapper .header__ul01>li:nth-child(6) a::before, #navi-sp .header__ul01>li:nth-child(6) a::before,
#footerWrapper .header__ul01>li:nth-child(11) a::before, #navi-sp .header__ul01>li:nth-child(11) a::before {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #96003C 0%, #DC326E 60%, #FFA0DC 100%) border-box;
}

#footerWrapper .header__ul01>li:nth-child(7) a::before, #navi-sp .header__ul01>li:nth-child(7) a::before {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #FF6400 0%, #FFA500 60%, #FFC800 100%) border-box;
}

#footerWrapper .header__ul01>li:nth-child(8) a::before, #navi-sp .header__ul01>li:nth-child(8) a::before {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #462864 0%, #7832A0 60%, #C878BE 100%) border-box;
}

#footerWrapper .header__ul01>li:nth-child(9) a::before, #navi-sp .header__ul01>li:nth-child(9) a::before {
    background: linear-gradient(white, white) padding-box,
        linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%) border-box;
}

/* End of color things */

.submenu-parent-container {
  position: relative;
}

.main-red-background a {
  color: white !important;
}
.main-red-background {
  color: white;
  background: linear-gradient(90deg, #d84850 0%, #d94e54 65%, #da565a 100%) !important;
}

.submenu-children-container {
  display:none;
}
.submenu-parent-container:hover .submenu-children-container {
  display: flex;
  padding: 0;
  font-size: 14px;
  flex-direction: column;
  position: absolute;
}

.submenu-parent-container:hover .submenu-children-container li a {
  border-bottom: unset;
}

#footerWrapper .header__ul01>li>ul>li>a:hover, 
#navi-sp .header__ul01>li.active>ul>li>a:hover {
    text-decoration: underline;
    color:black;
}

#footerWrapper .header__ul01>li:nth-child(2)>ul>li>a, 
#navi-sp .header__ul01>li:nth-child(2)>ul>li>a {
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 8px;
    height: 130px;
    /* width: 335px; */
    position: relative;
    margin-bottom: 16px;
    margin-left:0px;
}

#footerWrapper .header__ul01>li:nth-child(2)>ul>li>a>span, 
#navi-sp .header__ul01>li:nth-child(2)>ul>li>a>span {
    position: absolute;
    color: white;
    bottom: 10px;
    left: 10px;
    font-weight: 700;
    font-size: 14px;

}

#footerWrapper .header__navi .header__ul01>li.sub:nth-child(1) .submenu .img-link, 
#navi-sp.header__navi .header__ul01>li.sub:nth-child(1) .submenu .img-link {
    display: grid;
    gap: 1rem;
    grid-template-areas:
        "img-one img-one"
        "img-two img-three";
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 20px;
}

#footerWrapper .header__navi .header__ul01>li.sub:nth-child(1) .submenu .img-link li>a,
#navi-sp.header__navi .header__ul01>li.sub:nth-child(1) .submenu .img-link li>a {
    background-size: cover;
    position: relative;
    margin-left: 0px;
}

#footerWrapper .header__navi .header__ul01>li.sub:nth-child(1) .submenu .img-link li>a>span,
#navi-sp.header__navi .header__ul01>li.sub:nth-child(1) .submenu .img-link li>a>span {
    position: absolute;
    font-weight: 700;
    color: white;
    bottom: 10px;
    left: 10px;
}

 .header_footer-destination-tags {
    display: flex;
    column-gap: 8px;
    row-gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.header_footer-destination-tags>a {
    display: inline-block !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding: 2px 10px 2px 10px !important;
    border: 1px solid black !important;
    height: 100% !important;
    border-radius: 4px;
}

@media only screen and (min-width: 767px) {
    .menu-footer-menu-container ul {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pc-top .menu-footer-menu-container ul li:not(:nth-last-child(2))::after,
    .pc .menu-footer-menu-container ul li:not(:last-child)::after {
        content: "";
        border: solid 1px white;
        margin-left: 2rem;
    }

    .pc .menu-footer-menu-container ul li:nth-child(1),
    .pc-top .menu-footer-menu-container ul li:nth-child(2),
    .pc .menu-footer-menu-container ul li:nth-child(3),
    .pc-top .menu-footer-menu-container ul li:nth-child(4),
    .pc .menu-footer-menu-container ul li:nth-child(5),
    .pc-top .menu-footer-menu-container ul li:nth-child(6),
    .pc .menu-footer-menu-container ul li:nth-child(7),
    .pc-top .menu-footer-menu-container ul li:nth-child(8),
    .pc .menu-footer-menu-container ul li:nth-child(9),
    .pc-top .menu-footer-menu-container ul li:nth-child(10),
    .pc .menu-footer-menu-container ul li:nth-child(11),
    .pc-top .menu-footer-menu-container ul li:nth-child(12) {
        display: none;
    }

    .social {
        justify-content: center;
        align-items: center;
    }

    #roobix_footer {
        display: flex;
        gap:80px;
    }

}

@media (max-width: 360px) {
    .form-submit-button {
        width: 90%;
        padding: 14px 50px 14px 50px;
    }

}

/* Mobile */
@media only screen and (max-width: 767px) {
    #headerWrap-2.topheader {
        position: absolute;
        background: transparent;
    }

    #headerWrap-2.header_footer .header__info02 {
        padding:var(--global-padding) 0px 0px 0px
    }

    .img-cover-top-title {
        font-size: 40px;
        line-height: 44px;
    }

    .img-cover-top video {
        height: 510px;
    }

    #headerWrap-2.topheader .header__info02 .header__ul03 {
        position: fixed;
        z-index: 9999;
        right: var(--global-padding);
        margin: 0px;
    }

    #navi-sp .header__inner .header__ul02>.form>form>input#s{
        border-radius: 10px;
        background: linear-gradient(90deg, #D21E32 20px, #DC6464 30px, #E69696 45px, white 50px) padding-box,
            linear-gradient(90deg, #D21E32 0%, #DC6464 60%, #E69696 100%) border-box;
        border: 2px solid transparent;
        padding: 0 30px 0 80px;
    }

    #navi-sp .header__inner .header__ul02>.form>form {
        position:relative;
    }

    #navi-sp .header__inner .header__ul02>.form>form::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18.43 19.09'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:white;%7D%3C/style%3E%3C/defs%3E%3Ctitle%3Eicon_search%3C/title%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='popup'%3E%3Cpath class='cls-1' d='M18.15,17.39l-4.54-4.73a7.7,7.7,0,1,0-5.9,2.75A7.63,7.63,0,0,0,12.12,14l4.58,4.76a1,1,0,1,0,1.45-1.39ZM7.71,1.21a6.5,6.5,0,1,1-6.5,6.5A6.5,6.5,0,0,1,7.71,1.21Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        display:block;
        position: absolute;
        height: 30px;
        width: 30px;
        top: 10px;
        left: 10px;
    }

    /* Footer CSS */

    /* Because the .header__navi is displayed as none by default */
    #footerWrapper .header__navi {
        display: block !important;
    }  
    
    /* For Main Navigation for mobile */
    #footerWrapper .header__ul01 li a, 
    #navi-sp .header__ul01 li a {
        font-weight: 700;
        font-size: 16px;
        background: none;
    
    }

    .chevron-down::after {
      content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23000000' height='15px' width='15px' version='1.1' id='down-arrow' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cstyle type='text/css'%3E %23down-arrow%7Bfill:url(%23seller-arrow-gradient)%7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='seller-arrow-gradient'%3E%3Cstop offset='0%25' stop-color='%23D21E32' /%3E%3Cstop offset='65%25' stop-color='%23DC6464' /%3E%3Cstop offset='100%25' stop-color='%23E48E8D' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3C/svg%3E");
      position: absolute;
      right: 0;
    }

    /* #footerWrapper .header__ul01>li:not(:nth-child(7))>a::after, 
    #navi-sp .header__ul01>li:not(:nth-child(7))>a::after {
        content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23000000' height='15px' width='15px' version='1.1' id='down-arrow' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cstyle type='text/css'%3E %23down-arrow%7Bfill:url(%23seller-arrow-gradient)%7D %3C/style%3E%3Cdefs%3E%3ClinearGradient id='seller-arrow-gradient'%3E%3Cstop offset='0%25' stop-color='%23D21E32' /%3E%3Cstop offset='65%25' stop-color='%23DC6464' /%3E%3Cstop offset='100%25' stop-color='%23E48E8D' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath id='XMLID_225_' d='M325.607,79.393c-5.857-5.857-15.355-5.858-21.213,0.001l-139.39,139.393L25.607,79.393 c-5.857-5.857-15.355-5.858-21.213,0.001c-5.858,5.858-5.858,15.355,0,21.213l150.004,150c2.813,2.813,6.628,4.393,10.606,4.393 s7.794-1.581,10.606-4.394l149.996-150C331.465,94.749,331.465,85.251,325.607,79.393z'/%3E%3C/svg%3E");
        position: absolute;
        right: 0;
    } */
    
    #footerWrapper .header__ul01>li.active>a::after, 
    #navi-sp .header__ul01>li.active>a::after {
        content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg fill='%23000000' height='15px' width='15px' version='1.1' id='seller-arrow' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 330 330' xml:space='preserve'%3E%3Cstyle type='text/css'%3E%0A%23seller-arrow%7Bfill:url(%23seller-arrow-gradient)%7D%0A%3C/style%3E%3Cdefs%3E%3ClinearGradient id='seller-arrow-gradient'%3E%3Cstop offset='0%25' stop-color='%23D21E32' /%3E%3Cstop offset='65%25' stop-color='%23DC6464' /%3E%3Cstop offset='100%25' stop-color='%23E48E8D' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath id='XMLID_224_' d='M325.606,229.393l-150.004-150C172.79,76.58,168.974,75,164.996,75c-3.979,0-7.794,1.581-10.607,4.394 l-149.996,150c-5.858,5.858-5.858,15.355,0,21.213c5.857,5.857,15.355,5.858,21.213,0l139.39-139.393l139.397,139.393 C307.322,253.536,311.161,255,315,255c3.839,0,7.678-1.464,10.607-4.394C331.464,244.748,331.464,235.251,325.606,229.393z'/%3E%3C/svg%3E");
        position: absolute;
        right: 0;
    }
    
    .top-sellers .title {
        margin-left:var(--global-padding);
    }

    .top-sellers .right {
        margin-right:var(--global-padding);
    }

}

/* PC */
@media only screen and (min-width: 767px) {
    #headerWrap-2.topheader {
        position: fixed;
        z-index:999999;
        background: linear-gradient(90deg, #D21E32 0%, #DC6464 65%, #E48E8D 100%);
    }

    .modal-content {
        padding: 100px 100px;
    }

    .top-item-container {
        overflow: hidden;
        justify-content: center;
    }

    .slider-container {
        display: none;
    }

    .top-package-icon {
        width: 275px;
    }

    .top-sellers {
        padding: 100px 0px 100px 0px;
    }

    .top-package-item {
        width: 275px;
        /* 260px if mobile, 275px if PC*/
    }

    .video-container {
        margin: 100px 0px 100px 0px;
    }

    .video-container .video-btn svg {
        width: 80px;
        height: 80px;
    }

    .section-container-two .container-bg {
        margin-left: -30px;
    }

    .section-container-two {
        /* height: 662px; */
    }

    .video-container::after {
        padding: 30px;
    }

    .hidden-gem-images-container {
        grid-template-areas:
            "one one one two two three three"
            "one one one four five five five";

        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: .5fr .5fr;
    }

    .hidden-gem-images-container div::after {
        font-size: 20px;
    }

    .circle::after {
        width: 24px;
        /* if smartphone 16px if PC 24px */
        height: 24px;
        /* if smartphone 16px if PC 24px */

    }


    /* intro text content */
    #intro-text-content {
        gap: 80px;
        padding: 80px 0px;
    }

    #intro-text-content p {
        width: 670px;
        font-weight: 400;
        font-size: 28px;
        line-height: 42px;
    }

    .intro-text-content-subsection {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 100px;
    }

    .intro-text-content-subsection h1 {
        position: relative;
    }

    .intro-text-content-subsection h1::after {
        opacity: .8;
        display: block;
        position: absolute;
        content: '';
        width: 80px;
        /* if smartphone 16px if PC 24px */
        height: 80px;
        /* if smartphone 16px if PC 24px */
        border-radius: 50%;
        top: -48px;
        left: -60px;
        background: linear-gradient(90deg, #D21E32 0%, #DC6464 60%, rgba(230, 150, 150, 0.9) 100%);
        z-index: -1;
    }

    .intro-text-content-subsection span {
        width: 428px;
        font-size: 16px;
        text-align: justify;
        line-height: 28.8px;
    }

    /* Footer Navi CSS */
    #footerWrapper .header__navi .header__inner .header__ul01 {
        display:flex;
        flex-direction: column;
        flex-wrap: wrap;
        align-content: space-between;
        column-gap:2rem;
        height: 100%;
        width: 100%;
    }
    #footerWrapper .header__navi .header__inner .header__ul01>li>.submenu{
        position: relative;
        display:flex;
        flex-direction: column;
        top:0px;
        z-index:50;
        box-shadow: none;
    }

    #footerWrapper .header__navi .header__inner {
        height: 1316px;
    }

    .title p {
        font-size: 32px;
        /* if smartphone 20px if PC 32px */
    }

    #footerWrapper .header__ul01>li a, 
    #navi-sp .header__ul01>li a {
        padding:0px 0px 24px 0px;
    }

    #footerWrapper .header__ul01>li, 
    #navi-sp .header__ul01>li{
        margin: 0px 0px 40px 0px;
    }

    #footerWrapper .header__ul01 .submenu li a, 
    #navi-sp .header__ul01 .submenu li a {
        margin: 0px 0px 16px 40px;
    }

    #subscribeform ol div input,
    #subscribeform ol div select,
    #subscribeform ol div input::placeholder {
        font-size: 12px;
    }

    .modal-content .content {
        width: 90%;
    }

}

.slider-container-global {
    width: 100%;
    display:none;
    gap:1rem;
    margin-left:var(--global-padding);
    margin-right: var(--global-padding);
}

.slider-container-global .scroll-range {
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
}

/* Chrome Scrollbar styling */
.slider-container-global .scroll-range::-webkit-slider-runnable-track {
    height: 2px;
    width: 100%;
    background-color: #d4d4d4;
}

.slider-container-global .scroll-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 5px;
    width: 100px;
    position: relative;
    top:-1px;
    border-radius: 50px;
    cursor: pointer;
}

.slider-container-global .scroll-range.ts-range::-webkit-slider-thumb {background: var(--ts-gradient);}
.slider-container-global .scroll-range.tt-range::-webkit-slider-thumb {background: var(--tt-gradient);}
.slider-container-global .scroll-range.bt-range::-webkit-slider-thumb {background: var(--bt-gradient);}
.slider-container-global .scroll-range.ii-range::-webkit-slider-thumb {background: var(--ii-gradient);}

/* Mozilla Firefox Scrollbar styling */
.slider-container-global .scroll-range::-moz-range-thumb {
    height: 5px;
    width: 100px;
    outline: none;
    background: var(--ii-gradient);
    cursor: pointer;
}

.slider-container-global .scroll-range.ts-range::-moz-range-thumb {background: var(--ts-gradient);}
.slider-container-global .scroll-range.tt-range::-moz-range-thumb {background: var(--tt-gradient);}
.slider-container-global .scroll-range.bt-range::-moz-range-thumb {background: var(--bt-gradient);}
.slider-container-global .scroll-range.ii-range::-moz-range-thumb {background: var(--ii-gradient);}

.slider-container-global .scroll-range::-moz-range-track{
    height: 2px;
    width: 100%;
    background-color: #d4d4d4;
}

.your-class {
    max-width: 1160px;
    width: 100%;
    overflow: hidden;
    display:flex;
    flex-wrap: wrap;
    margin-bottom: 50px;
    padding: 50px 15px ;
    gap: calc(15 / 1140* 100%);
}

.your-class .slick-dots {
    bottom: 0px;
}

.your-class .slick-dots li button:before {
    background: #e4e5e6;
    opacity: 1;
}

.your-class .slick-dots li.slick-active button:before {
    background: #d60516;
    width: 13px;
    height: 13px;
    opacity: 1;
    top: -3px;
    width: 8px;
    height: 8px;
    top: -1px;
}

.your-class .slick-dots li {
    margin: 0px;
}

.your-class figure {
    width: calc(370 / 1160* 100%);
    margin-bottom: 10px;
    background: #000500;
    overflow: hidden;
    position: relative;
}

.your-class figure .middle {
    display: table-cell;
    vertical-align: middle;
}

.your-class figure img {
    height: 100%;
    max-width: none;
    width: -webkit-calc(100% + 20px);
    width: calc(100% + 20px);
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.your-class figure:hover img {
    opacity: 0.4;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.your-class figure figcaption {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 2em;
    display: table;
}

.your-class figure figcaption a {
    color: #231f20;
    text-decoration: none;
}

.your-class figure figcaption h3 {
    position: relative;
    overflow: hidden;
    padding: 0.5em 0;
    color: #fff;
    margin: 0 30px;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 44px, 0);
    transform: translate3d(0, 44px, 0);
    font-family: "Signika", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.18em;
    position: relative;
    text-shadow: 0 1px 1px #000;
}

.your-class figure figcaption h3::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fff;
    content: '';
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
}

.your-class figure:hover figcaption h3 {
    top: 0px;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
}
.your-class figure:hover figcaption h3::after {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.your-class figure:hover figcaption p {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.your-class figure figcaption p {
    padding: 1em 0;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    color: #fff;
}

.insurance-banner--container {
    display:flex;
    flex-direction: column;
    gap: 50px;
    padding: 50px 15px;
}

@media screen and (max-width: 768px) {
    .your-class {
        max-width: 97vw;
    }

    .your-class figure figcaption h3 {
        font-size: 31px;
    }
}