* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-transform: capitalize;
}

@font-face {
    font-family: 'black';
    src: url('../fonts/FrankRuhlLibre-Black.ttf') format('woff2');
    /* src: url('../fonts/LORA-REGULAR.ttf') format('truetype');     */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bold';
    src: url('../fonts/FrankRuhlLibre-Bold.ttf') format('woff2');
    /* src: url('../fonts/Lora-Italic-VariableFont_wght.ttf') format('truetype');     */
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'extra-bold';
    src: url('../fonts/FrankRuhlLibre-ExtraBold.ttf') format('woff2');
    /* src: url('../fonts/BITTER-REGULAR.ttf') format('truetype');     */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'light';
    src: url('../fonts/FrankRuhlLibre-Light.ttf') format('woff2');
    /* src: url('../fonts/Bitter-Light.ttf') format('truetype'); */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'medium';
    src: url('../fonts/FrankRuhlLibre-Medium.ttf') format('woff2');
    /* src: url('../fonts/Bitter-Light.ttf') format('truetype'); */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'regular';
    src: url('../fonts/FrankRuhlLibre-Regular.ttf') format('woff2');
    /* src: url('../fonts/Bitter-Light.ttf') format('truetype'); */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'semibold';
    src: url('../fonts/FrankRuhlLibre-SemiBold.ttf') format('woff2');
    /* src: url('../fonts/Bitter-Light.ttf') format('truetype'); */
    font-weight: normal;
    font-style: normal;
}

html,
body {
    font-size: 62.5%;
}

body {
    font-family: 'regular';
    background-image: url(../images/Homepage\ -\ Desktop\ -\ 1920.png);
    background-repeat: no-repeat;
    overflow-x: hidden;
}

.carousel-indicators [data-bs-target] {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 21px;
    height: 19px;
    padding: 0;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity .6s ease;
    border-radius: 50%;
}

.image-container {
    width: 100%;
    height: 108vh;
    background-image: url(../images/main-banner.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 4rem;
}

.navbar-nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7rem;
    list-style: none;
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item a {
    color: #44766c;
    font-size: 1.8rem;
    text-decoration: none;
    padding-bottom: .2rem;
    padding-left: .4rem;
    font-family: 'medium';
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item.navbar-brand-logo {
    width: 18rem;
    height: 23rem;
}

.nav-container .navbar .container .collapse .navbar-nav .nav-item.navbar-brand-logo img {
    width: 100%;
    height: 100%;
}

.nav-container .navbar .container .nav-item img {
    width: 5.8rem;
}

.navbar-brand-logo img {
    width: 100%;
    height: 100%;
}


.home-carousel {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
}

.carousel-caption {
    width: 100%;
    padding-left: 50rem;
    padding-top: 28rem;
}

.carousel-caption h1 {
    font-size: 5.6rem;
    font-family: 'regular';
    color: #fff;
}

.heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-family: 'regular';
}

.heading img {
    width: 8rem;
}

.luxurious-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 13rem;
}

.luxurious-section .row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.luxurious-section .row .luxurious-content {
    width: 45rem;
    margin-top: -23rem;
    margin-right: 0rem;
    font-family: 'regular';
}

.luxurious-section .luxurious-content .heading {
    align-items: flex-start;
}

.luxurious-section .row .luxurious-content p {
    font-family: "regular";
    font-size: 3.4rem;
}

.luxurious-section .row .luxurious-content h3 {
    font-family: "regular";
    padding-top: 2rem;
    padding-left: 2rem;
    font-size: 2.2rem;
    color: #000;
}

.luxurious-section .row .luxurious-content .text {
    margin-left: -2.4rem;
    margin-top: 3rem;
    text-decoration: none;
}

.luxurious-section .row .luxurious-content .text img {
    width: 22rem;
    padding-left: 2rem;
}

.luxurious-section .col {
    width: 93.5rem;
    height: 66.3rem;
}

.luxurious-section .col img {
    width: 100%;
    height: 100%;
}

.location-section {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8rem 19rem;
}

