@charset "utf-8";
 .outfit-<uniquifier> {
     font-family: "Outfit", sans-serif;
     font-optical-sizing: auto;
     font-weight: <weight>;
     font-style: normal;
}
/*=========== POWERED BY MERIDIAN SOLUTIONS INC ============*/
/*************** DEFAULT CSS ***************/
 :root {
     --body-font: "Outfit", sans-serif;
     --body-font-Size: 17px;
     --body-color: #fff;
     --primary-color: #cf0b3d;
     --secondary-color: #dc5175;
     --tertiary-color: #146187;
     --quaternary-color:#002536;
     --black: #1C1C1C;
     --white: #fff;
     --grey: #EBF2F8;
     --grey-light: #F9FAFF;
     --grey-dark: #909090;
     --font-light:300;
     --font-normal:400;
     --font-medium:500;
     --font-bold:700;
     --font-heavy:800;
     --heading-font: "Outfit", sans-serif;
}
 body{
     background-color: #1c1c1c;
     font-family: var(--body-font);
     font-size:var(--body-font-Size);
     font-style: normal;
     line-height: normal;
     font-weight:300;
     color: var(--body-color);
     text-decoration: none;
     margin:0px;
     -webkit-font-smoothing: antialiased;
     padding:0;
}
 html{
     scroll-behavior: smooth;
}
 * {
     -webkit-box-sizing: border-box;
     -mox-box-sizing: border-box;
     box-sizing: border-box;
}
 ::selection {
     background: var(--primary-color);
    /* Safari */
     color:#fff;
}
 ::-moz-selection {
     background: var(--primary-color);
    /* Firefox */
     color:#fff;
}
 ::-webkit-scrollbar {
     width: 10px;
}
 ::-webkit-scrollbar-track {
     background: rgba(255, 255, 255, 0.9);
     padding:1px ;
}
 ::-webkit-scrollbar-thumb {
     background: var(--secondary-color);
     border-radius: 40px;
}
 a {
     color:var(--primary-color);
     text-decoration: none;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
 a:hover {
     color: var(--secondary-color);
}
 p {
     margin:0px 0 30px 0;
     clear:left;
     padding:0;
     font-weight: normal !important;
     line-height: 23px 
}
 h1, h2, h3, h4, h5, h6 {
     margin:0 0 20px 0;
     padding:0;
     font-weight:400;
}
 h3{
     font-size: 26px;
     line-height: 30px;
     margin-bottom: 30px 
}
 h2{
     font-size: 56px;
     line-height: 60px;
     margin-bottom: 50px 
}
 hr {
     margin:50px 0 50px 0;
     height:1px;
     border:0;
     border-top:1px solid rgba(255, 255, 255, 0.2);
     position:relative;
}
 img{
     border:0;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
 a img {
     border: 0;
}
/*-----------text styles------------*/
 .text-white{
     color:var(--white)!important;
}
 .text-black{
     color: #000 !important;
}
 .text-pink{
     color: var(--primary-color) !important;
}
 .text-lightpink{
     color: var(--secondary-color) !important;
}
 .text-center{
     text-align: center;
}
 .text-justify{
     text-align: justify;
}
 .uppercase{
    text-transform: uppercase;
}
/*-----------background styles------------*/.red-btn {
  background-color: red;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}

.red-btn:hover {
  background-color: darkred;
}
.webiocn{
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	font-size:20px;
	background-color: var(--white);
	border-radius: 40px;
	transition: all 0.4s ease;
}
  .boxy:hover .webiocn{
  	transform: rotate(360deg);
  }
  .boxy{
    background-color: var(--primary-color);
	padding:40px;
	text-align:center;
	outline: 1px solid rgba(255, 255, 255, 0.2);
    outline-offset: -10px;
}
  .boxy i{
  	vertical-align:middle;
  	margin:0;
	color:var(--primary-color);
	line-height:50px;
 
}
.bg-pink{
    background-color: var(--primary-color)
}
 .bg-lightpink{
    background-color: var(--secondary-color)
}
 .bg-black{
    background-color:#000;
}
 
/*************** PRELOADER ***************/
 #preloader {
     position: fixed;
     top:0;
     left:0;
     right:0;
     bottom:0;
     background-color:var(--black);
    /* change if the mask should have another color then white */
     z-index:999999;
    /* makes sure it stays on top */
}
 #status {
     width:100%;
     height:100%;
     position:absolute;
     left:0;
    /* centers the loading animation horizontally one the screen */
     top:0;
    /* centers the loading animation vertically one the screen */
     background-image:url(../images/loading.png);
    /* path to your loading animation */
     background-repeat:no-repeat;
     background-position:center;
     margin:0;
	  background-size:150px;
    /* is width and height divided by two */
}
 #status{
    /* -webkit-animation: flipInY 1s infinite alternate;
     -moz-animation: flipInY 1s infinite alternate;
     -ms-animation: flipInY 1s infinite alternate;
     -o-animation: flipInY 1s infinite alternate;
     animation: flipInY 1s infinite alternate;
    */
}
/*************** BACK TO TOP ***************/
/*************** COLUMS AND ROWS ***************/
 main{
     position:relative;
}
 
 .container{
     width:1400px;
     margin:0 auto;
}
 .fullwidth{
     width:100%;
     display:block;
}
 
 section , footer {
     width: 100%;
     position: relative;
}
.section-spacing{
	 padding:100px 0;
 }
