/*==========  Mobile First Method  ==========*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+DE+SAS:wght@100..400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playwrite+AU+TAS:wght@100..400&display=swap');

body{
	background-color:#2f2e2c;
	color:white;
	font-family: "Roboto", sans-serif;
}

h1, p, ul li{
	font-weight:300;
}

h1{
	font-size:28px;
}

h2{
	font-family: "Playwrite AU TAS", cursive;
	font-weight:400;
	color:#b49062;
	font-size:22px;
}

 p, ul li{
	font-weight:300;
}

.gold{
	color:#b49062;
}

.active{
	color:#b49062;
}

.light-bg{
	background-color:#2f2e2c;
}

.dark-bg{
	background-color:#1c1c1c;
}

.cream-bg{
	background-color:#e8e6e2;
}

.cream-bg h1, .cream-intro, .cream-bg ul li{
	color:#2f2e2c;
}

.dark-bg, .light-bg, .cream-bg{
	padding-top:50px;
	padding-bottom:50px;
}

.heart{
	width:100%;
	max-width:35px;
	margin-right:15px;
}

.heart-it{
	width:100%;
	max-width:35px;
	margin-left:15px;
	margin-right:15px;
}

.btn-primary{
	background-color:#b49062;
	border-color:#b49062;
	border-radius:0px;
	font-weight:300;
}

.btn-primary:hover{
	background-color:#1c1c1c;
	border-color:#b49062;
	color:white;
	border-radius:0px;
}

.header-fixed{
	width:100%;
	position:fixed;
	height:80px;
	z-index: 100;
	transition: background-color 0.3s ease; /* smooth transition */
	background-color: transparent;	
}

.scrolled.header-fixed {
  background-color: #1c1c1c; /* or any color you want */
}

.logo{
	width:100%;
	max-width:80px;
	position:absolute;
	top:15px;
	left:15px;
	z-index: 100;
	transition: .3s ease all;
}

.hamburger{
	position:fixed;
	right:10px;
	top:10px;
	z-index: 102;
	transition: .3s ease all;
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after, .hamburger.is-active .hamburger-inner, .hamburger.is-active .hamburger-inner::before, .hamburger.is-active .hamburger-inner::after {
    background-color: white;
}

.overlay{
	background-color: rgba(0, 0, 0, 0.8); /* black overlay with 50% opacity */
	width:100%;
	height:100vh;
	z-index:101;
	position:fixed;
	display: none; /* hidden by default */
	overflow-y: auto; 
}

.overlay-wrapper{
	display: flex;
	justify-content: center; /* horizontal centering */
	align-items: center;     /* vertical centering */	
    height: 100%;	
}

.overlay-menu{
	list-style-type:none;
	padding-left:30px;
}

.overlay-menu li a{
	color:white;
	text-decoration:none;
	font-size: 27px;
	font-weight:200;
}

.overlay-menu li a:hover{
	color:#b49062;
}

.overlay-address{
	padding-left:30px;
	padding-top:30px;
}

.overlay-address a{
	color:white;
	text-decoration:none;
}

.overlay-address p{
	font-weight:200;
}

.overlay-address img{
	margin-bottom:15px;
}

.image-wrapper::before,
.image-wrapper::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 30%;
	pointer-events: none;
}

.image-wrapper::before {
	top: 0;
	background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

.image-wrapper::after {
	bottom: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.5), rgba(0,0,0,0));
}

.scrolldown{
	position:absolute;
	bottom:30px;
	right:0;
	left:0;
	margin:0 auto;
	width:30px !important;
	z-index:10;
	animation: bounce 2s infinite;
	display:none !important;
}

.scrolldown:hover{
	cursor:pointer;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); /* at rest */
  }
  40% {
    transform: translateY(-10px); /* move up */
  }
  60% {
    transform: translateY(-5px); /* small bounce up */
  }
}

.header{
	width:100%;
}

#header-video, #bgndVideo {
	aspect-ratio: 16 / 9;
	width: 100%;
	object-fit: cover; /* crop video to cover the viewport */
	display: block;
}

.header-list{
	display:none;
	z-index:100;
	transition: .3s ease all;
}

.section1 img{
	width:100%;
}

.section1-text{
	padding-top:30px;
	padding-bottom:30px;
}

.carousel-image{
	width: 100%;
}

.owl-content.owl-theme .owl-dots {
    bottom: 20px;
	z-index:1;
	position:absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	z-index:1000;	
}

.owl-header.owl-theme .owl-dots {
    bottom: 0px;
	position:absolute;
	left:0;
	right:0;
	margin-left:auto;
	margin-right:auto;
	z-index:1000;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
    background: #b49062;
}

.app-wrapper{
	text-align:center;
	margin-bottom:30px;
}

.app-listing-wapper{
	margin-top:30px;
	margin-bottom:30px;
}

.app-listing-wapper a{
	text-decoration:none;
	color:white;
}

.app-listing-img{
	filter: brightness(55%); /* lower = darker, 100% = normal */
	width:100%;
	transition: 0.3s ease all;
}

.app-listing-img.brighter{
	filter: brightness(75%); /* lower = darker, 100% = normal */
}

