@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;900&display=swap');

body {margin: 0; padding: 0; font-family: 'Roboto', sans-serif;}

h1 {
    font-weight: 300;
    line-height: 1.1;
    font-size: 3rem;
    margin-top: 0rem;
    margin-bottom: 2rem
}

h2 {
    font-weight: 600;
    line-height: 1.1;
    font-size: 3rem;
    margin-top: 2.5rem;
    margin-bottom: 2rem
}

h3 {
    font-weight: 300;
    line-height: 1.1;
    font-size: 1.8rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem
}

h4 {
    font-weight: 700;
    line-height: 1.1;
    font-size: 1.4rem;
    margin-top: 2rem;
    margin-bottom: 2rem
}

h5 {
    font-weight: 700;
    line-height: 1.1;
    font-size: 1.2rem;
    margin-top: 2rem;
    margin-bottom: 2rem
}

h6 {
    font-weight: 700;
    line-height: 1.1;
    font-size: 1rem;
    margin-top: 2rem;
    margin-bottom: 2rem
}



* {box-sizing: border-box; transition: all 0.3s; max-width: 100%;}

.header-top {background: #eaedec; height: 35px;}
.header-top ul {list-style: none; display: flex; flex-direction: row; justify-content: flex-end; padding: 8px 0 0; margin: 0;}
.header-top ul li:first-child {margin-left: 0;}
.header-top ul li {margin-left: 30px;}
.header-top ul li a {color: #000; text-decoration: none; font-size: 14px; font-weight: 500;}
.header-top ul li a:hover {text-decoration: underline;}
.header-top ul li img {display: inline-block; vertical-align: middle; margin-right: 7px;}
.cart-count {display: inline-block; vertical-align: top; width: 15px; height: 15px; background: red; border-radius: 50%; text-align: center; color: #fff; font-size: 11px; font-weight: 600; line-height: 16px; margin-left: 3px;}
.header-mid {background: #79d4e7; padding: 40px 0; text-align: right;}
.inner-container {max-width: 1300px; width: 100%; padding: 0 15px; margin: 0 auto;}
.inner-container:after {content: ""; display: table; clear: both;}

.logo {float: left; margin-top: 10px;}
.text-header {font-size: 45px; font-weight: 900; display: inline-block; vertical-align: middle; color: #143681;}

.navigation {background: #143681;}
.nav {list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row;}
.nav li a {color:#fff; font-weight: 500; display: inline-block; padding: 15px 15px; text-decoration: none;}
.nav li a:hover {background: rgba(255,255,255,0.2);}

.main-container {background: #fef7e7; min-height: 500px;}
.main-container.home img {width: 100%;}

.footer {background: #2b485c; text-align: center; padding: 40px 0;}
.text-footer {font-size: 45px; font-weight: 900; display: inline-block; vertical-align: middle; color: #79d4e7;}

.product-row {margin: 0; padding: 50px 0 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap;}
.product-row li {width: calc((100% - (30px * 4)) / 4); background: #fff; text-align: center; margin: 0 15px 50px; padding: 15px; box-shadow: 0 0 15px rgba(0,0,0,0.2);}
.product-row li h3 {font-size: 22px; font-weight: 500;}
.product-price {display: block; margin: 0 0 22px; font-size: 25px; font-weight: 600;}
.btn-addtocart {background: #00a7c9; display: inline-block; min-width: 150px; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none;  font-weight: 600; text-align: center;}
.btn-addtocart:hover {background: #143681;}

h2 {margin: 0; padding-top: 30px; font-size: 35px;}
input {width: 60px; height: 30px; border-radius: 0; border: 1px solid #999; text-align: center;}
input:focus {outline: 0;}

table {background: #fff; width: 100%; border: 1px solid #ccc; margin: 40px 0; border-collapse: collapse;}
table th {padding: 10px; text-align: center; border: 1px solid #ccc;}
table th:first-child {text-align: left;}
table td {border: 1px solid #ccc; padding: 10px; text-align: center}
table td:first-child {text-align: left;}

table tfoot th:first-child {text-align: right;}

.cart-product {float: left; margin-right: 20px;}
.cart-product-pic {width: 100px; border: 1px solid #999;}
.cart-table h3 {font-size: 18px; font-weight: 500; margin: 8px 0 0;}
.cart-table + .btn-addtocart {margin-bottom: 50px;}

.checkout-btn {float: right;}

label {display: block; margin-bottom: 7px; font-weight: 500;}
.input-field {width: 100%; text-align: left; height: auto; padding: 10px;}
.field {margin-bottom: 15px;}

.checkout-form {float: left; width: 75%; padding: 50px 0;}
.checkout-form .field {float: left; width: 50%; padding: 0 15px 0 0;}
.checkout-form h3 {float: left; display: block; width: 100%; font-weight: 600;}
.checkout-form .checkout-btn {margin-right: 15px; cursor: pointer; height: auto; border: 0; font-family: 'Roboto', sans-serif; font-size: 16px;}

.checkout-summary {float: right; width: 20%; background: #fff; padding: 15px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.checkout-summary .summary-info {border-bottom: 1px solid #ccc; margin: 15px 0;}
.checkout-summary .summary-info h4 {margin: 0;}

.createaccbtn-box  {padding-top: 50px;}
.createaccbtn-box table {background: transparent; margin: 0; border: 0;}
.createaccbtn-box table td {border: 0; padding: 0;}
#createAccountBtn {background: #00a7c9; display: inline-block; font-size: 16px; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none; font-family: 'Roboto', sans-serif; font-weight: 600; text-align: center; border: 0; cursor: pointer;}

.orfillout-text {font-weight: 500; margin-left: 15px;}

.order-success {padding: 100px 0 50px; text-align: center; font-size: 20px; font-weight: 500;}

.login-box {padding: 50px 0; text-align: center;}
.login-box h2 {margin-bottom: 30px;}
.login-box-inner {background: #fff; padding: 15px; max-width: 600px; margin: 0 auto; box-shadow: 0 0 10px rgba(0,0,0,0.2); text-align: left;}
.login-box-inner:after {content: ""; display: table; clear: both;}
.login-box .btn-custom {float: right;}
.login-box .newuser {margin-top: 10px; display: inline-block;}

.dashboard {padding: 50px 0;}
.dashboard h2 {padding-top: 0;}
.dashboard-info {background: #fff; padding: 15px; margin: 25px 0 0; max-width: 400px; box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.dashboard-info h4 {margin: 10px 0 0; font-weight: 600;}

.btn-custom {font-family: 'Roboto', sans-serif; font-size: 16px; background: #00a7c9; display: inline-block; min-width: 150px; color: #fff; padding: 10px 15px; border-radius: 5px; text-decoration: none;  font-weight: 600; text-align: center; height: auto; border: 0; cursor: pointer;}
.btn-custom:hover {background: #143681;}

.signup-box .createaccbtn-box table td {text-align: center;}
.signup-box .checkout-form:after {content:""; display: table; clear: both;}
.signup-box .checkout-form {float: none; margin: 0 auto;}

form:after {content:""; display: table; clear: both;}

@media (max-width: 991px) {
    .product-row li {width: calc((100% - (30px * 2)) / 2);}
    
    .checkout-form, .checkout-summary {width: 100%;}
    .checkout-summary {margin-bottom: 50px;}
}

@media (max-width: 499px) {
    .product-row li {width: 100%;}
}