checkout.css

*{
    margin:0px;
}
/* Header Section */
header{
    /* overflow: hidden; */
    background-color: #fff;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;   
}
#container{
    width: 100%;
    margin: auto;
    padding:20px 10px;
    position:relative;
    display:flex;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    /* border-top: 1px solid black; */
}
#container > div {
    /* border-top: 1px solid teal; */
    display: flex;
    justify-content:space-around;
}
#container > :first-child{
    width: 70%;
}
#container > :first-child > a {
    width: 14%;
    margin-top:0px;
}
#container > :first-child > div{
    display: flex;
}
#container > :first-child > div > i{
    font-size:15px;
    color:grey;
    position:absolute;
    left:250px;
    top: 39px;
}
#container > :first-child > div > p{
    font-size:15px;
    color:grey;
    font-family: sans-serif;
    position:absolute;
    left:270px;
    top: 37px;
}
#container > :first-child > div > i:hover{
    color:black;
}
#container > :first-child > div > p:hover{
    color:black;
}
#container > :first-child > input{
    border: 1px solid #ccc;
    border-radius:30px;
    width: 60%;
    padding:15px;
    font-family: sans-serif;
    margin-left:120px;
}
#container > :first-child > i{
    color:grey;
    position:absolute;
    right:510px;
    top:37px;
}
#container > :first-child > i:hover{
    color:#5DC6AD;
}
#container > :last-child{
    /* border:1px solid red; */
    width: 27%;
}
#container > :last-child > i,a{
    font-size:15px;
    color:grey;
    margin-top: 15px;
}
/* #container > :last-child > i{
    margin-top: 17px;
} */
#container > :last-child > p{
    font-size:15px;
    color:grey;
    margin-top: 15px;
    font-family: sans-serif;
    margin-left: -40px;
}
a>i{
    color:grey;
}
a>i:hover{
    color: black;
}
#container > :last-child > p > a{
    color: grey;
    text-decoration: none;
}
#container > :last-child > p > a:hover{
    color: black;
}
/* #container > :last-child > button{
    border: 1px solid #ccc;
    border-radius:10px;
    height:40px;
    width:80px;
    margin-top:3.5px;
    background-color:#5DC6AD;
    color:white;
} */
#container > :last-child > i:hover{
    color:black;
}
#container > :last-child > p:hover{
    color:black;
}
/* Category Section */
.category{
    margin-top: 90px;
    display:flex;
    justify-content:center;
    border:1px solid #ccc;
    border-left: none;
    border-right: none;
    border-top: none;
}
.btn{
    background-color:white;
    margin-top: 8px;
    color:grey;
}
.dropdown:hover .dropdown-content {
    display: block;
}
.imgs{
    width: 95%;
    margin: auto;
    display:flex;
    /* border: 1px solid green; */
    justify-content: space-between;
}

/* Status Section */
.status{
    width: 100%;
    /* border: 1px solid blue; */
    background-color:#eff9f7;
}
#cartOnly{
    /* border: 1px solid blue; */
    width: 30%;
    display: flex;
    margin:auto;
    /* justify-content:space-between; */
    padding:25px;
}
#cartOnly>div{
    width: 14%;
    /* border: 1px solid red; */
    text-align: center;
    padding: 10px;
    border-radius: 50%;
    background-color:white;
    /* margin-left:20px; */
}
#cartOnly>:nth-child(even){
    background-color:#eff9f7;
    width: 25%;
    height:1px;
    border-radius: 1px;
    border:2px dashed #99a2a0;
    border-left: none;
    border-top:none;
    border-right:none;
    margin-top: 5px;
}
#cartOnly>div>i{
    font-size:25px;
    color:gray;
    margin-top: 5px;
}
#cartOnly>:first-child{
    background-color:#5DC6AD;
}
#cartOnly>:first-child>i{
    color: white;
}
/* cart section */
.kart{
    display: flex;
    width: 95%;
    margin: auto;
    justify-content: space-between;
}
#empty{
    width: 95%;
    margin: auto;
    /* border: 1px solid black; */
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;

}
#empty>h1{
    font-size: 30px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#empty>img{
    width: 20%;
    margin-top: 20px;
}
#empty>h2{
    font-size: 20px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    margin-top:30px;
}
#empty>p{
    font-size: 15px;
    width: 17%;
    margin: auto;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: grey;
}
#empty>a{
    text-decoration: none;
    color: white;
}
#empty>a>button{
    border:1px solid #5DC6AD;
    background-color:#5DC6AD;
    padding:13px 18px 13px 18px;
    border-radius:25px;
    margin-top:20px;
    margin-bottom: 10px;
}
#cart{
    /* border:1px solid #5DC6AD; */
    width:65%;
    padding:0px 20px 20px 20px;
    margin-top:20px;
    border-radius: 5px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}
