/* Root Colors and Variables */

:root {

    --primary-color: #c41681;

    --dark-color: #2c2c2c;

    --light-color: #f9f9f9;

    --gray-color: #b8b5b5;

    --border-color: #eaeaea;

    --yellowies-color: #eec02f;

    --blueish-color: #4c96ae;

    --transition: 0.3s ease-in-out;

    --shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);

    --radius: 6px;

}



/* .theme-bc-yellow {

    background-color: var(--blueish-color);

    color: white;

}



.theme-color-yellow {

    color: var(--blueish-color);

} */



.theme-bc-blue {

    background-color: var(--blueish-color);

    color: white;

}






/* 

.theme-bc-red {

    background-color: var(--blueish-color);

}



.theme-color-red {

    color: var(--blueish-color);

} */



.bc-light-blue {

    background-color: #add8e617;

}



/* Reset */

a {

    text-decoration: none;

    color: inherit;

}



ul {

    margin: 0;

    padding: 0;

    list-style: none;

}



/* Top Strip */

.top-nav-strip {

    background-color: var(--dark-color);

    color: #fff;

    font-size: 14px;

    font-weight: 500;

    padding: 4px 0;

}



.top-nav-strip a {

    color: #fff;

    transition: var(--transition);

}



.top-nav-strip a:hover {

    color: var(--blueish-color);

}



.right-border-1 {

    border-right: 1px solid rgba(255, 255, 255, 0.2);

    padding-right: 15px;

    margin-right: 15px;

}



/* Main Header */

.box-shadow-add {

    box-shadow: var(--shadow);

    background: #fff;

    position: sticky;

    top: 0;

    z-index: 1000;

}







.display-flex {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



/* Search Bar */

.input-group {

    border: 1px solid var(--border-color);

    border-radius: var(--radius);

    overflow: hidden;

}



.label-search-icon {

    background: var(--blueish-color);

    padding: 10px 15px;

    border-right: 1px solid var(--border-color);

    color: white;

}



.input-group input {

    border: none;

    padding: 10px;

    font-size: 14px;

}



.input-group select {

    border: none;

    background: var(--blueish-color);

    font-size: 14px;

    padding: 10px;

    color: white;

}







.input-group input:focus,

.input-group select:focus {

    outline: none;

}



.theme-light-blue {

    background-color: #4c96ae17;

}



.box-shadow1 {

    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

}



/* User & Cart */

.user-icon-bg, .cart-icon-bg {

    background-color: transparent;

    color: white;

    border-radius: 8px;

    padding: 0px 0px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #fff;

    padding: 10px;

}



.user-acc .small a {

    font-weight: 600;

    color: var(--dark-color);

    transition: var(--transition);

}



.user-acc .small a:hover {

    color: var(--blueish-color);

}



.cart-icon-bg svg {

    stroke: var(--dark-color);

}



.fixed-header {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    background: #fff;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    z-index: 999;

}





.badge {

    font-size: 12px;

}



.badge-custom {

    font-size: 16px;

    font-weight: 400;

    padding: 3px 5px 5px;

    border-radius: 4px;

    color: white !important;

}



/*.web-icon-logo {

    width: 90px;

    padding: 5px !important;

}



.web-icon-logo img {

    width: 100%;

}*/



.position-relative-cu0 {

    position: relative;

}



/* Hover Menus */

.cart-menu-cust {

    width: 300px;

    display: none;

    position: absolute;

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    top: 4.6rem;

    right: 2rem;

    /* left: 0; */

    padding: 1rem;

    z-index: 10;

}



.cart-menu-cust0 {

    width: 300px;

    display: none;

    position: absolute;

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    top: 3.5rem;

    right: 0;

    /* left: 0; */

    padding: 1rem;

    z-index: 10;

}





.shopping-cart-d:hover .cart-menu-cust,

.user-acc:hover .cart-menu-cust0 {

    display: block;

}



.cart-menu-cust p {

    font-size: 14px;

    color: #666;

}



.cart-menu-cust0 ul li {

    padding: 8px;

    font-size: 14px;

    cursor: pointer;

    transition: var(--transition);

}



.cart-menu-cust0 ul li:hover {

    color: var(--blueish-color);

}



/* Navigation Menu */

.navbar {

    background: #fff;

    /* border-top: 1px solid var(--border-color); */

}



.nav-link {

    font-weight: 600;

    padding: 10px 8px 10px 0 !important;

    color: var(--dark-color);

    transition: var(--transition);

}



.nav-link:hover {

    color: var(--blueish-color);

}



/* Mega Menu */

.dropdown-menu2 {

    display: none;

    position: absolute;

    background: #fff;

    border-radius: var(--radius);

    box-shadow: var(--shadow);

    top: 100%;

    left: 0;

    min-width: 200px;

}



.nav-item:hover>.dropdown-menu2 {

    display: block;

}



.mega-menu {

    display: none;

    position: absolute;

    top: 0;

    left: 100%;

    background: #fff;

    box-shadow: var(--shadow);

    padding: 20px;

    min-width: 500px;

    border-radius: var(--radius);

}



.dropdown-menu2 li {

    padding: 12px 16px;

    transition: var(--transition);

}



.dropdown-menu2 li:hover {

    background: var(--light-color);

}



.dropdown-menu2 li:hover .mega-menu {

    display: flex;

    justify-content: space-between;

}



.mega-menu-column a {

    color: var(--dark-color);

    font-size: 14px;

    margin-bottom: 8px;

    display: block;

    transition: var(--transition);

}



.mega-menu-column a:hover {

    color: var(--blueish-color);

}



.search-bar-container {

    display: none;

    border-top: 1px solid #ddd;

}



/* Responsive */

@media (max-width: 991px) {

    .input-group select {

        display: none;

    }



    .navbar-nav {

        flex-direction: column;

    }



    .nav-link {

        padding: 2px;

    }



    .mega-menu {

        position: relative;

        min-width: 100%;

    }

}









.footer {

    background: #0d1117;

    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);

    box-sizing: border-box;

    width: 100%;

    text-align: left;

    font: bold 16px sans-serif;

    padding: 55px 50px;

    color: #fff !important;

}



