/* ==========================
   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 */

.hero-section {

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

}


.hero-tag {

    color: var(--merit-red);
    font-weight: bold;
    text-transform: uppercase;

}



.btn-danger {

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

}


.btn-danger:hover {

    background: #a90000;

}



/* Brands */

.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;

}


/* Mobile support */

@media(max-width:991px){

    .dropdown-submenu > .dropdown-menu{

        position: static;
        margin-left:15px;

    }

}
.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-float {

    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 25px;
    right: 25px;

    background-color: #25D366;
    color: white;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 32px;

    z-index: 9999;

    text-decoration: none;

}


.whatsapp-float:hover {

    color: white;
    transform: scale(1.1);

}
/*==================================
    Campaign Gallery
==================================*/

.gallery-wrapper{

    overflow:hidden;
    width:100%;

}

.gallery-track{

    display:flex;
    gap:25px;
    width:max-content;
    animation:galleryScroll 35s linear infinite;

}

.gallery-track:hover{

    animation-play-state:paused;

}

.gallery-item{

    flex:none;
    width:300px;
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 8px 30px rgba(0,0,0,.35);

}

.gallery-item img{

    width:100%;
    height:380px;
    object-fit:cover;
    transition:.5s;

}

.gallery-item:hover img{

    transform:scale(1.08);

}

@keyframes galleryScroll{

    from{

        transform:translateX(0);

    }

    to{

        transform:translateX(-50%);

    }

}
/*==================================
    Dark Sections
==================================*/

.home-dark{

    background:#111111;

}

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

    color:#ffffff;

}

.home-dark p{

    color:#d6d6d6;

}

.home-dark .text-light{

    color:#d6d6d6 !important;

}

.home-dark .text-danger{

    color:#D71920 !important;

}