/*================================E-shop catogories=======================================================*/



/*================================Service catogories=======================================================*/

/* Prevent background horizontal scrolling */
body {
    overflow-x: hidden;
}

/* Style for the outer container */
.outer-container1 {
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    white-space: nowrap;
}

/* Style for the scroll container */
.scroll-container1 {
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
    color: #000000; /* Changed from text-color to color */
    animation: scroll 10s linear infinite, rotate 25s linear infinite;
    padding: 5px;
    box-sizing: border-box;
}

/* Style for individual category items */
.scroll-category-item1 {
    display: inline-block;
    margin: 5px;
    border: 1px solid #000000;
    padding: 10px;
    max-width: 180px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #ffffff;
    text-align: center;
}

/* Style for category images */
.scroll-category-image1 {
    width: 150px;
    height: 175px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
}

/* Hide the scrollbar */
.outer-container1::-webkit-scrollbar {
    width: 0.1em;
    background-color: transparent;
}

/* Optional: Customize the scrollbar track (the area behind the scrollbar) */
.outer-container1::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Optional: Customize the scrollbar thumb (the draggable part of the scrollbar) */
.outer-container1::-webkit-scrollbar-thumb {
    background-color: transparent;
}



/*================================bixCom intrests=======================================================*/



/* Prevent background horizontal scrolling */
body {
    overflow-x: hidden;
}

/* Style for the outer container */
.outer-container2 {
    overflow-x: auto; /* Enable horizontal scrolling if needed */
    white-space: nowrap;
}

/* Style for the scroll container */
.scroll-container2 {
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
	caret-color: #000000;
    animation: scroll2 10s linear infinite, rotate2 25s linear infinite;
    padding: 5px;
    box-sizing: border-box;
}

/* Style for individual category items */
.scroll-category-item2 {
    display: inline-block;
    margin: 5px;
    border: 1px solid #000000;
    padding: 10px;
    max-width: 180px;
    box-sizing: border-box;
    border-radius: 20px;
    background-color: #ffffff;
    text-align: center;
}

/* Style for category images */
.scroll-category-image2 {
    width: 150px;
    height: 175px;
    max-width: 100%;
    max-height: 100%;
    border-radius: 20px;
}

/* Hide the scrollbar */
.outer-container2::-webkit-scrollbar {
    width: 0.1em;
    background-color: transparent;
}

/* Optional: Customize the scrollbar track (the area behind the scrollbar) */
.outer-container2::-webkit-scrollbar-track {
    background-color: transparent;
}

/* Optional: Customize the scrollbar thumb (the draggable part of the scrollbar) */
.outer-container2::-webkit-scrollbar-thumb {
    background-color: transparent;
}







/*==================================border=====================================================*/

.icontainer {
    width: 90%; /* Adjust the container width as needed */
    max-width: 1200px; /* Maximum width for desktop screens */
    margin: 0 auto;
    padding: 5px;
    box-shadow: 0px 0px 2px rgba(128, 128, 128, 0.5); /* Gray shadow */
    background-color: #FFFfff; /* Light gray background color */
}

/* Media query for mobile responsiveness */
@media (max-width: 768px) {
    .icontainer {
        width: 95%; /* Adjust the container width as needed for smaller screens */
        padding: 2.5px; /* Adjust mobile padding as needed */
        box-shadow: 0px 0px 5px rgba(50, 50, 50, 0.5); /* Gray shadow for mobile */
    }
}

		
		
