*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

a{
    color: black;
}


#container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#container::before {
    background: url('bg1.jpg') no-repeat center center/cover;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    content: "";
    position: absolute;
    z-index: -1;
    opacity: 0.5;
}


#popup{
    width: 495px;
    height: 415px;
    background: #FFFFFF;
    z-index: 1;
    border-radius: 1rem;
}

#logo__div{
    text-align: center;
    margin: 0.5rem 0 0.5rem 0;
}

 #cart__logo{
    width: 60px;
    height: 60px;
}

#bg{
    background: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
    padding: 0.5rem 0 0 0;
}

#checkout{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    background: #FFFFFF;

}

#cart{
    display: flex;
    align-items: center;
    justify-content: center;
}

#info{
    /* margin: 1.5rem 0 1rem 0; */
    padding: 0 0 0 1rem;
}

#invoice{
    font-weight: 500;
    /* font-family: 'Open Sans', sans-serif; */
    font-family: 'Roboto', sans-serif;
}

#product{
    font-weight: bold;
    font-size: 1.1rem;
    font-family: 'Roboto', sans-serif;
}

#price{
    font-weight: bolder;
    font-size: 1.1rem;
    font-family: 'Montserrat', sans-serif;
    /* padding: 0 0 0 0.5rem; */
}

#details{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

#gateway__number{
    margin: 0.5rem 0 0.5rem 0;
    font-size: 1.1rem;
    font-weight: bolder;
    font-family: 'Open Sans', sans-serif;
}

#number{
    text-align: center;
    padding: 0.5rem;
    width: 15rem;
    font-size: 1.1rem;
    font-weight: bolder;
    font-family: sans-serif;
    border-radius: 0.5rem;
    border: 2px solid black;    
    font-family: 'Poppins', sans-serif;
}

#buttons{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.7rem 0 0.5rem 0;
}

#contact{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 0.5rem 0;
}

#contact__no{
    padding: 0 0 0 0.5rem;
    font-family: cursive;
    font-weight: bolder;
    color: RGB(82, 112, 255);
    font-size: 1.2rem;
    font-family: 'Lato', sans-serif;
    color: black;
}

#terms{
    font-weight: 500;
    margin: 0.5rem 0 1rem 0;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

#call{
    width: 50px;
    height: 50px;
}


.btn__style{
    width: 8rem;
    height: 2.5rem;
    font-weight: 500;
    font-size: 1.1rem;
    margin-left: 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
}

#cross{
    font-size: 1.2rem;
    font-weight: bolder;
    color: red;
}

#tick{
    font-size: 1.2rem;
    font-weight: bolder;
    color:green;
}

/* media query for mobile devices */

@media screen and (max-width:480px) {

    #popup{
        margin: 1rem;
        height: 365px;
    }

    #logo__div{
        margin: 0.3rem 0 0.2rem 0;
    }

    #logo{
        height: 45px;
    }

    #price{
        font-size: 1rem;
    }

    #gateway__number{
        margin: 0.5rem 0 0.5rem 0;
        font-size: 1rem;
    }

    #number{
        max-width: 10rem;
        font-size: 1rem;
        height: 2.7rem;
    }

    #terms{
        text-align: center;
        max-width: 350px;
        margin: 0.5rem 0 0.7rem 0;
        font-size: 0.8rem;
    }

    .btn__style{
        width: 7rem;
        height: 2rem;
        font-size: 1rem;
    }

    #call{
        width: 45px;
        height: 45px;
    }

}