@charset "utf-8";
/* Table of Contents
==================================================
	#Desktop (1600)
	#Desktop (1366)
	#Desktop (1024)
	#Tablet (Portrait)
	#Mobile (Portrait)
	#Mobile (Landscape)

/* #Additional - Large Screens beyond 1920px
================================================== */
@media only screen and (min-width: 1700px) and (max-width: 2700px) {

:root										{
	--container-width: 1546px;
	--space-between-section: 128px;
	--space-between-sections-small: 100px;
	--space-between-items: 60px;
	--title-size: 5rem;
	--title-line-height: 5.5rem;
	--title-size-small: 4rem;
	--title-small-line-height: 4.5rem;
	--title-size-item: 2.25rem;
	--title-item-line-height: 2.75rem;
}
.container                                  { max-width: 1546px; }

}

/* #Additional - Large Screens beyond 1600px
================================================== */
@media only screen and (min-width: 1367px) and (max-width: 1600px) {

:root										{
	--container-width: 1300px;
	--two-col-right-padding: 140px;
	--space-between-section: 128px;
	--space-between-sections-small: 100px;
	--space-between-items: 60px;
	--title-size: 4rem;
	--title-line-height: 4.5rem;
	--title-size-small: 3.5rem;
	--title-small-line-height: 4rem;
	--title-size-item: 2rem;
	--title-item-line-height: 2.5rem;
}
.container                                  { max-width: 1300px; }

#benefitsSec .benefitsBox .content p:not(:is(.modalDesign *)) 		{ width: 50%; }
#benefitsSec .benefitsBox .imageBox .benefitsIcon { padding: 28px 28px; }

#introductionSec							{ --circleHalfWidth: 1020px; }
#introductionSec .introductionBox .content h2:not(:is(.modalDesign *)), #introductionSec .introductionBox .content p:not(:is(.modalDesign *)) { width: 80%; }

#roomSec .contentBox .content				{ width: 50%; }
#roomSec .contentBox .content p 			{ width: 90%; }

#galleryCollectionSec .contentBox .content				{ width: 50%; }
#galleryCollectionSec .contentBox .content p 			{ width: 90%; }

#facilitiesSec .facilitiGridBox				{ --circleHalfWidth: 1020px; }

#ourGallerySec .gallery .content			{ width: 40%; padding: 0 5%; }
#ourGallerySec .gallery .image1				{ width: 30%; }
#ourGallerySec .gallery .image2				{ width: 30%; }


#newsletterSec .newsletter					{ padding: 0 7rem; }


/*---------------------- Rooms Page -----------------------*/
#listSec .contentBox .content				{ width: 50%; }
#listSec .contentBox .content p 			{ width: 90%; }
#interestedInSec .interestedIn				{ --circleHalfWidth: 1020px; }
#interestedInSec .interestedIn-slider .swiper-slide picture img { height: 287px; }

/*---------------------- Default Page -----------------------*/
#vivamusSec .vivamusBoxSec .titleBox 		{ width: 95%; }
#vivamusSec .contentBox 					{ width: 95%; }
#pirateSec .pirateBox .container			{ gap: 157px; }

}

/* #Additional - Large Screens beyond 1366px
================================================== */
@media only screen and (min-width: 1180px) and (max-width: 1366px) {

:root										{
	--container-width: 1170px;
	--two-col-right-padding: 140px;
	--space-between-section: 128px;
	--space-between-sections-small: 100px;
	--space-between-items: 50px;
	--title-size: 3.5rem;
	--title-line-height: 4rem;
	--title-size-small: 3rem;
	--title-small-line-height: 3.5rem;
	--title-size-item: 1.75rem;
	--title-item-line-height: 2.25rem;
}
.container                                  { max-width: 1170px; }


#benefitsSec .benefitsBox .content span.title:not(:is(.modalDesign *)) 		{ margin: 0 0 44px 0; }
#benefitsSec .benefitsBox .imageBox .benefitsIcon 	{ padding: 20px 20px; }

#introductionSec							{ padding-top: var(--space-between-section); padding-bottom: calc(var(--space-between-section) + 40px); }
#introductionSec .introductionBox .content h1:not(:is(.modalDesign *)) { margin: 0 0 44px 0;   }

#roomSec 									{ padding-top: 80px; }
#roomSec .contentBox .titleBox h2.h2 		{ margin: 0 0 0 0;   }
#roomSec .contentBox .content 				{ width: 55%; }
#roomSec .imageBox .roomImgBox 				{ margin-bottom: 80px; width: 46%; }

#gridTwoColsSec .contentBox .titleBox h2.h2 	{ margin: 0 0 0 0;   }
#gridTwoColsSec .contentBox .content 		{ width: 55%; }
#gridTwoColsSec .imageBox .gridItem 			{ width: 46%; }

#galleryCollectionSec 									{ padding-top: 80px; }
#galleryCollectionSec .contentBox .titleBox .h2 		{ margin: 0 0 0 0;   }
#galleryCollectionSec .contentBox .content 				{ width: 55%; }
#galleryCollectionSec .imageBox .roomImgBox 				{ margin-bottom: 80px; width: 46%; }

#facilitiesSec 								{ padding-top: 80px; padding-bottom: 80px; }
#facilitiesSec .contentBox 					{ margin-bottom: 80px; }
#facilitiesSec .contentBox p 				{ margin: 30px 0 30px 0; width: 50%; margin: 0 0 40px 0; }

#othersSec									{ padding-top: 80px; }

#ourGallerySec								{ padding-top: 80px; padding-bottom: 80px; }
#ourGallerySec .gallery .content .h2		{ margin: 0 0 30px 0;   }
#ourGallerySec .gallery .content .viewgallery { margin: 20px 0 0 0; }

#beBlueSec 									{ padding-block: var(--space-between-section); }
#beBlueSec .content h2.h2 					{ margin: 0 0 30px 0;   }
#beBlueSec .content p 						{ margin: 0 0 20px 0; width: 95%; }

#followUsSec 								{ padding-top: 80px; }
#followUsSec .topContent 					{ margin: 0 auto 40px auto; }

#followUsSec .moreinfo 						{ margin: 50px auto 0; }

#newsletterSec								{ padding-top: 100px; padding-bottom: 100px; }
#newsletterSec:before						{ width: 700px; height: 700px; top: 20%; left: -23.5%; }
#newsletterSec .newsletter					{ padding: 0 5.4rem; }
#newsletterSec .content h3.h3				{ margin: 0 0 30px 0;   }
#newsletterSec .newsletter:before 			{ top: 50%; right: -6%; background-size: 70%; transform: translateY(-44%); }

#speakSec 									{ padding-top: 80px; padding-bottom: 80px; }
#speakSec .contentBox h3.h3 				{ margin: 0 0 30px 0;   }
#speakSec .contentBox p 					{ margin: 0 0 40px 0; }


/*---------------------- Rooms Page -----------------------*/
#listSec .contentBox .content 				{ width: 55%; }
#listSec .roomsBox .rooms .content 		{ padding: 0 100px 0 30px; }
#interestedInSec .interestedIn				{ --circleHalfWidth: 1020px; }
#interestedInSec .interestedIn-slider .swiper-slide picture img { height: 257px; }

/*---------------------- Default Page -----------------------*/
#vivamusSec .vivamusBoxSec .titleBox 		{ display:inline-block; width: 100%; }
#vivamusSec .contentBox 					{ width: 96%; }
#sedRhoncusSec .content p:not(:is(.modalDesign *)) 					{ padding: 0 11%; }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] { width: 65px; height: 65px; }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] img { width: 27px; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-prev { margin-left: -80px; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-next { margin-right: -80px; }
#pirateSec .pirateBox .container			{ gap: 127px; }
#pirateSec .pirateBox .image:after			{ height: calc(100% + 80px); border-top-left-radius: 230px; border-top-right-radius: 230px; top: -40px; right: -40px; }
#pirateSec .pirateBox:nth-child(even) .image:after { left: -40px; }

/*---------------------- My Insotel Page -----------------------*/
#myInsotelForm .myInsotelBox 				{ padding: 0px 10rem; }

/*---------------------- Contact Page -----------------------*/
#contactSec .content p:not(:is(.modalDesign *)) 						{ width: 100%; }

}



