.responsive-heading {
    text-align: center; /* Center text horizontally */
    color: #0e428a;
    font-size:1.2rem; /* Responsive font size based on viewport width */
    font-weight: bold;
    line-height: 1.8em;
    font-family: Tahoma, Geneva, sans-serif;
    text-decoration: none; /* Remove underline from all text except the contact info */
}

/* Media Query for larger screens (max-width: 1200px) */
@media (max-width: 1200px) {
    .responsive-heading {
        font-size:1.2rem; /* Adjust font size for larger tablets or small desktops */
    }
}

/* Media Query for smaller screens (max-width: 768px) */
@media (max-width: 768px) {
    .responsive-heading {
        font-size:1.2rem; /* Larger font size for tablets and smaller devices */
    }
}

/* Media Query for extra small screens (max-width: 480px) */
@media screen and (max-width: 480px) {
    .responsive-heading {
        font-size:1.2rem; /* Larger font size for small screens */
    }
}

.maincontainer2 {
    display: flex;
    max-width: 100%;
    justify-content: flex-start; /* Fix 'none' to 'flex-start' */
    flex-direction: row;
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 120px; /* Corrected to 'gap' for Flexbox */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.isocertificate1 {
    display: flex;
    margin-left: 50px;
    max-width: 35%;
}

.img-companyprofile1 {
    display: flex;
    max-width: 50%;
    padding-top: 60px;
    margin-right: 50px;
    overflow: hidden; /* Prevent overflow */
}

.img-companyprofile1 a {
    transition: 0.3s ease;
    display: block;
    overflow: hidden; /* Prevent overflow from link element */
}

.img-companyprofile1 a:hover {
    transform: scale(1.1); /* Scale effect */
}

@media (max-width: 1200px) {
    .maincontainer2 {
        gap: 90px; /* Adjust gap for medium screens */
    }
    .img-companyprofile1 {
        max-width: 50%;
        padding-top: 100px;
        margin-right: 50px;
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .maincontainer2 {
        flex-direction: column;
        justify-content: center;
        gap: 15px; /* Reduce gap */
    }
    .isocertificate1 {
        max-width:80%;
        padding-left:50px;
    }
    .img-companyprofile1 {
        max-width: 95%;
        padding-top: 36px;
        padding-left:60px;
        margin-right: 0;
    }
}

@media screen and (max-width: 480px) {
    .maincontainer2 {
        gap: 10px; /* Reduced gap for even smaller screens */
    }
    .isocertificate1 {
        max-width:80%;
        margin-left:25px;
        margin-right: -10px;
    }
    .img-companyprofile1 {
        max-width:85%;
        padding-top: 20px;
        margin-left: 11px;
        margin-right: 40px;
    }
}
@media screen and (max-width: 480px) {
    .maincontainer2 {
        gap: 10px; /* Reduced gap for even smaller screens */
    }
    .isocertificate1 {
        max-width:80%;
        margin-left:15px;
        margin-right: -10px;
    }
    .img-companyprofile1 {
        max-width:85%;
        padding-top: 20px;
        margin-left: 5px;
        margin-right: 40px;
    }
}

html, body {
    overflow-x: hidden;  /* Prevent horizontal scrollbars globally */
}
/* Modernized overstock nav badge */
.overstock-item {
    position: relative;
}

.new-badge,
.om-nav-badge {
    position: static;
    display: inline-block;
    background: #e2231a;
    color: #ffffff;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 10px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.2;
}

/* Blinking effect for the "New" label */
@keyframes blink {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0;
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


/* Container for the animated text */
.marquee-container {
    width: 30%;                /* Default: 50% width */
    overflow: hidden;          /* Hide text that overflows */
    position: relative;        /* Position relative for positioning children */
    margin:10px auto;     /* Center the container horizontally */
}

/* The actual animated text */
.marquee-text {
    display: inline-block;     /* Display inline to prevent wrapping */
    white-space: nowrap;       /* Prevent text from wrapping */
    animation: marquee 7s linear infinite; /* Scroll the text */
    margin-top:0px;
    margin-bottom:0px;
    font-weight:bold;
    color:red;
    font-size:20px;

}

/* Define the scrolling animation */
@keyframes marquee {
    0% {
        transform: translateX(100%);  /* Start position: off-screen to the right */
    }
    100% {
        transform: translateX(-100%); /* End position: off-screen to the left */
    }
}



.carousel-container {

    position: relative;
    width: 100%; /* Full width of the container */
    max-width: 100%; /* Ensure the width is responsive */
    overflow: hidden;
  
}

/* Style for the carousel slide */
.carousel-slide {
    display: flex;
    transition: transform 0.5s ease;
    position:relative;
    width:100%;
    height:auto;
}

/* Style for the images inside the carousel */
.carousel-slide img {
    width: 100%; /* Make the images scale with the container */
    cursor:pointer;

}
.carousel-slide a img {
    position: relative; /* Make sure the image does not disrupt the layout */
}

/* Style for the radio label buttons */
.radio-label {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ccc;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

/* Active label (selected image) */
.radio-label.active {
    background-color: #007bff; /* Change to a color you like */
}


.product-box {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 10px;
    text-align: center;
    width: 100%; /* Ensure box width adjusts */
    height:490px;
    max-width: 300px; /* Maximum width to avoid overflow */
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
}
.product-box img {
    max-width: 100%; /* Make the image responsive */
    height: auto; /* Keep the aspect ratio intact */
    object-fit: contain ; /* Ensure the image scales without distorting */
    margin-bottom: 15px; /* Add space between the image and text */
}
.product-box h5 {
    margin-top: 10px;
    font-size: 16px;
}
.product-box p {
    font-size: 12px;
    margin-top: 5px;
    color: #777;
    line-height:20px;
    margin-bottom:-5px;

}
/* Center the search box and filter controls */
.search-filter-container {

    margin-top: 60px; /* Adding space between the heading and search box */
    text-align: center; /* Center align */
}
.search-filter-container input,
.search-filter-container select {
    display: inline-block;
    margin: 30px;
    width:300px; /* Make input box and select dropdown wider */
   

}

/* Ensures the product boxes are centered */
#productList {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center-align the product boxes */
    margin-top: 20px;

}

.product-box {
    flex: 1 1 150px; /* Flex-grow, flex-shrink, and basis for the box size */
    max-width: 250px; /* Set max width for the product box */
    margin: 10px; /* Space between product boxes */

}
.carousel-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin-left:0px;
    margin-right: 0px;
    overflow: hidden;

}

.carousel-slide {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-slide img {
    width: 100%;
    height: 290px;
    display: block;
}
@media (max-width: 1000px) {
    .new-badge {
        right: 58px;  /* On medium screens, take up 80% of the width */
    }
}

/* Make the container more responsive on smaller screens */
@media (max-width: 768px) {
    .new-badge {
        right: 58px;  /* On medium screens, take up 80% of the width */
    }
}

@media (max-width: 480px) {
    .new-badge {
        right: 58px;    /* On small screens, take up full width */
    }
}
@media (max-width: 300px) {
    .new-badge {
        right: 58px;    /* On small screens, take up full width */
    }
}
@media (max-width: 1200px) {
    .marquee-container {
        width: 40%;    /* On medium screens, take up 80% of the width */
    }
}
@media (max-width: 1000px) {
    .marquee-container {
        width: 50%;    /* On medium screens, take up 80% of the width */
    }
}

/* Make the container more responsive on smaller screens */
@media (max-width: 768px) {
    .marquee-container {
        width: 80%;    /* On medium screens, take up 80% of the width */
    }
}

@media (max-width: 480px) {
    .marquee-container {
        width: 100%;   /* On small screens, take up full width */
    }
}

@media (max-width: 480px) {
    .search-filter-container input,
    .search-filter-container select {
        display: inline-block;
        margin: 30px;
        width: 300px; /* Make input box and select dropdown wider */
        margin-right:

    }
}
.lazy-load {
    display: none;
    visibility: hidden;
}

.lazy-load.loaded {
    display: block;
    visibility: visible;
}

.loading-spinner {
    position: absolute;
    top: 30%;
    left: 35%;
    transform: translate(-50%, -50%);
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 1s linear infinite;
    display: block;
}

.loaded .loading-spinner {
    display: none;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
.tablehead{
    text-align:center;
    background-color:#EDF9EB;
}
.tabledata1{
    text-align:center;
    background-color:#DFFAFF;
}
.tabledata2{
    text-align:center;
    background-color:#EBE8FC;
}
.maintab{
    width:100%;
    color:black;
    margin-left:4%;
  cell-padding:0px;

}
@media (max-width: 1024px) {
    .maintab {
        width: 95%;    /* On medium screens, take up 80% of the width */
        font-size:95%;
        height:100px;
    }
}
    @media (max-width: 853px) {
        .maintab {
            width: 95%;    /* On medium screens, take up 80% of the width */
        }
    }


@media (max-width: 586px) {
    .maintab {
        width: 80%;    /* On medium screens, take up 80% of the width */
    }
}

@media (max-width: 498px) {
    .maintab {
        width: 92%;  /* On small screens, take up full width */
        height:10px;
        padding:2px;
        font-size:65%;
    }
}
@media (max-width: 344px) {
    .maintab {
        width: 10%;  /* On small screens, take up full width */
        padding:-10px;
        font-size:60%;

    }