/*************** HOME PAGE CSS ***************/
 header{
     width: 100%;
     position: absolute;
     z-index: 2;
     background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8));
     transition: all 0.4s ease;
}

 header.smaller {
     top:0;
     left:0px;
     position: fixed;
     z-index: 9;
     background-image:none;
	 background-color:var(--black);
 
    
}

 .header{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 20px 0;
     position: relative;
	 -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
 
 header.smaller .header{
    padding: 10px 0 
}


 
 

/***********/

 
 .logo{
 	transition: all 0.4s ease;
}
 .logo img{
     width: 150px;
	 transition: all 0.4s ease;
}
 header.smaller .logo img {
     width: 120px;
	 
 
}
 .header-right{
     display: flex;
     align-items: center;
     gap:0 20px;
}

.header-right  .inline {
    padding: 0;
    border-right: 0;
}

.header-right .inline::after {
    display: none;
}

.top-container .inline input[type="text"]:focus {
  background-color: #cccccc40; /* Change background color */
}

.top-container .inline input:focus {
  background-color: #cccccc40 !important;/* Change background color */
}
.top-container form {
    display: inline-flex;
    align-items: center;
}

.buttons .link input {
    background: var(--primary-color);
    color: var(--white);
    padding: 15px 20px 15px 20px;
    margin: 0;
    position: relative;
    font-size: 16px;
    line-height: 16px;
    display: inline-block;
    margin: 0 0 0px 0;
    overflow: hidden;
    font-weight: 400;
    min-width: 120px;
    text-align: center;
    border: 0;
}
.top-container form span.wpcf7-spinner {
    display: none;
}
 .top-container{
    /*width: 75%;
    */
     background-color: rgba(0, 0, 0, 0.7);
     color: var(--white);
     padding: 7px 15px 6px 0px;
     display: inline-flex;
     width: auto;
     align-items: center;
}
 .top-container a{
     color: var(--white);
}
 .top-container a:hover{
     color: var(--primary-color);
}
.top-container .inline .fieldset {
    padding-block: 7px;
    font-size: 14px;
    color: #fff;
}
.top-container .inline input::placeholder  {
    color: #fff !important;
}
 .topbar-wrap{
     width: 100%;
     position: absolute;
     left:0;
     bottom: 30px;
}
 .inline {
     display: inline-block;
     position: relative;
     padding: 5px 20px 5px 70px;
     font-size: 16px;
     line-height: 18px;
    /*border-left:1px solid rgba(255, 255, 255, 0.2);
    */
}
 .inline:after {
     content: '';
     width: 1px ;
     height: 45px;
     background-color: rgba(255, 255, 255, 0.2);
     position: absolute;
     top:5px;
     left:0;
}
 .inline:first-child:after{
    display: none;
}
 .inline span{
     font-size: 14px;
     color: #c1c1c1;
     display: block;
}
 .inline img{
     position: absolute;
     top:0;
     left:15px;
}
 .inline p{
     margin-bottom: 0;
     font-size: 16px;
     line-height: 18px;
}
 .buttons{
     display: inline-flex;
     gap: 2px;
}
 .social {
     font-size: 16px;
     line-height:25px;
}
 .social a i{
     margin-right: 7px;
     font-size: 19px;
     color: #2e4187;
}
 .social a:hover i{
     color: #2e4187;
}
 .number{
     position: relative;
     font-size: 16px;
     color: #4b5469;
}
 .number i{
     position: absolute;
     top:0;
     width:30px;
     height: 30px;
     background: #edb523;
     border-radius: 100%;
}
 .menu-wrap{
}
 .menu {
     position: relative;
     z-index: 100;
     margin-top: 8px;
}
 .sch-btn {
     background-color: #fff;
     border: 1px solid #bfbfbf;
     width: 60px;
     height: 60px;
     color: #000;
     font-size: 20px;
     font-weight: 700;
     padding: 18px;
     position: relative;
     z-index: 100;
}
 .slider-wrap {
     position: relative;
}
 .link{
}
 .link a{
     background:var(--primary-color);
     color: var(--white);
    padding: 15px 20px 15px 20px;
     margin: 0;
    position: relative;
    font-size: 16px;
     line-height: 16px;
    display: inline-block;
     margin:0 0 0px 0;
     overflow: hidden;
    font-weight: 400;
     min-width: 120px;
     text-align: center;
}
 .link2 a{
     background:var(--secondary-color);
}
 .link a:hover{
}
 .whitelink a{
     color: var(--white);
}
 .link a span {
     position: relative;
     z-index: 2;
}
 .link a:hover span {
     color: var(--primary-color);
}
 .whitelink a:hover span {
     color: #000;
}
 .link a:after{
     content: '';
     width: 0;
     height: 100%;
     position: absolute;
     bottom: 0;
     left: 100%;
     z-index: 1;
     background: var(--white);
     color: #fff;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
}
 .whitelink a:after{
     background: var(--white);
     color: var(--black);
}
 .link a:hover:after {
     width: 100%;
     left: 0;
     -webkit-transition: width 0.3s ease;
     transition: width 0.3s ease;
}

/*********font settings ************/
.light{
	font-weight:var(--font-light) !important;
	}
.bold{
	font-weight:var(--font-bold) !important;
	}	
.medium{
	font-weight:var(--font-medium) !important;
	}
 .normal{
	font-weight:var(--font-normal) !important;
	}		
 
	 
/*********font settings ************/	 
 .heading{
     font-size: 56px;
     line-height: 66px;
     margin-bottom: 20px;
     font-weight: 400;
}
 .heading-small{
     font-size: 36px;
     line-height: 46px;
     margin-bottom: 20px;
     font-weight: 300;
}
 
 .heading-medium{
     font-size: 30px;
     line-height:34px;
 
}
 .subheading{
     font-size: 40px;
     line-height: 44px;
 
}

 .title-small{
     font-size: 24px;
     line-height: 32px; 
     font-weight:var(--font-normal);
}

 .subtitle{
     display: inline-block;
     padding: 25px 0 0 0;
     position: relative;
     font-size: 26px;
     line-height: 30px;
     margin-bottom: 20px;
     font-weight: 300;
}
 .subtitle:after{
     content: '';
     position: absolute;
     top:0;
     left:0;
     width: 42px;
     height: 3px;
     border-top:1px solid var(--primary-color);
     border-bottom:1px solid var(--primary-color);
}
 .text-center .subtitle:after{
     left:0;
     right:0;
     margin:auto;
}
 .left-wrap {
     padding-left: 10%;
     width: 100%;
}
 .more {
     display: inline-block;
     padding: 0px 15px 5px 54px;
     background: url(../images/icons/arrow.png) no-repeat 0 0;
     color: var(--white);
     margin-bottom: 15px;
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
}
 .more a{
     color: var(--white);
}
 .more:hover{
     padding-left: 64px;
     background-position: 7px 0;
}
.res-pad{
	padding-top:100px;
}
 .facility-single{
}
 .f-cont{
     margin-top: 50px;
     position: relative;
     padding-left: 45px;
}
 .f-cont:before{
     content: '';
     width: 1px;
     height: 100%;
     background: var(--primary-color);
     position: absolute;
     top:0;
     left:0;
}
 .f-cont h3{
     margin-bottom: 10px;
}
 .f-cont p{
     font-size: 18px;
     line-height: 22px;
     margin-bottom: 15px;
}
 .f-cont .more{
     margin-bottom: 0;
}
 .facility-single a{
     color: var(--white);
}
 .dining{
     padding: 65px 0;
}
 .dining img{
     width:100%;
	 display:block;
	 
}
 .diningbox{
    position: absolute;
    top:0;
    left:0;
     width:100%;
    height: 100%;
    padding: 85px 45px 85px 85px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
 .diningbox-cont{
     width: 45%;
}
 .diningbox-cont h3{
	 font-size:40px;
	 font-weight:var(--font-bold);
}
 .dining-img{
     width: 45%;
     max-width: 598px;
     position: relative;
     min-height: calc(100% - 0px);
 
	 
}
 .dining-img img{
     width: 100%;
	 position: absolute;
     top: -80px;
     right: 0;
     width:100%;
 
}
 .date{
     display: inline-block;
     margin-bottom: 30px;
}
 .splitbg{
     position: absolute;
     bottom:0;
     right:0;
     width: 35%;
     height: calc(100% - 300px);
     background-color: var(--primary-color) 
}

/*************hidden************/
.scroller-wrap-outer{
	overflow-x:hidden;
}
.scroller-wrap{
	width:130%;
	overflow-x:hidden;
}
.display-style{
	background-color:#000;
	padding:80px 40px;
	 
}
.display-style ul{
	margin:0;
	padding:0;
	list-style:none;
}
.display-style ul li{
	line-height:normal;
	font-size:20px;
	padding:15px 0;
	font-weight:var(--font-medium); 
	border-bottom:1px solid rgba(255, 255, 255, 0.2);
}

.display-style ul li i{
	vertical-align:middle;
	margin:0 15px 0;
	color:var(--primary-color);
}
.display-style2{
	background-color:var(--primary-color);
	padding:40px 50px;
    outline: 1px solid rgba(255, 255, 255, 0.4);
    outline-offset: -15px;
	 
}
.display-style2 h2{
	font-size:30px;
	line-height:normal;
	margin:0 0 20px;
}

/************/
 .split-bx{
	width: 35%;
	height:90%;
	position: absolute;
	right:0;
	top:0;	
	z-index:-1;
	 background-color:rgba(0, 0, 0, 0.4);
	background-image: url(../images/dots.png);      
}

.split-bx:before{
 	width:150px;
 	height:55%;
 	 left:-150px;
	 bottom:10%;
	 content:'';
	 position:absolute;
	 background-color:rgba(255, 255, 255, 0.1);
	 }
	 
/*--------------------------------scroll-------------*/


 .sidescroll-row{
     overflow: hidden;
     position: absolute;
     top:30%;
}
 .bannerH {
     white-space: nowrap;
     position: relative;
     color: white;
}
 .bannerH p{
     -webkit-text-stroke-width: 1px;
     -webkit-text-stroke-color: #777;
     color: transparent;
     font-size: 160px;
     line-height: 150px;
     font-weight: bold;
     display: flex;
     align-items: center;
     font-family: verdana;
     letter-spacing: -5px;
}
 .bannerH p .sep {
     margin: 0 30px;
}
 .sideScroll {
     display: inline-block;
     animation: sideScroll 20s linear infinite;
}
 @keyframes sideScroll {
     100% {
         transform: translateX(-1600px);
    }
}
 .sep{
     font-size: 0;
     width: 14px;
     height: 14px;
     background: var(--primary-color);
     border-radius: 100%;
     margin: 0 15px;
     display: inline-block;
}
 .tours-wrap{
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
}
 .tours-ajman-box{
     width: 40%;
     position: relative;
    /* padding: 0 55px 55px 0;
     */
     z-index: 1;
}
 .tours-ajman-box:after{
     content: '';
     width: 90%;
     height: 90%;
     background-color: var(--primary-color);
     position: absolute;
     z-index: -1;
     bottom: -45px;
     right: -53px;
}
 .tours-ajman-cont{
     padding: 75px 65px;
     width: 100%;
     height: 100%;
     color: var(--white);
     position: absolute;
    top:0;
     left:0;
}
 .tours-ajman-cont {
}
 .left-img{
     position: absolute;
     top: 67%;
     left: 10%;
    /* right: 0;
     */
    /* margin: 0 auto;
     */
     z-index: 2;
}
 .right-img{
     position: absolute;
     top: 17%;
     left: 76%;
     z-index: 3;
}
 .section-map{
     overflow: hidden;
     position: relative;
}
 .section-map iframe{
    border:0;
	width:100%;
	height:80vh;
	outline:none;
	display:block;
}
 .section-map:before,  .section-map:after{
     width:100%;
     height:180px;
     position:absolute;
     left:0;
     bottom:0;
     content:'';
     z-index:1;
     background-image: linear-gradient(to bottom, rgba(28,28,28,0), rgba(28,28,28,1));
	 }

	 
 .section-map:after{
 	bottom:auto;
	top:0;
	background-image: linear-gradient(to top, rgba(28,28,28,0), rgba(28,28,28,1));
 }	 
	 
 
 .overlay{
     width:100%;
     height:180px;
     position:absolute;
     left:0;
     bottom:0;
     content:'';
     z-index:1;
     background-image: linear-gradient(to bottom, rgba(28,28,28,0), rgba(28,28,28,1));
    /* Standard syntax (must be last) */
}
 .overlay-inverted{
     width:100%;
     height:130px;
     position:absolute;
     left:0;
     top:0;
     content:'';
     z-index:1;
     background: rgb(28,28,28);
     background: linear-gradient(180deg, rgba(28,28,28,1) 4%, rgba(26,26,26,0.9239867822128851) 19%, rgba(0,0,0,0) 98%);
    /* Standard syntax (must be last) */
}

 .expanding-wrap{
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
}
 .expanding-div{
     flex:1;
     overflow: hidden;
     height: 550px;
    
    /*  min-height: calc(90vh - 80px);*/
      border:1px solid #000;
	  margin-left:-1px;
     -webkit-transition: all 900ms ease-in-out;
     -moz-transition: all 900ms ease-in-out;
     transition: all 900ms ease-in-out;
     position: relative;
     background-color: #000;
	 justify-content: center;
	 background-repeat: no-repeat;
	 background-position: bottom center;
	 -moz-background-size: cover;
	 -webkit-background-size: cover;
	 -o-background-size: cover;
	 background-size: cover;
}
 .expanding-div:nth-child(1){
     background:url(../images/rooms/thumb1.jpg);
 
}
 .expanding-div:nth-child(2){
     background:url(../images/rooms/thumb2.jpg) no-repeat ;
	 
     
}
 .expanding-div:nth-child(3){
     background:url(../images/rooms/thumb3.jpg) no-repeat ;
	 
     
}
 
 
 .expanding-div:nth-child(4){
     background:url(../images/rooms/thumb4.jpg) no-repeat ;
}
 
 .expanding-div:hover{
     flex:2.5;
}
 .expanding-div a{
     color: var(--white) 
}
 .expanding-div h3{
     font-size: 30px;
     line-height: 30px;
	 font-weight:normal;
     margin-bottom: 15px;
}
 .fixed-head{
     position: absolute;
     width: 100%;
     left:0;
	 bottom: 0;
	 padding:20px 40px;	  
     margin-bottom: 15px;
     text-align: left;
     z-index: 1;
     -webkit-transition: all 900ms ease-in-out;
     -moz-transition: all 900ms ease-in-out;
     transition: all 900ms ease-in-out;
}
.expanding-div:after {
    position: absolute;
    left: 0;
    z-index: 0;
    content: '';
    width: 100%;
    height: 200px;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%);
    opacity: 0.8;
}
 .expanding-div:hover .fixed-head{
     opacity: 0;
     bottom: -100px;
}
 .room-img{
     visibility: hidden;
     opacity: 0;
     position: absolute;
     top:-100px;
     height:0;
     text-align: center;
     -webkit-transition: all 900ms ease-in-out;
     -moz-transition: all 900ms ease-in-out;
     transition: all 900ms ease-in-out;
     background-color: #000;
}
 .room-img img{
    width: 100%;
	display:block;
}
 .expanding-div:hover .room-img{
     top:0;
     visibility: visible;
     opacity: 1;
     /*height: 55%;*/
}
 .room-cont{
     visibility: hidden;
     opacity: 0;
     background-color: transparent;
     padding:40px;
     position: absolute;
     bottom: -200px;
     color: var(--white);
     width: 100%;     
     transition: all 0.4s ease;
}
 .room-cont p{
	 margin:0 0 20px 0;
	 white-space: preserve nowrap;
      
}
 .expanding-div:hover .room-cont{
     bottom:0;
     visibility: visible;
     opacity: 1;
     background-color: #000;
}
 
.manager{
	font-size:14px;
	color: var(--grey-dark);
	padding-left:40px;
	border-left:4px solid var(--secondary-color);
	 
}
 
 .manager span{
   font-size:24px;
   color: var(--secondary-color);
   }
/*************** footer CSS ***************/
 footer{
 	color: #fff;
}
 footer a{
    color: #fff;
}
 footer a:hover{
    color:rgba(255, 255, 255, 0.5);
}
 .footer-top{
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 30px 0;
	 border-top:1px solid rgba(255, 255, 255, 0.2);
}
 .green-link{
     display: flex;
     align-items: center;
     gap:15px;
	 font-size:24px;
}
 .green-link a {
    color: var(--white);
 }
  .green-link a:hover {
    color: var(--primary-color);
 }
 .certified{
     display: flex;
     align-items: center;
     gap:10px;
}
 .footer-middle{
     border-top:1px solid rgba(255, 255, 255, 0.2);
     border-bottom:1px solid rgba(255, 255, 255, 0.2);
}
 .footer-div{
     flex:0 0 20%;
     border-left:1px solid rgba(255, 255, 255, 0.2);
     padding: 50px 40px;
     overflow: hidden;
     position: relative;
}
 .footer-div h3{
     position: relative;
     font-size: 22px;
     line-height: 22px;
     padding-bottom: 30px;
     margin-bottom: 25px;
     color:var(--white);
}
 .footer-div h3:after{
     content: '';
     position: absolute;
     bottom: 0;
     left:0;
     width: 40px;
     height: 5px;
     border-bottom: 4px double var(--primary-color) 
}
 ul.footerlinks{
     margin:0 0 20px 0;
     padding: 0;
}
 ul.footerlinks li{
     list-style: none;
     padding: 6px 0;
     line-height: 20px;
     font-size: 16px;
     line-height: 20px;
}
ul.footerlinks li a {
    color: var(--white);
}
ul.footerlinks li a:hover {
    color: var(--primary-color);
}
  .logo-desktop{     
	  display:flex !important;

}
 .logo-mobile{     
	display:none !important;
	width:100%;
	justify-content: center;
	padding:20px 0;
	 border-bottom:1px solid rgba(255, 255, 255, 0.2);
}
 .logo-mobile img{     
	width:100px;
 
}
 .footer-logo{
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .footer-logo img{
     max-width: 100%;
}
 .footer a{
    color: #fff
}
 .footer a:hover{
    color: var(--primary-color);
}
 .footer-social{
    display: flex;
    align-items: center;
    gap: 10px;
}
 .footer-social a{
     color: #fff!important;
}
 .footer-social a i {
     font-size: 16px;
     font-weight: 300;
     color: #fff;
}
 .footer-social a:hover i {
     color: var(--primary-color);
}
 .footer-bottom{
     padding: 30px 0;
     color: #fff;
     font-size: 14px;
}
 .copy{
     display: flex;
     justify-content: space-between;
     align-items: center;
}
 .copy p{
     margin-bottom: 0;
}
 
/*************** INNER PAGE CSS ***************/
 .flex-gap{
    gap:2%;
}
 
 .image-box{
     padding-right:30px;
     padding-bottom:30px;
     position: relative;
     width: 100%;
}
 .stickybar{
     position: sticky !important;
     top: 120px;
}
 .image-box2{
     padding-top:30px;
     padding-left:30px;
}
 .image-box .hover-effect{
     border-radius: 15px;
     -webkit-box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);
     -moz-box-shadow: 0px 0px 34px -15px rgba(0,0,0,0.7);
     box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);
}
 .image-box:after, .image-box2:before{
     content: '';
     width: 40%;
     height: 40%;
     background:#702337;
     border-radius: 15px;
     position: absolute;
     bottom: 0;
     right:0;
     z-index: -1;
}
 .image-box2:before{
     bottom: auto;
     right:auto;
     top:0;
     left:0;
     background:#d7ae6c;
}
 .highlight-text{
     font-size: 18px;
     line-height: 30px;
}
 .wrap-box{
     border-radius: 15px;
     -webkit-box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);
     -moz-box-shadow: 0px 0px 34px -15px rgba(0,0,0,0.7);
     box-shadow: 0px 0px 34px -15px rgb(0 0 0 / 70%);
     overflow: hidden;
}
 ul.list{
     margin:0;
     padding: 0;
     margin-bottom: 30px;
}
 ul.list li{
     list-style: none;
     padding: 1px 7px 3px 20px;
     margin-bottom: 4px;
     line-height: normal;
     position: relative;
}
 ul.list li:before{
     content: "\f111";
     position: absolute;
     top: 8px;
     left:0;
     font-family: "FontAwesome";
     color: var(--white);
     font-size: 6px;
}
 ul.mainlist li{
     font-size: 22px;
     line-height: 22px;
     padding: 5px 7px 3px 20px;
}
 .cnt-wrap {
     background-color: var(--primary-color);
     padding-top: 26px;
     padding-bottom: 20px;
}
 .icon_box {
     padding: 25px 25px 25px 75px;
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
     color: #fff;
     position: relative;
}
 .icon_box i {
     margin: 0;
     padding: 8px;
     border-radius: 100%;
     width: 45px;
     height: 45px;
     text-align: center;
     line-height: 30px;
     color: var(--black);
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
     transition: all 300ms ease-in-out;
     background: var(--white);
     position: absolute;
     top: 30px;
     left: 15px;
}
 .icon_box .descripion {
     display:block;
     overflow:hidden
}
 .icon_box .descripion h5 {
    font-size: 18px;
    margin: 0 0 8px 0;
    text-transform: uppercase;
    color: #fff;
     font-weight: 400
}
 .icon_box p {
    margin:0;
}
 .icon_box a {
     color:#ccc
}
 .icon_box:last-child{
     margin-bottom:0px;
     border-bottom:none;
}
 .cnt-form{
}
 .map{
     overflow: hidden;
     width: 100% 
}
 .map iframe{
}
 .map iframe:hover{
}
 .table-row{
     width: 100%;
     /*overflow-x: scroll;*/
}
 .table-style {
    border-collapse: collapse;
     width: 100%;
}
 .table-style th, .table-style td {
    text-align: left;
    padding: 10px;
    border: 1px solid #494949;
	font-size:14px;
	border-collapse:collapse;
}
 .table-style tr:nth-child(even){
    background-color: rgba(0, 0, 0 ,0.4);
}
 .table-style th {
     background-color:var(--primary-color);
     color: white;
}
/*************** INNER BANNER ***************/
 
