@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: 1601px) and (max-width: 2700px) {

:root												{ --container-width: 1760px; }
.container											{ max-width: 1760px; }

}



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

:root												{ --container-width: 1500px; }
.container											{ max-width: 1500px; }

#header 											{ padding: 24px 50px; }

#slider > .container 								{ max-width: calc(100% - 50px - 50px); }
#slider .home-slider .swiperCountDots 				{ right: 50px; }

#roomsSec .roomsBox .rooms .titleSmall 				{ padding: 88px 50px; }
#roomsSec .roomsBox .rooms .titleBox 				{ padding: 100px 50px; padding-bottom: 0; }
#roomsSec .roomsBox .rooms .infoBox 				{ gap: 50px; padding: 100px 50px; padding-bottom: 45px; }

#noCodeSec .nocode-slider .swiper-slide .content 	{ max-width: 900px; padding: 100px 50px; }
#noCodeSec .nocode-slider .swiper-slide .content h2.h2 { margin: 0 0 28px 0; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul { max-height: 132px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul.open { max-height: 212px; }

#servicesSec .content 								{ max-width: 900px; padding: 64px 50px; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 20px 0 20px 20px; font-size: 1.25rem; line-height: 1.5rem; }
#servicesSec .content .accordion .accordion-item .accordion-body { max-height: 140px; padding: 0 34px 20px 20px; }
#servicesSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.25rem; line-height: 1.5rem; }
#servicesSec .content .accordion .accordion-item .accordion-body p { font-size: 1.25rem; line-height: 1.5rem; }
#servicesSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.25rem; line-height: 1.5rem; }

#faqSec .titleBox 									{ padding: 88px 50px; }
#faqSec .content 									{ max-width: 900px; padding: 64px 50px; }
#faqSec .content:has(.accordion-button:not(.collapsed)) { max-width: 1342px; }
#faqSec .content .accordion 						{ max-width: 400px; }
#faqSec .content .accordion:has(.accordion-button:not(.collapsed)) { max-width: 986px; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 20px 0 20px 20px; font-size: 1.25rem; line-height: 1.5rem; }
#faqSec .content .accordion .accordion-item .accordion-body { max-height: 452px; padding: 0 34px 20px 20px; }
#faqSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.25rem; line-height: 1.5rem; }
#faqSec .content .accordion .accordion-item .accordion-body p { font-size: 1.25rem; line-height: 1.5rem; }
#faqSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.25rem; line-height: 1.5rem; }

#locationSec .content 								{ max-width: 900px; padding: 64px 50px; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 20px 0 20px 20px; font-size: 1.25rem; line-height: 1.5rem; }
#locationSec .content .accordion .accordion-item .accordion-body { max-height: 228px; padding: 0 34px 20px 20px; }
#locationSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.25rem; line-height: 1.5rem; }
#locationSec .content .accordion .accordion-item .accordion-body p { font-size: 1.25rem; line-height: 1.5rem; }
#locationSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.25rem; line-height: 1.5rem; }

#footer .footerBox 									{ padding: 0 50px; }
.footerCertificate 									{ gap: 30px; padding: 24px 50px; }

/*----------------- Text Page -----------------*/
.text-container 									{ padding: 60px 50px 80px 50px; }

}



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

:root												{ --container-width: 1170px; --swiper-navigation-size: 50px; }
.container											{ max-width: 1170px; }

.swiperNav [class*=swiper-button-], 
.swiperNavDots [class*=swiper-button-] 				{ width: 50px; height: 50px; }
.swiperNav [class*=swiper-button-] img, 
.swiperNavDots [class*=swiper-button-] img 			{ width: 17px; }

#intro .action .onoffswitch .track 					{ width: 140px; height: 70px; -webkit-mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); }
#intro .action .onoffswitch input:checked + .track 	{ -webkit-mask-position: 70px 0; mask-position: 70px 0; }
#intro .action .onoffswitch .claimText 				{ font-size: 2.1875rem; }

#header 											{ padding: 24px 32px; }
#header .mainMenu ul.menu 							{ gap: 17px; }
#header .iconBtns 									{ padding-left: 10px; margin-left: 10px; }
#header .claimBtn 									{ margin-left: 10px; }

#slider > .container 								{ max-width: calc(100% - 32px - 32px); }
#slider .home-slider .swiperCountDots 				{ right: 32px; }

#caption .h1 										{ font-size: 2.9375rem; }

