/* Font Styles */
@font-face {
    font-family: "Poppins Bold";
    src: url("../../static/font/Poppins-Bold.otf");
}
@font-face {
    font-family: "Poppins Medium";
    src: url("../../static/font/Poppins-Medium.otf");
}
@font-face {
    font-family: "Poppins Regular";
    src: url("../../static/font/Poppins-Regular.otf");
}
@font-face {
    font-family: "Roboto Regular";
    src: url("../../static/font/Roboto-Regular.ttf");
}
@font-face {
    font-family: "Glyphicons";
    src: url("../../static/font/glyphicons-halflings-regular.ttf");
}

/* Color Settings */
:root {
    --primaryBlue: #2e40ff;
    --secondaryBlue: #131bba;
    --textGrey: #525252;
}

/* Defaulting */
html {
    scroll-behavior: smooth;
}
body {
    overflow-x: hidden;
    padding: 0;
    font-family: "Poppins Regular", Arial, Helvetica, sans-serif;
    background-image: url("../../static/image/main_bg.png");
    background-repeat: repeat;
}

a {
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}

/* Navigation Bar */
.navbar-brand img {
    max-height: 50px;
}

.main-nav{
    width: 60%;
}

.navbar .nav-link {
    text-align: left;
    color: var(--textGrey);
    font-size: 16px;
}

.navbar-toggler {
    color: var(--primaryBlue);
}

.blue {
    background-color: var(--primaryBlue);
    color: white;
}

.blue-main {
    color: var(--primaryBlue);
}

#top_row{
    background-color: var(--secondaryBlue);
    color: white;
}

.btn-shop-now{
    background-color: white;
    border-radius: 5px;
    border: 1px solid white;
    color: var(--secondaryBlue);
    font-family: "Poppins Bold";
    transition: all ease-in-out  0.3s;
}

.btn-shop-now:hover{
    background-color: var(--primaryBlue);
    color: white;
    border-color: var(--primaryBlue);
}

#mobileNav {
    width: 300px;
    background: white;
    color: black;
    transition: all 0.4s;
    height: 100vh;
    position: fixed;
    z-index: 999;
    top: 0;
    left: 0;
    margin-left: -300px;
    transition: all 0.5s ease-in-out;
}

#mobileNav.active{
    margin-left: 0px;
}

@media (max-width:999px)
{
    .main-nav{
        display: none!important;
    }
}


.mobile-navbar{
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-navbar-item{
    border-bottom: 1px solid rgb(201, 201, 201);
    width: 100%;
    padding: 10px;
}

.mobile-nav-link{
    text-decoration: none;
    color: black;
    width: 100%;

}

.mobile-navbar-item:hover{
    background: var(--primaryBlue);
}

.mobile-navbar-item:hover
.mobile-nav-link{
    color: white!important;
}

.nav-menu-tab .nav-menu-item{
    border: none;
    padding: 20px 10px;
    color: grey;
    background: rgb(243, 243, 243);
    border-bottom: 3px solid transparent;
    outline: none;
}


.nav-menu-tab .nav-menu-item.active{
    color: black;
    background: rgb(223, 223, 223);
    border-bottom: 3px solid var(--primaryBlue);
}


/* Button Styles*/
.btn-aguora-outline {
    color: var(--primaryBlue);
    border: 2px solid var(--primaryBlue);
    background-color: transparent;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-aguora-main {
    background-color: var(--primaryBlue);
    border: 2px solid var(--primaryBlue);
    color: white !important;
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    transition: all ease 0.3s;
}

.btn-aguora-white {
    background-color: white;
    color: var(--primaryBlue);
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
}

.btn-aguora-outline:hover {
    background-color: var(--primaryBlue);
    color: white;
}

.btn-aguora-main:focus,
.btn-aguora-main:hover {
    background-color: var(--secondaryBlue);
    color: white;
}

.raise {
    transition: ease 0.3s;
}

.raise:hover,
.raise:focus {
    box-shadow: 0 0.5em 0.5em -0.4em var(--secondaryBlue);
    transform: translateY(-0.25em);
}

.btn-trasnparent {
    background: none;
    border: none;
}

/* Text Styles */
.h-med-title,
.h-banner {
    font-family: "Poppins Bold";
}

.h-banner {
    text-align: center;
}

.text-bold {
    font-family: "Poppins Bold", Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.text-medium {
    font-family: "Poppins Medium", Arial, Helvetica, sans-serif;
}

.text-blue {
    color: var(--primaryBlue);
}
.text-required {
    color: red;
}
.text-justified {
    text-align: justify;
}
.text-muted {
    color: lightgray !important;
}

.link-main-custom {
    color: var(--textGrey);
}
.link-main-custom:hover,
.link-main-blue:hover,
.customer-care-links a:hover {
    color: var(--primaryBlue);
    cursor: pointer;
}
.link-main-custom.active {
    font-family: "Poppins Bold", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--primaryBlue);
}

.link-main-blue {
    color: var(--primaryBlue);
}

/* Input Styles */
.form-aguora-outline {
    border: 2px solid var(--primaryBlue);
    background: transparent;
}
.form-group label {
    font-family: "Poppins Medium", Arial, Helvetica, sans-serif;
}

/* Misc Styles */
.ul-default {
    list-style-type: none;
    padding-left: 0;
}
.glass-box {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
    border-radius: 5px;
    border: 2px solid white;
}
.border-left-box,
.border-left-box.active {
    border-left: 2px solid var(--primaryBlue);
    padding: 10px 20px;
}

.border-left-box.active {
    color: var(--primaryBlue);
}

.border-left-box.inactive {
    border-left: 2px solid var(--textGrey);
}

/* Footer */
#footer-icons a img {
    height: 45px;
    width: auto;
    margin-right: 10px;
}
#footer-details {
    border-top: 2px solid var(--primaryBlue);
    border-bottom: 2px solid var(--primaryBlue);
}