/* #iPad Pro - Large Screens beyond 1024px
================================================== */
@media only screen and (min-width: 992px) and (max-width: 1180px) {

:root										{
	--container-width: 960px;
	--two-col-right-padding: 140px;
	--space-between-section: 128px;
	--space-between-sections-small: 100px;
	--space-between-items: 40px;
	--title-size: 3rem;
	--title-line-height: 3.5rem;
	--title-size-small: 2.5rem;
	--title-small-line-height: 3rem;
	--title-size-item: 1.5rem;
	--title-item-line-height: 2rem;
}
.container									{ max-width: 960px; }

#header										{ padding: 15px 0; }
#header .logo								{ width: 120px; margin: 0 15px; }
#header .leftNav							{ margin-right: 15px; }
#header .leftNav .hamburger 				{ display: block; }
#header .leftNav .hamburger nav				{ padding: 128px 0 32px 0; }
#header .leftNav ul.mainMenu				{ display: none; }
#header .rightNav							{ width: calc(50% - 87.5px); display: none; }
#header .rightNav .languageMenu				{ display: none; }
#header .rightNav .bookNowBtn				{ width: 73px; padding: 5px 10px; }
#header ul.hotelMenu						{ display: none; }

#slider>.container 							{ max-width: 100%; }
#slider, #slider .home-slider				{ width: 100%; height: 100dvh; z-index: inherit; }
#slider > .container .bookBtnBox 			{ display: block; }

#caption									{ width: calc(100% - 30px); margin: auto; bottom: 190px; right: 0; left: 0; }
#caption .subtitle							{ margin-bottom: 10px; padding: 0 20px;   letter-spacing: 0.1em; }
#caption .subtitle br						{ display: none; }
#caption .title br							{ display: none; }

#searchForm 								{ display: none; width: calc(100% - 30px); background-color: #fafafa; box-shadow: 0 0 15px 0 rgb(41 51 88 / 10%); border-radius: 32px; position: fixed; top: 15px; right: 15px; bottom: 15px; left: 15px; z-index: 6; overflow: hidden; }
#searchForm .container						{ display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 30px 8px; }
#searchForm a.searchFormClose				{ display: flex; }
#searchForm .field							{ position: static; width: 100% !important; padding: 15px 34px !important; }
#searchForm .field label 					{ color: var(--text-primary-solid-64); }
#searchForm .field .form-control			{ border-color: #9B9893; color: var(--title-black-color); }
#searchForm .field .form-control::placeholder { color: var(--text-primary-solid-32); }
#searchForm .field .popups					{ height: 100%; margin-top: 0; padding: 30px 30px; border-radius: 32px; top: 0; left: 0; transform: translateX(0%); }
#searchForm .field .popups .calendar		{ width: 100%; }
#searchForm .field .popups .calendar .daterangepicker { float: none; width: 542px; }
#searchForm .field .popups .roomsbox		{ width: 100%; max-height: 237px; padding-right: 7px; }
#searchForm .field .popups .roomsbox:has(~ .addRoom) { margin-top: auto; }
#searchForm .field .popups .addRoom			{ margin-bottom: auto; }
#searchForm .field.search 					{ text-align: center; }
#searchForm .field.search button 			{ border-color: var(--text-primary-solid-64); background-color: transparent; color: var(--text-primary-solid-64); }
#searchForm .field.search button:hover 		{ border-color: var(--color-base-blue);	background-color: var(--color-base-blue);	color: var(--text-white);	text-decoration: none; }

#benefitsSec .benefitsBox 						{ width: 100%; display: flex; align-items: flex-start; flex-direction: column; padding-left: 0; padding-right: 0; }
#benefitsSec .benefitsBox .content 				{ width: 100%; margin-bottom: 45px; }
#benefitsSec .benefitsBox .content span.title:not(:is(.modalDesign *)) 	{ margin-bottom: 30px; }
#benefitsSec .benefitsBox .content span.title:not(:is(.modalDesign *)) br 	{ display:none; }
#benefitsSec .benefitsBox .imageBox 				{ width: 100%; }
#benefitsSec .benefitsBox .imageBox .benefitsIcon 	{ padding: 28px 28px; }

#introductionSec 									{ padding-top: var(--space-between-section); padding-bottom: calc(var(--space-between-section) + 40px); }
#introductionSec:before 							{ width: 60%; }
#introductionSec:after 								{ left: inherit; right: 82px; }
#introductionSec .circleHalf 						{ width: 78%; }
#introductionSec .introductionBox .content h1:not(:is(.modalDesign *))		{ margin-bottom: 30px;   }
#introductionSec .introductionBox .content h2:not(:is(.modalDesign *)),
#introductionSec .introductionBox .content p:not(:is(.modalDesign *)) 		{ width: 100%; }

#roomSec 									{ padding-top: 80px; padding-bottom: 40px; }
#roomSec .contentBox 						{ margin-bottom: 45px; flex-direction: column; }
#roomSec .contentBox .titleBox 				{ width: 100%; }
#roomSec .contentBox .titleBox h2.h2 		{ margin-bottom: 30px;   }
#roomSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#roomSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#roomSec .contentBox .content .moreinfo 	{ margin: auto auto auto 10px; padding: 10px 30px 10px 15px; }
#roomSec .imageBox 							{ width: 100%; }
#roomSec .imageBox .roomImgBox 				{ width: 47%; margin-bottom: 55px; display: flex; flex-direction: column-reverse; }
#roomSec .imageBox .roomImgBox .info 		{ width: 100%; height: auto; padding: 10px 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#roomSec .imageBox .roomImgBox:hover:before	{ display:none; }
#roomSec .imageBox .roomImgBox .info h3.h3 	{ width: 100%; margin: 0 0 15px 0; font-size: 26px; color: #58524A; font-weight: 400; line-height: 36px; }
#roomSec .imageBox .roomImgBox .info .linkBox { justify-content: flex-start; align-items: center; }
#roomSec .imageBox .roomImgBox .info .booknow { border: 1px solid #79756F; color: #79756F; }
#roomSec .imageBox .roomImgBox .info .booknow:hover { background-color: #79756F; color: #fff; }
#roomSec .imageBox .roomImgBox .info .viewroom { color: #79756F; }
#roomSec .imageBox .roomImgBox .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#roomSec .imageBox .roomImgBox .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }

#gridTwoColsSec .contentBox 					{ margin-bottom: 45px; flex-direction: column; }
#gridTwoColsSec .contentBox .titleBox 		{ width: 100%; }
#gridTwoColsSec .contentBox .titleBox h2.h2 	{ margin-bottom: 30px;   }
#gridTwoColsSec .contentBox .content 		{ width: 100%; padding-left: 0; }
#gridTwoColsSec .contentBox .content p 		{ margin: 0 0 30px 0;   }
#gridTwoColsSec .contentBox .content .moreinfo { margin: auto auto auto 10px; padding: 10px 30px 10px 15px; }
#gridTwoColsSec .imageBox 					{ width: 100%; }
#gridTwoColsSec .imageBox .gridItem 			{ width: 47%; }
#gridTwoColsSec .imageBox .gridItem .info 	{ width: 100%; height: auto; padding: 10px 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#gridTwoColsSec .imageBox .gridItem:hover:before { display:none; }
#gridTwoColsSec .imageBox .gridItem .info h3.h3 { width: 100%; margin: 0 0 15px 0; color: #58524A; font-weight: 400; }
#gridTwoColsSec .imageBox .gridItem .info .linkBox { justify-content: flex-start; align-items: center; }
#gridTwoColsSec .imageBox .gridItem .info .booknow { border: 1px solid #79756F; color: #79756F; }
#gridTwoColsSec .imageBox .gridItem .info .booknow:hover { background-color: #79756F; color: #fff; }
#gridTwoColsSec .imageBox .gridItem .info .viewhotel { color: #79756F; }
#gridTwoColsSec .imageBox .gridItem .info .viewhotel:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#gridTwoColsSec .imageBox .gridItem .info .viewhotel:hover:after { background: rgb(115 98 73 / 10%); }
#gridTwoColsSec .imageBox .gridItem .info .viewroom { color: #79756F; }
#gridTwoColsSec .imageBox .gridItem .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#gridTwoColsSec .imageBox .gridItem .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }

#galleryCollectionSec 									{ padding-top: 80px; padding-bottom: 40px; }
#galleryCollectionSec .contentBox 						{ margin-bottom: 45px; flex-direction: column; }
#galleryCollectionSec .contentBox .titleBox 				{ width: 100%; }
#galleryCollectionSec .contentBox .titleBox .h2 		{ margin-bottom: 30px;   }
#galleryCollectionSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#galleryCollectionSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#galleryCollectionSec .contentBox .content .moreinfo 	{ margin: auto auto auto 10px; padding: 10px 30px 10px 15px; }
#galleryCollectionSec .imageBox 							{ width: 100%; }
#galleryCollectionSec .imageBox .roomImgBox 				{ width: 47%; margin-bottom: 55px; display: flex; flex-direction: column-reverse; }
#galleryCollectionSec .imageBox .roomImgBox .info 		{ width: 100%; height: auto; padding: 10px 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#galleryCollectionSec .imageBox .roomImgBox:hover:before	{ display:none; }
#galleryCollectionSec .imageBox .roomImgBox .info h3.h3 	{ width: 100%; margin: 0 0 15px 0; font-size: 26px; color: #58524A; font-weight: 400; line-height: 36px; }
#galleryCollectionSec .imageBox .roomImgBox .info .linkBox { justify-content: flex-start; align-items: center; }
#galleryCollectionSec .imageBox .roomImgBox .info .booknow { border: 1px solid #79756F; color: #79756F; }
#galleryCollectionSec .imageBox .roomImgBox .info .booknow:hover { background-color: #79756F; color: #fff; }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom { color: #79756F; }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }

#facilitiesSec								{ padding-top: 80px; padding-bottom: 80px; }
#facilitiesSec .contentBox 					{ margin-bottom: 55px; }
#facilitiesSec .contentBox h2.h2			{   text-align: center;}
#facilitiesSec .contentBox p 				{ margin-top: 30px; width: 100%; margin: 0 0 30px 0;   }
#facilitiesSec .contentBox .moreinfo 		{ padding: 8px 30px 8px 15px; font-size: 14px; line-height: 24px; }
#facilitiesSec .contentBox .moreinfo:after 	{ width: 40px; height: 40px; }
#facilitiesSec .facilitiGridBox 			{ display: block; }

#othersSec									{ padding-top: 80px; }
#othersSec .h3								{ margin: 0 0 -95px 0; padding: 0 15px;   }
#othersSec .info 					{ width: 65%; padding: 0 15px; top: 70px; }
#othersSec .info .discoverhotel 		{ margin: 10px 0 0 0; }

#ourGallerySec								{ padding-top: 80px; padding-bottom: 80px; }
#ourGallerySec .gallery 					{ padding: 0 15px; justify-content: space-between; }
#ourGallerySec .gallery .content 			{ order: 1; width: 100%; padding: 0 0%; margin-bottom: 46px; }
#ourGallerySec .gallery .content .h2		{ margin-bottom: 30px;   }
#ourGallerySec .gallery .content .viewgallery { margin: 10px 0 0 0; }
#ourGallerySec .gallery .image1 			{ order: 2; width: 48%; }
#ourGallerySec .gallery .image2				{ order: 3; width: 48%; }

#beBlueSec									{ padding-block: var(--space-between-section); }
#beBlueSec .content 						{ margin-bottom: auto; }
#beBlueSec .content h2.h2					{ margin-bottom: 30px;   }
#beBlueSec .content p 						{ margin: 0 0 20px 0; width: 100%;   }

#followUsSec								{ padding-top: 80px; padding-bottom: 80px; }
#followUsSec .topContent 					{ margin: 0 auto 46px auto; }

#followUsSec .moreinfo 						{ margin: 40px auto 0; }

#newsletterSec								{ padding-top: 80px; padding-bottom: 80px; }
#newsletterSec:before						{ width: 600px; height: 600px; top: 35%; left: -90%; }
#newsletterSec .newsletter					{ flex-direction: column; gap: 8px; align-items: flex-start; padding: 0 0rem; }
#newsletterSec .content						{ width: 100%; }
#newsletterSec .content h3.h3				{ margin-bottom: 30px;   }
#newsletterSec .content h3.h3 strong 		{ font-style: italic; }
#newsletterSec .content p					{ margin-left: 0;   letter-spacing: 0.1em; }
#newsletterSec .newsform					{ width: 100%; }
#newsletterSec .newsform .form-group 		{ flex-direction: column; align-items: flex-start; }
#newsletterSec .newsform .form-group .form-control 			{ width:100%;  }
#newsletterSec .newsform .form-group label.checkbox 		{ padding-left: 30px;   }
#newsletterSec .newsform .form-group .subscribeBtn 			{ margin: 20px 0 0 10px; padding: 8px 30px 8px 15px; font-size: 14px; line-height: 24px; }
#newsletterSec .newsform .form-group .subscribeBtn:after 	{ width: 40px; height: 40px; }

#speakSec 									{ padding-top: 80px; padding-bottom: 80px; }
#speakSec .contentBox 						{ padding-left: 15px; padding-right: 15px; }
#speakSec .contentBox h3.h3					{ margin-bottom: 30px;   }
#speakSec .contentBox h3.h3 strong 			{ font-style: italic; }
#speakSec .contentBox p 					{ margin: 0 0 20px 0; width: 100%;   }
#speakSec .contentBox .moreinfo				{ margin: 15px 0 0 10px; padding: 10px 30px 10px 15px; font-size: 14px; line-height: 24px; }
#speakSec .contentBox .moreinfo:after 		{ width: 40px; height: 40px; }


/*----------------- Inner Pages -----------------*/
#innerBanner > .container 					{ max-width: 100%; }
#innerBanner > .container #caption 			{ min-height: 160px; }
#innerBanner > .container .bookBtnBox 		{ display: block; }
#innerBanner, #innerBanner .inner-slider-video, #innerBanner .inner-slider { z-index: inherit; }
#bookForm 									{ display: none; width: calc(100% - 30px); background-color: #fafafa; box-shadow: 0 0 15px 0 rgb(41 51 88 / 10%); border-radius: 32px; position: fixed; top: 15px; right: 15px; bottom: 15px; left: 15px; z-index: 6; overflow: hidden; }
#bookForm .container						{ display: flex; flex-direction: column; justify-content: center; height: 100%; width:100%; padding: 80px 30px 30px 30px; }
#bookForm a.bookFormClose					{ display: flex; left: 0; right: 0; top: 15%; margin: auto; align-items: center; grid-gap: 10px; justify-content: center; flex-direction: column; }
#bookForm a.bookFormClose span img			{ filter: brightness(0) invert(1); }
#bookForm .field							{ position: static; width: 100% !important; padding: 21px 30px 22px 30px!important; }
#bookForm .field label 						{ color: var(--text-primary-solid-64); }
#bookForm .field .form-control				{ border-color: #9B9893; color: var(--title-black-color); }
#bookForm .field .form-control::placeholder { color: var(--text-primary-solid-32); }
#bookForm .field .popups					{ height: 100%; margin-top: 0; padding: 30px 30px; border-radius: 32px; top: 0; left: 0; transform: translateX(0%); }
#bookForm .field .popups .calendar			{ width: 100%; }
#bookForm .field .popups .calendar .daterangepicker .drp-calendar.left { float: none; margin-right: auto; margin-left: auto; }
#bookForm .field .popups .roomsbox			{ width: 100%; max-height: 237px; padding-right: 7px; }
#bookForm .field .popups .roomsbox:has(~ .addRoom) { margin-top: auto; }
#bookForm .field .popups .addRoom			{ margin-bottom: auto; }
#bookForm .field.bookBtn 					{ text-align: center; }
#bookForm .field.bookBtn .bookButton		{ border-color: var(--text-primary-solid-64); background-color: transparent; color: var(--text-primary-solid-64); }
#bookForm .field.bookBtn .bookButton:hover 	{ background-color: var(--title-black-color); color: var(--text-white); }

/*---------------------- Rooms Page -----------------------*/
#listSec .contentBox 						{ margin-bottom: 80px; }
#listSec .contentBox .titleBox 			{ width: 100%; }
#listSec .contentBox .titleBox .h2 		{ margin-bottom: 32px;   }
#listSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#listSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#listSec .roomsBox .rooms .image 			{ width: 55%; padding-left: 60px; padding-right: 60px; }

#listSec .roomsBox .rooms .content 		{ width: 45%; padding: 0; }
#listSec .roomsBox .rooms .content .h2:not(:is(.modalDesign *)), #listSec .roomsBox .rooms .content .h3:not(:is(.modalDesign *)) { margin: 0 0 32px 0;   }
#listSec .roomsBox .rooms .content ul:not(:is(.modalDesign *)) 		{ align-items: flex-start; gap: 16px; margin: 0 0 32px 0; }
#listSec .roomsBox .rooms .content ul:not(:is(.modalDesign *)) li 	{ gap: 8px; }

.buttons { gap: 16px; margin-top: 24px; }
.buttons .button { padding: 10px 24px; }
#listSec .defultBox 						{ padding-bottom: 130px; }
#listSec .defultBox .rooms 				{ margin-bottom: 130px; }
#listSec .defultBox .rooms:last-child 		{ margin-bottom: 0px; }
#interestedInSec 							{ padding-top: 80px; padding-bottom: 0px; }
#interestedInSec .contentBox 				{ margin-bottom: 96px; }
#interestedInSec .contentBox .h4 			{   text-align: center; }
#interestedInSec .contentBox p 				{ width: 70%; }
#interestedInSec .interestedIn				{ --circleHalfWidth: 880px; margin-top: 30px; margin-bottom: 80px; }
#interestedInSec .interestedIn-slider .swiper-slide { text-align: center; }
#interestedInSec .interestedIn-slider .swiper-slide picture img { height: 208px; }
#interestedInSec .interestedIn-slider .swiper-slide span.title { margin: 16px 0 0 0; }
#interestedInSec .interestedIn-slider .swiper-slide .moreinfo { margin: 32px 0 0 0; }

/*---------------------- Default Page -----------------------*/
#sedRhoncusSec.intro-no-text 				{ padding-bottom: 0; }
#sedRhoncusSec .content 					{ width: 100%; padding-left: 0px; padding-right: 0px; }
#sedRhoncusSec .content h1.h1:not(:is(.modalDesign *)) 				{ margin: 0 0 32px 0;   }
#sedRhoncusSec .content p:not(:is(.modalDesign *)) 					{ margin: 0 0 16px 0; padding: 0 18%; }
#sedRhoncusSec .sedSliderSec				{ margin: 0 0 44px 0; margin-top: 150px; }
#sedRhoncusSec .sedSliderSec .swiperNav 	{ justify-content: center; top: calc(0% - 16px); transform: translateY(-100%); }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] { width: 50px; height: 50px; }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] img { width: 24px; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-prev { margin-left: 0; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-next { margin-right: 0; }
#vivamusSec 								{ padding-top: 80px; padding-bottom: 80px; }
#vivamusSec .vivamusBoxSec .titleBox h3.h3 	{ margin: 0 0 50px 0;   }
#vivamusSec .contentBox 					{ width: 100%; grid-gap: 25px; }
#vivamusSec .contentBox .contentLink .viewMenu { padding: 10px 15px 10px 16px; }
#pirateSec .pirateBox .container			{ gap: 80px; }
#pirateSec .pirateBox .image:after			{ height: calc(100% + 80px); border-top-left-radius: 230px; border-top-right-radius: 230px; top: -40px; right: -40px; }
#pirateSec .pirateBox:nth-child(even) .image:after { left: -40px; }
#pirateSec .pirateBox .content				{ padding: 0; }
#pirateSec .pirateBox:nth-child(even) .content { padding: 0; }

/*---------------------- My Insotel Page -----------------------*/
#myInsotelForm 								{ padding-top: 80px; padding-bottom: 80px; }
#myInsotelForm .myInsotelBox 				{ gap: 10%; padding: 0 4rem; }

/*---------------------- Contact Page -----------------------*/
#contactSec 								{ padding-block: var(--space-between-sections-small); }
#contactSec .content h1.h1:not(:is(.modalDesign *)) 					{ margin: 0 0 34px 0;   }
#contactSec .content p:not(:is(.modalDesign *)) 						{ width: 100%; }
#contactSec .contactform 					{ padding-left: 30px; padding-right: 0px; }
#contactSec .contactform .form-group textarea.form-control { height: 100px; }
#contactSec .informationBox:after 			{ margin-top: 8px; }
#contactSec .informationSec 				{ width: 90%; padding: 34px; margin: 64px auto 0 auto; }
#contactSec .informationBox .contentBox span { width: 80%;}

}



