:root {
    --primary_color: #1e90ff;   
    --secondary_color: #1e90ff;   
    --heading_color: #000; 
    --subtitle_color: #777; 
    --text_color: #1e90ff;
    --icon_color: #9FD5B7;   
  }

  body, html {
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Open Sans", sans-serif;
    color: #777;
  }  

  h1{
    line-height: 34px;
    color: var(--heading_color);
  } 

  h4{
    color: var(--heading_color);
  }     

  .subtitle{
    color: var(--subtitle_color);
    width: fit-content;
    padding: 1px;
    line-height: 34px;
    margin-top: 5px;
    background: #fff;
    /* Old browsers */
    background: linear-gradient(to left, white 50%, var(--icon_color) 50%);
    background-size: 200% 100%;
    background-position:right bottom;
    transition:all 1s ease;
  }

  .subtitle:hover, h1:hover ~ .subtitle{
    background-position:left bottom;
    color: #fff;
  }

  .top_container .coming_soon{
    width: fit-content;
    margin: auto;
  }

  .top_container .coming_soon:after {
      transition: all ease-in-out .5s;
      background: none repeat scroll 0 0 var(--icon_color);
      content: "";
      display: block;
      height: 10px;
      width: 0;
  }
  .top_container .coming_soon.show_shadow:after {
    width: 100%;
  }
  /*.top_container .coming_soon:hover:after {
      width: 100%;
  }*/


  a:hover{
    color: #f44628;  
  }

  a {
    color: #000;
    text-decoration: none;
  }

  .top_container {
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 28px;
  }

  .top_container .coming_soon {
    margin: 0;
    color: #777;
    font-size: 22px;
    font-weight: 400;
    line-height: 12px;
  }


  .image {
    max-width:350px;
    margin:40px auto;
    transition: transform 2s;
    border-radius: 0 70px 0 070px;
  }
  .image:hover {
    max-width:350px;
    margin:40px auto;
    transform: scale(1.03);
  }

  .logo{
    max-width: 350px;
  }


  /* follow us : start   */
  .find_us .instagram i{
    color: var(--icon_color);
  }
  .find_us .instagram:hover{
    color: var(--icon_color);
  }

  .find_us {
    display: flex;
    flex-direction: column;
    max-width: 310px;
    text-align: left;
  }

  .mb-5{
    margin-bottom: 5px;
  }
  .mt-5{
    margin-top: 5px;
  }
  .m0{
    margin: 0;
  }

  .flex_container{
    display: flex;
    justify-content: center;
  }

  .col_50{
    padding: 0 5%;
  }

  .col_left{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Bottom bar  : Start */
  .bottom {
    font-size: 20px;
    position: fixed;
    bottom: 0;
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
    background: #fff;
  }    

  .bottom_bar a{
    font-size: 14px;
    font-weight: 500;
  }
  .bottom_bar a:hover{
  color: #ff4444;
  }

  .bottom_bar {
      left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      bottom: 0;
      position: fixed;
      text-align: center;
      margin-right: auto;
      margin-left: auto;
      right: 0;
  }
        
  .icon-wraper a{
    font-weight: 600;
    font-size: 16px;
  }

  /*progress*/
  .progress {
    font-size: 14px;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: #000;
    letter-spacing: 2px;
    position: relative;
  }
  .progress::after {
    content: 'progress';
    position: absolute;
    left: 0;
    top: 0;
    color: #FF3D00;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    animation: animprogres 4s ease-in infinite;
  }
  @keyframes animprogres {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }
  /* Bottom bar  : End */


  /* Responsive : Start   */
  @media screen and (max-height: 750px) {
    .bottom_bar{
      position: static!important;
    }
  }

  @media screen and (max-width: 750px) {  
    .flex_container{
      flex-direction: column;!important;
      padding-bottom: 50px!important;
    }
    .top_container{
      padding-bottom: 0;
    }
    .col_50{
      padding: 10% 10% 0 10%!important;
    }
    .col_right{
      text-align: center;
      max-width: 500px;
      margin: auto;
    }
    .image{
      margin-top: 0;
      margin-bottom: 0;
    }
  }

  @media screen and (max-width: 387px) { 
    .image {
      width: 100%;
      margin: 0;
    }
    .details{
      text-align: left;
      padding: 15px;
    }   
  }

  ::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: var(--icon_color);
  }

  ::selection {
    color: #fff;
    background: var(--icon_color);
  }