/* General Resets and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header Top Section */
.header-top {
    background: #fff;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 0; /* 20px / 16 = 1.25rem */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.05); /* Subtle shadow */
}

/* Product Menu Container (if used for category navigation) */
.container-product-menu {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
    justify-content: center;
    padding: 1.25rem; /* 20px / 16 = 1.25rem */
    margin: 1.25rem; /* 20px / 16 = 1.25rem */
    width: 100%; /* Fluid width */
    max-width: 75rem; /* 1200px / 16 = 75rem */
}

/* Individual Item Select (e.g., filter buttons) */
.item-select {
    padding: 0.625rem 1.875rem; /* 10px 30px */
    margin: 0.3125rem; /* 5px / 16 = 0.3125rem */
    border: 0.0625rem solid #ccc; /* 1px / 16 = 0.0625rem */
    border-radius: 0.3125rem; /* 5px / 16 = 0.3125rem */
    color: #1e1e1e;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.item-select:hover, .item-select.active {
    background-color: #59b400;
    color: #fff;
    border-color: #59b400;
}

/* Banner Container */
.banner-container {
    width: 100%;
    height: 31.25rem; /* 500px / 16 = 31.25rem */
    display: flex;
    justify-content: center;
    align-items: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    /* Ensure a fallback background color if image fails */
    background-color: #a9a9a9;
}

.ban-con-in {
    height: 100%; /* Take full height of parent banner */
    width: 100%;
    max-width: 75rem; /* 1200px / 16 = 75rem */
    display: flex;
    align-items: center;
    padding: 0 1.25rem; /* Add horizontal padding */
}

/* Main Content Wrapper */
.main-container {
    width: 100%;
    max-width: 75rem; /* 1200px / 16 = 75rem */
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 0 auto; /* Center the main container */
    padding: 1.25rem; /* Add padding for overall content */
}

/* Body Container (General Content Section) */
.body-container {
    width: 100%;
    height: auto;
    padding: 1.25rem; /* 20px / 16 = 1.25rem */
    margin-bottom: 6.25rem; /* 100px / 16 = 6.25rem */
}

/* Body Container 1 (Image with Text Overlay/Side) */
.body-container1 {
    width: 100%; /* Fluid width */
    max-width: 62.5rem; /* 80% of 1200px (960px) / 16 = 60rem. Adjust to 1000px/16=62.5rem for better scaling */
    height: 12.5rem; /* 200px / 16 = 12.5rem */
    display: flex;
    justify-content: flex-end; /* Align content to the right */
    align-items: center;
    flex-direction: row-reverse; /* Text on right, image on left (if applicable) */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #a9a9a9; /* Fallback */
    padding: 0.625rem; /* 10px / 16 = 0.625rem */
    margin: 0.625rem auto; /* 10px / 16 = 0.625rem, auto for horizontal centering */
    border-radius: 0.5rem; /* Rounded corners */
    overflow: hidden; /* Hide overflowing content */
}

.body-container1-row {
    width: 40%;
    text-align: right;
    font-size: 1.5rem; /* 24px / 16 = 1.5rem */
    padding-right: 5.625rem; /* 90px / 16 = 5.625rem */
    color: #fff; /* Ensure text is visible on background image */
    text-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.5); /* Subtle text shadow for readability */
}

.h2-ch-c {
    color: #59b400; /* Green color for specific h2 */
}

/* Product Display Part */
.product-container {
    border-top: 0.0625rem solid lightgray; /* 1px / 16 = 0.0625rem */
    padding: 2.5rem 1.25rem; /* 40px 20px */
    width: 100%;
    max-width: 75rem; /* 1200px / 16 = 75rem */
    margin-top: 2.5rem; /* Spacing from previous section */
}

.product-grid { /* New class for product display grid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); /* Responsive grid columns */
    gap: 1.25rem; /* 20px / 16 = 1.25rem */
    justify-content: center; /* Center grid items */
}

.pro-dis-ar-arr { /* Individual Product Card */
    display: flex;
    flex-direction: column; /* Stack content vertically */
    justify-content: space-between; /* Space out content vertically */
    align-items: center; /* Center items horizontally */
    border: 0.0625rem solid #eee; /* Lighter border */
    background: #fff;
    padding: 1.25rem; /* 20px / 16 = 1.25rem */
    height: auto; /* Auto height for content flexibility */
    min-height: 18.75rem; /* Minimum height for consistency */
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1); /* Softer shadow */
    border-radius: 0.5rem; /* 8px / 16 = 0.5rem */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effects */
    text-align: center; /* Center text within card */
}