#roomsSec .roomsBox .rooms .titleSmall 				{ padding: 70px 32px; }
#roomsSec .roomsBox .rooms .titleBox 				{ gap: 40px; padding: 70px 32px; padding-bottom: 0; }
#roomsSec .roomsBox .rooms .titleBox h2.h2 			{ font-size: 2.625rem; line-height: 2.9375rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox 	{ gap: 20px; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .bookNowBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .ViewBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .infoBox 				{ gap: 20px; padding: 70px 32px; padding-bottom: 45px; }
#roomsSec .roomsBox .rooms .infoBox .info p 		{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info .title 	{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info ul 		{ -moz-columns: 4; -webkit-columns: 4; column-count: 4; column-gap: 8px; }
#roomsSec .roomsBox .rooms .infoBox .info ul > li 	{ padding-left: 30px; font-size: 1.125rem; line-height: 1.4375rem; }

#noCodeSec .nocode-slider .swiper-slide .caption 	{ padding: 12px 32px; font-size: 1rem; line-height: 1.75rem; }
#noCodeSec .nocode-slider .swiper-slide .caption strong { font-size: 1.5625rem; }
#noCodeSec .nocode-slider .swiper-slide .content 	{ max-width: 900px; padding: 70px 32px; }
#noCodeSec .nocode-slider .swiper-slide .content h2.h2 { margin: 0 0 16px 0; font-size: 2rem; line-height: 2.3125rem; }
#noCodeSec .nocode-slider .swiper-slide .content p 	{ font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .codes { padding: 37px 15px 15px 15px; background-size: 52px, cover; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul { max-height: 92px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul.open { max-height: 182px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul li { padding-left: 20px; font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .seemoreBtn { padding: 10px 20px; font-size: 1.25rem; line-height: 1.5rem; }

#servicesSec .content 								{ max-width: 900px; padding: 70px 32px; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#servicesSec .content .accordion .accordion-item .accordion-body { max-height: 120px; padding: 0 15px 10px 15px; margin-right: 20px; }
#servicesSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#faqSec .titleBox 									{ padding: 70px 32px; }
#faqSec .titleBox .title 							{ font-size: 6.2125rem; letter-spacing: -5.5rem; }
#faqSec .content 									{ max-width: 900px; padding: 70px 32px; }
#faqSec .content:has(.accordion-button:not(.collapsed)) { max-width: 1024px; }
#faqSec .content .accordion 						{ max-width: 400px; }
#faqSec .content .accordion:has(.accordion-button:not(.collapsed)) { max-width: 786px; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#faqSec .content .accordion .accordion-item .accordion-body { max-height: 220px; padding: 0 15px 10px 15px; margin-right: 20px; }
#faqSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#locationSec .caption 								{ max-width: 592px; top: 70px; }
#locationSec .caption h2.h2 						{ margin: 0 0 20px 0; font-size: 2rem; line-height: 2.3125rem; }
#locationSec .caption p 							{ margin: 0 0 30px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#locationSec .caption p br 							{ display: block; }
#locationSec .caption .lostFoundBtn 				{ padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#locationSec .content 								{ max-width: 900px; padding: 70px 32px; }
#locationSec .content .infoCancel 					{ margin: 0 0 20px 15px; font-size: 1.0625rem; line-height: 1.5rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#locationSec .content .accordion .accordion-item .accordion-body { max-height: 148px; padding: 0 15px 10px 15px; margin-right: 20px; }
#locationSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .location-slider .swiper-slide .description { padding: 12px 32px; font-size: 1rem; line-height: 1.75rem; }
#locationSec .location-slider .swiper-slide .description strong { font-size: 1.5625rem; }

#footer .footerBox 									{ padding: 0 32px; }
#footer .footerTop ul.info 							{ padding: 0; }
#footer .footerTop .title 							{ font-size: 1.5rem; line-height: 1.8125rem; }
#footer .footerTop .subtitle 						{ font-size: 1.5rem; line-height: 1.8125rem; }
.footerCertificate 									{ gap: 30px; padding: 24px 32px; }

/*----------------- Inner Pages -----------------*/
#innerBanner > .container 							{ max-width: calc(100% - 32px - 32px); }

/*----------------- Text Page -----------------*/
.text-container 									{ padding: 60px 32px 80px 32px; }

}



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

:root												{ --container-width: 960px; --swiper-navigation-size: 50px; }
.container											{ max-width: 960px; }

.swiperNav [class*=swiper-button-], 
.swiperNavDots [class*=swiper-button-] 				{ width: 50px; height: 50px; }
.swiperNav [class*=swiper-button-] img, 
.swiperNavDots [class*=swiper-button-] img 			{ width: 17px; }

#intro .action .onoffswitch .track 					{ width: 140px; height: 70px; -webkit-mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); }
#intro .action .onoffswitch input:checked + .track 	{ -webkit-mask-position: 70px 0; mask-position: 70px 0; }
#intro .action .onoffswitch .claimText 				{ font-size: 2.1875rem; }

#header 											{ padding: 24px 32px; }
#header .mainMenu 									{ display: none; }
#header .rightNav 									{ margin-right: 24px; margin-left: auto; }
#header .hamburger 									{ display: flex; }