.app-listing-title{
	position:absolute;
	bottom:30px;
	left:30px;
	font-size:36px;
}

.app-listing-subtitle{
	position:absolute;
	bottom:0px;
	left:30px;
	font-size:22px;
	font-weight:400;
	color:#b49062;
}

.learn-more{
	background-color:#b49062;
	padding:10px;
	padding-left:30px;	
	transition: 0.3s ease all;
}

.learn-more p{
	margin-bottom:0px;
	font-size:18px;
}

.learn-more img{
	width:35px;
}

.services-wrapper{
	background-image: url("../img/welcome/services.jpg"); /* path to your image */
	background-position: center center;      /* center horizontally & vertically */
	background-repeat: no-repeat;            /* prevent tiling */
	background-size: cover;                  /* scale to cover entire area */
	background-color: rgba(0, 0, 0, 0.6); /* black overlay with 50% opacity */
	background-blend-mode: darken;        /* blends the color with the image */  
	padding:30px;
	padding-top:50px;
	padding-bottom:50px;	
}

.services-intro{
	text-align:center;
	margin-bottom:30px;
}

.services{
	list-style-type:none;
	padding-left:0px;
}

.services li{
	margin-bottom:15px;
}

.services li p {
	position: relative;
	bottom: -10px;
	
}

.services p{
	padding-left: 15px;
}

.services img{
	width:50px;
}

.winter-summer-wrapper{
	text-align:center;
}

.winter-summer {
	position:relative;
	margin-top:30px;
	padding: 0px;
}

.winter-summer img{
	width:100%;
	filter: brightness(55%); /* lower = darker, 100% = normal */
	transition:0.3s ease all;
}

.winter-summer a{
	text-decoration:none;
	color:white;
	transition:0.3s ease all;
}

.winter-summer p{
	position:absolute;
	bottom:0px;
	left:30px;
	font-size:38px;
	font-weight:300;
	z-index:1;
	transition: 0.3s ease all;
}

/* Text span styling */
.winter-summer span {
	position: absolute;
	bottom:20px;
	left:30px;
	color: #fff;         /* white text for contrast */
	font-size: 1.2rem;   /* adjust font size */
	font-weight:300;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none; /* makes sure span doesn't block clicks */
	z-index:1;
}

/* Gradient overlay (hidden by default) */
.winter-summer::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 30%);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none; /* keeps image clickable */
}

.winter-summer:hover span {
	opacity: 1;
}

/* On hover: remove dark filter, show gradient */
.winter-summer:hover img {
	filter: brightness(100%);
}

.winter-summer:hover p {
	bottom: 25px;
	transition: 0.3s ease all;
}

.winter-summer:hover::after {
	opacity: 1;
}

footer{
	background-image: url("../img/layout/footer.jpg"); /* path to your image */
	background-position: center center;      /* center horizontally & vertically */
	background-repeat: no-repeat;            /* prevent tiling */
	background-size: cover;                  /* scale to cover entire area */
	background-color: rgba(0, 0, 0, 0.5); /* black overlay with 50% opacity */
	background-blend-mode: darken;        /* blends the color with the image */  
	padding:30px;
	padding-top:50px;
	padding-bottom:50px;
} 

footer h1{
	margin-top:30px;
}

footer a{
	color:white;
	text-decoration:none;
}

footer .gold{
	font-weight:400;
}

.footer-logo{
	width:100%;
	max-width:150px;
}

.partner{
	margin-top:50px;
}

.partner img{
	margin-right: 15px;
	margin-left: 15px;
	margin-bottom: 15px;
	max-width: 95px;
}

.underfooter{
	background-color:#1c1c1c;
	padding-top:30px;
}

.underfooter img{
	margin:0 auto;
	display:block;
}

.scrolled .header-list{
	top:23px;
	transition: .3s ease all;
}
	
.scrolled.hamburger {
	top: 12px;
	transition: .3s ease all;
}	

.scrolled .logo {
	top: 10px;
	max-width: 80px;
	transition: .3s ease all;
}

.credits-wrapper a{
    color: #b49062;	
	text-decoration:none;
}

