/* For small screens (mobile and tablet) */
@media (max-width: 768px) {
    .menu-area-main {
        flex-direction: column; /* Stack menu items vertically */
        align-items: center; /* Center align the items */
    }

    .menu-area-main li {
        margin-right: 10px; /* Remove margin between items */
        margin-bottom: 10px; /* Add space between stacked items */
    }

    .menu-area-main li a {
        margin-top: 20px; /* Adjust margin top for better vertical spacing */
        margin-left: -60px; /* Reset left margin */
        margin-bottom: 20px; /* Adjust margin bottom */
        font-size: 18px; /* Reduce font size on smaller screens */
        padding: 12px 20px; /* Increase padding for better clickability */
        font-weight: 700;
    }
}

/* For extra small screens (mobile portrait) */
@media (max-width: 480px) {
    .menu-area-main li a {
        font-size: 28px; /* Further reduce font size for very small screens */
        padding: 10px 15px; /* Adjust padding for smaller screens */
        color:  rgb(37, 74, 119);
    }
}

/* For larger screens (tablet and up) */
@media (min-width: 769px) {
    .menu-area-main {
        flex-direction: row; /* Keep items in a row */
        justify-content: flex-start; /* Align items to the left */
    }

    .menu-area-main li {
        margin-right: 30px; /* Keep right margin for spacing */
    }

    .menu-area-main li a {
        margin-top: 10px; /* Maintain previous top margin for larger screens */
        margin-left: 50px; /* Keep previous left margin */
        margin-bottom: 20px;
        margin
    }
}


 /*---------logo section----*/
/* Center the logo for mobile and tablet screens */
@media ( max-width: 1024px ) {
    .logo_section .logo {
        display: flex;
        justify-content:center; /* Center horizontally */
        
    }

    .logo_section .logo img {
        max-width: 500px;   /* Adjust logo size for tablets */
        height: auto;       /* Maintain aspect ratio */
    }
}

/* For small screens (Mobile devices) */
@media (max-width: 768px) {
    .logo_section .logo {
        display: flex;
        justify-content: center; /* Center horizontally */
        align-items: center;     /* Center vertically */
        text-align: center;      /* Center text */
    }

    .logo_section .logo img {
        max-width: 400px;  /* Reduce logo size for smaller screens */
        height: auto;      /* Maintain aspect ratio */
    }
}

/*----------contact Responsive --------------*/


/* Responsive Design */
@media (max-width: 768px) {
    .contact-info {
        display: flex; /* Use flexbox for alignment */
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center items horizontally */
        gap: 10px; /* Add space between items */
        text-align: center; /* Center-align the text */
    }

    .contact-info li {
        font-size: 16px; /* Slightly smaller text on small screens */
        list-style: none; /* Remove default list styling */
        margin: 5px 0; /* Add vertical spacing */
    }
}
/*------- end of contact -----*/

/* Responsive Styles */

/* Tablets */
@media (max-width: 1024px) {
    .slider-subheading {
        font-size: 1.75rem;
    }

    .carousel-caption p {
        font-size: 1.1rem;
    }
}

/* Mobile Landscape and Smaller Tablets */
@media (max-width: 768px) {
    .carousel-item {
        height: 60vh; /* Reduce height of the video on smaller screens */
    }

    .first-slide {
        object-fit: contain; /* Ensure the entire video is visible */
    }

    .carousel-caption {
        padding: 0 15px; /* Less padding */
    }

    .slider-subheading {
        font-size: 1.5rem; /* Reduce font size for the subheading */
    }

    .carousel-caption p {
        font-size: 1rem; /* Reduce font size for the paragraph */
    }
}

/* Mobile Landscape (Up to 768px) */
@media (max-width: 768px) {
    .carousel-item {
        height: 60vh;  /* Reduce video height for mobile landscape */
    }

    .first-slide {
        object-fit: contain; /* Ensure the video is contained within the container */
    }

    .carousel-caption {
        padding: 0 15px; /* Reduce padding on smaller screens */
    }

    .slider-subheading {
        font-size: 1.75rem;  /* Reduce font size for subheading */
    }

    .carousel-caption p {
        font-size: 1rem;  /* Reduce font size for paragraph */
        line-height: 1.4;
    }
}

/* Mobile Portrait (Up to 480px) */
@media (max-width: 480px) {
    .carousel-item {
        height: 50vh;  /* Further reduce video height on small screens */
    }

    .slider-subheading {
        font-size: 1.5rem; /* Reduce font size for mobile portrait */
    }

    .carousel-caption p {
        font-size: 0.95rem;  /* Further reduce paragraph font size */
        line-height: 1.3;
        padding: 0 10px;
    }
}




 /* Media Queries for Responsiveness */
 @media (max-width: 768px) {
    .top-header .container {
        flex-direction: column;
        text-align: center;
    }

    .navbar .container {
        flex-direction: column;
        text-align: center;
    }

    .main-menu ul {
        flex-direction: column;
        align-items: center;
    }

    .main-menu ul li {
        margin: 10px 0;
    }

    .about .container {
        flex-direction: column;
    }

    .categories-grid {
        flex-direction: column;
        align-items: center;
    }

    .category-card {
        width: 80%;
        margin: 20px 0;
    }
}
 /* Mobile-Friendly Adjustments */
@media (max-width: 768px) {
    .office-header {
        font-size: 16px;
    }

    .office-body {
        font-size: 14px;
    }
}
 
