/* Start here Title area */
body {
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important; /* Prevents horizontal scroll if full-width elements exceed viewport */
}

.site-grid {
   background-color:rgb(236, 242, 200) !important; 
    }


.card-body {
  margin: 0 !important;
  padding:0 !important;

}


body.site.home .container-component {
  max-width: 100% !important;
  padding: 0 10px !important;
}


.grid-child container-component {
  padding:0 !important ;

}

.mod-custom custom {
 top:10px !important;
 }

/* Ensure parent container doesn't restrict width */
.grid-child.container-below-top {
  width: 100% !important;
  max-width: none !important; /* Override any max-width restrictions */
  margin: 0 !important;
  padding: 0 !important;
}

body.site.com_content.wrapper-fluid.view-featured {

  background-color: #eaedf0!important; 

}

body.wrapper-fluid header>.grid-child, body.wrapper-fluid footer>.grid-child {
  background : #2c5e1a !important ;   /* rgb(28, 141, 77) */
  width:100% ! important ;
  max-width: 100% !important ;
  margin:0px !important;
}


div.grid-child.container-below-top 
{
  padding: 0 !important;
  margin: 0 !important;
}

.container-main-top {
  max-width: 100% !important; /* Or your desired width */
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* For full width */
.container-main-top {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
}

.slide-container {
  margin: 0 !important;
  padding: 0 !important;
}

.container-header nav {
    margin-top: 0em !important;
    padding: 0;
}
.mod-custom {
    background-color: white; /* Light gray background color */
}

/* Start here Title area */


/* Start here WOrking on Main menu with animation*/

/* Reset some default styles */
.nrc-style-menu, .main-menu, .menu-nav, .menu-item, .dropdown-menu {
  font-family: 'Roboto', sans-serif;
  background-color: #2c5e1a; /* Dark green similar to NRC Grapes */
  box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Make sure the dropdown stays visible when hovering over it */
.has-dropdown .dropdown-menu {
  margin-top: 0;
}
.main-menu {
  max-width: 1250px;
  margin: 0 auto;
}

.menu-nav {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu-item {
  position: relative;
}

.menu-item > a {
  color: #fff;
  text-decoration: none;
  padding: 3px 20px;
  display: block;
  font-weight: 500;
  font-size: 16px;
  transition: all 0.3s ease;
  position: relative;
}

/* Hover Animation */
.menu-item > a:hover {
  background-color: rgba(255,255,255,0.1);
  color: #fff;
}

.menu-item > a:after {
  content: '';
  position: absolute;
  width: 0;
  height: 3px;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ffcc00; /* Yellow accent similar to NRC */
  transition: all 0.3s ease;
}

.menu-item > a:hover:after,
.menu-item.active > a:after {
  width: 70%;
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  color : #fff;
  background-color: #2c5e1a;
  min-width: 220px;
  /*box-shadow: 0 5px 15px rgba(0,0,0,0.1); */
  animation: fadeInDown 0.3s both;
  z-index: 1000;
  margin-top: .7rem;
}

.has-dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu li a {
  color: #333;
  padding: 5px 20px;
  display: block;
  transition: all 0.2s ease; 
  /*text-decoration: none;*/
  border-bottom: 1px solid #f0f0f0;
}

.dropdown-menu li a:hover {
  background-color:rgb(31, 2, 43);
  color:rgb(247, 249, 246);
  padding-left: 25px;
}
.dropdown-menu li a {
  text-decoration: none !important;
}
.dropdown-menu:hover > .dropdown-menu {
    display: block;
    left: 100%;
    top: 0;
}
.dropdown-arrow {
  margin-left: 5px;
  display: inline-block;
  transition: transform 0.3s;
}

.has-dropdown:hover .dropdown-arrow {
  transform: rotate(90deg);
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
  .menu-nav {
    flex-direction: column;
  }
  
  .menu-item > a {
    padding: 12px 20px;
  }
  
 /*.dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 3px solid #ffcc00;
    animation: none;
    display: none;
  }*/
  
  .has-dropdown:hover .dropdown-menu {
    display: none;
   /* opacity: 1;
    visibility: visible;*/
  }
  
  .has-dropdown.active .dropdown-menu {
    display: block;
  }
  
  .menu-item > a:after {
    display: none;
  }
}

/* Font Awesome for dropdown icon */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');

.has-dropdown > a > i {
  margin-left: 5px;
  font-size: 12px;
  transition: transform 0.3s ease;
}

.has-dropdown:hover > a > i {
  transform: rotate(180deg);
}



/* END here of  WOrking on Main menu with animation*/


/* Start here Image Slider area */

.slider-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.slides {
  display: flex;
  transition: transform 0.5s ease-in-out;
}
.slide {
  min-width: 100%;
  position: relative;
}
.slide img {
  width: 100%;
  height: auto;
}
.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
}
.slide-content h2 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}
.slide-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
}
.slide-content .btn {
  padding: 10px 20px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}
.prev {
  left: 10px;
}
.next {
  right: 10px;
} 

/* End here Image Slider area */


/* Start here Horizontal News */
.breaking-news {
    font-weight: bold;/*bold*/
    font-size: 15px;
    border-bottom: 2px solid #c0392b;
    padding : 0 !important;
}

/* Scrolling Effect */
.news-ticker {
    white-space: nowrap;
    width: 100%;
    position: relative;
}

.ticker-items {
    display: inline-flex;
    animation: scrollTicker 25s linear infinite;
}
.news-ticker:hover .ticker-items {
    animation-play-state: paused;
}
.me-5 {
    margin-right: 60px !important; /* Custom size */
    color:black;
}
.bg-danger {
  background-color:white !important;/*#cb463f26*/
}

/* Keyframes for Horizontal Scrolling */
@keyframes scrollTicker {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(-100%);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .breaking-news {
        font-size: 14px;
    }
    .ticker-items li {
        margin-right: 20px;
    }
}
/* End here Horizontal News */


/* Start here Social Media ICON */

.social-icons-container {
  position: fixed;
  top: 70%;
  right: 5px;
  transform: translateY(-45%);
  display: flex;
  z-index: 1000;
  flex-direction: column;
  gap: 3px;
}
.social-icons {
  
  display: block; /* display: flex; */
  cursor: pointer;
      /*gap: 10px; Spacing between icons */
     border-radius: 20px;
}

