.form-control:focus {
    background-color: inherit !important;
    color: inherit !important;
    border-color: inherit !important;
    box-shadow: none !important;
    outline: none !important;
}

.form-control {
    color: #FFF;
}

/* COMMON STYLES */

body {
    padding: 0;
    margin: 0;
    min-height: 100vh;
    background-color: #18100B;
    box-sizing: border-box;
}
ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

a {
    text-decoration: none;
    color: #fff;
}

.icons {
    color: #442E05;
}

/* END COMMON STYLES */

/* HEADER STYLES */

.bg-body-tertiary {
    background-color: transparent !important;
}

.nav-link {
    color: #FFF4E1 !important;
    font-weight: 600;
}

.navbar_logo_img {
    width: 15%;
}

.navbar-brand {
    width: 30%;
}

.hero_img_1, .hero_img_2{
    width: 100%;
}

.hero_img_1 {
    top: 4rem;
}

.hero_img_2 {
    top: 10rem;
    left: 4rem;
}

/* END HEADER STYLES */

/* FOOTER STYLES */

footer {
    /* height: 570px; */
    background: #A67415;
    background: linear-gradient(273deg, rgba(166, 116, 21, 1) 0%, rgba(44, 31, 6, 1) 75%);
    color: #fff;
    padding: 0.75rem 0 0 0;
}

.footer_bottom {
    border-top: 2px solid #fff;
    padding: 1.75rem 0;
    /* margin: 2rem 0 0 0; */
}

/* .footer_logo {
    height: 200px;
} */

.footer_logo {
    display: flex;
    justify-content: center;
}

.footer_icon > i {
    color: #000;
    font-size: 1.5rem;
    border-radius: 50%;
    background-color: #FFF4E1;
    padding: 1rem;
}

.footer_logo_img {
    width: 25%;
    display: flex;
    height: 7.5rem;
    margin-bottom: 1rem;
}

/* END FOOTER STYLES */

/* CONTACT PAGE STYLES */
#contact_section {
    color: #FFE5B5;
}

.contact_heading_div {
    border-top: 1px solid #C6850A;
    border-bottom: 1px solid #C6850A;
    
}

.contact_form {
    background-color: #231907;
    color: #fff;
    padding: 0.5rem 2rem 2rem 2rem;
}

.contact_form_heading {
    border-left: 8px solid #C6850A;
    padding-left: 1.5rem;
    margin-top: 2rem;
}

.contact_heading {
    color: #C6850A;
}

.contact_form_socials {
    border-top: 2px solid #C6850A;
}

.contact_icon {
    color: #FED991;
    font-size: 1.5rem;
    border-radius: 50%;
    background-color: #FED991;
    padding: 1rem;
}

.contact_info {
    background: #7C5D21;
    background: linear-gradient(180deg, rgba(124, 93, 33, 1) 0%, rgba(74, 53, 13, 1) 83%);
    padding: 1rem;
    border-radius: 8px;
}

.contact_text_heading {
    color: #fff;
    font-weight: 600;
}

.contact_input {
    background-color: #231907;
    border: none;
    border-radius: 0%;
    border-bottom: 1px solid #fff;
}

.enquiry_btn_div, .contact_btn_div, .send_msg_btn {
    background-color: #C6850A;
    color: #fff;
    border: none;
    padding: 1rem 1.5rem;
    border-radius: 4px;
    display: flex;
    text-transform: capitalize;
    width: 50%;
}

.enquiry_btn, .contact_btn {
    background-color: #C6850A;
    color: #fff;
    border: none;
}

.contact_textarea {
    background-color: #120C02;
    border: none;
    border-radius: 0%;
}

.contact_textarea::placeholder {
    color: #929292;
}

/* ENQUIRY PAGE STYLES */

.enquiry_hero_banner {
    background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)), url('/imgs/enquiry_hero_img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 100vh;
    padding: 3rem 4rem;
}

.home_hero_banner {
    height: 100vh;
    padding: 3rem 4rem;
}