/* #Tablet (Portrait)
================================================== */
/* Note: Design for a width of 768px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

:root										{
	--container-width: 100%;
	--two-col-left-width: 100%;
	--two-col-right-width: 100%;
	--two-col-right-padding: 0;
	--space-between-section: 80px;
	--space-between-sections-small: 80px;
	--space-between-items: 32px;
	--title-size: 3rem;
	--title-line-height: 3.5rem;
	--title-size-small: 2.5rem;
	--title-small-line-height: 3rem;
	--title-size-item: 1.5rem;
	--title-item-line-height: 2rem;
}
.container									{ max-width: 100%; padding: 0 15px; }

#header										{ padding: 15px 0; }
#header .logo								{ width: 120px; margin: 0 15px; }
#header .leftNav							{ margin-right: 15px; }
#header .leftNav .hamburger 				{ display: block; }
#header .leftNav .hamburger nav				{ padding: 128px 0 32px 0; }
#header .leftNav ul.mainMenu				{ display: none; }
#header .rightNav							{ width: calc(50% - 87.5px); display: none; }
#header .rightNav .languageMenu				{ display: none; }
#header .rightNav .bookNowBtn				{ width: 73px; padding: 5px 10px; }
#header ul.hotelMenu						{ display: none; }

#slider, #slider .home-slider				{ width: 100%; height: 100dvh; z-index: inherit; }
#slider > .container .bookBtnBox 			{ display: block; }
#slider .home-slider .swiperNav				{ display: none; }
#slider .home-slider .swiperCountDots		{ bottom: 40px; right: 15px; left: 15px; }
#slider .home-slider .swiperCountDots [class*=swiper-button-] { display: flex; }
#slider .home-slider .swiperCountDots .swiper-button-prev { margin-right: 8px; }
#slider .home-slider .swiperCountDots .swiper-button-next { margin-left: 8px; }
#slider .home-slider .swiperCountDots .swiper-pagination { position: relative; top: -14px; }
#slider .home-slider .swiperCountDots .current-slide { position: relative; top: -14px; }
#slider .home-slider .swiperCountDots .total-slides { position: relative; top: -14px; }

#caption									{ width: calc(100% - 30px); }
#caption .subtitle							{ margin-bottom: 10px; padding: 0 20px;   letter-spacing: 0.1em; }
#caption .subtitle br						{ display: none; }
#caption .title br							{ display: none; }

#searchForm 								{ display: none; width: calc(100% - 30px); background-color: #fafafa; box-shadow: 0 0 15px 0 rgb(41 51 88 / 10%); border-radius: 32px; position: fixed; top: 15px; right: 15px; bottom: 15px; left: 15px; z-index: 6; overflow: hidden; }
#searchForm .container						{ display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 30px 8px; }
#searchForm a.searchFormClose				{ display: flex; }
#searchForm .field							{ position: static; width: 100% !important; padding: 15px 34px !important; }
#searchForm .field label 					{ color: var(--text-primary-solid-64); }
#searchForm .field .form-control			{ border-color: #9B9893; color: var(--title-black-color); }
#searchForm .field .form-control::placeholder { color: var(--text-primary-solid-32); }
#searchForm .field .popups					{ height: 100%; margin-top: 0; padding: 30px 30px; border-radius: 32px; top: 0; left: 0; transform: translateX(0%); }
#searchForm .field .popups .calendar		{ width: 100%; }
#searchForm .field .popups .calendar .daterangepicker { float: none; width: 542px; }
#searchForm .field .popups .roomsbox		{ width: 100%; max-height: 237px; padding-right: 7px; }
#searchForm .field .popups .roomsbox:has(~ .addRoom) { margin-top: auto; }
#searchForm .field .popups .addRoom			{ margin-bottom: auto; }
#searchForm .field.search 					{ text-align: center; }
#searchForm .field.search button 			{ border-color: var(--text-primary-solid-64); background-color: transparent; color: var(--text-primary-solid-64); }
#searchForm .field.search button:hover 		{ border-color: var(--color-base-blue);	background-color: var(--color-base-blue);	color: var(--text-white);	text-decoration: none; }

#benefitsSec .benefitsBox 						{ width: 100%; display: flex; align-items: flex-start; flex-direction: column; padding-left: 0; padding-right: 0; }
#benefitsSec .benefitsBox .content 				{ width: 100%; margin-bottom: 45px; }
#benefitsSec .benefitsBox .content span.title:not(:is(.modalDesign *)) 	{ margin-bottom: 30px; }
#benefitsSec .benefitsBox .content span.title:not(:is(.modalDesign *)) br 	{ display:none; }
#benefitsSec .benefitsBox .content p:not(:is(.modalDesign *)) 				{ width: 100%; margin: 0 0 30px 0;   }
#benefitsSec .benefitsBox .imageBox 				{ width: 100%; }
#benefitsSec .benefitsBox .imageBox .benefitsIcon 	{ padding: 28px 28px; }

#introductionSec 									{ padding-top: var(--space-between-section); padding-bottom: calc(var(--space-between-section) + 40px); --circleHalfWidth: 80%;}
#introductionSec .introductionBox 					{ gap: 46px; flex-direction: column-reverse; }
#introductionSec .introductionBox .content 			{ margin-bottom: 0; }
#introductionSec .introductionBox .content h1:not(:is(.modalDesign *))		{ margin-bottom: 30px;   }
#introductionSec .introductionBox .content h2:not(:is(.modalDesign *)), #introductionSec .introductionBox .content p:not(:is(.modalDesign *)) { width: 100%; }
#introductionSec .introductionBox .image .swiperNav	{ top: 100%; justify-content: space-between; padding-top: 24px;}
#introductionSec .introductionBox .image .swiperNav	[class*=swiper-button-] { margin: 0; }

.hotel-list-header 									{ flex-direction: column; gap: 46px; }

#roomSec 									{ padding-top: 80px; padding-bottom: 40px; }
#roomSec .contentBox 						{ margin-bottom: 45px; flex-direction: column; }
#roomSec .contentBox .titleBox 				{ width: 100%; }
#roomSec .contentBox .titleBox h2.h2 		{ margin-bottom: 30px;   }
#roomSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#roomSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#roomSec .contentBox .content .moreinfo 	{ margin: auto auto auto 10px; padding: 10px 30px 10px 15px; }
#roomSec .imageBox 							{ width: 100%; }
#roomSec .imageBox .roomImgBox 				{ width: 47%; margin-bottom: 55px; display: flex; flex-direction: column-reverse; }
#roomSec .imageBox .roomImgBox .info 		{ width: 100%; height: auto; padding: 10px 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#roomSec .imageBox .roomImgBox:hover:before	{ display:none; }
#roomSec .imageBox .roomImgBox .info h3.h3 	{ width: 100%; margin: 0 0 15px 0; font-size: 26px; color: var(--title-black-color); font-weight: 400; line-height: 36px; text-align: left;}
#roomSec .imageBox .roomImgBox .info .linkBox { justify-content: flex-start; align-items: center; }
#roomSec .imageBox .roomImgBox .info .booknow { border: 1px solid var(--text-primary-solid-64); color: var(--text-primary-solid-64); }
#roomSec .imageBox .roomImgBox .info .booknow:hover { background-color: var(--text-primary-solid-64); color: #fff; }
#roomSec .imageBox .roomImgBox .info .viewroom { color: var(--text-primary-solid-64); }
#roomSec .imageBox .roomImgBox .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#roomSec .imageBox .roomImgBox .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }

#galleryCollectionSec 									{ padding-top: 80px; padding-bottom: 40px; }
#galleryCollectionSec .contentBox 						{ margin-bottom: 45px; flex-direction: column; }
#galleryCollectionSec .contentBox .titleBox 				{ width: 100%; }
#galleryCollectionSec .contentBox .titleBox .h2 		{ margin-bottom: 30px;   }
#galleryCollectionSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#galleryCollectionSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#galleryCollectionSec .contentBox .content .moreinfo 	{ margin: auto auto auto 10px; padding: 10px 30px 10px 15px; }
#galleryCollectionSec .imageBox 							{ width: 100%; }
#galleryCollectionSec .imageBox .roomImgBox 				{ width: 47%; margin-bottom: 55px; display: flex; flex-direction: column-reverse; }
#galleryCollectionSec .imageBox .roomImgBox .info 		{ width: 100%; height: auto; padding: 10px 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#galleryCollectionSec .imageBox .roomImgBox:hover:before	{ display:none; }
#galleryCollectionSec .imageBox .roomImgBox .info h3.h3 	{ width: 100%; margin: 0 0 15px 0; font-size: 26px; color: var(--title-black-color); font-weight: 400; line-height: 36px; text-align: left;}
#galleryCollectionSec .imageBox .roomImgBox .info .linkBox { justify-content: flex-start; align-items: center; }
#galleryCollectionSec .imageBox .roomImgBox .info .booknow { border: 1px solid var(--text-primary-solid-64); color: var(--text-primary-solid-64); }
#galleryCollectionSec .imageBox .roomImgBox .info .booknow:hover { background-color: var(--text-primary-solid-64); color: #fff; }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom { color: var(--text-primary-solid-64); }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }


#facilitiesSec								{ padding-top: 80px; padding-bottom: 80px; }
#facilitiesSec .contentBox 					{ margin-bottom: 55px; }
#facilitiesSec .contentBox h2.h2			{   text-align: center;}
#facilitiesSec .contentBox p 				{ margin-top: 30px; width: 100%; margin: 0 0 30px 0;   }
#facilitiesSec .contentBox .moreinfo 		{ padding: 8px 30px 8px 15px; font-size: 14px; line-height: 24px; }
#facilitiesSec .contentBox .moreinfo:after 	{ width: 40px; height: 40px; }
#facilitiesSec .facilitiGridBox 			{ display: none; }
#facilitiesSec .facilities					{ display: block; }
#facilitiesSec .facilities-slider .swiper-slide picture img { height: 400px; }
#facilitiesSec .facilities-slider .swiper-slide h3.h3 { text-align: center; margin: 16px 0 16px 0; }
#facilitiesSec .facilities-slider .swiper-slide p { display: none; }
#facilitiesSec .facilities-slider .swiper-slide .moreinfo { display: table; margin: 0 auto; }
#facilitiesSec .swiperNav [class*=swiper-button-] { width: 50px; height: 50px; }
#facilitiesSec .swiperNav [class*=swiper-button-] img { width: 24px; }
#facilitiesSec .swiperNav .swiper-button-prev { margin-left: 0; }
#facilitiesSec .swiperNav .swiper-button-next { margin-right: 0; }

#othersSec									{ padding-top: 80px; }
#othersSec .h3								{ margin: 0 0 -95px 0; padding: 0 15px;   }
#othersSec .image img 						{ height: 400px; }
#othersSec .info 					{ width: 65%; padding: 45px 15px; top: 70px; }
#othersSec .info .discoverhotel 		{ margin: 10px 0 0 0; }

#ourGallerySec								{ padding-top: 80px; padding-bottom: 80px; }
#ourGallerySec .gallery 					{ padding: 0 15px; justify-content: space-between; }
#ourGallerySec .gallery .content 			{ order: 1; width: 100%; padding: 0 0%; margin-bottom: 46px; }
#ourGallerySec .gallery .content .h2		{ margin-bottom: 30px;   }
#ourGallerySec .gallery .content .viewgallery { margin: 10px 0 0 0; }
#ourGallerySec .gallery .image1 			{ order: 2; width: 48%; }
#ourGallerySec .gallery .image2				{ order: 3; width: 48%; }

#beBlueSec									{ padding-block: var(--space-between-section); }
#beBlueSec > .row > .container > .row		{ gap: 40px; }

#beBlueSec .content 						{ flex: 0 0 100%; max-width: 100%; }
#beBlueSec .image 							{ flex: 0 0 100%; max-width: 100%; }

#beBlueSec .content 						{ margin-bottom: 40px; }
#beBlueSec .content h2.h2					{ margin-bottom: 30px;   }
#beBlueSec .content p 						{ margin: 0 0 20px 0; width: 100%;   }

#followUsSec								{ padding-top: 80px; padding-bottom: 80px; }
#followUsSec .topContent 					{ margin: 0 auto 46px auto; }
#followUsSec .moreinfo 						{ margin: 40px auto 0; }

#newsletterSec								{ padding-top: 80px; padding-bottom: 80px; }
#newsletterSec:before						{ width: 600px; height: 600px; top: 35%; left: -90%; }
#newsletterSec .newsletter					{ flex-direction: column; gap: 8px; align-items: flex-start; padding: 0 0rem; }
#newsletterSec .content						{ width: 100%; }
#newsletterSec .content h3.h3				{ margin-bottom: 30px;   }
#newsletterSec .content h3.h3 strong 		{ font-style: italic; }
#newsletterSec .content p					{ margin-left: 0;   letter-spacing: 0.1em; }
#newsletterSec .newsform					{ width: 100%; padding-top: 0;}
#newsletterSec .newsform .form-group 		{ flex-direction: column; align-items: flex-start; }
#newsletterSec .newsform .form-group .form-control 			{ width:100%;  }
#newsletterSec .newsform .form-group label.checkbox 		{ padding-left: 30px;   }
#newsletterSec .newsform .form-group .subscribeBtn 			{ margin: 20px 0 0 10px; padding: 8px 30px 8px 15px; font-size: 14px; line-height: 24px; }
#newsletterSec .newsform .form-group .subscribeBtn:after 	{ width: 40px; height: 40px; }

#speakSec 									{ padding-top: 80px; padding-bottom: 80px; }
#speakSec .contentBox 						{ padding-left: 15px; padding-right: 15px; }
#speakSec .contentBox h3.h3					{ margin-bottom: 30px;   }
#speakSec .contentBox h3.h3 strong 			{ font-style: italic; }
#speakSec .contentBox p 					{ margin: 0 0 20px 0; width: 100%;   }
#speakSec .contentBox .moreinfo				{ margin: 15px 0 0 10px; padding: 10px 30px 10px 15px; font-size: 14px; line-height: 24px; }
#speakSec .contentBox .moreinfo:after 		{ width: 40px; height: 40px; }


/*----------------- Modal Design -----------------*/
.modalDesign::-webkit-scrollbar				{ width: 0px; }
.modal.show .modal-dialog 					{ width: 90%; max-width: 90%; }
.modalDesign #modalContent .modal-body					{ padding: 60px 28px; }
.modalDesign #modalContent .close							{ margin: -32px 0px 0 0; }

