:root{
--text: #161616;
--border: #92969C;
--white: #fff;
--accent: #EA5829;
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Inter Tight';
font-size: 18px;
line-height: 1.4;
letter-spacing: 0.02em;
}
a{ outline: none;}
p{margin: 0 0 15px;}
section{
padding: 60px 0;
}
.title_wrapper {
font-size: 20px;
font-weight: 500;
}
.section_title{
color: var(--text);
text-transform: uppercase;
font-size: clamp(26px, 4vw, 40px);
font-weight: 700;
flex: 1 1 100%;
margin-bottom: 10px;
}
.section_title span{
color: var(--accent);
}
.btn {
display: inline-flex;
align-items: center;
gap: 15px;
font-size: 16px;
font-weight: 600;
color: #FFF8E7;
background-color: var(--accent);
border: none;
cursor:pointer
}
/* Header */
.social_links{
list-style: none;
padding: 0;
display: flex;
gap: 10px;
color: var(--white);
}
.topbar{background: var(--accent);padding:8px;}
.topbar .container {text-align: center;}
.topbar p{
color: #F7E8C9;
font-size: 15px;
font-weight: 600;
text-decoration: underline;
margin: 0;
}
header {
padding: 10px 0;
position: absolute;
z-index: 99;
width: 100%;
top: 50px;
}
header .container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
header .logo{
max-width: 150px;
margin: 0 auto;
display: block;
}
header nav ul {
display: inline-flex;
list-style: none;
gap: 20px;
padding: 10px 20px;
background: #fff;
color: var(--text);
font-weight: 600;
border-radius: 8px;
text-transform: uppercase;
font-size: 16px;
}
.currency-select {
display: inline-flex;
float: right;
border-radius: 10px;
background: #fff;
align-items: center;
overflow: hidden;
padding: 12px;
}
.currency-symbol {
width: 20px;
font-size: 16px;
font-weight: 700;
color: var(--text);
border-right: 2px solid #e5e5e5;
line-height: 1;
}
.currency-select select {
flex: 1;
height: 100%;
border: 0;
outline: 0;
background: transparent;
padding: 0 20px;
font-size: 16px;
font-weight: 600;
color: var(--text);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.currency-select {
position: relative;
}
.currency-select::after {
content: "";
position: absolute;
right: 14px;
top: 50%;
width: 6px;
height: 6px;
border-right: 1.5px solid #111;
border-bottom: 1.5px solid #111;
transform: translateY(-65%) rotate(45deg);
pointer-events: none;
}
/* Hero */
.hero{
width: calc(100% - 20px);
margin: 10px auto;
border-radius: 30px;
padding-top: 160px !important;
position: relative;
overflow: hidden;
}
.hero:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1360px;
height: 660px;
background: radial-gradient(rgb(0 0 0 / 55%) 0%, rgba(0, 0, 0, 0) 100%);
margin-top: -12.5%;
}
.hero, .hero-inner{
min-height: 720px;
padding: 75px 0;
display: flex;
justify-content: center;
text-align: center;
}
.hero .container{
max-width: 860px;
position: relative;
}
.hero h1 span{
color: var(--accent);
}
.hero h1, .hero-inner h1 {
color: #F7E8C9;
font-weight: 600;
font-size: clamp(28px , 6vw , 64px);
text-transform: uppercase;
}
.hero p, .hero-inner p{
color: #F7E8C9;
font-weight: 500;
font-size: clamp(16px , 3vw , 22px);;
margin-bottom: 44px;
}
.hero .badges{
display: block;
margin: 60px auto 0;
}
/* hero-inner */
.hero-inner {
min-height: 450px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-inner .container{
background: radial-gradient(#0a0a0a75 0%, transparent 80%);
}
.hero-inner p{
margin: 0;
}
/* Featured Tour */
.featured_tour .col {
min-width: 0;
}
.meta {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 15px;
}
.meta span {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--text);
font-weight: 500;
}
.meta span i {
background-color: var(--accent);
}
.icon-clock {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='M3 12a9 9 0 1 0 18 0a9 9 0 0 0-18 0'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/g%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-user {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 1.25a4.75 4.75 0 1 0 0 9.5a4.75 4.75 0 0 0 0-9.5M8.75 6a3.25 3.25 0 1 1 6.5 0a3.25 3.25 0 0 1-6.5 0M12 12.25c-2.313 0-4.445.526-6.024 1.414C4.42 14.54 3.25 15.866 3.25 17.5v.102c-.001 1.162-.002 2.62 1.277 3.662c.629.512 1.51.877 2.7 1.117c1.192.242 2.747.369 4.773.369s3.58-.127 4.774-.369c1.19-.24 2.07-.605 2.7-1.117c1.279-1.042 1.277-2.5 1.276-3.662V17.5c0-1.634-1.17-2.96-2.725-3.836c-1.58-.888-3.711-1.414-6.025-1.414M4.75 17.5c0-.851.622-1.775 1.961-2.528c1.316-.74 3.184-1.222 5.29-1.222c2.104 0 3.972.482 5.288 1.222c1.34.753 1.961 1.677 1.961 2.528c0 1.308-.04 2.044-.724 2.6c-.37.302-.99.597-2.05.811c-1.057.214-2.502.339-4.476.339s-3.42-.125-4.476-.339c-1.06-.214-1.68-.509-2.05-.81c-.684-.557-.724-1.293-.724-2.601' clip-rule='evenodd'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-cancel {
display: inline-block;
width: 24px;
height: 24px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10s10-4.477 10-10S17.523 2 12 2m1 15h-2v-6h2zm0-8h-2V7h2z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.icon-star {
display: inline-block;
width: 16px;
height: 16px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12.954 1.7a1 1 0 0 0-1.908-.001l-2.184 6.92l-6.861-.005a1 1 0 0 0-.566 1.826l5.498 3.762l-2.067 6.545A1 1 0 0 0 6.4 21.86l5.6-4.006l5.594 4.007a1 1 0 0 0 1.536-1.114l-2.067-6.545l5.502-3.762a1 1 0 0 0-.566-1.826l-6.866.005z'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.gallery_slider {
margin: 40px 0 60px;
}
.testimonials_slider {
min-width: 0;
max-width: 100%;
overflow: hidden;
margin: 20px 0;
}
.testimonials_slider .swiper-wrapper {
min-width: 0;
}
.testimonials_slider .swiper-slide {
min-width: 0;
width: auto;
flex-shrink: 0;
}
.testimonial_item {
background: #F7E8C9;
border-radius: 10px;
padding: 24px;
font-size: 16px;
}
span.testimonial_author {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
color: #000;
font-size: 18px;
font-weight: 700;
}
span.testimonial_author .rating {
color: #34E0A1;
display: flex;
}
.date{color: #656565;font-size: 14px; margin-bottom: 20px;}
ul.itinerary {
list-style: none;
margin: 15px 0;
line-height: 1.8;
}
ul.itinerary li {
position: relative;
padding-left: 40px;
}
ul.itinerary li:before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
background: url(../images/chopstic.svg) no-repeat center / contain;
}
.includes {
border: 1px solid #161616;
border-radius: 20px;
padding: 30px;
margin-top: 30px;
}
.tasting_menu, .drinking_menu {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: self-start;
margin-top: 15px;
}
ul.tasting_menu li, .drinking_menu li {
list-style: none;
display: inline-block;
background: #F7E8C9;
padding: 8px 12px 8px 36px;
border-radius: 10px;
margin-bottom: 10px;
color: var(--text);
position: relative;
}
ul.tasting_menu li::before {
content: "";
position: absolute;
left: 8px;
top: 18px;
width: 22px;
height: 22px;
background: url('data:image/svg+xml,') no-repeat center / contain;
transform: translateY(-50%);
}
ul.drinking_menu li::before {
content: "";
position: absolute;
left: 9px;
top: 18px;
width: 22px;
height: 22px;
background: url('data:image/svg+xml,') no-repeat center / contain;
transform: translateY(-50%);
}
.note{
color: #6A6A6A;
}
.tabs {width: 100%;}
.tabs-nav {display: flex;}
.tab-btn {padding: 12px 20px;border: none;cursor: pointer; transition: 0.3s; width: 100%;display: flex; align-items: center; justify-content: center; gap:5px;}
.tab-panel {display: none;}
.tab-panel p {margin-bottom: 15px;line-height: 1.6;}
.tab-panel.active {display: block;}
.booking_widget{
background: #fff;
}
.booking_widget .tab-btn {
font-size: 14px;
font-weight: 500;
background: none;
color: var(--text);
font-family: 'Inter Tight';
}
.booking_widget .tab-btn.active {
background: var(--accent);
color: #fff
}
.note2 {
color: var(--accent);
text-align: center;
padding: 4px 20px;
}
/* UENO DISTRICT */
.vertical_text {
color: var(--accent);
font-size: 30px;
font-weight: 600;
writing-mode: sideways-rl;
position: absolute;
top: 15%;
left: -4%;
}
/* FAQ's */
.faq .title_wrapper{
max-width: 320px;
}
.accordion-item {
border-bottom: 1px solid var(--border);
background: #fff;
}
.accordion-header {
width: 100%;
padding: 30px 0;
font-size: 20px;
font-weight: 500;
text-align: left;
background: transparent;
border: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.chevon-up {
display: inline-block;
width: 30px;
height: 30px;
--svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23000' d='M39.634 31.884a1.25 1.25 0 0 1-1.768 0L24 18.018L10.134 31.884a1.25 1.25 0 0 1-1.768-1.768l14.75-14.75a1.25 1.25 0 0 1 1.768 0l14.75 14.75a1.25 1.25 0 0 1 0 1.768'/%3E%3C/svg%3E");
background-color: currentColor;
-webkit-mask-image: var(--svg);
mask-image: var(--svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
.accordion-content {
max-height: 0;
color: var(--text);
font-weight: 500;
overflow: hidden;
transition: max-height 0.3s ease;
padding: 0;
}
.accordion-content p {
margin: 0 0 15px 0;
}
.accordion-item.active .accordion-content {
max-height: 200px;
padding: 0 0 10px;
}
.accordion-item.active .accordion-header {
color: var(--accent);
font-weight: 600;
}
.accordion-item.active i {
transform: rotate(180deg);
color: var(--accent);
}
/* Call to Action */
.cta .container{
padding-top: 60px !important;
padding-bottom: 60px !important;
color: #F7E8C9;
text-align: center;
position: relative;
overflow: hidden;
}
.cta .container:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1360px;
height: 660px;
background: radial-gradient(rgb(0 0 0 / 55%) 0%, rgba(0, 0, 0, 0) 100%);
margin-top: -12.5%;
}
.cta .row{position: relative;}
img.ratings {
background: #fff;
border-radius: 15px;
padding: 8px 10px;
}
.cta h2{
font-size: clamp(32px,4vw,50px);
}
.cta p{
font-size: 20px;
margin: 0 0 36px;
}
/* footer */
.footer{
background-color: var(--accent);
padding: 64px 0 0;
color: #F7E8C9;
overflow: hidden
}
.footer h3{
font-size: 16px;
font-weight: 500;
text-transform: uppercase;
margin-bottom: 32px;
}
.footer_logo{
max-width: 200px;
height: auto;
margin: 0 auto;
display: block;
}
ul.footer_menu {
padding: 0;
display: flex;
list-style: none;
column-gap: 50px;
row-gap: 10px;
flex-wrap: wrap;
margin: 0 0 38px;
font-size: 22px;
}
ul.footer_menu li {position: relative;}
ul.footer_menu li:not(:last-child):after {
content: "/";
position: absolute;
right: -30px;
}
.widgets {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
}
.widget.full {
flex: 1 1 100%;
}
.newsletter{margin-top: 30px;}
.newsletter h3{
text-transform: capitalize;
font-size: 20px;
margin-bottom: 15px;
font-weight: 300;
}
.newsletter h3 strong{font-weight: 600 ;}
.newsletter .field-control{
position: relative;
}
.newsletter input{
width: 100%;
padding: 22px 20px;
border: 1px solid rgba(255,255,255,0.5);
font-size: 16px;
font-weight: 500;
border-radius: 40px;
background-color: #F7E8C9;
font-family: 'Inter Tight';
color: #000;
outline: none;
}
.newsletter input::placeholder{
color: #9C9383;
}
.newsletter .btn {
position: absolute;
background: #161616;
font-family: 'Inter Tight';
color: #F7E8C9;
border-radius: 40px;
padding: 17px 30px;
right: 5px;
top: 6px;
text-transform: uppercase;
}
.footer .widget ul{
list-style: none;
padding: 0;
line-height: 2;
}
.copyright{
font-size: 16px;
text-align: center;
border-top: 1px solid #F7E8C9;
padding: 24px 0;
margin-top: 64px;
}
@media(width < 991px){
header nav, .currency-select{display: none;}
}
@media(width < 768px){
.hero{min-height: auto !important;}
ul.footer_menu {column-gap: 40px; margin: 0 0 20px; font-size: 18px;}
ul.footer_menu li:not(:last-child):after {right: -20px;}
}