#slider > .container 								{ max-width: calc(100% - 32px - 32px); }
#slider .home-slider .swiperCountDots 				{ right: 32px; }

#caption .h1 										{ font-size: 2.9375rem; }

#roomsSec .roomsBox .rooms .titleSmall 				{ padding: 70px 32px; }
#roomsSec .roomsBox .rooms .titleBox 				{ gap: 40px; padding: 70px 32px; padding-bottom: 0; }
#roomsSec .roomsBox .rooms .titleBox h2.h2 			{ font-size: 2.625rem; line-height: 2.9375rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox 	{ gap: 20px; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .bookNowBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .ViewBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .infoBox 				{ gap: 20px; padding: 70px 32px; padding-bottom: 45px; }
#roomsSec .roomsBox .rooms .infoBox .info p 		{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info .title 	{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info ul 		{ -moz-columns: 3; -webkit-columns: 3; column-count: 3; column-gap: 8px; }
#roomsSec .roomsBox .rooms .infoBox .info ul > li 	{ padding-left: 30px; font-size: 1.125rem; line-height: 1.4375rem; }

#noCodeSec .nocode-slider .swiper-slide .caption 	{ padding: 12px 32px; font-size: 1rem; line-height: 1.75rem; }
#noCodeSec .nocode-slider .swiper-slide .caption strong { font-size: 1.5625rem; }
#noCodeSec .nocode-slider .swiper-slide .content 	{ max-width: 900px; padding: 70px 32px; }
#noCodeSec .nocode-slider .swiper-slide .content h2.h2 { margin: 0 0 16px 0; font-size: 2rem; line-height: 2.3125rem; }
#noCodeSec .nocode-slider .swiper-slide .content p 	{ font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .codes { padding: 37px 15px 15px 15px; background-size: 52px, cover; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul { max-height: 92px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul.open { max-height: 182px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul li { padding-left: 20px; font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .seemoreBtn { padding: 10px 20px; font-size: 1.25rem; line-height: 1.5rem; }

#servicesSec .content 								{ max-width: 900px; padding: 70px 32px; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#servicesSec .content .accordion .accordion-item .accordion-body { max-height: 120px; padding: 0 15px 10px 15px; margin-right: 20px; }
#servicesSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#faqSec .titleBox 									{ padding: 70px 32px; }
#faqSec .titleBox .title 							{ font-size: 6.2125rem; letter-spacing: -5.5rem; }
#faqSec .content 									{ max-width: 900px; padding: 70px 32px; }
#faqSec .content:has(.accordion-button:not(.collapsed)) { max-width: 1024px; }
#faqSec .content .accordion 						{ max-width: 400px; }
#faqSec .content .accordion:has(.accordion-button:not(.collapsed)) { max-width: 786px; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#faqSec .content .accordion .accordion-item .accordion-body { max-height: 220px; padding: 0 15px 10px 15px; margin-right: 20px; }
#faqSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#locationSec .caption 								{ max-width: 592px; top: 70px; }
#locationSec .caption h2.h2 						{ margin: 0 0 20px 0; font-size: 2rem; line-height: 2.3125rem; }
#locationSec .caption p 							{ margin: 0 0 30px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#locationSec .caption p br 							{ display: block; }
#locationSec .caption .lostFoundBtn 				{ padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#locationSec .content 								{ max-width: 900px; padding: 70px 32px; }
#locationSec .content .infoCancel 					{ margin: 0 0 20px 15px; font-size: 1.0625rem; line-height: 1.5rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#locationSec .content .accordion .accordion-item .accordion-body { max-height: 148px; padding: 0 15px 10px 15px; margin-right: 20px; }
#locationSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .location-slider .swiper-slide .description { padding: 12px 32px; font-size: 1rem; line-height: 1.75rem; }
#locationSec .location-slider .swiper-slide .description strong { font-size: 1.5625rem; }

#footer .footerBox 									{ padding: 0 32px; }
#footer .footerTop ul.info 							{ padding: 0; }
#footer .footerTop .title 							{ font-size: 1.5rem; line-height: 1.8125rem; }
#footer .footerTop .subtitle 						{ font-size: 1.5rem; line-height: 1.8125rem; }
.footerCertificate 									{ gap: 30px; padding: 24px 32px; }

/*----------------- Inner Pages -----------------*/
#innerBanner > .container 							{ max-width: calc(100% - 32px - 32px); }

/*----------------- Text Page -----------------*/
.text-container 									{ padding: 60px 32px 80px 32px; }

}



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

:root												{ --container-width: 100%; --swiper-navigation-size: 40px; }
.container											{ max-width: 100%; padding: 0 15px; }