.carousel-overlay-wrapper {
    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8));
    pointer-events: none;
}


.hero_rectangle_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 6rem 10rem;
}

.hero_div {
    /* padding: 4rem; */
    /* margin-bottom: 5rem; */
    height: 90vh;
    border: 2px solid #FFF;
}

/* BRANCHES PAGE */

.branches_div {
    border: 2px solid #FFE5B5;
    border-radius: 8px;
}


.branches_view_btn {
    color: #C6850A;
    font-weight: 700;
    border: 2px solid #C6850A;
    background-color: #18100B;
    width: 25%;
    padding: 1.5rem;
    margin: 4rem;
}

/* HOME PAGE */

.home_contact_section {
    background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), url('/imgs/home_contact_img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* height: 80vh; */
}

.contact_form_info_div {
    background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .4)), url('/imgs/contact_form_black_img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2rem;
}

.contact_form_info_icon {
    background-color: #FFECC7;
    display: flex;
    justify-content: center;
    align-self: center;
    padding: 1rem;
    margin: 0.57rem;
}

.we_offer_title_heading {
    color: #FFE5B5;
}

.we_offer_heading {
    border-bottom: 1px solid #FFF;
    color: #FFF;
    padding-left: 0;
}

.we_offer_heading:hover {
    background-color: #C6850A;
}

.we_offer_heading_sub:hover {
    background-color: #C6850A;
}

.what_we_sell_container {
    top: -16%;
    left: 10%;
}

.we_offer_img_div {
    background: linear-gradient(rgba(57, 40, 7, 0.6), rgba(57, 40, 7, .6)), url('/imgs/we_offer_img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home_popular_products_title_div {
    border-bottom: 1px solid #C6850A;
    color: #FFF;
    /* padding: 2rem 0; */
}

.home_popular_products_title_div a {
    color: #FFF;
    font-weight: 600;
    font-size: 1.5rem;
    border-bottom: 8px solid transparent;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    display: inline-block;
}

.home_popular_products_title_div a:hover {
    color: #C6850A;
    border-bottom: 8px solid #C6850A;
}

.why_choose_us_icon {
    background-color: #7C5D21;
    border-radius: 50%;
}

.home_what_we_sell_section {
    background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .2)), url('/imgs/main_background_img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    margin: 10rem 0 2rem;
}

.yellow_banner_div {
    background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .2)), url('/imgs/main_backgroung_top_img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 35vh;

}

.reach_out_text {
    width: 40%;
    color: #FFF;
}

.yellow_banner_icon {
    background-color: #FAD795;
    border-radius: 50%;
    color: #563D0D;
}

.what_we_sell_num_section {
    margin: auto;
    padding: 4.5rem 0;
}

/* Global button styles for your custom buttons */
.left_btn, .right_btn {
    padding: 1rem 2rem;
    background-color: transparent;
    border: 2px solid #FFF;
    color: #FFF;
    cursor: pointer; /* Ensure buttons are clickable */
}

/* Home Page Carousel Specific Button Positioning */
.home-carousel-buttons-row .col-12 {
    position: relative; /* Make this the positioning context for its children buttons */
    height: 60px; /* Sufficient height for buttons */
    display: flex;
    justify-content: flex-end; /* Keeps your original flex alignment */
    align-items: center; /* Vertically center buttons */
}

