/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

body{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    transition: all 0.4s ease;;
}


.coming-area{
width:100vw;
height:100vh;
margin:0;
overflow:hidden !important;
font-family: 'Poppins', sans-serif !important;
background: linear-gradient(rgba(1,1,1,.7), rgba(1, 1, 1, 0.6)), url("assets/img/bg.jpg");
background-position:center;
background-size:cover;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
position:relative;
}


.content{
width:70%;
text-align:center;
}

.content .logo{
width:8%;
position:absolute;
top:1rem;
left:2vw;
}

.content h1{
font-size:4.5em;
font-family: 'Poppins', sans-serif;
font-weight:900;
}

.content h2{
position:relative;
top:-30px;
font-weight:200;
font-size: 20px;
}

.content .social_icons{
position:fixed;
right:2vw;
bottom:2vh;
}

.content .social_icons:before{
content:"";
width:1px;
height:100%;
background-color:#fff;
position:absolute;
top:-100%;
}

.content .social_icons a{
margin:10px 0px;
color:var(--white);
display:block;
text-decoration:none;
font-size:1.5em;
transition:0.5s;
}

.content .social_icons a:hover{
color:#5693d5;
}


.arrow {
text-align: center;
margin: 1% 0;
}
.arrow a{
color:#fff;
font-weight:200;
text-decoration:none;
}
.bounce {
-webkit-animation: bounce 2s infinite;
animation: bounce 2s infinite;
}
@-webkit-keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}


.content .button{
position:relative;
top:-10px;
}

.searchBox {
position: absolute;
top: 50%;
left: 50%;
transform:  translate(-50%,50%);
border-radius: 40px;
padding: 5px 10px;
display:flex;

}

.searchBox:hover > .searchInput {
width: 240px;
padding:10px;
}

.searchBox:hover > .searchButton {
background: white;
color : #2f3640;
}

.searchBox:hover{
background: #2f3640;
}

.searchBox:hover > .searchButton:hover {
background-color:#5693d5;
border:1px solid #5693d5;
color:#fff;
}

.searchButton {
color: white;
float: right;
width: auto;
padding:10px 20px;
border-radius:40px;
background:transparent;
display: flex;
justify-content: center;
align-items: center;
transition: 0.4s;
border:0;
font-style:normal !Important;
font-weight:600;
text-align:center;
border:1px solid #fff;
}

.searchInput {
border:none;
background: none;
outline:none !important;
float:left;
padding: 0;
color: white;
font-size: 16px;
transition: 0.4s;
width: 0px;
}