.swiperNav [class*=swiper-button-], 
.swiperNavDots [class*=swiper-button-] 				{ width: 40px; height: 40px; }
.swiperNav [class*=swiper-button-] img, 
.swiperNavDots [class*=swiper-button-] img 			{ width: 17px; }

#intro .action .onoffswitch .track 					{ width: 140px; height: 70px; -webkit-mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); }
#intro .action .onoffswitch input:checked + .track 	{ -webkit-mask-position: 70px 0; mask-position: 70px 0; }
#intro .action .onoffswitch .claimText 				{ font-size: 2.1875rem; }

#header 											{ padding: 15px 15px; }
#header .mainMenu 									{ display: none; }
#header .rightNav 									{ display: none; }
#header .hamburger 									{ display: flex; }

#slider, #slider .home-slider						{ width: 100%; height: 100dvh; z-index: inherit; }
#slider > .container 								{ max-width: calc(100% - 15px - 15px); }
#slider > .container .bookBtnBox 					{ display: block; }
#slider .home-slider .swiperNav						{ display: none; }
#slider .home-slider .swiperCountDots 				{ pointer-events: inherit; bottom: 70px; right: 15px; left: 15px; }
#slider .home-slider .swiperCountDots [class*=swiper-button-] { display: flex; }

#caption 											{ bottom: 130px; }
#caption .h1 										{ font-size: 2.625rem; }
#caption .h2 										{ font-size: 1rem; line-height: 1.25rem; }
#scrollDown 										{ width: 100%; }

#roomsSec .roomsBox 								{ flex-direction: column; }
#roomsSec .roomsBox .rooms 							{ width: 100%; }
#roomsSec .roomsBox .rooms.open 					{ width: 100%; }
#roomsSec .roomsBox .rooms.small 					{ width: 100%; }
#roomsSec .roomsBox .rooms .titleSmall 				{ padding: 50px 15px; }
#roomsSec .roomsBox .rooms .titleSmall h2.h2 		{ padding-bottom: 23px; font-size: 1.6875rem; letter-spacing: -1.2rem; }
#roomsSec .roomsBox .rooms .titleBox 				{ gap: 30px; padding: 70px 15px; padding-bottom: 0; }
#roomsSec .roomsBox .rooms .titleBox h2.h2 			{ font-size: 2.3125rem; line-height: 2.625rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox 	{ gap: 15px; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .bookNowBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .ViewBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .infoBox 				{ gap: 20px; padding: 70px 15px; padding-bottom: 45px; }
#roomsSec .roomsBox .rooms .infoBox .info p 		{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info .title 	{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info ul 		{ -moz-columns: 3; -webkit-columns: 3; column-count: 3; column-gap: 8px; }
#roomsSec .roomsBox .rooms .infoBox .info ul > li 	{ padding-left: 30px; font-size: 1.125rem; line-height: 1.4375rem; }

#noCodeSec 											{ height: 740px; }
#noCodeSec .nocode-slider .swiper-slide .caption 	{ max-width: 45%; padding: 12px 15px; font-size: 1rem; line-height: 1.75rem; }
#noCodeSec .nocode-slider .swiper-slide .caption strong { font-size: 1.5625rem; }
#noCodeSec .nocode-slider .swiper-slide .content 	{ padding: 70px 15px; }
#noCodeSec .nocode-slider .swiper-slide .content h2.h2 { margin: 0 0 16px 0; font-size: 2rem; line-height: 2.3125rem; }
#noCodeSec .nocode-slider .swiper-slide .content p 	{ font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .codes { padding: 37px 15px 15px 15px; background-size: 52px, cover; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul { max-height: 115px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul.open { max-height: 212px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul li { padding-left: 20px; font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .seemoreBtn { padding: 10px 20px; font-size: 1.25rem; line-height: 1.5rem; }

#servicesSec 										{ height: 740px; }
#servicesSec .content 								{ padding: 70px 15px; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#servicesSec .content .accordion .accordion-item .accordion-body { max-height: 220px; padding: 0 15px 10px 15px; margin-right: 20px; }
#servicesSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#faqSec 											{ height: 740px; }
#faqSec .titleBox 									{ height: auto; padding: 0; top: 35px; right: 15px; left: 15px; z-index: 3; }
#faqSec .titleBox .title 							{ margin: 0; font-size: 2.625rem; line-height: 2.9375rem; letter-spacing: 0rem; writing-mode: inherit; }
#faqSec .content 									{ max-width: 540px; padding: 100px 15px 70px 15px; }
#faqSec .content:has(.accordion-button:not(.collapsed)) { max-width: 768px; }
#faqSec .content .accordion 						{ max-width: 400px; }
#faqSec .content .accordion:has(.accordion-button:not(.collapsed)) { max-width: 676px; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#faqSec .content .accordion .accordion-item .accordion-body { max-height: 300px; padding: 0 15px 10px 15px; margin-right: 20px; }
#faqSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#postcardsSec 										{ height: 470px; }
#postcardsSec .postcardsBox 						{ grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 100%); }
#postcardsSec .postcardsBox .item 					{ display: none; }
#postcardsSec .postcardsBox .item:first-child 		{ display: flex; }