/*==================================Slider=====================================================*/
  
    .slider-container {
      position: relative;
      max-width: 1000px;
      margin: auto;
      overflow: hidden;
    }

    .slider {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slider img {
      width: 100%;
      height: auto;
    }

    .slide {
      min-width: 100%;
      box-sizing: border-box;
    }

    /* Navigation buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* Hover effect on navigation buttons */
    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
	
	/*==================================team-members=====================================================*/

    .team-members {
        text-align: center;
        border-radius: 10px;
        background-color: white;
        box-shadow: 0px 10px 30px 0px rgba(212, 150, 255, 0.2);
        border: 1px solid #eee;
        padding: 40px; /* Added padding to provide equal gaps */
    }

    .single-member {
        text-align: center;
        margin-bottom: 30px; /* Adjusted margin for equal gaps */
        width: 100%; /* Make each member take full width on mobile */
        max-width: 2500px; /* Set a max-width for larger screens */
        margin: 10px auto; /* Center the members */
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 20px;
        overflow: hidden;
        transition: transform 0.3s ease-in-out;
    }

    .single-member:hover {
        transform: scale(1.05);
    }

    .avatar img {
        width: 170px;
        height: 170px;
        border-radius: 50%;
        border: 5px solid #DC3434;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        margin: 25px auto 0;
        display: block;
    }

    .details {
        padding: 10px;
    }

    .details h4 {
        font-size: 20px;
        margin-bottom: 5px;
        color: #3B3B3B;
    }

.details h7 {
    color: #DC3434;
    font-size: 15px;
    margin-bottom: 10px;
    font-weight: bold; /* Added to make the text bold */
}

    .social-links a {
        display: inline-block;
        margin: 0 10px;
        color: #007bff;
        font-size: 20px;
        transition: color 0.3s ease-in-out;
    }

    .social-links a:hover {
        color: #007bff;
    }

    /* Media Query for Mobile Responsiveness */
    @media (max-width: 768px) {
        .single-member {
            max-width: none; /* Remove max-width on smaller screens */
        }
    }
	
	
	.common-image {
    width: 230px; /* Set your desired width */
    height: 219px; /* Set your desired height */
	
}

	/*==================================Scroll animation=====================================================*/


    body {
        margin: 0;
        padding: 0;
        font-family: 'Arial', sans-serif;
        overflow-x: hidden;
      }
      
      .section {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f0f0f0;
      }
      
      .parallax {
        height: 100vh;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 2em;
        text-align: center;
      }
      
      .parallax-content {
        background-color: rgba(0, 0, 0, 0.5);
        padding: 20px;
        border-radius: 10px;
      }
      
      /* Add more styles as needed */




      
      
      /* Add the following styles for the animation effect */
.section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s, transform 1s;
  }
  
  .section.active {
    opacity: 1;
    transform: translateY(0);
  }
  



  	/*==================================Our product CSS in =====================================================*/

/* Our product CSS in Home*/
.containerp {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    background-color: #ffffff; /* White background */
}

.menup {
    display: flex;
    margin: 5px;
    justify-content: space-around;
    background-color: #f8f8f8;
    padding: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Allow menu items to wrap on small screens */
}

.menup div {
    cursor: pointer;
    padding: 5px; /* Reduced padding for closer spacing */
    padding: 3px 30px;
    font-weight: bold;
    font-size: 15px;
    color: #888888;
    border: 2px solid #646464; /* Initial border state */
    border-radius: 25px; /* Circular border with slight rounding for better appearance */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for background and color */
    text-align: center; /* Center the text */
    background-color: #fff; /* White background */
}

.menup .active {
    border: 2px solid transparent; /* Remove border to focus on background */
    background: linear-gradient(to right, #e52d3c, #ff3131); /* Gradient background */
    color: #fff; /* White text color */
}

.contentp {
    display: none;
}

.contentp.active {
    display: block;
}

/* Media Query for Mobile Devices */
@media (max-width: 768px) {
    .containerp {
        padding: 10px;
    }

    .menup {
        padding: 10px;
        flex-direction: column;
        align-items: center;
    }

    .menup div {
        padding: 5px 15px;
        font-size: 14px;
        margin: 5px 0;
    }
}

/* Media Query for Smaller Mobile Devices */
@media (max-width: 480px) {
    .containerp {
        padding: 5px;
    }

    .menup {
        padding: 5px;
    }

    .menup div {
        padding: 3px 125px;
        font-size: 13px;
    }
    
    .menup-item {
        padding: 3px 30px;
        font-size: 13px;
    }
    
}