*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Montserrat;
    font-weight: bold;
    color: rgb(87, 87, 87);
}
@font-face {
    font-family: Montserrat;
    src: url(./FONTS/Montserrat-Regular.ttf);
    
  }
.container{
    width: 900px;
    margin: auto;
}
h1,h2,h3,span{
    color: rgb(15, 15, 15);
}
h1{
text-align: center;
margin: 1rem;
}

.flex-checkout{
    display: flex;
    align-items:flex-start;
}

/* Checkout form  */

.checkout__form{
    width: 55%;
}
h2{
margin: 10px;
font-size: 1.2rem;
}
label{
    font-size: 0.8rem;
}
.form-element{
    margin: 10px;
    line-height: 1.5rem;
    position: relative;
}
.form-element i{
position: relative;
left: -427px;
}
.inputs{
    width: 90%;
    padding: 8px 25px;
    border-radius: 5px;
    border: 1px solid gray;
}

.form-element__country-post .form-element{
    float: left;
    
}
.form-element__country-post{
    overflow: auto;
}
.form-element__country-post input{
    width: 90%;
}
.form-element__country-post .country i{
    top: -30px;
    left: 5px;
    z-index: 1;
}
.form-element__country-post .post i{
    left: -218px;
}
button:hover{
cursor: pointer;
}
.submit{
    float: right;
    padding: 13px 10px;
    
    color: white;
    background-color: coral;
    border-radius: 10px;
    border: none;
    margin-right: 30px;
}
/* checkout__cart */

.checkout__cart{
width: 45%;
background-color: #e4e4e4;
border-radius: 10px;
padding: 1rem;
}
.checkout-cart__product{
    display: flex;
    width: 100%;
    line-height: 1.5rem;
}
.checkout-cart__product h4{
    color:coral;
}
h4 span{
    font-size: 0.8rem;
    text-decoration: line-through;
}

img{
    width: 110px;
    border-radius: 10px;
    margin: 0px 1rem 1rem 0px;
}
.quantity-box{
    border: 1px solid gray;
    padding: 5px 10px;
    width: 100px;
    border-radius: 5px ;
    display: flex;
    justify-content:space-around;
    align-items:center;
}
.quantity-box button{
    border: none;
    background-color:rgb(187, 187, 187);
    padding: 5px;
    border-radius: 5px;
}

.quantitiy{
    width: 100px;
    /* padding: 5px 25px; */
    text-align: center;
    text-decoration: none;
}

h3{
font-size: 1rem;
}

.cost{
    display: flex;
justify-content: space-between;
    width: 90%;
    border-top: 1px solid gray;
    margin-bottom: 10px;
}
@media (max-width: 768px){
    .flex-checkout{
        flex-direction: column-reverse;
    }
    .container{
        width: 495px;
    }
    .checkout__form{
        width: 100%;
        margin: auto;
    }
    .checkout__cart{
        width: 90%;
        margin: auto;
    }
}