#cart>h1{
    font-size: 25px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
#cart>div{
    width:100%;
    /* border:1px solid red; */
    display: flex;
    /* justify-content:space-between; */
    margin-top: 10px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
#cart>div>img{
    width: 20%;
}
.nameAndQuantityPrice{
    width:75%;
    display:flex;
    justify-content: space-between;
}
.nameAndQuantityPrice>div{
    margin-top:55px;
    margin-left:50px;
}
/* new css */
.nameAndQuantityPrice>div:first-child{
    width:40%;
}
.nameAndQuantityPrice>div:nth-child(2){
    width:20%;
    display:flex;
    justify-content: space-around;
    position: relative;
}
.nameAndQuantityPrice>div:nth-child(2)>button{
    width:25px;
    height: 35px;
    margin-top:18px;
    border: none;
    border-radius:4px;
    background-color:#5DC6AD;
    color: #fff;
}
.nameAndQuantityPrice>div:nth-child(2)>p{
    position: absolute;
    top: -55px;
}
/* End */
.nameAndQuantityPrice>button{
    width:100px;
    height: 35px;
    margin-top: 75px;
    border: none;
    border-radius:4px;
    background-color:#5DC6AD;
    color: #fff;
}
#cartValue{
    width:33%;
    height:450px;
    padding: 10px;
    margin-top:20px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    /* border:1px solid blue; */
}
#cartValue>button{
    width:100%;
    background-color:#fffbf9;
    padding: 10px;
    border:2px dashed crimson;
    border-radius:5px;
    font-size: 25px;
}
#cartValue>h1{
    font-size: 30px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
table{
    width: 100%;
    margin-top: 20px;
    border:none;
    border-collapse: collapse;
}
th{
    font-size:25px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
td{
    color: #9e9796;
    font-size:16px;
    /* font-family: 'Open Sans'; */
    /* font-family:Helvetica Neue, Helvetica, Arial, sans-serif; */
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/* .item>:first-child>td{
    font-size:25px;
    color: black;
} */
hr{
    width: 95%;
    margin: auto;
}
.Pay{
    width: 100%;
    margin-left: 10px;
}
.Pay>tbody>tr>:nth-child(2){
    font-size:12px;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
/* .Pay>tbody>:first-child>td{
    font-size:14px;
    color: black;
} */
#checkout{
    width: 100%;
    margin: auto;
    display:flex;
    justify-content:space-between;
    background-color:#47BE9B;
    padding:1px;
    margin-top: 25px;
    border-radius: 10px;
    color: #fff;
}
#checkout>div>p{
    margin-left: 15px;
    line-height: 0.8;
    margin-top: 10px;
}
#checkout>div>:last-child{
    font-size: 15px;
}
#checkout>h4{
    margin-top: 17px;
    margin-right: 15px;
}
#cartValue>a{
    text-decoration: none;
}
/* Footer Image Section */
.footerImg{
    width: 100%;
    /* border: 1px solid white; */
}
.footerImg > img{
    width: 100%;
}
/* Footer Section */
.footer{
    width: 100%;
    background-color:#165241;
    padding-bottom: 20px;
}
.footer > :first-child{
    width: 95%;
    margin: auto;
    /* border: 1px solid blue; */
}
.first{
    width: 95%;
    display:flex;
}
.ff{
    width: 50%;
    /* border: 1px solid red; */
    display:flex;
    /* justify-content:space-between; */
}
.fff{
    width: 40%;
    /* border: 1px solid white; */
    color:#b9cbc6;
    font-family: sans-serif;
}
.fff>p{
    margin-top:30px;
    line-height: 2;
    font-size: 15px;
}
.ffs{
    width: 40%;
    margin-top: 26px;
    margin-left: 100px;
}
.ffs>ul{
    font-size: 22px;
    color:white;
    font-family: sans-serif;
}
.ffs>ul>li{
    list-style: none;
    font-size: 16px;
    line-height: 2.5;
    color:#b9cbc6;
}
.ffs>ul>li>a{
    text-decoration: none;
    color:#b9cbc6;
}
.fs{
    width:50%;
    display: flex;
}
.fsf{
    width: 40%;
    /* border: 1px solid white; */
    margin-top: 26px;
}
.fss{
    width: 50%;
    margin-top: 26px;
    margin-left: 50px;
    /* border: 1px solid white; */
}
.fsf,.fss>ul{
    font-size: 22px;
    color:white;
    font-family: sans-serif;
}
.fsf>ul>li{
    list-style: none;
    font-size: 16px;
    line-height: 2.5;
    color:#b9cbc6;
}
.fss>ul>li{
    list-style: none;
    font-size: 16px;
    line-height: 2.5;
    color:#b9cbc6;
}
.fsf>ul>li>a{
    text-decoration: none;
    color:#b9cbc6;
}
.fss>ul>li>a{
    text-decoration: none;
    color:#b9cbc6;
}
.fss>ul>li>a>i{
    color:#b9cbc6;
}