/*----------------- Inner Pages -----------------*/
#innerBanner > .container .bookBtnBox 		{ display: block; }
#innerBanner, #innerBanner .inner-slider-video, #innerBanner .inner-slider { z-index: inherit; }
#innerBanner .inner-slider .swiperNav		{ display: none; }
#innerBanner .inner-slider .swiperCountDots	{ bottom: 40px; right: 15px; left: 15px; }

#innerBanner .inner-slider .swiperCountDots .swiper-pagination { position: relative; top: -14px; }
#innerBanner .inner-slider .swiperCountDots .current-slide { position: relative; top: -14px; }
#innerBanner .inner-slider .swiperCountDots .total-slides { position: relative; top: -14px; }
#bookForm 									{ display: none; width: calc(100% - 30px); background-color: #fafafa; box-shadow: 0 0 15px 0 rgb(41 51 88 / 10%); border-radius: 32px; position: fixed; top: 15px; right: 15px; bottom: 15px; left: 15px; z-index: 6; overflow: hidden; }
#bookForm .container						{ display: flex; flex-direction: column; justify-content: center; height: 100%; width:100%; padding: 80px 30px 30px 30px; }
#bookForm a.bookFormClose					{ display: flex; left: 0; right: 0; top: 15%; margin: auto; align-items: center; grid-gap: 10px; justify-content: center; flex-direction: column; }
#bookForm a.bookFormClose span img			{ filter: brightness(0) invert(1); }
#bookForm .field							{ position: static; width: 100% !important; padding: 21px 30px 22px 30px!important; }
#bookForm .field label 						{ color: var(--text-primary-solid-64); }
#bookForm .field .form-control				{ border-color: #9B9893; color: var(--title-black-color); }
#bookForm .field .form-control::placeholder { color: var(--text-primary-solid-32); }
#bookForm .field .popups					{ height: 100%; margin-top: 0; padding: 30px 30px; border-radius: 32px; top: 0; left: 0; transform: translateX(0%); }
#bookForm .field .popups .calendar			{ width: 100%; }
#bookForm .field .popups .calendar .daterangepicker .drp-calendar.left { float: none; margin-right: auto; margin-left: auto; }
#bookForm .field .popups .roomsbox			{ width: 100%; max-height: 237px; padding-right: 7px; }
#bookForm .field .popups .roomsbox:has(~ .addRoom) { margin-top: auto; }
#bookForm .field .popups .addRoom			{ margin-bottom: auto; }
#bookForm .field.bookBtn 					{ text-align: center; }
#bookForm .field.bookBtn .bookButton		{ border-color: var(--text-primary-solid-64); background-color: transparent; color: var(--text-primary-solid-64); }
#bookForm .field.bookBtn .bookButton:hover 	{ background-color: var(--title-black-color); color: var(--text-white); }
#breadCrumb 								{ padding: 32px 0; }