/* Media Queries */
@media (min-width: 1000px) {
    .navbar {
        padding-left: 70px;
        padding-right: 70px;
    }
    .navbar .nav-link::before {
        content: "";
        display: block;
        width: 25px;
        height: 5px;
        background: transparent;
        top: -15px;
    }
    .navbar .nav-link.active::before {
        background: var(--primaryBlue);
    }
    .navbar .nav-item .btn {
        margin-top: 5px;
    }
    .h-banner {
        font-size: 3em;
        text-align: left;
    }
    .p-large {
        font-size: 1.2em;
    }
}

/* Cart Styles */
#cartOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 998;
    display: none;
    
}

.cart-header{
    background-color: var(--primaryBlue);
    color: white;
    text-align: center;
    padding: 10px;
}

#sideCart {
    background: white;
    color: black;
    transition: all 0.4s;
    height: 100vh;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    margin-right: -300px;
    transition: all 0.5s ease-in-out;
}

.empty-cart{
    font-family: 'Poppins Bold';
}

#sideCart.active {
    margin-right: 0px;
}


.badge {
    padding: 11px;
    border-radius: 11px;
}

#cartCount {
    font-size: 10px;
    background: var(--primaryBlue);
    color: white;
    margin-left: -10px;
    padding: 5px 5px;
    top: -10px;
}

.btn-main-cart:focus {
    outline: none;
    box-shadow: none;
}

.cart-container {
    height: 65vh;
    overflow-y: scroll;
    width: 100%;
    overflow-x: hidden;
    padding: 20px;
}

@media(min-width:500px){
    #sideCart{
        width: 500px;
        margin-right: -500px;
    }
    .cart-container{
        height: 75vh;
    }
}

.cart-container::-webkit-scrollbar {
    width: 5px;
}
.cart-container::-webkit-scrollbar-track {
    background: white;
}
.cart-container::-webkit-scrollbar-thumb {
    background: rgb(210, 210, 210);
}
.cart-container::-webkit-scrollbar-thumb:hover {
    background: rgb(210, 210, 210);
}

.cart-list {
    padding-left: 0;
}

.cart-image {
    height: 100px;
}

.cart-remove {
    float: right;
    color: grey;
}

.quantity[type="number"]::-webkit-inner-spin-button,
.quantity[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.btn-minus,
.btn-plus {
    font-size: 10px;
    padding: 5px;
}

.quantity {
    font-size: 10px;
    text-align: center;
    width: 40px;
} 

/* Product Related Styles */

.product-name {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.product-price {
    font-family: "Poppins Bold", Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: var(--primaryBlue);
}

/* Account Dropdown */

.dropbtn {
    background-color: transparent;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown-acc {
    position: relative;
    display: inline-block;
}

.dropbtn:focus {
    outline: none;
    box-shadow: none;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.dropdown-content a {
    color: black;
    padding: 8px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: var(--primaryBlue);
    color: white;
}

.show {
    display: block;
}