.footer .footer-left,

.footer .footer-center,

.footer .footer-right {

    display: inline-block;

    vertical-align: top;

}



/* Footer left */



.footer .footer-left {

    width: 40%;

}





.footer h3 {

    color: #ffffff;

    font: normal 36px 'Open Sans', cursive;

    margin: 0;

}



.footer h3 span {

    color: teal;

}



/* Footer links */



.footer .footer-links {

    color: #ffffff;

    margin: 20px 0 12px;

    padding: 0;

}



.footer .footer-links a {

    display: inline-block;

    line-height: 1.8;

    font-weight: 400;

    text-decoration: none;

    color: inherit;

}



.footer .footer-name {

    color: teal;

    font-size: 14px;

    font-weight: normal;

    margin: 0;

}



/* Footer Center */



.footer .footer-center {

    width: 35%;

}



.footer .footer-center i {

    background-color: #33383b;

    color: #ffffff;

    font-size: 25px;

    width: 38px;

    height: 38px;

    border-radius: 50%;

    text-align: center;

    line-height: 42px;

    margin: 10px 15px;

    vertical-align: middle;

}



.footer .footer-center i.fa-envelope {

    font-size: 17px;

    line-height: 38px;

}



.footer .footer-center p {

    display: inline-block;

    color: #ffffff;

    font-weight: 400;

    vertical-align: middle;

    margin: 0;

}



.footer .footer-center p span {

    display: block;

    font-weight: normal;

    font-size: 14px;

    line-height: 2;

}



.footer .footer-center p a {

    color: teal;

    text-decoration: none;

    

}



.footer .footer-links a:before {

    content: "|";

    font-weight: 300;

    font-size: 20px;

    left: 0;

    color: #fff;

    display: inline-block;

    padding-right: 5px;

}



.footer .footer-links .link-1:before {

    content: none;

}



/* Footer Right */



.footer .footer-right {

    width: 20%;

}



.footer .footer-about {

    line-height: 20px;

    color: #92999f;

    font-size: 13px;

    font-weight: normal;

    margin: 0;

}



.active-menu {

    color: #fff !important;

    font-weight: 600 !important;

    /* border-bottom: 2px solid #007bff; */

    text-decoration: underline!important;

}







.footer .footer-about span {

    display: block;

    color: #ffffff;

    font-size: 14px;

    font-weight: bold;

    margin-bottom: 20px;

}



