@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
html, body {position: relative; height: 100%;}
body{ font-family: 'Roboto', sans-serif; background:#F4F6FF;  font-weight:400; padding:0px; margin:0px; }

.header-area{position: absolute; top: 0px; width: 100%; padding: 25px ; z-index: 4}
.header-area .logo{width: 100px; float: left;}
.header-area .logo img{width: 100%;}
.header-area ul.social{margin: 0px; padding: 0px; list-style: none; float: right;}
.header-area ul.social li{float: left;}
.header-area ul.social li a{width: 40px; height: 40px; color: #fff; display: block; text-align: center; line-height: 40px; font-size: 20px}

.coming_soon_area {width: 100%; height: 100vh; position: relative;}
.coming_soon_area .swiper-container{height: 100vh}
.coming_soon_area .swiper-slide {text-align:center;}
.coming_soon_area .swiper-slide img {width:100%; height: 100vh}
.coming_soon_area .content-area{position: absolute; top: 0px; height: 100%; width: 100%; left: 0px; z-index: 1; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center;}

.coming_soon_area .content-area .content-center-main{display: flex;}
.coming_soon_area .content-area .content-center-main .leftside{display: flex; align-items: center; justify-content: center; width: 55%; padding-right: 30px}
.coming_soon_area .content-area .content-center-main .rightside{display: flex; align-items: center; justify-content: center; width: 45%; }
.coming_soon_area .content-area .content-center-main .d-block{width: 100%}
.coming_soon_area .content-area h1{font-size: 28px; color: #fff; line-height: 36px; font-weight: 300; margin: 0px 0px 20px 0px}
.coming_soon_area .content-area h1 span{font-weight: 700; display: block; font-size: 70px; line-height: 80px; color: #4ab9ed; margin-top: 10px}
.coming_soon_area .content-area h3{font-size: 18px; color: #fff; line-height: 30px; font-weight: 700; margin: 0px}
.coming_soon_area .content-area .search-box{width: 100%; margin: 0px auto; position: relative;}
.coming_soon_area .content-area .search-box .inputbox{border:#fff 1px solid; color: #fff; width: 100%; height: 50px; padding:0 25px; font-size: 18px; font-weight: 300; background: transparent; border-radius: 25px}
.coming_soon_area .content-area .search-box .inputbox:focus{box-shadow: none; outline: none}
.coming_soon_area .content-area .search-box .btn-search{ height: 40px;border: none; background: #fff; padding: 0 20px; border-radius: 20px; width: 100%; margin-top:10px}
.coming_soon_area .content-area .search-box .btn-search:hover{background: #ff9e01; color: #fff; cursor: pointer;}
.coming_soon_area .copyright{position:absolute; bottom:20px; left:0px; font-size:14px; font-weight:300; color:#fff;  z-index:11; text-align: center; width: 100%}
.coming_soon_area .content-area ul{margin:0px 0px 20px 0px; padding:0px; list-style:none; }
.coming_soon_area .content-area ul li{ border-radius: 10px; margin:0 10px 0 0; text-align:center; display: inline-block; }
.coming_soon_area .content-area ul li .timer_div{font-size: 16px; color:#fff; font-weight: 300; line-height: 22px; text-transform: uppercase; border: #fff 1px dashed; padding: 10px 20px 8px 20px; border-radius: 20px}
.coming_soon_area .content-area ul li .timer_div span { font-size: 22px; font-weight: 700; margin-right: 5px}
.coming_soon_area .content-area .store-img{width: 100%; margin: 0 auto;}
.coming_soon_area .content-area .store-img img{width: 100%}
.coming_soon_area .content-area .email-box{background: #4ab9ed; padding: 20px; border-radius: 20px; position: relative; margin-top: 30px}
.coming_soon_area .content-area .email-box .title{text-align: center; color:#fff; font-size: 18px; font-weight: 700; margin-bottom: 20px}
.coming_soon_area .content-area .email-box img {width: 80px; position: absolute; left: -40px; top: -20px;}


@media (min-width: 768px) and (max-width: 1024px){
  html, body{height: auto;}
  .header-area{padding: 15px}
  .header-area .logo {width: 60px;}
  .coming_soon_area{height: auto; background: url(../images/03.jpg) center center no-repeat}
  .coming_soon_area .swiper-container{display: none}
  .coming_soon_area .content-area{position: relative;}
  .coming_soon_area .content-area .content-center-main {display: block; padding: 75px 0 60px 0}
  .coming_soon_area .content-area .content-center-main .leftside{display: block; width: 100%; padding: 85px; text-align: center;}
  .coming_soon_area .content-area .content-center-main .rightside{display: block; width: 100%; padding: 0px 160px}


}
@media (max-width: 767px) {
  html, body{height: auto;}
  .header-area{padding: 15px}
  .header-area .logo {width: 60px;}
  .coming_soon_area{height: auto; background: url(../images/03.jpg) center center no-repeat;}
  .coming_soon_area .swiper-container{display: none}
  .coming_soon_area .content-area{position: relative;height: auto;}
  .coming_soon_area .content-area .content-center-main {display: block; padding: 75px 0 60px 0}
  .coming_soon_area .content-area .content-center-main .leftside{display: block; width: 100%; padding: 0px}
  .coming_soon_area .content-area .content-center-main .rightside{display: block; width: 100%; padding: 0px}
  .coming_soon_area .content-area ul li{margin: 0 8px 0 0}
  .coming_soon_area .content-area ul li .timer_div{padding: 8px 12px 6px 12px; font-size: 12px}
  .coming_soon_area .content-area ul li .timer_div span{font-size: 18px}
  .coming_soon_area .content-area h3{margin-bottom: 30px}
  .coming_soon_area .content-area h1{font-size: 20px; line-height: 30px}
  .coming_soon_area .content-area h1 span{font-size: 46px; line-height: 50px}
  .coming_soon_area .content-area .email-box .title{margin-bottom: 10px}
  .coming_soon_area .content-area .search-box .btn-search{position: relative;top: 0; right: 0; width: 100%; margin-top: 5px}

  .coming_soon_area .content-area .email-box{text-align: center;}
  .coming_soon_area .content-area .email-box img{position: relative; top: 0px; left: 0px; margin: 0 0 15px 0;}

}