.social-icons:hover {
     transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.follow-us-sidebar .facebook {
  background-color: #1877F2;
}

.follow-us-sidebar .twitter {
  background-color: #000000; /* Adjusted for X */
}

.follow-us-sidebar .instagram {
  background: radial-gradient(circle at 30% 30%, #fdf497, #fdf497, #fd5949, #d6249f, #285aeb);
}

.follow-us-sidebar .youtube {
  background-color: #FF0000;
}

/* End here Social Media ICON */


/* Start here This is for ciruclar image */

.scrolling-container {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
  background-color: #2c5e1a;/*#448344 #4b6a8d;*/
  display: flex;
  align-items: center;
}

.scrolling-images {
  display: flex;
  gap: 30px;
  animation: scroll 25s linear infinite;
}

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

.image-container {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-container img {
  width: 100%;
  height: 100%; 
  object-fit: cover;
}

.image-container:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
}

.scrolling-images:hover {
  animation-play-state: paused;
}

/* End here This is for ciruclar image */


/* Start here Footer Information */

/*  Footer New  */
.footer-container {
    background-color: #2c5e1a; /* #448344 Dark background color for the footer */
    color: #fff; /* White text color */
    /*padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 60px;*/
    padding: 0px 60px;  /*Padding for spacing inside the footer */
    width: 100%;
}

.footer-container .row {
    display: flex;
    justify-content: space-between; /* Equal gap between the columns */
    flex-wrap: wrap; /* Ensure responsiveness */
}

.footer-container .col-md-4 {
    flex: 1;
    margin: 50px; /* Adds space between the columns */
    min-width: 280px; /* Ensures columns are responsive */
}

.footer-container h5 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.footer-container ul {
    padding-left: 0;
    list-style: none;
}

.footer-container ul li {
    margin-bottom: 8px;
}

.footer-container ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-container ul li a:hover {
    text-decoration: underline;
}

.footer-container .row.mt-4 {
    margin-top: 30px;
    text-align: center;
}

.footer-container .row.mt-4 .col {
    font-size: 0.9rem;
}

.footer-container .footer-note {
    margin-top: 20px;
    font-size: 0.8rem;
    color: #faf7f7;
}
.my-col{
    padding: 20px; /* Adjust as necessary */
}
/*Moving arrow in footer*/
@keyframes moveRight {
    0% { transform: translateX(0); }
    50% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

.moving-arrow {
    animation: moveRight 1s infinite;
}
.text-decoration-none:hover {
    text-decoration: underline !important;
}

/* End here Footer Information */



/* Start here Desclaimer Design css*/

.footer-upper-link ul li {
    display: inline-block;
    padding: 5px 4px;
}
.footer-upper-link ul li a {
  font-size: 13px;
  padding-right: 8px;
  border-right: 1px solid #343e34;
}
.footer-upper-link ul {
    text-align: center;
    background-color: none;
}

/* End  here Desclaimer Design css*/

/*    TABS Design *//

.slider-card, .info-card, .director-card {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.slider-card:hover, .info-card:hover, .director-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.slide3d {
  position: relative;
  height: 300px;
  overflow: hidden;
}

.slide3d img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.caption3d {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.7);
  color: white;
  padding: 12px 20px;
  font-weight: 500;
}

.news-tabs-container {
  border-radius: 12px;
  overflow: hidden;
  /*box-shadow: 0 4px 12px rgba(0,0,0,0.1);*/
}

.nav-tabs {
  background-color: #2c7d3f !important;
  border-bottom: none;
  padding: 0;
}

.nav-tabs .nav-link {
  color: white !important;
  border: none;
  border-radius: 0;
  padding: 12px 15px;
  font-weight: 500;
  border-right: 2px solid rgba(255,255,255,0.2) !important;
}

.nav-tabs .nav-link:hover {
  background-color: rgba(255,255,255,0.1);
}

.nav-tabs .nav-link.active {
  background-color: white !important;
  color:  #2c7d3f !important;;
  font-weight: 600;
}

.tab-content {
  background-color: white;
  padding: 20px;
}






.news-list {
  max-height: 400px;
  overflow-y: auto;
}

.news-list li {
  padding: 10px 0;
  border-bottom: 1px dashed #eee;
  transition: background-color 0.2s;
}

#recent-news a {
  color:rgb(9, 1, 34); /* Bootstrap green color */
  text-decoration: none;
}

#recent-news .news-list a:hover {
  color: #218838;
  text-decoration: none;
}

.news-list li:hover {
  background-color:rgb(249, 248, 248) !important;
  }



.news-list li:last-child {
  border-bottom: none;
}

.news-date {
  font-size: 0.85rem;
  color: #6c757d;
}

.slideshow-container {
  height: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.animated-card {
  padding: 20px;
  height: 100%;
  display: none;
}

.animated-card.active {
  display: block;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.footer {
  background-color: var(--primary-color);
  color: white;
  padding: 2rem 0;
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .slide3d {
      height: 200px;
  }
}


/*  Slider Varieties */

.slider-container {
  overflow: hidden;
  border-radius: 0.25rem;
}

.carousel-inner {
  border-radius: 0.25rem;
}

.carousel-item img {
  height: 250px;
  object-fit: cover;
}

.carousel-caption {
  bottom: 20px;
  left: 10%;
  right: 10%;
}





/* Slideshow3 Container Styling */
.slide3show-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}


/* Slideshow Wrapper */
.css-slider3 {
    display: flex;
    width: 300%; /* 3 slides = 300% width */
    height: 100%;
    animation: slide3 30s infinite; /* 12s total (4s per slide) */
}

/* Individual Slide Styling */
.slide3 {
    width: 33.33%; /* Each slide takes 1/3 of the container */
    flex-shrink: 0;
    padding: 1rem;
    box-sizing: border-box;
}

.slide3-content {
    background: rgba(255, 255, 255, 0.9);
    padding: 1.5rem;
    border-radius: 8px;
    height: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Main DOGR Slider Container - for Home Page - Full width, 1/5 height */
.dogr-slider-container {
  position: relative;
  left: 0;
  right: 0;
  height: 50vh;
  overflow: hidden;
  background: #f5f5f5;
}

        /* Slides Wrapper */
        .dogr-slider-slides {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.6s ease;
        }

        /* Individual Slide */
        .dogr-slider-slide {
            min-width: 100%;
            height: 100%;
            position: relative;
        }

        /* Slide Image - Cover area */
        .dogr-slider-slide img {
            width: 100%;
            /*height: 100%;*/
            object-fit: cover;
            object-position: center;
            display: block;
        }

        /* Slide Content Area */
        .dogr-slider-content {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
            color: white;
            padding: 10px 20px;
        }

        /* Content Elements */
        .dogr-slider-content h2 {
            font-size: 1.2rem;
            margin-bottom: 5px;
        }

        .dogr-slider-content p {
            font-size: 0.8rem;
            margin-bottom: 8px;
            display: none; /* Hide description for this compact size */
        }

        .dogr-slider-content .dogr-slider-btn {
            display: inline-block;
            padding: 4px 12px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 3px;
            font-size: 0.7rem;
        }

        /* Navigation Buttons */
        .dogr-slider-prev, 
        .dogr-slider-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 30px;
            height: 30px;
            background-color: rgba(255,255,255,0.2);
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 1rem;
            cursor: pointer;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .dogr-slider-prev {
            left: 10px;
        }

        .dogr-slider-next {
            right: 10px;
        }

        /* Slide Indicators */
        .dogr-slider-indicators {
            position: absolute;
            bottom: 5px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 5px;
            z-index: 10;
        }

        .dogr-slider-indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: rgba(255,255,255,0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dogr-slider-indicator.active {
            background-color: white;
        }

        /* Responsive Adjustments */
        @media (min-width: 768px) {
            .dogr-slider-content h2 {
                font-size: 1.5rem;
            }
            .dogr-slider-content .dogr-slider-btn {
                padding: 6px 15px;
                font-size: 0.8rem;
            }
        }


        /* Custom slider styles with dogrvar prefix */
        /* Custom slider styles */
        .dogrvar-slider-container {
            width: 100%;
            height: 350px;
            overflow: hidden;
            position: relative;
            border: 1px solid #eee;
            border-radius: 4px;
        }
        
        .dogrvar-slider-track {
            display: flex;
            height: 100%;
            transition: transform 0.5s ease-in-out;
        }
        
        .dogrvar-slide {
            min-width: 100%;
            display: flex;
            flex-direction: column;
            flex-shrink: 0;
        }
        
        .dogrvar-slide-image {
            height: 400px;
            width: 100%;
            object-fit: cover;
        }
        
        .dogrvar-caption-bar {
            height: 50px;
            width: 100%;
            background: #f8f9fa;
            border-top: 1px solid #dee2e6;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
        }
        
        .dogrvar-caption-text {
            color: #333;
            font-size: 14px;
            margin: 0;
            flex-grow: 1;
        }
        
        .dogrvar-read-more {
            background: #4CAF50;
            color: white;
            padding: 3px 10px;
            border-radius: 3px;
            font-size: 12px;
            text-decoration: none;
            transition: background 0.3s;
        }
        
        .dogrvar-read-more:hover {
            background: #45a049;
        }


/* Demo for about institute section */

/* Main layout styles */
.content-container {
  display: flex;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  gap: 20px;
}

/* Button container styles */
.animated-buttons-container {
  width: 160px;
  flex-shrink: 0;
}

.button-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 20px;
}

/* Perfectly centered button styles */
.animated-button {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 80px;
  background: #fff;
  border-radius: 15px;
  text-decoration: none;
  box-shadow: 0 8px 15px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
  padding: 15px; /* Added equal padding on all sides */
  text-align: center; /* Ensures text alignment */
}

/* Centered icon and text */
.animated-button .icon {
  font-size: 32px;
  margin: 0 auto 8px; /* Centered with margin only at bottom */
  transition: all 0.3s ease;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.animated-button span {
  font-size: 15px;
  font-weight: 600;
  color: #333;
  transition: all 0.3s ease;
  z-index: 2;
  text-align: center;
  width: 100%; /* Full width for proper centering */
  display: block; /* Makes span behave as block element */
  padding: 0 5px; /* Small side padding for text */
}

/* Color schemes and hover effects (unchanged) */
.research-btn { border: 2px solid #3498db; color: #3498db; }
.publications-btn { border: 2px solid #2ecc71; color: #2ecc71; }
.technologies-btn { border: 2px solid #e74c3c; color: #e74c3c; }
.contact-btn { border: 2px solid #9b59b6; color: #9b59b6; }

.animated-button:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 12px 20px rgba(0,0,0,0.15);
}

.animated-button:hover .icon,
.animated-button:hover span {
  color: white;
}

/* Animation effects */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Responsive design */
@media (max-width: 992px) {
  .content-container {
    flex-direction: column;
    gap: 15px;
  }
  
  .animated-buttons-container {
    width: 100%;
  }
  
  .button-column {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    position: static;
    gap: 8px;
  }
  
  .animated-button {
    width: 150px;
    height: 80px;
    flex-direction: column; /* Keep column layout even in row */
    padding: 10px;
  }
  
  .animated-button .icon {
    margin: 0 auto 5px;
    font-size: 28px;
  }
  
  .animated-button span {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .animated-button {
    width: 140px;
    height: 75px;
  }
}



/* Start here - Director Page */

/* Base Styles for the entire page */
  .directors-page {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
  }
  
  /* Current Director Profile Styles */
  .profile-container {
    max-width: 1200px;
    margin: 0 auto 50px;
    padding: 20px;
  }
  
  .profile-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
    position: relative;
  }
  
  .profile-image {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 100, 0, 0.2);
    border: 5px solid #2e7d32;
    margin-bottom: 20px;
  }
  
  .profile-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(46, 125, 50, 0.3);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: 50%;
  }
  
  .profile-image:hover .profile-photo {
    transform: scale(1.05);
  }
  
  .profile-image:hover .image-overlay {
    opacity: 1;
  }
  
  .profile-title h1 {
    color: #2e7d32;
    font-size: 2.5rem;
    margin-bottom: 5px;
    font-weight: 700;
  }
  
  .position {
    color: #555;
    font-size: 1.2rem;
    font-style: italic;
  }
  
  .profile-section {
    margin-bottom: 40px;
    opacity: 0;
    animation-fill-mode: forwards;
  }
  
  .dir-section-title {
    /*position: relative;*/
    margin-bottom: 25px;
    color: #2e7d32;
    font-size: 1.8rem; 
  }
  
  .section-title span {
    background: white;
    padding-right: 15px;
    position: relative;
    z-index: 1;
  }
  
  .section-title::after {
    content: "";
    /*position: absolute; */
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: #2e7d32;
    z-index: 0;
  }
  
  .dir-section-content {
    padding: 0 20px;
    line-height: 1.6;
  }
  
  /* Timeline Styles */
  .timeline {
    position: relative;
    padding-left: 30px;
    list-style: none;
  }
  
  .timeline::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    width: 2px;
    background: #2e7d32;
  }
  
  .timeline li {
    position: relative;
    margin-bottom: 30px;
  }
  
  .timeline-badge {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #2e7d32;
    border: 3px solid white;
  }
  
  .timeline-content {
    padding: 15px;
    background: #f8f9fa;
    border-left: 3px solid #2e7d32;
    border-radius: 0 5px 5px 0;
  }
  
  /* Achievements Grid */
  .achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
  }
  
  .achievement-card {
    background: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    text-align: center;
    transition: all 0.5s ease;
    border-top: 4px solid #2e7d32;
  }
  
  .card-icon {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: #2e7d32;
  }
  
  .achievement-card h3 {
    color: #2e7d32;
    margin-bottom: 10px;
  }
  
  /* Contributions */
  .contributions {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  
  .contribution-item {
    padding: 15px;
    background: #f1f8e9;
    border-left: 4px solid #2e7d32;
    border-radius: 0 5px 5px 0;
  }
  
  /* Past Directors Section */
  .directors-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .page-title {
    text-align: center;
    color: #2e7d32;
    font-size: 2.5rem;
    margin-bottom: 40px;
    position: relative;
  }
  
  .page-title::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: #2e7d32;
  }
  
  /* Director Card */
  .director-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    margin-bottom: 50px;
    overflow: hidden;
    opacity: 0;
    animation-fill-mode: forwards;
  }
  
  .director-header {
    display: flex;
    flex-wrap: wrap;
    background: linear-gradient(135deg, #f1f8e9 0%, #e8f5e9 100%);
    padding: 20px;
    align-items: center;
    border-bottom: 2px solid #2e7d32;
  }
  
  .director-image {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    position: relative;
    margin-right: 30px;
    border: 5px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  }
  
  .director-profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }
  
  .director-image:hover .director-profile-img {
    transform: scale(1.05);
  }
  
  .tenure-badge {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #2e7d32;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: bold;
    font-size: 0.9rem;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  }
  
  .director-basic-info {
    flex: 1;
    min-width: 300px;
  }
  
  .director-basic-info h2 {
    color: #2e7d32;
    font-size: 1.8rem;
    margin-bottom: 5px;
  }
  
  .tenure {
    color: #555;
    font-style: italic;
    margin-bottom: 15px;
  }
  
  .quick-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
  }
  
  .fact-tag {
    background: #2e7d32;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
  }
  
  /* Details Section */
  .director-details {
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
  }
  
  .detail-section {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #2e7d32;
  }
  
  .detail-section h3 {
    color: #2e7d32;
    margin-bottom: 15px;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
  }
  
  .icon {
    margin-right: 10px;
    font-size: 1.3rem;
  }
  
  .achievements-list li, .awards-list li {
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
  }
  
  .achievements-list li::before, .awards-list li::before {
    content: "•";
    color: #2e7d32;
    font-weight: bold;
    position: absolute;
    left: 0;
  }
  
  /* Animations */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  @keyframes slideInLeft {
    from { 
      opacity: 0;
      transform: translateX(-50px);
    }
    to { 
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes slideInRight {
    from { 
      opacity: 0;
      transform: translateX(50px);
    }
    to { 
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  @keyframes scaleUp {
    from { 
      opacity: 0;
      transform: scale(0.9);
    }
    to { 
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .dir-fade-in {
    animation: fadeIn 1s ease forwards;
  }
  
  .slide-in-left {
    animation: slideInLeft 0.8s ease forwards;
  }
  
  .slide-in-right {
    animation: slideInRight 0.8s ease forwards;
  }
  
  .scale-up {
    animation: scaleUp 0.6s ease forwards;
  }
  
  /* Stagger animations */
  .profile-section:nth-child(1) { animation-delay: 0.2s; }
  .profile-section:nth-child(2) { animation-delay: 0.4s; }
  .profile-section:nth-child(3) { animation-delay: 0.6s; }
  .profile-section:nth-child(4) { animation-delay: 0.8s; }
  
  .timeline li:nth-child(1) .timeline-content { animation-delay: 0.5s; }
  .timeline li:nth-child(2) .timeline-content { animation-delay: 0.7s; }
  .timeline li:nth-child(3) .timeline-content { animation-delay: 0.9s; }
  .timeline li:nth-child(4) .timeline-content { animation-delay: 1.1s; }
  
  .achievement-card:nth-child(1) { animation-delay: 0.5s; }
  .achievement-card:nth-child(2) { animation-delay: 0.7s; }
  .achievement-card:nth-child(3) { animation-delay: 0.9s; }
  
  .contribution-item:nth-child(1) { animation-delay: 0.5s; }
  .contribution-item:nth-child(2) { animation-delay: 0.7s; }
  .contribution-item:nth-child(3) { animation-delay: 0.9s; }
  
  .director-card:nth-child(1) { animation-delay: 0.2s; }
  .director-card:nth-child(2) { animation-delay: 0.5s; }
  .director-card:nth-child(3) { animation-delay: 0.8s; }
  
  .director-card:nth-child(1) .detail-section:nth-child(1) { animation-delay: 0.4s; }
  .director-card:nth-child(1) .detail-section:nth-child(2) { animation-delay: 0.6s; }
  .director-card:nth-child(1) .detail-section:nth-child(3) { animation-delay: 0.8s; }
  .director-card:nth-child(1) .detail-section:nth-child(4) { animation-delay: 1.0s; }
  
  /* Responsive */
  @media (max-width: 768px) {
    .profile-title h1 {
      font-size: 2rem;
    }
    
    .achievements-grid {
      grid-template-columns: 1fr;
    }
    
    .director-header {
      flex-direction: column;
      text-align: center;
    }
    
    .director-image {
      margin-right: 0;
      margin-bottom: 20px;
    }
    
    .director-details {
      grid-template-columns: 1fr;
    }
    
    .page-title {
      font-size: 2rem;
    }
    
    .director-basic-info h2 {
      font-size: 1.5rem;
    }
  }

/* End here - Director Page*/

/* About Institute CSS */
.about-directorate {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
}

.directorate-header {
  margin-bottom: 30px;
}

.directorate-header h2 {
  color: #2c5e1a;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.directorate-header h2:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: #4CAF50;
}

.directorate-header h4 {
  color:rgb(7, 146, 65);
  font-weight: 500;
  margin-bottom: 5px;
  position: relative;
  padding-bottom: 5px;
}

.directorate-header h5 {
  color:rgb(7, 146, 65);
  font-weight: 400;
  margin-bottom: 5px;
  position: relative;
  padding-bottom: 5px;
}


.main-image-container {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.main-image {
  width: 100%;
  height: auto;
  display: block;
}

.section-title {
  color: #2c5e1a;
  margin: 25px 0 15px;
  font-weight: 600;
  border-bottom: 2px solid #e0e0e0;
  padding-bottom: 8px;
} 

.stats-list, .mandate-list {
  padding-left: 20px;
}

.stats-list li, .mandate-list li {
  margin-bottom: 10px;
}

.mission-section, .mandate-section {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  margin: 30px 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.mission-statement {
  font-style: italic;
  color: #555;
  padding-left: 20px;
  border-left: 3px solid #4CAF50;
}

@media (max-width: 768px) {
  .about-directorate {
    padding: 15px;
  }
  
  .directorate-header h2 {
    font-size: 24px;
  }
}

/* End of About Institute CSS */


/* .publications page css */

      .pub-header {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
        }
        
        .pub-year-section {
            border-left: 4px solid var(--secondary-color);
            padding-left: 1rem;
            margin: 2.5rem 0 1.5rem;
        }
        
        .pub-item {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid #eee;
        }
        
        .pub-title {
            font-weight: 600;
            color: var(--primary-color);
        }
        
        .pub-authors {
            font-style: italic;
            margin: 0.5rem 0;
        }
        
        .pub-journal {
            font-weight: 500;
            color: #555;
        }
        
        .pub-links a {
            color: var(--secondary-color);
            margin-right: 1rem;
            text-decoration: none;
        }
        
        .pub-links a:hover {
            text-decoration: underline;
        }
        
        .pub-type-badge {
            background-color: var(--secondary-color);
            color: white;
            padding: 0.2rem 0.8rem;
            border-radius: 1rem;
            font-size: 1.2rem;
            display: inline-block;
            margin-right: 0.5rem;
        }

/*Start here - Ext.Funded Projects*/
.projects-container {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 1200px;
      margin: 30px auto;
      padding: 20px;
      box-shadow: 0 0 20px rgba(0,0,0,0.1);
      border-radius: 10px;
      background: #fff;
    }
    
    .projects-header {
      text-align: center;
      margin-bottom: 30px;
      color: #2c3e50;
    }
    
    .projects-header h2 {
      font-size: 2.2rem;
      margin-bottom: 10px;
      position: relative;
      display: inline-block;
    }
    
    .projects-header h2:after {
      content: '';
      position: absolute;
      width: 70px;
      height: 3px;
      background: #3498db;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .projects-table {
      width: 100%;
      border-collapse: collapse;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
    }
    
    .projects-table thead tr {
      background: #3498db;
      color: white;
    }
    
    .projects-table th, 
    .projects-table td {
      padding: 15px;
      text-align: left;
    }
    
    .projects-table th {
      font-weight: 600;
      text-transform: uppercase;
      font-size: 14px;
    }
    
    .projects-table tbody tr {
      border-bottom: 1px solid #ecf0f1;
      transition: all 0.3s;
    }
    
    .projects-table tbody tr:last-child {
      border-bottom: none;
    }
    
    .projects-table tbody tr:hover {
      background: #f8f9fa;
      transform: translateX(5px);
    }
    
    .funding-agency {
      display: inline-block;
      padding: 5px 10px;
      background: #e3f2fd;
      border-radius: 20px;
      color: #1976d2;
      font-size: 14px;
      font-weight: 500;
    }
    
    .pi-name {
      font-weight: 600;
      color: #2c3e50;
    }
    
    /* Animation classes */
    .fade-in {
      animation: fadeIn 0.5s ease-in;
    }  
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    } 
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
      .projects-table thead {
        display: none;
      }
      
      .projects-table, 
      .projects-table tbody, 
      .projects-table tr, 
      .projects-table td {
        display: block;
        width: 100%;
      }
      
      .projects-table tr {
        margin-bottom: 15px;
        border-radius: 5px;
        box-shadow: 0 0 5px rgba(0,0,0,0.1);
      }
      
      .projects-table td {
        padding: 10px 15px;
        position: relative;
        padding-left: 40%;
      }
      
      .projects-table td:before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        top: 10px;
        font-weight: bold;
        color: #2c3e50;
      }
    }
/*End here - Ext.Funded Projects*/

/*Start here - Varities Developed*/
.varieties-container {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      max-width: 1200px;
      margin: 30px auto;
      padding: 20px;
    }
    
    .section-header {
      text-align: center;
      margin-bottom: 40px;
      color: #2c3e50;
    }
    
    .section-header h2 {
      font-size: 2.2rem;
      margin-bottom: 10px;
      position: relative;
      display: inline-block;
    }
    
    .section-header h2:after {
      content: '';
      position: absolute;
      width: 70px;
      height: 3px;
      background: #3498db;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
    }
    
    .varieties-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 30px;
    }
    
    .variety-card {
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .variety-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
    
    .card-image {
      height: 200px;
      overflow: hidden;
      position: relative;
    }
    
    .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    
    .variety-card:hover .card-image img {
      transform: scale(1.05);
    }
    
    .type-badge {
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 5px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      z-index: 2;
    }
    
    .onion-badge {
      background: rgba(255,235,238,0.9);
      color: #c62828;
    }
    
    .garlic-badge {
      background: rgba(232,245,233,0.9);
      color: #2e7d32;
    }
    
    .card-content {
      padding: 20px;
    }
    
    .card-title {
      margin: 0 0 10px 0;
      color: #2c3e50;
      font-size: 1.4rem;
    }
    
    .card-description {
      color: #555;
      margin-bottom: 15px;
      line-height: 1.5;
    }
    
    .detail-item {
      display: flex;
      margin-bottom: 10px;
      align-items: flex-start;
    }
    
    .detail-icon {
      color: #3498db;
      margin-right: 10px;
      margin-top: 3px;
      flex-shrink: 0;
    }
    
    .detail-text {
      flex: 1;
    }
    
    .season-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 5px;
    }
    
    .season-tag {
      display: inline-block;
      padding: 3px 8px;
      background: #e3f2fd;
      border-radius: 4px;
      color: #1976d2;
      font-size: 12px;
      font-weight: 500;
    }
    
    @media (max-width: 768px) {
      .varieties-grid {
        grid-template-columns: 1fr;
      }
      
      .card-image {
        height: 220px;
      }
    }
/*End here - Varities Developed*/

/*Start here - Technologies Developed */
/* Base Styles */
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      line-height: 1.6;
      color: #333;
      background-color: #f9f9f9;
    }
    
    .tech-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    /* Header Styles */
    .page-header {
      text-align: center;
      margin-bottom: 40px;
      padding: 20px 0;
      position: relative;
    }
    
    .page-header h1 {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 15px;
    }
    
    .page-header:after {
      content: '';
      position: absolute;
      width: 100px;
      height: 4px;
      background: linear-gradient(90deg, #3498db, #2ecc71);
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 2px;
    }
    
    /* Section Styles */
    .tech-section {
      background: white;
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.05);
      margin-bottom: 30px;
      overflow: hidden;
      opacity: 0;
      transform: translateY(20px);
      animation: fadeInUp 0.6s ease-out forwards;
    }
    
    @keyframes fadeInUp {
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    /* Delay animations for each section */
    .tech-section:nth-child(1) { animation-delay: 0.1s; }
    .tech-section:nth-child(2) { animation-delay: 0.2s; }
    .tech-section:nth-child(3) { animation-delay: 0.3s; }
    .tech-section:nth-child(4) { animation-delay: 0.4s; }
    .tech-section:nth-child(5) { animation-delay: 0.5s; }
    .tech-section:nth-child(6) { animation-delay: 0.6s; }
    .tech-section:nth-child(7) { animation-delay: 0.7s; }
    .tech-section:nth-child(8) { animation-delay: 0.8s; }
    .tech-section:nth-child(9) { animation-delay: 0.9s; }
    .tech-section:nth-child(10) { animation-delay: 1.0s; }
    .tech-section:nth-child(11) { animation-delay: 1.1s; }
    .tech-section:nth-child(12) { animation-delay: 1.2s; }
    
    .section-header {
      background: linear-gradient(135deg, #3498db, #2ecc71);
      color: white;
      padding: 15px 20px;
      display: flex;
      align-items: center;
    }
    
    .section-header h2 {
      margin: 0;
      font-size: 1.5rem;
      flex-grow: 1;
    }
    
    .section-icon {
      font-size: 1.8rem;
      margin-right: 15px;
    }
    
    .section-content {
      padding: 20px;
    } 
    
    /* Content Styles */
    .tech-point {
      margin-bottom: 15px;
      padding-left: 15px;
      border-left: 3px solid #3498db;
      transition: all 0.3s ease;
    }
    
    .tech-point:hover {
      border-left-width: 6px;
      background-color: #f8f9fa;
    }
    
    .tech-point h3 {
      color: #2c3e50;
      margin-top: 0;
      margin-bottom: 10px;
    }
    
    .tech-image {
      margin: 20px 0;
      text-align: center;
    }
    
    .tech-image img {
      max-width: 100%;
      border-radius: 6px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      transition: transform 0.3s ease;
    }
    
    .tech-image img:hover {
      transform: scale(1.02);
    }
    
    .tech-image figcaption {
      font-style: italic;
      color: #7f8c8d;
      margin-top: 8px;
    }
    
    /* Responsive Styles */
    @media (max-width: 768px) {
      .page-header h1 {
        font-size: 2rem;
      }
      
      .section-header h2 {
        font-size: 1.3rem;
      }
      
      .section-icon {
        font-size: 1.5rem;
      }
    }
    
    /* Special Elements */
    .benefit-box {
      background: #e3f2fd;
      border-left: 4px solid #1976d2;
      padding: 15px;
      margin: 20px 0;
      border-radius: 0 4px 4px 0;
    }
    
    .benefit-box h4 {
      margin-top: 0;
      color: #0d47a1;
    }
    
    .tech-table {
      width: 100%;
      border-collapse: collapse;
      margin: 20px 0;
    }
    
    .tech-table th, .tech-table td {
      padding: 12px 15px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }
    
    .tech-table th {
      background-color: #f2f2f2;
      color: #2c3e50;
    }
    
    .tech-table tr:hover {
      background-color: #f5f5f5;
    }
/* Featured Image Animation */
    .featured-image {
      position: relative;
      overflow: hidden;
      height: 300px;
      margin: 0;
    }
    
    .featured-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.5s ease;
    }
    
    .tech-section:hover .featured-image img {
      transform: scale(1.05);
    }

.image-caption {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.7);
      color: white;
      padding: 10px 15px;
      font-style: italic;
      transform: translateY(100%);
      transition: transform 0.3s ease;
    }
    
    .tech-section:hover .image-caption {
      transform: translateY(0);
    }

/*End here - Technologies Developed */

/*Start here - Committee Page*/

/* Vertical Navigation Styles */
.direction-nav {
    width: 280px;
    float: left;
    margin-right: 30px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.direction-nav .nav-link {
    display: block;
    padding: 14px 20px;
    margin-bottom: 8px;
    text-decoration: none;
    color: #2c3e50;
    background-color: #f8f9fa;
    border-left: 4px solid transparent;
    border-radius: 0 4px 4px 0;
    transition: all 0.3s ease;
    position: relative;
}

.direction-nav .nav-link:hover {
    background-color: #e3f2fd;
    color: #1976d2;
    border-left-color: #1976d2;
    transform: translateX(5px);
}

.direction-nav .nav-link.active {
    background-color: #1976d2;
    color: white;
    border-left-color: #0d47a1;
    font-weight: 500;
}

/* Committee Content Area Styles */
.committees-container {
    margin-left: 310px;
    transition: opacity 0.3s ease;
}

/* Hide all committee content initially */
.committee-content {
    display: none;
}

/* Show first content by default and active content when targeted */
#official-committees,
.committee-content:target {
    display: block;
    animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Responsive Design */
@media (max-width: 992px) {
    .direction-nav {
        width: 100%;
        float: none;
        margin-right: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .direction-nav .nav-link {
        flex: 1 0 auto;
        margin-bottom: 0;
        text-align: center;
    }
    
    .committees-container {
        margin-left: 0;
        margin-top: 30px;
    }
}

/* Committee Table Styles */
 /* Table Styles */
        .committees-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .committees-table th {
            background-color: #f2f2f2;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            color: #2c3e50;
            border-bottom: 2px solid #ddd;
        }
        
        .committees-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            vertical-align: top;
        }
        
        .committees-table tr:last-child td {
            border-bottom: none;
        }
        
        .committees-table tr:hover {
            background-color: #f5f9ff;
        }

/* Header Styles */
        .committee-header {
            background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .committee-header h2 {
            margin: 0;
            font-size: 28px;
        }
        
        .committee-header p {
            margin: 5px 0 0;
            opacity: 0.9;
            font-size: 14px;
        }

/* Committee Member Styles */
        .member-row {
            display: flex;
            margin-bottom: 5px;
        }
        
        .member-role {
            font-weight: 600;
            color: #3498db;
            min-width: 120px;
        }
        
        .member-name {
            flex-grow: 1;
        }
        
        .chairperson .member-role {
            color: #e74c3c;
        }
        
        .secretary .member-role {
            color: #27ae60;
        }
        
        .external .member-role {
            color: #9b59b6;
        }
        


/* Responsive table styles */
@media (max-width: 768px) {
    .committees-table {
        display: block;
        overflow-x: auto;
    }
    
    .committees-table td {
        min-width: 150px;
    }
    
    .committees-table td[data-label]::before {
        content: attr(data-label);
        font-weight: bold;
        display: inline-block;
        width: 120px;
    }
}

/* Officers Styles */
        .officers-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        
        .officers-header {
            background: linear-gradient(135deg, #27ae60 0%, #2ecc71 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .officers-header h2 {
            margin: 0;
            font-size: 28px;
        }
        
        .officers-header p {
            margin: 5px 0 0;
            opacity: 0.9;
            font-size: 14px;
        }
        
        .officers-table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .officers-table th {
            background-color: #f2f2f2;
            padding: 12px 15px;
            text-align: left;
            font-weight: 600;
            color: #2c3e50;
            border-bottom: 2px solid #ddd;
        }
        
        .officers-table td {
            padding: 12px 15px;
            border-bottom: 1px solid #eee;
            vertical-align: top;
        }
        
        .officers-table tr:last-child td {
            border-bottom: none;
        }
        
        .officers-table tr:hover {
            background-color: #f5fff9;
        }
        
        .officer-name {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .officer-designation {
            font-size: 0.9em;
            color: #7f8c8d;
            margin-top: 3px;
        }
        
        .responsibility-item {
            margin-bottom: 8px;
            position: relative;
            padding-left: 15px;
        }
        
        .responsibility-item:before {
            content: "•";
            position: absolute;
            left: 0;
            color: #27ae60;
            font-weight: bold;
        }
        
        .alternate-officer {
            font-size: 0.9em;
            color: #e67e22;
            margin-top: 5px;
            padding-left: 15px;
        }
        
        /* Responsive Design */
        @media (max-width: 768px) {
            .committees-table, .officers-table {
                display: block;
            }
            
            .committees-table thead, .officers-table thead {
                display: none;
            }
            
            .committees-table tbody, .committees-table tr, .committees-table td,
            .officers-table tbody, .officers-table tr, .officers-table td {
                display: block;
                width: 100%;
            }
            
            .committees-table tr, .officers-table tr {
                margin-bottom: 20px;
                border: 1px solid #ddd;
                border-radius: 4px;
                padding: 10px;
            }
            
            .committees-table td, .officers-table td {
                padding: 8px;
                border-bottom: 1px dotted #eee;
            }
            
            .committees-table td:before, .officers-table td:before {
                content: attr(data-label);
                font-weight: bold;
                display: block;
                color: #2c3e50;
                margin-bottom: 5px;
            }
            
            .member-row {
                flex-direction: column;
            }
            
            .member-role {
                min-width: 100%;
                margin-bottom: 2px;
            }
            
            .officer-name {
                font-size: 1.1em;
            }
            
            .responsibility-item {
                margin-bottom: 10px;
            }
        }
/*End here -Committee Page*/


/*Start here - Staff Page*/

/* Main Container */
.profiles-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

/* Profile Card */
.profile-card {
  width: 220px;
  height: 300px;
  perspective: 1000px;
  cursor: pointer;
}

/* Flip Animation */
.profile-front, .profile-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  padding: 20px;
  box-sizing: border-box;
  transition: transform 0.6s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.profile-front {
  transform: rotateY(0deg);
}

.profile-back {
  transform: rotateY(180deg);
  overflow-y: auto;
}

.profile-card:hover .profile-front {
  transform: rotateY(-180deg);
}

.profile-card:hover .profile-back {
  transform: rotateY(0deg);
}

/* Profile Content */
.profile-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #3498db;
  margin-bottom: 15px;
}

.profile-card h3 {
  margin: 10px 0 5px;
  color: #2c3e50;
  font-size: 1.2rem;
}

.profile-front p {
  margin: 0;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.specialization {
  color: #e74c3c;
  font-weight: 600;
  margin: 5px 0 15px;
  font-size: 0.9rem;
}

.profile-details {
  text-align: left;
  width: 100%;
  margin-bottom: 15px;
}

.profile-details p {
  margin: 8px 0;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.profile-details i {
  color: #3498db;
  width: 16px;
  text-align: center;
}

.profile-bio {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 15px;
}

.social-links {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.social-links a {
  color: #2c3e50;
  font-size: 1.1rem;
  transition: color 0.3s;
}

.social-links a:hover {
  color: #3498db;
}

/* Responsive Design */
@media (max-width: 768px) {
  .profiles-container {
    flex-direction: column;
    align-items: center;
  }
  
  .profile-card {
    margin-bottom: 25px;
  }
}

/*End here - Staff Page*/

/* Vertical Sidebar Navigation */
.sidebar-nav {
    width: 250px;
    margin: 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.sidebar-nav .content-link {
    display: block;
    padding: 15px 20px;
    margin-bottom: 8px;
    text-decoration: none;
    color: #2c3e50;
    background-color: #f8f9fa;
    border-left: 4px solid transparent;
    border-radius: 0 4px 4px 0;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.65, 0.05, 0.36, 1);
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Hover Animation */
.sidebar-nav .content-link:hover {
    background-color: #e9f5ff;
    color: #1a73e8;
    transform: translateX(8px);
    border-left-color: #1a73e8;
}

/* Active State */
.sidebar-nav .content-link.active {
    background-color: #1a73e8;
    color: white;
    border-left-color: #0d5bba;
    box-shadow: 0 4px 8px rgba(26, 115, 232, 0.2);
}

/* Ripple Effect Animation */
.sidebar-nav .content-link::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(26, 115, 232, 0.3);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.sidebar-nav .content-link:hover::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 0.5;
    }
    100% {
        transform: scale(20, 20);
        opacity: 0;
    }
}

/* Icon Animation */
.sidebar-nav .content-link i {
    margin-right: 10px;
    transition: transform 0.3s ease;
}

.sidebar-nav .content-link:hover i {
    transform: scale(1.2);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .sidebar-nav {
        width: 100%;
        margin: 10px 0;
    }
    
    .sidebar-nav .content-link {
        padding: 12px 15px;
    }
}

/* Start Facilities Page CSS */
.dogrfacilities-menu {
      background: #f8f9f9;
      color: #065d27;
      min-height: 100vh;
      padding: 30px 15px;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .dogrfacilities-menu h5 {
      color: #044a06bb;
      margin-bottom: 25px;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .dogrfacilities-menu a {
      color: #04520a;
      display: block;
      padding: 10px 15px;
      margin-bottom: 8px;
      border-radius: 6px;
      text-decoration: none;
      transition: 0.3s;
    }

    .dogrfacilities-menu a:hover {
      background-color: #f5f9fd;
      color: #910101;
    }

    .dogrfacilities-content {
      display: none;
      height: 100%;
    }

    .dogrfacilities-content:target {
      display: flex;
    }

    /* Show dashboard by default */
    .dogrfacilities-content.default:target ~ .dogrfacilities-content#dashboard,
    body:not(:has(:target)) .dogrfacilities-content#dashboard {
      display: flex;
    }

    .dogrfacilities-content-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      padding: 5px 50px;
      width: 100%;
      max-width: 90%;
      text-align: center;
    }

    .dogrfacilities-content-card h2 {
      color: #343a40;
      margin-bottom: 20px;
    }

    .dogrfacilities-content-card p {
      color: #6c757d;
      font-size: 1.1rem;
    }

/* End Facilities Page CSS */

/* Start here - Image Container */
        .dogrgallery-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .dogrimage-row {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 30px;
            margin-bottom: 40px;
        }

        .dogrimage-card {
            flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis */
            max-width: 400px;
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .dogrimage-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .dogrimage-container {
            position: relative;
            width: 100%;
            padding-top: 75%; /* 4:3 Aspect Ratio */
            overflow: hidden;
        }

        .dogrimage-container img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }

        .dogrimage-card:hover .dogrimage-container img {
            transform: scale(1.05);
        }

        .dogrcaption {
            padding: 10px;
            text-align: center;
        }

        .dogrcaption h3 {
            margin-bottom: 10px;
            color: #2c3e50;
            font-size: 1.3rem;
        }

        .dogrcaption p {
            color:rgb(37, 3, 62);
            font-size: 0.95rem;

        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .dogrimage-row {
                gap: 20px;
            }
            
            .dogrimage-card {
                flex: 1 1 100%;
                max-width: 350px;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 1.8rem;
            }
            
            .dogrcaption {
                padding: 15px;
            }
        }

/* End here -Image Container */

/* Tender Information CSS */
.tenderheader {
            background-color: #2c3e50;
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 5px;
            margin: 0px auto;
            width:70%;
        }
        
        .notice-container {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            padding: 20px 50px;
            width: 90%;
            max-width: 1200px;
            margin: 0 auto 30px;
            text-align: center;
        }
        
        .tender-table {
            width: 70%;
            border-collapse: collapse;
            margin: 20px auto;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .tender-table th {
            background-color: #3498db;
            color: white;
            padding: 12px;
            text-align: left;
            vertical-align: top;

        }
        
        .tender-table td {
            padding: 10px 12px;
            border-bottom: 1px solid #ddd;
            vertical-align: top;
        }
        
        .tender-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        .tender-table tr:hover {
            background-color: #e3f2fd;
        }
        
          
        @media (max-width: 768px) {
            .notice-container {
                padding: 15px;
                width: 95%;
            }
            
            .tender-table {
                display: block;
                overflow-x: auto;
            }
        }

/* END Tender Information CSS */

/* JOBs CSS */
._dogrjob-container {
            margin: 0 auto;
            width:100%;
        }
        
        ._dogrjob-header {
            background-color:rgb(248, 250, 251);
            color:rgb(24, 29, 74);
            text-align: center;
            margin-bottom: 5px;
            }
        
        ._dogrjob-title {
            font-size: 2.2rem;
            margin-bottom: 10px;
        }
        
        ._dogrjob-subtitle {
            font-size: 1.1rem;
            opacity: 0.9;
        }
        
        ._dogrjob-jobs-container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(242, 238, 238, 0.05);
            padding: 5px;
            margin-bottom: 30px;
        }
        
        ._dogrjob-section-title {
            color: #2c3e50;
            border-bottom: 2px solid #3498db;
            padding-bottom: 10px;
            margin-bottom: 20px;
            font-size: 1.5rem;
        }
        
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 5px 0;
        }
        
        th {
            background-color: #3498db;
            color: white;
            padding: 15px;
            text-align: left;
            vertical-align: top;
            font-weight: 500;
        }
        
        td {
            padding: 15px;
            border-bottom: 1px solid #e0e0e0;
            vertical-align: top;
        }
        
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        tr:hover {
            background-color: #f1f7fd;
        }
        
        ul {
            margin: 0;
            padding-left: 20px;
        }
        
        li {
            margin-bottom: 5px;
        }
        
        ._dogrjob-download-btn {
            background: #27ae60;
            color: white;
            padding: 8px 15px;
            border-radius: 4px;
            text-decoration: none;
            display: inline-block;
            font-weight: 500;
            transition: all 0.3s ease;
        }
        
        ._dogrjob-download-btn:hover {
            background: #219955;
            transform: translateY(-2px);
        }
        
        ._dogrjob-notice-box {
            background: #fff8e1;
            border-left: 4px solid #ffc107;
            padding: 20px;
            margin: 30px 0;
            border-radius: 4px;
        }
        
        ._dogrjob-notice-title {
            color: #ff8f00;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
  
        
        @media (max-width: 768px) {
            table {
                display: block;
                overflow-x: auto;
                white-space: nowrap;
            }
            
            th, td {
                padding: 12px 8px;
            }
            
            ._dogrjob-container {
                padding: 15px;
            }
            
            ._dogrjob-header {
                padding: 20px 0;
            }
            
            ._dogrjob-title {
                font-size: 1.8rem;
            }
        }
/* End jobs CSS */


/* Download CSS */
._dogrpub-header {
      background-color: #2c3e50;
      color: #fff;
      padding: 30px 0;
      text-align: center;
      border-radius: 0 0 10px 10px;
    }

    ._dogrpub-section-title {
      font-size: 1.5rem;
      color: #2c3e50;
      border-bottom: 2px solid #3498db;
      margin-top: 40px;
      margin-bottom: 20px;
      padding-bottom: 8px;
    }

    ._dogrpub-doc-list a {
      display: inline-block;
      background-color: #2980b9;
      color: #fff;
      text-decoration: none;
      padding: 8px 16px;
      margin: 5px;
      border-radius: 5px;
      transition: all 0.2s ease-in-out;
    }

    ._dogrpub-doc-list a:hover {
      background-color: #21618c;
      transform: translateY(-2px);
    }

/* END Download CSS */

/*Start here - Success Story CSS*/

/*Start here - Success Story Home Page*/

/* Main Container */
.success-stories-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.success-main-title {
    text-align: center;
    color: #2a5d84;
    margin-bottom: 40px;
    font-size: 2.5em;
    position: relative;
}

.success-main-title:after {
    content: "";
    display: block;
    width: 100px;
    height: 4px;
    background: #e67e22;
    margin: 15px auto;
}

/* Story Cards */
.success-story-card {
    display: flex;
    background: white;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    margin-bottom: 40px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.success-story-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);
}

.story-image-container {
    flex: 0 0 45%;
    position: relative;
    overflow: hidden;
}

.story-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.success-story-card:hover .story-image {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    /*opacity: 0.7; */
    transition: opacity 0.3s ease;
}

.success-story-card:hover .image-overlay {
    opacity: 0.5;
}

.story-content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.story-title {
    color: #2a5d84;
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 1.8em;
    position: relative;
    padding-bottom: 10px;
}

.story-title:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: #e67e22;
}

.story-highlight {
    background: #f8f9fa;
    padding: 10px 15px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    color: #2c3e50;
    animation: pulse 2s infinite;
}

.highlight-icon {
    margin-right: 10px;
    font-size: 1.2em;
}

.story-text {
    color: #555;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
}

.read-more-btn {
    align-self: flex-start;
    background: #e67e22;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.read-more-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transition: all 0.3s ease;
}

.read-more-btn:hover {
    background: #d35400;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 126, 34, 0.4);
}

.read-more-btn:hover:before {
    left: 100%;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Responsive Design */
@media (max-width: 992px) {
    .success-story-card {
        flex-direction: column;
    }
    
    .story-image-container {
        flex: 0 0 300px;
    }
}

@media (max-width: 768px) {
    .success-main-title {
        font-size: 2em;
    }
    
    .story-title {
        font-size: 1.5em;
    }
}

@media (max-width: 576px) {
    .story-content {
        padding: 20px;
    }
    
    .story-highlight {
        font-size: 0.9em;
    }
    
    .read-more-btn {
        padding: 10px 20px;
    }
}

/*End here - Success Story Home Page*/


/* ===== SUCCESS STORIES BASE STYLES ===== */
.success-story-container,
.success-stories-listing {
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
    line-height: 1.6;
    padding: 20px;
}

/* ===== LISTING PAGE STYLES ===== */
.success-stories-listing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
}

.story-card,
.story-preview {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.story-card:hover,
.story-preview:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.story-thumbnail,
.preview-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.story-card-content,
.preview-content {
    padding: 20px;
}

.story-card-content h3,
.preview-content h2 {
    color: #2a5d84;
    margin-top: 0;
}

/* ===== COMMON BUTTON STYLES ===== */
.read-more-btn,
.back-btn,
.back-to-stories-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #e67e22;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    margin-top: 15px;
}

.read-more-btn:hover,
.back-btn:hover,
.back-to-stories-btn:hover {
    background: #d35400;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* ===== FULL STORY STYLES ===== */
.full-story,
.full-story-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 30px;
}

.full-story:target {
    display: block;
    animation: fadeIn 0.5s ease;
}

.full-story-header,
.story-hero {
    position: relative;
    margin-bottom: 30px;
}

.header-image img,
.story-hero-image {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}

.header-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(42, 93, 132, 0.9);
    color: white;
    padding: 25px;
}

.header-content h1,
.story-hero h2 {
    margin: 0;
    font-size: 2.2em;
}

.story-meta {
    display: flex;
    gap: 20px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
}

/* ===== STORY HIGHLIGHTS ===== */
.story-highlights {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
}

.highlight-card,
.highlight-box {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    min-width: 180px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

.highlight-card:hover,
.highlight-box:hover {
    transform: translateY(-3px);
}

.highlight-icon {
    font-size: 2em;
    margin-bottom: 10px;
    color: #e67e22;
}

.highlight-text {
    font-weight: 600;
    color: #2a5d84;
}

/* ===== STORY SECTIONS ===== */
.story-sections,
.story-details {
    padding: 0 30px 30px;
}

.story-section {
    margin-bottom: 40px;
}

.story-section h3,
.story-body h3 {
    color: #2a5d84;
    border-bottom: 2px solid #e67e22;
    padding-bottom: 5px;
    margin-bottom: 15px;
    display: inline-block;
}

.feature-list {
    padding-left: 20px;
}

.feature-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.feature-list li:before {
    content: "✓";
    color: #27ae60;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* ===== IMAGE + TEXT SECTIONS ===== */
.with-image {
    display: flex;
    gap: 30px;
    align-items: center;
}

.section-image {
    flex: 0 0 45%;
}

.section-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.section-text {
    flex: 1;
}

/* ===== IMPACT STATS ===== */
.impact-stats {
    display: flex;
    justify-content: space-around;
    text-align: center;
    margin: 30px 0;
    flex-wrap: wrap;
    gap: 20px;
}

.impact-stat,
.step {
    padding: 20px;
    flex: 1;
    min-width: 150px;
}

.stat-number,
.step-number {
    font-size: 2.5em;
    font-weight: 700;
    color: #2a5d84;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9em;
    color: #666;
}

/* ===== QUOTE STYLES ===== */
.story-quote,
blockquote {
    background: #f8f9fa;
    padding: 20px;
    border-left: 4px solid #e67e22;
    margin: 30px 0;
    font-style: italic;
    color: #555;
}

cite {
    display: block;
    margin-top: 10px;
    font-style: normal;
    font-weight: bold;
    color: #2a5d84;
}

/* ===== STORY FOOTER ===== */
.story-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.share-options {
    display: flex;
    align-items: center;
    gap: 15px;
}

.share-link {
    color: #2a5d84;
    text-decoration: none;
    font-weight: 600;
    padding: 5px 10px;
    border: 1px solid #2a5d84;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.share-link:hover {
    background: #2a5d84;
    color: white;
}

/* ===== OVERLAY STYLES ===== */
.full-story-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 1000;
    display: none;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.full-story-overlay:target {
    display: block;
    animation: fadeIn 0.3s ease;
}

.full-story-container {
    max-width: 900px;
    margin: 50px auto;
    background: white;
    border-radius: 8px;
    position: relative;
}

.close-story-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
    color: #555;
    text-decoration: none;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-story-btn:hover {
    background: #f5f5f5;
    color: #333;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 992px) {
    .with-image {
        flex-direction: column;
    }
    
    .section-image {
        margin-bottom: 20px;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .success-stories-listing {
        grid-template-columns: 1fr;
    }
    
    .header-content,
    .story-hero h2 {
        position: relative;
        background: #2a5d84;
        color: white;
    }
    
    .story-meta {
        flex-direction: column;
        gap: 10px;
    }
    
    .story-footer {
        flex-direction: column;
        gap: 20px;
    }
    
    .full-story-container {
        margin: 20px auto;
    }
}

@media (max-width: 576px) {
    .header-content h1,
    .story-hero h2 {
        font-size: 1.8em;
    }
    
    .highlight-card,
    .highlight-box {
        min-width: 100%;
    }
    
    .impact-stats {
        flex-direction: column;
    }
}
/*End here - Success Story CSS*/

/* Agropedia Onion and Garlic CSS */
.agropedia-container {
      display: flex;
      max-width: 1200px;
      margin: 0 auto;
      background: white;
      border: 1px solid #ccc;
      border-radius: 8px;
    }

    .agropedia-sidebar {
      width: 300px;
      padding: 20px;
      background-color: #e7f5e7;
      border-right: 1px solid #ccc;
    }

    .agropedia-main {
      flex-grow: 1;
      padding: 30px;
    }

    /* Accordion Radio Buttons (hidden) */
    .agropedia-accordion input[type="radio"] {
      display: none;
    }

    .agropedia-accordion label {
      display: block;
      font-weight: bold;
      background-color: #cdeacc;
      padding: 10px;
      cursor: pointer;
      border-radius: 4px;
      margin-bottom: 5px;
    }

    .agropedia-submenu {
      display: none;
      margin-left: 15px;
      margin-bottom: 10px;
    }

    /* Show submenu only if its radio is selected */
    #agropedia-onion:checked ~ label[for="agropedia-onion"] + .agropedia-onion-submenu,
    #agropedia-garlic:checked ~ label[for="agropedia-garlic"] + .agropedia-garlic-submenu {
      display: block;
    }

    .agropedia-submenu a {
      display: block;
      color: #2d5a2d;
      text-decoration: none;
      margin: 5px 0;
      padding-left: 10px;
    }

    .agropedia-submenu a:hover {
      text-decoration: underline;
    }

    .agropedia-content-section {
      display: none;
    }

    .agropedia-content-section:target {
      display: block;
    }

    .agropedia-default:target ~ .agropedia-default,
    body:not(:has(:target)) .agropedia-default {
      display: block;
    }
/* end Agropedia Onion and Garlic CSS */

/* CSS for WEB Page with arrow */
.newsletter-heading-dogrpage {
    font-family: 'Arial', sans-serif;
    text-align: center;
    margin: 30px 0;
    position: relative;
  }
  
  .main-title-dogrpage {
    font-size: 2.5rem;
    font-weight: 700;
    background: linear-gradient(45deg, #2b5876, #4e4376);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    padding: 0 50px;
    position: relative;
    margin-bottom: 15px;
  }
  
  .main-title-dogrpage:before, 
  .main-title-dogrpage:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%234e4376"><path d="M5 12h14M12 5l7 7-7 7"/></svg>');
    background-repeat: no-repeat;
    transform: translateY(-50%);
  }
  
  .main-title-dogrpage:before {
    left: 0;
    transform: translateY(-50%) rotate(180deg);
  }
  
  .main-title-dogrpage:after {
    right: 0;
  }
  
  .subtitle-dogrpage {
    font-size: 1.2rem;
    color: #6c757d;
    font-weight: 300;
    letter-spacing: 1px;
  }
  
  .decoration-line-dogrpage {
    height: 4px;
    width: 100px;
    background: linear-gradient(90deg, #ff7e5f, #feb47b);
    margin: 20px auto;
    border-radius: 2px;
    position: relative;
  }
  
  .decoration-line-dogrpage:after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    background: #ff7e5f;
    transform: rotate(45deg);
    top: -5px;
    left: 50%;
    margin-left: -7.5px;
  }
  /* end CSS for WEB Page with arrow */


  /* Agropedia */
  .garlic-container {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Arial, sans-serif;
            display: flex;
            max-width: 1200px;
            margin: 20px auto;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            
        }
        
        .garlic-left-menu {
            width: 250px;
            background-color: #2c5e1a;
            padding: 20px 0;
        }
        
        .garlic-left-menu h3 {
            color: white;
            padding: 10px 20px;
            border-bottom: 1px solid #3a7d22;
            margin-bottom: 10px;
        }
        
        .garlic-left-menu ul {
            list-style: none;
            padding-inline-start: 10px !important;
        }
        
        .garlic-left-menu li a {
            display: block;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            transition: background-color 0.3s;
        }
        
        .garlic-left-menu li a:hover {
            background-color: #3a7d22;
        }
        
        .garlic-right-content {
            flex: 1;
            padding: 20px 30px;
            display: none;
        }
        
        .garlic-right-content:target {
            display: block;
        }
        
        .garlic-right-content h1 {
            color: #2c5e1a;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 2px solid #2c5e1a;
        }
        
        .garlic-achievement-item {
            margin-bottom: 30px;
        }
        
        .garlic-achievement-item h2 {
            color: #2c5e1a;
            margin-bottom: 10px;
            font-size: 1.3em;
        }
        
        .garlic-achievement-item p {
            line-height: 1.6;
            margin-bottom: 10px;
        }
        
        @media (max-width: 768px) {
            .garlic-container {
                flex-direction: column;
            }
            
            .garlic-left-menu {
                width: 100%;
            }
        }

        /* End Agropedia */

/* WEBSITE TITLE */
 .dogrtitleheader-container {
            background: linear-gradient(135deg, #6e8efb, #a777e3)!important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1)!important;
            border-radius: 0 0 15px 15px !important;
            padding: 15px 0 !important;
            position: relative !important;
            overflow: hidden !important;
        }
        
        .dogrtitleheader-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #ff8a00, #e52e71, #1e90ff);
        }
        
        .dogrtitleheader-title {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            font-weight: 800;
            font-size: 2.5rem;
            background: linear-gradient(to right, #ffffff, #f3f3f3);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            letter-spacing: 1px;
            transition: all 0.3s ease;
        }
        
        .dogrtitleheader-title:hover {
            transform: scale(1.02);
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
        }
        
        .dogrtitleheader-logo-container {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }
        
        .dogrtitleheader-logo {
            max-height: 60px;
            transition: all 0.3s ease;
            filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
        }
        
        .dogrtitleheader-logo:hover {
            transform: scale(1.1);
            filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.3));
        }
        
        .dogrtitleheader-tagline {
            font-size: 0.9rem;
            letter-spacing: 1.5px;
            color: white;
            margin-bottom: 0;
            margin-top: 0.25rem;
        }
        
        @media (max-width: 768px) {
            .dogrtitleheader-title {
                font-size: 1.8rem;
            }
            .dogrtitleheader-logo {
                max-height: 40px;
            }
        }

/* END WEBSITE TITLE */


/* CSSS for slider */

/* Slider Indicators (Small White Circles) */
        .dogr-indicators button {
            width: 10px !important;
            height: 10px !important;
            border-radius: 50% !important;
            background-color: white !important;
            border: 1px solid transparent !important;
        }
        
        

        .dogr-arrow-icon {
            width: 50px;
            height: 50px;
            background-color: rgba(249, 237, 237, 0.3);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            border: none;
            transition: all 0.3s ease;
        }
        .dogr-arrow-icon:hover {
            background-color: rgba(0,0,0,0.5);
        }
        
        /* Slide Styling */
        .dogr-slide-img {
            max-height: 500px;
            object-fit: cover;
        }
        .dogr-caption {
            background: rgba(0, 100, 0, 0.6);
            border-radius: 10px;
            padding: 15px;
        }
        .dogr-slide-title {
            font-size: 2rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .dogr-slide-text {
            font-size: 1.2rem;
        }


/* END CSSS for slider */

/* Good Translator */
.goog-te-gadget span {
     display: none !important;
  
}

/* Hide the Google branding image */
.goog-logo-link {
   display: none !important;
 
}

.goog-te-banner-frame.skiptranslate {
  display: none !important;
}

/* Reduce leftover space */
#google_translate_element {
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* END Good Translator */

/*Start here -Right to Information RTI*/
.rti-container {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
            line-height: 1.6;
        }
        
        .rti-header {
            text-align: center;
            margin-bottom: 40px;
            padding: 20px;
            background: linear-gradient(135deg, #2c5e92, #3a7d44);
            color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            animation: fadeIn 1s ease-out;
        }
        
        .rti-header h1 {
            margin: 0;
            font-size: 2.2em;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
        }
        
        .rti-header p {
            font-size: 1.1em;
            margin-top: 10px;
        }
        
        /* Section Styles */
        .rti-section {
            margin-bottom: 30px;
            border-left: 4px solid #3a7d44;
            padding-left: 15px;
            transition: all 0.3s ease;
            animation: slideIn 0.5s ease-out;
        }
        
        .rti-section:hover {
            border-left-width: 8px;
            padding-left: 20px;
        }
        
        .rti-section h2 {
            color: #2c5e92;
            margin-top: 0;
            display: flex;
            align-items: center;
        }
        
        .rti-section h2:before {
            content: "•";
            color: #3a7d44;
            font-size: 2em;
            margin-right: 10px;
            line-height: 0;
        }
        
        .rti-content {
            padding: 15px;
            background-color: #f9f9f9;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
        }
        
        /* Accordion for Budget Table */
        .accordion {
            margin: 20px 0;
        }
        
        .accordion-input {
            display: none;
        }
        
        .accordion-label {
            display: block;
            padding: 12px 15px;
            background: #2c5e92;
            color: white;
            cursor: pointer;
            border-radius: 5px;
            transition: background 0.3s;
            font-weight: bold;
        }
        
        .accordion-label:hover {
            background: #3a7d44;
        }
        
        .accordion-label:after {
            content: "+";
            float: right;
            font-weight: bold;
            transition: transform 0.3s;
        }
        
        .accordion-input:checked + .accordion-label:after {
            content: "-";
        }
        
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: #f1f8ff;
            border-radius: 0 0 5px 5px;
        }
        
        .accordion-input:checked ~ .accordion-content {
            max-height: 1000px;
        }
        
        /* Table Styles */
        .budget-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
        
        .budget-table th, .budget-table td {
            padding: 10px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        
        .budget-table th {
            background-color: #3a7d44;
            color: white;
        }
        
        .budget-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        
        .budget-table tr:hover {
            background-color: #e6f7e6;
        }
        
        /* Contact Cards */
        .contact-cards {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        
        .contact-card {
            flex: 1 1 300px;
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s, box-shadow 0.3s;
        }
        
        .contact-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .contact-card h3 {
            color: #2c5e92;
            margin-top: 0;
            border-bottom: 2px solid #3a7d44;
            padding-bottom: 10px;
        }
        
        .contact-card p {
            margin: 8px 0;
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideIn {
            from { 
                opacity: 0;
                transform: translateX(-20px);
            }
            to { 
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .contact-cards {
                flex-direction: column;
            }
            
            .rti-header h1 {
                font-size: 1.8em;
            }
        }
/*End here -Right to Information RTI*/