h6{
	margin-top:50px;
	font-size:1.5rem;
}




    /* Custom, iPhone Retina*/ 
    @media only screen and (min-width : 340px) {
    }

    /* Extra Small Devices, Phones */                                                                                                                                       
    @media only screen and (min-width : 460px) {
    }    
    
    /* Extra Small Devices, Phones */                                                                                                                                       
    @media only screen and (min-width : 550px) {
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

	.overlay-menu{
		text-align:right;
	}	

	}
	
	 /* Small Devices, Tablets */
    @media only screen and (min-width : 992px) {
	
	.header-list{
		display:inline-block;
		list-style-type:none;
		position:absolute;
		top:40px;
		font-size:20px;
		font-weight:300;
		right:100px;
	}	
	
	.header-list li{
		display:inline-block;
		margin-right:50px;
	}	
	
	.header-list li a{
		color:white;
		text-decoration:none;
	}	
	
	.header-list li a:hover{
		color:#b49062;
	}
	
	.header-list .border:hover{
		border:1px solid #b49062 !important;
		padding:5px;
	}	
	
	.header-list .border{
		border:1px solid white;
		padding:5px;
	}	
	
	.section1-text {
		display: flex;
		flex-direction: column;   /* keep h1, h2, p stacked */
		justify-content: center;  /* vertical centering */
	}	
	
	.section1-width{
		max-width:500px;
		margin:0 auto;
	}	
	
	.dark-bg, .light-bg, .cream-bg{
		padding-top:100px;
		padding-bottom:100px;
	}
	
	.app-listing-wapper:hover .app-listing-img {
		filter: brightness(90%);
		transition: 0.3s ease all;
	}
	
	.app-listing-wapper:hover .learn-more {
		background-color:white;
		color:#b49062;
		transition: 0.3s ease all;
	}

	.services-wrapper {
		padding-top: 100px;
		padding-bottom: 100px;
	}	
	
	.winter-summer1 p{
		left:initial;
		right:40px;
	}		
	
	/* Text span styling */
	.winter-summer1 span {
		left:initial;
		right:40px;
	}	
	
	.winter-summer:hover img {
		filter: brightness(100%);
		transition:0.3s ease all;
	}		
	
	.footer-logo{
		max-width:150px;
		margin-top:100px;
	}
	
	.partner{
		text-align:center;
	}
	
	.partner img{
		max-width: initial;
	}	
	
	.footer-address{
		text-align:right;
	}
	

	
	}
	
	 /* Desktop */
    @media only screen and (min-width : 1200px) {

	.overlay-menu li a {
		font-size: 42px;
	}

	.carousel-image{
		width: 100%;
		height: calc(100vh - 80px);
		object-fit: cover;   /* fills the container without distortion */
		object-position: center; /* centers the crop */	
	}

	.scrolldown{
		position:absolute;
		bottom:160px;
		right:0;
		left:0;
		margin:0 auto;
		width:30px !important;
		z-index:10;
		animation: bounce 2s infinite;
		display:inline-block !important;
	}

	.overlay-address img {
		margin-bottom: 50px;
	}

	.header-list{
		top:40px;
		right:200px;
	}	

	.logo {
		max-width: 250px;
		top: 30px;
		left: 100px;		
	}
	
	.hamburger {
		top:30px;
		right: 100px;
	}	
	
	.section1 .col-12{
		padding:0px;
	}

	.app-listing-title {
		bottom: 25px;
		left: 25px;
		font-size: 30px;
	}

	.app-listing-subtitle {
		font-size: 16px;
		left: 25px;
	}
		
	.learn-more p{
		font-size: 16px;
	}	
	
	.winter-summer{
		padding:0px;
		margin-top:80px;
	}	
	
	.partner {
		margin-top: 100px;
	}	
	
	.footer-address{
		padding-right:30px;
	}	
	
	.footer-contact{
		padding-left:30px;
	}	
	
    .footer-logo {
        max-width: 200px;
    }	

	}
	
	 /* Desktop */
    @media only screen and (min-width : 1600px) {
	
	.owl-header.owl-theme .owl-dots {
		bottom: 65px;
	}	
	
	}
	
	 /* Desktop */
    @media only screen and (min-width : 1900px) {

	#header-video, #bgndVideo {
		aspect-ratio: 16 / 8;
	}	
		
	h1 {
		font-size: 55px;
	}	
	
	h2 {
		font-size: 22px;
	}	
	
	p,ul li{
		font-size:20px;
	}
	
	.overlay-menu li a{
		font-size:48px;
	}	
	
	.overlay-menu li{
		margin-bottom:15px;
	}	
	
	.overlay-address{
		display: flex;
		flex-direction: column;   /* stack img and p vertically */
		justify-content: center;  /* vertical centering */
		align-items: flex-start;  /* keep left alignment */
		height: 100%;		
		margin-top:0px;
		margin-left:100px;
	}
	
	.header-list{
		top:40px;
		right:300px;
	}	

	.logo {
		top: 30px;
		left: 200px;		
	}
	
	.hamburger {
		right: 200px;
	}

	.container-wide{
		max-width:1600px;
	}	
	
	.dark-bg, .light-bg, .cream-bg {
		padding-top: 150px;
		padding-bottom: 150px;
	}	
	
	.section1-width{
		max-width:700px;
		margin:0 auto;
	}		
	
	.app-wrapper {
		margin-top: 0px;
	}	
	
	.services-wrapper {
		padding-top: 150px;
		padding-bottom: 150px;
	}	
	
	.services{
		margin-top:50px;
		padding-left:30px;
	}
	
	.services p{
		padding-left:15px;
		font-size:22px;
	}
	
	.services li{
		margin-bottom:30px;
	}
	
	.services li p{
		position: relative;
        bottom: -10px;
	}
	

	
	.winter-summer p {
		font-size: 46px;
	}
	
	.winter-summer span {
		font-size: 22px;
	}	
	
	footer {
		padding-top: 150px;
		padding-bottom: 150px;
	}	
	
	}
	
	 /* Desktop */
    @media only screen and (min-width : 2500px) {
	}