body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f4f4f4; /* Optional background color */
        }


/*
    header {
      background: linear-gradient(to right, black, purple);
      margin: 0;
      background-color: #333;
      color: #fff;
      padding: 10px;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .left-section, .center-section, .right-section {
      width: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .center-section {
      width: 80%;
    }

    header img {
      width: 100px;
    }

    h1 {
      margin: 0; 
    }

*/



header {
  background: linear-gradient(to right, black, purple);
  margin: 0;
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; /* Allow wrapping on small screens */
}

.left-section, .center-section, .right-section {
  display: flex;
  align-items: center;
  justify-content: center;
}

.left-section, .right-section {
  width: 10%;
}

.center-section {
  width: 80%;
}

header img {
  width: 100px;
}

h1 {
  margin: 0;
  font-size: 1.5rem; /* Default size for desktop */
}

/* Responsive design */
@media (max-width: 768px) {
  .left-section, .right-section {
    width: 15%; /* Increase the size of the images slightly */
  }

  .center-section {
    width: 70%; /* Reduce center section width for better spacing */
  }

  h1 {
    font-size: 1.2rem; /* Adjust text size for smaller screens */
  }

  header img {
    width: 80px; /* Reduce image size */
  }
}

@media (max-width: 480px) {
  header {
    flex-direction: column; /* Stack elements vertically */
    padding: 20px 10px;
  }

  .left-section, .right-section {
    width: 100%;
    margin-bottom: 10px;
  }

  .center-section {
    width: 100%;
    text-align: center;
  }

  header img {
    width: 60px; /* Further reduce image size */
  }

  h1 {
    font-size: 1rem; /* Further reduce text size */
  }
}
    

    

/*
        header {
             background: linear-gradient(to right, black, purple);
      margin: 0;
            background-color: #333;
            color: #fff;
            padding: 10px;
            text-align: center;
        }

        header img {
            float: right;
        }


**/



            .slider-container {
     


  position: relative;
            max-width: calc(100% - 80px); /* 100% - 2 * body padding (40px on each side) */
            height: 400px; /* Set a fixed height for the container */
            margin: auto;
            overflow: hidden;
            border: 1px solid #ccc;

    }



 .main-container {
            display: grid;
             grid-template-columns: 1fr 2fr 1fr;
            gap: 20px;
        }

     .news-column,
        .events-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }


/* card design css */

         .events_vid {
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

/* &&&&&&&&&&&&
     slider css 
    &&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&*/

    .slider-container1 {
      position: relative;
      max-width: 800px;
      height: 400px; /* Set a fixed height for the container */
      margin: auto;
      overflow: hidden;
      border: 1px solid #ccc;
    }

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

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

    .slide1 img {
      width: 100%; /* Make sure all images have 100% width */
      height: 100%; /* Maintain aspect ratio */
      object-fit: cover; /* Handle different image aspect ratios */
    }

    .buttonclass {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: none;
      font-size: 20px;
      cursor: pointer;
    }

    #prevBtn {
      left: 10px;
    }

    #nextBtn {
      right: 10px;
    }

 
 /* &&&&&&&&&&&&
     End of slider 
         css 
    &&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&*/





   


    .marquee-container {
      height: 200px; /* Set a fixed height for the marquee container */
      overflow: hidden;
      position: relative;
    }

    .marquee-content {
      animation: scrollMarquee 25s linear infinite;
      display: flex;
      flex-direction: column;
      animation-play-state: running; /* Initial state is running */
    }

    .marquee-content:hover {
      animation-play-state: paused; /* Pause animation on hover */
    }

    .marquee-content p {
      margin: 0;
      display: flex;
      align-items: center;
    }

    .marquee-content img {
      margin-right: 10px;
    }

    @keyframes scrollMarquee {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }









* {
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Float four columns side by side */
.column1 {
  float: left;
  width: 25%;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row1 {margin: 0 -5px;}

/* Clear floats after the columns */
.row1:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive columns */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    display: block;
    margin-bottom: 20px;
  }
}

/* Style the counter cards */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  padding: 16px;
  text-align: center;
  background-color: #f1f1f1;
}



.outer-container {
  background-color: #e6e6fa; /* Light Purple background */
  padding: 20px;
  box-sizing: border-box;
}

.inner-container {
  max-width: 800px; /* Adjust as needed */
  margin: 0 auto;
}

.outer-container2 {
  background-color: #ffff; /* Light Purple background */
  padding: 20px;
  box-sizing: border-box;
}


.outer-container3 {
  background-color: black; /* Light Purple background */
  padding: 20px;
  box-sizing: border-box;
}











        .row1 {
            display: flex;
        }

        .column1 {
            flex: 25%;
            padding: 10px;
        }

        .card1 {
            border: 1px solid #ccc;
            border-radius: 8px;
            padding: 15px;
            text-align: center;
            cursor: pointer;
        }

        .video-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            justify-content: center;
            align-items: center;
        }

        .video-modal video {
            max-width: 80%;
            max-height: 80%;
        }