.c-scrolldown {
  width: 1px;
  height: 60px;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  overflow: hidden;
}
.c-scrolldown .c-line {
  width: 100%;
  height: 100%;
  display: block;
  background: linear-gradient(to bottom, white 50%, rgba(255, 255, 255, 0) 50%);
  background-position: 0 -60px;
  background-size: 100% 200%;
  animation: scrolldown 2.2s cubic-bezier(0.76, 0, 0.3, 1) forwards infinite;
}
 

@keyframes scrolldown {
  0% {
    background-position: 0 -60px;
  }
  75% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 60px;
  }
}

/*************** INNER BANNER ***************/
.banner { 
 
	width: 100%;
	height:80vh;
	padding-bottom:100px;
	overflow:hidden;	 
	display: flex;
	flex-direction:column;
	position: relative;
	/*align-items: center;*/
	justify-content: flex-end;
	background-repeat: no-repeat;
	background-position: center center;
	-moz-background-size: cover;
	-webkit-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
 
}
.banner:after{
	width: 100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	content:'';
	z-index:1;
	background-color:rgba(0, 0, 0, 0.4);
	/*background-image: linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,1));*/
	opacity:0.5;
}
.banner h2 {
	color:var(--white);	
	font-weight:normal;
	font-family:var(--heading-font);
	font-size:40px;
	line-height:40px;
	margin:0 0 20px 0;
	padding:0;
	position:relative;
	z-index:2;
		justify-content: center;
	text-align:center;
}


