/* General Styles - applied accross all pages */

body {
	margin: 0;
	padding: 0;
	font-family: Montserrat, sans-serif;
	background-color: azure;
}

/* Header */
.header {
	width: 992px;
	height: 120px;
	margin: 30px auto 20px auto;
}

.logo { 
	float: left; 
	width: 120px; 
	height: 80px; 
	margin: 20px; 
} 
	
.logo img { 
	width: 100%; 
	height: 100%; 
	display: block; 
}

/* Navigation */
.navigation {
			float: left;
			margin-top: 40px;
			margin-left: 120px;
}

.navigation a {
			display: inline-block;
			width: 110px;
			height: 35px;
			background-color: cadetblue;
			color: white;
			text-align: center;
			line-height: 35px;
			margin-right: 10px;
			font-size: 14px;
			text-decoration: none;
}
/* Index page*/
		
/* Hero */
.hero {
			width: 992px;
			height: 400px;
			margin: 0 auto 20px auto;
			border: 1px solid azure;
			overflow: hidden;
}

.hero-left {
			float: left;
			width: 75%;
			height: 100%;
			position: relative;
}

.hero-left img {
			width: 100%;
			height: 100%;
			display: block;
}

.cta {
			position: absolute;
			top: 60px;
			left: 40px;
			color: white;
}

.cta h2 {
			margin: 0 0 10px 0;
}

.cta a {
			display: inline-block;
			background-color: cadetblue;
			border-radius: 10px;
			color: white;
			padding: 10px 20px;
			text-decoration: none;
}

.hero-right {
			float: left;
			width: 25%;
			height: 100%;
}

.hero-right video {
			width: 100%;
			height: 100%;
			object-fit: cover;
}

/* Text section index page */
.info {
			width: 992px;
			height: 220px;
			margin: 0 auto;
			text-align: center;
			padding-top: 40px;
			box-sizing: border-box;
			margin-top: auto;
}

.info h1 {
			margin: 0 0 20px 0;
			font-size: 34px;
}
.info p {
			width: 760px;
			margin: auto;
			font-size: 16px;
			line-height: 24px;
}

/* Footer */
.footer {
			width: 992px;
			height: 60px;
			margin: 0 auto 30px auto;
			border: 1px solid azure;
			padding: 0 10px;
			box-sizing: border-box;
			line-height: 60px;
			overflow: hidden;
}

/* Left side */
.footer-left {
			float: left;
			font-size: 14px;
			font-weight: bold;
}

/* Right side */
.footer-right {
			float: right;
}

/* Icon links */
.footer-right a {
			display: inline-block;
			width: 28px;
			height: 28px;
			text-align: center;
			line-height: 28px;
			text-decoration: none;
			vertical-align: middle;
}

/* Icon Images */
.footer-right img {
			width: 18px;
			height: 18px;
			object-fit: contain;
}

/* Apartment */

/* Header */
.apartment-page {
			width: 992px;
			margin: 0 auto; 
			text-align: center;
}

.apartment-intro h1 {
			margin: 0 0 20px 0;
			font-size: 34px;
}

.apartment-intro p {
			width: 700px;
			margin: 0 auto 20px auto;
			line-height: 24px;
}

.cta-button {
			display: inline-block;
			background-color: cadetblue;
			border-radius: 10px;
			color: white;
			padding: 12px 25px;
			text-decoration: none;
}

/* Gallery Apartment*/

.gallery-row {
			width: 992px;
			margin: 0 auto 20px auto;
			text-align: center;
}

.gallery {
			display: inline-block;
			width: 32%;
			text-align: center;
			vertical-align: top;
}

.gallery img {
			width: 100%;
			height: 180px;
			object-fit: cover;
			display: block;
}

/* Text section Apartment page */
.bottom-section {
			width: 992px;
			margin: 40px auto 40px auto; 
			height: 260px		
}

.bottom-text {
			float: left;
			width: 55%;
			text-align: left;
}

.bottom-text h2 {
			margin: 0 0 15px 0;
			font-size: 28px;
}

.bottom-text p {
			margin: 0;
			line-height: 24px;
			font-size: 16px;
}

.bottom-residence {
			width: 380px;
			height: 260px;
			float: right;
}

.bottom-residence img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
}

/* assilah */

/* Text section Assilah page */
.assilah-intro {
			width: 992px;
			margin: 0 auto;
			text-align: center;
			padding-top: 40px;
}

.assilah-intro h1 {
			margin: 0 0 20px 0;
			font-size: 34px;
}
.assilah-intro p {
			width: 600px;
			margin: 0 auto;
			font-size: 16px;
			line-height: 24px;
}

/* Gallery Apartment*/

.city-row {
			width: 992px;
			margin: 0 auto 20px auto;
			text-align: center;
}

.city {
			display: inline-block;
			width: 32%;
			vertical-align: top;
}

.city img {
			width: 100%;
			height: 180px;
			object-fit: cover;
			display: block;
}

/* Contact*/

/* Text section Assilah page */
.contact-page {
			width: 992px;
			margin: 0 auto 40px auto;
}

.contact-intro {
			text-align: center;
			margin-bottom: 30px;
}
.contact-main {
			width: 992px;
			margin: auto;
			overflow: auto;
}

.contact-left {
			float: left;
			width: 50%;
			margin-top: 40px
}

.map {
			float: right;
			width: 45%;

}
.map iframe {
			width: 100%;
			height: 250px;
			border: 0;
}
.book-cta {
			width: 992px;
			text-align: center;
			margin-top: 30px;

}

.book-cta a {
			display: inline-block;
			background-color: cadetblue;
			border-radius: 10px;
			color: white;
			padding: 12px 25px;
			text-decoration: none;
}