@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gilda+Display:wght@400&display=swap');

/*  -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; */

*{box-sizing: border-box; padding:0; margin:0; font-family:'League Spartan'}

.photogallery { width:100%; float:left; list-style:none}
.photogallery li{ width:33.33%; float:left; padding:10px}
.photogallery li img{ width:100%}

.enquireBoxContainerRight input, .enquireBoxContainerRight textarea{ margin-bottom:20px}

.outerContainer{ width:100%; max-width:2000px; margin:0 auto; padding:0px}
header{ display:flex; width:100%; padding:20px}
.leftHeader{ width:156px}
.rightHeader{ width:100%; align-content: center;}
.leftHeader img{ width:100%}
.rightHeader ul{ list-style:none; display: block;  float: right;}
.rightHeader ul li{ display:inline-block }
.rightHeader ul li a:link,.rightHeader ul li a:visited{ text-decoration:none; color:#000; font-size:20px; font-weight:300; padding:0 15px}
.rightHeader ul li a:hover{color:#0162a7}
.banner{ width:100%}

.featuredVideoSlider .item .innerBannerSlide{ position:absolute; top:0; bottom:0; left:0; right:0; background:rgba(0,0,0,0.5)}

.innerBannerSlide{display: flex;
  height: 100%;
  vertical-align: middle;
  align-content: center;
  align-items: center;}

.innerBannerSlide p{ font-size:56px; color:#fff; font-family:"Gilda Display"; width:100%; max-width:1050px; padding:0 150px; line-height:70px}
.innerBannerSlide p span{ font-size:26px; max-width:80%; display:block; line-height:26px}
.banner .owl-theme .owl-nav{ margin:0}
.banner .owl-next{ width:60px; height:60px; background:rgba(0,0,0,0.5) url(images/next.svg) center center !important; border-radius:50px !important; float:right;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
.banner .owl-prev{ width:60px; height:60px; background:rgba(0,0,0,0.5) url(images/back.svg) center center !important; border-radius:50px !important; float:left;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
.banner .owl-nav span{opacity:0 !important}
.banner .owl-theme .owl-nav {
  margin: 0;
  position: absolute;
  right: 0;
  top: calc(50% - 30px);
  left: 0;
}
.banner .owl-next:hover,.banner .owl-prev:hover{ background-color:rgba(0,0,0,0.9) !important}

.aboutIntro{ width:100%; max-width:1200px; margin:0 auto; display:flex; padding:100px 0; background:url(images/bg.svg) center -350px no-repeat; background-size:500px}
.leftIntro{align-content: center; padding-right:30px}
.rightIntro{ text-align:center}
h2,h3{ font-family:"Gilda Display"; font-size:48px; color:#0162a7; font-weight:400}
p{ color:#333; font-weight:300; font-size:20px; padding:10px 0; line-height:30px}
p.subHeading{color: #0162a7; font-size:24px}

.callBlue{ padding-left:60px; color:#0162a7; font-size:18px; background:url(images/call.svg) no-repeat left 15px; background-size:50px }
.callBlue span{ font-size:26px; font-weight:400}

.luxriousRooms{ width:100%; background:#f4f5f8 url(images/bg.svg) -250px center no-repeat; background-size:500px; padding:100px 0}

.luxriousRoomsBox{ display:flex; width:100%; max-width:1200px; margin:0 auto}
.luxriousRoomsBoxLeft{ width:40%}
.luxriousRoomsBoxRight{ width:60%}

.luxriousRoomsBoxLeft p{ background: #fff;
  padding: 30px;
  margin: 20px 0 0 10%;
  z-index: 2;
  position: relative;
  width: 115%;}

.aboutIntro.innerAbout .leftIntro{ padding-right:50px}
.aboutIntro.innerAbout .rightIntro{ text-align: center}
.borderBox{border:0 !important}

.luxriousRoomsBoxLeft.about.bbb p.bb{ padding:50px; background:#fafafa}

.luxriousRoomsBoxRight .owl-next{ width:60px; height:60px; background:rgba(0,0,0,0.2) url(images/next.svg) center center !important; border-radius:50px !important; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
.luxriousRoomsBoxRight .owl-prev{ width:60px; height:60px; background:rgba(0,0,0,0.2) url(images/back.svg) center center !important; border-radius:50px !important; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease; }
.luxriousRoomsBoxRight .owl-nav span{opacity:0 !important}
.luxriousRoomsBoxRight .owl-theme .owl-nav {
  margin: 0;
  position: absolute;
  right: 0;
  bottom: 10px;
  
}
.luxriousRoomsBoxRight .owl-next:hover,.luxriousRoomsBoxRight .owl-prev:hover{ background-color:rgba(0,0,0,0.5) !important}
.facilities{ text-align:center;padding:100px 0; width:100%; background:#fff url(images/bg.svg) calc(100% + 350px) center no-repeat; background-size:500px; }
.facilitiesBox{ display:flex; width:100%; max-width:1200px; grid-gap:40px;flex-wrap: wrap; margin:50px auto 50px auto; }
.facilitiesBox div{ border:1px solid rgba(0,120,206,0.3); padding:20px; width:calc(33.33% - 28px); text-align:left; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.facilitiesBox div img{ width:80px}
.facilitiesBox div p{ font-family:"Gilda Display"; font-size:20px; color:#0162a7; font-weight:400; padding:20px 0 0 0}
.facilitiesBox div:hover{ box-shadow:0 0px 20px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}

.blueLink:link, .blueLink:visited{ background:#0162a7; color:#fff; font-size:20px; padding:20px 40px; text-decoration:none; font-weight:300; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.blueLink:hover{ background:#f18711}


.enquireBox{ width:100%; background:url(images/enquirenow-bg.jpg) no-repeat; background-size:100% auto; padding:150px 0}
.enquireBoxContainer{ width:100%; max-width:1200px; margin:0 auto; display:flex}
.enquireBoxContainerLeft,.enquireBoxContainerRight{ width:50%}
.enquireBoxContainerLeft div{ color: #fff; border-left:5px solid #fff; 
  font-weight: 300;
  font-size: 24px;
  padding: 10px 50px 10px 30px;
  line-height: 30px;}
.enquireBoxContainerLeft .callBlue{ color:#fff;background:url(images/call-white.svg) no-repeat left 15px; background-size:50px}
.formBox{ background:#f4f5f8; padding:50px; border-radius:10px; display:flex; flex-direction:column; grid-gap:20px}
.formBox input,.formBox textarea{ border:0; background:#fff; padding:15px 15px; width:100%; border-radius:10px; font-size:18px; font-weight:300}
.formBox textarea{ height:80px}
.formBox input[type="submit"]{ max-width:120px; background:#0162a7; color:#fff; cursor:pointer; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.formBox input[type="submit"]:hover{ background:#f18711; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}

.footer { width:100%;padding:50px 0 20px 0; background:url(images/bg1.svg) center calc(100% + 200px) no-repeat #000; background-size:400px }
.footerBox{ margin:0 auto; width:100%; max-width:1200px; display:flex; flex:0 auto 3}

.footerLogo{ width:130px; padding-bottom:20px}
.footer div p{ color:#fff; font-size:16px; line-height:20px; }

.footerLinks{ list-style:none}
.footerLinks li{ display:block; margin:12px 0}
.footerLinks li a:link, .footerLinks li a:visited{ color:#fff; text-decoration:none; font-weight:300; font-size:16px}
.footerLinks li a:hover{ color:#f18711}
.footer div p.footerHeading{ font-size:22px; font-family:'Gilda Display'; padding-bottom:0; margin-bottom:0}

.footer1{ width:50%;   }
.footer1 p{ max-width:400px}
.footer2{ width:25%}
.footer3{ width:25%}

.footer1, .footer2, .footer3{flex-grow: 1;  flex-shrink: 1;}

.instagram:link, .instagram:visited{ display:none; width:35px; height:35px; background:url(images/instagram.svg) no-repeat; background-size:26px; margin-top:10px}
.instagram:hover{}

.facebook:link, .facebook:visited{ display:none; width:35px; height:35px; background:url(images/facebook.svg) no-repeat; background-size:26px; margin-top:10px}
.facebook:hover{}

.youtube:link, .youtube:visited{ display:none; width:35px; height:35px; background:url(images/youtube.svg) no-repeat; background-size:26px; margin-top:10px}
.youtube:hover{}

.googlereview:link, .googlereview:visited{display: inline-block; width:150px; height:70px; background:url(google.png) no-repeat; background-size:120px auto; margin-top:10p}


p.footerTxt{ color:#fff; font-size:16px; text-align:center; color:#666; border-top:1px solid #333; padding-bottom:0; margin-bottom:0; margin-top:50px}

.desktop{ display:block !important}
.mobile{ display:none !important}
.mobileMenu{ display:none}

.innerBanner{ display:flex; padding:100px 0; }
.aboutusBanner{ background:url(images/aboutusBanner.jpg) no-repeat; position:relative}
.aboutusBanner:after{ position:absolute; left:0; right:0; top:0; bottom:0; background:rgba(0,0,0,0.6); content:""; z-index:1}
.innerBanner h1{ color:#fff; text-align:center;font-size:56px; font-family:'Gilda Display'; position:relative; z-index:5; font-weight:normal; margin:0 auto}
.luxriousRoomsBoxLeft.about{ width:100%}
.luxriousRoomsBoxLeft.about h2{ }
.luxriousRoomsBoxLeft.about p{ background:none; margin:50px 0 20px 10%; padding:0 0 0 20px; border-left:5px solid #0162a7; width:80% }

.twoColumns{ width:100%; max-width:1200px; margin:50px auto 100px auto; background:#f4f5f8}
.columnBox{ display:flex}
.columnBox div{ width:50%; align-content: center; position:relative}
.columnBox div img{ width:100%; position:relative}
.columnBox div h2,.columnBox div p{ padding:0 30px}
.columnBox div.imgg:after{ position:absolute; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.3); z-index:1; content:""}

.columnBox div p.heading{font-family:'Gilda Display'; font-size:30px; line-height:normal; padding-bottom:10px}
.columnBox div p{ font-size:16px}

.facilities.innerFacilities .facilitiesBox { margin-top:0}
.keyFeatures{ margin:0 auto; width:100%; padding:0 0 50px 0; max-width:750px; }
.keyFeaturesOuter{ background:#fff url(images/bg.svg) -250px center no-repeat; background-size:500px; width:100%}

.keyFeatures h2{}
.keyList li{ font-size:18px; margin-bottom:15px; font-weight:300; list-style:none; background:url(images/list.svg) no-repeat; padding-left:30px; background-size:20px}
.keyList li strong{ font-weight:500}
.keyList{ margin-top:30px}

h2.leftC{ font-size:26px}
.leftIntro,.rightIntro{ width:50%}
.rightIntro .enquireBoxContainerRight{ width:100%}
.footerHeading{font-family:'Gilda Display'; font-size:26px; line-height:normal; margin-bottom:0; padding-bottom:0}

.contactOuterBox{ width:100%; max-width:1200px; margin:0 auto; display:flex}
.contactOuterBoxLeft, .contactOuterBoxRight{ width:50%; align-content: start;}
.contactOuterBoxLeft{ padding-right:100px}
p.loc{ font-size:20px; font-weight:300}
.contactOuterBoxRight .formBox{ width:80%; margin:0 auto}
.aboutIntro.contractIntro{ grid-gap:50px}
.aboutIntro.contractIntro .leftIntro{ padding:0}
.email{ background:url(images/email.svg) no-repeat left center; padding-left:50px; background-size:35px; color:#0162a7}
.callIconC{ background:url(images/call.svg) no-repeat left center; padding-left:50px; background-size:35px; color:#0162a7}

.aboutIntroo.contractIntro{ width:100%; max-width:1200px; display:flex; margin:0 auto; padding:0px 0 100px 0; grid-gap:50px}
.aboutIntroo.contractIntro .leftIntro{ padding:0}

h2.leftC.leftccc{ padding-top:50px}

.callBtn:link, .callBtn:visited{ width:50px; height:50px; background:url(images/call1.svg) center center no-repeat #0162a7; background-size:35px; border-radius:50px; position:fixed; left:10px; bottom:10px; z-index:2; display:none}

.quickPopup:link, .quickPopup:visited{ width:50px; height:50px; background:url(images/emailWhite.svg) center center no-repeat #0162a7; background-size:35px; border-radius:50px; position:fixed; right:10px; bottom:10px; z-index:2;  animation: mymove 3s; animation-iteration-count: infinite;}

@keyframes mymove {
  0%  {bottom: 10px}
  50% {bottom: 50px}
  100% {bottom: 10px}
}

.innerForm h2{ font-size:26px; margin-bottom:20px}
.innerForm input,.innerForm textarea{ border:1px solid #f1f1f1; border-radius:10px; margin-bottom:15px; padding:10px; width:100%; font-size:16px; font-weight:300}

.closeBtn:link, .closeBtn:visited{ float:right;width:30px; height:30px; background:url(images/close.svg) center center no-repeat #0162a7; background-size:15px; border-radius:50px;  z-index:2; margin:-70px -20px 0 0}
.closeBtn:hover{ background:url(images/close.svg) center center no-repeat #f18711; background-size:15px;}

.outerPopUp{position:fixed; left:0; top:0; right:0; bottom:0; background:rgba(0,0,0,0.8); display:none}
.innerPopUp{display:flex;height: 100%;}
.innerForm{background:#fff; border-radius:10px; padding:30px; min-width:280px; max-width:360px; width:100%; align-self: center; margin:0 auto}

.whatsapp{ position:fixed; width: 50px;
  height: 50px;
  
  position: fixed;
  right: 10px;
  bottom: 110px;
  z-index: 2;}

.contactOuterBoxRight input, .contactOuterBoxRight textarea{ margin-bottom:20px}

input[type="submit"]{ cursor:pointer	}

@media screen and (max-width:700px) {
	.contactOuterBoxLeft, .contactOuterBoxRight,.contactOuterBoxRight .formBox, .leftIntro,.rightIntro{ width:100%}
	
	.aboutIntroo.contractIntro{flex-direction: column; padding:0 20px}
	.keyFeaturesOuter { padding:0 20px}
	.whatsapp{ bottom:80px}
	
	.luxriousRoomsBoxLeft.about p{ margin:20px 0 30px 0; width:100%; padding-left:20px; padding-right:0}
	.luxriousRoomsBoxLeft.about.bbb p.bb{ padding:20px; background:#fafafa}
	
	@keyframes mymove {
  0%  {bottom: 10px}
  50% {bottom: 10px}
  100% {bottom: 10px}
}
	.leftIntro, .rightIntro{ width:100%}
	.banner .owl-theme .owl-nav{ top:auto; bottom:10px}
	.callBtn:link, .callBtn:visited{ display:block}
.aboutIntro,.luxriousRooms,.facilities , .enquireBoxContainer,.luxriousRoomsBox , .footerBox {flex-direction: column; padding-left:20px; padding-right:20px; padding-top:50px; padding-bottom:50px}
.innerBannerSlide p{ padding:20px; font-size:30px; line-height:normal}
.innerBannerSlide p span{ font-size: 16px;
    line-height: normal;}
.leftIntro{ padding:0}
.aboutIntro {flex-direction: column-reverse;}
.rightIntro img{ width:100%}
.leftIntro{ padding-top:30px}
h2, h3{ font-size:30px}
.luxriousRoomsBoxLeft,.luxriousRoomsBoxRight{ width:100%}
.luxriousRoomsBox{ padding:0 !important; padding-bottom:0 !important}
.luxriousRoomsBoxLeft p {
  background: #fff;
  padding: 30px;
  margin: 20px auto;
  z-index: 2;
  position: relative;
  width: 100%;
}
.facilitiesBox div, .enquireBoxContainerLeft, .enquireBoxContainerRight,.footer1, .footer2, .footer3{ width:100%}
.facilitiesBox{ margin:25px auto}
.facilities .blueLink:link, .facilities .blueLink:visited{ display:inline-block}
.enquireBox{ padding:50px 20px; background-size:cover	}
.enquireBoxContainer{ padding:0}
.enquireBoxContainerLeft{ margin-bottom:25px}
.enquireBoxContainerLeft div{ padding:10px}
.enquireBoxContainerLeft .callBlue{ display:none}
.formBox{ padding:15px}
div.footerBox{ padding-bottom:0; padding-top:0}
p.footerTxt{ font-size:14px; margin-top:20px}
.footer{ margin-top:50px}
.banner .owl-next,.banner .owl-prev, 
.luxriousRoomsBoxRight .owl-next,.luxriousRoomsBoxRight .owl-prev
{ width:30px; height:30px; background-size:25px !important; float:none}
.desktop{ display:none !important}
.mobile{ display:block !important}

.topMenus{ position: fixed; top:88px; left:100%; background:rgba(255,255,255,1); z-index:5; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
.topMenus li{ width:100%; margin:0px 0; border-top:1px solid rgba(0,0,0,0.1)}
.rightHeader ul li a:link, .rightHeader ul li a:visited{ padding:10px 20px; display:block}
.mobileMenu{ position:absolute; top:30px; right:20px; width:50px; cursor:pointer; display:block}
.topMenus.mm{ left:0;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all 0.3s ease;}
body{ overflow-x:hidden !importants}
.columnBox{ display:flex; flex-direction: column;}
.columnBox div{ width:100%;}
.imgg{ order:1}
.ttxt{ order:2}
.columnBox div p.heading{ font-size:26px; padding-top:30px}
.columnBox div p{ padding-bottom:30px}
.twoColumns{ margin-bottom:0}
.footer{ margin-top:0}
.photogallery li{ width:50%; float:left; padding:10px}
}