.imgstyle {
  border-radius: 50%;
}












            .marquee-container1 {
      height: 200px; /* Set a fixed height for the marquee container */
      overflow: hidden;
      position: relative;
    }

    .marquee-content1 {
      animation: scrollMarquee 40s linear infinite;
      display: flex;
      flex-direction: column;
      animation-play-state: running; /* Initial state is running */
    }

    .marquee-content1:hover {
      animation-play-state: paused; /* Pause animation on hover */
    }

    .marquee-content1 p {
      margin: 10px;
      padding: 15px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      display: flex;
      align-items: center;
    }

    .marquee-content1 img {
      margin-right: 10px;
      border-radius: 50%; /* Make the image circular if needed */
    }

    @keyframes scrollMarquee {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }


















        /* Add your custom styles here */
        .testimonial-container {
            max-width: 600px;
            margin: auto;
            padding: 20px;
        }
        
        .carousel-item img {
            width: 150px; /* Fixed width */
            height: 150px; /* Fixed height */
            object-fit: cover;
            border-radius: 50%; /* Rounded border */
            display: block;
            margin: auto; /* Center the image */
        }


 /* Footer styles */
        .footer {
             background: linear-gradient(to right,purple,black);
          
            color: #ffffff;
            padding: 20px 0;
            text-align: center;
        }

        .footer-logo {
            font-size: 24px;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 20px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
            margin-bottom: 20px;
        }

        .footer-links li {
            display: inline-block;
            margin-right: 15px;
        }

        .footer-links a {
            color: #ffffff;
            text-decoration: none;
        }



/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/
/* the below style is for services sectino of home page which is in shodhna_new_web home.php*/


.outer-container9 {
  background-color: #f9f9f9; /* Light background */
  padding: 40px 20px;
  box-sizing: border-box;
}

.outer-container9 h3 {
  text-align: center;
  color: #333;
  font-family: 'Arial', sans-serif;
  font-size: 24px;
  margin-bottom: 20px;
}

.row9 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.column9 {
  flex: 1 1 200px;
  max-width: 250px;
  margin: 10px;
}

.card9 {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: white;
}

.card9:hover {
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.card9 img {
  width: 100px; /* Adjust image size for a balanced look */
  height: auto;
  margin-bottom: 15px;
}

.card9 p {
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  color: #333;
}

@media (max-width: 768px) {
  .column9 {
    flex: 1 1 45%; /* Two columns for medium screens */
  }
}

@media (max-width: 576px) {
  .column9 {
    flex: 1 1 100%; /* Single column for small screens */
  }
}


/* end */
/* end */
/* end */
/* end */
/* end */
/* end */
/* end */



.outer-container10 {
    padding: 20px;
    background-color: #e6e6fa;
    text-align: center;
}

h3 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    margin-bottom: 20px;
}

.row10 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adjust for larger screens */
    gap: 20px; /* Adds space between columns */
}

.column10 {
    flex: 1 1 340px; /* Ensures each column is equal in width */
    max-width: 340px;
}

.card10 {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-align: center;
}

.card10:hover {
    transform: scale(1.05);
}

/* Standardize image sizes */
.card10 img {
    width: 340px;
    height: 180px;
    object-fit: cover; /* Ensures images are cropped to fit without distortion */
    border-radius: 8px;
}

.card10 p {
    font-size: 16px;
    font-family: Arial, sans-serif;
    color: #333;
    margin-top: 10px;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
    .row10 {
        justify-content: center; /* Ensures items are centered on smaller screens */
    }
    .column10 {
        flex: 1 1 100%; /* Full width on smaller screens */
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    h3 {
        font-size: 18px;
    }

    .card10 p {
        font-size: 14px;
    }
}








/* Ensure the image fully covers the slider card */
.slider-container1 img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the entire container */
    border-radius: 10px; /* Optional: to give it rounded corners */
}

/* Optional: If you want to make sure the slider container has a fixed height */
.slider-container1 {
    position: relative;
    overflow: hidden;
    height: 400px; /* You can adjust the height based on your design */
}

/* Adjusting slider buttons to remain in position */
.buttonclass {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

#prevBtn {
    left: 10px;
}

#nextBtn {
    right: 10px;
}



/* General Styling */
.main-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
}

.news-column, .slider-container1, .events-column {
    flex: 1 1 30%; /* Columns take up about 30% of the width */
    padding: 5px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
}

/* For slider buttons */
.buttonclass {
    background-color: #333;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 18px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

#prevBtn {
    left: 10px;
}

#nextBtn {
    right: 10px;
}

.slider-container1 {
    position: relative;
    overflow: hidden;
}

/* Styling for the marquee containers */
.marquee-container, .marquee-container1 {
    overflow: hidden;
    height: 200px;
}

.marquee-content, .marquee-content1 {
    animation: scroll 10s linear infinite;
    display: flex;
    flex-direction: column;
}




@keyframes scroll {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(-100%);
    }
}

.marquee-content p, .marquee-content1 p {
    margin: 5px 0;
    font-size: 14px;
}

/* Responsive Design */

/* Tablet view */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }

    .news-column, .slider-container1, .events-column {
        flex: 1 1 100%; /* Columns will stack on top of each other */
        max-width: 100%;
    }

    .buttonclass {
        font-size: 16px; /* Adjust button size for smaller screens */
    }
}

/* Mobile view */
@media (max-width: 480px) {
    h2 {
        font-size: 18px;
    }

    .marquee-content p, .marquee-content1 p {
        font-size: 12px;
    }

    .buttonclass {
        padding: 8px; /* Smaller button padding on mobile */
    }

    img {
        width: 40px; /* Reduce image size for mobile */
    }
}