.swiper-button-prev.left_btn {
    position: absolute;
    left: 20px; /* Adjust as needed, considering mx-5 on the button */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.swiper-button-next.right_btn {
    position: absolute;
    right: 20px; /* Adjust as needed, considering mx-5 on the button */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* About Page Carousel Specific Button Positioning */
.about-carousel-buttons-row .col-12 {
    position: relative;
    height: 60px; /* Sufficient height for buttons */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.about_carousel_prev {
    position: absolute;
    left: 20px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.about_carousel_next {
    position: absolute;
    right: 20px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

/* Hide Swiper's default arrows (crucial for your custom button icons) */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: '' !important;
    display: none !important;
}

/* Swiper Common Slide Styles */
.swiper-slide {
    width: auto; /* Swiper will manage width based on slidesPerView and spaceBetween */
    height: 350px; /* Consistent height for all slides */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #231907; /* Default background for slides */
    border-radius: 8px;
    box-sizing: border-box;
    transform: scale(0.9); /* Default scale for inactive slides */
    transition: transform 0.3s ease-in-out; /* Smooth transition for scale */
    padding: 15px; /* Add some internal padding to the slide content */
}

/* Styles for image inside slides */
.swiper-slide img {
    height: 300px; /* Adjust image height as needed */
    object-fit: cover;
    width: 100%;
    margin-bottom: 10px; /* Space between image and text */
    transition: transform 0.3s ease-in-out; /* Smooth transition for image scale */
}

/* Active middle slide specific style (applied by JS) */
.swiper-slide.middle-active {
    transform: scale(1); /* Bring middle slide to normal size */
}

.swiper-slide.middle-active img {
    transform: scale(1.1); /* Make the image pop up */
}

/* Home Page Carousel Specific Container Styles */
.mySanitaryCarousel {
    width: 100%;
    padding: 0 50px; /* Padding for prev/next slide visibility and button space */
    position: relative; /* If buttons were within, or just for context */
}

/* About Page Carousel Specific Container Styles */
.myAboutPageCarousel {
    width: 100%;
    padding: 0 50px; /* Adjust as needed */
    margin-top: 2rem; /* Example margin from its button row */
    position: relative;
}

/* Specific styling for the product carousel slides on About page */
.product_carousel_slide {
    background-color: #120C02; /* Slightly different background for product slides */
    color: #FFF4E1; /* Text color */
}

.product_carousel_slide img {
    height: 250px; /* Adjust product image height, could be different from sanitary images */
    border-radius: 4px; /* Slightly rounded corners for product images */
}

.product_carousel_slide p {
    font-weight: 600;
    font-size: 1.1rem;
}

.brands_logo_left {
    border: 1px solid #FFF;
    border-top: none;
    border-left: none;
}

.brands_logo_top {
    border: 1px solid #FFF;
    border-top: none;
}

.brands_logo_right {
    border: 1px solid #FFF;
    border-top: none;
    border-right: none;
}

.brands_logo_btm_left {
    border: 1px solid #FFF;
    border-bottom: none;
    border-left: none;
}

.brands_logo_btm {
    border: 1px solid #FFF;
    border-bottom: none;
}

.brands_logo_btm_right {
    border: 1px solid #FFF;
    border-bottom: none;
    border-right: none;
}

/* ABOUT PAGE GENERAL STYLES */
.vision_mission_div {
    background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url('/imgs/vision_mission_img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 85vh;
    border-radius: 20px;
}

.vision_mission_box {
    border-radius: 40px 0 40px 0;
    background-color: #FFE5B5;
}

.our_shop_main_section {
    background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1)), url('/imgs/about-us-carousel-img.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 4rem 0;
}




/* -----------------------------------------------------------ALL PAGE ANIMATIONS------------------------------------------------------------- */

/* Base styles for animated elements */
.animated-element {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}


.fade-in {
    opacity: 0;
}

.slide-up {
    transform: translateY(50px);
    opacity: 0;
}

.slide-left {
    transform: translateX(-50px);
    opacity: 0;
}

.slide-right {
    transform: translateX(-50px);
    opacity: 0;
}

.zoom-in {
    transform: scale(0.9);
    opacity: 0;
}


.animated-element.is-visible {
    opacity: 1;
    transform: none;
}


.animated-element.is-visible:nth-child(even) {
    transition-delay: 0.1s;
}

.animated-element.is-visible:nth-child(odd) {
    transition-delay: 0s;
}

/* --------------------------------------------------------------END ANIMATIONS----------------------------------------------------------- */


/* --------------------------------------------------------------MEDIA QUERIES----------------------------------------------------------- */

@media (min-width: 1200px) and (max-width: 1440px) {
    /* HERO BANNER SECTION */
    .hero_img_1, .hero_img_2 {
        width: 100%;
    }
    .hero_img_2 {
        top: 8rem;
        left: 4rem;
    }
    .hero_img_1 {
        top: 2rem;
        left: 0rem;
    }
    .enquiry_hero_banner {
        padding: 1rem 2rem;
    }
    .home_hero_banner {
        padding: 1rem 2rem;
    }
    .enquiry_btn_div, .contact_btn_div, .send_msg_btn {
        width: 50%;
    }
    .what_we_sell_container {
        top: -5%;
        left: 4%;

    }
    /* Carousel Specific */
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 40px;
    }
    .swiper-slide { height: 320px; }
    .swiper-slide img { height: 270px; }
    .product_carousel_slide img { height: 220px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* HERO BANNER SECTION & HOME PAGE */
    .hero_img_1, .hero_img_2 {
        width: 100%;
    }
    .hero_img_2 {
        top: 8rem;
        left: 7rem;
    }
    .hero_img_1 {
        top: 2rem;
        left: 2rem;
    }
    .enquiry_hero_banner {
        padding: 1rem 1rem;
    }
    .home_hero_banner {
        padding: 1rem 1rem;
    }
    .enquiry_btn_div, .contact_btn_div, .send_msg_btn {
        width: 50%;
    }
    .what_we_sell_container {
        top: -10%;
        left: 3%;
    }
    /* Carousel Specific */
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 30px;
    }
    .swiper-slide { height: 300px; }
    .swiper-slide img { height: 250px; }
    .product_carousel_slide img { height: 200px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* HERO BANNER SECTION & HOME PAGE */
    .hero_img_1, .hero_img_2 {
        width: 90%;
    }
    .hero_img_2 {
        top: 8rem;
        left: 1rem;
    }
    .hero_img_1 {
        top: 4rem;
        left: -2rem;
    }
    .hero_div {
        /* border: none; */
        height: 65vh;
    }
    .vision_mission_div {
        height: 50vh;
    }
    .enquiry_hero_banner {
        padding: 1rem 0.5rem;
        max-height: 70vh;
    }

    .navbar_logo_img {
        width: 30%;
    }
    .home_hero_banner {
        padding: 1rem 0.5rem;
        max-height: 70vh;
    }
    .enquiry_btn_div, .contact_btn_div {
        width: 60%;
    }
    .what_we_sell_container {
        top: -10%;
        left: 4%;
    }
    .carousel_img_div img { /* This might be redundant if using .swiper-slide img */
        height: 200px;
    }

    .send_msg_btn {
        width: 100%;
    }
    .reach_out_text {
        width: 80%;
    }
    /* Carousel Specific (Swiper breakpoints will handle slidesPerView) */
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 20px; /* Reduced padding for narrower screens */
    }
    .swiper-slide { height: 280px; }
    .swiper-slide img { height: 230px; }
    .product_carousel_slide img { height: 180px; }
}

@media (min-width: 576px) and (max-width: 767px) {
    /* HERO BANNER SECTION & HOME PAGE */
    .hero_img_1, .hero_img_2 {
        display: none;
    }
    .hero_div {
        /* border: none; */
        height: 60vh;
    }
    .enquiry_hero_banner {
        padding: 1rem 0.5rem;
        max-height: 65vh;
    }

    .navbar_logo_img {
        width: 30%;
    }

    .home_hero_banner {
        padding: 1rem 0.5rem;
        max-height: 65vh;
    }
    .enquiry_btn_div, .contact_btn_div {
        width: 90%;
    }
    .home_what_we_sell_section {
        margin-bottom: 8rem;
        height: 100vh;
    }
    .vision_mission_div {
        padding: 3rem;
        padding-top: 0;
    }
    .vision_mission_box_div {
        padding: 3rem;
    }
    .vision_mission_box {
        margin-bottom: 3rem;
    }

    .vision
    .what_we_sell_container {
        top: -10%;
        left: 15%;
    }
    .yellow_banner_div {
        height: 70vh;
    }
    .send_msg_btn {
        width: 100%;
    }
    /* Carousel Specific (Swiper breakpoints will handle slidesPerView) */
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 10px; /* Further reduced padding */
    }
    .swiper-slide { height: 260px; }
    .swiper-slide img { height: 210px; }
    .product_carousel_slide img { height: 160px; }
    /* Adjust button positioning for smaller screens if needed */
    .home-carousel-buttons-row .col-12, .about-carousel-buttons-row .col-12 {
        height: 50px; /* Less height for buttons */
    }
    .swiper-button-prev.left_btn, .about_carousel_prev { left: 10px; }
    .swiper-button-next.right_btn, .about_carousel_next { right: 10px; }
}

@media (max-width: 575px) {
    /* HERO BANNER SECTION & HOME PAGE */
    .hero_img_1, .hero_img_2 {
        display: none;
    }

    .hero_div {
        /* border: none; */
        height: 70vh;
    }
    .enquiry_hero_banner {
        padding: 1rem 0.5rem;
        height: 75vh;
    }
    .home_hero_banner {
        padding: 1rem 0.5rem;
        height: 75vh;
    }
    .enquiry_btn_div, .contact_btn_div {
        width: 90%;
    }

    .home_what_we_sell_section {
        margin-bottom: 12rem;
        height: 100vh;
    }
    .what_we_sell_container {
        top: -10%;
        left: 0%;
    }
    .vision_mission_div {
        /* padding: 3rem; */
        padding-top: 0;
        height: 70vh;
    }
    .vision_mission_box_div {
        padding: 0.5rem;
    }
    .vision_mission_box {
        margin-bottom: 1rem;
    }
    .yellow_banner_div {
        height: 75vh;
    }
    .send_msg_btn {
        width: 100%;
    }
    .navbar_logo_img {
        width: 30%;
    }
    /* Carousel Specific (Swiper breakpoints will handle slidesPerView) */
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 5px; /* Minimal padding */
    }
    .swiper-slide { height: 240px; }
    .swiper-slide img { height: 190px; }
    .product_carousel_slide img { height: 140px; }
    /* Adjust button positioning for smallest screens */
    .home-carousel-buttons-row .col-12, .about-carousel-buttons-row .col-12 {
        height: 40px; /* Even less height */
    }
    .swiper-button-prev.left_btn, .about_carousel_prev { left: 5px; }
    .swiper-button-next.right_btn, .about_carousel_next { right: 5px; }
    .left_btn, .right_btn {
        padding: 0.5rem 1rem; /* Smaller button padding */
    }
}


/* ABOUT PAGE CAROUSEL */
/* ... (Your existing CSS from previous responses) ... */

/* Global button styles for your custom buttons (should already be there) */
.left_btn, .right_btn {
    padding: 1rem 2rem;
    background-color: transparent;
    border: 2px solid #FFF;
    color: #FFF;
    cursor: pointer;
}

/* Hide Swiper's default arrows (crucial for your custom button icons) */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: '' !important;
    display: none !important;
}