.location-section .location-image {
    display: none;
}

.location-section .row {
    width: 141rem;
    height: 49rem;
    background-image: url(../images/exp-bg.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right;
    display: flex;
    align-items: center;
}

.location-section .lead {
    width: 75rem;
    padding: 2rem 4.5rem;
    font-family: 'regular';
}

.location-section .lead .bold {
    font-size: 3rem;
    font-family: "regular";
    color: #fff;
}

.location-section .lead p {
    color: #fff;
    font-size: 1.8rem;
    padding: 1rem 0;
    font-family: "regular";
}

.amenities-section {
    width: 100%;
    height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.amenities-section .container-fluid h2 {
    font-size: 3.4rem;
    text-align: center;
    font-family: 'regular';
}

.amenities-section a {
    color: #000;
    text-decoration: none;
    font-family: 'regular';
}

.amenities-section .container-fluid .row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding-top: 4rem;
}

.amenities-section .container-fluid .row .col img {
    width: 24rem;
}

.amenities-section .container-fluid .row .col p {
    font-size: 2rem;
    margin-top: 1rem;
    font-family: 'regular';
}

.book-online-section .heading {
    margin-bottom: 5rem;
}

.book-online-section h2 {
    font-size: 3.4rem;
    font-family: 'regular';
}

.book-online-section {
    width: 100%;
    /*height: 70vh;*/
	height: auto;
}

.book-online-section .container,
.book-online-section .container .row,
.book-online-section .container .row .col-md-12,
.book-online-section .container .row .col-md-12 .lead,
.book-online-section .container .row .col-md-12 .lead .google-map {
    width: 100%;
    /*height: 100%;*/
}

.book-online-section iframe {
    width: 100%;
    height: 55vh;
	border: 0;
}


.cottages-section {
    width: 100%;
    height: 100vh;
    background-image: url(../images/facilities-bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 3rem 0;
}

.cottages-section h2 {
    font-size: 3.4rem;
    font-family: 'regular';
}

.cottages-section .container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-top: 1rem;
    margin-left: 20rem;
    gap: 0rem;
}

.cottages-section .container .other-text {
    margin-left: -10rem;
    color: #000;
    text-decoration: none;
}

.cottages-section .container .other-text h2 {
    font-size: 2rem;
    padding: 0 4rem;
    font-family: 'regular';
}

.cottages-section .container .other-text img {
    width: 20rem;
    margin-left: 4rem;
}

.cottages-section .container .details {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 6rem;
    font-family: 'regular';
}

.cottages-section .container .details .box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.cottages-section .container .details .box h3 {
    font-size: 1.8rem;
    font-family: 'regular';
}

.cottages-section .cottages-image {
    display: none;
}

.footer-section {
    width: 100%;
    height: 60vh;
    background-image: url(../images/footer.jpg);
    background-size: cover;
    background-position: bottom;
    display: flex;
    align-items: center;
    justify-content: center;
	
	position: relative;
}

				/* Studio credit*/
				.footer-section .pb-credit {
					position: absolute;
					bottom: 9rem;
					left: 50%;
					transform: translateX(-50%);
					text-align: center;
					font-family: 'semibold';
				}
				/* Studio credit*/


.footer-section ul {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rem;
}

.footer-section ul li {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.footer-section ul li a {
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    font-family: 'regular';
}

.footer-section .nav-img {
    width: 6.9rem;
}

.footer-section .navbar-brand-logo {
    width: 18rem;
    height: 23rem;
}

.footer-section .navbar-brand-logo img {
    width: 100%;
    height: 100%;
}


	/* Studio credit – FINAL FIX */
	.footer-section .pb-credit {
		margin-top: 2.2rem;
		padding-bottom: 1.2rem;
		text-align: center;

		font-family: 'semibold';           /* DIFFERENT from body */
		font-size: 1.2rem;
		letter-spacing: 0.12em;

		text-transform: none;           /* OVERRIDES global * rule */
		color: #98EBCB;
	}

	.footer-section .pb-credit span {
		margin-right: 0.6rem;
	}

	.footer-section .pb-credit a {
		color: #FFC518;
		text-decoration: none;
		font-family: 'semibold';
	}

	.footer-section .pb-credit a:hover {
		text-decoration: underline;
	}

	.footer-section .pb-credit {
		margin-top: auto;
		padding-bottom: 2rem;
	}


	/* Studio credit footer */


/*Tab device*/
@media (max-width: 1024px) {

    body {
        font-size: 55%;
        background-image: url(../images/Homepage\ -\ Tablet\ -\ 1024.png );
        background-repeat: no-repeat;
    }

    .image-container,
    .luxurious-section,
    .location-section,
    .cottages-section,
    .amenities-section,
    .book-online-section,
    .footer-section {
        overflow: hidden;
    }

    .carousel-caption {
        width: 100%;
        padding-left: 8rem;
        padding-top: 20rem;
    }

    .luxurious-section .row {
        flex-direction: column;
    }

    .luxurious-section .row .luxurious-content {
        width: 65rem;
        margin-top: 0;
        margin-left: 0%;
    }

    .luxurious-section .col {
        width: 66rem;
        height: 50rem;
    }

    .luxurious-section {
        width: 100%;
        height: 90rem;
    }

    .location-section {
        width: 100%;
        height: auto;
        display: block;
    }

    .location-section .row {
        width: 77rem;
        height: 47.2rem;
        background-color: #506E52;
        background-image: none;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 1rem;
        margin-right: -2rem;
        float: right;
    }

    .location-section .lead {
        width: 80%;
        padding: 0;
    }

    .location-section .lead p {
        font-size: 1.7rem;
        letter-spacing: .1rem;
    }

    .location-section .lead .bold {
        font-size: 2.5rem;
        font-weight: 500;
        padding-bottom: 2rem;
    }

    .location-section .location-image {
        display: block;
        width: 58.5rem;
        height: 49rem;
        margin-left: -2rem;
        float: left;
        margin-bottom: 2rem;
    }

    .cottages-section {
        width: 100%;
        height: auto;
        background-image: none;
    }

    .cottages-section .container {
        background-color: #CCD6CC;
        width: 100%;
        height: 72.3rem;
        margin-left: 0rem;
        align-items: end;
        gap: 0rem;
        padding-left: 6rem;
        padding-bottom: 4rem;
    }

    .cottages-section .container .details {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        flex-direction: column;
        gap: 6rem;
    }

    .cottages-section .container .other-text {
        margin-left: -11rem;
    }

    .cottages-section .container .other-text h2 {
        font-size: 2.4rem;
        padding: 0 rem;
        margin-left: 0rem;
    }

    .cottages-section .cottages-image {
        display: block;
    }

    .cottages-section .cottages-image .image-box {
        width: 100%;
        height: 110rem;
        background-image: url(../images/facilities-bg.png);
        background-position: right;
        background-repeat: no-repeat;
    }

    .amenities-section {
        height: auto;
    }

    .amenities-section .container-fluid .row {
        flex-wrap: wrap;
    }

    .amenities-section .container-fluid .row .col img {
        width: 34rem;
    }


    .book-online-section {
        width: 100%;
        /*height: 75vh;*/
		height: auto;
    }
	
	.book-online-section .heading {
        /*margin-top: 4rem;*/
		margin-bottom: 0;
    }

    .footer-section .navbar-brand-logo {
        width: 15rem;
        height: 20rem;
    }

}

@media (max-width: 992px) {

    .luxurious-section {
        width: 100%;
        height: 66.8rem;
        padding-top: 0;
    }

    .luxurious-sluxurious-section .row .luxurious-content {
        width: 46rem;
        margin-top: -23rem;
        margin-right: -10rem;
        margin-left: 0rem;
    }

    .luxurious-section .col {
        width: 39.7rem;
        height: 28.1rem;
    }

    .location-section {
        padding: 2rem;
    }

    .location-section .row {
        background-position: center;
    }

    .book-online-section .heading h2 {
        font-size: 2.8rem;
    }

}

@media (max-width: 768px) {

    .carousel-caption {
        width: 100%;
        padding-left: 2rem;
        padding-top: 18rem;
    }

    .luxurious-section .row {
        flex-wrap: wrap;
        gap: 0rem;
    }

    .luxurious-section .row .luxurious-content {
        width: 35rem;
        margin-top: 0rem;
        margin-right: 0rem;
        margin-left: 3rem;
    }

    .luxurious-section .row .luxurious-content p {
        font-size: 2rem;
    }

    .location-section {
        padding: 0rem;
    }

    .location-section .lead {
        width: 90%;
        padding: 0 1.5rem;
    }

    .location-section .row {
        width: 41.8rem;
        height: 60vh;
        background-position: left;
    }

    .cottages-section .container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding-top: 5rem;
        gap: 1rem;
    }

    .amenities-section {
        width: 100%;
        height: 50vh;
    }

    .footer-section ul {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2rem;
        margin-top: -10rem;
    }
}

@media (max-width: 480px) {

    body {
        background-image: url(../images/Homepage\ -\ Mobile\ -\ 480.png);
        background-repeat: no-repeat;
    }

    .image-container {
        height: 74.4rem;
        background-position: right;
    }

    .navbar-nav {
        flex-direction: row;
    }

    .home-carousel h1 {
        width: 30rem;
        margin-top: -9rem;
        font-size: 5rem;
        margin-left: 2rem;
    }

    .home-carousel img {
        width: 28rem;
        margin-left: 2.5rem;
    }

    .navbar-nav {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
    }

    .luxurious-section .luxurious-content .wave {
        display: none;
    }

    .luxurious-section .row .luxurious-content {
        width: 41rem;
        margin-top: 0;
        margin-left: 0%;
        padding: 2rem 3rem;
    }

    .luxurious-section .row .luxurious-content .text img,
    .luxurious-section .row .luxurious-content h3 {
        padding-left: 0;
    }

    .luxurious-section .row .luxurious-content p {
        font-size: 3.5rem;
        color: #000;
    }

    .luxurious-section .col {
        width: 38.7rem;
        height: 27.1rem;
    }

    .luxurious-section {
        width: 100%;
        height: auto;
        padding: 3rem 0;
    }

    .luxurious-section .row .luxurious-content .text {
        margin-left: -1.5rem;
        margin-top: 2rem;
    }

    .location-section {
        height: auto;
    }

    .location-section .row {
        width: 36.8rem;
        height: auto;
        margin-right: 0;
        margin: 0 1rem 0 1rem;
    }

    .location-section .lead .bold {
        font-size: 3rem;
        font-weight: 500;
        padding: 2rem 0;
    }

    .location-section .lead p {
        font-size: 1.8rem;
        margin-top: -1rem;
    }

    .location-section .location-image img {
        width: 100%;
        height: 100%;
    }

    .location-section .location-image {
        display: block;
        width: 35.4rem;
        height: 29.6rem;
        margin-left: 0rem;
    }

    .cottages-section .container {
        flex-wrap: wrap;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .cottages-section .container .details {
        width: 100%;
        gap: 4rem;
        padding: 2rem;
    }

    .cottages-section .container .other-text {
        margin-left: 3rem;
    }

    .amenities-section {
        width: 100%;
        height: auto;
        padding-bottom: 8rem;
    }

    .book-online-section .heading h2 {
        font-size: 2.5rem;
    }

    .amenities-section .container-fluid h2 {
        font-size: 2.5rem;
    }

    .cottages-section h2 {
        font-size: 2.8rem;
    }

    .cottages-section .container .details {
        width: 100%;
        gap: 3.6rem;
    }

    .cottages-section .cottages-image .image-box {
        width: 100%;
        height: 66rem;
        background-image: url(../images/mobile-luxury-bg.png);
        background-position: center;
        background-repeat: no-repeat;
    }

    .footer-section .navbar-brand-logo {
        height: auto;
    }
}