/*
    header CSS
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", sans-serif;
}

body {
    background: #fff;
}
/* TOP BAR */
.top-bar {
    height: 14px;
    background: #3c0202;
}
/* HEADER */
.header {
    background: white;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 1000;
}

.custom-container {
    max-width: 1300px;
    margin: auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
/* LOGO */
.logo {
    text-align: center;
    flex: 1;
}

    .logo img {
        height: 55px;
    }
/* NAV */
.nav {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex: 2;
}

    .nav a {
        position: relative;
        text-decoration: none;
        color: #000000 !important;
        font-size: 18px;
        padding-bottom: 5px;
    }

        .nav a::after {
            content: "";
            position: absolute;
            width: 0;
            height: 2px;
            background: black;
            left: 0;
            bottom: 0;
            transition: 0.3s;
        }

        .nav a:hover::after,
        .nav a.active::after {
            width: 100%;
        }
/* ICONS */
.icons {
    display: flex;
    gap: 22px;
    font-size: 20px;
    color: #696969e0;
    justify-content: center;
    flex: 1;
}

    .icons i {
        cursor: pointer;
        transition: 0.3s;
    }

        .icons i:hover {
            color: #3c0202;
        }
/* MENU TOGGLE */
.menu-toggle {
    display: none;
    font-size: 22px;
    cursor: pointer;
    flex: 1;
    z-index: 1001;
}
/* Base state: Hidden */
.mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    padding: 15px 20px;
    display: flex; /* Keep as flex */
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 2000;
    border-bottom: 2px solid #3c0202;
    align-items: center;
}

    /* Active state: Visible */
    .mobile-menu.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .mobile-menu a {
        text-decoration: none;
        padding: 12px 0;
        color: black;
        border-bottom: 1px solid #ddd;
    }
/* TABLET */
@media (max-width: 992px) {
    .nav {
        display: none !important; /* Force hide desktop nav */
    }

    /* Assign equal flex space to the left side */
    .menu-toggle {
        display: flex;
        align-items: center;
        order: 1;
        flex: 0.65;
    }

    /* Assign space to center the logo naturally without absolute positioning */
    .logo {
        order: 2;
        flex: 2;
        text-align: center;
        /* Remove position absolute and transform if they were there previously */
        position: static;
        transform: none;
    }

    /* Assign equal flex space to the right side and push items to the end */
    .icons {
        order: 3;
        flex: 1;
        justify-content: flex-end;
        margin-left: 0;
    }
}

/* SMALL MOBILE */
@media (max-width: 576px) {
    .logo img {
        height: 40px; /* Made slightly smaller so it doesn't crowd tiny screens */
    }

    .icons {
        font-size: 18px;
        gap: 12px;
    }
}

/*
    Footer CSS
*/
/* ================= FOOTER ================= */

.main-footer {
    background: #3c0202;
    color: #fff;
    margin-top: 50px;
}

.footer-top {
    display: flex;
    gap: 40px;
    padding: 50px 80px;
    flex-wrap: wrap;
}

.footer-brand {
    flex: 1;
    min-width: 250px;
}

    .footer-brand img {
        width: 260px;
        margin-bottom: 15px;
        filter: brightness(0) invert(1);
    }

    .footer-brand p {
        font-size: 16px;
        line-height: 1.6;
        color: #ddd;
    }

.footer-payment {
    flex: 1;
    min-width: 220px;
}

    .footer-payment h4 {
        margin-bottom: 15px;
    }

.payment-icons {
    display: flex;
    gap: 10px;
    align-items: center;
}

    .payment-icons img {
        height: 35px;
        background: white;
        border-radius: 4px;
    }

.footer-newsletter {
    flex: 1;
    min-width: 280px;
}

    .footer-newsletter h4 {
        margin-bottom: 10px;
    }

    .footer-newsletter p {
        font-size: 14px;
        color: #ddd;
        margin-bottom: 15px;
    }

.newsletter-box {
    display: flex;
    gap: 10px;
}

    .newsletter-box input {
        flex: 1;
        padding: 12px 16px;
        border-radius: 25px;
        border: 1px solid #ccc;
        outline: none;
    }

    .newsletter-box button {
        color: black;
        padding: 12px 22px;
        border-radius: 25px;
        border: none;
        background: #eee;
        cursor: pointer;
        font-weight: 500;
    }

.footer-divider {
    height: 1px;
    background: #ffffff40;
    margin: 0 20px;
}

.footer-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 40px 100px;
    align-items: start;
}

    .footer-links > div {
        min-width: 0;
    }

    .footer-links h5 {
        margin-bottom: 15px;
        color: #c9a3a3;
    }

    .footer-links ul {
        list-style: none;
        padding-left: 0px;
    }

    .footer-links li {
        margin-bottom: 8px;
        font-size: 15px;
        color: #eee;
        cursor: pointer;
    }

        .footer-links li:hover {
            color: #fff;
        }

.footer-bottom {
    background: #e5e5e5;
    color: #000;
}

.footer-bottom-inner {
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 100px;
    flex-wrap: wrap;
}

.social-icons {
    display: flex;
    gap: 12px;
}

    .social-icons a {
        width: 26px;
        height: 26px;
        background: #000;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .social-icons img {
        width: 15px;
        height: 15px;
        filter: brightness(0) invert(1);
    }

/* CERTIFICATIONS (FIXED + IMPROVED) */
    .footer-certifications {
        display: flex;
        gap: 12px;
        align-items: center;
        margin-bottom: 15px;
    }

    .footer-certifications img {
        height: 55px;
        border-radius: 30px;
    }

.footer-payment-wrapper {
    display: flex;
    flex-direction: column;
}


@media (max-width: 992px) {
    .footer-top {
        flex-direction: column;
        padding: 50px;
    }

    .footer-links {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .newsletter-box {
        flex-direction: column;
    }

        .newsletter-box button {
            width: 100%;
        }

    .footer-links {
        grid-template-columns: 1fr;
    }
}