#locationSec 										{ height: 740px; }
#locationSec .caption 								{ max-width: 592px; top: 70px; }
#locationSec .caption h2.h2 						{ margin: 0 0 20px 0; font-size: 2rem; line-height: 2.3125rem; }
#locationSec .caption p 							{ margin: 0 0 30px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#locationSec .caption p br 							{ display: block; }
#locationSec .caption .lostFoundBtn 				{ padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#locationSec .content 								{ padding: 70px 15px; }
#locationSec .content .infoCancel 					{ margin: 0 0 20px 15px; font-size: 1.0625rem; line-height: 1.5rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#locationSec .content .accordion .accordion-item .accordion-body { max-height: 202px; padding: 0 15px 10px 15px; margin-right: 20px; }
#locationSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .location-slider .swiper-slide .description { max-width: 45%; padding: 12px 15px; font-size: 1rem; line-height: 1.75rem; }
#locationSec .location-slider .swiper-slide .description strong { font-size: 1.5625rem; }

#footer 											{ margin-bottom: 60px; }
#footer .footerBox 									{ padding: 0 15px; background-position: bottom -200px center; background-size: 370px; }
#footer .footerTop 									{ flex-wrap: wrap; gap: 32px; padding: 40px 0 0 0; }
#footer .footerTop .left 							{ order: 1; flex: none; align-items: flex-start; gap: 32px; width: calc(60% - 16px); text-align: left; }
#footer .footerTop .midd 							{ order: 3; align-items: center; width: 100%; text-align: center; }
#footer .footerTop .right 							{ order: 2; flex: none; align-items: flex-end; gap: 32px; width: calc(40% - 16px); text-align: right; }
#footer .footerTop ul.info 							{ padding: 0; }
#footer .footerTop .title 							{ margin-top: 0; font-size: 1.5rem; line-height: 1.8125rem; }
#footer .footerTop .subtitle 						{ font-size: 1.5rem; line-height: 1.8125rem; }
#footer .footerBottom 								{ flex-direction: column; gap: 20px; padding: 32px 0; }
#footer .footerBottom .leftText 					{ align-items: center; gap: 20px; text-align: center; }
#footer .footerBottom .rightText 					{ align-items: center; gap: 20px; text-align: center; }
#footer .footerBottom .text 						{ font-size: 1rem; line-height: 1.25rem; }
.footerCertificate 									{ flex-wrap: wrap; gap: 20px; min-height: 92px; padding: 20px 15px; }

/*----------------- Inner Pages -----------------*/
#innerBanner, #innerBanner .inner-slider			{ width: 100%; height: 100dvh; z-index: inherit; }
#innerBanner > .container 							{ max-width: calc(100% - 15px - 15px); }
#innerBanner > .container .bookBtnBox 				{ display: block; }
#innerBanner .inner-slider .swiperNav				{ display: none; }
#slider .home-slider .swiperCountDots 				{ pointer-events: inherit; bottom: 70px; right: 15px; left: 15px; }
#innerBanner .inner-slider .swiperCountDots [class*=swiper-button-] { display: flex; }

/*----------------- Text Page -----------------*/
.text-content 										{ padding-top: 80px; }
.text-container 									{ max-width: 100%; padding: 40px 15px 60px 15px; }
.text-title 										{ font-size: 2rem; }
.text-subtitle 										{ font-size: 1.25rem; margin-bottom: 32px; }
.text-body table 									{ font-size: 0.9375rem; }
.text-body table th, .text-body table td 			{ padding: 10px 12px; }
.text-body blockquote 								{ padding: 16px 20px; }

}



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

:root												{ --container-width: 100%; --swiper-navigation-size: 40px; }
.container											{ max-width: 100%; padding: 0 15px; }

.swiperNav [class*=swiper-button-], 
.swiperNavDots [class*=swiper-button-] 				{ width: 40px; height: 40px; }
.swiperNav [class*=swiper-button-] img, 
.swiperNavDots [class*=swiper-button-] img 			{ width: 17px; }

#intro .action .onoffswitch .track 					{ width: 140px; height: 70px; -webkit-mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); mask: radial-gradient(circle 33px at 35px 35px, transparent 97%, black 100%); }
#intro .action .onoffswitch input:checked + .track 	{ -webkit-mask-position: 70px 0; mask-position: 70px 0; }
#intro .action .onoffswitch .claimText 				{ font-size: 2.1875rem; }

#header 											{ padding: 15px 15px; }
#header .mainMenu 									{ display: none; }
#header .rightNav 									{ display: none; }
#header .hamburger 									{ display: flex; }

