<!DOCTYPE html>
<meta name="viewport" content="width=device-width" />
<html>
<head>
  <style>
  .rounded-image {
      border-radius: 10px;
      border: 5px solid #0000FF;
      padding: 0px;
	 box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 0 15px rgba(0, 0, 0, 0.1);
    }
    .slider-container {
      position: relative;
      width: 350px; /* Adjust the width as per your requirement */
      height: 400px; /* Adjust the height as per your requirement */
      overflow: hidden;
	  border-radius: 60px; 
      box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1);*/
	  content="width=device-width"
    }

    .slider {
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slider img {
      width: 100%;
      height: 100%;
   /*   object-fit: contain; */
		object-fit: cover;
    }

    .slider-button {
		position: absolute;
	  bottom: 5%;
      transform: translateY(-50%);
      padding: 5px;
      background-color: #FFFFFF;
      color: #000;
      border: none;
      cursor: pointer;
    }

    .slider-button.previous {
      left: 7px;
    }

    .slider-button.next {
      right: 7px;
    }
	.slider-container .slider-caption {
      /* position: absolute;
   	  top: 60%;
		bottom: 100%
      right: 100%;
      transform: translate(-50%, -50%);*/
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
	  font-size: 3; 
    /*  padding: 2px; 
      width: 100%;
	  */
    }
  </style>
</head>
<body>
  <div class="slider-container">
 	<div class="slider-caption">
  <!--    <h2><center>ICAR DMAPR</center></h2>-->
      <p align="center"><strong>Recent News</strong></p>
    
	<div class="slider">
     <!-- <img src="https://dmapr.icar.gov.in\newsevent\a1.jpg" alt="Image 1">
      <img src="https://dmapr.icar.gov.in\newsevent\a2.jpg" alt="Image 2">
      <img src="https://dmapr.icar.gov.in\newsevent\a3.jpg" alt="Image 3">
       <img src="https://dmapr.icar.gov.in\newsevent\a4.jpg" alt="Image 4">
	   <img src="https://dmapr.icar.gov.in\newsevent\a5.jpg" alt="Image 5">
	    <img src="https://dmapr.icar.gov.in\newsevent\a6.jpg" alt="Image 6">-->

	
	<marquee  direction="Up" onmouseover="document.all.test.stop()" onmouseout="document.all.test.start()" scrolldelay="80" scrollamount="2" loop="loop" ><br><p class="text" align="center"><strong><font size="3" color="#0000FF">
	</p>

		<a href="media/video.html">
       
  <div class="content">
    <p style="font-family: cursive; text-align: center;">
	<!--<a href="dmapr/index53a3.html?q=en/content/gallery#overlay-context=en%3Fq%3Den" target="_blank">  </a>-->
 </div>

		<P align="center"><FONT SIZE="4" COLOR="#009900">Thought of the Day <br><br>इंतजार मत करो, जितना तुम सोचते हो जिंदगी उससे कहीं तेजी से निकल रही है।<br><br>Don’t Wait, Life Is Going Faster Than You Think.</FONT></p><br>
		<p align="center"><a href="https://dmapr.icar.gov.in/media/Vacancy.html" target="_blank"> Vacancy notification </a></p><br>
		<p align="center"><a href="https://dmapr.icar.gov.in/media/news.html" target="_blank"> Recent News</a></P><br>
		<p align="center"><a href="https://dmapr.icar.gov.in/media/Vacancy.html" target="_blank"> Tender</a></P><br>
		<p align="center"><a href="https://dmapr.icar.gov.in/media/training.html" target="_blank"> Training</a></P><br>
		<p align="center"><a href="https://dmapr.icar.gov.in/media/Vacancy.html" target="_blank"> Notifications</strong></a></p>
		<p align="center"><img src="https://dmapr.icar.gov.in/media/Hindi message pic.jpg" width="30" height="30"></strong></p>
</marquee>
	
	  <!-- Add more images as needed -->
    </div>
	 
    <!--<button class="slider-button previous" onclick="previousSlide()">Previous</button>
    <button class="slider-button next" onclick="nextSlide()">Next</button>-->
	</div>
  </div>

  <script>
    let slideIndex = 0;
    const slides = document.querySelectorAll('.slider img');

    function showSlide(index) {
      if (index < 0) {
        slideIndex = slides.length - 1;
      } else if (index >= slides.length) {
        slideIndex = 0;
      }

      // Hide all slides
      for (let i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
      }

      // Show the selected slide
      slides[slideIndex].style.display = 'block';
    }

    function previousSlide() {
      showSlide(--slideIndex);
    }

    function nextSlide() {
      showSlide(++slideIndex);
    }

    // Show the initial slide
    showSlide(slideIndex);
  </script>
</body>
</html>