.ramada-banner{
	background-image: url(../images/backgrounds/ramada-banner.jpg);
}

.studio-room-banner{
	background-image: url(../images/backgrounds/studio-room.jpg);
}
.onebed-room-banner{
	background-image: url(../images/backgrounds/onebed-room.jpg);
}
/*************************banners ***************/
 
 
.breadcrumb {   
    display: flex;
	color:var(--white);
	margin:0;
	position:relative;
	z-index:2;
	justify-content: center;
	text-align:center;
	 

}
 
.breadcrumb ul {
    
	display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
	/*background-color:var(--primary-color);*/
 

}
.breadcrumb li {
    margin: 0;
	font-size:14px;
	text-transform:uppercase;
	color:var(--white);
	font-weight:var(--font-bold);
	cursor:default;
 
	 
}    
.breadcrumb li:not(:last-child)::after {
    display: inline-block;
    margin: 0 15px;
    /*content: " → "; */
	 content: " / "; 
	 
}
 .breadcrumb a{
  color:var(--white);
}
 .breadcrumb a:hover{
   color:rgba(255, 255, 255, 0.8);
 
}
 

 /**********************/
 .address-box{
	padding:30px;
	background-color:rgba(255, 255, 255, 0.1);
	position:relative;
	outline: 1px solid rgba(255, 255, 255, 0.2);
    outline-offset: -10px;
}
 .address-box:after{
 	width:4px;
	height:50px;
	position:absolute;
	right:0;
	top:0;
	content:'';
	background-color: var(--primary-color);
 }