/*---------------------- Rooms Page -----------------------*/
#listSec .contentBox 						{ margin-bottom: 75px; }
#listSec .contentBox .titleBox 			{ width: 100%; }
#listSec .contentBox .titleBox .h2 		{ margin-bottom: 32px;   }
#listSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#listSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#listSec .roomsBox .rooms:last-child 		{ margin-bottom: 0px; }
#listSec .roomsBox .rooms .image 			{ width: 100%;}
#listSec .roomsBox .rooms .image .swiperNav { position: relative; margin-top: 24px; }
#listSec .roomsBox .rooms .image .swiperCountDots { margin-top: 16px; }

#listSec .roomsBox .rooms .content 		{ width: 100%; padding: 24px 0px 0 0px;}
#listSec .roomsBox .rooms .content .h2:not(:is(.modalDesign *)), #listSec .roomsBox .rooms .content .h3:not(:is(.modalDesign *)) { margin: 0 0 32px 0;   }
#listSec .roomsBox .rooms .content ul:not(:is(.modalDesign *)) 		{ align-items: flex-start; gap: 16px; margin: 0 0 32px 0; }
#listSec .roomsBox .rooms .content ul:not(:is(.modalDesign *)) li 	{ gap: 4px; flex-direction: column; justify-content: flex-start; flex: 0 0 calc(25% - 12px); }

.buttons { gap: 16px; margin-top: 24px; }
.buttons .button { padding: 10px 24px; }
#interestedInSec 							{ padding-top: 80px; padding-bottom: 0px; }
#interestedInSec .contentBox 				{ margin-bottom: 56px; }
#interestedInSec .contentBox .h4 			{   text-align: center; }
#interestedInSec .contentBox p 				{ width: 70%; }
#interestedInSec .interestedIn				{ --circleHalfWidth: 570px; margin-top: 0px; margin-bottom: 80px; }
#interestedInSec .interestedIn:before		{ display: none; }
#interestedInSec .interestedIn:after		{ display: none; }
#interestedInSec .interestedIn .circleHalf	{ display: none; }
#interestedInSec .interestedIn-slider 		{ overflow: visible; padding: 56px 30px 0 30px; margin-top: 0;}
#interestedInSec .interestedIn-slider .swiper-slide { text-align: center; }
#interestedInSec .interestedIn-slider .swiper-slide picture img { height: 400px; }
#interestedInSec .interestedIn-slider .swiper-slide span.title { margin: 16px 0 0 0; }
#interestedInSec .interestedIn-slider .swiper-slide .moreinfo { margin: 32px 0 0 0; }

/*---------------------- Default Page -----------------------*/
#sedRhoncusSec.intro-no-text 				{ padding-bottom: 0; }
#sedRhoncusSec .content 					{ width: 100%; padding-left: 0px; padding-right: 0px; }
#sedRhoncusSec .content h1.h1:not(:is(.modalDesign *)) 				{ margin: 0 0 32px 0;   }
#sedRhoncusSec .content p:not(:is(.modalDesign *)) 					{ margin: 0 0 16px 0; padding: 0 5%; }
#sedRhoncusSec .sedSliderSec				{ margin: 0 -15px 44px -15px; margin-top: 130px; }
#sedRhoncusSec .sedSliderSec .center-slider .swiper-slide 	{ margin: 39px 0; }
#sedRhoncusSec .sedSliderSec .center-slider .swiper-slide-active { margin: 0; }
#sedRhoncusSec .sedSliderSec .center-slider img 			{ width: 100%; }
#sedRhoncusSec .sedSliderSec .center-slider .swiper-slide-active img { max-width: calc(100% + 64px); width: calc(100% + 64px); }
#sedRhoncusSec .sedSliderSec .center-slider p { margin: 0 -32px; margin-top: 16px; padding: 0 16px; }
#sedRhoncusSec .sedSliderSec .swiperNav 	{ justify-content: center; top: calc(0% - 16px); transform: translateY(-100%); }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] { width: 50px; height: 50px; }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] img { width: 24px; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-prev { margin-left: 0; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-next { margin-right: 0; }
#vivamusSec 								{ padding-top: 80px; padding-bottom: 80px; }
#vivamusSec .vivamusBoxSec .titleBox h3.h3 	{ margin: 0 0 50px 0;   }
#vivamusSec .contentBox 					{ width: 100%; grid-gap: 25px; }
#vivamusSec .contentBox .contentLink .viewMenu { padding: 10px 15px 10px 16px; }
#pirateSec .pirateBox .container			{ gap: 60px; }
#pirateSec .pirateBox .image:after			{ height: calc(100% + 60px); border-top-left-radius: 230px; border-top-right-radius: 230px; top: -30px; right: -30px; }
#pirateSec .pirateBox:nth-child(even) .image:after { left: -30px; }
#pirateSec .pirateBox .content				{ padding: 0; }
#pirateSec .pirateBox:nth-child(even) .content { padding: 0; }

/*---------------------- My Insotel Page -----------------------*/
#myInsotelForm 								{ padding-top: 80px; padding-bottom: 80px; }
#myInsotelForm .myInsotelBox 				{ gap: 10%; padding: 0 4rem; }

