.hotel-hero{
position:relative;
min-height:680px;
display:flex;
align-items:center;
background-image:
url(//vkgroupofhotels.com/wp-content/themes/vk-hotels/assets/images/hotel/hero.jpg);
background-size:cover;
background-position:center;
overflow:hidden;
} .hotel-hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.78) 0%,
rgba(0,0,0,.55) 45%,
rgba(0,0,0,.20) 100%
);
} .hotel-hero .container{
position:relative;
z-index:2;
}
.hotel-hero-content{
max-width:700px;
color:#fff;
} .hotel-hero-label{
display:inline-block;
padding:9px 18px;
margin-bottom:22px;
border-radius:30px;
background:#c99a2e;
color:#fff;
font-size:13px;
font-weight:700;
letter-spacing:2px;
} .hotel-hero h1{
margin:0 0 25px;
font-size:64px;
line-height:1.08;
font-weight:700;
color:#fff;
} .hotel-hero p{
max-width:600px;
margin:0 0 35px;
font-size:18px;
line-height:1.8;
color:rgba(255,255,255,.90);
} .hotel-hero-buttons{
display:flex;
align-items:center;
gap:15px;
flex-wrap:wrap;
} .hotel-hero .theme-btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:15px 28px;
border-radius:5px;
text-decoration:none;
background:#c99a2e;
color:#fff;
font-weight:600;
transition:.3s;
}
.hotel-hero .theme-btn:hover{
background:#fff;
color:#222;
transform:translateY(-2px);
} .hotel-outline-btn{
display:inline-flex;
align-items:center;
padding:14px 28px;
border:1px solid rgba(255,255,255,.8);
border-radius:5px;
color:#fff;
text-decoration:none;
font-weight:600;
transition:.3s;
}
.hotel-outline-btn:hover{
background:#fff;
color:#222;
} @media(max-width:991px){
.hotel-hero{
min-height:600px;
}
.hotel-hero h1{
font-size:52px;
}
} @media(max-width:767px){
.hotel-hero{
min-height:620px;
background-position:center;
}
.hotel-hero-content{
max-width:100%;
text-align:center;
}
.hotel-hero-label{
font-size:11px;
letter-spacing:1.5px;
}
.hotel-hero h1{
font-size:40px;
line-height:1.15;
}
.hotel-hero p{
font-size:15px;
line-height:1.7;
}
.hotel-hero-buttons{
justify-content:center;
}
} @media(max-width:480px){
.hotel-hero{
min-height:580px;
}
.hotel-hero h1{
font-size:34px;
}
.hotel-hero p{
font-size:14px;
}
.hotel-hero .theme-btn,
.hotel-outline-btn{
width:100%;
justify-content:center;
}
} .hotel-amenities {
position: relative;
padding: 40px 0 50px;
background:
linear-gradient(
180deg,
#fafaf8 0%,
#f5f6f1 100%
);
overflow: hidden;
} .hotel-amenities::before {
content: "";
position: absolute;
width: 420px;
height: 420px;
top: -180px;
left: -180px;
border-radius: 50%;
background: rgba(151, 196, 63, 0.06);
pointer-events: none;
}
.hotel-amenities::after {
content: "";
position: absolute;
width: 360px;
height: 360px;
right: -160px;
bottom: -160px;
border-radius: 50%;
background: rgba(151, 196, 63, 0.05);
pointer-events: none;
} .amenities-heading {
position: relative;
z-index: 2;
max-width: 760px;
margin: 0 auto 60px;
text-align: center;
}
.amenities-heading .section-label {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
margin-bottom: 14px;
color: #97c43f;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
} .amenities-heading .section-label::before,
.amenities-heading .section-label::after {
content: "";
width: 32px;
height: 1px;
background: #97c43f;
margin: 0 12px;
opacity: 0.7;
}
.amenities-heading h2 {
margin: 0 0 18px;
color: #171717;
font-size: 30px !important;
line-height: 1.18;
font-weight: 600;
letter-spacing: -0.3px;
}
.amenities-heading p {
max-width: 680px;
margin: 0 auto;
color: #6c6c6c;
font-size: 16px;
line-height: 1.8;
} .amenities-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 22px;
} .amenity-card {
position: relative;
display: flex;
align-items: center;
gap: 20px;
text-align: center;
min-height: 190px;
padding: 30px 25px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.035);
transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
flex-direction: column;
} .amenity-card::after {
content: "";
position: absolute;
width: 120px;
height: 120px;
right: -60px;
top: -60px;
border-radius: 50%;
background: rgba(151, 196, 63, 0.055);
transition: transform 0.4s ease;
}
.amenity-card:hover {
transform: translateY(-8px);
border-color: rgba(151, 196, 63, 0.35);
box-shadow: 0 20px 45px rgba(0, 0, 0, 0.09);
border-bottom: 3px solid #97c43f;
transition: 0.35s ease;
}
.amenity-card:hover::after {
transform: scale(1.6);
} .amenity-icon {
position: relative;
z-index: 2;
flex-shrink: 0;
width: 64px;
height: 64px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16px;
font-size: 54px;
box-shadow:
inset 0 0 0 1px rgba(151, 196, 63, 0.08);
transition:
background 0.35s ease,
color 0.35s ease,
transform 0.35s ease;
}
.amenity-card:hover .amenity-icon {
color: #ffffff;
transform: scale(1.06) rotate(0deg);
} .amenity-content {
position: relative;
z-index: 2;
flex: 1;
}
.amenity-content h3 {
margin: 1px 0 10px;
color: #181818;
font-size: 20px;
line-height: 1.3;
font-weight: 600;
transition: color 0.3s ease;
}
.amenity-card:hover .amenity-content h3 {
color: #7ba62f;
}
.amenity-content p {
margin: 0;
color: #6f6f6f;
font-size: 14px;
line-height: 1.75;
} @media (min-width: 1200px) {
.amenities-grid {
grid-template-columns: repeat(4, 1fr);
}
.amenity-card {
min-height: 190px;
}
} @media (max-width: 1199px) {
.amenities-grid {
grid-template-columns: repeat(3, 1fr);
}
.amenity-card {
min-height: 185px;
}
} @media (max-width: 991px) {
.hotel-amenities {
padding: 75px 0 80px;
}
.amenities-heading {
margin-bottom: 45px;
}
.amenities-heading h2 {
font-size: 36px;
}
.amenities-grid {
grid-template-columns: repeat(2, 1fr);
gap: 18px;
}
.amenity-card {
min-height: 180px;
padding: 25px 22px;
gap: 17px;
}
.amenity-icon {
width: 58px;
height: 58px;
border-radius: 14px;
font-size: 22px;
}
.amenity-content h3 {
font-size: 18px;
}
} @media (max-width: 767px) {
.hotel-amenities {
padding: 65px 0 70px;
overflow: hidden;
}
.amenities-heading {
margin-bottom: 38px;
padding: 0 10px;
}
.amenities-heading h2 {
font-size: 32px;
line-height: 1.25;
}
.amenities-heading p {
font-size: 15px;
line-height: 1.7;
} .amenities-grid {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
gap: 15px;
width: 100%;
padding: 5px 18px 18px 0;
margin: 0; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory;
scroll-behavior: smooth; touch-action: pan-x; overscroll-behavior-x: contain;
scrollbar-width: none;
} .amenities-grid::-webkit-scrollbar {
display: none;
} .amenity-card {
flex: 0 0 calc(100% - 48px);
width: calc(100% - 48px);
min-width: calc(100% - 48px);
min-height: 175px;
box-sizing: border-box;
padding: 24px 20px;
gap: 17px;
border-radius: 16px;
scroll-snap-align: start;
scroll-snap-stop: always;
margin: 0;
} .amenity-icon {
width: 56px;
height: 56px;
min-width: 56px;
border-radius: 14px;
font-size:40px;
} .amenity-content {
min-width: 0;
}
.amenity-content h3 {
margin: 2px 0 8px;
font-size: 18px;
line-height: 1.3;
}
.amenity-content p {
margin: 0;
font-size: 14px;
line-height: 1.65;
}
} .hotel-why{
padding:110px 0;
background:#fff;
}
.hotel-why-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:80px;
align-items:center;
} .hotel-why-image{
position:relative;
min-height:560px;
}
.hotel-why-image img{
width:100%;
height:560px;
object-fit:cover;
border-radius:18px;
display:block;
} .hotel-experience{
position:absolute;
right:-30px;
bottom:35px;
display:flex;
align-items:center;
gap:15px;
padding:22px 28px;
background:#97c43f;
color:#fff;
border-radius:12px;
box-shadow:0 15px 35px rgba(0,0,0,.18);
}
.hotel-experience strong{
font-size:38px;
line-height:1;
}
.hotel-experience span{
font-size:13px;
line-height:1.5;
font-weight:600;
} .hotel-why-content{
max-width:590px;
}
.hotel-why-content .section-label{
display:inline-block;
margin-bottom:14px;
color:#97c43f;
font-size:13px;
font-weight:700;
letter-spacing:2px;
}
.hotel-why-content h2{
margin:0 0 20px;
color:#171717;
font-size:46px;
line-height:1.15;
}
.hotel-why-intro{
margin:0 0 32px;
color:#666;
font-size:16px;
line-height:1.8;
} .hotel-benefits{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px 30px;
margin-bottom:35px;
}
.hotel-benefit{
display:flex;
align-items:flex-start;
gap:14px;
}
.hotel-benefit-icon{
flex-shrink:0;
width:46px;
height:46px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
background:#f1f7e5;
color:#97c43f;
font-size:17px;
}
.hotel-benefit h3{
margin:0 0 6px;
font-size:17px;
color:#171717;
}
.hotel-benefit p{
margin:0;
color:#777;
font-size:13px;
line-height:1.6;
} .hotel-why-content .theme-btn{
display:inline-flex;
align-items:center;
gap:9px;
} @media(max-width:991px){
.hotel-why{
padding:80px 0;
}
.hotel-why-grid{
grid-template-columns:1fr;
gap:55px;
}
.hotel-why-image{
max-width:700px;
margin:auto;
width:100%;
}
.hotel-why-content{
max-width:100%;
}
} @media(max-width:767px){
.hotel-why{
padding:70px 0;
}
.hotel-why-grid{
gap:40px;
}
.hotel-why-image{
min-height:400px;
}
.hotel-why-image img{
height:400px;
}
.hotel-experience{
right:15px;
bottom:20px;
padding:17px 20px;
}
.hotel-experience strong{
font-size:30px;
}
.hotel-why-content h2{
font-size:34px;
}
.hotel-benefits{
grid-template-columns:1fr;
gap:22px;
}
} .hotel-offers{
padding:100px 0;
background:#f7f7f5;
}
.offers-heading{
max-width:720px;
margin:0 auto 55px;
text-align:center;
}
.offers-heading .section-label{
display:inline-block;
margin-bottom:14px;
color:#97c43f;
font-size:13px;
font-weight:700;
letter-spacing:2px;
}
.offers-heading h2{
margin:0 0 18px;
color:#171717;
font-size:42px;
line-height:1.2;
}
.offers-heading p{
margin:0;
color:#666;
font-size:16px;
line-height:1.8;
} .offers-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
} .offer-card{
overflow:hidden;
background:#fff;
border:1px solid #e8e8e8;
border-radius:16px;
transition:all .35s ease;
}
.offer-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 45px rgba(0,0,0,.10);
} .offer-featured{
box-shadow:0 12px 35px rgba(0,0,0,.08);
} .offer-image{
position:relative;
height:260px;
overflow:hidden;
}
.offer-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .5s ease;
}
.offer-card:hover .offer-image img{
transform:scale(1.06);
} .offer-tag{
position:absolute;
top:18px;
left:18px;
padding:8px 14px;
background:#97c43f;
color:#fff;
border-radius:30px;
font-size:11px;
font-weight:700;
letter-spacing:1px;
} .offer-content{
padding:28px;
}
.offer-small{
display:block;
margin-bottom:9px;
color:#97c43f;
font-size:11px;
font-weight:700;
letter-spacing:1.5px;
}
.offer-content h3{
margin:0 0 12px;
color:#171717;
font-size:24px;
line-height:1.3;
}
.offer-content p{
margin:0 0 22px;
color:#6d6d6d;
font-size:14px;
line-height:1.75;
} .offer-link{
display:inline-flex;
align-items:center;
gap:8px;
color:#171717;
text-decoration:none;
font-size:14px;
font-weight:700;
transition:.3s;
}
.offer-link i{
color:#97c43f;
transition:.3s;
}
.offer-link:hover{
color:#97c43f;
}
.offer-link:hover i{
transform:translateX(5px);
} @media(max-width:991px){
.offers-grid{
grid-template-columns:repeat(2,1fr);
}
} @media(max-width:767px){
.hotel-offers{
padding:70px 0;
}
.offers-heading h2{
font-size:32px;
}
.offers-grid{
grid-template-columns:1fr;
}
.offer-image{
height:240px;
}
} .hotel-room-features-admin {
margin-top: 25px;
padding: 20px;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 8px;
}
.hotel-room-features-admin h4 {
margin: 0 0 20px;
font-size: 18px;
}
.hotel-room-feature-row {
display: grid;
grid-template-columns:
minmax(180px, 1fr)
minmax(180px, 250px)
90px;
gap: 15px;
align-items: end;
padding: 15px;
margin-bottom: 12px;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
}
.hotel-room-feature-row label {
display: block;
margin-bottom: 6px;
font-weight: 600;
}
.hotel-room-feature-row input,
.hotel-room-feature-row select {
width: 100%;
min-height: 40px;
}
.hotel-feature-remove-wrap {
display: flex;
align-items: end;
}
.hotel-remove-feature {
color: #b32d2e !important;
}
.hotel-remove-feature:hover {
background: #b32d2e !important;
color: #fff !important;
}
.hotel-add-feature {
margin-top: 5px !important;
}
@media screen and (max-width: 782px) {
.hotel-room-feature-row {
grid-template-columns: 1fr;
}
} .nearby-attractions{
padding:90px 0;
background:#f8f8f6;
}
.nearby-attractions-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 35px;
margin: 40px auto 0;
}
.nearby-attraction{
background:#fff;
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 35px rgba(0,0,0,.07);
}
.nearby-attraction-gallery{
position:relative;
width:100%;
aspect-ratio:16 / 10;
overflow:hidden;
}
.nearby-attraction-slide{
position:absolute;
inset:0;
opacity:0;
visibility:hidden;
transition:opacity .35s ease;
}
.nearby-attraction-slide.active{
opacity:1;
visibility:visible;
}
.nearby-attraction-slide img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.nearby-attraction-content{
padding:25px 28px 30px;
}
.nearby-attraction-content h3{
margin:0 0 10px;
font-size:24px;
}
.nearby-attraction-content p{
margin:0;
color:#666;
line-height:1.7;
}
.nearby-slider-prev,
.nearby-slider-next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:42px;
height:42px;
border:0;
border-radius:50%;
background:rgba(0,0,0,.65);
color:#fff;
cursor:pointer;
z-index:5;
}
.nearby-slider-prev{
left:15px;
}
.nearby-slider-next{
right:15px;
}
.nearby-slider-dots{
position:absolute;
left:0;
right:0;
bottom:15px;
display:flex;
justify-content:center;
gap:7px;
z-index:5;
}
.nearby-slider-dot{
width:8px;
height:8px;
padding:0;
border:0;
border-radius:50%;
background:rgba(255,255,255,.6);
cursor:pointer;
}
.nearby-slider-dot.active{
background:#fff;
transform:scale(1.3);
} @media(max-width:767px){
.nearby-attractions{
padding:60px 0;
}
.nearby-attractions-list{
grid-template-columns:1fr;
gap:25px;
}
.nearby-attraction-gallery{
aspect-ratio:4 / 3;
touch-action:pan-y;
}
.nearby-attraction-content{
padding:20px;
}
.nearby-attraction-content h3{
font-size:21px;
}
.nearby-slider-prev,
.nearby-slider-next{
width:38px;
height:38px;
}
}.destinations-section {
position: relative;
padding: 60px 0 70px;
background: #ffffff;
overflow: hidden;
} .destinations-heading {
text-align: center;
margin-bottom: 48px;
}
.destinations-heading > span {
display: block;
margin-bottom: 12px;
color: #d4a72c;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.destinations-heading h2 {
margin: 0;
color: #111111;
font-size: 42px;
line-height: 1.2;
font-weight: 500;
}
.destinations-heading p {
max-width: 680px;
margin: 0 auto;
color: #666666;
font-size: 16px;
line-height: 1.8;
} .destinations-heading-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: 18px 0 22px;
}
.destinations-heading-divider span {
display: block;
width: 58px;
height: 2px;
background: #d2a63a;
}
.destinations-heading-divider i {
color: #d2a63a;
font-size: 15px;
} .destinations-swiper-wrap {
position: relative;
width: 100%;
} .destinationsSlider {
width: 100%;
overflow: hidden;
padding: 5px 2px 15px;
}
.destinationsSlider .swiper-wrapper {
align-items: stretch;
}
.destinationsSlider .swiper-slide {
height: auto;
display: flex;
box-sizing: border-box;
} .destination-card {
position: relative;
display: block;
width: 100%;
height: 435px;
overflow: hidden;
border-radius: 14px;
background: #111111;
text-decoration: none;
isolation: isolate;
transform: translateZ(0);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
} .destination-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
.destination-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.7s ease,
opacity 0.3s ease;
transform: scale(1.01);
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
} .destination-card:hover .destination-image img {
transform: scale(1.07);
} .destination-no-image {
display: flex;
align-items: center;
justify-content: center;
background: #222222;
}
.destination-no-image i {
color: #d4a72c;
font-size: 55px;
} .destination-overlay {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(
to bottom,
rgba(0, 0, 0, 0.04) 15%,
rgba(0, 0, 0, 0.18) 40%,
rgba(0, 0, 0, 0.88) 100%
);
pointer-events: none;
} .destination-content {
position: absolute;
left: 0;
right: 0;
bottom: 38px;
z-index: 2;
padding: 0 20px;
text-align: center;
} .destination-icon {
width: 74px;
height: 74px;
margin: 0 auto 22px;
border: 1px solid #d4a72c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.15);
transition:
background 0.3s ease,
transform 0.3s ease;
}
.destination-icon i {
color: #d4a72c;
font-size: 30px;
transition:
transform 0.3s ease,
color 0.3s ease;
} .destination-card:hover .destination-icon {
background: #d4a72c;
transform: translateY(-4px);
}
.destination-card:hover .destination-icon i {
color: #ffffff;
transform: scale(1.05);
} .destination-content h3 {
margin: 0 0 14px;
color: #ffffff;
font-size: 27px;
line-height: 1.15;
font-weight: 700;
letter-spacing: 1px;
} .destination-explore {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #d4a72c;
font-size: 16px;
font-weight: 600;
line-height: 1.4;
}
.destination-explore i {
font-size: 14px;
transition:
transform 0.3s ease;
}
.destination-card:hover .destination-explore i {
transform: translateX(5px);
} .destination-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 64px;
height: 64px;
padding: 0;
border: 0;
border-radius: 50%;
background: #ffffff;
color: #222222;
display: flex;
align-items: center;
justify-content: center;
font-size: 21px;
cursor: pointer;
z-index: 20;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.15);
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease,
box-shadow 0.3s ease;
} .destination-slider-btn:hover {
background: #d4a72c;
color: #ffffff;
transform:
translateY(-50%)
scale(1.05);
box-shadow:
0 12px 35px rgba(0, 0, 0, 0.20);
} .destination-prev {
left: -32px;
}
.destination-next {
right: -32px;
} .destination-slider-btn.swiper-button-disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
} .destinations-pagination {
position: relative;
margin-top: 28px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 10px;
} .destinations-pagination .swiper-pagination-bullet {
width: 9px;
height: 9px;
margin: 0 !important;
padding: 0;
border-radius: 50%;
background: #d8d8d8;
opacity: 1;
transition:
width 0.3s ease,
background 0.3s ease,
border-radius 0.3s ease;
} .destinations-pagination
.swiper-pagination-bullet-active {
width: 28px;
border-radius: 10px;
background: #d4a72c;
} .destinationsSlider,
.destinationsSlider .swiper-wrapper {
touch-action: pan-y;
}
.destinationsSlider .swiper-slide {
user-select: none;
-webkit-user-select: none;
} .destinationsSlider .swiper-slide,
.destinationsSlider .swiper-wrapper {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.destinationsSlider .swiper-slide {
transform: translateZ(0);
} @media (max-width: 1199px) {
.destinations-section {
padding: 55px 0 65px;
}
.destinations-heading {
margin-bottom: 42px;
}
.destinations-heading h2 {
font-size: 38px;
}
.destination-card {
height: 420px;
}
.destination-slider-btn {
width: 58px;
height: 58px;
font-size: 19px;
}
.destination-prev {
left: -15px;
}
.destination-next {
right: -15px;
}
} @media (max-width: 991px) {
.destinations-heading {
margin-bottom: 38px;
}
.destinations-heading h2 {
font-size: 35px;
}
.destinations-heading p {
font-size: 15px;
}
.destination-card {
height: 420px;
}
.destination-slider-btn {
width: 54px;
height: 54px;
font-size: 18px;
}
.destination-prev {
left: -10px;
}
.destination-next {
right: -10px;
}
.destination-content {
bottom: 32px;
}
.destination-icon {
width: 68px;
height: 68px;
margin-bottom: 19px;
}
.destination-icon i {
font-size: 28px;
}
.destination-content h3 {
font-size: 25px;
}
} @media (max-width: 767px) {
.destinations-section {
padding: 45px 0 55px;
}
.destinations-heading {
margin-bottom: 30px;
}
.destinations-heading > span {
font-size: 12px;
letter-spacing: 1.7px;
}
.destinations-heading h2 {
font-size: 31px;
}
.destinations-heading-divider {
gap: 10px;
margin: 15px 0 18px;
}
.destinations-heading-divider span {
width: 42px;
}
.destinations-heading p {
padding: 0 10px;
font-size: 14px;
line-height: 1.7;
} .destinationsSlider {
padding:
3px
2px
10px;
}
.destination-card {
height: 430px;
border-radius: 14px;
} .destination-content {
bottom: 30px;
padding: 0 18px;
}
.destination-icon {
width: 64px;
height: 64px;
margin-bottom: 18px;
}
.destination-icon i {
font-size: 26px;
}
.destination-content h3 {
font-size: 24px;
margin-bottom: 12px;
}
.destination-explore {
font-size: 15px;
} .destination-slider-btn {
width: 46px;
height: 46px;
font-size: 16px;
box-shadow:
0 7px 20px rgba(0, 0, 0, 0.16);
}
.destination-prev {
left: 6px;
}
.destination-next {
right: 6px;
} .destinations-pagination {
margin-top: 22px;
}
} @media (max-width: 480px) {
.destinations-section {
padding: 40px 0 50px;
}
.destinations-heading h2 {
font-size: 28px;
}
.destination-card {
height: 410px;
}
.destination-slider-btn {
width: 42px;
height: 42px;
font-size: 15px;
}
.destination-prev {
left: 5px;
}
.destination-next {
right: 5px;
}
.destination-content {
bottom: 26px;
}
.destination-icon {
width: 60px;
height: 60px;
}
.destination-icon i {
font-size: 24px;
}
.destination-content h3 {
font-size: 22px;
}
} @media (prefers-reduced-motion: reduce) {
.destination-card,
.destination-image img,
.destination-icon,
.destination-icon i,
.destination-explore i,
.destination-slider-btn,
.destinations-pagination
.swiper-pagination-bullet {
transition: none !important;
}
} .rooms-section {
padding: 50px 0 !important;
overflow: hidden;
} .rooms-section .section-heading {
max-width: 760px;
margin: 0 auto 40px !important;
text-align: center;
}
.rooms-section .section-label {
display: inline-block;
margin-bottom: 12px;
color: #d4a72c;
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
}
.rooms-section .section-heading h2 {
margin: 0 0 15px;
color: #111;
font-size: 42px;
line-height: 1.2;
font-weight: 500;
}
.rooms-section .section-heading p {
margin: 0;
color: #777;
font-size: 16px;
line-height: 1.8;
} .rooms-slider-wrap {
position: relative;
width: 100%;
} .roomsSlider {
width: 100%;
overflow: hidden;
}
.roomsSlider .swiper-wrapper {
align-items: stretch;
}
.roomsSlider .swiper-slide {
height: auto;
display: flex;
} .room-card {
width: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
background: #fff;
border: 1px solid #ebe6dc;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, .07);
transition:
transform .35s ease,
box-shadow .35s ease;
}
.room-card:hover {
transform: translateY(-7px);
box-shadow:
0 18px 45px rgba(0, 0, 0, .12);
} .room-card-image {
position: relative;
display: block;
width: 100%;
height: 250px;
overflow: hidden;
background: #eee;
}
.room-card-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
transition:
transform .6s ease;
}
.room-card:hover
.room-card-image img {
transform: scale(1.06);
} .room-card-no-image {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #eee;
color: #aaa;
font-size: 45px;
} .room-card-price {
position: absolute;
right: 16px;
bottom: 16px;
padding: 8px 14px;
border-radius: 30px;
background: #fff;
color: #9a741b;
font-size: 13px;
font-weight: 700;
box-shadow:
0 5px 18px rgba(0, 0, 0, .15);
} .room-card-content {
display: flex;
flex-direction: column;
flex: 1;
padding: 23px;
} .room-card-hotel {
display: block;
margin-bottom: 8px;
color: #d4a72c;
font-size: 12px;
font-weight: 700;
letter-spacing: .7px;
text-transform: uppercase;
}
.room-card-hotel i {
margin-right: 4px;
} .room-card h3 {
margin: 0 0 12px;
color: #171717;
font-size: 25px;
line-height: 1.25;
font-weight: 600;
} .room-card-content > p {
margin: 0 0 18px;
color: #6d6d6d;
font-size: 14px;
line-height: 1.7;
} .room-card-features {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 22px;
padding: 15px 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.room-card-features span {
display: flex;
align-items: center;
gap: 7px;
color: #555;
font-size: 12px;
line-height: 1.4;
}
.room-card-features i {
flex-shrink: 0;
color: #d4a72c;
font-size: 13px;
} .room-card-footer {
display: flex;
align-items: center;
gap: 10px;
margin-top: auto;
} .room-card-footer .theme-btn {
flex: 1;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
gap: 7px;
padding: 0 14px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
text-decoration: none;
}
.room-card-footer .theme-btn i {
transition:
transform .25s ease;
}
.room-card-footer
.theme-btn:hover i {
transform: translateX(4px);
} .room-secondary-btn {
flex-shrink: 0;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 16px;
border: 1px solid #d4a72c;
border-radius: 6px;
color: #9a741b;
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition:
background .25s ease,
color .25s ease;
}
.room-secondary-btn:hover {
background: #d4a72c;
color: #fff;
} .room-slider-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border: 0;
border-radius: 50%;
background: #fff;
color: #222;
font-size: 18px;
cursor: pointer;
box-shadow:
0 8px 25px rgba(0, 0, 0, .15);
transition:
background .25s ease,
color .25s ease,
transform .25s ease;
}
.room-slider-btn:hover {
background: #d4a72c;
color: #fff;
transform:
translateY(-50%)
scale(1.05);
}
.room-slider-prev {
left: -28px;
}
.room-slider-next {
right: -28px;
} .rooms-pagination {
margin-top: 30px;
text-align: center;
}
.rooms-pagination
.swiper-pagination-bullet {
width: 9px;
height: 9px;
opacity: 1;
background: #d8d8d8;
}
.rooms-pagination
.swiper-pagination-bullet-active {
width: 26px;
border-radius: 10px;
background: #d4a72c;
} @media (max-width: 1199px) {
.room-slider-prev {
left: -15px;
}
.room-slider-next {
right: -15px;
}
} @media (max-width: 767px) {
.rooms-section {
padding: 70px 0;
}
.rooms-section .section-heading {
margin-bottom: 35px;
}
.rooms-section .section-heading h2 {
font-size: 34px;
}
.room-card-image {
height: 240px;
}
.room-slider-btn {
width: 46px;
height: 46px;
font-size: 15px;
}
.room-slider-prev {
left: 7px;
}
.room-slider-next {
right: 7px;
}
} @media (max-width: 575px) {
.rooms-section {
padding: 60px 0;
}
.rooms-section .section-heading h2 {
font-size: 30px;
}
.rooms-section .section-heading p {
font-size: 14px;
}
.room-card-image {
height: 220px;
}
.room-card-content {
padding: 20px;
}
.room-card h3 {
font-size: 23px;
}
.room-card-footer {
flex-direction: column;
}
.room-card-footer .theme-btn,
.room-secondary-btn {
width: 100%;
}
}
.rooms-slider-wrap .room-card-content > p {
display: none;
} .rooms-city-filter {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin: -20px auto 40px;
text-align: center;
}
.rooms-city-filter label {
display: inline-flex;
align-items: center;
gap: 8px;
color: #222;
font-size: 14px;
font-weight: 700;
}
.rooms-city-filter label i {
color: #d4a72c;
}
.rooms-city-select {
min-width: 210px;
height: 48px;
padding: 0 42px 0 16px;
border: 1px solid #ddd;
border-radius: 6px;
background-color: #fff;
color: #333;
font-size: 14px;
font-weight: 600;
outline: none;
cursor: pointer;
transition:
border-color .25s ease,
box-shadow .25s ease;
}
.rooms-city-select:hover,
.rooms-city-select:focus {
border-color: #d4a72c;
box-shadow:
0 0 0 3px rgba(
212,
167,
44,
.10
);
} .rooms-no-results {
padding: 50px 20px;
text-align: center;
color: #777;
}
.rooms-no-results i {
margin-bottom: 12px;
color: #d4a72c;
font-size: 35px;
}
.rooms-no-results p {
margin: 0;
font-size: 15px;
} @media (max-width: 767px) {
.rooms-city-filter {
flex-direction: column;
gap: 10px;
margin-top: -10px;
margin-bottom: 35px;
}
.rooms-city-select {
width: 100%;
max-width: 320px;
}
}