.content  .address-box{
	background-color:transparent;
}
 
.add{
    width: 100%;
    position: relative;
    padding: 0 0 0 60px;
    min-height: 30px;
    margin-bottom: 20px;
    vertical-align: top;
    line-height: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 20px;
}
.add:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
 
 .add h2{
 	font-size:20px;
	line-height:24px;
	font-weight:normal;
	font-weight:var(--font-medium);
	margin:0 0 10px 0;
	line-height:normal;
 }
.add i{
	width:35px;
	height:35px;
	line-height:35px;
	background-color:var(--primary-color);	 
	color:var(--white);
	font-size:14px;
	margin:0;
	position:absolute;
	left:0;
	top:0;
	text-align:center;
 
	
}
 .google-map{
     overflow: hidden;
     width: 100%;
	 height:450px;
	 margin:0;
	 padding:0;
	 outline:none;
	 border:0;
	 display:block;
}

.ext{
	display:inline-block;
	padding-top:10px;
}
.add a{
	color:var(--body-color);
	}
.add a:hover{
	color:var(--primary-color);
	}


.box-style-dark {
    background-color:#000;
    color: var(--white);
    padding: 40px;
    outline: 1px solid rgba(255, 255, 255, 0.2);
    outline-offset: -10px;
}




/*************** JARALLAX ***************/
 .fix-bg{
      
     background-repeat:no-repeat;
     background-position:center center;
     -moz-background-size:cover;
     -webkit-background-size:cover;
     -o-background-size:cover;
     background-size:cover;
	 background-attachment:fixed;
}
 .bg1{
    background: url(../images/bg1.jpg) no-repeat top center;
}
 .bg2{
    background: url(../images/bg2.jpg) no-repeat top center;
}
 .bg3{
    background: url(../images/bg3.jpg) no-repeat top center;
}