.footer .footer-socials {

    margin-top: 25px;

}



.footer .footer-socials a {

    display: inline-block;

    font-size: 35px;

    cursor: pointer;

    color: #ffffff;

    text-align: center;

    line-height: 35px;

    margin-right: 5px;

    margin-bottom: 5px;

}



.footer .logo {

    max-width: 100px;

    height: 50px;

    width: 50px;

    border-radius: 50%;

    margin-bottom: 15px;

}





@media (max-width: 800px) {



    .footer {

        font: bold 14px sans-serif;

    }



    .footer .footer-left,

    .footer .footer-center,

    .footer .footer-right {

        display: block;

        width: 100%;

        margin-bottom: 40px;

        text-align: center;

    }



    .footer .footer-center i {

        margin-left: 0;

    }



}



.btn:hover {

    background-color: unset !important;

    color: unset !important;

}



.btn-custom {

    border: none;

    padding: 10px;

    border-radius: 5px;

}



/* Default Styles */

.nav-link {

    color: #333;

    text-decoration: none;

    font-weight: 500;

}



.nav-link:hover {

    color: var(--blueish-color);

}



/* Mobile Menu Hidden */

.mobile-menu {

    display: none;

}



/*  Search Bar Toggle Animation */

#searchBar {

    transition: all 0.3s ease-in-out;

}



.show {

    display: block !important;

}



/* Media Queries */

@media (max-width: 991px) {

    .nav {

        display: none;

    }



    /* .mobile-menu.show {

        display: block !important;

    } */

}



.mobile_view_only {

    display: none;

}



.desktop_view_only {

    display: block;

}



@media (max-width: 767px) {

    .header-main {

        flex-wrap: wrap;

    }



    .logo img {

        width: 120px;

    }



    .mobile_view_only {

        display: block;

    }



    .desktop_view_only {

        display: none;

    }



    .web-icon-logo img {

        width: 70%;

    }

}



.mobile-menu {

    width: 100%;

    max-width: 320px;

    background: #fff;

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    position: fixed;

    top: 0;

    left: 0;

    height: 100vh;

    overflow-y: auto;

    z-index: 9999;

}



.menu-header h5 {

    font-weight: 600;

}



.img-outer-sell {

    width: 100%;

    height: 140px;

    overflow: clip;

}



.search-box {

    position: relative;

}



.search-box input {

    padding-right: 40px;

    border-radius: 8px;

}



.search-box .search-icon {

    position: absolute;

    top: 50%;

    right: 10px;

    transform: translateY(-50%);

    color: #666;

}



.nav-tabs {

    border-bottom: 1px solid #eee;

}



.nav-tabs .nav-link {

    color: #666;

    font-weight: 500;

}



.nav-tabs .nav-link.active {

    color: #e63946;

    border-color: transparent;

    border-bottom: 2px solid #e63946;

    background: none;

}



.list-unstyled li a {

    display: block;

    font-size: 16px;

}



.dropdown button {

    border-radius: 6px;

    font-weight: 500;

}



.submenu li {

    padding: 6px 0;

    font-size: 14px;

    color: #555;

}



.min-w-300 {

    min-width: 300px;

}



.main_search_bar {

    margin-right: 20px;

}



/* footer */



.btn-style {

    background-color: #df3446;

    /* border: 1px solid #df3446; */

}



.btn-style:hover {

    background-color: #4c96ae !important;

    /* border: 1px solid #df3446; */

    /* color: #df3446; */

    color: #fff !important;

}



.shadow-sm-custom {

    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;

}



.rbtn-style {

    background-color: #4c96ae;

    /* border: 1px solid #df3446; */

}



.rbtn-style:hover {

    background-color: #df3446 !important;

    /* border: 1px solid #df3446; */

    /* color: #df3446; */

    color: #fff !important;

}



.bg-theme-red {

    background-color: #df3446;

}



.shadow-sm-custom {

    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

}



.testimonial-slider {

    overflow: hidden;

    width: 100%;

    position: relative;

}



.testimonial-slider {

    overflow: hidden;

    width: 100%;

    position: relative;

}



.testimonial-track {

    display: flex;

    gap: 20px;

    transition: transform 0.5s ease-in-out;

}







.slider-nav button {

    margin: 0 10px;

}