body {
  margin: 0;
  background-image: url('https://img.freepik.com/premium-photo/abstract-background_196038-7044.jpg');
  object-fit: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  font-family: sans-serif;
  img{
    position: absolute;
    left: 10%;
    top: -5%;
    width: 200px;
    margin: 0;
  }
}
.Coverbody{
    margin-top: 5%;
    width: 50%;
    flex-wrap: wrap;
}
#countdown {
  text-align: center;
  margin-bottom: 20px;
}
#countdown  .tittle-container-h1{
margin-top: 4%;
font-size: 4rem;
font-weight: 700;
transition: .3s;
line-height: 1;
color: #fff; 
transition: .3s;
margin-bottom: 2%;
}

#countdown .tittle-container-p{
margin-top: 40px;
font-size: 20px;
font-weight: 600;
line-height: 28px;
color: #fff;
margin-bottom: 15px;
transition: .3s;
}
#timer{
    display: flex;
    gap: 20px;
    .timeCount{
            width: 100%;
            padding:2% 5%;
            color: #fff;
            border: 1px solid #7b8491;
            text-align: center;
            line-height: 0.2;
            display: flex;
            flex-direction: column;
            p{
                font-weight: 900;
                font-size: 2.2rem;
            }
            span{
                font-size: 20px;
                font-weight: 550;
            }
        }
}

#countdown h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
}

#countdown p {
  font-size: 1.2em;
}
.form-container {
    width: 100%;
    height: 60px;
}
.form-container p{
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #fff;
    margin: 15px 0 5px;
    transition: .3s;
    text-align: center;

}
input{
    width: 70%;
    height: inherit;
    margin-bottom:10px;
    border: 1px solid #e0e3e7;
    padding: 0 33px;
    font-size: 12px;
    overflow: visible;
    font-weight: 500;
    outline-style:none ;
    transition: .3s;
   background-color: #fff;
}
.form-container input::placeholder{
    color: #000;
}
.input-email-button{
    margin-top: 20px;
    display: flex;
    width: 100%;
    height: 60px;
    border: 1px solid #e0e3e7;
    padding: 0;
    text-transform: uppercase;
    overflow: visible;
    font-weight: 500;
    transition: .3s;
    float: right;
}
.input-email-button button{
    width: 30%;
    font-weight: 900;
    font-size: 12px;
    padding: 21px 40px;
  background: #233d63;
    color: #fff;
    border: 0;
    transition: .3s;
    display: inline-block;
    line-height: 1;
    cursor: pointer;
} 


@media screen and (max-width:780px) {
    .Coverbody{
        width: 90%;
        padding: 0;
    }
}
@media screen and (max-width:450px) {
    #countdown{
        margin-top: -40%;
    }
    #countdown h1{
        font-size: 3rem!important;
    }
   #timer{
        width: 50%!important;

        .timeCount{
            padding-bottom: 5%!important;
            p{
            }
            span{
                margin-top: -30%!important;
            }
        }
    }
}
@media screen and (max-width:380px) {
    .Coverbody{
        width: 90%;
    }
    img{
        position: absolute;
        left: 5%;
        top: 2%;
    }
    #countdown{
        margin-top: 0;
    }
    #countdown h1{
        font-size: 2rem!important;
    }
    #countdown .tittle-container-p{
        font-size: 13px!important;
        line-height: 1.2;
    }
    .form-container p{
        font-size: 15px!important;
    }

   #timer{
        width: 20%!important;

        .timeCount{
            padding-bottom: 30%!important;
            p{

            }
            span{
                margin-top: -10%!important;
            }
        }
    }
    .input-email-button button{
       text-align: center!important;
       padding: 20px 30px;
       line-height: 1.2;
    }
}

@media screen and (max-width:1400px) {
    .Coverbody{
        width: 90%;
    }
}