/**********Testimonail**************/

.test-box-style {
    padding: 20px 20px 20px 100px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 35px;
    position: relative;
}
span.quote {
    position: absolute;
    left: 30px;
    top: 13px;
    font-size: 35px;
}
span.date-testi {
    background: var(--primary-color);
    color: var(--white);
    padding: 10px;
    margin: 0;
    position: relative;
    font-size: 15px;
    line-height: 16px;
    display: inline-block;
    margin: 0 0 0px 0;
    font-weight: 400;
    text-align: center;
    margin-bottom: 25px;
}
.test-box-style h3 {
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 500;
}
.test-box-style p {
    font-weight: 200 !important;
}
.author {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
    margin-top: 15px;
    width: 100%;
}
.test-box-style h3 {
    font-size: 22px;
    margin-bottom: 15px;
    font-weight: 500;
}
.author h4 {
    font-size: 17px;
    margin-bottom: 0;
}

.achiv-box-style {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background: var(--primary-color);
}
.lft-img {
    flex: 0 0 35%;
}
.rght-cnt {
    flex: 0 0 65%;
    padding: 35px;
}
.rght-cnt h2 {
    font-size: 27px;
    line-height: 38px;
    margin-bottom: 25px;
}
.lft-img .hover-effect{
    outline: 1px solid var(--primary-color);
    outline-offset: -8px;
}

