/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

body {
  margin: 0;
  font-family: 'Roboto', sans-serif;
  background: #f9fafb;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

/* --- Top Bar --- */
.top-bar {
  background-color: #14532d; /* Dark green */
  color: white;
  padding: 10px 0;
  font-size: 14px;
}
.top-bar .container { justify-content: space-between; }
.top-bar-left span { margin-right: 20px; }
.top-bar-right a { margin-left: 20px; color: #facc15; } /* Yellow links */
.top-bar-right a:hover { text-decoration: underline; }

/* --- Header --- */
.main-header { background: white; padding: 20px 0; }
.header-flex { display: flex; align-items: center; justify-content: flex-start; }
.logo-container img { height: 80px; margin-right: 15px; } /* Logo closer to text */
.title-container { line-height: 1.4; }
.title-container h1 {
  font-size: 26px;
  font-weight: 700;
  color: #b45309; /* Golden brown */
  margin: 0 0 5px;
}
.title-container p { margin: 2px 0; font-size: 14px; color: #444; }

/* --- Navigation --- */
.main-nav {
  background-color: #1f2937; /* Charcoal */
  position: sticky;
  top: 0;
  z-index: 1000;
}
.nav-links { list-style: none; margin: 0; padding: 0; display: flex; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: block;
  padding: 16px 20px;
  color: white;
  font-weight: 500;
  transition: background 0.3s;
}
.nav-links > li:hover > a {
  background-color: #d97706; /* Orange hover */
  color: white;
}

/* Dropdown */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  min-width: 220px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 9999;
}
.has-dropdown:hover > .dropdown { display: block; }
.dropdown li a {
  display: block;
  padding: 12px 18px;
  color: #333;
}
.dropdown li a:hover { background: #fef3c7; color: #92400e; }

/* Submenu (second level) */
.has-submenu { position: relative; }
.submenu {
  top: 0;
  left: 100%;  /* Opens to the right */
  margin-left: 2px;
}
.has-submenu:hover > .submenu { display: block; }

/* --- Slideshow --- */
.slideshow {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.slideshow img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}
.slides {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: fade 8s infinite;
}
.slides:nth-child(1) { animation-delay: 0s; }
.slides:nth-child(2) { animation-delay: 4s; }
.slides:nth-child(3) { animation-delay: 5s; }
@keyframes fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  45% { opacity: 1; }
  55% { opacity: 0; }
  100% { opacity: 0; }
}

/* --- Content Section --- */
.page-content {
  padding: 50px 0;
  text-align: center;
}
.page-content h2 {
  font-size: 28px;
  color: #14532d;
}
.page-content p { color: #444; font-size: 16px; }
/*about-us main page*/
/* --- About Us Section --- */
.about-us {
  padding: 60px 20px;
  background: #f9fafb;
}

.about-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.about-image {
  flex: 1 1 40%;
  text-align: center;
}
.about-image img {
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.about-text {
  flex: 1 1 55%;
  padding: 20px;
}
.about-text h2 {
  font-size: 32px;
  color: #14532d;
  margin-bottom: 15px;
}
.about-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

/* --- Vision & Mission --- */
.vision-mission {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

.card {
  flex: 1 1 45%;
  background: white;
  border-radius: 15px;
  padding: 30px 25px;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.card .icon {
  font-size: 40px;
  margin-bottom: 15px;
  color: #14532d;
}
.vision .icon { color: #14532d; }   /* Green for Vision */
.mission .icon { color: #d97706; }  /* Orange for Mission */

.card h3 {
  font-size: 24px;
  margin-bottom: 15px;
  color: #d97706;
}
.card p, .card ul {
  font-size: 16px;
  color: #444;
  line-height: 1.6;
}
.card ul { padding-left: 20px; text-align: left; }
.card ul li { margin-bottom: 8px; }

/* Borders for theme */
.vision {
  border-top: 6px solid #14532d;
}
.mission {
  border-top: 6px solid #d97706;
}
/*founder*/
/* --- Founder’s Message --- */
.founder-message {
  padding: 60px 20px;
  background: #fff;
}

.founder-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
}

.founder-image {
  flex: 1 1 35%;
  text-align: center;
}
.founder-image img {
  max-width: 100%;
  border-radius: 15px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.founder-text {
  flex: 1 1 60%;
  padding: 10px;
}
.founder-text h2 {
  font-size: 32px;
  color: #14532d;
  margin-bottom: 20px;
  position: relative;
}
.founder-text h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 4px;
  background: #d97706;
  margin-top: 8px;
  border-radius: 3px;
}
.founder-text p {
  font-size: 16px;
  line-height: 1.9;
  color: #333;
  margin-bottom: 20px;
  text-align: justify;
}
.founder-text h4 {
  font-size: 18px;
  font-weight: 600;
  color: #d97706;
  margin-top: 10px;
}
/*depart,ent in main page*/
/* --- Departments Section (One Row) --- */
/* --- Departments Section (One Row) --- */
.departments {
  padding: 70px 20px;
  background: #f9fafb;
}

.section-title {
  text-align: center;        /* Center align heading */
  font-size: 34px;
  font-weight: 700;
  color: #14532d;
  margin-bottom: 40px;
  position: relative;
}
.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: #d97706;
  margin: 12px auto 0;       /* keeps underline in center */
  border-radius: 3px;
}

/* Force all 4 in one row */
.dept-row {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 25px;
  flex-wrap: nowrap; /* stays in one row on large screens */
}

.dept-card {
  width: 23%; /* equal width for 4 cards */
  background: white;
  padding: 30px 20px;
  border-radius: 15px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
}
.dept-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.18);
}

.dept-card .icon {
  font-size: 45px;
  color: #14532d;
  margin-bottom: 15px;
}

.dept-card h3 {
  font-size: 20px;
  color: #d97706;
  margin-bottom: 12px;
}

.dept-card p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
}

/* Responsive - stack cards on small screens */
@media (max-width: 992px) {
  .dept-row {
    flex-wrap: wrap;
  }
  .dept-card {
    width: 45%;
  }
}
@media (max-width: 600px) {
  .dept-card {
    width: 100%;
  }
}

/*contact us*/
/* Contact Us Section */
.contact-us {
  padding: 70px 20px;
  background: url('https://www.transparenttextures.com/patterns/cubes.png') #f9f9f9;
}

.contact-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  background: #fff;
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  max-width: 1100px;
  margin: auto;
  gap: 40px;
}

/* Left Info */
.contact-info {
  flex: 1;
}
.contact-info h2 {
  font-size: 28px;
  margin-bottom: 15px;
  color: #14532d;
}
.contact-info p {
  margin: 12px 0;
  font-size: 15px;
  color: #333;
}
.contact-info i {
  color: #8b0a2d;
  margin-right: 10px;
}

/* Right Form */
.contact-form {
  flex: 1;
}
.contact-form form {
  display: flex;
  flex-direction: column;
}
.contact-form .form-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}
.contact-form input,
.contact-form textarea {
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  width: 100%;
  transition: 0.3s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #8b0a2d;
  outline: none;
  box-shadow: 0 0 8px rgba(139,10,45,0.2);
}
.contact-form button {
  padding: 12px;
  border: none;
  background: #d97706;
  color: #fff;
  font-size: 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s;
}
.contact-form button:hover {
  background: #5a051e;
}

/* Responsive */
@media (max-width: 900px) {
  .contact-wrapper {
    flex-direction: column;
    padding: 25px;
  }
  .form-row {
    flex-direction: column;
  }
}
/*footer*/
/* -------- Footer Section -------- */
.footer {
  background: #1a1a1a;
  color: #ddd;
  padding: 60px 20px 20px;
  font-family: 'Poppins', sans-serif;
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  max-width: 1200px;
  margin: auto;
}

.footer-col {
  flex: 1;
  min-width: 220px;
}

.footer h3 {
  font-size: 22px;
  color: #fff;
  margin-bottom: 15px;
}

.footer h4 {
  font-size: 18px;
  color: #d97706; /* orange accent */
  margin-bottom: 15px;
  position: relative;
}

.footer h4::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #d97706;
  margin-top: 6px;
  border-radius: 2px;
}