/*---------------------- Contact Page -----------------------*/
#contactSec 								{ padding-block: var(--space-between-sections-small); }
#contactSec .content h1.h1:not(:is(.modalDesign *)) 					{ margin: 0 0 34px 0;   }
#contactSec .content p:not(:is(.modalDesign *)) 						{ width: 100%; }
#contactSec .contactform 					{ padding-left: 30px; padding-right: 0px; }
#contactSec .contactform .form-group textarea.form-control { height: 100px; }
#contactSec .informationBox:after 			{ margin-top: 8px; }
#contactSec .informationSec 				{ width: 90%; padding: 34px; margin: 75px auto 0 auto; }
#contactSec .informationBox .contentBox span { width: 80%;}

}



/*  #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {

:root										{
	--container-width: 100%;
	--two-col-left-width: 100%;
	--two-col-right-width: 100%;
	--two-col-right-padding: 0;
	--space-between-section: 48px;
	--space-between-sections-small: 48px;
	--space-between-items: 32px;
	--title-size: 3rem;
	--title-line-height: 3.5rem;
	--title-size-small: 2.5rem;
	--title-small-line-height: 3rem;
	--title-size-item: 1.5rem;
	--title-item-line-height: 2rem;
}
.container									{ max-width: 100%; padding: 0 15px; }

.buttons { gap: 16px; margin-top: 24px; }
.buttons .button { padding: 10px 24px; }

#header										{ padding: 10px 0; }
#header .logo								{ width: 100px !important; margin: 0 15px; }
#header .leftNav							{ margin-right: 15px; }
#header .leftNav .hamburger 				{ display: block; }
#header .leftNav .hamburger nav				{ padding: 80px 0 32px 0; }
#header .leftNav ul.mainMenu				{ display: none; }
#header .rightNav							{ width: calc(50% - 87.5px); display: none; }
#header .rightNav .languageMenu				{ display: none; }
#header .rightNav .bookNowBtn				{ width: 73px; padding: 5px 10px; }
#header ul.hotelMenu						{ display: none; }

#slider, #slider .home-slider				{ width: 100%; height: 100dvh; z-index: inherit; }
#slider > .container .bookBtnBox 			{ display: block; }
#slider .home-slider .swiperNav				{ display: none; }
#slider .home-slider .swiperCountDots		{ bottom: 40px; right: 15px; left: 15px; }
#slider .home-slider .swiperCountDots [class*=swiper-button-] { display: flex; }
#slider .home-slider .swiperCountDots .swiper-button-prev { margin-right: 8px; }
#slider .home-slider .swiperCountDots .swiper-button-next { margin-left: 8px; }
#slider .home-slider .swiperCountDots .swiper-pagination { position: relative; top: -14px; }
#slider .home-slider .swiperCountDots .current-slide { position: relative; top: -14px; }
#slider .home-slider .swiperCountDots .total-slides { position: relative; top: -14px; }

#caption									{ width: calc(100% - 30px)}
#caption .subtitle							{ margin-bottom: 10px; padding: 0 40px;   letter-spacing: 0.1em; }
#caption .subtitle br						{ display: none; }
#caption .title								{   padding: 0 15px; }
#caption .title br							{ display: none; }

#neomask                                    { flex-direction: column }
#searchForm 								{ display: none; width: calc(100% - 30px); background-color: #fafafa; box-shadow: 0 0 15px 0 rgb(41 51 88 / 10%); border-radius: 32px; position: fixed; top: 15px; right: 15px; bottom: 15px; left: 15px; z-index: 6; overflow: hidden; }
#searchForm .container						{ display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 30px 8px; }
#searchForm a.searchFormClose				{ display: flex; }
#searchForm a.searchFormClose span			{ background-color: var(--color-light-blue-48); border-radius: 50%; }
#searchForm a.searchFormClose img			{ width: 32px; height: 32px; }
#searchForm .field							{ position: static; width: 100% !important; padding: 15px 34px !important; }
#searchForm .field label 					{ color: var(--text-primary-solid-64); }
#searchForm .field .form-control			{ border-color: #9B9893; color: var(--title-black-color); }
#searchForm .field .form-control::placeholder { color: var(--text-primary-solid-32); }
#searchForm .field .popups					{ height: 100%; margin-top: 0; padding: 30px 30px; border-radius: 32px; top: 0; left: 0; transform: translateX(0%); }
#searchForm .field .popups .calendar		{ width: 100%; }
#searchForm .field .popups .calendar .daterangepicker .drp-calendar.left { float: none; margin-right: auto; margin-left: auto; }
#searchForm .field .popups .roomsbox		{ width: 100%; max-height: 237px; padding-right: 7px; }
#searchForm .field .popups .roomsbox:has(~ .addRoom) { margin-top: auto; }
#searchForm .field .popups .addRoom			{ margin-bottom: auto; }
#searchForm .field.search 					{ text-align: center; }
#searchForm .field.search button 			{ border-color: var(--text-primary-solid-64); background-color: transparent; color: var(--text-primary-solid-64); }
#searchForm .field.search button:hover 		{ border-color: var(--color-base-blue);	background-color: var(--color-base-blue);	color: var(--text-white);	text-decoration: none; }

#benefitsSec .benefitsBox 					{ width: 100%; display: flex; align-items: flex-start; flex-direction: column; padding-left: 0; padding-right: 0; }
#benefitsSec .benefitsBox .content 			{ width: 100%; margin-bottom: 45px; padding-left:0px; }
#benefitsSec .benefitsBox .content span.title:not(:is(.modalDesign *)) { margin-bottom: 30px; }
#benefitsSec .benefitsBox .content span.title:not(:is(.modalDesign *)) br { display: none; }
#benefitsSec .benefitsBox .content p:not(:is(.modalDesign *)) 		{ width: 100%; margin: 0 0 30px 0;   }

#benefitsSec .benefitsBox .imageBox 		{ width: 100%; flex-direction: row;}
#benefitsSec .benefitsBox .imageBox .benefitsIcon { width: min(45%, 172px); padding: 16px 0px; }

#introductionSec 							{ padding-top: var(--space-between-section); padding-bottom: calc(var(--space-between-section) + 40px); --circleHalfWidth: 80%;}
#introductionSec .introductionBox 			{ gap: 46px; flex-direction: column-reverse; }
#introductionSec .introductionBox .content 	{ margin-bottom: 0; }
#introductionSec .introductionBox .content h1:not(:is(.modalDesign *)) { margin-bottom: 30px;   }
#introductionSec .introductionBox .content h2:not(:is(.modalDesign *)), #introductionSec .introductionBox .content p:not(:is(.modalDesign *)) { width: 100%; }
#introductionSec .introductionBox .image .swiperNav	{ top: 100%; justify-content: center; gap: 12px; padding-top: 24px;}
#introductionSec .introductionBox .image .swiperNav	[class*=swiper-button-] { margin: 0; }
#introductionSec .introductionBox .image .swiperNav [class*=swiper-button-] {
	width: 40px;
	height: 40px;
	background-color: transparent;
	border: 1px solid var(--color-base-blue);
	border-radius: 50%;
	transition: all 0.3s ease;
	cursor: pointer;
}
#introductionSec .introductionBox .image .swiperNav [class*=swiper-button-] img {
	filter: none;
	width: 16px;
}
#introductionSec .introductionBox .image .swiperNav [class*=swiper-button-]:hover {
	background-color: var(--color-base-blue);
}
#introductionSec .introductionBox .image .swiperNav [class*=swiper-button-]:hover img {
	filter: brightness(0) invert(1);
}
#introductionSec .introductionBox .image .swiperNav [class*=swiper-button-].swiper-button-disabled {
	cursor: not-allowed;
	border-color: var(--color-border);
	opacity: 1;
}
#introductionSec .introductionBox .image .swiperNav [class*=swiper-button-].swiper-button-disabled img {
	filter: var(--color-border-filter);
}

.hotel-list-header 							{ flex-direction: column; gap: 46px; }

#roomSec 									{ padding-top: 64px; padding-bottom: 0px; }
#roomSec .contentBox 						{ margin-bottom: 45px; flex-direction: column; }
#roomSec .contentBox .titleBox 				{ width: 100%; }
#roomSec .contentBox .titleBox h2.h2 		{ margin-bottom: 30px;   }
#roomSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#roomSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#roomSec .imageBox 							{ width: 100%; flex-direction: column; }
#roomSec .imageBox .roomImgBox 				{ width: 100%; margin-bottom: 55px; display: flex; flex-direction: column-reverse; }
#roomSec .imageBox .roomImgBox:last-child	{ margin-bottom: 80px;}
#roomSec .imageBox .roomImgBox .info 		{ width: 100%; height: auto; padding: 16px 0 0 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#roomSec .imageBox .roomImgBox:hover:before	{ display:none; }
#roomSec .imageBox .roomImgBox .info h3.h3 	{ width: 100%; margin: 0 0 16px 0;  color: var(--title-black-color); font-weight: 400;  text-align: left;}
#roomSec .imageBox .roomImgBox .info .linkBox { justify-content: flex-start; align-items: center; }
#roomSec .imageBox .roomImgBox .info .booknow { border: 1px solid var(--text-primary-solid-64); color: var(--text-primary-solid-64); }
#roomSec .imageBox .roomImgBox .info .booknow:hover { background-color: var(--text-primary-solid-64); color: #fff; }
#roomSec .imageBox .roomImgBox .info .viewroom { color: var(--text-primary-solid-64); }
#roomSec .imageBox .roomImgBox .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#roomSec .imageBox .roomImgBox .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }

#gridTwoColsSec .contentBox 					{ margin-bottom: 45px; flex-direction: column; }
#gridTwoColsSec .contentBox .titleBox 		{ width: 100%; }
#gridTwoColsSec .contentBox .titleBox h2.h2 	{ margin-bottom: 30px;   }
#gridTwoColsSec .contentBox .content 		{ width: 100%; padding-left: 0; }
#gridTwoColsSec .contentBox .content p 		{ margin: 0 0 30px 0;   }
#gridTwoColsSec .imageBox 					{ width: 100%; flex-direction: column; }
#gridTwoColsSec .imageBox .gridItem 			{ width: 100%; }
#gridTwoColsSec .imageBox .gridItem:last-child { margin-bottom: 0px;}
#gridTwoColsSec .imageBox .gridItem .info 	{ width: 100%; height: auto; padding: 16px 0 0 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#gridTwoColsSec .imageBox .gridItem:hover:before { display:none; }
#gridTwoColsSec .imageBox .gridItem .info h3.h3 { width: 100%; margin: 0 0 16px 0;  color: var(--color-base-blue); font-weight: 400;  }
#gridTwoColsSec .imageBox .gridItem .info .booknow { border: 1px solid var(--text-primary-solid-64); color: var(--text-primary-solid-64); }
#gridTwoColsSec .imageBox .gridItem .info .booknow:hover { background-color: var(--text-primary-solid-64); color: #fff; }
#gridTwoColsSec .imageBox .gridItem .info .viewhotel { color: var(--text-primary-solid-64); }
#gridTwoColsSec .imageBox .gridItem .info .viewhotel:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#gridTwoColsSec .imageBox .gridItem .info .viewhotel:hover:after { background: rgb(115 98 73 / 10%); }
#gridTwoColsSec .imageBox .gridItem .info .viewroom { color: var(--text-primary-solid-64); }
#gridTwoColsSec .imageBox .gridItem .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#gridTwoColsSec .imageBox .gridItem .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }

#galleryCollectionSec 									{ padding-top: 64px; padding-bottom: 0px; }
#galleryCollectionSec .contentBox 						{ margin-bottom: 45px; flex-direction: column; }
#galleryCollectionSec .contentBox .titleBox 				{ width: 100%; }
#galleryCollectionSec .contentBox .titleBox .h2 		{ margin-bottom: 30px;   }
#galleryCollectionSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#galleryCollectionSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#galleryCollectionSec .imageBox 							{ width: 100%; flex-direction: column; }
#galleryCollectionSec .imageBox .roomImgBox 				{ width: 100%; margin-bottom: 55px; display: flex; flex-direction: column-reverse; }
#galleryCollectionSec .imageBox .roomImgBox:last-child	{ margin-bottom: 80px;}
#galleryCollectionSec .imageBox .roomImgBox .info 		{ width: 100%; height: auto; padding: 16px 0 0 0; position: relative; justify-content: center; align-items: flex-start; flex-direction: column; }
#galleryCollectionSec .imageBox .roomImgBox:hover:before	{ display:none; }
#galleryCollectionSec .imageBox .roomImgBox .info h3.h3 	{ width: 100%; margin: 0 0 16px 0;  color: var(--title-black-color); font-weight: 400;  text-align: left;}
#galleryCollectionSec .imageBox .roomImgBox .info .linkBox { justify-content: flex-start; align-items: center; }
#galleryCollectionSec .imageBox .roomImgBox .info .booknow { border: 1px solid var(--text-primary-solid-64); color: var(--text-primary-solid-64); }
#galleryCollectionSec .imageBox .roomImgBox .info .booknow:hover { background-color: var(--text-primary-solid-64); color: #fff; }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom { color: var(--text-primary-solid-64); }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom:after { background: rgb(115 98 73 / 10%); width: 40px; height: 40px; }
#galleryCollectionSec .imageBox .roomImgBox .info .viewroom:hover:after { background: rgb(115 98 73 / 10%); }

#facilitiesSec								{ padding-top: 64px; padding-bottom: 64px; }
#facilitiesSec .contentBox 					{ margin-bottom: 46px; }
#facilitiesSec .contentBox h2.h2			{   text-align: center;}
#facilitiesSec .contentBox p 				{ margin-top: 32px; width: 100%; margin: 0 0 32px 0;   }
#facilitiesSec .contentBox .moreinfo 		{ padding: 8px 30px 8px 15px; font-size: 14px; line-height: 24px; }
#facilitiesSec .contentBox .moreinfo:after 	{ width: 40px; height: 40px; }
#facilitiesSec .facilitiGridBox 			{ display: none; }
#facilitiesSec .facilities					{ display: block; }
#facilitiesSec .facilities-slider .swiper-slide picture img { height: 344px; }
#facilitiesSec .facilities-slider .swiper-slide h3.h3 { text-align: center; margin: 16px 0 16px 0; }
#facilitiesSec .facilities-slider .swiper-slide p { display: none; }
#facilitiesSec .facilities-slider .swiper-slide .moreinfo { display: table; margin: 0 auto; }
#facilitiesSec .swiperNav [class*=swiper-button-] { width: 40px; height: 40px; }
#facilitiesSec .swiperNav [class*=swiper-button-] img { width: 16px; }
#facilitiesSec .swiperNav .swiper-button-prev { margin-left: 0; }
#facilitiesSec .swiperNav .swiper-button-next { margin-right: 0; }

#othersSec									{ padding-top: 64px; }
#othersSec .h3								{ margin: 0 0 0 0; padding: 0 15px;   }
#othersSec .image .desktop					{ display: none; }
#othersSec .image .mobile					{ display: block; }
#othersSec .info 					{ width: 100%; padding: 45px 15px; top: 70px; }
#othersSec .info .discoverhotel 		{ margin: 10px 0 0 0; }

#ourGallerySec								{ padding-top: 64px; padding-bottom: 64px; }
#ourGallerySec .gallery 					{ padding: 0 15px; justify-content: space-between; }
#ourGallerySec .gallery .content 			{ order: 1; width: 100%; padding: 0 0%; margin-bottom: 46px; }
#ourGallerySec .gallery .content h2.h2		{ margin-bottom: 32px;   }
#ourGallerySec .gallery .content .viewgallery { margin: 10px 0 0 0; }
#ourGallerySec .gallery .image1 			{ order: 2; width: 48%; }
#ourGallerySec .gallery .image2				{ order: 3; width: 48%; }

#beBlueSec									{ padding-block: var(--space-between-section); gap: 40px; }
#beBlueSec > .row > .container > .row		{ gap: 40px; }
#beBlueSec .container .row					{ flex-direction: column-reverse; }
#beBlueSec .content 						{ flex: 0 0 100%; max-width: 100%; }
#beBlueSec .image 							{ flex: 0 0 100%; max-width: 100%; }
#beBlueSec .content .belogo					{ margin: 0 0 16px 0;}
#beBlueSec .content h2.h2					{ margin-bottom: 32px;   }
#beBlueSec .content p 						{ margin: 0 0 20px 0; width: 100%;   }
#beBlueSec .beBlueRow:not(.reverse) .content > * { padding-left: 0; }

#followUsSec								{ padding-top: 64px; padding-bottom: 64px; }
#followUsSec .topContent 					{ margin: 0 auto 46px auto; }
#followUsSec .followus-slider				{ overflow: visible; padding: 56px 30px 0 30px; margin-top: 0; }
#followUsSec .moreinfo 						{ margin: 46px auto 0; }

#newsletterSec								{ padding-top: 64px; padding-bottom: 64px; }
#newsletterSec:before						{ width: 600px; height: 600px; top: 35%; left: -90%; }
#newsletterSec .newsletter					{ flex-direction: column; gap: 8px; align-items: flex-start; padding: 0 0rem; }
#newsletterSec .content						{ width: 100%; }
#newsletterSec .content h3.h3				{ margin-bottom: 32px;   }
#newsletterSec .content h3.h3 strong 		{ font-style: italic; }
#newsletterSec .content p					{ margin-left: 0;  }
#newsletterSec .newsform					{ width: 100%; padding-top: 0;}
#newsletterSec .newsform .form-group 		{ flex-direction: column; align-items: flex-start; }
#newsletterSec .newsform .form-group .form-control 			{ width:100%;  }
#newsletterSec .newsform .form-group label.checkbox 		{ padding-left: 30px;   }

#speakSec 									{ padding-top: 64px; padding-bottom: 64px; }
#speakSec .contentBox 						{ padding-left: 15px; padding-right: 15px; }
#speakSec .contentBox h3.h3					{ margin-bottom: 30px;   }
#speakSec .contentBox h3.h3 strong 			{ font-style: italic; }
#speakSec .contentBox p 					{ margin: 0 0 20px 0; width: 100%;   }
#speakSec .contentBox .moreinfo				{ margin: 15px 0 0 10px; padding: 10px 30px 10px 15px; font-size: 14px; line-height: 24px; }
#speakSec .contentBox .moreinfo:after 		{ width: 40px; height: 40px; }


/*----------------- Modal Design -----------------*/
.modalDesign::-webkit-scrollbar				{ width: 0px; }
.modalDesign .modal-content 				{ border-radius: 32px; }
.modalDesign .modal-body					{ padding: 60px 24px 32px 24px; }
.modalDesign .close							{ margin: -32px auto 8px auto; float: inherit; }
.modalDesign .modal-body ul.featureIcons 	{ align-items: flex-start; row-gap: 16px; column-gap: 16px; margin: 32px 0 32px 0; }
.modalDesign .modal-body ul.featureIcons li { gap: 4px;   flex-direction: column; }