/**********review**************/

ul.widSSPBullet {
    display: none !important;
}
.widSSPData.withBorder.cx_brand_refresh {
    min-height: 230px !important;
    margin-top: 6px !important;
}
div#CDSWIDSSP {
    width: 100% !important;
}
.review-title {
    width: 100%;
    text-align: left;
    padding-left: 15px;
    border-left: 1px solid var(--primary-color);
    font-size: 30px;
    line-height: 20px;
}
.rivew h3.review-title {
    margin-left: 18px;
}
.rivew .grw-header {
    min-height: 266px !important;
    background: #fff !important;
    padding: 40px 20px !important;
    outline: 1px solid #ccc !important;
    outline-offset: -8px;
}
/**********forms**************/

 form{
     margin:0;
     padding:0;
}
 *:focus {
     outline: none;
}
 .fieldset{
     width: 100%;
     padding: 20px 0;
     background-color: none;
     background-color: transparent;
     display: block;
     border: 0;
	 border-bottom: 1px solid #494949;    
     color: #FFF;
     font-size: 16px;
 
}
 
 .sendbutton{
     width: auto;
     height: auto;
     border: 0;
     outline: 0;
     margin: 0;
     display: inline-block;
     color: #fff;
     font-size: 24px;
     cursor: pointer;
     vertical-align: top;
     padding: 25px;
     text-align: center;
     background-color:var(--primary-color);
     text-transform: uppercase;
     font-weight: var(--font-bold);
     -webkit-transition: all 300ms ease-in-out;
     -moz-transition: all 300ms ease-in-out;
}
 .sendbutton:hover{
     background-color: #000;
}
 .select-box {
     appearance: none;
     -webkit-appearance: none;
     background-image: url(../images/icons/icon5.svg);
     background-repeat: no-repeat;
     background-position: right 15px center;
     background-size: 14px;
}
 
 ::-webkit-input-placeholder {
     color: #626262 !important;
}
 :-moz-placeholder {
    /* Firefox 18- */
     color: #626262 !important;
}
 ::-moz-placeholder {
    /* Firefox 19+ */
     color: #626262 !important;
}
 :-ms-input-placeholder {
     color: #626262 !important;
}
 .ftr-form ::-webkit-input-placeholder {
     color: #fff !important;
}
 .ftr-form :-moz-placeholder {
    /* Firefox 18- */
     color: #fff !important;
}
 .ftr-form ::-moz-placeholder {
    /* Firefox 19+ */
     color: #fff !important;
}
 .ftr-form :-ms-input-placeholder {
     color: #fff !important;
}
 .wpcf7-form-control-wrap {
     position: relative;
}
 


/************************************* 1500px *************************************/
 @media only screen and (max-width: 1500px) {
    .facilities-section .smd30 {
        width: 40%;
    }
    .facilities-section .smd60 {
        width: 55%;
    }

 }