#slider, #slider .home-slider						{ width: 100%; height: 100dvh; z-index: inherit; }
#slider > .container 								{ max-width: calc(100% - 15px - 15px); }
#slider > .container .bookBtnBox 					{ display: block; }
#slider .home-slider .swiperNav						{ display: none; }
#slider .home-slider .swiperCountDots 				{ pointer-events: inherit; bottom: 70px; right: 15px; left: 15px; }
#slider .home-slider .swiperCountDots [class*=swiper-button-] { display: flex; }

#caption 											{ bottom: 130px; }
#caption .h1 										{ font-size: 2.625rem; }
#caption .h2 										{ font-size: 1rem; line-height: 1.25rem; }
#scrollDown 										{ width: 100%; }

#roomsSec 											{ height: 100vh; padding-bottom: 60px; box-sizing: border-box; }
#roomsSec .roomsBox 								{ flex-direction: column; height: 100%; }
#roomsSec .roomsBox .rooms 							{ width: 100%; height: 50%; overflow: hidden; transition: height 0.5s ease; }
#roomsSec .roomsBox .rooms.open 					{ width: 100%; height: 100%; }
#roomsSec .roomsBox .rooms.small 					{ width: 100%; height: 0; }
#roomsSec .roomsBox .rooms .titleSmall 				{ padding: 50px 15px; }
#roomsSec .roomsBox .rooms .titleSmall h2.h2 		{ padding-bottom: 0; font-size: 1.6875rem; letter-spacing: normal; writing-mode: horizontal-tb; text-orientation: mixed; }
#roomsSec .roomsBox .rooms .titleBox 				{ gap: 30px; padding: 70px 15px; padding-bottom: 0; }
#roomsSec .roomsBox .rooms .titleBox h2.h2 			{ font-size: 2.3125rem; line-height: 2.625rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox 	{ gap: 15px; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .bookNowBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .titleBox .bookBtnBox .ViewBtn { padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#roomsSec .roomsBox .rooms .infoBox 				{ flex-direction: column; align-items: flex-end; gap: 20px; padding: 70px 15px; padding-bottom: 45px; }
#roomsSec .roomsBox .rooms .infoBox .info p 		{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info .title 	{ margin: 0 0 20px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#roomsSec .roomsBox .rooms .infoBox .info ul 		{ -moz-columns: 2; -webkit-columns: 2; column-count: 2; column-gap: 8px; }
#roomsSec .roomsBox .rooms .infoBox .info ul > li 	{ padding-left: 30px; font-size: 1.125rem; line-height: 1.4375rem; }

#noCodeSec 											{ height: 740px; }
#noCodeSec .nocode-slider .swiper-slide .caption 	{ padding: 12px 15px; font-size: 1rem; line-height: 1.75rem; text-align: center; bottom: 88px; right: 0; left: 0; }
#noCodeSec .nocode-slider .swiper-slide .caption strong { font-size: 1.5625rem; }
#noCodeSec .nocode-slider .swiper-slide .content 	{ padding: 70px 15px; }
#noCodeSec .nocode-slider .swiper-slide .content h2.h2 { margin: 0 0 16px 0; font-size: 2rem; line-height: 2.3125rem; }
#noCodeSec .nocode-slider .swiper-slide .content p 	{ font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .codes { padding: 37px 15px 15px 15px; background-size: 52px, cover; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul { max-height: 115px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul.open { max-height: 212px; }
#noCodeSec .nocode-slider .swiper-slide .content .codes ul li { padding-left: 20px; font-size: 1.125rem; line-height: 1.4375rem; }
#noCodeSec .nocode-slider .swiper-slide .content .seemoreBtn { padding: 10px 20px; font-size: 1.25rem; line-height: 1.5rem; }

#servicesSec 										{ height: 740px; }
#servicesSec .content 								{ padding: 70px 15px; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#servicesSec .content .accordion .accordion-item .accordion-body { max-height: 120px; padding: 0 15px 10px 15px; margin-right: 20px; }
#servicesSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#servicesSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#faqSec 											{ height: 740px; }
#faqSec .titleBox 									{ height: auto; padding: 0; top: 35px; right: 15px; left: 15px; z-index: 3; }
#faqSec .titleBox .title 							{ margin: 0; font-size: 2.625rem; line-height: 2.9375rem; letter-spacing: 0rem; writing-mode: inherit; }
#faqSec .content 									{ max-width: 100%; padding: 100px 15px 70px 15px; }
#faqSec .content:has(.accordion-button:not(.collapsed)) { max-width: 100%; }
#faqSec .content .accordion 						{ max-width: 100%; }
#faqSec .content .accordion:has(.accordion-button:not(.collapsed)) { max-width: 100%; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#faqSec .content .accordion .accordion-item .accordion-body { max-height: 300px; padding: 0 15px 10px 15px; margin-right: 20px; }
#faqSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#faqSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }

#postcardsSec 										{ height: 370px; }
#postcardsSec .postcardsBox 						{ grid-template-columns: repeat(1, 1fr); grid-template-rows: repeat(1, 100%); }
#postcardsSec .postcardsBox .item 					{ display: none; }
#postcardsSec .postcardsBox .item:first-child 		{ display: flex; }

#locationSec 										{ height: 740px; }
#locationSec .caption 								{ padding: 0 15px; top: 70px; }
#locationSec .caption h2.h2 						{ margin: 0 0 20px 0; font-size: 2rem; line-height: 2.3125rem; }
#locationSec .caption p 							{ margin: 0 0 30px 0; font-size: 1.125rem; line-height: 1.4375rem; }
#locationSec .caption p br 							{ display: none; }
#locationSec .caption .lostFoundBtn 				{ padding: 10px 20px; font-size: 1rem; line-height: 1.125rem; }
#locationSec .content 								{ padding: 70px 15px; }
#locationSec .content .infoCancel 					{ margin: 0 0 20px 15px; font-size: 1.0625rem; line-height: 1.5rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button { padding: 10px 0 10px 15px; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-header .accordion-button .arrow { width: 44px; height: 17px; }
#locationSec .content .accordion .accordion-item .accordion-body { max-height: 202px; padding: 0 15px 10px 15px; margin-right: 20px; }
#locationSec .content .accordion .accordion-item .accordion-body h3 { margin: 20px 0 8px 0; font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body p { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .content .accordion .accordion-item .accordion-body ul li { font-size: 1.125rem; line-height: 1.375rem; }
#locationSec .location-slider .swiper-slide .description { padding: 12px 15px; font-size: 1rem; line-height: 1.75rem; text-align: center; bottom: 24px; right: 0; left: 0; }
#locationSec .location-slider .swiper-slide .description strong { font-size: 1.5625rem; }

#footer 											{ margin-bottom: 60px; }
#footer .footerBox 									{ padding: 0 15px; background-position: bottom -200px center; background-size: 370px; }
#footer .footerTop 									{ flex-direction: column; gap: 32px; padding: 40px 0 0 0; }
#footer .footerTop .left 							{ order: 1; align-items: flex-start; gap: 32px; text-align: left; }
#footer .footerTop .midd 							{ order: 3; align-items: center; text-align: center; }
#footer .footerTop .right 							{ order: 2; align-items: flex-start; gap: 32px; text-align: left; }
#footer .footerTop ul.info 							{ padding: 0; }
#footer .footerTop .title 							{ margin-top: 0; font-size: 1.5rem; line-height: 1.8125rem; }
#footer .footerTop .subtitle 						{ font-size: 1.5rem; line-height: 1.8125rem; }
#footer .footerBottom 								{ flex-direction: column; gap: 20px; padding: 32px 0; }
#footer .footerBottom .leftText 					{ align-items: center; gap: 20px; text-align: center; }
#footer .footerBottom .rightText 					{ align-items: center; gap: 20px; text-align: center; }
#footer .footerBottom .text 						{ font-size: 1rem; line-height: 1.25rem; }
.footerCertificate 									{ flex-wrap: wrap; gap: 20px; min-height: 142px; padding: 20px 15px; }

/*----------------- Inner Page -----------------*/
#innerBanner, #innerBanner .inner-slider			{ width: 100%; height: 100dvh; z-index: inherit; }
#innerBanner > .container 							{ max-width: calc(100% - 15px - 15px); }
#innerBanner > .container .bookBtnBox 				{ display: block; }
#innerBanner .inner-slider .swiperNav				{ display: none; }
#slider .home-slider .swiperCountDots 				{ pointer-events: inherit; bottom: 70px; right: 15px; left: 15px; }
#innerBanner .inner-slider .swiperCountDots [class*=swiper-button-] { display: flex; }

/*----------------- Text Page -----------------*/
.text-content 										{ padding-top: 70px; }
.text-container 									{ max-width: 100%; padding: 30px 15px 50px 15px; }
.text-title 										{ font-size: 1.75rem; margin-bottom: 16px; }
.text-subtitle 										{ font-size: 1.125rem; margin-bottom: 24px; padding-bottom: 16px; }
.text-body 											{ font-size: 1rem; line-height: 1.625; }
.text-body h1 										{ font-size: 1.625rem; margin: 32px 0 16px 0; }
.text-body h2 										{ font-size: 1.25rem; margin: 32px 0 12px 0; }
.text-body h3 										{ font-size: 1.125rem; margin: 24px 0 10px 0; }
.text-body h4 										{ font-size: 1rem; margin: 20px 0 8px 0; }
.text-body table 									{ font-size: 0.875rem; }
.text-body table th, .text-body table td 			{ padding: 8px 10px; }
.text-body blockquote 								{ padding: 14px 16px; }
.text-body hr 										{ margin: 28px 0; }
.text-body img 										{ border-radius: 6px; margin: 16px 0; }
.text-body details 									{ padding: 12px; }
.text-moreinfo 										{ margin-top: 32px; padding-top: 24px; }