.second{
    width: 95%;
    margin: auto;
    /* border: 1px solid white; */
}
.second > h1{
    color: white;
}
.second > p{
    color:#b9cbc6;
    line-height:1.5;
    text-align: justify;
    margin-top: 20px;
}
.third{
    width: 95%;
    margin: auto;
}
.third > p{
    color: #b9cbc6;
    text-align: center;
    margin-top:30px;
    font-size: 16px;
}
.fss > h4{
    color: White;
    margin-left: 40px;
    margin-top: 30px;
}
.fss > h4 + div{
    width: 100%;
    text-align: end;
}
.fss > h4 + div > :first-child{
    width: 39%;
}
.fss > h4 + div > :last-child{
    width: 48%;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* Header Section */
    #container > :first-child >a>img{
        width: 150px;
        margin-left: -80px;
    }
    #container > :first-child > div > i{
        margin-left:-80px;
        display:none;
    }
    #container > :first-child > div > p{
        margin-left:-80px;
        display:none;
    }
    #container > :first-child > input[type="text"]{
        width: 50%;
        margin-left:-300px;
    }
    #container > :first-child > :last-child{
        /* margin-left:-500px; */
        display: none;
    }
    #cartt{
        margin-left: -80px;
        font-size: 22px;
    }
    #container > :last-child{
        position: relative;
    }
    #valueCart{
        position: absolute;
        left:50px;
    }
    #credit{
        position: absolute;
        left:-3px;
        font-size: 22px;
    }
    #cartt2,#credit2{
        display: none;
    }
    #container > :last-child  i{
        margin-left: -20px;
    }
    /* Status Section  */
    #cartOnly{
        width: 45%;
    }
    #cartOnly>div{
        border-radius: 50%;
        /* padding: 5px; */
    }
    #cartOnly>div>i{
        font-size: 20px;
    }
}