.pro-dis-ar-arr:hover {
    transform: translateY(-0.3125rem); /* Lift effect on hover */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); /* More pronounced shadow */
}

.pro-dis-ar-r-sp { /* Product description spacing */
    padding: 0.3125rem 0; /* 5px / 16 = 0.3125rem */
    font-size: 0.9375rem; /* 15px / 16 = 0.9375rem */
    color: #555;
}

.img-s-170 {
    width: 10.625rem; /* 170px / 16 = 10.625rem */
    height: auto;
    object-fit: contain; /* Ensure image fits without distortion */
    margin-bottom: 0.625rem; /* Space below image */
}

#ra-co-tx {
    color: #59b400;
    font-weight: 600;
    font-size: 1.125rem; /* 18px / 16 = 1.125rem */
}

#pr-ch-sty-h4 {
    color: red;
    font-size: 1.5rem; /* 24px / 16 = 1.5rem */
    text-align: center; /* Center price */
    padding: 0.625rem 0; /* 10px / 16 = 0.625rem */
    margin: 1.25rem 0; /* 20px / 16 = 1.25rem */
}

.btn-pro-atc-ch-sty {
    background: #59b500;
    color: #fff;
    padding: 0.625rem 2.5rem; /* 10px 40px */
    font-weight: 600;
    margin-top: 0.625rem; /* 10px / 16 = 0.625rem */
    border-radius: 0.1875rem; /* 3px / 16 = 0.1875rem */
    transition: background 0.3s ease;
    display: inline-block; /* Allow padding and margin to apply correctly */
    text-decoration: none; /* Remove underline */
}

.btn-pro-atc-ch-sty:hover {
    background: #70bf0e;
}

.li-s-p {
    padding: 0.3125rem; /* 5px / 16 = 0.3125rem */
    font-size: 1rem; /* 16px / 16 = 1rem */
    list-style: disc; /* Ensure list style is visible */
    margin-left: 1.25rem; /* Indent list items */
}

/* Add to Cart Part (if this is a separate section for cart items) */
.pro-dis-ar-arr2 {
    margin: 3.125rem 0; /* 50px / 16 = 3.125rem */
    border-top: 0.0625rem solid lightgray;
    padding: 1.25rem 0; /* 20px / 16 = 1.25rem */
}