/************************************* 1366px *************************************/
 @media only screen and (max-width: 1400px) {
    .container{
         width:100%;
		 padding:0 25px;
    }
	  h3 {
         font-size: 22px;
    }
     .f-cont {
         margin-top: 40px;
         padding-left: 30px;
    }
     .splitbg{
         width: 27%;
    }
     .left-wrap {
         padding-left: 5%;
    }
    .expanding-div h3 {
        font-size: 25px;
    }
    .expanding-div {
        height: 450px;
    }
}
/************************************* 1180px *************************************/
 
/************************************* 1024px *************************************/
 @media only screen and (max-width: 1024px) {


 .topbar-wrap{
      display:none;
}


.scroller-wrap{
	width:100%;
 
}

 .footer-top{
     flex-direction:column;
}

 .footer-middle{
     	 padding:20px 0;
}
 .footer-div{
     flex:0 0  50%;
     border-left:0;
     padding:0;
     
}
 
 .green-link{
     width:100%;
	 justify-content: center;
	 margin-bottom:20px;
}
 .green-link img{
 	width:200px;
 }
 .certified{
     width:100%;
	 display:flex;
	 justify-content: center;
	 gap:0 5px;
	 
}
 .certified img{
 	 width:100px;
	display:block;
 }
 .logo-desktop{     
	 display:none !important;

}
 .logo-mobile{     
	 display:flex !important;

}
 .footer-logo img{
     max-width: 40%;
}
.copy{
 	display: flex;
	flex-direction:column;
	gap:10px 0;
 }
.copy div{
	width:100%;
}
.facilities-section .smd30 {
    width: 100%;
}
.facilities-section .smd60 {
    width: 100%;
}

}
/************************************* 980px *************************************/
 @media only screen and (max-width: 980px) {
     .menu-wrap {
         position: relative;
         width: 100%;
         left: 0px;
         bottom: 1px;
         margin-top: 0;
    }
 
     .room-cont {
         padding: 15px 10px;
    }
     .expanding-div h3 {
         font-size: 25px;
         line-height: 25px;
         margin-bottom: 15px;
    }
	 .section-spacing{
	  padding:50px 0;
 }
}
 
/************************************* 768px *************************************/
 @media only screen and (max-width: 768px) {
 
header{
     position:relative;
	 top:0;
     left:0;
	 display:flex;
     background-image: none;
	 background-color:var(--black)
}

 header.smaller {
     top:0;
     left:0;
     position:fixed;
 
}
.header,  header.smaller .header{
     padding:10px 0;
}

.logo img, header.smaller .logo img{
    width: 120px;
}
 

.banner { 
	height:50vh;
	 
}
 .left-wrap {
     padding:0 20px;
     width: 100%;
}

.table-row{
     overflow-x: scroll;
}

.heading{
     font-size: 26px;
     line-height: 30px;
     
}
 
 .heading-small,  .subheading{
     font-size: 20px;
     line-height: 24px;
     
}
 .title-small{
     font-size: 18px;
     line-height: 20px; 
      
}
 .subtitle{
     font-size: 20px;
     line-height: 24px;
}
/************/


 
 .expanding-div{
     overflow: hidden;
     height: 300px;
}

  
 
 .expanding-div h3{
     font-size: 14px;
     line-height:14px;
     margin-bottom: 10px;
}
 .fixed-head{

	 padding:10px;
	  font-size: 14px;
     line-height:14x;	 
	  
 
 }
 .room-cont{
     padding:10px;
     bottom: -150px;
 
      
}
 .room-cont p{
	 margin:0 0 20px 0;
	 font-size:12px;
	 display:none;
}
  .more {
     font-size:10px;
	 }

 /******/
 .dining{
     padding:0;
}
 .diningbox{
    position:relative;
    top:auto;
    left:auto;
    height: auto;
    padding: 20px;
    align-items: flex-start;
    flex-direction:column;
	background-color: var(--primary-color) ;
	width: 100%;
}
 .diningbox-cont{
     width: 100%;
 
}
 .diningbox-cont h3{
	 font-size:24px;
	 line-height:normal;
 
}
 .dining-img{
     display:none;
}
 
 ul.mainlist li{
     font-size: 16px;
     line-height: 20px;
     padding: 5px 7px 3px 20px;
}
 .bannerH p{
 
     font-size: 30px;
     line-height: 30px; 
     letter-spacing: 0;
}
 .bannerH p .sep {
     margin: 0 30px;
}
.tours-ajman-box{
     width: 90%;   
}
 .tours-ajman-box:after{
     content: '';
     width: 100%;
     height: 100%;
     bottom: -15px;
     right: -15px
}
 .tours-ajman-cont{
     padding: 20px;
     height: auto;     
     top:auto;
     bottom:0;
	 background-color:rgba(0, 0, 0, 0.5);
}
.left-img, .right-img{
	display:none;
}
 .splitbg{
    display:none;
}
.res-pad{
	padding-top:0;
}
.header-right .inline {
    display: none;
}
.lft-img {
    flex: 0 0 100%;
}
.rght-cnt {
    flex: 0 0 100%;
    padding: 20x;
}

}
/************************************* 640px *************************************/
 @media only screen and (max-width: 640px) {
 
 
.heading-small {
	font-size:20px;
	line-height:normal;
}
.test-box-style {
    padding: 20px;
}
span.quote {
    display: none;
}
}
/************************************* 480px *************************************/
 @media only screen and (max-width: 480px) {
}
/************************************* 360px *************************************/
 @media only screen and (max-width: 360px) {
}
/************************************* 320px *************************************/
 @media only screen and (max-width: 320px) {
}