@media screen and (min-width: 426px) and (max-width: 768px) {
    /* Header Section */
    #container > :first-child >a>img{
        width: 150px;
        margin-left: -80px;
    }
    #container > :first-child > div > i{
        display:none;
    }
    #container > :first-child > div > p{
        display:none;
    }
    #container > :first-child > input[type="text"]{
        width: 50%;
        margin-left:-300px;
    }
    #container > :first-child > :last-child{
        /* margin-left:-500px; */
        display: none;
    }
    #cartt{
        margin-left: -70px;
        font-size: 22px;
    }
    #container > :last-child{
        position: relative;
    }
    #valueCart{
        position: absolute;
        left:28px;
    }
    #credit{
        position: absolute;
        left:-20px;
        font-size: 22px;
    }
    #cartt2,#credit2{
        display: none;
    }
    #container > :last-child {
        display:flex;
        justify-content: space-between;
    }
    #container > :last-child i{
        margin-left: -20px;
    }

    /* Status Section  */
    #cartOnly{
        width: 50%;
    }
    #cartOnly>div{
        border-radius: 50%;
        /* padding: 3px; */
    }
    #cartOnly>div>i{
        font-size: 20px;
    }

    /* Cart Section  */
    .kart{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        width: 100%;
        margin: auto;
        justify-content: space-between;
    }
    #cart{
        width: 100%;
    }
    #cartValue{
        width: 100%;
    }
    #cart>div{
        width: 100%;
    }

    /* Footer Section */
    .first{
        width: 95%;
        display:grid;
        grid-template-columns: repeat(1,1fr);
    }
    .ff{
        display:block;
        width: 100%;
        /* border: 1px solid red; */
        display:flex;
        /* justify-content:space-between; */
    }
    .fs{
        width:100%;
        display: flex;
        /* border: 1px solid black; */
    }
}

@media screen and (min-width: 0px) and (max-width: 426px) {
    /* Header Section */
    #container > :first-child >a>img{
        width: 120px;
        margin-left: -65px;
    }
    #container > :first-child > div > i{
        display:none;
    }
    #container > :first-child > div > p{
        display:none;
    }
    #container > :first-child > input[type="text"]{
        width: 50%;
        margin-left:-300px;
        display:none;
    }
    #container > :first-child > :last-child{
        /* margin-left:-500px; */
        display: none;
    }
    #cartt{
        margin-left: -187px;
        font-size: 15px;
    }
    #container > :last-child{
        position: relative;
    }
    #valueCart{
        position: absolute;
        left:158px;
    }
    #credit{
        position: absolute;
        left:-130px;
        font-size: 15px;
        /* display:none; */
    }
    #cartt2,#credit2{
        display: none;
    }
    #signup{
        margin-left: -130px;
    }
    #container > :last-child > button{
        border: 1px solid #ccc;
        border-radius:10px;
        height:25px;
        width:70px;
        margin-top:3.5px;
        background-color:#5DC6AD;
        color:white;
    }
    #container > :last-child {
        display:flex;
        justify-content: space-between;
    }
    #container > :last-child i{
        margin-left: -150px;
    }
    #container > :last-child p{
        margin-left: -300px;
    }

    /* Status Section  */
    #cartOnly{
        width: 80%;
    }
    #cartOnly>div{
        border-radius: 50%;
        /* padding: 3px; */
    }
    #cartOnly>div>i{
        font-size: 20px;
    }

    /* Cart Section  */
    .kart{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        width: 100%;
        margin: auto;
        justify-content: space-between;
    }
    #cart{
        width: 100%;
    }
    #cartValue{
        width: 100%;
    }
    #cart>div{
        width: 100%;
    }
    .nameAndQuantityPrice{
        width: 100%;
        font-size: 11px;
        margin-top: -45px;
        display:flex;
        /* justify-content:space-around; */
    }
    .nameAndQuantityPrice>:first-child>p,h4{
        margin-left: -40px;
    }
    .nameAndQuantityPrice>:nth-child(2)>:first-child{
        margin-left: -70px;
    }
    .nameAndQuantityPrice>:nth-child(2)>p{
        margin-left: -70px; 
    }
    .nameAndQuantityPrice>:nth-child(2)>:last-child{
        margin-left: -30px; 
    }
    .nameAndQuantityPrice>:last-child>{
        width: 20%;
    }
    /* Footer Section */
    .first{
        width: 95%;
        display:grid;
        grid-template-columns: repeat(1,1fr);
    }
    .ff{
        display:block;
        width: 100%;
        /* border: 1px solid red; */
        display:flex;
        /* justify-content:space-between; */
    }
    .fs{
        width:100%;
        display: flex;
        /* border: 1px solid black; */
    }
    .second>h1{
        font-size:17px;
    }
}