/* Category Header Section */
.cat-bdy-wid {
    margin-top: 3.125rem; /* 50px / 16 = 3.125rem */
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cat-hed-con, .br-hed-con { /* Combined styles for category and brand headers */
    border: 0.0625rem solid #fff; /* 1px / 16 = 0.0625rem */
    padding: 1.25rem; /* 20px / 16 = 1.25rem */
    width: 100%;
    max-width: 75rem; /* 1200px / 16 = 75rem */
    border-radius: 0.3125rem; /* 5px / 16 = 0.3125rem */
    background: #fff;
    display: flex;
    align-items: center; /* Vertically align items */
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    margin-bottom: 2.5rem; /* Space below header */
}

.cat-hed-con-1 { /* Image column in category header */
    width: 30%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.625rem; /* 10px / 16 = 0.625rem */
}

.cat-hed-con-1 img {
    max-width: 100%;
    height: auto;
    border-radius: 0.3125rem; /* Rounded corners for images */
}

.cat-hed-con-2 { /* Text column in category header */
    width: 70%;
    padding: 0.625rem 1.25rem; /* 10px 20px */
}

.cat-hed-con-2 h1 {
    font-size: 2.5rem; /* 40px / 16 = 2.5rem */
    color: #1e1e1e; /* Dark color for heading */
    margin-bottom: 0.625rem; /* Space below heading */
}

.p-sty {
    font-size: 1.1875rem; /* 19px / 16 = 1.1875rem */
    line-height: 1.6; /* Improved line height for readability */
    padding: 0.625rem 0; /* 10px / 16 = 0.625rem */
    color: #333;
}

.cat-bdy-con1 { /* Full width banner below products/brands */
    background: #a9a9a9;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.25rem 0; /* Add some vertical padding */
}

.im-2-ban-rs-sty { /* Image inside the banner */
    width: 100%;
    max-width: 75rem; /* 1200px / 16 = 75rem */
    height: auto;
    object-fit: cover;
    border-radius: 0.5rem; /* Rounded corners for the banner image */
}

/* Brands Display */
.br-dis-ar-arr { /* Individual Brand Product Card */
    width: 100%; /* Fluid width */
    max-width: 18.75rem; /* 300px / 16 = 18.75rem */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    margin: 0.625rem; /* 10px / 16 = 0.625rem */
    border-radius: 0.3125rem; /* 5px / 16 = 0.3125rem */
    height: 28.125rem; /* 450px / 16 = 28.125rem */
    box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
}

.br-dis-ar-arr:hover {
    transform: translateY(-0.3125rem);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.btn-br-atc-ch-sty {
    background: #59b500;
    color: #fff;
    padding: 0.625rem 2.5rem; /* 10px 40px */
    font-weight: 600;
    margin-top: 0.625rem; /* 10px / 16 = 0.625rem */
    border-radius: 0.1875rem;
    transition: background 0.3s ease;
    display: inline-block;
    text-decoration: none;
}

.btn-br-atc-ch-sty:hover {
    background: #70bf0e;
}

.img-s-200 {
    width: 12.5rem; /* 200px / 16 = 12.5rem */
    height: auto;
    object-fit: contain;
    margin-bottom: 0.625rem;
}

#br-ch-sty-h4 {
    color: red;
    font-size: 1.5rem; /* 24px / 16 = 1.5rem */
    text-align: center;
    padding: 0;
    margin: 0.9375rem 0; /* 15px / 16 = 0.9375rem */
}

.br-dis-ar-r {
    width: 100%;
    padding: 0 0.9375rem; /* 15px / 16 = 0.9375rem */
}

.br-des-h {
    height: 3.125rem; /* 50px / 16 = 3.125rem - fixed height for description */
    overflow: hidden; /* Hide overflowing text */
    margin-bottom: 0.625rem;
}

.br-dis-ar-r-sp {
    text-align: right;
    font-size: 0.9375rem; /* 15px / 16 = 0.9375rem */
    color: #555;
}

/* Below Products and Brands Section */
.cat-bdy-con1-rw {
    width: 100%;
    max-width: 75rem; /* 1200px / 16 = 75rem */
    margin: 9.375rem auto; /* 150px / 16 = 9.375rem */
    padding: 0 3.125rem; /* 50px / 16 = 3.125rem */
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.brand-name {
    font-size: 1rem; /* 16px / 16 = 1rem */
    font-weight: 500;
    color: #fff;
    padding-bottom: 0.625rem; /* 10px / 16 = 0.625rem */
}

.brand-title {
    font-size: 3.5rem; /* 56px / 16 = 3.5rem */
    font-weight: 500;
    color: #fff;
    line-height: 1.1;
    padding-bottom: 0.625rem;
}

.brand-sub {
    font-size: 1.375rem; /* 22px / 16 = 1.375rem */
    color: #fff;
    line-height: 1.5;
}

#br-cisco {
    background-image: url(https://networkdepot.online/store/images/banner/cisco-wallpaper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; /* Take full height of parent */
    display: flex;
    justify-content: center;
    align-items: center; /* Center content vertically */
    padding: 2.5rem 0; /* Add vertical padding */
}
#br-hp {
    background-image: url(https://networkdepot.online/store/images/banner/hp-wallpaper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; /* Take full height of parent */
    display: flex;
    justify-content: center;
    align-items: center; /* Center content vertically */
    padding: 2.5rem 0; /* Add vertical padding */
}
#br-dell {
    background-image: url(https://networkdepot.online/store/images/banner/dell-wallpaper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; /* Take full height of parent */
    display: flex;
    justify-content: center;
    align-items: center; /* Center content vertically */
    padding: 2.5rem 0; /* Add vertical padding */
}
#br-toshiba {
    background-image: url(https://networkdepot.online/store/images/banner/toshiba-wallpaper.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%; /* Take full height of parent */
    display: flex;
    justify-content: center;
    align-items: center; /* Center content vertically */
    padding: 2.5rem 0; /* Add vertical padding */
}
.text-center.mb-4 {
    color: #f8f8f8;
}
/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .header-top, .container-product-menu, .main-container,
    .product-container, .cat-hed-con, .br-hed-con {
        padding: 1rem; /* Adjust general padding */
        max-width: 100%; /* Ensure full width on smaller screens */
    }

    .banner-container {
        height: 18.75rem; /* 300px / 16 = 18.75rem - shorter banner */
    }

    .ban-con-in {
        padding: 0 1rem;
    }

    .body-container1 {
        height: auto; /* Allow height to adjust */
        flex-direction: column; /* Stack content vertically */
        text-align: center;
        padding: 1rem;
        max-width: 95%; /* Slightly smaller max-width */
    }

    .body-container1-row {
        width: 100%;
        text-align: center;
        padding-right: 0;
        font-size: 1.25rem; /* 20px / 16 = 1.25rem */
    }

    .product-grid {
        grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); /* Smaller min-width for product cards */
        gap: 1rem; /* Smaller gap */
    }

    .pro-dis-ar-arr {
        min-height: auto; /* Allow height to be dynamic */
        padding: 1rem;
    }

    .img-s-170 {
        width: 8.75rem; /* 140px / 16 = 8.75rem - smaller product image */
    }

    #pr-ch-sty-h4, #br-ch-sty-h4 {
        font-size: 1.25rem; /* 20px / 16 = 1.25rem */
        margin: 1rem 0;
    }

    .btn-pro-atc-ch-sty, .btn-br-atc-ch-sty {
        padding: 0.5rem 1.5rem; /* Smaller buttons */
        font-size: 0.9375rem; /* 15px / 16 = 0.9375rem */
    }

    .cat-hed-con, .br-hed-con {
        flex-direction: column; /* Stack image and text vertically */
        text-align: center;
        padding: 1rem;
    }

    .cat-hed-con-1, .cat-hed-con-2 {
        width: 100%; /* Full width for both columns when stacked */
        padding: 0.5rem;
    }

    .cat-hed-con-2 h1 {
        font-size: 2rem; /* 32px / 16 = 2rem */
        text-align: center;
    }

    .p-sty {
        font-size: 1rem; /* 16px / 16 = 1rem */
        text-align: center;
    }

    .br-dis-ar-arr {
        height: auto; /* Allow height to adjust */
        padding: 1rem;
    }

    .img-s-200 {
        width: 10rem; /* 160px / 16 = 10rem - smaller brand image */
    }

    .cat-bdy-con1-rw {
        margin: 3.125rem auto; /* 50px / 16 = 3.125rem */
        padding: 0 1rem;
    }

    .brand-title {
        font-size: 2.5rem; /* 40px / 16 = 2.5rem */
    }

    .brand-sub {
        font-size: 1.125rem; /* 18px / 16 = 1.125rem */
    }
}

