:root {
            --navy: #011b3c;
            --navy-2: #171717;
            --navy-3: #171717;

            --orange: #e95225;
            --orange-dark: #c8421f;

            --yellow: #fbc931;
            --cyan: #fbc931;

            --white: #ffffff;
            --soft: #faf8f2;
            --muted: #6e6961;

            --border: rgba(6, 21, 34, .09);

            --shadow: 0 20px 60px rgba(6, 21, 34, .10);
            --shadow-lg: 0 30px 90px rgba(6, 21, 34, .16);

            --radius: 24px;
        }
/*==============================header css=========================================*/
        .main-navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 9999;
            padding: 16px 0;
            transition: .35s ease;
        }

        .main-navbar.scrolled {
            background: rgba(255,255,255,.92);
            backdrop-filter: blur(18px);
            box-shadow: 0 10px 40px rgba(6,21,34,.08);
            padding: 10px 0;
        }

        .navbar-inner {
            background: rgba(255,255,255,.88) !important;
            backdrop-filter: blur(18px);
            border: 1px solid rgba(255,255,255,.7);
            border-radius: 18px;
            padding: 10px 14px;
            box-shadow: 0 15px 40px rgba(6,21,34,.06);
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 11px;
            color: var(--navy);
            font-weight: 800;
            font-size: 21px;
            letter-spacing: -.7px;
        }

        .brand:hover {
            color: var(--navy);
        }

     .brand-mark {
  background: transparent; /* Remove background color if your logo already has its own background or is transparent */
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Ensures the image maintains its aspect ratio inside the box */
  border-radius: 8px; /* Optional: rounds the image corners slightly if desired */
}

    

        .brand small {
            display: block;
            font-size: 8px;
            letter-spacing: 1.6px;
            color: var(--muted);
            font-weight: 700;
            margin-top: -2px;
        }

        .nav-link {
            color: #011b3c !important;
            font-weight: 600;
            font-size: 14px;
            padding: 10px 13px !important;
            transition: .25s ease;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--orange) !important;
        }

        .nav-products-count {
            background: var(--yellow);
            color: var(--navy);
            font-size: 9px;
            font-weight: 800;
            padding: 3px 7px;
            border-radius: 20px;
            margin-left: 3px;
        }

        .navbar-toggler {
            border: 0;
            box-shadow: none !important;
        }
         .btn-main {
            background: var(--orange);
            color: #fff;
            border: 1px solid var(--orange);
            padding: 14px 24px;
            border-radius: 50px;
            font-weight: 700;
            transition: .3s ease;
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }

        .btn-main:hover {
            background: var(--orange-dark);
            border-color: var(--orange-dark);
            color: #fff;
            transform: translateY(-3px);
            box-shadow: 0 15px 30px rgba(243, 107, 53, .25);
        }
          a {
            text-decoration: none;
        }
          /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 991px) {

            .main-navbar {
                padding: 10px 0;
            }

            .navbar-inner {
                border-radius: 15px;
            }

            .navbar-collapse {
                margin-top: 12px;
                background: #fff;
                border-radius: 15px;
                padding: 12px;
                box-shadow: 0 20px 40px rgba(6,21,34,.1);
            }

        }

         /* =========================================================
           FOOTER
        ========================================================= */

        footer {
            background: #011b3c;
            color: #ffffff;
            padding: 80px 0 25px;
            border-top: 3px solid var(--orange);
        }

        .footer-brand {
            font-size: 23px;
            font-weight: 800;
            color: #fff;
        }

        .footer-description {
            color: #ffffff;
            line-height: 1.8;
            font-size: 13px;
            max-width: 350px;
            margin-top: 15px;
        }

        .footer-title {
            font-size: 13px;
            font-weight: 800;
            margin-bottom: 20px;
             color: #e95225;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .footer-links li {
            margin-bottom: 11px;
        }

        .footer-links a {
            color: #ffffff;
            font-size: 12px;
            transition: .25s;
        }

        .footer-links a:hover {
            color: var(--orange);
        }

        .footer-contact {
            color: #ffffff;
            font-size: 12px;
            line-height: 1.7;
            margin-bottom: 12px;
        }

        .footer-contact i {
            color: var(--orange);
            width: 20px;
        }

        .footer-socials {
            display: flex;
            gap: 8px;
            margin-top: 22px;
        }

        .footer-social {
            width: 37px;
            height: 37px;
            border: 1px solid rgba(255,255,255,.1);
            border-radius: 11px;
            display: grid;
            place-items: center;
            color: #ffffff;
            transition: .25s;
        }

        .footer-social:hover {
            background: var(--orange);
            border-color: var(--orange);
            color: #fff;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,.08);
            margin-top: 55px;
            padding-top: 20px;
            color: #ffffff;
            font-size: 11px;
        }