/* Common Swiper Slide Styles (these apply to all carousels unless overridden) */
.swiper-slide {
    width: auto;
    height: 350px; /* Adjust as needed */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #231907; /* Default background for slides */
    border-radius: 8px;
    box-sizing: border-box;
    transform: scale(0.9); /* Default scale for inactive slides */
    transition: transform 0.3s ease-in-out; /* Smooth transition for scale */
    padding: 15px; /* Internal padding for content */
}

/* Styles for image inside common slides */
.swiper-slide img {
    height: 300px; /* Adjust image height as needed */
    object-fit: cover;
    width: 100%;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in-out;
}

/* Active middle slide specific style (applied by JS) */
.swiper-slide.middle-active {
    transform: scale(1); /* Bring middle slide to normal size */
}

.swiper-slide.middle-active img {
    transform: scale(1.1); /* Make the image pop up */
}


/* --- Home Page Carousel Specific Styles --- */
/* (These should already be in your CSS) */

.home-carousel-buttons-row .col-12 {
    position: relative;
    height: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.swiper-button-prev.left_btn {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.swiper-button-next.right_btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.mySanitaryCarousel {
    width: 100%;
    padding: 0 50px;
    position: relative;
}

/* --- About Page Carousel Specific Styles --- */

.about-carousel-buttons-row .col-12 {
    position: relative;
    height: 60px; /* Ensure enough height for buttons */
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.about_carousel_prev {
    position: absolute;
    left: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.about_carousel_next {
    position: absolute;
    right: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.myAboutPageCarousel {
    width: 100%;
    padding: 0 50px; /* Adjust padding if you want different spacing from home carousel */
    margin-top: 2rem; /* Example: space below the buttons row */
    position: relative;
}

/* Specific styling for the product carousel slides on About page */
.product_carousel_slide {
    background-color: #120C02; /* Example: slightly different background for product slides */
    color: #FFF4E1; /* Text color */
}

.product_carousel_slide img {
    height: 250px; /* Adjust product image height, potentially different from sanitary images */
    border-radius: 4px; /* Slightly rounded corners for product images */
}

.product_carousel_slide p {
    font-weight: 600;
    font-size: 1.1rem;
}


/* --- Media Queries (Adjust for both carousels) --- */
/* Ensure these blocks in your CSS are updated to apply to both carousels */

@media (min-width: 992px) {
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 50px;
    }
    .swiper-slide { height: 350px; }
    .swiper-slide img { height: 300px; }
    .product_carousel_slide img { height: 250px; } /* Specific for product images */
}

@media (min-width: 768px) and (max-width: 991px) {
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 30px;
    }
    .swiper-slide { height: 300px; }
    .swiper-slide img { height: 250px; }
    .product_carousel_slide img { height: 200px; } /* Specific for product images */
}

@media (max-width: 767px) {
    .mySanitaryCarousel, .myAboutPageCarousel {
        padding: 0 10px;
    }
    .swiper-slide { height: 280px; }
    .swiper-slide img { height: 230px; }
    .product_carousel_slide img { height: 180px; } /* Specific for product images */
    .home-carousel-buttons-row .col-12, .about-carousel-buttons-row .col-12 {
        height: 50px;
    }
    .swiper-button-prev.left_btn, .about_carousel_prev { left: 5px; }
    .swiper-button-next.right_btn, .about_carousel_next { right: 5px; }
    .left_btn, .right_btn {
        padding: 0.8rem 1.5rem;
    }
}

.top_selling_section_shop {
    background-color: #4C350A8F;
}


/* SANITARYWARES CAROUSEL */
/* ... (Your existing common, home page, about page, and hardwares CSS) ... */

/* --- Sanitarywares Carousel Specific Styles --- */

.sanitarywares-carousel-buttons-row .col-12 {
    position: relative;
    height: 60px; /* Ensure enough height for buttons */
    display: flex;
    justify-content: space-between; /* Keeps original justify-content-between */
    align-items: center;
}

.sanitarywares_carousel_prev {
    position: absolute;
    left: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.sanitarywares_carousel_next {
    position: absolute;
    right: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.mySanitarywaresCarousel {
    width: 100%;
    padding: 0 50px; /* Adjust padding if you want different spacing */
    margin-top: 2rem; /* Example: space below the buttons row */
    position: relative;
}

.sanitarywares_slide {
    height: 350px; /* Consistent height for these slides */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #231907; /* Example: Consistent dark background */
    border-radius: 8px;
    box-sizing: border-box;
    transform: scale(0.9); /* Default scale for inactive slides */
    transition: transform 0.3s ease-in-out; /* Smooth transition for scale */
    padding: 15px; /* Internal padding for content */
}

.sanitarywares_slide img {
    height: 300px; /* Adjust image height */
    object-fit: cover;
    width: 100%;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in-out;
}

/* --- Media Queries --- */
/* Ensure these blocks are updated to apply to the sanitarywares carousel as well */

@media (min-width: 992px) {
    .mySanitarywaresCarousel { padding: 0 50px; }
    .sanitarywares_slide { height: 350px; }
    .sanitarywares_slide img { height: 300px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .mySanitarywaresCarousel { padding: 0 30px; }
    .sanitarywares_slide { height: 300px; }
    .sanitarywares_slide img { height: 250px; }
}

@media (max-width: 767px) {
    .mySanitarywaresCarousel { padding: 0 10px; }
    .sanitarywares_slide { height: 280px; }
    .sanitarywares_slide img { height: 230px; }
    .sanitarywares_carousel_prev { left: 5px; }
    .sanitarywares_carousel_next { right: 5px; }
}

/* TILES CAROUSEL */
/* ... (Your existing common, home page, about page, hardwares, and sanitarywares CSS) ... */

/* --- Tiles Carousel Specific Styles --- */

.tiles-carousel-buttons-row .col-12 {
    position: relative;
    height: 60px; /* Ensure enough height for buttons */
    display: flex;
    justify-content: space-between; /* Keeps original justify-content-between */
    align-items: center;
}

.tiles_carousel_prev {
    position: absolute;
    left: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.tiles_carousel_next {
    position: absolute;
    right: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.myTilesCarousel {
    width: 100%;
    padding: 0 50px; /* Adjust padding if you want different spacing */
    margin-top: 2rem; /* Example: space below the buttons row */
    position: relative;
}

.tiles_slide {
    height: 350px; /* Consistent height for these slides */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #231907; /* Example: Consistent dark background */
    border-radius: 8px;
    box-sizing: border-box;
    transform: scale(0.9); /* Default scale for inactive slides */
    transition: transform 0.3s ease-in-out; /* Smooth transition for scale */
    padding: 15px; /* Internal padding for content */
}

.tiles_slide img {
    height: 300px; /* Adjust image height */
    object-fit: cover;
    width: 100%;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in-out;
}

/* --- Media Queries --- */
/* Ensure these blocks are updated to apply to the tiles carousel as well */

@media (min-width: 992px) {
    .myTilesCarousel { padding: 0 50px; }
    .tiles_slide { height: 350px; }
    .tiles_slide img { height: 300px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .myTilesCarousel { padding: 0 30px; }
    .tiles_slide { height: 300px; }
    .tiles_slide img { height: 250px; }
}

@media (max-width: 767px) {
    .myTilesCarousel { padding: 0 10px; }
    .tiles_slide { height: 280px; }
    .tiles_slide img { height: 230px; }
    .tiles_carousel_prev { left: 5px; }
    .tiles_carousel_next { right: 5px; }
}

/* KITCHEN WARES CAROUSEL */
/* ... (Your existing common, home page, about page, hardwares, sanitarywares, and tiles CSS) ... */

/* --- Kitchenwares Carousel Specific Styles --- */

.kitchenwares-carousel-buttons-row .col-12 {
    position: relative;
    height: 60px; /* Ensure enough height for buttons */
    display: flex;
    justify-content: space-between; /* Keeps original justify-content-between */
    align-items: center;
}

.kitchenwares_carousel_prev {
    position: absolute;
    left: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.kitchenwares_carousel_next {
    position: absolute;
    right: 20px; /* Adjust positioning as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

.myKitchenwaresCarousel {
    width: 100%;
    padding: 0 50px; /* Adjust padding if you want different spacing */
    margin-top: 2rem; /* Example: space below the buttons row */
    position: relative;
}

.kitchenwares_slide {
    height: 350px; /* Consistent height for these slides */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #231907; /* Example: Consistent dark background */
    border-radius: 8px;
    box-sizing: border-box;
    transform: scale(0.9); /* Default scale for inactive slides */
    transition: transform 0.3s ease-in-out; /* Smooth transition for scale */
    padding: 15px; /* Internal padding for content */
}

.kitchenwares_slide img {
    height: 300px; /* Adjust image height */
    object-fit: cover;
    width: 100%;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in-out;
}

/* --- Media Queries --- */
/* Ensure these blocks are updated to apply to the kitchenwares carousel as well */

@media (min-width: 992px) {
    .myKitchenwaresCarousel { padding: 0 50px; }
    .kitchenwares_slide { height: 350px; }
    .kitchenwares_slide img { height: 300px; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .myKitchenwaresCarousel { padding: 0 30px; }
    .kitchenwares_slide { height: 300px; }
    .kitchenwares_slide img { height: 250px; }
}

@media (max-width: 767px) {
    .myKitchenwaresCarousel { padding: 0 10px; }
    .kitchenwares_slide { height: 280px; }
    .kitchenwares_slide img { height: 230px; }
    .kitchenwares_carousel_prev { left: 5px; }
    .kitchenwares_carousel_next { right: 5px; }
}

.filter_btn {
    background: #FFBA37;
    background: linear-gradient(103deg, rgba(255, 186, 55, 1) 0%, rgba(153, 112, 33, 1) 75%);
}
.filter_btn_filter {
    background-color: #4D4A4496;
    color: #FFF1D6;
}

.filter_btn_filter_tiles:hover {
    background: #FFBA37;
    background: linear-gradient(103deg, rgba(255, 186, 55, 1) 0%, rgba(153, 112, 33, 1) 75%);
}

/* MARQUEE STYLES */
.marquee-wrapper {
      overflow: hidden;
      width: 100%;
      /* background-color: #fff; */
      padding: 20px 0;
      position: relative;
    }

    .marquee-content {
      display: flex;
      width: max-content;
      animation: marqueeScroll 30s linear infinite;
    }

    .brand-logo {
      flex: 0 0 auto;
      width: 180px; /* Fixed width ensures seamless scrolling */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .brand-logo img {
      max-width: 100%;
      height: auto;
      object-fit: contain;
    }

    @keyframes marqueeScroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    /* Optional: pause scroll on hover */
    /* .marquee-wrapper:hover .marquee-content {
      animation-play-state: paused;
    } */


    .sanitarywares_brands_div {
        background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url('/imgs/sanitarywares_brands_img.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;    
    }
    .hardwares_brands_div {
        background: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url('/imgs/hardwares_brands_img.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;  
    }


    /* HOME PAGE, TILES/SANITARYWARES/KITCHENWARES/HARDWARES TABS */
    .tab-content-item {
  opacity: 0;
  transform: translateY(40px); /* slide from bottom */
  transition: all 0.6s ease-in-out;   /* slower animation */
  display: none;
}

.tab-content-item.active {
  display: flex; /* or block depending on layout */
  opacity: 1;
  transform: translateY(0);
}

/* Highlight the entire row background when tab is active */
.we_offer_heading:has(.tab-link.active),
.we_offer_heading_sub:has(.tab-link.active) {
  background-color: #C6850A;
}

.active-tab-box {
  background-color: #C6850A;
}




.home_popular_products_all,
    .home_popular_products_tiles,
    .home_popular_products_sanitarywares,
    .home_popular_products_kitchenwares {
        display: none;
    }

    .animated-element {
        opacity: 0;
        transform: translateY(20px);
        transition: all 0.4s ease-in-out;
    }

    .animated-element.show {
        opacity: 1;
        transform: translateY(0);
    }

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home_popular_products_title_div a.active-tab {
  border-bottom: 8px solid #C6850A;
  /* padding-bottom: 6px; */
}


.enquiry_hero_banner {
    position: relative;
    overflow: hidden;
}

.home_hero_banner {
    position: relative;
    overflow: hidden;
}

#heroBackgroundCarousel {
    z-index: 0;
}

.carousel-inner img {
    object-fit: cover;
}