:root {
--cprim: #252e6b;
} #loader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #ffffff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 9999;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.loader-logo {
width: 150px;
animation: pulse 1.5s infinite ease-in-out;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.7;
}
50% {
transform: scale(1.1);
opacity: 1;
}
100% {
transform: scale(1);
opacity: 0.7;
}
}
.loader-text {
font-size: 18px;
font-weight: bold;
margin-top: 20px;
color: #333;
}
.hidden {
opacity: 0;
visibility: hidden;
} .sfl-submit-button{
background-color: var(--cprim) !important;
}
.parent-container{
margin: 0;
width: 100%;
}
.meny_sticky{
position: sticky;
top: 0;
z-index: 998;
}
.clearfloat:after {
content: "";
display: table;
clear: both;
}
.text-center {
text-align: center;
}
.hidden {
display: none;
}
body { }
header {
background-color: #ffffff;
}
i {
font-family: fontawesome !important;
}
a.petropalacehotel-link {
color: #e3b75f !important;
}
a.petropalacehotel-link:hover {
color: #c8a154 !important;
}
.container{
max-width: 1420px !important;
}
.red {
color: red !important;
} .header-top-line-wrapper {
width: 100%;
height: auto;
background-color: var(--cprim);
color: #ffffff;
font-weight: 600;
padding: 5px 0;
}
.header-menu-wrapper {
padding: 10px 0;
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
}
.sticky {
background-color: #ffffff;
width: 100%;
position: sticky;
top: 0;
z-index: 8;
padding: 0.5rem 0rem;
}
.header-top-line-left {
float: left;
}
.header-top-line-right {
float: right;
}
.icon-facebook, .icon-googleplus, .icon-vk, .icon-instagram {
width: 30px;
height: 30px;
float: left;
}
.icon-facebook:hover {
color: gold;
}
.icon-instagram {
padding-top: 3px;
padding-left: 2px;
padding-right: 2px;
}
svg {
fill: #ffffff;
}
svg:hover{
fill-opacity: 0.5;
}
.langflags {
margin-bottom: 0;
margin-right: .5rem;  list-style: none;
}
.langflags li {
float:left; 
margin-right:5px;
}
.phone{
color: #ffffff;
font-weight: 600;
}
.phone:hover{
color: #e3b75f;
}
.logo { width: 14%;
}
.logo-inner {
width: 130px;
height: 74px;
}
.logo-inner img {
width: 100%;
}
.img-logo-title {
display: none;
}
.top-menu {
float:right;
width: 86%;
margin-top: 19px;
font-size: 17px;
}
.navbar {
padding: 0 !important;
}
.navbar-top-btn {
border-radius: 0 !important;
}
.navbar-light .navbar-toggler {
border-color: rgb(227, 183, 95) !important;
}
.dropdown-menu { left: auto !important;
right: 0 !important;
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
border: 0 !important;
}
.dropdown-item:focus, .dropdown-item:hover {
color: #fff !important;
text-decoration: none !important;
background-color: #e3b75f !important;
} .top_bg_box_header{
position: relative;
}
.shedow_box{
background-color: rgb(33 42 104 / 26%);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}   .form-reservation{
background-color: #ffffff;
width: 100%;
position: sticky;
top: 0;
z-index: 8;
}
.form-reservation .container{
background-color: #ffffff; }   .img__about{
border-radius:8px;
max-width: 100%;
box-shadow: rgb(17 12 46 / 4%) 0px 48px 100px 0px;
overflow: hidden;
}
.overview__text-item p { font: 400 16px / 24px Montserrat, sans-serif; }
.overview__text-item {
position: relative;
overflow: hidden;
}
.text-content {
max-height: 15.8rem; overflow: hidden;
transition: max-height 0.5s ease;
}
.overview__text-item.expanded .text-content {
max-height: 1000px; }
.read-more-btn {
display: flex;
align-items: center;
gap: 8px;
background: none;
border: none;
color: var(--cprim); cursor: pointer;
padding: 0;
margin-top: 10px;
font-size: 16px;
font-weight: 600;
}
.read-more-btn .arrow-icon {
width: 16px;
height: 16px;
transition: transform 0.3s ease;
}
.overview__text-item.expanded .arrow-icon {
transform: rotate(180deg); } .w-100 {
width: 100%;
height: 350px;
}
.ms-nav-prev, .ms-nav-next {
background: none!important;
}
.ms-nav-next {
right: 0px !important;
}
.ms-nav-prev:before, .ms-nav-next:before {
font-family: fontawesome;
font-size: 60px;
color: #ffffff;
}
.ms-nav-prev:before {
content: "\f104";
}
.ms-nav-next:before {
content: "\f105";
}
.ms-bullet {
border: solid 1px #e3b75f !important;
}
.ms-bullet-selected {
background-color: #e3b75f !important;
}  .form-reservation-wrapper form {
color: #000000;
}
.form-important-info {
color: red;
margin-bottom: 25px;
text-align: center;
}
.form-reservation-title {
margin-bottom: 25px;
}
.form-reservation-title h3 {
font-weight: 600;
text-transform: uppercase;
}
.form-reservation-btn-submit {
margin-top: 10px;
}
.form-reservation-wrapper__item { }
.form-reservation-btn-submit button {
background-color: #e3b75f;
color: #fff;
text-transform: uppercase;
font-weight: 600;
}
.form-reservation-btn-submit button:hover {
background-color: #c8a154;
}
#in_date::after {
font-family: fontAwesome;
content: "\f073";
position: absolute;
right: 15px;
top: 11px;
pointer-events: none;
cursor: pointer;
}
#adults, #children {
width: 100%;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
padding: .5rem 1rem;
font-size: 1.25rem;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
border: 1px solid #c8a154 !important;
background: #e3b75f !important;
}
.ui-widget-header {
border: 1px solid #c8a154 !important;
background: #e3b75f !important;
color: #fff !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tr {
border-top-left-radius: 0px !important;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
border-top-right-radius: 0px !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
border-bottom-left-radius: 0px !important;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
border-bottom-right-radius: 0px !important;
}  .rooms-gallery-wrapper ul li {
list-style-type: none;
float: left;
margin-right: 10px;
height: 200px;
}
.rooms-main-wrapper {
background-color: #ffffff;
padding: 25px 50px;
}
.rooms-main-title {
float: left;
text-transform: uppercase;
}
.slider-arrows {
float: right;
}
.rooms-main-gallery {
margin-top: 25px;
}
.rooms-main-gallery-item a {
display: block;
width: 95%;
height: auto;
text-align: left;
}
.rooms-main-gallery-item-link-img {
overflow:hidden;
margin: 0 auto;
}
.rooms-main-gallery-item-link-img img {
width: 100%;
height: auto;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
}
.rooms-main-gallery-item-link-img img:hover{
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
}
.rooms-main-gallery-item-link-room-title,
.rooms-main-gallery-item-link-room-detailed {
margin: 0 auto;
text-transform: uppercase;
font-weight: 600;
}
.rooms-main-gallery-item-link-room-title {
color: #212529;
margin-top: 17px;
margin-bottom: 1.5rem;
}
.rooms-main-gallery-item-link-room-title:hover {
color: #c8a154;
text-decoration: none;
}
.rooms-main-gallery-item-link-room-detailed {
margin-top: 10px;
font-size: 13px;
}
.rooms-main-gallery-item-link-room-detailed:hover {
text-decoration: none;
}
.rooms-main-gallery-item-link-room-detailed span {
width: 100px;
color: #ffffff;
background-color: var(--cprim);
padding: .5rem 1rem;
border-radius: 8px;
font-weight: 600;
margin-top: .5em;
}
.rooms-main-gallery-item-link-room-detailed span:hover {
background-color: #c8a154;
text-decoration: none;
}
.slider-arrows i {
padding: 12px;
background-color: var(--cprim);
color: #fff;
font-size: 23px;
border-radius:8px;
}
.slider-arrows i:hover {
background-color: var(--cprim);
cursor: pointer;
}  .page-wrapper {
background-color: #ffffff;
}
.page-title h1 {
padding: 70px 0px 62px;
text-transform: uppercase;
text-align: center;
background: url(//www.petropalacehotel.com/wp-content/themes/petropalacehotel/images/bg-main.jpg) repeat center;
} .page-title h1.bg-cat-3 {
background: url(//www.petropalacehotel.com/wp-content/themes/petropalacehotel/images/bg-rooms.jpg) repeat center;
}
.rooms-wrapper {
padding: 25px;
}
.rooms-item {
margin-top: 25px;
margin-bottom: 35px;
}
.rooms-img img {
width: 100%;
}
.room-title {
margin-top: 17px;
}
.room-title-single { }
.room-title-link {
text-transform: uppercase;
font-size: 25px;
color: #e3b75f;
text-decoration: none;
margin-right: 20px;
}
.room-title-link:hover {
color: #c8a154;
text-decoration: none;
}
.room-description ul {
padding-left: 0;
}
.room-description ul li {
list-style: none;
}
.room-description-name {
font-weight: 600;
color: #303030;
}
.room-description-value {
color: #7f7f7f;
}
.room-btn-details {
margin-top: 25px;
}
.room-btn-details-link {
font-size: 20px;
color: #ffffff;
background-color: var(--cprim);
padding: 7px;
text-transform: uppercase;
border-radius: 8px;
transition: all 0.3s ease-out;
}
.room-btn-details-link:hover {
text-decoration: none;
color: #ffffff;
background-color: #e3b75f;
transition: all 0.3s ease-out;
}
.rooms-img-link {
display: block;
transition: color 300ms, background-color 300ms, opacity 300ms;
-moz-transition: color 300ms, background-color 300ms, opacity 300ms;
-o-transition: color 300ms, background-color 300ms, opacity 300ms;
-webkit-transition: color 300ms, background-color 300ms, opacity 300ms;
}room-desc
.rooms-img-link:hover {
opacity: 0.8;
transition: color 300ms, background-color 300ms, opacity 300ms;
-moz-transition: color 300ms, background-color 300ms, opacity 300ms;
-o-transition: color 300ms, background-color 300ms, opacity 300ms;
-webkit-transition: color 300ms, background-color 300ms, opacity 300ms;
}  .room-gallery-slider-wrapper {
position: relative;
}
ul.slickslide {
padding-left:0;
max-width:100%;
}
.slick-slider .slick-track {
min-width:100%;
}
.slick-slide{
margin: 1rem 0.5rem;
}
.rooms-main-gallery-item-link-img{
border-radius:8px;
}
.rooms-main-gallery-item{
border-radius:8px;
padding: 1rem .5rem;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 16px;
background: #fff;
}
.slick-slide img{
border-radius: 8px;
}
ul.slickslide li img, .slick-dots button img {
width:100%;
height:auto;
}
.slick-dots {
top:auto;
left:auto;
right:auto;
position:absolute;
padding: 0;
}
.slick-dots li {
margin: 5px;
display:inline-block;
width:auto;
height:auto;
}
.slick-dots li:hover {
opacity: 0.8;
}
.slick-slider .slick-track {
min-width:100%;
}
.slick-dots li button {
margin:0;
height:auto;
width:100%;
padding:0;
border: none;
outline: none;
}
.slick-dots li button:hover {
cursor: pointer !important;
}
.slick-dots li button.tab { clear:both;   display:block;}
.slick-dots li button img { width:100%; max-width:80px; height:auto;   }
.slick-thumbs-wrapper {
height: 65px;
}
.slick-thumbs {
position:absolute;
left: -9999px;
}
.slick-thumbs .slick-active {
opacity: 0.8;
}
.room-slider-arrows {
position: absolute;
width: 100%;
top: 50%;
}
.prev-room, .next-room {
padding: 12px;
background-color: #e3b75f;
color: #fff;
font-size: 23px;
cursor: pointer;
transition: color 300ms, background-color 300ms, opacity 300ms;
-moz-transition: color 300ms, background-color 300ms, opacity 300ms;
-o-transition: color 300ms, background-color 300ms, opacity 300ms;
-webkit-transition: color 300ms, background-color 300ms, opacity 300ms;
}
.prev-room:hover, .next-room:hover {
opacity: 0.9;
transition: color 300ms, background-color 300ms, opacity 300ms;
-moz-transition: color 300ms, background-color 300ms, opacity 300ms;
-o-transition: color 300ms, background-color 300ms, opacity 300ms;
-webkit-transition: color 300ms, background-color 300ms, opacity 300ms;
}
.prev-room {
float: left;
}
.next-room {
float: right;
}
.room-content {
padding: 25px 50px;
}
.room-content-desc {
margin-top: 65px;
}
.room-title-features {
text-transform: uppercase;
font-weight: 600;
}
.room-desc-features {
padding-left: 18px;
}
.room-desc-features li {
color: #e3b75f;
font-size: 13px;
}
.room-desc-features li span {
color: #222222;
}
.slider-inner-page-wrapper {
position: relative;
}
.slider-item {
width: 75px;
cursor:pointer; display: inline-block;
margin: 10px 5px 0 0;
padding-right: 10px;
}
.slider-item img {
width: 100%;
height: 100%;
object-fit:cover;
display: block;
}
.room-slider-arrows {
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 40px
}     .desc-hotel-wrapper {
background-color: #ffffff;
padding: 25px 50px;
}
.desc-hotel-wrapper h3 {
text-transform: uppercase;
text-align: center;
margin-bottom: 25px;
}
.desc-hotel-gallery-item {
margin-bottom: 25px;
}
.desc-hotel-gallery-item a img {
width: 100%;
}
.facilities-item {
font-size: 14px;
font-weight: 700;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid var(--cprim);
}
.facilities-item .fa-star {
font-size: 33px;
float: left;
margin-right: 10px;
}
.fa-star {
color: var(--cprim);
}  .about-hotel-wrapper {
padding: 25px 50px; font-size: 13px;
color: #7f7f7f;
}
.about-hotel-title {
text-transform: uppercase;
color: #000000;
margin: 25px 0;
}
.bottom-menu ul {
padding-left: 17px;
}
.bottom-menu li:hover {
color: #e3b75f;
}
.bottom-menu a {
color: #7f7f7f;
text-decoration: underline;
}
.bottom-menu a:hover {
color: #e3b75f;
text-decoration: none;
}  .form-vizza-support-wrapper {
padding: 25px 50px;
background-color: #fff;
font-size: 13px;
color: #7f7f7f;
text-align: center;
}
.form-vizza-support {
margin: 20px 0;
}
.form-vizza-support input {
width: 100%;
outline: none !important;
}                .form-vizza-support-group {
margin-bottom: 5px !important;
}
.form-vizza-support-group select {
width: 100%;
color: #495057;
background-color: #fff;
border: 1px solid #ced4da;
padding: .5rem 1rem;
font-size: 1.25rem;
}
.error {
color: red;
}  .wrapper-uploaded_files {
position: relative;
margin-bottom: 10px;
}
.icon-uploaded-files {
width: 30px;
}
.title-uploaded-files {
position: absolute;
bottom: 0;
margin: 0;
left: 35px;
}
.url-uploaded-files {
color: #7f7f7f;
}
.url-uploaded-files:hover {
color: #e3b75f;
}
.contact-wrapper {
margin-bottom: 10px;
}
.contact-title {
background-color: #e3b75f;
padding: 0.5rem;
margin-bottom: 10px;
font-weight: bold;
border-radius: 8px;
text-transform: uppercase;
color: #fff;
box-shadow: 1px 21px 37px -40px rgba(34, 60, 80, 0.36);
}
.contact-wrapper div a{
color: #252e6b;
text-decoration: none;
font-weight: bold;
}
.contact-wrapper div a:hover {
color: #e3b75f;
}
.contact-title-first.contact-title:first-child {
text-align: center;
}
.form-control[readonly] {
background-color: #fff !important;
}
.table td, .table th {
padding: 0 5px !important;
vertical-align: middle !important;
}
.petropalace-conf-tr td {
background-color: #e3b75f;
font-weight: 700;
}
.table-conf-star {
border: 1px solid #dee2e6;
}
.table-conf-star td {
border-top: none !important;
}
.table-bordered td, .table-bordered th {
border: 1px solid #000 !important;
}
.fancybox-wrap, .fancybox-inner, .fancybox img {
width: 100% !important;
height: auto !important;
}
.services-wrap-content div {
width: 50%;
}
.slider-controll {
display: flex !important;
flex-wrap: wrap;
}  footer{
background-color: var(--cprim);
}
.footer-wrapper {
color: #ffffff;
font-size: 13px;
text-transform: uppercase;
text-align: center; padding: 10px 50px;
}  @media (min-width: 980px) and (max-width: 1200px) {
.logo-inner {
width: 150px !important;
}
.top-menu {
font-size: 16px;
}
}
@media screen and (max-width: 992px) {
#top-menu {
background-color: #e3b75f;
text-align: center;
}
#bs-example-navbar-collapse-1 {
flex-basis: 100%;
}
#top-menu .nav-link {
color: #ffffff !important;
}
.map-place-point {
width: 100%;
}
.room-content {
padding: 25px;
}
}
@media (max-width: 768px) {
.services-wrap-content div {
width: 95%;
}
}
@media screen and (max-width: 500px){
.h1, h1 {
font-size: 1.5rem !important;
}
} .btn-booking{
background-color: var(--cprim);
border-color: var(--cprim);
color: #fff;
border-radius: 8px;
padding: 10px 20px;
font-size: 1rem;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
text-align: center;
display: inline-block;
max-width: 100%;
margin-bottom: 10px;
}
.btn-booking:hover{
background-color: #c8a154;
color: #fff;
}
@media screen and (max-width: 768px) {
.btn-booking{
font-size: 1rem;
}
} .room {
margin-bottom: 4rem;
}
.room .room_item {
margin-bottom: 3rem;
padding: 20px;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 8px;
gap: 25px;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.25);
min-width: 0; }
@media (max-width: 600px) {
.room .room_item {
grid-template-columns: 1fr;
padding: 10px;
margin-bottom: 1.5rem;
}
}
@media (max-width: 550px) {
.room .room_item {
gap: 18px;
}
}
@media (max-width: 425px) {
.room .room_item {
gap: 15px;
}
}
.room .room_item .roomSlide {
width: 100%;
height: 26rem;
}
.room .room_item .roomSlide .swiper-slide img {
height: 100%;
width: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 8px;
}     .room .room_item .roomSlide .swiper-pagination-bullet-active {
background: #212A68 !important;
}
.room .room_item .roomSlide .swiper-pagination-bullet {
border: 1px solid #212A68;
background: white;
opacity: unset;
}
.room .room_item .room_box_body .room_title {
display: grid;
grid-template-columns: 2fr 1fr;
margin-bottom: 1rem;
align-content: center;
align-items: center;
}
@media (max-width: 550px) {
.room .room_item .room_box_body .room_title {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 375px) {
.room .room_item .room_box_body .room_title {
margin-top: 20px;
justify-content: center;
padding: 0;
margin-bottom: 28px;
border-bottom: 2px solid #212A68;
padding-bottom: 20px;
}
}   @media (max-width: 425px) {
.room .room_item .room_box_body .room_title h3 {
margin-bottom: 0;
text-align: center; }
}
.room .room_item .room_box_body .room_title button {
color: #ffffff;
background-color: #212A68;
border-radius: 8px;
padding: 0.5rem;
max-width: 100%;
border: 0;
}
.room .room_item .room_box_body .room_title button:hover {
color: #ffffff;
background-color: #2e3b8c;
cursor: pointer;
}
@media (max-width: 550px) {
.room .room_item .room_box_body .room_title button {
width: 100%;
}
}
@media (max-width: 450px) {
.room .room_item .room_box_body .room_title button {
margin-top: 17px;
width: 100%;
font-size: 1rem;
font-weight: 500;
padding: 0.9rem;
}
}
.room .room_item .room_box_body .room_nav_info {
border-top: 1px solid #212A68;
border-bottom: 1px solid #212A68;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.8rem 0;
overflow: auto;
margin-bottom: 1rem;
}
@media (max-width: 375px) {
.room .room_item .room_box_body .room_nav_info {
display: none;
}
}
.room .room_item .room_box_body .room_nav_info p {
display: flex;
align-items: center;
font-size: 0.8rem;
margin-bottom: 0;
}
.room .room_item .room_box_body .room_nav_info p strong {
font-size: 1rem;
font-weight: 500;
white-space: nowrap; margin-right: 8px;
}
@media (max-width: 480px) {
.room .room_item .room_box_body .room_nav_info p:first-child {
display: none;
}
}
.room .room_item .room_box_body .room_nav_info p img {
width: 20px;
margin-right: 5px;
}
.room .room_item .room_box_body .room_info h4 {
margin-bottom: 1rem;
}
.room .room_item .room_box_body .room_info .room_info_text {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
@media (max-width: 800px) {
.room .room_item .room_box_body .room_info .room_info_text {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 340px) {
.room .room_item .room_box_body .room_info .room_info_text {
grid-template-columns: 1fr;
}
}
.room .room_item .room_box_body .room_info .room_info_text p {
font-size: 0.8rem;
display: flex;
place-items: center;
}
.room .room_item .room_box_body .room_info .room_info_text p img {
width: 25px;
margin-right: 5px;
}
.room_box_body{
height: 25.6rem;
overflow:hidden;
position: relative;
background: linear-gradient(to top, white 0%, transparent 20%);
}
.room_box_body::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 3px; background: white;
}
.item_btn {
display: flex;
justify-content: space-between;
place-items: center;
margin-bottom: 0.5rem;
padding-bottom: 0.5rem;
gap: 1rem;
overflow-x: auto;
scroll-behavior: smooth; } .item_btn::-webkit-scrollbar {
height: 4px;
}
.item_btn::-webkit-scrollbar-track {
background: #212a6814;
border-radius: 2px;
}
.item_btn::-webkit-scrollbar-thumb {
background: #ffffff;
border-radius: 2px;
}
.item_btn::-webkit-scrollbar-thumb:hover {
background: #212a6814;
cursor: pointer;
} .item_btn {
scrollbar-width: thin;
scrollbar-color: #212a6814 #ffffff;
}
.item_btn .btn_room {
border: 1px solid #212A68;
padding: .4rem;
border-radius: 8px;
white-space: nowrap;
font-size: 1.1rem;
font-weight: 500;
color: #212A68;
cursor: pointer;
transition: 0.3s;
width: 100%;
text-align: center;
}
.item_btn .active_room {
background-color: #212A68;
color: #fff;
}
.btn_room:hover{
background-color: #212A68;
color: #fff;
transition: 0.3s;
text-decoration: none;
}  .populary_box {
display: flex;
flex-wrap: wrap;
margin-bottom: 19px;
gap: 1.5rem;
}
.populary_box .populary_box_item {
min-height: 13rem;
flex: 1 0 14rem;
display: grid;
place-items: center;
border-radius: 8px;
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;
background: #fff;
padding: 2rem;
}
.populary_box .populary_box_item p {
text-align: center;
font-weight: 500;
font-size: 1.5rem;
}  .info {
margin-bottom: 2.4rem;
margin-top: 2rem;
}
.info h4 {
margin-bottom: 1.5rem;
}
.info .info-boxs {
display: grid;
gap: 1rem;
}
.info .info-boxs .box {
display: flex;
align-items: center; text-decorations: none;
}
.info .info-boxs .box p{
color: #212529;
}
.info .info-boxs .box img {
width: 1.5rem;
margin-right: 15px;
}
.info .info-boxs .box p {
margin-bottom: 0;
font-weight: 400;
font-size: 1.5rem;
}
.info .info-boxs .box p span {
font-weight: 300;
}
.yandex_cart {
box-shadow: 2px 5px 6px 2px rgba(0, 0, 0, 0.05);
background: #fff;
padding: 7px 10px;
margin-bottom: 40px;
}   .url-uploaded-files{
display: flex;
align-items: center;
padding: .5rem;
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
border-radius: 8px;
margin-bottom: 1rem;
}
.url-uploaded-files:hover {
background: var(--cprim);
color: #fff;
transition: 0.4s;
}
.title-uploaded-files {
position: absolute;
bottom: auto;
margin: 0;
left: 60px;
}
.icon-uploaded-files{
width:2rem;
margin-right: .5rem;
border-radius: 8px;
}
.page_cat_booking{
padding: 1rem;
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
border-radius: 8px;
margin-bottom: 1rem;
}
.btnbook {
text-align: center;
color: #ffffff;
background-color: #212A68;
border-radius: 8px;
padding: 0.8rem;
max-width: 100%;
}
.btnbook_title{
text-decoration: none;
color: #212A68;
}
.btnbook_title:hover {
text-decoration: none;
color: #e3b75f;
transition: 0.3s;
}
.btnbook:hover {
text-decoration: none;
color: #ffffff;
background-color: #e3b75f;
box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
transition: 0.5s;
}
@media (max-width: 550px) {
.btnbook {
width: 100%;
}
}
@media (max-width: 450px) {
.btnbook {
margin-top: 17px;
font-size: 1rem;
font-weight: 500;
padding: 0.9rem;
}
}
.swiper-button-prev, .swiper-button-next{
width: 3rem;
z-index: 2;
}
.swiper-button-next:after,
.swiper-button-prev:after{
content: '';
height: 8rem;
width: 8rem;
background-image: url(https://www.petropalacehotel.com/wp-content/uploads/2025/04/1web-btn_slide.svg);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.swiper-button-prev:after{
transform: rotate(180deg);
}
.swiper-pagination{
z-index: 2;
}
.singleSlide .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
box-shedow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
.singleSlide .swiper-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
height: 90vh;
border-radius: 1rem;
}
.homeSlide .swiper-slide img {
display: block;
width: 100%;
height: 60vh;
object-fit: cover;
border-radius: 8px;
}
.test_img_box img {
width: 100%;
height: 25rem;
object-fit: cover;
border-radius: 8px;
}
.swiper-pagination-bullet-active {
background: #212A68 !important;
}
.swiper-pagination-bullet {
border: 1px solid #212A68;
background: white;
opacity: unset;
}     .booking_line{
margin: 0.5rem 0;
height: 3px;
width: 100%;
background: #212A68;
} .notice {
background: #f8f9fa;
padding: 1.5rem;
border-radius: 12px;
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.section-title {
color: #2c3e50;
border-left: 4px solid #e3b75f;
padding-left: 1rem;
margin: 2rem 0;
}
.transport-card {
background: white;
border-radius: 8px;
padding: 1.5rem;
margin: 1rem 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.transport-icons {
display: flex;
align-items: center;
gap: 0.5rem;
}
.transport-header {
color: #252e6b;
margin-top: 0;
}
.route {
margin: 1.5rem 0;
padding-left: 1rem;
border-left: 2px solid #eee;
}
.transport-type {
display: inline-block;
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-weight: bold;
margin: 0.5rem 0;
}
.metro {
background: #3498db20;
color: #3498db;
}
.ground {
background: #27ae6020;
color: #27ae60;
}
.time {
color: #7f8c8d;
font-size: 1em;
margin-top: 0.5rem;
}
.map-container {
margin-top: 3rem;
} @media (max-width: 768px) {
.transport-guide {
padding: 0 1rem;
}
#map_pph {
height: 300px;
}
}
.d_grid_icon{
display: grid;
grid-template-columns: 1fr 1fr;
}