/* ==========================
   Merit Brand Theme
========================== */

:root {

    --merit-red: #D71920;
    --merit-black: #111111;
    --merit-yellow: #F4C542;
    --merit-white: #ffffff;
    --merit-light: #f8f9fa;

}



body {

    font-family: Arial, Helvetica, sans-serif;
    color: #333;

}





/* ==========================
   Top Bar
========================== */

.top-bar {

    background: var(--merit-black);
    color: white;

}


.social-link {

    color: var(--merit-yellow);

    margin-left: 15px;

    font-size:18px;

}


.social-link:hover {

    color:var(--merit-red);

}





/* ==========================
   Navbar
========================== */

.navbar-brand span {

    color:var(--merit-red);

}



.nav-link {

    font-weight:600;

    color:var(--merit-black);

}



.nav-link:hover {

    color:var(--merit-red);

}





/* ==========================
   Hero Slider
========================== */

.hero-section {

    background:linear-gradient(
        90deg,
        #ffffff 50%,
        #fff4f4 100%
    );

}





/* ==========================
   Buttons
========================== */

.btn-danger {

    background:var(--merit-red);

    border-color:var(--merit-red);

}


.btn-danger:hover {

    background:#a90000;

    border-color:#a90000;

}





/* ==========================
   Homepage Dark Sections
========================== */


.home-dark {

    background:#111111;

    color:white;

}



.home-dark h1,
.home-dark h2,
.home-dark h3,
.home-dark h4,
.home-dark h5 {

    color:white;

}



.home-dark p {

    color:#dddddd;

}





/* ==========================
   Cards On Dark Background
========================== */


.home-dark .card,
.home-dark .category-card,
.home-dark .product-card {


    background:white;

    color:#333;

    border-radius:15px;

}





/* ==========================
   Brand Cards
========================== */


.brand-card {

    padding:25px;

    border-radius:10px;

    transition:.3s;

}



.brand-card:hover {

    transform:translateY(-8px);

    box-shadow:0 10px 30px rgba(0,0,0,.1);

}



.brand-card img {

    height:120px;

    object-fit:contain;

}





/* ==========================
   Products
========================== */


.product-card {

    transition:.3s;

}



.product-card:hover {

    transform:translateY(-10px);

}



.product-card img {

    height:250px;

    object-fit:contain;

}





/* ==========================
   Footer
========================== */


footer {

    background:#111 !important;

}



footer h4,
footer h5 {

    color:var(--merit-yellow);

}





/* ==========================
   Multi Level Dropdown
========================== */


.dropdown-submenu {

    position:relative;

}



.dropdown-submenu > .dropdown-menu {

    top:0;

    left:100%;

    margin-top:-6px;

}



.dropdown-submenu:hover > .dropdown-menu {

    display:block;

}



.dropdown-submenu > a::after {

    content:"▶";

    float:right;

    margin-left:10px;

    font-size:12px;

}





@media(max-width:991px){


.dropdown-submenu > .dropdown-menu {

    position:static;

    margin-left:15px;

}


}





/* ==========================
   Testimonials
========================== */


.testimonial-wrapper {

    overflow:hidden;

    width:100%;

}



.testimonial-track {

    display:flex;

    gap:30px;

    width:max-content;

    animation:testimonialMove 25s linear infinite;

}



.testimonial-card {

    width:350px;

    padding:30px;

    background:white;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

    border-radius:15px;

}



.testimonial-track:hover {

    animation-play-state:paused;

}



@keyframes testimonialMove {


from {

transform:translateX(0);

}


to {

transform:translateX(-50%);

}


}





/* ==========================
   WhatsApp Floating Button
========================== */


.whatsapp-float {


    position:fixed;

    width:60px;

    height:60px;

    bottom:25px;

    right:25px;


    background:#111111;

    color:white;


    border-radius:50%;


    display:flex;

    align-items:center;

    justify-content:center;


    font-size:32px;


    z-index:9999;


    text-decoration:none;


    box-shadow:0 5px 20px rgba(0,0,0,.25);


    transition:.3s;


}



.whatsapp-float:hover {


    background:var(--merit-red);

    color:white;

    transform:scale(1.1);

}