/*---------------------- Inner Page -----------------------*/
#innerBanner > .container .bookBtnBox 		{ display: block; }
#innerBanner, #innerBanner .inner-slider-video, #innerBanner .inner-slider { z-index: inherit; }
#innerBanner .inner-slider .swiperNav		{ display: none; }
#innerBanner .inner-slider .swiperCountDots	{ bottom: 40px; right: 15px; left: 15px; }
#innerBanner .inner-slider .swiperCountDots .swiper-pagination { position: relative; top: -14px; }
#innerBanner .inner-slider .swiperCountDots .current-slide { position: relative; top: -14px; }
#innerBanner .inner-slider .swiperCountDots .total-slides { position: relative; top: -14px; }
#bookForm 									{ display: none; width: calc(100% - 30px); background-color: #fafafa; box-shadow: 0 0 15px 0 rgb(41 51 88 / 10%); border-radius: 32px; position: fixed; top: 15px; right: 15px; bottom: 15px; left: 15px; z-index: 6; overflow: hidden; }
#bookForm .container						{ display: flex; flex-direction: column; justify-content: center; height: 100%; width:100%; padding: 80px 30px 30px 30px; }
#bookForm a.bookFormClose					{ display: flex; left: 0; right: 0; top: 10%; margin: auto; align-items: center; grid-gap: 10px; justify-content: center; flex-direction: column; }
#bookForm a.bookFormClose span img			{ filter: brightness(0) invert(1); }
#bookForm .field							{ position: static; width: 100% !important; padding: 21px 30px 22px 30px!important; }
#bookForm .field label 						{ color: var(--text-primary-solid-64); }
#bookForm .field .form-control				{ border-color: #9B9893; color: var(--title-black-color); }
#bookForm .field .form-control::placeholder { color: var(--text-primary-solid-32); }
#bookForm .field .popups					{ height: 100%; margin-top: 0; padding: 30px 30px; border-radius: 32px; top: 0; left: 0; transform: translateX(0%); }
#bookForm .field .popups .calendar			{ width: 100%; }
#bookForm .field .popups .calendar .daterangepicker .drp-calendar.left { float: none; margin-right: auto; margin-left: auto; }
#bookForm .field .popups .roomsbox			{ width: 100%; max-height: 237px; padding-right: 7px; }
#bookForm .field .popups .roomsbox:has(~ .addRoom) { margin-top: auto; }
#bookForm .field .popups .addRoom			{ margin-bottom: auto; }
#bookForm .field.bookBtn 					{ text-align: center; }
#bookForm .field.bookBtn .bookButton		{ border-color: var(--text-primary-solid-64); background-color: transparent; color: var(--text-primary-solid-64); }
#bookForm .field.bookBtn .bookButton:hover 	{ background-color: var(--title-black-color); color: var(--text-white); }
#breadCrumb									{ padding: 24px 0; }

