/* CSS Document */


/*  REFERENCE COLOURS
Background Taupe:    #f1efec
Dark Brown:	      	 #291b08
Text Colour:         #333
Brown:	       #743523
Blue:          #009391
AB Green:      #848c82
AB Purple: 	   #593857
Pink:    	   #E34264
*/



/*  GUIDE LINES */


/*
.showborderred    {border: 2px solid red; }
.showborderaqua   {border: 1px solid aqua; }
.showborderpurple {border: 4px solid purple; }
.showborderblack  {border: 1px solid black; }
.showbordergreen  {border: 4px solid green; }
.showborderorange {border: 1px solid orange; }
.showborderpink   {border: 1px solid pink; }
.showborderyellow {border: 1px solid yellow;}
*/




/* ====== RESET - Initial ====== */
*, *::before, *::after { padding: 0; margin: 0; font: inherit; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #fff; min-height: 100vh; overflow-x: hidden; }
ol, ul { list-style: none; }
a { text-decoration: none; }

/* ====== DEFAULTS ====== */
div { display: block; }
span { display: inline; }
img { display: inline-block; }

/* ====== RESET - Override ====== removed  svg */
img, picture, video { display: block; max-width: 100%; height: auto; }






/* ====== FONT STYLES ====== */
body { 
	font-family: 'Rubik', sans-serif;
	color: #333;
	font-weight: 300;
	font-size: 16px;
	line-height: 1.65em; }

p { 	
	font-family: 'Rubik', sans-serif;
	color: #333;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.65em; 
	margin-bottom: 16px; }

h1 { font-family: 'Playfair Display'; font-size: 36px; color: #ffffff9c; line-height: 1.5em; }
h2 { font-family: 'Playfair Display'; font-size: 35px; color: #291b08; line-height: 1.5em; }
@media (min-width: 480px) { h2 { font-size: 36px; } }

h3 { font-family: 'Rubik', sans-serif; font-size: 16px; color: #333; font-weight: 400; font-style: normal; margin-bottom: 16px; line-height: 1.5em; }
h4 { font-family: 'Rubik', sans-serif; font-size: 18px; color: #333; font-weight: 400; font-style: normal; margin-bottom: 22px; line-height: 1.7em; }
h5 { font-family: 'Rubik', sans-serif; font-size: 26px; color: #fff; font-weight: 600; font-style: normal; margin-bottom: 16px; line-height: 1.5em; }
h6 { font-family: 'Rubik', sans-serif; font-size: 16px; color: #fff; font-weight: 300; font-style: normal; margin-bottom: 16px; line-height: 1.5em; }




/* ====== MARGINS & PADDING ====== */

.mt-20 { margin-top: 20px; }
.mt-40 { margin-top: 40px; }
.mt-60 { margin-top: 60px; }
.mt-80 { margin-top: 80px; }
.mt-100 { margin-top: 100px; }
.mt-120 { margin-top: 120px; }

.mb-20 { margin-bottom: 20px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }
.mb-70 { margin-bottom: 70px; }
.mb-80 { margin-bottom: 80px; }
.mb-100 { margin-bottom: 100px; }
.mb-120 { margin-bottom: 120px; }

.pt-10 { padding-top: 10px; }
.pt-20 { padding-top: 20px; }
.pt-40 { padding-top: 40px; }
.pt-60 { padding-top: 60px; }
.pt-80 { padding-top: 80px; }
.pt-100 { padding-top: 100px; }
.pt-120 { padding-top: 120px; }

.pb-40 { padding-bottom: 40px; }
.pb-60 { padding-bottom: 60px; }
.pb-80 { padding-bottom: 80px; }
.pb-100 { padding-bottom: 100px; }
.pb-120 { padding-bottom: 120px; }

.pleft-40 { padding-left: 40px; }
.pleft-80 { padding-left: 80px; }





/* ====== LINKS & MISCELLANEOUS STYLES ====== */

a:link { color: #291b08; }
a:visited { color: #291b08; }
a:hover { color: #D29347; }
a:active { color: #D29347; }

footer a:link { color: #c7c6c3; }
footer a:visited { color: #c7c6c3; }
footer a:hover { color: #D29347; }
footer a:active { color: #D29347; }


.uppercase { text-transform: uppercase; }
.semi-bold { font-weight: 400; }
.bold { font-weight: 600; }
.italic { font-style: oblique; }
.text-opaque { color: #ffffffe8; }
.text-centered { text-align: center; }
.vertical-align-text { display: grid; align-items: center; }
.bg-taupe { background: #f1efec; }

.main-logo-centered { margin-inline: auto; width: fit-content; padding-right: 40px; }




	



/* ====== STRUCTURAL SELECTORS ====== */

header    { width: 100%; }
nav       { width: 100%; margin-bottom: 6px; z-index: 10; }
main      { width: 100%; /* max-width: 1200px; margin: 0 auto; */ }
footer    { width: 100%; background: #291b08; padding: 40px 0 100px 0; }
section   { width: 100%; margin: 0; }
container { display: block; width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
row       { display: flex; width: 100%; min-height: 260px; }










/* ====== PAGE HEADER ====== */

.header-home {
    display: flex;
    justify-content: center;
    align-items: center;
	background: rgba(0,0,0,0.4);
    height: 100vh; }

.video-home {
    position: absolute;
	object-fit: cover;
    width: 100vw;
	height: 100vh;
    z-index: -1; }



.header-subpage {
    display: flex;
    justify-content: center;
    align-items: center;
	background: rgba(0,0,0,0.4);
    height: 80vh; }

.video-subpage {
    position: absolute;
	object-fit: cover;
    width: 100vw;
	height: 80vh;
    z-index: -1; }




.header-device { max-width: 600px; margin-inline: auto; display: flex; justify-content: center; }
.header-statement { text-align: center; margin-top: 40px; }




.mute-button {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 99;
    background: none;
    border: none;
    color: #593857b8;
    background: #fff;
    opacity: .5;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    padding: 5px;
    text-align: center;
	cursor: pointer; }
	
.mute-button:before {
	content: '\f027';
    font-family: 'icomoon';
    font-size: 22px;
    position: absolute;
    top: 4px;
    left: 8px; 	}
	
.mute-button.active:before {
	content: '\f028';
    font-family: 'icomoon';
    font-size: 22px;
    position: absolute;
    top: 4px;
    left: 8px; 	}








/* ======================================================== GRID CONTAINERS ====== */

.grid-container-3col-fluid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px; }
@media ( width > 1200px ) { .grid-container-3col-fluid { gap: 100px; } }

.grid-container-4col-fluid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px; }
@media ( width > 1200px ) { .grid-container-4col-fluid { gap: 60px; } }









/* ======================================================== OVERLAPPING IMAGES AND INFO ====== */

.columns2 {
	display: flex;
	flex-direction: column;
	row-gap: 80px; }
@media (width > 840px ) { .columns2 { flex-direction: row; column-gap: 60px; } }
@media (width > 1180px ) { .columns2 { flex-direction: row; column-gap: 90px; } }
@media (width > 1400px ) { .columns2 { flex-direction: row; column-gap: 120px; } }
	
.columns2-image { width: 100%; }
	
.columns2-text { width: 100%; }
@media (width > 840px ) { .columns2-text { width: 100%; max-width: 540px; } }
	
	


.image-overlap-left { display: block; }
@media (width < 840px ) { .image-overlap-left { display: grid; } }
@media (width > 980px ) { .image-overlap-left { display: grid; } }

.image-overlap-left img { grid-area: 1 / 1; }
	
.image-back-left { padding-right: 0; margin-bottom: 20px; }
@media (width < 840px ) { .image-back-left { padding-right: 10%; } }
@media (width > 980px ) { .image-back-left { padding-right: 10%; margin-bottom: 0; } }

.image-front-left { width: 100%; }
@media (width < 840px ) {
.image-front-left {
	width: 50%;
    justify-self: end;
    align-self: end;
    transform: translateY(30%);
    border-top: 10px solid white;
    border-left: 10px solid white; } }
@media (width > 980px ) {
.image-front-left {
	width: 50%;
    justify-self: end;
    align-self: end;
    transform: translateY(30%);
    border-top: 10px solid white;
    border-left: 10px solid white; } }
	
.image-left-border-taupe { border: 0; }
@media (width < 840px ) { .image-left-border-taupe { border-top: 10px solid #f1efec; border-left: 10px solid #f1efec; } }
@media (width > 980px ) { .image-left-border-taupe { border-top: 10px solid #f1efec; border-left: 10px solid #f1efec; } }
	
.image-left-border-white { border: 0; }
@media (width < 840px ) { .image-left-border-white { border-top: 10px solid #fff; border-left: 10px solid #fff; } }
@media (width > 980px ) { .image-left-border-white { border-top: 10px solid #fff; border-left: 10px solid #fff; } }




.image-overlap-right { display: block; }
@media (width < 840px ) { .image-overlap-right { display: grid; } }
@media (width > 980px ) { .image-overlap-right { display: grid; } }

.image-overlap-right img { grid-area: 1 / 1; }

.image-back-right { padding-right: 0; margin-bottom: 20px; }
@media (width < 840px ) { .image-back-right { padding-left: 10%; } }
@media (width > 980px ) { .image-back-right { padding-left: 10%; margin-bottom: 0; } }

.image-front-right { width: 100%; }
@media (width < 840px ) {
.image-front-right {
	width: 50%;
    justify-self: start;
    align-self: end;
    transform: translateY(30%);
    border-top: 10px solid white;
    border-left: 10px solid white; } }
@media (width > 980px ) {
.image-front-right {
	width: 50%;
    justify-self: start;
    align-self: end;
    transform: translateY(30%);
    border-top: 10px solid white;
    border-left: 10px solid white; } }
	


.image-right-border-taupe { border: 0; }
@media (width < 840px ) { .image-right-border-taupe { border-top: 10px solid #f1efec; border-right: 10px solid #f1efec; } }
@media (width > 980px ) { .image-right-border-taupe { border-top: 10px solid #f1efec; border-right: 10px solid #f1efec; } }
	
.image-right-border-white { border: 0; }
@media (width < 840px ) { .image-right-border-white { border-top: 10px solid #fff; border-right: 10px solid #fff; } }
@media (width > 980px ) { .image-right-border-white { border-top: 10px solid #fff; border-right: 10px solid #fff; } }


.image-left-border-taupe { border: 0; }
@media (width < 840px ) { .image-left-border-taupe { border-top: 10px solid #f1efec; border-left: 10px solid #f1efec; } }
@media (width > 980px ) { .image-left-border-taupe { border-top: 10px solid #f1efec; border-left: 10px solid #f1efec; } }
	
.image-left-border-white { border: 0; }
@media (width < 840px ) { .image-left-border-white { border-top: 10px solid #fff; border-left: 10px solid #fff; } }
@media (width > 980px ) { .image-left-border-white { border-top: 10px solid #fff; border-left: 10px solid #fff; } }



.container-spacer { margin-bottom: 80px; }
@media (width > 980px ) { .container-spacer { margin-bottom: 180px; } }








/* ======================================================== PARALAX SECTION ====== */

.background-image-parallax-wellness {
	position: relative;
	background-image: url("../images/background-wellness.jpg");
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
background-attachment: fixed; }
	
.background-image-parallax-wellness::before {
    content: "";
    position: absolute;
    inset: 0;
	top: 240px;
    background: linear-gradient(0deg, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0)); }
	



.background-image-parallax-lotus {
	position: relative;
	background-image: url("../images/background-lotus.jpg");
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
background-attachment: fixed; }
	
.background-image-parallax-lotus::before {
    content: "";
    position: absolute;
    inset: 0;
	top: 120px;
    background: linear-gradient(0deg, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0)); }




.background-image-parallax-qayaam {
	position: relative;
	background-image: url("../images/background-qayaamyoga.jpg");
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
background-attachment: fixed; }
	
.background-image-parallax-qayaam::before {
    content: "";
    position: absolute;
    inset: 0;
	top: 30px;
    background: linear-gradient(0deg, rgb(92 130 160 / 0.8), rgb(0 0 0 / 0)); }




.background-image-parallax-sukoon {
	position: relative;
	background-image: url("../images/background-sukoon.jpg");
	background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
background-attachment: fixed; }
	
.background-image-parallax-sukoon::before {
    content: "";
    position: absolute;
    inset: 0;
	top: 120px;
    background: linear-gradient(0deg, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0)); }



.image-spacer { height: 340px; }

.fullwidth-banner-link {
	position: absolute;
    width: 100%;
    justify-content: center;
	padding-bottom: 16px;
    bottom: 0; }




.bannercontainer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between; }
@media (min-width: 700px) { .bannercontainer { flex-wrap: nowrap; } }

.banner-text {
	width: 100%;
	padding-right: 20px;
	max-width: 1020px; }



.banner-button { width: 106px; }


.banner-text h2 { font-size: 30px; line-height: 1.2em; }



	




/* ======================================================== EXPERIENCES SECTION ====== */
	
.card-image {
  position: relative; }
	
	
.experience-image {   opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden; }
	
	
.card-middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center; }
	
	
.card-image:hover .experience-image { opacity: 0.3; }

.card-image:hover .card-middle { opacity: 1; }
	
.card-text { color: white; font-size: 16px; }



.cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center; }
@media (min-width: 700px) { .cta { flex-wrap: nowrap; } }


.cta-text {
	padding-top: 10px;
	width: 100%;
	padding-right: 20px;
	max-width: 790px; }


.destinationlogos-all { display: flex; justify-content: space-evenly; }

.destinationlogo { max-width: 120px; }

.abclogo { margin-inline: auto; width: 180px; }	













/* ===== FOOTER ===== */



footer p {
	font-family: 'Rubik', sans-serif;
    color: #c7c6c3;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.65em;
    margin-bottom: 32px;
    margin-left: 16px; }
	
.addressheader {
    font-weight: 400;
    font-size: 16px;
    line-height: 1.65em;
	margin-left: -16px; }
	



	
.error { background-color: #F7902D;  margin-bottom: 40px; }
	
.success { background-color: #48e0a4; }
	
.g-recaptcha { margin: 0 0 25px 0; max-width: 310px; }
	
.form-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; }
	
.buttonarea { padding-top: 16px; width: 100%; max-width: 156px; }
	


.firstnamefield {
	display: none; }

input[type=checkbox] {
    transform: scale(1.3);
    float: right; }

.noshow { display: none; }

.form-row-input {
    margin-bottom: 26px;
    width: 100%; }

.form-row-checkboxes {
	margin-top: 12px;
    margin-bottom: 12px;
    width: 100%; }

.form-row-textarea {
    margin-bottom: 0px;
    width: 100%; }

.form-row-submit {
    margin-bottom: 12px;
    width: 100%; }



/* Not Needed as No labels */
.formstyle label {
    padding: 8px 0px 8px 0px;
	margin-bottom: 0px;
    font-size: 14px;
    color: #4d4d4d; }



.inputstyle {
    padding: 8px;
    margin-bottom: 0px;
    border: 0;
    border-bottom: 1px solid #bfbcb3;
    background-color: #291b08;
    width: 100%;
	color: #f1efec; }



.form-button {
    float: right;
    background-color: #0c2a29;
    border: 0px solid #999;
    border-radius: 16px;
    padding: 7px 26px 6px 26px;
    margin: 10px;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 14px;
    text-transform: uppercase;
    transition-duration: 0.3s;
    cursor: pointer;
    display: inline-block;
    box-shadow: 1px 2px 8px #888888; }

.form-button:hover {
    background-color: #929292; }



.form-section-item {
	padding-left: 40px;
	padding-right: 80px;
	margin-top: 6px; }


















.footer-signoff {
	display: flex;
    justify-content: center; }

.footer-signoff p {
    color: #fff;
    font-weight: 400;
    font-size: 12px;
    text-align: center; }

	
.social-icon-group { display: flex; }
			
.social-icon-link { padding: 0 10px;	}

.social-icon-link svg { width: 34px;  fill: #fff; }
	
.social-icon-link svg:hover { fill: #d29347; }






.button-1 { 
	display: inline-block;
	padding: 6px 32px;
	border-radius: 20px;
	border: 1px solid #fff;
	font-size: 13px; }
a.button-1 { color: #fff; }
.button-1:hover { background-color: #D29347; }


.button-2 { 
	display: inline-block;
	padding: 6px 32px;
	border-radius: 20px;
	border: 1px solid #656464;
	font-size: 13px; }
a.button-2 { color: #656464; }
.button-2:hover { color: #fff; background-color: #D29347; }


.button-3 { 
	display: inline-block;
	padding: 6px 32px;
	border-radius: 20px;
	border: 1px solid #bfbcb3;
	font-size: 13px;
	background: #291b08;
	color: #bfbcb3;
	float: right; }
.button-3:hover { cursor: pointer; color: #fff; background-color: #D29347; }