

/* General Styles */
body {
	font-family: 'Roboto Condensed', sans-serif;
	color: #ffffff;
}

/* Main Wrapper for the page */
.Launching-soon {
    position: relative;
    width: 100%;
    height: 100vh;
    /* 
      IMPORTANT: Make sure the path to your background image is correct.
      This path is relative to the CSS file. If your images are in an 'images' or 'img' folder
      at the root of your project, this path should work.
    */
    background: url('../images/bg.jpg') no-repeat center center;
    background-size: cover;

    /* These flex properties help center the content vertically and horizontally */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* It's good practice to add a semi-transparent overlay to make text more readable */
.Launching-soon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Black overlay with 50% opacity */
    z-index: 1;
}

.coming-soon-box {
    position: relative; /* Ensure content is on top of the overlay */
    z-index: 2;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin:0;
	font-weight: 700;
}

img{
	max-width: 100%;
}

a:hover{
	text-decoration: none;
	outline: 0;
}

a:focus{
	text-decoration: none;
	outline: 0;
}


.comming-soon{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	min-height: 100%;
	background: url(../images/bg.jpg) no-repeat bottom center;
	background-size: cover;
	display: flex;
	align-items: center;
	
}

.comming-soon:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	background: rgba(0,0,0,0.7);
}

.coming-soon-box{
	width: 100%;
	text-align: center;
	color: #aeaeae;
}

.logo{
	position: fixed;
	top: 30px;
	left: 30px;
}

.logo h1{
	font-size: 36px;
	font-weight: 700;
	color: #fff;
}

.logo h1:first-letter{
	color: #e3c600;
}

.logo p{
	font-size: 12px;
	color: #fff;
	letter-spacing: 0.08em;
}

.coming-text{
	
}

.coming-text p{
	color: #fff;
	font-size: 20px;
}

.coming-text h2{
	color: #e3c600;
	font-size: 54px;
	letter-spacing: 0.1em;
	font-weight: 700;
	text-transform: uppercase;
	margin: 20px 0;
}

.typing-title{
	display: none;
}

.countdown-timer-wrapper{
	margin: 60px 0 20px;
}

.timer .timer-wrapper{
	display: inline-block;
	width: 132px;
	height: 132px;
	border: 6px solid rgba(255,255,255,0.5);
	border-radius: 50%;
	margin: 0 20px 30px;
	padding-top: 22px;
}

.timer .timer-wrapper .time{
	font-size: 54px;
	color: #fff;
	font-weight: 700;
	line-height: 1em;
}

.timer .timer-wrapper .text{
	color: #e3c600;
	text-transform: uppercase;
	font-size: 16px;
}

.newsletter{
	
}

.newsletter-form{
	margin-top: 30px;
}

.new-text{
	width: 70%;
	display: inline-block;
	background: none;
	border: 1px solid rgba(255,255,255,0.5);
	height: 44px;
	padding: 0 20px;
	margin-right: 2%;
	outline: 0;
}

.new-btn{
	border: none;
	height: 44px;
	width: 28%;
	display: inline-block;
	color: #000;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 700;
	margin-left: -5px;
	background: #e3c600;
	vertical-align: top;
	transition: all 0.3s;
	outline: 0;
}

.new-btn:hover{
	opacity: 0.8;
}

.social-link{
	position: fixed;
	bottom: 30px;
	right: 30px;
}

.social-link a{
	display: inline-block;
	margin: 0 6px;
	color: #fff;
	font-size: 20px;
	transition: all 0.3s;
}

.social-link a:hover{
	color: #e3c600;
}

@media only screen and (max-width:768px){
	.logo{
		position: relative;
		top: auto;
		left: auto;
	}
	
	.social-link{
		width: 100%;
		position: relative;
		top: 0;
		left: 0;
		margin-top: 30px;
	}
	
	.coming-soon-box{
		padding: 30px 0;
	}
}

/****************************************
		Responsive Media Query
****************************************/

@media only screen and (max-width:480px){
	.timer .timer-wrapper{
		width: 100px;
		height: 100px;
		border-width: 4px;
	}
	
	.coming-text h2{
		font-size: 30px;
	}
	
	.coming-text p{
		font-size: 18px;
		margin-bottom: 0;
	}
	
	.timer .timer-wrapper .time{
		font-size: 34px;
	}

	.timer .timer-wrapper .text{
		font-size: 12px;
	}
}