/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .raw-materials-info {
        padding: 20px 10px;
    }

    .raw-materials-info h2 {
        font-size: 2rem;       /* Slightly smaller heading on small screens */
    }

    .raw-materials-info .lead {
        font-size: 1.1rem;     /* Scaled lead font size for smaller devices */
    }

    .raw-materials-info p {
        font-size: 0.95rem;    /* Adjusted paragraph font size */
    }
}

@media (max-width: 767px) {
    .raw-materials-list {
        padding: 30px;
    }
    
    .raw-materials-list h2 {
        font-size: 30px;
    }

    .raw-materials-column {
        font-size: 16px;
    }
}
 /* Responsive Design */
 @media (max-width: 768px) {
    .styled-list li {
        padding-left: 30px;
        font-size: 16px;
    }

    .section-title {
        font-size: 24px;
    }
}


/* Responsive: Adjust layout for smaller screens */
@media (max-width: 768px) {
    .category-item {
        width: 150px;
    }
}
 /* Responsive Design */
 @media (max-width: 768px) {
    .styled-list li {
        padding-left: 30px;
        font-size: 16px;
    }

    .section-title {
        font-size: 24px;
    }
}
/*-----------categories container ---*/
/* Responsive Design */

/* For Mobile Landscape (Max Width: 768px) */
@media (max-width: 768px) {
    .categories-grid {
        justify-content: center;
    }

    .category-card {
        width: 70%; /* Make cards take up almost half the width */
        height: 100px;
    }

    .section-title {
        font-size: 1.8rem; /* Adjust section title size for mobile landscape */
    }
}

/* For Mobile Portrait (Max Width: 480px) */
@media (max-width: 480px) {
    .categories-grid {
        flex-direction: column; /* Stack the cards vertically */
        align-items: center; /* Center the cards horizontally */
    }

    .category-card {
        width: 80%; /* Cards take up most of the screen width */
        height: 180px;
        margin-bottom: 50px; /* Space between stacked cards */
        margin-left: 45px;
    }

    .section-title {
        font-size: 1.5rem; /* Adjust section title size for smaller screens */
    }
}








@media (min-width: 768px) {
    .brand-bg .row {
        display: flex;
        justify-content: center; /* Center-align logos horizontally */
        flex-wrap: wrap;
    }
    .brand_box {
        margin: 10px; /* Space between brand cards */
    }
}

/* Responsive Adjustments */
@media (max-width: 576px) {
    .clients .titlepage h2 {
        font-size: 28px;
    }
    .brand_box {
        height: 120px;
    }
}

 
/* Media Queries for Responsiveness */

/* Medium screens (tablets and small screens) */
@media (max-width: 768px) {
    footer {
        padding: 30px 10px;  /* Reduce padding for smaller screens */
    }

    .footer-content {
        flex-direction: column;  /* Stack items vertically */
        align-items: center;     /* Center align items */
        text-align: center;      /* Ensure all text is centered */
    }

    .footer-item {
        font-size: 16px;  /* Increase font size for better readability */
        margin-bottom: 20px;  /* Add space between items */
        text-align: center;  /* Ensure text is centered */
    }

    .footer-item i {
        font-size: 22px;  /* Larger icons on smaller screens */
    }

    .footer-bottom {
        font-size: 12px;
    }
}

/* Small screens (smartphones and mobile portrait) */
@media (max-width: 480px) {
    footer {
        padding: 20px 10px;  /* More compact padding for very small screens */
        
    }

    .footer-content {
        padding: 0 10px;  /* Add some padding for better spacing on mobile */
    }

    .footer-item {
        font-size: 14px;  /* Smaller font for very small screens */
        margin-bottom: 10px;  /* Reduce space between items */
    }

    .footer-item i {
        font-size: 20px;  /* Slightly smaller icons for small screens */
    }

    .footer-bottom {
        font-size: 10px;  /* Smaller copyright text */
    }
}

/* For Better Alignment on Mobile: Align Address, Phone, Email Properly */
@media (max-width: 768px) {
    .footer-item {
        flex-direction: column;  /* Stack the icon and text vertically */
        align-items: center;  /* Center align the items (icon and text) */
        justify-content: center;
    }

    .footer-item i {
        margin-right: 0;  /* Remove the right margin for icons */
        margin-bottom: 10px;  /* Add space between the icon and text */
    }

    .footer-content {
        margin-top: 20px;
    }

    /* Ensure the copyright is centered */
    .footer-bottom {
        text-align: center;
        font-size: 14px;
    }
}


/*---------- product page-------*/

/* Responsive Design */

/* For Tablets and smaller screens (Max Width: 1024px) */
@media (max-width: 1024px) {
    .category-item {
        width: 45%; /* Reduce card width for tablets */
        height: 180px; /* Adjust height for better fit */
        margin-bottom: 30px; /* Ensure space between cards on tablets */
    }

    .section-title {
        font-size: 2rem; /* Adjust section title size for tablets */
    }
}

/* For Mobile Landscape (Max Width: 768px) */
@media (max-width: 768px) {
    .category-item {
        width: 48%; /* Cards take up almost half the width */
        height: 200px;
        margin-bottom: 30px; /* Add space between cards on mobile landscape */
    }

    .section-title {
        font-size: 1.8rem; /* Adjust section title size for mobile landscape */
    }
}

/* For Mobile Portrait (Max Width: 480px) */
@media (max-width: 480px) {
    .categories-grid {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: center; /* Center items horizontally */
        margin-right: 50px;
    }

    .category-item {
        width: 80%; /* Cards take up most of the screen width */
        margin-bottom: 20px; /* Add space between stacked cards */
        height: 380px; /* Adjust height for small screens */
     
    }

    .section-title {
        font-size: 1.5rem; /* Adjust section title size for smaller screens */
    }
}