.footer p {
  font-size: 15px;
  line-height: 1.6;
  color: #bbb;
}

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

.footer ul li {
  margin-bottom: 12px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer ul li i {
  color: #d97706;
}

.footer ul li a {
  text-decoration: none;
  color: #bbb;
  transition: color 0.3s;
}
.footer ul li a:hover {
  color: #fff;
}

.social-links a {
  display: inline-block;
  margin-right: 10px;
  font-size: 18px;
  color: #bbb;
  transition: color 0.3s, transform 0.3s;
}
.social-links a:hover {
  color: #d97706;
  transform: scale(1.2);
}

/* Bottom Bar */
.footer-bottom {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 30px;
}
.footer-bottom p {
  font-size: 14px;
  color: #999;
/*mobilre resp*/
/* Responsive */
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: center;
  }
  .footer ul li {
    justify-content: center;
  }
  .social-links {
    margin-top: 10px;
  }
}
/* Map inside footer */
.map-container {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.map-container iframe {
  width: 100%;
  border: none;
  border-radius: 10px;
}
/* Pop up form */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  z-index: 2000;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 20px;
  animation: fadeIn 0.4s ease-out;
}
.popup-container {
  background: white;
  padding: 0;
  border-radius: 12px;
  max-width: 450px;
  width: 100%;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  text-align: center;
  overflow: hidden;
  animation: scaleUp 0.4s ease-out;
}
.popup-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 30px;
  color: #aaa;
  cursor: pointer;
  border: none;
  background: none;
  line-height: 1;
  transition: color 0.3s;
}
.popup-close-btn:hover {
  color: #333;
}
.popup-header {
  background: var(--light-gray, #f4f7f9);
  padding: 25px 30px;
}
.popup-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 15px;
  background-color: var(--primary-color, #0d2c4e);
  color: white;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
}
.popup-container h2 {
  color: var(--primary-color, #0d2c4e);
  margin: 0 0 5px;
  font-size: 24px;
}
.popup-header p {
  margin: 0;
  color: #666;
  font-size: 14px;
}
.popup-form {
  padding: 30px;
}
.popup-form input, .popup-form select {
  width: 100%;
  padding: 14px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: inherit;
  font-size: 16px;
}
.popup-form select {
  color: #555;
}
.popup-form select:valid {
  color: #000;
}
.popup-form button {
  width: 100%;
  padding: 14px;
  border: none;
  background: var(--secondary-color, #9d2127);
  color: white;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.popup-form button:hover {
  background: #b22a30;
}
/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleUp { from { transform: scale(0.9) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

}
/*mobile resp*/
/* Mobile Responsiveness for Samajbhushan Eknathrao Dhakane College of Polytechnic */

@media (max-width: 768px) {
  .container {
    padding: 0 15px; /* Add some padding to containers on smaller screens */
  }

  /* Top Bar */
  .top-bar {
    flex-direction: column; /* Stack items vertically */
    text-align: center;
    padding: 10px 0;
  }

  .top-bar-left,
  .top-bar-right {
    flex-direction: column;
    width: 100%;
    margin-bottom: 5px;
  }

  .top-bar-left span,
  .top-bar-right a {
    margin: 5px 0; /* Add spacing between stacked items */
  }

  /* Main Header */
  .main-header .header-flex {
    flex-direction: column; /* Stack logo and title vertically */
    text-align: center;
  }

  .logo-container {
    margin-bottom: 10px;
  }

  .logo-container img {
    max-width: 80px; /* Adjust logo size */
    height: auto;
  }

  .title-container h1 {
    font-size: 1.5em; /* Adjust title font size */
    margin-bottom: 5px;
  }

  .title-container p {
    font-size: 0.85em; /* Adjust subtitle font size */
  }

  /* Navigation */
  .main-nav {
    position: relative;
    background-color: #004d99; /* Ensure nav has a background */
    min-height: 50px; /* Give it a minimum height even when collapsed */
  }

  .hamburger {
    display: block; /* Show hamburger icon */
    position: absolute;
    top: 15px; /* Aligned with the center of the nav bar */
    right: 20px;
    font-size: 1.8em;
    color: white;
    cursor: pointer;
    z-index: 1001; /* Ensure it's above other content */
  }

  .nav-container {
    display: none; /* Hide nav links by default */
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 50px; /* Position below the main nav bar */
    left: 0;
    background-color: #004d99; /* Background for dropdown menu */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1000;
  }

  .nav-container.active {
    display: flex; /* Show when active */
    animation: slideInLeft 0.3s ease-out forwards; /* Optional slide-in animation */
  }

  @keyframes slideInLeft {
    from {
      transform: translateX(-100%);
      opacity: 0;
    }
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .nav-links {
    flex-direction: column;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a {
    padding: 15px 20px;
    display: block;
    width: 100%;
    text-align: left;
    color: white;
    text-decoration: none;
  }

  /* Dropdowns */
  .nav-links .has-dropdown > a::after,
  .nav-links .has-submenu > a::after {
    display: none; /* Hide default dropdown arrows as JS will handle clicks */
  }

  .nav-links .has-dropdown,
  .nav-links .has-submenu {
    position: static; /* Remove absolute positioning */
  }

  .nav-links .dropdown,
  .nav-links .submenu {
    position: static; /* Stack dropdowns below parent */
    display: none; /* Hide by default */
    background-color: #003366; /* Slightly darker background for sub-menus */
    width: 100%;
    padding-left: 20px; /* Indent sub-items */
    box-shadow: none;
  }

  .nav-links .has-dropdown.active > .dropdown,
  .nav-links .has-submenu.active > .submenu {
    display: flex; /* Show when parent is active */
    flex-direction: column;
  }

  .nav-links .dropdown li,
  .nav-links .submenu li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-links .dropdown a,
  .nav-links .submenu a {
    padding: 12px 30px; /* Further indent sub-submenu items */
    font-size: 0.95em;
  }

  /* Slideshow */
  .slideshow {
    height: 200px; /* Adjust height for mobile */
  }

  .slides img {
    height: 100%; /* Make image fit container height */
    object-fit: cover; /* Cover the area, cropping if necessary */
  }

  /* About Us Section */
  .about-us .about-flex {
    flex-direction: column; /* Stack image and text */
    text-align: center;
  }

  .about-image {
    margin-bottom: 20px;
  }

  .about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
  }

  .about-text h2 {
    font-size: 1.8em;
  }

  .vision-mission {
    flex-direction: column; /* Stack vision and mission cards */
  }

  .vision-mission .card {
    margin-bottom: 20px;
    width: 100%; /* Take full width */
  }

  /* Founder's Message */
  .founder-message .founder-flex {
    flex-direction: column; /* Stack image and text */
    text-align: center;
  }

  .founder-image {
    margin-bottom: 20px;
  }

  .founder-image img {
    max-width: 150px; /* Smaller founder image */
    height: auto;
    border-radius: 50%; /* Keep it round if desired */
  }

  .founder-text h2 {
    font-size: 1.8em;
  }

  .founder-text h4 {
    font-size: 1.1em;
  }

  /* Departments Section */
  .departments .dept-row {
    flex-direction: column; /* Stack department cards */
  }

  .dept-card {
    width: 100%; /* Take full width */
    margin-bottom: 20px; /* Space between cards */
  }

  /* Contact Us Section */
  .contact-wrapper {
    flex-direction: column; /* Stack contact info and form */
  }

  .contact-info,
  .contact-form {
    width: 100%; /* Take full width */
    margin-bottom: 30px;
  }

  .contact-form .form-row {
    flex-direction: column; /* Stack first/last name inputs */
  }

  .contact-form .form-row input {
    margin-bottom: 10px; /* Space between stacked inputs */
    width: 100%;
  }

  /* Footer */
  .footer-container {
    flex-direction: column; /* Stack footer columns */
    text-align: center;
  }

  .footer-col {
    margin-bottom: 30px; /* Space between stacked columns */
    width: 100%;
  }

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

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

  .map-container {
    height: 180px; /* Adjust map height */
  }

  /* Pop-up Form */
  .popup-content {
    width: 90%; /* Make popup wider on mobile */
    max-width: 400px; /* Limit max-width */
    padding: 20px;
  }

  .registration-form input,
  .registration-form select,
  .registration-form textarea {
    padding: 12px;
    font-size: 1em;
  }

  .registration-form button {
    padding: 12px;
    font-size: 1.1em;
  }
}

/* Specific adjustments for very small screens (e.g., <= 480px) */
@media (max-width: 480px) {
  .title-container h1 {
    font-size: 1.2em;
  }

  .title-container p {
    font-size: 0.8em;
  }

  .top-bar-left span,
  .top-bar-right a {
    font-size: 0.9em;
  }

  .about-text h2,
  .founder-text h2,
  .section-title,
  .contact-info h2 {
    font-size: 1.5em;
  }

  .popup-content {
    width: 95%;
  }
}

/* Hide hamburger on larger screens */
@media (min-width: 769px) {
  .hamburger {
    display: none;
  }
  .nav-container {
    display: flex !important; /* Ensure it's always visible on desktop */
    position: static;
    box-shadow: none;
    background-color: transparent;
  }
  .nav-links {
    flex-direction: row; /* Back to horizontal */
    margin: 0;
  }
  .nav-links li {
    border-bottom: none;
  }
  .nav-links a {
    padding: 15px 20px;
  }

  /* Desktop dropdowns */
  .nav-links .has-dropdown {
    position: relative;
  }
  .nav-links .has-dropdown > a::after {
    content: ' ▼'; /* Re-add dropdown arrow for desktop */
    font-size: 0.8em;
    margin-left: 5px;
  }
  .nav-links .dropdown,
  .nav-links .submenu {
    display: none;
    position: absolute;
    background-color: #1e70af;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    flex-direction: column;
    padding-left: 0;
  }
  .nav-links .dropdown a,
  .nav-links .submenu a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    white-space: nowrap; /* Prevent items from wrapping */
  }
  .nav-links .dropdown a:hover,
  .nav-links .submenu a:hover {
    background-color: #003366;
  }
  .nav-links .has-dropdown:hover > .dropdown,
  .nav-links .has-submenu:hover > .submenu {
    display: flex;
  }
  .nav-links .has-submenu {
    position: relative;
  }
  .nav-links .has-submenu > a::after {
    content: ' ▶'; /* Submenu arrow for desktop */
    font-size: 0.8em;
    margin-left: 5px;
  }
  .nav-links .submenu {
    left: 100%; /* Position submenu to the right */
    top: 0;
  }
}
/*news sliding css*/