@import url("https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Doto:wght@100..900&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Outfit:wght@100..900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css");
/*main colors
 * dark blue: #02084b
 * aqua: #46a6eb
 * coral: #ff6b6b*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
::selection {
    color: #418eea;
    background-color: rgba(85, 136, 155, 0.16);
}
body {
    padding: 0;
    font-family: "Google Sans Flex", sans-serif;
    background-color: #f5f5f5;
}
.main-header, footer {
    background-color: #02084b;
    color: white;
    padding: 15px 0;
}

.main-header li a {
    color: white;
}

.main-header li a:hover {
    color: #418eea;
}

.logo { width: 40px; vertical-align: middle; margin-right: 10px; }
.brand-title { display: inline-block; vertical-align: middle; font-size: 18px; margin: 0; font-weight: 600; }
.currency { margin-right: 15px; cursor: pointer; }

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .main-header .list-inline { margin: 10px 0; }
}

.category-header { margin-bottom: 15px; padding: 15px 0; border-bottom: 1px solid #e0e0e0; }
.category-header i { margin-right: 10px; }

.category-sidebar { padding: 20px 15px; border-bottom: 1px solid #e0e0e0; }
@media (min-width: 768px) {
    .category-sidebar { min-height: 100vh; border-bottom: none; border-right: 1px solid #e0e0e0; }
}

.category-list li { padding: 10px 0; cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.category-list li:hover { color: #46a6eb; }
.category-list a { color: inherit; text-decoration: none; }
.category-list a:hover { color: #46a6eb; }
main { padding: 20px 15px; }
main h2 { margin: 20px 0 15px 0; font-weight: 700; color: #02084b; }

@media (min-width: 768px) {
    main { padding: 20px 40px 20px 15px; }
    main h2 { margin: 25px 0 15px 0; }
}
.product-card {
    display: block;
    padding: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    background: #ffffff;
    text-align: center;
    margin: 10px auto 20px auto;
    width: 100%;
    max-width: 280px;;
}

.product-card:hover {
    box-shadow: 0 8px 25px rgba(70, 166, 235, 0.3);;
}

.product-card h3 {
    text-transform: uppercase;
    color: #02084b;
    font-size: 12px;
    margin: 12px 0 8px 0;
    font-weight: 600;
    line-height: 1.3;
    border-top: 3px solid rgba(204, 204, 204, 0.44);
    padding-top: 5px;
}

.product-card img {
    max-width: 100%;
    width: 160px;
    border-radius: 8px;
}

.product-card p {
    color: #46a6eb;
    font-size: 18px;
    font-weight: 700;
    margin: 8px 0;
}

@media (min-width: 768px) {
    .product-card {
        max-width: none;
        margin: 15px 15px 15px 0;
    }
}

@media (min-width: 1200px) {
    .product-card {
        padding: 20px;
    }

    .product-card img {
        width: 180px;
    }

    .product-card h3 {
        font-size: 13px;
    }
}

.product-footer { margin-top: 10px; font-size: 0; }
.cart-icon { display: inline-block; width: 25%; vertical-align: middle; font-size: 18px; text-align: right; }
.cart-icon i { color: #02084b; font-size: 18px; cursor: pointer;}
.cart-icon i:hover { color: #46a6eb; }
.color-options { display: inline-block; text-align: left; vertical-align: middle; width: 75%; font-size: 0; }
.color-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; margin-left: 3px;}
.color-dot:hover { border-color: #02084b;}

footer li { padding: 8px 0; }
footer a { color: white; text-decoration: none; }
footer a:hover { color: #46a6eb; text-decoration: underline; }
footer p { margin: 5px 0; }
footer .small { font-size: 12px; opacity: 0.8; }