/*---------------------- Rooms Page -----------------------*/
#listSec .contentBox 						{ margin-bottom: 56px; flex-direction: column; }
#listSec .contentBox .titleBox 			{ width: 100%; }
#listSec .contentBox .titleBox .h2 		{ margin-bottom: 32px;   }
#listSec .contentBox .content 				{ width: 100%; padding-left: 0; }
#listSec .contentBox .content p 			{ margin: 0 0 30px 0;   }
#listSec .roomsBox .rooms:last-child 		{ margin-bottom: 0px; }
#listSec .roomsBox .rooms .image 			{ width: 100%;}
#listSec .roomsBox .rooms .image .swiperNav { position: relative; margin-top: 24px; }
#listSec .roomsBox .rooms .image .swiperCountDots { margin-top: 16px; }

#listSec .roomsBox .rooms .content 		{ width: 100%; padding: 24px 0px 0 0px; }
#listSec .roomsBox .rooms .content .h2:not(:is(.modalDesign *)), #listSec .roomsBox .rooms .content .h3:not(:is(.modalDesign *)) { margin: 0 0 32px 0;   }
#listSec .roomsBox .rooms .content ul:not(:is(.modalDesign *)) 		{ align-items: flex-start; gap: 32px; grid-row-gap: 16px; margin: 0 0 32px 0; }
#listSec .roomsBox .rooms .content ul:not(:is(.modalDesign *)) li 	{ gap: 4px; flex-direction: column; justify-content: flex-start; flex: 0 0 calc(25% - 24px); }


#interestedInSec 							{ padding-top: 64px; padding-bottom: 0px; }
#interestedInSec .contentBox 				{ margin-bottom: 56px; }
#interestedInSec .contentBox .h4 			{ font-size: 50px; line-height: 60px; text-align: center; }
#interestedInSec .contentBox p 				{ width: 100%; }
#interestedInSec .interestedIn				{ --circleHalfWidth: 274px; margin-top: 0px; margin-bottom: 64px; }
#interestedInSec .interestedIn:before		{ display: none; }
#interestedInSec .interestedIn:after		{ display: none; }
#interestedInSec .interestedIn .circleHalf	{ display: none; }
#interestedInSec .interestedIn-slider 		{ overflow: visible; padding: 56px 30px 0 30px; margin-top: 0;}
#interestedInSec .interestedIn-slider .swiper-slide { text-align: center; }
#interestedInSec .interestedIn-slider .swiper-slide picture img { height: 344px; }
#interestedInSec .interestedIn-slider .swiper-slide span.title { margin: 16px 0 0 0; }
#interestedInSec .interestedIn-slider .swiper-slide .moreinfo { margin: 32px 0 0 0; }

/*---------------------- Default Page -----------------------*/
#sedRhoncusSec.intro-no-text 				{ padding-bottom: 0; }
#sedRhoncusSec .content 					{ width: 100%; padding-left: 0px; padding-right: 0px; }
#sedRhoncusSec .content h1.h1:not(:is(.modalDesign *)) 				{ margin: 0 0 32px 0;   }
#sedRhoncusSec .content p:not(:is(.modalDesign *)) 					{ margin: 0 0 16px 0; padding: 0 5%; }
#sedRhoncusSec .sedSliderSec				{ margin: 0 -15px 45px -15px; margin-top: 112px; }
#sedRhoncusSec .sedSliderSec .center-slider .swiper-slide { margin: 39px 0; }
#sedRhoncusSec .sedSliderSec .center-slider .swiper-slide-active { margin: 0; }
#sedRhoncusSec .sedSliderSec .center-slider img { width: 100%; }
#sedRhoncusSec .sedSliderSec .center-slider .swiper-slide-active img { max-width: calc(100% + 64px); width: calc(100% + 64px); }
#sedRhoncusSec .sedSliderSec .center-slider p { margin: 0 -32px; margin-top: 16px; padding: 0 16px; }
#sedRhoncusSec .sedSliderSec .swiperNav 	{ justify-content: center; top: calc(0% - 16px); transform: translateY(-100%); }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] { width: 40px; height: 40px; }
#sedRhoncusSec .sedSliderSec .swiperNav [class*=swiper-button-] img { width: 16px; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-prev { margin-left: 0; }
#sedRhoncusSec .sedSliderSec .swiperNav .swiper-button-next { margin-right: 0; }
#vivamusSec 								{ padding-top: 80px; padding-bottom: 80px; }
#vivamusSec .vivamusBoxSec .titleBox		{ width: 100%; }
#vivamusSec .vivamusBoxSec .titleBox h3.h3 	{ margin: 0 0 64px 0;   }
#vivamusSec .contentBox 					{ width: 96%; grid-gap: 48px; flex-direction: column; }
#vivamusSec .contentBox .contentLtBox 		{ width: 100%; border-right: 0; border-bottom: 1px solid #9B9893; padding-right: 0px; padding-bottom: 32px; }
#vivamusSec .contentBox .contentRtBox 		{ width: 100%; }
#vivamusSec .contentBox .contentLink 		{ margin-top: 16px; }
#vivamusSec .contentBox .contentLink .viewMenu { margin-right: 0; margin-bottom: 16px; }
#pirateSec .pirateBox .container			{ flex-direction: column; gap: 24px; }
#pirateSec .pirateBox:nth-child(even) .container { flex-direction: column; }
#pirateSec .pirateBox .image				{ width: 100%; }
#pirateSec .pirateBox .image:after			{ display: none; height: calc(100% + 20px); border-top-left-radius: 230px; border-top-right-radius: 230px; top: -10px; right: -10px; }
#pirateSec .pirateBox:nth-child(even) .image:after { left: -30px; }
#pirateSec .pirateBox .content				{ width: 100%; padding: 0; }
#pirateSec .pirateBox:nth-child(even) .content { padding: 0; }

/*---------------------- My Insotel Page -----------------------*/
#myInsotelForm 								{ padding-top: 80px; padding-bottom: 70px; }
#myInsotelForm .myInsotelBox 				{ gap: 10%; padding: 0 0rem; }
#myInsotelForm .myInsotelform 				{ width: 100%; padding: 0 16px; }
#myInsotelForm .myInsotelform .form-group 	{ grid-gap: 32px; margin-top: 32px; flex-direction: column; }
#myInsotelForm .myInsotelform .form-group .form-control { width: 100%; }
#myInsotelForm .myInsotelform .form-group .sendBtn { width: auto; display: inline-flex; margin: 8px 0 0 0;}

/*---------------------- Contact Page -----------------------*/
#contactSec 								{ padding-block: var(--space-between-sections-small); }
#contactSec .contactBox 					{ gap: 5%; flex-direction: column; }
#contactSec .content 						{ width: 100%; padding-bottom: 32px; }
#contactSec .content h1.h1:not(:is(.modalDesign *)) 					{ margin: 0 0 32px 0;   }
#contactSec .content p:not(:is(.modalDesign *)) 						{ width: 100%;   }
#contactSec .contactform 					{ width: 100%; padding-top: 32px; border-left: 0px; border-top: 1px solid var(--color-light-blue-32); padding-left: 11px; padding-right: 11px; }
#contactSec .contactform .form-group 		{ flex-direction: column; }
#contactSec .contactform .form-group .form-control { width: 100%; }
#contactSec .contactform .form-group .sendBtn { display: inline-flex; width: fit-content; margin: 8px 0 0 0; }
#contactSec .informationSec 				{ width: 100vw; padding: 80px 15px; margin: 80px -15px 0 -15px; }
#contactSec .informationBox 				{ flex-direction: column; }
#contactSec .informationBox:after 			{ width: 100%; height: 1px; margin-top: 4px; }
#contactSec .informationBox .contentBox a.phoneLink:last-child { margin-bottom:0; }
#contactSec .informationBox .contentBox:first-child { margin-bottom:48px; }
#contactSec .informationBox .contentBox:last-child { margin-top:48px; }

}



/* #Mobile (Landscape)
================================================== */
/* Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

:root										{ --container-width: 100%; }
.container									{ /*width: 540px;*/ max-width: 100%; padding: 0 15px; }

#searchForm a.searchFormClose 				{ top: 20px; right: 20px; left: auto; }

#searchForm .field 							{ padding: 8px 100px !important; }


/*----------------- Inner Pages -----------------*/
#innerBanner, #innerBanner .inner-slider	{ height: 100dvh; }


#bookForm a.bookFormClose 					{ left: auto; right: 30px; top: 10%; flex-direction: row; }
#bookForm .container 						{ width: 70%; padding: 30px 30px 30px 30px; }
#bookForm .field 							{ padding: 15px 30px 15px 30px !important; }

#vivamusSec .contentBox .contentLink			{ margin-bottom: 16px; }
#vivamusSec .contentBox .contentLink .viewMenu 	{ margin-right: 16px; margin-bottom: 0; }

/*---------------------- Contact Page -----------------------*/
#contactSec .informationBox:after 			{ margin-top: 8px; }


#beBlueSec .content 						{ flex: 0 0 100%; max-width: 100%; }
#beBlueSec .image 							{ flex: 0 0 100%; max-width: 100%; }

}