/*----------------- Image Filters (Mobile - iPhone 12 Pro: 390x844) -----------------*/
/* Intro image filter - slightly brighter for mobile screens */
#intro .image 										{ filter: grayscale(1) brightness(0.75) contrast(1.2); }

/* Slider shadow overlay - increased opacity for better text readability on small screens */
#slider .home-slider .swiperShadow .bg,
#slider .home-slider-video .swiperShadow .bg 		{ opacity: 0.7; }

/* Header navigation overlay */
#header .hamburger .navOverlay 						{ -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* Rooms section - enhanced gradient for better text visibility on mobile */
#roomsSec .roomsBox .rooms .titleSmall 				{ background: linear-gradient(180deg, rgba(31, 13, 14, 0.00) 0%, rgba(31, 13, 14, 0.20) 19%, rgba(31, 13, 14, 0.32) 34%, rgba(31, 13, 14, 0.42) 47%, rgba(31, 13, 14, 0.50) 56.5%, rgba(31, 13, 14, 0.54) 65%, rgba(31, 13, 14, 0.58) 73%, rgba(31, 13, 14, 0.62) 80.2%, rgba(31, 13, 14, 0.64) 86.1%, rgba(31, 13, 14, 0.64) 91%, rgba(31, 13, 14, 0.66) 95.2%, rgba(31, 13, 14, 0.66) 98.2%, rgba(31, 13, 14, 0.66) 100%); }

/* NoCode section - gradient overlay for mobile */
#noCodeSec .nocode-slider .swiper-slide .content 	{ background: linear-gradient(-90deg, rgba(251, 222, 176, 0.00) 0%, rgba(249, 206, 138, 0.50) 16.35%, #F6B754 100%); }

/* Services section - gradient overlay for mobile */
#servicesSec .content 								{ background: linear-gradient(90deg, rgba(255, 143, 146, 0.00) 0%, rgba(233, 54, 59, 0.50) 16.35%, #E9363B 100%); }

/* Location section caption - enhanced visibility */
#locationSec .caption 								{ background: rgba(0, 0, 0, 0.15); border-radius: 16px; padding: 20px 15px; }

}

/* #iPhone 12 Pro Specific (390x844)
================================================== */
@media only screen and (max-width: 414px) {

/*----------------- Image Filters (iPhone 12 Pro optimized) -----------------*/
/* Intro image - optimized for OLED screens */
#intro .image 										{ filter: grayscale(1) brightness(0.8) contrast(1.15); }

/* Slider shadow - better visibility on small OLED */
#slider .home-slider .swiperShadow .bg,
#slider .home-slider-video .swiperShadow .bg 		{ opacity: 0.75; }

/* Caption readability on small screens */
#caption .h1 										{ text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); }
#caption .h2 										{ text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); }

/* Rooms section gradient - enhanced for iPhone screens */
#roomsSec .roomsBox .rooms .titleSmall 				{ background: linear-gradient(180deg, rgba(31, 13, 14, 0.00) 0%, rgba(31, 13, 14, 0.25) 19%, rgba(31, 13, 14, 0.38) 34%, rgba(31, 13, 14, 0.48) 47%, rgba(31, 13, 14, 0.55) 56.5%, rgba(31, 13, 14, 0.60) 65%, rgba(31, 13, 14, 0.64) 73%, rgba(31, 13, 14, 0.68) 80.2%, rgba(31, 13, 14, 0.70) 86.1%, rgba(31, 13, 14, 0.70) 91%, rgba(31, 13, 14, 0.72) 95.2%, rgba(31, 13, 14, 0.72) 98.2%, rgba(31, 13, 14, 0.72) 100%); }

/* NoCode section - stronger gradient for readability */
#noCodeSec .nocode-slider .swiper-slide .content 	{ background: linear-gradient(-90deg, rgba(251, 222, 176, 0.00) 0%, rgba(249, 206, 138, 0.55) 16.35%, rgba(246, 183, 84, 0.95) 100%); }

/* Services section - stronger gradient */
#servicesSec .content 								{ background: linear-gradient(90deg, rgba(255, 143, 146, 0.00) 0%, rgba(233, 54, 59, 0.55) 16.35%, rgba(233, 54, 59, 0.95) 100%); }

/* Location section caption */
#locationSec .caption 								{ background: rgba(0, 0, 0, 0.20); border-radius: 16px; }

}



/* #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; }

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

}