@media (max-width: 480px) {
    .header-top, .container-product-menu, .main-container,
    .product-container, .cat-hed-con, .br-hed-con {
        padding: 0.75rem;
    }

    .banner-container {
        height: 15.625rem; /* 250px / 16 = 15.625rem - even shorter banner */
    }

    .body-container1 {
        height: auto;
        min-height: 9.375rem; /* 150px / 16 = 9.375rem */
    }

    .body-container1-row {
        font-size: 1rem; /* 16px / 16 = 1rem */
    }

    .product-grid {
        grid-template-columns: 1fr; /* Single column for very small screens */
        gap: 0.75rem;
    }

    .pro-dis-ar-arr {
        padding: 0.75rem;
    }

    .img-s-170 {
        width: 7.5rem; /* 120px / 16 = 7.5rem */
    }

    .cat-hed-con-2 h1 {
        font-size: 1.75rem; /* 28px / 16 = 1.75rem */
    }

    .p-sty {
        font-size: 0.9375rem; /* 15px / 16 = 0.9375rem */
    }

    .br-dis-ar-arr {
        max-width: 95%; /* Adjust max-width for very small screens */
        margin: 0.5rem auto; /* Center individual cards */
    }

    .img-s-200 {
        width: 8.75rem; /* 140px / 16 = 8.75rem */
    }

    .brand-title {
        font-size: 2rem; /* 32px / 16 = 2rem */
    }

    .brand-sub {
        font-size: 1rem; /* 16px / 16 = 1rem */
    }
}