html, body, div, section, article, header, footer, main, nav, aside,
        h1, h2, h3, h4, h5, h6,
        p, ul, ol, li, dl, dt, dd,
        a, span, img, figure, figcaption,
        input, button, textarea, select,
        table, th, td, tr, form, label {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
        --promo-height: 3rem;
        --nav-height: 3rem;        
        --header-height: calc(var(--promo-height) + var(--nav-height));
        }

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 6.625rem; 
            font-size: 16px;
        }

        
        /* Override only for third page */
        html.page-third {
            scroll-padding-top: 8rem;
        }

        main {
        /* Adjust these to match your actual promo + nav combined height */
            padding-top: calc(var(--promo-height) + var(--nav-height));
        }


        body {
            line-height: 1.6;
            overflow-x: hidden;
        }
        a {
            text-decoration: none; /* Removes the underline */
            color: inherit; /* Inherit the color of the parent element */
        }

        a:hover {
            color: #4DA6FF; /* Retain hover color */
        }

        /* Hero Section */
        .hero {
            background: var(--hero-bkg-gradient);
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            animation: gradientShift 30s ease-in-out infinite;
        }

        @keyframes gradientShift {
            0%, 100% { background: var(--hero-bkg-gradient); }
            33% { background: var(--hero-bkg-gradshift2); }
            66% { background: var(--hero-bkg-gradshift3); }
        }


        /* Wave Animation */        
        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' fill='%23ffffff' opacity='0.1'><path d='M0,0v46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1059,4.37,1112,16.17V0Z'/></svg>") repeat-x bottom;
            animation: wave 6s ease-in-out infinite;
        }
        @keyframes wave {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(-1.25rem); }
        }

        /* Floating paw prints */
        .hero::after {
            content: '🐾';
            position: absolute;
            font-size: 6rem;
            opacity: 0.1;
            animation: floatingPaws 7s linear infinite;
        }
        @keyframes floatingPaws {
            0% { 
                transform: translateY(100vh) rotate(0deg);
                left: 5%;
            }
            25% { 
                transform: translateY(75vh) rotate(90deg);
                left: 30%;
            }
            50% { 
                transform: translateY(50vh) rotate(180deg);
                left: 70%;
            }
            75% { 
                transform: translateY(20vh) rotate(270deg);
                left: 90%;
            }
            100% { 
                transform: translateY(-20vh) rotate(360deg);
                left: 50%;
            }
        }

 

            

        /* Promotions Bar */
       .promotions-bar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        height: var(--promo-height);
        background: var(--promo-bar-bkg);
        z-index: 1100;
        padding: 0 1rem;
        display: flex;
        align-items: center;
        justify-content: center; 
        border-bottom: 1px solid rgba(0,0,0,0.1);
        box-sizing: border-box; 
        }

        #promo-bar-placeholder {
            width: 100%;
            padding: 0 2rem;
        }
    
        
        #promoLtxt {
            color: var(--promo-bar-txt-clr);
            font-size: var(--promo-font-size);
            font-weight: var(--promo-font-wgt);
            font-family: var(--promo-sec-lr-family);
        }
        
        #promoRtxt {
            color: var(--promo-bar-txt-clr-right);
            font-size: var(--promo-font-size-right);
            font-weight: var(--promo-font-wgt-right);
            font-family: var(--promo-sec-lr-family-right);
        }

           
        #prd-promoLtxt {
            color: var(--prd-promo-bar-txt-clr);
            font-size: var(--prd-promo-bar-txt-size);
            font-weight: var(--prd-promo-bar-txt-wgt);
            font-family: var(--prd-promo-bar-txt-family);
        }
        
        #prd-promoRtxt {
            color: var(--prd-promo-bar-txt-clr-right);
            font-size: var(--prd-promo-bar-txt-size-right);
            font-weight: var(--prd-promo-bar-txt-wgt-right);
            font-family: var(--prd-promo-bar-txt-family-right);
        }




        
        #prm-promoLtxt {
            color: var(--prm-promo-bar-txt-clr);
            font-size: var(--prm-promo-bar-txt-size);
            font-weight: var(--prm-promo-bar-txt-wgt);
            font-family: var(--prm-promo-bar-txt-family);
        }
        
        #prm-promoRtxt {
            color: var(--prm-promo-bar-txt-clr-right);
            font-size: var(--prm-promo-bar-txt-size-right);
            font-weight: var(--prm-promo-bar-txt-wgt-right);
            font-family: var(--prm-promo-bar-txt-family-right);
        }

       

        .promotions-content {
            width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0;
        }


       .promotion-left, .promotion-right {
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }


        .promo-icon {
            animation: bounce 2s infinite;
        }
        
        #promo-left-icon {
            color: var(--promo-left-icon-clr);
            
        }
        
        #promo-right-icon {
            color: var(--promo-right-icon-clr);
            
        }

       
        #prd-promo-left-icon {
            color: var(--prd-promo-left-icon-clr);            
        }
        
        #prd-promo-right-icon {
            color: var(--prd-promo-right-icon-clr);            
        }


     
        
        #prm-promo-left-icon {
            color: var(--prm-promo-left-icon-clr);            
        }
        
        #prm-promo-right-icon {
            color: var(--prm-promo-right-icon-clr);            
        }
             


        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-5px); }
            60% { transform: translateY(-3px); }
        }


 




        /* Featured Carousel Section */
        .featured-carousel {
            margin-top: 3.75rem;
            padding: 4rem 0;
            background: var(--featured-carousel-bkg);
            position: relative;
            overflow: hidden;
        }

        .featured-carousel::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 20% 50%, rgba(255,255,255,0.1) 0%, transparent 50%),
                        radial-gradient(circle at 80% 50%, rgba(255,255,255,0.1) 0%, transparent 50%);
            animation: pulseGlow 8s ease-in-out infinite;
        }

        @keyframes pulseGlow {
            0%, 100% { opacity: 0.5; }
            50% { opacity: 1; }
        }


        /* Floating paw prints */
        .featured-carousel::after {
            content: '🐾';
            position: absolute;
            font-size: 6rem;
            opacity: 0.1;
            animation: floatingPaws 7s linear infinite;
        }

        #fc-cat {
            margin-top: 0;
            padding: 4rem 0;
            background: var(--featured-carousel-bkg-cat);
            position: relative;
            overflow: hidden;
        }


        #fc-dog {
            margin-top: 0;
            padding: 4rem 0;
            background: var(--featured-carousel-bkg-dog);
            position: relative;
            overflow: hidden;
        }



        .nav {
            position: fixed;
            top: var(--promo-height);
            left: 0;
            width: 100%;
            height: var(--nav-height);
            background: var(--nav-bkg);
            backdrop-filter: blur(0.625rem);
            z-index: 1100;
            padding: 0 1rem;
            box-shadow: 0 0.125rem 1.25rem rgba(0,0,0,0.1);
            display: flex;
            align-items: center;
            box-sizing: border-box;
        }

        .nav-container {
            max-width: 100%;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 16rem; /* Add this line */
        }

        #navbar-placeholder {
        width: 100% !important;
        }


        .logo {
            display: flex;
            align-items: center; /* Align logo and text vertically */
            font-family: var(--font-fam-mainhead);
            font-size: var(--logo-font-size);
            font-weight: bold;
            color: #333333;
            text-decoration: none;
        }

        .logo-img {
            width: auto; /* Adjust the width of the logo */
            height: var(--navigation-img-hgt1);
            margin-right: 0.5rem; /* Space between logo and text */
        }

        /* Right-aligned section (nav menu and language buttons) */
        .nav-right {
            display: flex;
            align-items: center; /* Align the nav menu and language buttons horizontally */
        }

        
        /* Right-aligned section (nav menu and language buttons) */
        .nav-left {
            display: flex;
            align-items: center; /* Align the nav menu and language buttons horizontally */
        }
        
        .nav-left .logo {
            display: flex;
            align-items: center;
            font-size: 1.2rem;
            font-weight: bold;
            text-decoration: none;
            color: #333;
        }        

        .nav-menu {
            display: flex;
            list-style: none;
            margin-right: 1rem;
            padding: 0;
            gap: 1rem;
            flex-wrap: nowrap;
            white-space: nowrap;
        }
        .nav-menu a {
            text-decoration: none;
            color: #333333;
            font-weight: 700;
            transition: color 0.3s ease;
        }
        .nav-menu a:hover {
            color: #4DA6FF;
        }

        /* New styles for the language buttons */
        .language-buttons {
            display: flex;
            gap: 1rem;
            align-items: center; /* Align the images vertically */
        }

        .language-img {
            width: var(--lang-img-width); /* Adjust the width of the flag images */
            height: var(--lang-img-height); /* Maintain the aspect ratio for flag images */
            cursor: pointer; /* Make the images clickable */
            transition: transform 0.3s ease;
        }

        .language-img:hover {
            transform: scale(1.1); /* Add a hover effect to enlarge the flags */
        }

        /* Styling for the hamburger icon */
        .hamburger-icon {
            display: none;
        }


        /* CSS for the smooth text transition */
        .text-transition {
            opacity: 0;
            transition: opacity 0.5s ease; /* Fade out the text */
        }

        .text-transition.active {
            opacity: 1;
            transition: opacity 0.5s ease; /* Fade in the text */
        }







        .mainContainer {
            margin-top: 12rem;
        }



        .sitemap-container {
            max-width: 50rem;
            margin: 5rem auto;
            padding: 2rem;
            background: white;
            border-radius: 1.25rem;
            box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.1);
        }

        .sitemap-title {
            font-size: var(--sec-title-font-size);
            font-family: var(--font-fam-mainhead);
            color: var(--font-clr-mainhead);
            text-align: center;
            margin-bottom: 2rem;
        }

        

        .sitemap-title i {
        color: var(--bkg-icon-clr-header);
        font-size: 2rem; /* Make the icon slightly larger */
        }


        .sitemap-list {
            list-style-type: none;
            padding-left: 0;
        }

        .sitemap-list li {
            padding: 1rem;
            font-size: 1.2rem;
            border-bottom: 1px solid #ddd;
            transition: background 0.2s ease;
        }

        .sitemap-list li:hover {
            background-color: #eaf4ff;
        }

        .sitemap-list li a {
            text-decoration: none;
            color: var(--links-txt-clr-sitemap);
            font-weight: bold;
            display: flex;
            align-items: center;
            gap: 0.625rem;
        }

        .sitemap-list li a:hover {
            color: #4DA6FF;
        }

        .sitemap-icon {
            color: var(--bkg-bullet-icon-clr);
        }




        /* Page Header - Promos Page */
        .page-header {
            margin-top: 4.25rem;
            padding: 4rem 0 2rem 0;
            background: var(--promos-bkg-gradient);
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .page-header h1 {
            font-size: var(--prm-pg-title-font-size);
            font-family: var(--prm-pg-title-font-family);
            font-weight: var(--prm-pg-title-font-wgt);
            margin-bottom: 1rem;
            text-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.6);
            color: var(--prm-pg-title-font-clr);
        }

        .page-header p {
            font-family: var(--prm-pg-subtitle-font-family);
            color: var(--prm-pg-subtitle-font-clr);
            font-size: var(--prm-pg-subtitle-font-size);
            font-weight: var(--prm-pg-subtitle-font-wgt);
            opacity: 0.95;
        }


        #catChoiceText {

           font-size: var(--prm-cat-choice-font-size);
           font-family: var(--prm-cat-choice-font-family);
           font-weight: var(--prm-cat-choice-font-wgt);
           color: var(--prm-cat-choice-font-clr);

        }

        #dogChoiceText {

           font-size: var(--prm-dog-choice-font-size);
           font-family: var(--prm-dog-choice-font-family);
           font-weight: var(--prm-dog-choice-font-wgt);
           color: var(--prm-cat-dog-font-clr);

        }



        /* Floating paw prints */
        .page-header::after {
            content: "🐾";
            position: absolute;
            top: 0; /* Or adjust as needed */
            left: 0;
            font-size: 6rem;
            opacity: 0.1;
            animation: floatingPaws 7s linear infinite;
            pointer-events: none; /* optional: don't block clicks */
            z-index: 0; /* optional: stay behind content */
        }

        
        .page-header::after {
            animation: none;  /* Disable the animation */
        }




        .hero-content {
            max-width: 75rem;
            margin: 8rem auto 2rem auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            z-index: 2;
            position: relative;
        }

        .hero-text {
            text-align: left;
        }

        .hero-images {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1rem;
            position: relative;
        }

        .hero-image {
            border-radius: 1.25rem;
            overflow: hidden;
            box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.1); /* Lighter, softer shadow */
            transition: transform 0.3s ease;
        }

        .hero-image:hover {
            transform: translateY(-0.625rem) scale(1.05);
        }

        .hero-image img {
            width: 100%;
            height: var(--hero-img-hgt1);
            object-fit: cover;
        }

        .hero-image.two img {
            width: 100%;
            height: var(--hero-img-hgt2);
            object-fit: cover;
        }

        .hero-image.large {
            grid-column: 1 / -1;
        }

        .hero-image.large img {
            height: var(--hero-img-hgt3);
            width: 100%;
            min-width: 40rem;
        }

        
        
        .hero-image {
          display: var(--hero-img-display1);
        }
        .hero-image.two {
          display: var(--hero-img-display2);
        }
        .hero-image.large {
          display: var(--hero-img-display3);
        }





        #hdTop {
            font-family: var(--hero-sec-tb-head-family);
            color: var(--hero-sec-h1-clr);
            font-size: var(--hd-font-size-top);
            font-weight: var(--hd-font-wgt-top);
            margin-bottom: 1rem;
            animation: bounceInDown 1.2s ease-out;
            text-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.6), 0 0.125rem 0.5rem rgba(0,0,0,0.4);
        }

        /* Make Catty & Bob larger and more eye-catching */
        .hero h1.highlighted {
            font-family: var(--h1-lg-font-family);
            color: var(--h1-lg-font-clr);
            font-size: var(--h1-lg-font-size); 
            font-weight: var(--h1-lg-font-wgt);
            text-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.7), 0 0.125rem 0.625rem rgba(0,0,0,0.5);
            letter-spacing: 1px;
            margin: 1rem 0;
        }


        #hdBtm {
            font-family: var(--hero-sec-tb-head-family-btm);
            color: var(--hero-sec-h1-clr-btm);
            font-size: var(--hd-btm-font-size);
            font-weight: var(--hd-font-wgt-btm);
            margin-bottom: 1rem;
            animation: bounceInDown 1.2s ease-out;
            text-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.6), 0 0.125rem 0.5rem rgba(0,0,0,0.4);
        }



        @keyframes bounceInDown {
            0% {
                opacity: 0;
                transform: translateY(-6.25rem) scale(0.3);
            }
            50% {
                opacity: 1;
                transform: translateY(0) scale(1.05);
            }
            70% {
                transform: translateY(0) scale(0.9);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
        .hero p {
            font-size: var(--grt-font-size);
            font-weight: var(--grt-font-wgt);
            color: var(--grt-ta-clr);
            font-family: var(--grt-ta-family);
            margin-bottom: 2rem;
            opacity: 0.95;
            animation: slideInUp 1s ease-out 0.2s both;
            text-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.3);
        }
        .cta-button {
            display: inline-block;
            background: var(--cta-btn-bkg-gradient);
            font-family: var(--cta-promo-btn-font-family);
            font-size: var(--cta-promo-btn-font-size);
            font-weight: var(--cta-promo-btn-font-wgt);
            color: var(--cta-promo-btn-font-clr);
            background-size: 300% 300%;
            padding: 1.2rem 2.5rem;
            text-decoration: none;
            border-radius: 3.125rem;
            transition: all 0.3s ease;
            animation: gradientMove 6s ease infinite, slideInUp 1s ease-out 0.4s both;
            box-shadow: 0 1rem 2.5rem rgba(255, 107, 107, 0.4);
            border: 3px solid rgba(255,255,255,0.3);
            position: relative;
            overflow: hidden;
            text-shadow: 0 0.125rem 0.25rem rgba(0,0,0,0.3);
        }

        .cta-promo-button.cat, .cta-promo-button.dog {
            
            padding: 0.75rem 1.875rem;
            border-radius: 1.875rem;
            text-decoration: none;
            transition: transform 0.3s;
            
        }
        

        .cta-promo-button.cat {
            display: inline-block;
            background: var(--cta-promo-btn-bkg-gradient);
            font-family: var(--cta-promo-btn-font-family);
            color: var(--cta-promo-btn-font-clr);
            font-size: var(--cta-promo-btn-font-size);
            font-weight: var(--cta-promo-btn-font-wgt);
        }


        .cta-promo-button.dog {
            display: inline-block;
            background: var(--cta-promo-btn-bkg-gradient);
            font-family: var(--cta-promo-btn-font-family-dog);
            color: var(--cta-promo-btn-font-clr-dog);
            font-size: var(--cta-promo-btn-font-size-dog);
            font-weight: var(--cta-promo-btn-font-wgt-dog);
        }
        
        
        
        .fa-shopping-cart.cat {
          background: var(--cta-promo-btn-bkg-gradient);
          color: #F7F7F7;
          padding: 1rem;
          border-radius: 2rem;
        }
        
        .fa-shopping-cart.dog {
          background: var(--cta-promo-btn-bkg-gradient);
          color: #F7F7F7;
          padding: 1rem;
          border-radius: 2rem;
        }
        

        #cta1Btn-text {
            font-family: var(--prds-cta-promo-btn1-font-family);
            color: var(--prds-cta-promo-btn1-font-clr);
            font-size: var(--prds-cta-promo-btn1-font-size);
            font-weight: var(--prds-cta-promo-btn1-font-wgt);
            border-radius: 3.125rem;
            text-align: center;
        }

        #prd-ctaBtn-cat {
            background: var(--prds-cta-promo-btn1-bkg-gradient);
        }
        

        #cta2Btn-text {

            font-family: var(--prds-cta-promo-btn2-font-family);
            color: var(--prds-cta-promo-btn2-font-clr);
            font-size: var(--prds-cta-promo-btn2-font-size);
            font-weight: var(--prds-cta-promo-btn2-font-wgt);
            border-radius: 3.125rem;
            text-align: center;
        }

        #prd-ctaBtn-dog {
            background: var(--prds-cta-promo-btn2-bkg-gradient);
        }  

        
        #cta1Icon {
            color: var(--prds-cta-promo-btn1-icon-clr);
            background: var(--prds-cta-promo-btn1-bkg-gradient);
            padding: 1rem;
            border-radius: 2rem;
        }

        #cta2Icon {
            color: var(--prds-cta-promo-btn2-icon-clr);
            background: var(--prds-cta-promo-btn1-bkg-gradient);
            padding: 1rem;
            border-radius: 2rem;
        }





        .cta-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255,255,255,0.3);
            transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
            transform: translate(-50%, -50%);
            z-index: 0;
        }
        .cta-button:hover::before {
            width: 18.75rem;
            height: 18.75rem;
        }
        .cta-button:hover {
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 1.25rem 3.75rem rgba(255, 107, 107, 0.6);
        }
        @keyframes gradientMove {
            0%, 100% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
        }

                
        .cta-promo-button {
            display: inline-block;
            background: var(--cta-promo-btn-bkg-gradient);
            background-size: 200% 200%;
            color: var(--cta-promo-btn-font-clr);
            padding: 0.3rem 0.8rem;
            text-decoration: none;
            border-radius: 3.125rem;
            font-family: var(--cta-promo-btn-font-family);
            font-weight: var(--cta-promo-btn-font-wgt);
            font-size: var(--cta-promo-btn-font-size); 
            transition: all 0.2s ease-in-out;
            box-shadow: 0 1rem 2.5rem rgba(226, 185, 185, 0.4);
            border: 3px solid rgba(45, 38, 38, 0.3);
            position: relative;
            overflow: hidden;
            text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.3);
            animation: gradientMove 5s ease infinite, pulse 1.5s infinite; /* Add pulse animation */
        }

        /* Center the cta-promo-button in the respective rows */
        .cta-wrapper {
            display: flex;
            justify-content: center;  /* Horizontally center the button */
            width: 100%;  /* Ensure it takes up the full width of the container */
            margin-top: 2rem;  /* Add some space between the products and the button */
        }


        /* Pulsing animation for button */
        @keyframes pulse {
            0% {
                transform: scale(1);
                box-shadow: 0 1rem 1.875rem rgba(226, 185, 185, 0.4);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 1.56rem 3.125rem rgba(226, 185, 185, 0.6);
            }
            100% {
                transform: scale(1);
                box-shadow: 0 1rem 1.875rem rgba(226, 185, 185, 0.4);
            }
        }

        .cta-promo-button::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            transition: width 0.6s, height 0.6s, top 0.6s, left 0.6s;
            transform: translate(-50%, -50%);
            z-index: 0;
        }

        /* Hover effect: makes the button expand and have a glow effect */
        .cta-promo-button:hover::before {
            width: 18.75rem; /* Bigger expansion for more impact */
            height: 18.75rem;
        }

        .cta-promo-button:hover {
            transform: translateY(-5px) scale(1.1); /* Slightly larger scale */
            box-shadow: 0 1.875rem 5rem rgba(226, 185, 185, 0.6); /* Larger shadow for hover */
            border: 3px solid #fff; /* Glow effect on border */
        }



        .cta-align {
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
        }



        /* Style for the section */
        #cat-section {
            position: relative;  /* Ensure the pseudo-elements are positioned correctly */
        }


        #cat-prod-section {
            background: var(--cat-sec-bkg);
        }

        /* Gradient effect at the top of the section */
        #cat-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1.25rem;
            background: var(--cat-sec-brd-top);
        }

        /* Gradient effect at the bottom of the section */
        #cat-section::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1.25rem;
            background: var(--cat-sec-brd-btm);
        }


        /* Style for the section */
        #dog-section {
            position: relative;  /* Ensure the pseudo-elements are positioned correctly */
        }

        #dog-prod-section {
            background: var(--dog-sec-bkg);
        }

        /* Gradient effect at the top of the section */
        #dog-section::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 1.25rem;
            background: var(--dog-sec-brd-top);
        }

        /* Gradient effect at the bottom of the section */
        #dog-section::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 1.25rem;
            background: var(--dog-sec-brd-btm);
        }












        /* Products Section */
        .products {
            padding: 6rem 0;
            background: var(--products-bkg);
        }

 

        .container {
            max-width: 75rem;
            margin: 0 auto;
            padding: 2rem 2rem;
        }
        .section-title {
            text-align: center;
            margin-bottom: 1rem;
        }



        #carHdg {
            font-family: var(--prd-promos-sec-title-font-family);
            color: var(--prd-promos-sec-title-font-clr);
            font-size: var(--prd-promos-sec-title-font-size);
            font-weight: var(--prd-promos-sec-title-font-wgt);
        }

        #tpBrdsHd {
            font-family: var(--prd-tpbrds-sec-title-font-family);
            color: var(--prd-tpbrds-sec-title-font-clr);
            font-size: var(--prd-tpbrds-sec-title-font-size);
            font-weight: var(--prd-tpbrds-sec-title-font-wgt);
        }

        #tpBrdsSubHd {
            font-family: var(--prd-tpbrds-sec-subtitle-font-family);
            color: var(--prd-tpbrds-sec-subtitle-font-clr);
            font-size: var(--prd-tpbrds-sec-subtitle-font-size);
            font-weight: var(--prd-tpbrds-sec-subtitle-font-wgt);
        }





        .section-title.choice {
            text-align: center;
            margin-bottom: 1rem;
            font-size: var(--choice-sec-title-font-size);
            font-family: var(--choice-sec-title-font-family);
            font-weight: var(--choice-sec-title-font-wgt);
            color: var(--choice-sec-title-font-clr);
        }




        .section-title.test {
            text-align: center;
            margin-bottom: 1rem;
            font-size: var(--test-sec-title-font-size);
            font-family: var(--test-sec-title-font-family);
            font-weight: var(--test-sec-title-font-wgt);
            color: var(--test-sec-title-font-clr);
        }

        .section-title.about {
            text-align: center;
            margin-bottom: 2rem;
            font-family: var(--about-h2-font-family);
            font-weight: var(--about-h2-font-wgt);
            font-size: var(--about-h2-font-size);
            color: var(--about-h2-font-clr);
        }

        .section-title.contact {
            text-align: center;
            margin-bottom: 2rem;
            font-size: var(--addr-hd-font-size);
            font-family: var(--addr-hd-font-family);
            font-weight: var(--addr-hd-font-wgt);
            color: var(--addr-hd-font-clr);
        }



        .section-subtitle {
            text-align: center;
            margin-bottom: 3rem;
            font-family: var(--sec-subtitle-font-family);
            font-size: var(--sec-subtitle-font-size);
            font-weight: var(--sec-subtitle-font-wgt);
            color: var(--sec-subtitle-font-clr);
        }





        .section-subtitle.choice {
            text-align: center;
            margin-bottom: 3rem;
            font-family: var(--choice-sec-subtitle-font-family);
            font-size: var(--choice-sec-subtitle-font-size);
            font-weight: var(--choice-sec-subtitle-font-wgt);
            color: var(--choice-sec-subtitle-font-clr);
        }

        


        .section-subtitle.test {
            text-align: center;
            margin-bottom: 3rem;
            font-family: var(--test-sec-subtitle-font-family);
            font-size: var(--test-sec-subtitle-font-size);
            font-weight: var(--test-sec-subtitle-font-wgt);
            color: var(--test-sec-subtitle-font-clr);
        }
        
        
        
        .section-subtitle.about {
            font-family: var(--about-h3-font-family);
            font-weight: var(--about-h3-font-wgt);
            font-size: var(--about-h3-font-size);
            color: var(--about-h3-font-clr);
            margin-top: 1.5rem;
            margin-bottom: 0.5rem;
            text-align: left;
        }

        .about-text p {
            font-family: var(--about-p-font-family);
            font-weight: var(--about-p-font-wgt);
            font-size: var(--about-p-font-size);
            color: var(--about-p-font-clr);
            text-align: left;
        }







        

        .contact-labels {
            text-align: left;
            font-family: var(--addr-subhd-font-family);
            font-size: var(--addr-subhd-font-size);
            font-weight: var(--addr-subhd-font-wgt);
            color: var(--addr-subhd-font-clr);
        }
        

        .contact-text {
            text-align: left;
            font-family: var(--addr-txt-font-family);
            font-size: var(--addr-txt-font-size);
            font-weight: var(--addr-txt-font-wgt);
            color: var(--addr-txt-font-clr);
        }
        





        .products-grid {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap onto the next line */
        justify-content: center; /* Center items horizontally */
        gap: 2rem; /* Space between items */
        margin: 0 4rem 2rem 4rem;
        }

        .product-card {
            /* Card should be invisible but still clickable */
            flex: 0 0 calc(33.33% - 2rem);
            box-sizing: border-box;
            cursor: pointer;
            background: var(--product-card-landing-bkg);
            padding: 1rem;
            text-align: center;
            border-radius: 0.5rem; /* optional, for nicer shape */
            position: relative; /* ensure stacking context if needed */
            min-height: 7.5rem; /* or adjust based on your card content */
        }

        

        @keyframes shimmer {
            0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
            100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }
     



        .product-icon {
        margin: 0 auto 1.5rem;
        background: var(--product-icon-bkg-gradient);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        transition: all 0.4s ease;
        animation: iconFloat 3s ease-in-out infinite;
        box-shadow: 0 0.625rem 1.875rem rgba(102, 126, 234, 0.3);
        cursor: pointer;
        position: relative; /* Required for pseudo-element to position correctly */
        }

        .product-icon::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: var(--product-card-bkg-gradient-bf);
        transform: rotate(45deg);
        transition: all 0.6s ease;
        opacity: 0;
        z-index: 0;
        }

        .product-icon:hover::before {
        animation: shimmer 0.6s ease;
        opacity: 1;
        }

        .product-icon:hover {
        transform: scale(1.1) rotate(10deg);
        background: linear-gradient(135deg, #FF7F50 0%, #FFB6B6 100%);
        box-shadow: 0 1rem 2.5rem rgba(255, 107, 107, 0.4);
        }

        .product-icon img {
        width: auto;
        height: var(--products-img-hgt1);
        border-radius: 50%;
        z-index: 1; /* Above the pseudo-element */
        transition: transform 0.3s ease;
        }

        .product-icon:hover img {
        transform: scale(1.05);
        }


        .product-icon.prm-cat {
        height: var(--prm-products-img-hgt1);
        width: auto;
        }

        .product-icon.prm-dog {
        height: var(--prm-products-img-hgt2);
        width: auto;
        }





        .product-icon.prd-cat {
            width: auto;
            height: var(--prd-products-img-hgt1);
        }


        .product-icon.prd-dog {
            width: auto;
            height: var(--prd-products-img-hgt2);
        }




        @keyframes iconFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-0.625rem); }
        }
        .product-card img {
        transition: transform 0.3s ease;
        }

 

        .product-card.cat h3, .product-card.dog h3 {

            margin-bottom: 1rem;
            transition: color 0.3s ease;

        }

        .product-card.cat h3 {
            font-family: var(--prod-card-h3-font-family);
            font-size: var(--prod-card-h3-font-size);
            color: var(--prod-card-h3-font-clr);
            font-weight: var(--prod-card-h3-font-wgt);
        }

        .product-card.dog h3 {
            font-family: var(--prod-card-h3-font-family-dog);
            font-size: var(--prod-card-h3-font-size-dog);
            color: var(--prod-card-h3-font-clr-dog);
            font-weight: var(--prod-card-h3-font-wgt-dog);
        }



        .product-card.prm-cat h3 {
            font-family: var(--cat-btn-food-font-family);
            font-size: var(--cat-btn-food-font-size);
            color: var(--cat-btn-food-font-clr);
            font-weight: var(--cat-btn-food-font-wgt);
        }

        .product-card.prm-dog h3 {
            font-family: var(--dog-btn-food-font-family);
            font-size: var(--dog-btn-food-font-size);
            color: var(--dog-btn-food-font-clr);
            font-weight: var(--dog-btn-food-font-wgt);
        }







        .product-card p {
            line-height: 1.6;
        }

        .product-card.cat p {
            font-family: var(--prod-card-p-font-family);
            font-size: var(--prod-card-p-font-size);
            color: var(--prod-card-p-font-clr);
            font-weight: var(--prod-card-p-font-wgt);
        }

        .product-card.dog p {
            font-family: var(--prod-card-p-font-family-dog);
            font-size: var(--prod-card-p-font-size-dog);
            color: var(--prod-card-p-font-clr-dog);
            font-weight: var(--prod-card-p-font-wgt-dog);
        }



        /* Style for the clickable images */
        .clickable-images {
            display: flex;
            justify-content: center;
            margin-bottom: 2.5rem; /* Space between images and products */
        }

        .product-link {
            text-align: center;
            margin: 0 1.25rem;
            display: inline-block;
        }

        .product-link img {
            height: auto;
            margin-bottom: 1.25rem;
            text-decoration: none; /* Remove underline */
            color: inherit; /* Inherit color from parent, this will use the text color of the p tag */
        }

        .product-link.cat img {

            width: var(--cdImg-img-hgt1);
        }

        .product-link.dog img {

            width: var(--cdImg-img-hgt2);
        }



        .product-link.cat p, 
        .product-link.dog p {

            text-decoration: none;
            margin-top: 1.25rem;

        }

        .product-link.cat p {
            font-family: var(--prod-selector-img-font-family);
            font-size: var(--prod-selector-img-font-size);
            font-weight: var(--prod-selector-img-font-wgt);
            color: var(--prod-selector-img-font-clr);
        }


        .product-link.dog p {
            font-family: var(--prod-selector-img-font-family-dog);
            font-size: var(--prod-selector-img-font-size-dog);
            font-weight: var(--prod-selector-img-font-wgt-dog);
            color: var(--prod-selector-img-font-clr-dog);
        }

    

        /* Keyframes for the Jump Effect - Shared for both images */
        @keyframes jump {
            0% {
                transform: scale(1) rotate(0deg);
                
            }
            50% {
                transform: scale(1.2) rotate(0deg);
                
            }
            100% {
                transform: scale(1) rotate(0deg);
                
            }
        }


                
        /* Initially applied to images */
        .cat-product,
        .dog-product {
            display: inline-block;
            position: relative;
        }
            /* Assign animation to cat and dog images */


        /* Runs the animation when the class is added */
        .cat-product.run-animation,
        .dog-product.run-animation {
            animation: jump 2s ease-in-out 0s 1; /* Runs the animation once */
            animation-timing-function: ease-in-out;
        }



        /* Section spacing between Cat and Dog products */
        .section-spacing {
            height: 18.75rem; /* Medium vertical space between sections */
        }

        /* Section spacing between Cat and Dog products */
        .section-spacing-small {
            height: 5rem; /* Medium vertical space between sections */
        }



        /* Cat and Dog products titles */
        .product-category-title.cat, 
        .product-category-title.dog {

            text-shadow: 0 0.125rem 0.625rem rgba(0,0,0,0.7), 0 0.125rem 0.3125rem rgba(0,0,0,0.5);
            letter-spacing: 0.125rem;
            margin-top: 1.25rem;
            margin-bottom: 3rem;
            text-align: center;

        }

        /* Cat Products Title */
        .product-category-title.cat {
            font-size: var(--prod-ctg-title-font-size);
            font-weight: var(--prod-ctg-title-font-wgt);            
            color: var(--prod-ctg-title-clr); 
            font-family: var(--prod-ctg-title-font-family);
        }


        /* Dog Products Title */
        .product-category-title.dog {
            font-size: var(--prod-ctg-title-font-size-dog);
            font-weight: var(--prod-ctg-title-font-wgt-dog);            
            color: var(--prod-ctg-title-clr-dog); 
            font-family: var(--prod-ctg-title-font-family-dog);
        }

        /* Cat Products Title PROMOS Page */ 
        #catChoiceSecHd {
            text-align: center;
            font-size: var(--cat-sec-hd-font-size);
            font-family: var(--cat-sec-hd-font-family);
            color: var(--cat-sec-hd-font-clr);
            font-weight: var(--cat-sec-hd-font-wgt);
        }

        
        /* Dog Products Title PROMOS Page */ 
        #dogChoiceSecHd {
            text-align: center;
            font-size: var(--dog-sec-hd-font-size);
            font-family: var(--dog-sec-hd-font-family);
            color: var(--dog-sec-hd-font-clr);
            font-weight: var(--dog-sec-hd-font-wgt);
        }




        #catFeatPromoHd {
            font-family: var(--cat-feat-hd-font-family);
            font-size: var(--cat-feat-hd-font-size);
            font-weight: var(--cat-feat-hd-font-wgt);
            color: var(--cat-feat-hd-font-clr);
        }



        #dogFeatPromoHd {
            font-family: var(--dog-feat-hd-font-family);
            font-size: var(--dog-feat-hd-font-size);
            font-weight: var(--dog-feat-hd-font-wgt);
            color: var(--dog-feat-hd-font-clr);
        }


        #catFeatPromoSubHd {
            font-family: var(--cat-feat-subhd-font-family);
            font-size: var(--cat-feat-subhd-font-size);
            font-weight: var(--cat-feat-subhd-font-wgt);
            color: var(--cat-feat-subhd-font-clr);
        }


 
        #dogFeatPromoSubHd {
            font-family: var(--dog-feat-subhd-font-family);
            font-size: var(--dog-feat-subhd-font-size);
            font-weight: var(--dog-feat-subhd-font-wgt);
            color: var(--dog-feat-subhd-font-clr);
        }





        /* Container for product images */
        .product-cat-image-container {
            display: flex;            /* Enable Flexbox */
            justify-content: center;  /* Center items horizontally */
            align-items: center;      /* Center items vertically */
            gap: 2rem;                /* Adds space between the images (adjust this for more/less space) */
            flex-wrap: wrap;          /* Allow items to wrap to the next line if needed */
            width: 100%;              /* Ensure container takes full width */
            margin-bottom: 12rem;      /* Adds space below the images (adjust to create separation from text) */
        }

        /* Style for the product image */
        .product-cat-image {
            width: 31.25rem;             /* Set a fixed width for the image */
            height: auto;             /* Maintain aspect ratio */
            transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Smooth hover effects */
            /* transform: scale(1.2);    Slightly enlarge the image */
            object-fit: cover;        /* Ensures the image covers the space without distortion */
            border-radius: 0.5rem;       /* Optional: Rounded corners */
        }

        /* Hover effect */
        .product-cat-image:hover, .product-dog-image:hover {
            transform: scale(1.4);    /* Slightly enlarge the image on hover */
        }

        /* Optional: Style the images with some padding or spacing */
        .product-cat-image-container img {
            margin: 0 1rem;           /* Adds space on left and right */
        }

       /* Style for the product image */
        .product-dog-image {           
            transition: transform 0.3s ease, box-shadow 0.3s ease;  /* Smooth hover effects */
        }

 

        /* About Section */
        .about {
            padding: 1rem 0;
            background: var(--about-bkg);
        }
        .about-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
            align-items: center;
        }

        
        /* Style the unordered list in the 'Our Mission' section */
        .about-text ul {
            list-style-type: none; /* Makes the bullets appear as circles */
            margin-left: 2rem; /* Adds some space from the left side */
        }

        /* Style individual list items */
        .about-text ul li {
            margin: 1rem 0; /* Adds space between list items */
            line-height: 1.7; /* Makes the lines a bit more spaced out for readability */
        }


        .about-text .lstHd {

            font-family: var(--about-lsthd-font-family);
            font-weight: var(--about-lsthd-font-wgt);
            font-size: var(--about-lsthd-font-size);
            color: var(--about-lsthd-font-clr);
        }


        .about-text .lstTxt {

            font-family: var(--about-lsttxt-font-family);
            font-weight: var(--about-lsttxt-font-wgt);
            font-size: var(--about-lsttxt-font-size);
            color: var(--about-lsttxt-font-clr);
        }


        .about-image img {
            width: auto;
            height: var(--about-img-hgt1);
            object-fit: cover;
        }






        /* Testimonials Section */
        .testimonials {
            padding: 6rem 0;
            background: var(--test-bkg-gradient);   
            color: var(--test-txt-clr);
        }

        /* Floating paw prints */
        .testimonials::after {
            content: '🐾';
            position: absolute;
            font-size: 6rem;
            opacity: 0.1;
            animation: floatingPaws 7s linear infinite;
        }




        .testimonials-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
            gap: 2rem;
        }
        .testimonial-card {
            background: var(--test-card-bkg);
            backdrop-filter: blur(0.625rem);
            padding: 2rem;
            border-radius: 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .testimonial-card p {
            font-style: italic;
            margin-bottom: 1rem;
            font-family: var(--test-text-font-family);
            color: var(--test-text-font-clr);
            font-size: var(--test-text-font-size);
            font-weight: var(--test-text-font-wgt);
        }
        .testimonial-author {

            font-family: var(--test-author-txt-family);
            color: var(--test-author-txt-clr);
            font-size: var(--test-author-txt-size);
            font-weight: var(--test-author-txt-wgt);
        }



        /* Contact Section */
        .contact {
            padding: 3rem 0 2rem 0;
            background: var(--contact-bkg);
        }
        .contact-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
        }
   
        .contact-item {
            display: flex;
            align-items: center;
            margin-bottom: 1.5rem;
        }
        .contact-icon {
            width: 3.125rem;
            height: 3.125rem;
            background: var(--contact-icon-background);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            font-size: 1.2rem;
        }
        .map-container {
            border-radius: 1.25rem;
            overflow: hidden;
            height: 25rem;
            background: var(--map-container-bkg);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--map-container-txt-clr);
            margin: 8rem 0 1rem 0;
        }

       
        /* Image Row Styling */
        .image-row-content {
            display: flex;
            justify-content: center; /* Centers the images horizontally */
            align-items: center; /* Centers the images vertically */
            gap: 1.25rem; /* Optional: space between the images */
            margin-top: 2.5rem;
        }

        .row-image {
            max-width: 3.75rem; /* Max width of each image */
            height: auto; /* Ensures images maintain their aspect ratio */
            border-radius: 0.5rem; /* Optional: rounded corners */
            box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1); /* Optional: shadow for the images */
            transition: transform 0.3s ease; /* Optional: smooth transition for hover effect */
        }

        .row-image:hover {
            transform: scale(1.1); /* Optional: image grows slightly on hover */
        }

        /* Ensure the container spans the full width */
        .image-row {
            padding: 3.125rem 0; /* Optional: Adds padding to the row */
            background-color: var(--image-row-bkg); /* Optional: background color for the row */
        }





        /* Animations */
        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(1.875rem);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
 



        /* Animation delays for brand cards */
        .topBrand-card:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.1s both; }
        .topBrand-card:nth-child(2) { animation: fadeInUp 0.6s ease-out 0.2s both; }
        .topBrand-card:nth-child(3) { animation: fadeInUp 0.6s ease-out 0.3s both; }
        .topBrand-card:nth-child(4) { animation: fadeInUp 0.6s ease-out 0.4s both; }
        .topBrand-card:nth-child(5) { animation: fadeInUp 0.6s ease-out 0.5s both; }
        .topBrand-card:nth-child(6) { animation: fadeInUp 0.6s ease-out 0.6s both; }

        .topFeatured-brand:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.1s both; }
        .topFeatured-brand:nth-child(2) { animation: fadeInUp 0.6s ease-out 0.3s both; }
        .topFeatured-brand:nth-child(3) { animation: fadeInUp 0.6s ease-out 0.5s both; }





        /* Scroll animations */
        .fade-in {
            opacity: 0;
            transform: translateY(3.125rem) rotateX(10deg);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0) rotateX(0deg);
        }
        .slide-in-left {
            opacity: 0;
            transform: translateX(-6.25rem);
            transition: all 0.8s ease-out;
        }
        .slide-in-left.visible {
            opacity: 1;
            transform: translateX(0);
        }
        .slide-in-right {
            opacity: 0;
            transform: translateX(6.25rem);
            transition: all 0.8s ease-out;
        }
        .slide-in-right.visible {
            opacity: 1;
            transform: translateX(0);
        }
        .zoom-in {
            opacity: 0;
            transform: scale(0.5) rotate(5deg);
            transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .zoom-in.visible {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }



        .carousel-container {
            max-width: 75rem;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            justify-content: center;
        }


        .carousel-inner {
            border-radius: 3rem;
            border: solid 1px;
            border-color: #beb2b2;
            box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.15);
            width: var(--prd-carousel-wdt);
            height: auto;
        }

        #cat-carousel {
            width: var(--prm-carousel-wdt);
            height: auto;
        }

        #dog-carousel {
            width: var(--prm-carousel-wdt-dog);
            height: auto;
        }

        .carousel-header {
            text-align: center;
            margin-bottom: 1.5rem;
        }
        
        #pgTitle {
            font-size: var(--prd-pg-title-font-size);
            margin-bottom: 0.5rem;
            color: var(--prd-pg-title-font-clr); /* Gold color or whatever fits your design */
            font-family: var(--prd-pg-title-font-family);
            font-weight: var(--prd-pg-title-font-wgt); /* Make it bolder */
            text-shadow: 0 0.25rem 1.25rem rgba(0,0,0,0.7), 0 0.125rem 0.625rem rgba(0,0,0,0.5);
            letter-spacing: 1px;
            animation: fadeInDown 1s ease-out;
        }

        #pgTag {
            font-family: var(--prd-pg-subtitle-font-family);
            color: var(--prd-pg-subtitle-font-clr);
            font-size: var(--prd-pg-subtitle-font-size);
            font-weight: var(--prd-pg-subtitle-font-wgt);
            opacity: 0.9;
            animation: fadeInUp 1s ease-out 0.2s both;
            margin-top: 0rem;
        }



        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-1.875rem);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(1.875rem);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }





        #carousel-wrapper,
        #carousel-wrapper-c,
        #carousel-wrapper-d,
        .carousel,
        #carousel-slides
        .carousel-slides-cat,
        .carousel-slides-dog {
            width: 100%;
            max-width: 75rem;
            height: 28.125rem; /* Consistent height for image fit */
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

















        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* ensures full image is visible */
            display: block;
            margin: 0 auto;
        }

 


        .carousel-item-cat.active, .carousel-item-dog.active {
            opacity: 1;
        }







        .carousel-indicators {
            position: absolute;
            bottom: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.75rem;
            z-index: 10;
        }

   


        .carousel-indicators button {
            width: 2.5rem;
            height: 2.5rem;
            border-radius: 50%;
            background-color: #333; /* Default color */
            border: none;
            margin: 0 0.375rem;
            opacity: 0.5;
            transition: opacity 0.3s ease, background-color 0.3s ease;
        }

        .carousel-indicators .active {
            opacity: 1;
            background-color: #333333; /* Active color */
        }





        .carousel-indicators-dog, .carousel-indicators-cat {
            position: absolute;
            bottom: 1.25rem;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 0.75rem;
            z-index: 10;
        }













        



        /* Brands Section */
        .brands-section {
            padding:  3rem 0 3rem 0;
            background: var(--brands-bkg);
            position: relative;
        }

        .brands-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 6.25rem;
            background: linear-gradient(to bottom, rgba(102, 126, 234, 0.1), transparent);
        }

        /* Floating paw prints */
        .brands-section::after {
            content: '🐾';
            position: absolute;
            font-size: 6rem;
            opacity: 0.1;
            animation: floatingPaws 7s linear infinite;
        }

   








        /* Grid container for the brand cards */
        .brands-grid {
        display: flex;
        flex-wrap: wrap; /* Allow items to wrap onto the next line */
        justify-content: center;  
        gap: 1.25rem; /* Space between cards */
        margin: 0 4rem 2rem 4rem;
        align-items: flex-start; /* Align items to the top */
        }

        /* Style for each brand card */
        .topBrand-card {
        overflow: hidden; /* Prevents image overflow */
        position: relative; /* To control the image position */
        height: 100%; /* Set the height of the cards */
        background-color: var(--cards-bkg); /* Light background for the cards */
        border-radius: 0.625rem; /* Rounded corners */
        box-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* Soft shadow for the card */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        }

        /* Style for each brand card */
        .brand-card {
        flex: 0 0 calc(33.33% - 1.25rem); /* 3 items per row, minus the gap */
        overflow: hidden; /* Prevents image overflow */
        position: relative; /* To control the image position */
        height: var(--prd-brand-cards-hgt); /* Set the height of the cards */
        background-color: rgba(249, 249, 249, 0.9); /* Light background for the cards */
        border-radius: 3.125rem; /* Rounded corners */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        opacity: 1;
        }


        /* Ensure that if the last row has fewer items, they are centered */
        .brands-grid .brand-card:nth-last-child(-n+3) {
        margin-left: auto;
        margin-right: auto;
        }


        .brand-logo {
            object-fit: contain; /* Ensures image covers the space of the card */
            width: 100%; /* Make image fill the width */
            height: 100%; /* Make image fill the height */
            object-position: center; /* Center the image */
            transition: transform 0.3s ease; /* Smooth zoom effect */
            font-size: 1.5rem;
            font-weight: bold;
            color: #2d3436;
            z-index: 1;
            transition: all 0.3s ease;
        }


        #brdsHd {
            font-family: var(--prds-allbrds-sec-title-font-family);
            color: var(--prds-allbrds-sec-title-font-clr);
            font-size: var(--prds-allbrds-sec-title-font-size);
            font-weight: var(--prds-allbrds-sec-title-font-wgt);
        }



        

        /* Image Styling */
        .topBrand-logo {
            max-width: 100%;
            height: auto;
            object-fit: cover;  /* Ensure image covers the space */
            margin-top: 0.9375rem;  /* Space between image and text/icon */
        }

        .brand-card:hover .brand-logo {
            transform: scale(1.1);
            color: #667eea;
        }

        /* Featured brands - larger cards */
        .featured-brands {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(15.625rem, 1fr));
            gap: 2rem;
            margin-bottom: 3rem;
        }

        .featured-brand {
            text-align: center;
            padding: 0.9375rem;
            background-color: var(--cards-bkg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: auto;  /* Adjust height for better appearance */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .topFeatured-brand {
            text-align: center;
            padding: 0.9375rem;
            margin-top: -3.125rem;
            background-color: var(--cards-bkg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: auto;  /* Adjust height for better appearance */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .featured-brand:hover {
            transform: translateY(-15px) rotateX(5deg);
            box-shadow: 0 1.875rem 5rem rgba(0,0,0,0.2);
            border-color: #667eea;
        }

        .top-featured-brand-icon {
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, #4DA6FF 0%, #1E3A8A 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            transition: all 0.4s ease;
            animation: iconFloat 3s ease-in-out infinite;
            box-shadow: 0 0.625rem 1.875rem rgba(102, 126, 234, 0.3);
        }

        #imgtopBrand-icon-0 {
            height: var(--topBrandIcon-img-hgt1);
            width: auto;
        }

        #imgtopBrand-icon-1 {
            height: var(--topBrandIcon-img-hgt2);
            width: auto;
        }

        #imgtopBrand-icon-2 {
            height: var(--topBrandIcon-img-hgt3);
            width: auto;
        }


        /* Image Edit Controls */
        .topBrandImgWrapper {
            display: inline-block;
            position: relative;
        }


        /* Card containing icon #0 */
        #topBrand-logo-0 {
            width: var(--topBrand-img-hgt1);
            height: auto;
        }

        /* Card containing icon #1 */
        #topBrand-logo-1 {
            width: var(--topBrand-img-hgt2);
            height: auto;
        }

        /* Card containing icon #2 */
        #topBrand-logo-2 {
            width: var(--topBrand-img-hgt3);
            height: auto;
        }

 

        .featured-brand:hover .featured-brand-icon {
            transform: scale(1.1) rotate(10deg);
            background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
        }


        @keyframes iconFloat {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }


        /* Featured Brand Description Text */
        .featured-brand p {
            color: var(--desc-txt-clr);
            font-size: 0.9rem;
            margin-top: 0.3125rem;
            line-height: 1.5;  /* Ensure the text is well spaced */
            font-weight: 400;
            max-width: 12.5rem;  /* Optional: ensure text stays centered and neat */
            margin: 0 auto;
            padding: 0 0.625rem;
        }
        
        /* Featured Brand Description Text */
        p.topBrand-desc {
            margin-top: 0.3125rem;
            line-height: 1.5;  /* Ensure the text is well spaced */
            font-weight: 400;
            max-width: 18.75rem;  /* Optional: ensure text stays centered and neat */
            min-height: 6rem;
            margin: 0 auto 1rem auto;
            padding: 0 0.25rem;
            text-align: center; /* ✅ Add this line */
        }

        #topBrandDesc0 {
            font-family: var(--prd-topbrand-desc-font-family);
            color: var(--prd-topbrand-desc-font-clr);
            font-size: var(--prd-topbrand-desc-font-size);
            font-weight: var(--prd-topbrand-desc-font-wgt);

        }

        #topBrandDesc1 {
            font-family: var(--prd-topbrand2-desc-font-family);
            color: var(--prd-topbrand2-desc-font-clr);
            font-size: var(--prd-topbrand2-desc-font-size);
            font-weight: var(--prd-topbrand2-desc-font-wgt);

        }
        #topBrandDesc2 {
            font-family: var(--prd-topbrand3-desc-font-family);
            color: var(--prd-topbrand3-desc-font-clr);
            font-size: var(--prd-topbrand3-desc-font-size);
            font-weight: var(--prd-topbrand3-desc-font-wgt);

        }












        /* Footer */
        .footer {
            background: var(--footer-bkg);
            color: white;
            text-align: center;
            padding: 2rem 0;
            border-top: 1px solid #636e72;
        }

        .footer-container {
            display: flex; /* Use Flexbox for horizontal layout */
            justify-content: space-between; /* Distribute columns evenly */
            align-items: flex-start; /* Align items at the top */
            flex-wrap: nowrap; /* Allow columns to wrap on smaller screens */
            margin: 0 auto;
            padding: 0 1rem;
            max-width: 75rem;
        }

        /* Flexbox Layout for Footer */
        .footer-column {
            display: flex; /* Each column takes equal space */
            flex-direction: column;
            padding: 1rem;
            text-align: left;
            box-sizing: border-box;
        }

        /* Footer Info */
        .footer p {
            font-family: var(--foot-txt-font-family);
            color: var(--foot-txt-font-clr);
            font-size: var(--foot-txt-font-size);
            font-weight: var(--foot-txt-font-wgt);
            text-align: center;
            margin-top: 1.25rem;
        }

  
        .nav-column ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .nav-column li {
            margin: 0.625rem 0;
        }

        .nav-column a {
            color: #FCFAF9;
            text-decoration: none;
            font-size: 1rem;
            transition: color 0.3s;
        }

        .nav-column a:hover {
            color: #4DA6FF;
        }

        
        /* Address Section */
        .address-column  {
            display: flex;
            flex-direction: column;
        }

        

        #contact-icon-addr {
            color: var(--contact-addr-icon-clr);
        }


        #contact-icon-phone {
            color: var(--contact-phone-icon-clr);
        }


        #contact-icon-hours {
            color: var(--contact-hours-icon-clr);
        }


        #contact-icon-email {
            color: var(--contact-email-icon-clr);
        }

  
 

        /* Logo Container */
        .logo-container {
            margin-bottom: 1.25rem; /* Space between logo and social media icons */
            text-align: center;
        }

        .logo-img-foot {
            width: 7.5rem; /* Adjust logo size */
            height: auto;
        }

        /* Social Media Icons Styling */
        .social-icons {
            display: flex;
            gap: 0.625rem; /* Space between the icons */
            align-items: center; /* Center the icons */
        }

        /* Social Media Icons Styling */
        .social-icons a {
            width: 3.125rem; /* Set fixed width and height for images */
            height: 3.125rem;
        }

        /* Initial overlay setup */
        #page-loading-overlay {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.4s ease, visibility 0.4s ease;
            z-index: 1050;
        }

        /* mooth fade-out before hiding */
        .hide-overlay {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            display: none !important;
        }
        
        /* Spin animation */
        @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
        }

        .spin-logo {
        width: 6.25rem;  /* Adjust as needed */
        height: auto;
        animation: spin 2s linear infinite;
        }



























































        /* Mobile Responsive */
        @media (max-width: 768px) {

            
       

            html {
                scroll-padding-top: calc(var(--promo-height) + var(--nav-height));
                font-size: 12px;

            }

            main {
                padding-top: calc(var(--promo-height) + var(--nav-height));
            }

            
            .hero-content,
            .about-content,
            .contact-content {
                grid-template-columns: 1fr;
                padding-right: 2rem;
            }

            .hero-content input {
                max-width: 100%;
            }

            .hero-text {
                max-width: 100%;
            }
            
            .hero-text h1 {
                font-size: 2rem;
            }

            .hero-images {                
                padding-right: 1rem;
            }

            .hero-image {
                width: 100%;
            }


            .promotions-content {
                display: block;
            }

            #promo-bar-placeholder {
                padding: 0;
            }

            .container {
                display: contents;
            }


            button {
                width: 100%; /* optional */
            }

            .about {
                padding: 1rem 1rem;;
            }

            .about-text,
            .about-image {
                width: 100%;
            }

            .about-image {
                justify-self: center; /* optional: center image if it's not full-width */
                text-align: center;   /* center image contents */
            }

            .about-image img {
                width: 100%;  /* ensures it scales down */
                max-width: 100%; /* keeps it from overflowing */
                height: auto;  /* let height scale naturally if needed */
            }

            .section-subtitle {
                margin-bottom: 1rem;
            }


            .testimonials-grid {
                padding: 0 1rem;
            }
            
           
            .logo {            
                font-size: 1.4rem;
            }

            
          

            main {
                padding-top: calc(3.625rem + 4rem);
            }
 
            .nav-container {
                display: inline-flex; /* Hide menu on mobile */
                gap: 2.25rem;
            }

            .nav-menu {
                display: none; /* Hide menu on mobile */
                flex-direction: column; /* Stack items vertically */
                gap: 1rem;
            }

            .nav-right {                
                margin-left: 10rem;
            }

            .nav-menu.active {
                display: block; /* Show the menu when it has the 'active' class */
            }


            /* Show the nav menu when the hamburger is clicked */
            .nav-menu.show-nav {
                display: block;
            }


            .nav-column h3, .address-column h3 {
                font-size: 1rem; /* Slightly smaller headings for mobile */
            }

            .nav-column a {
                font-size: 0.9rem; /* Reduce font size of links for better readability */
            }



            .hamburger-menu {
                display: none; /* Show hamburger on mobile */
                cursor: pointer;
                padding: 0.625rem;
                width: 1.875rem;
                height: 31.875rem;
                justify-content: space-between;
                flex-direction: column;
                gap: 0.3125rem;
            }

 

            /* Styling for the hamburger icon */
            .hamburger-icon {
                font-size: 1.5rem;
                display: block;
                cursor: pointer;
                margin-left: 1rem;
            }

            .product-link {
                margin: 0;
            }

            .product-card {
                flex: 1 0 calc(33.33% - 2rem);
            }


            .contact {
                padding: 3rem 1rem 2rem 1rem;
            }


            .map-container {
                margin: 0 0 1rem 1rem;
            }

            .carousel-inner {
                width: 100%;
            }

            #carousel-wrapper {
                height: auto;
            }

            .featured-brands {
                padding: 2rem;
            }

            .brands-section {
                margin-top: 2rem;
            }

            #brdsHd {
                margin-bottom: 2rem;
            }

            .footer-column {
                margin-left: 0;
                padding: 1rem 0;
            }

            #tpBrdsHd {
                margin-top: 2rem;
            }

            .page-header p {
                margin-bottom: 1rem;
            }

            #cat-section, #dog-section {
                padding: 2rem;
            }

        }





         @media (max-width: 520px) {

            html {
                font-size: 11.5px;
            }

            .hero-text h1 {
                font-size: 1.75rem;
            }

            .section-title {
                font-size: 1.5rem;
            }

            .section-subtitle {
                font-size: 1rem;
            }

            .container {
                padding: 0 0.5rem;
            }

            .edit-wrapper {
                flex-direction: column;
                align-items: stretch;
                gap: 0.5rem;
            }

       
            .hero-images {
                gap: 0.75rem;
            }

            button {
                font-size: 0.9rem;
                padding: 0.5rem;
            }

            .product-link {
                width: 100%;
                display: block;
            }

            .clickable-images {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

          .d-flex.align-items-center.mt-3.gap-3 {
            flex-direction: column;
            align-items: center;
          }
       
        }