/* =========================================

   CSS VARIABLES & RESET

   ========================================= */

:root {

  --primary-teal: #007a86;

  --primary-teal-dark: #005f69;

  --primary-teal-light: #e6f3f5;

  --secondary-orange: #f2722b;

  --secondary-yellow: #f9a03f;

  --bg-light: #f4f8f9;

  --text-dark: #2d3748;

  --text-gray: #718096;

  --white: #ffffff;

  --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.05);

  --shadow-md: 0 10px 25px rgba(0, 122, 134, 0.1);

  --shadow-lg: 0 20px 40px rgba(0, 122, 134, 0.15);

  --border-radius: 12px;

  --border-radius-lg: 20px;

  --transition: all 0.3s ease;

}



* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: 'Poppins', sans-serif;

}



body {

  background-color: var(--white);

  color: var(--text-dark);

  line-height: 1.6;

  overflow-x: hidden;

}



a {

  text-decoration: none;

  color: inherit;

}



ul {

  list-style: none;

}



img {

  max-width: 100%;

  display: block;

  height: auto;

}



.container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 1.5rem;

}



/* =========================================

   TOP BAR

   ========================================= */

.top-bar {

  background: var(--primary-teal-dark);

  color: var(--white);

  font-size: 0.85rem;

  padding: 0.6rem 0;

}



.top-bar .container {

  display: flex;

  justify-content: space-between;

  flex-wrap: wrap;

  gap: 10px;

}



.top-bar-item span {

  color: var(--secondary-yellow);

  font-weight: 600;

  margin-right: 5px;

}



/* =========================================

   NAVBAR

   ========================================= */

.navbar {

  background: var(--white);

  box-shadow: var(--shadow-sm);

  position: sticky;

  top: 0;

  z-index: 1000;

  padding: 0rem 0;

}



.navbar .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.logo {

  display: flex;

  align-items: center;

  gap: 10px;

}



.logo img {

  max-height: 100px;

  width: auto;

}



.logo-text {

  font-size: 1.4rem;

  font-weight: 800;

  color: var(--primary-teal);

  line-height: 1.2;

  display: none;

}



a {

  text-align: center !important;

}



.logo-text small {

  display: block;

  font-size: 0.7rem;

  font-weight: 500;

  color: var(--text-gray);

  letter-spacing: 1px;

}



.nav-menu {

  display: flex;

  gap: 1.5rem;

  align-items: center;

}



.nav-item {

  position: relative;

}



.nav-menu a {

  font-weight: 500;

  color: var(--text-dark);

  transition: var(--transition);

  position: relative;

  /* padding: 0.5rem 0; */

}



.nav-menu a:hover {

  color: var(--primary-teal);

}



.nav-menu a.active {

  color: var(--primary-teal);

  font-weight: 600;

}



.nav-menu a.active::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 0;

  width: 100%;

  height: 2px;

  background: var(--secondary-orange);

}



.nav-menu a::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 0;

  width: 0%;

  height: 2px;

  background: var(--secondary-orange);

  transition: var(--transition);

}



.nav-menu a:hover::after {

  width: 100%;

}



.btn-apply {

  background: var(--secondary-orange);

  color: var(--white) !important;

  padding: 0.6rem 1.5rem;

  border-radius: 30px;

  font-weight: 600;

  box-shadow: 0 4px 15px rgba(242, 114, 43, 0.3);

}



.btn-apply:hover::after {

  display: none;

}



.btn-apply:hover {

  background: #e0601b;

  transform: translateY(-2px);

}



.menu-toggle {

  display: none;

  font-size: 1.8rem;

  color: var(--primary-teal);

  cursor: pointer;

}



/* Dropdown Menu */

.dropdown {

  position: relative;

}



.dropdown-menu {

  position: absolute;

  top: 100%;

  left: 0;

  background: var(--white);

  min-width: 220px;

  box-shadow: var(--shadow-md);

  border-radius: var(--border-radius);

  padding: 0.8rem 0;

  opacity: 0;

  visibility: hidden;

  transform: translateY(10px);

  transition: var(--transition);

  z-index: 100;

}



.dropdown:hover .dropdown-menu {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}



.dropdown-menu li {

  padding: 0.5rem 1.5rem;

}



.dropdown-menu li:hover {

  background: var(--bg-light);

}



.dropdown-menu a {

  color: var(--text-dark);

  font-size: 0.95rem;

}



.dropdown-menu a::after {

  display: none;

}



/* =========================================

   HERO SLIDER

   ========================================= */

.page-hero {

  background: linear-gradient(135deg, var(--primary-teal-dark), var(--primary-teal));

  color: var(--white);

  padding: 4rem 0;

  text-align: center;

}



.page-hero h1 {

  font-size: 3rem;

  font-weight: 800;

  margin-bottom: 1rem;

}



.page-hero .breadcrumb {

  color: rgba(255, 255, 255, 0.8);

  font-size: 1rem;

}



.page-hero .breadcrumb a {

  color: var(--secondary-yellow);

}



.hero-slider-section {

  position: relative;

  height: 80vh;

  min-height: 600px;

  overflow: hidden;

  background: var(--primary-teal-dark);

}



.slide {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  transition: opacity 0.8s ease-in-out;

  background-size: cover;

  background-position: right;

  display: flex;

  align-items: center;

  z-index: 1;

}



.slide::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg,

      rgba(0, 33, 40, 0.85) 0%,

      rgba(0, 33, 40, 0.6) 40%,

      transparent 100%);

  z-index: 2;

}



.slide.active {

  opacity: 1;

  z-index: 3;

}



.hero-content {

  position: relative;

  z-index: 4;

  max-width: 600px;

  color: var(--white);

}



.badge {

  display: inline-block;

  background: rgba(242, 114, 43, 0.2);

  color: var(--secondary-yellow);

  border: 1px solid var(--secondary-orange);

  padding: 0.4rem 1rem;

  border-radius: 20px;

  font-weight: 600;

  font-size: 0.9rem;

  margin-bottom: 1.5rem;

  backdrop-filter: blur(4px);

}



.hero-content h1 {

  font-size: 3.2rem;

  font-weight: 800;

  line-height: 1.2;

  margin-bottom: 1.2rem;

  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);

}



.hero-content h1 span {

  color: var(--secondary-yellow);

}



.hero-content p {

  font-size: 1.1rem;

  opacity: 0.95;

  margin-bottom: 2rem;

  max-width: 500px;

  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);

}



.hero-buttons {

  display: flex;

  gap: 1rem;

  flex-wrap: wrap;

}



/* =========================================

   BUTTONS

   ========================================= */

.btn-primary {

  background: var(--secondary-orange);

  color: var(--white);

  padding: 0.8rem 2rem;

  border-radius: 30px;

  font-weight: 600;

  transition: var(--transition);

  border: 2px solid var(--secondary-orange);

  display: inline-block;

}



.btn-primary:hover {

  background: transparent;

  color: var(--secondary-orange);

}



.btn-outline {

  background: transparent;

  color: var(--white);

  border: 2px solid var(--white);

  padding: 0.8rem 2rem;

  border-radius: 30px;

  font-weight: 600;

  transition: var(--transition);

  backdrop-filter: blur(4px);

  display: inline-block;

}



.btn-outline:hover {

  background: var(--white);

  color: var(--primary-teal);

}



.btn-teal {

  background: var(--primary-teal);

  color: var(--white);

  padding: 0.8rem 2rem;

  border-radius: 30px;

  font-weight: 600;

  transition: var(--transition);

  border: 2px solid var(--primary-teal);

  display: inline-block;

}



.btn-teal:hover {

  background: transparent;

  color: var(--primary-teal);

}



.slider-controls {

  position: absolute;

  bottom: 50px;

  right: 50px;

  z-index: 5;

  display: flex;

  gap: 15px;

}



.control-btn {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.2);

  border: 2px solid var(--white);

  color: var(--white);

  font-size: 1.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  backdrop-filter: blur(4px);

  transition: var(--transition);

}



.control-btn:hover {

  background: var(--secondary-orange);

  border-color: var(--secondary-orange);

}



/* =========================================

   STATS SECTION

   ========================================= */

.stats-container {

  display: flex;

  justify-content: center;

  gap: 3rem;

  background: var(--white);

  padding: 2.5rem 2rem;

  border-radius: var(--border-radius);

  box-shadow: var(--shadow-md);

  transform: translateY(-50px);

  flex-wrap: wrap;

  text-align: center;

  position: relative;

  z-index: 10;

}



.stat-box h3 {

  font-size: 2.5rem;

  color: var(--primary-teal);

  font-weight: 800;

  line-height: 1;

}



.stat-box p {

  color: var(--text-gray);

  font-weight: 500;

  margin-top: 0.5rem;

}



/* =========================================

   SECTION HEADERS

   ========================================= */

.section-header {

  text-align: center;

  margin-bottom: 3rem;

}



.section-header h2 {

  font-size: 2.2rem;

  color: var(--text-dark);

  margin-bottom: 0.5rem;

}



.section-header p {

  color: var(--text-gray);

}



.section-header .sub-title {

  color: var(--secondary-orange);

  font-weight: 600;

  text-transform: uppercase;

  letter-spacing: 2px;

}



.divider {

  height: 4px;

  width: 60px;

  background: var(--secondary-orange);

  margin: 0.5rem auto 1rem;

  border-radius: 2px;

}



/* =========================================

   PROCESS SECTION

   ========================================= */

.process {

  padding: 5rem 0;

}



.process-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



.step-card {

  text-align: center;

  padding: 2rem;

}



.step-icon {

  width: 80px;

  height: 80px;

  background: rgba(0, 122, 134, 0.1);

  color: var(--primary-teal);

  font-size: 2.5rem;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  margin: 0 auto 1.5rem;

  transition: var(--transition);

}



.step-card:hover .step-icon {

  background: var(--primary-teal);

  color: var(--white);

  transform: scale(1.1);

}



.step-card h4 {

  font-size: 1.3rem;

  margin-bottom: 1rem;

  color: var(--text-dark);

}



.step-card p {

  color: var(--text-gray);

}



/* =========================================

   SERVICES SECTION

   ========================================= */

.services {

  padding: 5rem 0;

  background: var(--bg-light);

}



.service-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 2rem;

}



.service-card {

  background: var(--white);

  padding: 2.5rem 2rem;

  border-radius: var(--border-radius);

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  border-bottom: 4px solid transparent;

}



.service-card:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-md);

  border-bottom: 4px solid var(--secondary-orange);

}



.service-card h3 {

  font-size: 1.3rem;

  color: var(--text-dark);

  margin-bottom: 1rem;

}



.service-card p {

  color: var(--text-gray);

  margin-bottom: 1.5rem;

  font-size: 0.95rem;

}



.service-link {

  color: var(--primary-teal);

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 5px;

}



.service-link:hover {

  color: var(--secondary-orange);

}



/* Modern Service Cards */

.service-card-modern {

  background: var(--white);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  height: 100%;

  display: flex;

  flex-direction: column;

}



.service-card-modern:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.service-card-modern:hover img {

  transform: scale(1.1);

}



.service-card-modern .service-image {

  position: relative;

  overflow: hidden;

  height: 200px;

}



.service-card-modern .service-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.5s ease;

}



.service-card-modern .service-tag {

  position: absolute;

  top: 10px;

  right: 10px;

  background: var(--secondary-orange);

  color: white;

  padding: 0.3rem 1rem;

  border-radius: 20px;

  font-size: 0.8rem;

  font-weight: 600;

  z-index: 2;

}



.service-card-modern .service-tag.teal {

  background: var(--primary-teal);

}



.service-card-modern .service-content {

  padding: 1.8rem 1.5rem;

  flex: 1;

  display: flex;

  flex-direction: column;

}



.service-card-modern h3 {

  font-size: 1.3rem;

  color: var(--primary-teal);

  margin-bottom: 0.8rem;

  font-weight: 600;

}



.service-card-modern p {

  color: var(--text-gray);

  font-size: 0.95rem;

  margin-bottom: 1.5rem;

  line-height: 1.6;

  flex: 1;

}



.service-card-modern .service-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: auto;

}



.service-card-modern .service-meta {

  color: var(--text-gray);

  font-size: 0.85rem;

  display: flex;

  align-items: center;

  gap: 5px;

}



.service-card-modern .service-link {

  color: var(--secondary-orange);

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 5px;

  transition: var(--transition);

}



.service-card-modern .service-link:hover {

  gap: 8px;

  color: var(--primary-teal);

}



/* =========================================

   ABOUT SECTION

   ========================================= */

.about-section {

  padding: 5rem 0;

  background: var(--white);

}



.about-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;

  margin-top: 3rem;

}



.about-image {

  position: relative;

}



.about-image img {

  width: 100%;

  border-radius: 20px;

  box-shadow: var(--shadow-lg);

}



.about-image .experience-badge {

  position: absolute;

  bottom: 20px;

  left: 20px;

  background: var(--secondary-orange);

  color: white;

  padding: 1.5rem;

  border-radius: 10px;

  box-shadow: var(--shadow-md);

}



.about-image .experience-badge span {

  font-size: 3rem;

  font-weight: 800;

  line-height: 1;

}



.about-image .experience-badge small {

  display: block;

  font-size: 1rem;

}



.about-content h3 {

  font-size: 1.8rem;

  color: var(--text-dark);

  margin-bottom: 1.5rem;

}



.about-content h3 span {

  color: var(--primary-teal);

}



.about-content p {

  color: var(--text-gray);

  margin-bottom: 1.5rem;

  line-height: 1.8;

}



.about-content .features-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.5rem;

  margin-bottom: 2rem;

}



.about-content .feature-item {

  display: flex;

  align-items: center;

  gap: 1rem;

}



.about-content .feature-icon {

  width: 50px;

  height: 50px;

  background: var(--primary-teal-light);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary-teal);

  font-size: 1.5rem;

}



.about-content .feature-text h4 {

  font-weight: 600;

  margin-bottom: 0.2rem;

}



.about-content .feature-text p {

  color: var(--text-gray);

  font-size: 0.9rem;

  margin-bottom: 0;

}



/* =========================================

   MISSION/VISION CARDS

   ========================================= */

.mv-card {

  background: var(--white);

  padding: 2.5rem 2rem;

  border-radius: 20px;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

  height: 100%;

  position: relative;

  overflow: hidden;

  border-bottom: 4px solid transparent;

}



.mv-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

  border-bottom: 4px solid var(--secondary-orange);

}



.mv-card::before {

  content: '';

  position: absolute;

  top: 0;

  right: 0;

  width: 100px;

  height: 100px;

  background: var(--primary-teal-light);

  border-radius: 0 0 0 100px;

  z-index: 1;

}



.mv-icon {

  width: 90px;

  height: 90px;

  background: var(--primary-teal-light);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin: 0 auto 1.5rem;

  font-size: 2.5rem;

  color: var(--primary-teal);

  border: 3px solid var(--white);

  box-shadow: var(--shadow-sm);

  position: relative;

  z-index: 2;

}



.mv-card h3 {

  font-size: 1.8rem;

  color: var(--primary-teal);

  margin-bottom: 1rem;

  position: relative;

  z-index: 2;

}



.mv-card p {

  color: var(--text-gray);

  line-height: 1.8;

  position: relative;

  z-index: 2;

}



/* =========================================

   TEAM CARDS

   ========================================= */

.team-card {

  background: var(--white);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  height: 100%;

}



.team-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}



.team-img {

  width: 100%;

  height: 300px;

  object-fit: cover;

  background: var(--primary-teal-light);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 5rem;

  color: var(--primary-teal);

}



.team-info {

  padding: 1.5rem;

  text-align: center;

}



.team-info h3 {

  font-size: 1.3rem;

  color: var(--text-dark);

  margin-bottom: 0.3rem;

}



.team-info .position {

  color: var(--secondary-orange);

  font-weight: 600;

  margin-bottom: 0.5rem;

}



.team-info .emp-id {

  background: var(--bg-light);

  padding: 0.3rem 1rem;

  border-radius: 20px;

  font-size: 0.85rem;

  display: inline-block;

  margin-bottom: 1rem;

  color: var(--text-gray);

}



.team-social {

  display: flex;

  justify-content: center;

  gap: 1rem;

  margin-top: 1rem;

}



.team-social a {

  width: 36px;

  height: 36px;

  background: var(--bg-light);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary-teal);

  transition: var(--transition);

}



.team-social a:hover {

  background: var(--secondary-orange);

  color: var(--white);

}



/* =========================================

   TIMELINE

   ========================================= */

.timeline {

  position: relative;

  padding: 2rem 0;

}



.timeline::before {

  content: '';

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 2px;

  height: 100%;

  background: var(--primary-teal-light);

  top: 0;

}



.timeline-item {

  display: flex;

  justify-content: space-between;

  margin-bottom: 3rem;

  position: relative;

}



.timeline-year {

  width: 100px;

  height: 100px;

  background: var(--primary-teal);

  color: var(--white);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 1.5rem;

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  z-index: 2;

  box-shadow: var(--shadow-md);

}



.timeline-content {

  width: 45%;

  background: var(--white);

  padding: 1.5rem;

  border-radius: 15px;

  box-shadow: var(--shadow-sm);

}



.timeline-item:nth-child(odd) .timeline-content {

  margin-right: auto;

}



.timeline-item:nth-child(even) .timeline-content {

  margin-left: auto;

}



/* =========================================

   ACHIEVEMENT CARDS

   ========================================= */

.achievement-card {

  text-align: center;

  padding: 2rem;

}



.achievement-number {

  font-size: 3.5rem;

  font-weight: 800;

  color: var(--secondary-orange);

  line-height: 1;

  margin-bottom: 0.5rem;

}



.achievement-label {

  font-size: 1rem;

  text-transform: uppercase;

  letter-spacing: 1px;

  color: var(--text-gray);

  font-weight: 600;

}



/* =========================================

   CONTACT SECTION

   ========================================= */

.contact-section {

  background: linear-gradient(135deg, var(--primary-teal-dark) 0%, var(--primary-teal) 100%);

  color: var(--white);

  padding: 5rem 0;

}



.contact-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 4rem;

  align-items: center;

}



.contact-info h2 {

  font-size: 2.5rem;

  margin-bottom: 1rem;

  color: var(--white);

}



.contact-info p {

  margin-bottom: 2rem;

  opacity: 0.9;

  color: var(--white);

}



.contact-list li {

  display: flex;

  align-items: flex-start;

  gap: 15px;

  margin-bottom: 1.5rem;

}



.contact-list .icon {

  background: rgba(255, 255, 255, 0.1);

  padding: 12px;

  border-radius: 50%;

  color: var(--secondary-yellow);

}



.contact-form {

  background: var(--white);

  padding: 3rem;

  border-radius: var(--border-radius);

  color: var(--text-dark);

  box-shadow: var(--shadow-md);

}



.contact-form h3 {

  margin-bottom: 1.5rem;

  color: var(--primary-teal);

  font-size: 1.5rem;

}



.form-group {

  margin-bottom: 1.5rem;

}



.form-group input,

.form-group select,

.form-group textarea {

  width: 100%;

  padding: 1rem;

  border: 1px solid #cbd5e0;

  border-radius: 8px;

  font-family: inherit;

  outline: none;

  transition: var(--transition);

}



.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus {

  border-color: var(--primary-teal);

  box-shadow: 0 0 0 3px rgba(0, 122, 134, 0.1);

}



.btn-submit {

  width: 100%;

  background: var(--secondary-orange);

  color: var(--white);

  border: none;

  padding: 1rem;

  border-radius: 8px;

  font-size: 1.1rem;

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

}



.btn-submit:hover {

  background: #e0601b;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(242, 114, 43, 0.3);

}



/* WhatsApp Form Styles */

.whatsapp-form {

  background: #e8f5e8;

  border-left: 4px solid #25D366;

}



.whatsapp-btn {

  background: #25D366;

  color: white;

  border: none;

  padding: 1rem;

  border-radius: 8px;

  font-size: 1.1rem;

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 10px;

  width: 100%;

}



.whatsapp-btn:hover {

  background: #128C7E;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);

}



.whatsapp-btn i {

  font-size: 1.3rem;

}



/* =========================================

   MAP SECTION

   ========================================= */

.map-section {

  padding: 5rem 0;

  background: var(--bg-light);

}



.map-container {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  margin-top: 2rem;

}



.map-box {

  background: var(--white);

  padding: 1.5rem;

  border-radius: var(--border-radius);

  box-shadow: var(--shadow-sm);

}



.map-box h3 {

  color: var(--primary-teal);

  margin-bottom: 1rem;

}



.map-embed {

  height: 250px;

  background: #e2e8f0;

  border-radius: var(--border-radius);

  margin-bottom: 1rem;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--text-gray);

}



/* =========================================

   PARTNER CARDS

   ========================================= */

.partner-card {

  background: var(--white);

  border-radius: 30px;

  padding: 2.5rem;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

  height: 100%;

  position: relative;

  overflow: hidden;

  border-bottom: 4px solid transparent;

}



.partner-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

  border-bottom: 4px solid var(--secondary-orange);

}



.partner-card.featured {

  border: 2px solid var(--secondary-orange);

}



.featured-tag {

  position: absolute;

  top: 20px;

  right: 20px;

  background: var(--secondary-orange);

  color: white;

  padding: 0.3rem 1.2rem;

  border-radius: 30px;

  font-size: 0.8rem;

  font-weight: 600;

  letter-spacing: 1px;

}



.partner-icon {

  width: 90px;

  height: 90px;

  background: var(--primary-teal-light);

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

  color: var(--primary-teal);

  font-size: 3rem;

  transition: var(--transition);

}



.partner-card:hover .partner-icon {

  background: var(--primary-teal);

  color: var(--white);

  transform: scale(1.05) rotate(5deg);

}



.benefit-list {

  margin: 1.5rem 0;

}



.benefit-list li {

  display: flex;

  align-items: center;

  gap: 0.8rem;

  margin-bottom: 0.8rem;

  color: var(--text-gray);

}



.benefit-list li span {

  color: var(--secondary-orange);

  font-weight: 600;

}



.commission-badge {

  background: var(--primary-teal-light);

  color: var(--primary-teal);

  padding: 0.5rem 1.5rem;

  border-radius: 30px;

  font-weight: 600;

  display: inline-block;

  margin-bottom: 1rem;

}



.income-card {

  background: linear-gradient(135deg, #f5f7fa, #e9edf5);

  border-radius: 20px;

  padding: 1.5rem;

  text-align: center;

  margin: 1.5rem 0;

}



.income-amount {

  font-size: 2.5rem;

  font-weight: 800;

  color: var(--secondary-orange);

}



/* =========================================

   INSTITUTION CARDS

   ========================================= */

.institution-hero {

  background: linear-gradient(135deg, var(--primary-teal-dark), var(--primary-teal));

  padding: 6rem 0;

  position: relative;

  overflow: hidden;

}



.institution-hero::before {

  content: '';

  position: absolute;

  top: -50%;

  right: -10%;

  width: 600px;

  height: 600px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

}



.institution-card {

  background: var(--white);

  border-radius: 20px;

  padding: 2.5rem 2rem;

  box-shadow: var(--shadow-md);

  transition: var(--transition);

  height: 100%;

  border-bottom: 4px solid transparent;

}



.institution-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

  border-bottom: 4px solid var(--secondary-orange);

}



.benefit-item {

  display: flex;

  align-items: flex-start;

  gap: 1rem;

  margin-bottom: 1.5rem;

}



.benefit-icon {

  width: 50px;

  height: 50px;

  background: var(--primary-teal-light);

  border-radius: 10px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary-teal);

  font-size: 1.5rem;

  flex-shrink: 0;

}



.stats-card {

  background: rgba(255, 255, 255, 0.1);

  backdrop-filter: blur(10px);

  border-radius: 20px;

  padding: 2rem;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.2);

}



.stats-number {

  font-size: 3rem;

  font-weight: 800;

  color: var(--secondary-yellow);

  line-height: 1;

}



/* =========================================

   TESTIMONIAL CARDS

   ========================================= */

.testimonial-card {

  background: var(--white);

  border-radius: 20px;

  padding: 2rem;

  box-shadow: var(--shadow-sm);

  border-left: 4px solid var(--secondary-orange);

}



/* =========================================

   STEP CIRCLE

   ========================================= */

.step-circle {

  width: 60px;

  height: 60px;

  background: var(--primary-teal);

  color: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.5rem;

  font-weight: 700;

  margin: 0 auto 1rem;

}



/* =========================================

   FOOTER

   ========================================= */

footer {

  background: #1a202c;

  color: #a0aec0;

  padding: 4rem 0 2rem;

}



.footer-grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 3rem;

  margin-bottom: 3rem;

}



.footer-col h4 {

  color: var(--white);

  font-size: 1.2rem;

  margin-bottom: 1.5rem;

}



.footer-col p {

  margin-bottom: 0.8rem;

}



.footer-col a:hover {

  color: var(--secondary-yellow);

}



.footer-bottom {

  text-align: center;

  padding-top: 2rem;

  border-top: 1px solid #2d3748;

  font-size: 0.9rem;

}



.social-links {

  display: flex;

  gap: 1rem;

  margin-top: 1rem;

}



.social-links a {

  width: 40px;

  height: 40px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  transition: var(--transition);

}



.social-links a:hover {

  background: var(--secondary-orange);

  transform: translateY(-3px);

}



/* =========================================

   FLOATING BUTTONS

   ========================================= */

.floating-buttons {

  position: fixed;

  bottom: 20px;

  right: 20px;

  display: flex;

  flex-direction: column;

  gap: 10px;

  z-index: 9999;

}



.float-btn {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: #25D366;

  color: var(--white);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 1.8rem;

  box-shadow: var(--shadow-lg);

  transition: var(--transition);

  border: 2px solid var(--white);

}



.float-call {

  background: var(--primary-teal);

}



.float-btn:hover {

  transform: scale(1.1);

}



/* =========================================

   INSTITUTION PAGE SPECIFIC

   ========================================= */

.whatsapp-institution-btn {

  background: #25D366;

  color: white;

  border: none;

  padding: 1rem 2rem;

  border-radius: 50px;

  font-size: 1.1rem;

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  gap: 10px;

  width: 100%;

  justify-content: center;

}



.whatsapp-institution-btn:hover {

  background: #128C7E;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);

}



/* =========================================

   PARTNER PAGE SPECIFIC

   ========================================= */

.partner-hero {

  background: linear-gradient(135deg, var(--primary-teal-dark), var(--primary-teal));

  padding: 6rem 0;

  position: relative;

  overflow: hidden;

}



.partner-hero::before {

  content: '';

  position: absolute;

  top: -30%;

  right: -5%;

  width: 500px;

  height: 500px;

  background: rgba(255, 255, 255, 0.1);

  border-radius: 50%;

}



.partner-hero::after {

  content: '';

  position: absolute;

  bottom: -20%;

  left: -5%;

  width: 400px;

  height: 400px;

  background: rgba(255, 255, 255, 0.08);

  border-radius: 50%;

}



.whatsapp-partner-btn {

  background: #25D366;

  color: white;

  border: none;

  padding: 1rem 2rem;

  border-radius: 50px;

  font-size: 1.1rem;

  font-weight: 600;

  cursor: pointer;

  transition: var(--transition);

  display: inline-flex;

  align-items: center;

  gap: 10px;

  width: 100%;

  justify-content: center;

}



.whatsapp-partner-btn:hover {

  background: #128C7E;

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);

}



/* =========================================

   ABOUT HERO WITH BACKGROUND

   ========================================= */

.about-hero {

  position: relative;

  padding: 8rem 0;

  /* background-image: url('../img/new-india-education-services-college-selection.jpg'); Replace with your image path */

  background-size: cover;

  background-position: center;

  background-attachment: fixed; /* Creates parallax effect - optional */

  background-repeat: no-repeat;

  overflow: hidden;

}



/* Dark overlay for better text readability */

.about-hero-overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(135deg, rgba(0, 122, 134, 0.09) 0%, rgba(0, 95, 105, 0.05) 100%);

  z-index: 1;

}



.about-hero .container {

  position: relative;

  z-index: 2;

}



.about-hero-content {

  position: relative;

  z-index: 2;

  text-align: center;

  color: var(--white);

  max-width: 800px;

  margin: 0 auto;

}



.about-hero-badge {

  display: inline-block;

  padding: 0.6rem 1.8rem;

  background: rgba(255, 255, 255, 0.15);

  backdrop-filter: blur(5px);

  border: 1px solid rgba(255, 255, 255, 0.3);

  border-radius: 40px;

  margin-bottom: 1.8rem;

  font-weight: 500;

  letter-spacing: 1px;

  font-size: 0.95rem;

  color: var(--white);

  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

}



.about-hero-content h1 {

  font-size: 4rem;

  font-weight: 800;

  margin-bottom: 1.2rem;

  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);

  line-height: 1.2;

  color: var(--white);

}



.about-hero-content .breadcrumb {

  color: rgba(255, 255, 255, 0.9);

  font-size: 1.1rem;

  font-weight: 400;

  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);

}



.about-hero-content .breadcrumb a {

  color: var(--secondary-yellow);

  text-decoration: none;

  font-weight: 500;

  transition: var(--transition);

}



.about-hero-content .breadcrumb a:hover {

  color: var(--white);

  text-decoration: underline;

}



/* Optional decorative elements */

.about-hero::before {

  content: '';

  position: absolute;

  top: -50%;

  right: -10%;

  width: 600px;

  height: 600px;

  background: rgba(255, 255, 255, 0.08);

  border-radius: 50%;

  transform: rotate(45deg);

  z-index: 1;

}



.about-hero::after {

  content: '';

  position: absolute;

  bottom: -30%;

  left: -5%;

  width: 400px;

  height: 400px;

  background: rgba(255, 255, 255, 0.05);

  border-radius: 50%;

  z-index: 1;

}



/* Responsive adjustments */

@media (max-width: 992px) {

  .about-hero {

    padding: 6rem 0;

  }

  

  .about-hero-content h1 {

    font-size: 3.2rem;

  }

}





/* =========================================

   UTILITY CLASSES

   ========================================= */

.text-center {

  text-align: center;

}



.mt-1 {

  margin-top: 0.5rem;

}



.mt-2 {

  margin-top: 1rem;

}



.mt-3 {

  margin-top: 1.5rem;

}



.mt-4 {

  margin-top: 2rem;

}



.mt-5 {

  margin-top: 2.5rem;

}



.mb-1 {

  margin-bottom: 0.5rem;

}



.mb-2 {

  margin-bottom: 1rem;

}



.mb-3 {

  margin-bottom: 1.5rem;

}



.mb-4 {

  margin-bottom: 2rem;

}



.mb-5 {

  margin-bottom: 2.5rem;

}



/* =========================================

   RESPONSIVE DESIGN

   ========================================= */

@media (max-width: 1200px) {

  .container {

    max-width: 960px;

  }

}



@media (max-width: 992px) {

  .container {

    max-width: 720px;

  }



  .about-wrapper,

  .contact-grid,

  .map-container {

    grid-template-columns: 1fr !important;

    gap: 3rem;

  }



  .hero-content h1 {

    font-size: 2.8rem;

  }



  .hero-content {

    max-width: 500px;

  }



  .process-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .service-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .footer-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  div[style*="grid-template-columns: repeat(4, 1fr)"] {

    grid-template-columns: repeat(1, 1fr) !important;

  }



  .about-hero-content h1 {

    font-size: 3.2rem;

  }

}



@media (max-width: 768px) {

  .container {

    max-width: 540px;

  }



  .menu-toggle {

    display: block;

  }



  .nav-menu {

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: var(--white);

    flex-direction: column;

    padding: 0;

    max-height: 0;

    overflow: hidden;

    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);

    transition: max-height 0.3s ease;

    z-index: 1000;

  }



  .nav-menu.active {

    max-height: 500px;

    padding: 1rem 0;

  }



  .nav-menu a {

    padding: 0.8rem 2rem;

    display: block;

    width: 100%;

    text-align: center;

    border-bottom: 1px solid #f0f0f0;

  }



  .nav-menu a:last-child {

    border-bottom: none;

  }



  .nav-menu .btn-apply {

    margin: 0.5rem auto;

    width: 90%;

    text-align: center;

  }



  .dropdown-menu {

    position: static;

    opacity: 1;

    visibility: visible;

    transform: none;

    box-shadow: none;

    max-height: 0;

    overflow: hidden;

    padding: 0 2rem;

    transition: max-height 0.3s ease;

    background: #f9f9f9;

  }



  .dropdown.active .dropdown-menu {

    max-height: 200px;

    padding: 0.5rem 2rem;

  }



  .dropdown-menu li {

    padding: 0.3rem 0;

  }



  .hero-slider-section {

    height: 70vh;

    min-height: 500px;

  }



  .slide::before {

    background: linear-gradient(90deg,

        rgba(0, 33, 40, 0.9) 0%,

        rgba(0, 33, 40, 0.7) 70%,

        rgba(0, 95, 105, 0.4) 100%);

  }



  .hero-content {

    max-width: 100%;

    padding: 0 1rem;

    text-align: left;

  }



  .hero-content h1 {

    font-size: 2.2rem;

  }



  .hero-content p {

    font-size: 1rem;

  }



  .hero-buttons {

    justify-content: flex-start;

  }



  .slider-controls {

    right: 20px;

    bottom: 20px;

    transform: none;

  }



  .stats-container {

    transform: translateY(-30px);

    gap: 1.5rem;

    padding: 1.5rem;

  }



  .process-grid,

  .service-grid,

  .team-grid,

  .value-grid {

    grid-template-columns: 1fr !important;

  }



  .about-wrapper {

    grid-template-columns: 1fr !important;

    gap: 2rem;

  }



  .about-content .features-grid {

    grid-template-columns: 1fr;

  }



  .about-image .experience-badge {

    position: relative;

    bottom: 0;

    left: 0;

    margin-top: 1rem;

  }



  .page-hero {

    padding: 3rem 0;

  }



  .page-hero h1 {

    font-size: 2.2rem;

  }



  .about-hero {

    padding: 5rem 0;

    background-attachment: scroll;

  }



  .about-hero-content h1 {

    font-size: 2.5rem;

  }



  .about-hero-badge {

    padding: 0.5rem 1.4rem;

    font-size: 0.85rem;

    margin-bottom: 1.2rem;

  }



  .partner-hero h1,

  .institution-hero h1 {

    font-size: 2.2rem;

  }



  .partner-card,

  .institution-card {

    padding: 1.5rem;

  }



  .partner-icon {

    width: 60px;

    height: 60px;

    font-size: 2rem;

  }



  .commission-badge {

    font-size: 0.9rem;

    padding: 0.3rem 1rem;

  }



  .income-amount {

    font-size: 1.8rem;

  }



  .testimonial-card {

    padding: 1.5rem;

  }



  .timeline::before {

    left: 20px;

  }



  .timeline-year {

    left: 20px;

    transform: translateX(0);

    width: 60px;

    height: 60px;

    font-size: 1rem;

  }



  .timeline-content {

    width: calc(100% - 80px);

    margin-left: 80px !important;

  }



  .timeline-item {

    margin-bottom: 2rem;

  }



  div[style*="grid-template-columns: repeat(4, 1fr)"] {

    transform: translateY(-20px) !important;

  }



  .stats-card {

    padding: 1rem;

  }



  .stats-number {

    font-size: 2rem;

  }



  .benefit-item {

    flex-direction: column;

    text-align: center;

  }



  .benefit-icon {

    margin: 0 auto;

  }



  .service-card:hover,

  .partner-card:hover,

  .institution-card:hover,

  .team-card:hover,

  .service-card-modern:hover {

    transform: none;

  }



  .service-card-modern:hover img {

    transform: none;

  }



  .about-image div[style*="position: absolute"] {

    position: relative !important;

    bottom: 0 !important;

    right: 0 !important;

    margin-top: 1rem;

    max-width: 100%;

  }

}



@media (max-width: 576px) {

  .top-bar .container {

    flex-direction: column;

    text-align: center;

    gap: 5px;

  }



  .top-bar-item {

    font-size: 0.75rem;

  }



  .navbar {

    padding: 0.5rem 0;

  }



  .logo-text {

    font-size: 1rem;

  }



  .logo-text small {

    font-size: 0.6rem;

  }



  .hero-slider-section {

    height: 60vh;

    min-height: 450px;

  }



  .hero-content h1 {

    font-size: 1.6rem !important;

  }



  .hero-content p {

    font-size: 0.9rem;

  }



  .badge {

    font-size: 0.7rem;

    padding: 0.3rem 0.8rem;

  }



  .hero-buttons {

    flex-direction: column;

    gap: 0.8rem;

  }



  .hero-buttons .btn-primary,

  .hero-buttons .btn-outline {

    width: 100%;

    text-align: center;

    padding: 0.7rem;

    font-size: 0.9rem;

  }



  .slider-controls {

    bottom: 10px;

    right: 10px;

  }



  .control-btn {

    width: 35px;

    height: 35px;

    font-size: 1rem;

  }



  .stats-container {

    transform: translateY(-20px);

    padding: 1rem;

    gap: 1rem;

  }



  .stat-box {

    flex: 1 1 calc(50% - 1rem);

    min-width: 120px;

  }



  .stat-box h3 {

    font-size: 1.8rem;

  }



  .stat-box p {

    font-size: 0.8rem;

  }



  .section-header h2 {

    font-size: 1.8rem;

  }



  .section-header p {

    font-size: 0.9rem;

    padding: 0 1rem;

  }



  .contact-info h2 {

    font-size: 2rem;

  }



  .contact-form {

    padding: 1.5rem !important;

  }



  .form-group input,

  .form-group select,

  .form-group textarea {

    padding: 0.8rem;

  }



  .footer-grid {

    grid-template-columns: 1fr !important;

    gap: 2rem;

    text-align: center;

  }



  .social-links {

    justify-content: center;

  }



  .footer-bottom {

    font-size: 0.8rem;

  }



  .floating-buttons {

    bottom: 10px;

    right: 10px;

  }



  .float-btn {

    width: 45px;

    height: 45px;

    font-size: 1.5rem;

  }



  .btn-primary,

  .btn-outline,

  .btn-teal,

  .whatsapp-btn,

  .whatsapp-partner-btn,

  .whatsapp-institution-btn {

    padding: 0.7rem 1.2rem !important;

    font-size: 0.9rem !important;

    width: 100%;

  }



  .about-hero-content h1 {

    font-size: 2rem;

  }



  .about-hero-content .breadcrumb {

    font-size: 1rem;

  }



  .mv-card {

    padding: 2rem 1.5rem;

  }



  .mv-card h3 {

    font-size: 1.5rem;

  }



  .mv-card p {

    font-size: 0.95rem;

  }



  .team-img {

    height: 250px;

    font-size: 4rem;

  }

}



/* Fix for all grid layouts */

.service-grid,

.process-grid,

.team-grid,

.value-grid,

.footer-grid,

.partner-grid,

.institution-grid {

  display: grid;

  gap: 1.5rem;

}



/* Fix image responsiveness */

img {

  max-width: 100%;

  height: auto;

}



/* Fix form elements on mobile */

input,

select,

textarea,

button {

  font-size: 16px !important;

}



/* Fix floating buttons overlap */

body {

  padding-bottom: 20px;

}



/* Fix section padding */

section {

  padding: 4rem 0;

}



@media (max-width: 768px) {

  section {

    padding: 3rem 0;

  }



  .about-hero-badge {

    display: none !important;

  }

}



@media (max-width: 576px) {

  section {

    padding: 2.5rem 0;

  }



  .container {

    padding: 0 1rem;

  }

}







/* =========================================

   DESKTOP FIXES - Add this entire section

   ========================================= */



/* Reset mobile styles for desktop */

@media (min-width: 993px) {



  /* Navigation - Desktop */

  .nav-menu {

    display: flex !important;

    flex-direction: row !important;

    max-height: none !important;

    padding: 0 !important;

    position: static !important;

    width: auto !important;

    background: transparent !important;

    box-shadow: none !important;

  }



  .nav-menu a {

    /* padding: 0.5rem 0 !important; */

    width: auto !important;

    border-bottom: none !important;

  }



  .nav-menu .btn-apply {

    width: auto !important;

    margin: 0 !important;

  }



  .dropdown-menu {

    position: absolute !important;

    opacity: 0 !important;

    visibility: hidden !important;

    transform: translateY(10px) !important;

    max-height: none !important;

    padding: 0.8rem 0 !important;

    background: var(--white) !important;

    box-shadow: var(--shadow-md) !important;

  }



  .dropdown:hover .dropdown-menu {

    opacity: 1 !important;

    visibility: visible !important;

    transform: translateY(0) !important;

  }



  /* Hero Section - Desktop */

  .hero-slider-section {

    height: 80vh;

    min-height: 600px;

  }



  .hero-content {

    max-width: 600px;

  }



  .hero-content h1 {

    font-size: 3.2rem !important;

  }



  .hero-buttons {

    flex-direction: row !important;

  }



  .hero-buttons .btn-primary,

  .hero-buttons .btn-outline {

    width: auto !important;

  }



  /* Stats Container - Desktop */

  .stats-container {

    transform: translateY(-50px);

    padding: 2.5rem 2rem;

    gap: 3rem;

    flex-wrap: nowrap;

  }



  .stat-box {

    flex: 1;

  }



  /* About Section - Desktop */

  .about-wrapper {

    grid-template-columns: 1fr 1fr !important;

    gap: 4rem !important;

  }



  .about-image .experience-badge {

    position: absolute !important;

    bottom: 20px !important;

    left: 20px !important;

    width: auto !important;

  }



  .about-content .features-grid {

    grid-template-columns: 1fr 1fr !important;

  }



  /* Services Cards - Desktop */

  div[style*="grid-template-columns: repeat(4, 1fr)"] {

    grid-template-columns: repeat(4, 1fr) !important;

  }



  .service-grid {

    grid-template-columns: repeat(3, 1fr) !important;

  }



  .process-grid {

    grid-template-columns: repeat(3, 1fr) !important;

  }



  /* Contact Section - Desktop */

  .contact-grid {

    grid-template-columns: 1fr 1fr !important;

    gap: 4rem;

  }



  /* Footer - Desktop */

  .footer-grid {

    grid-template-columns: repeat(3, 1fr) !important;

    text-align: left;

  }



  .social-links {

    justify-content: flex-start;

  }



  /* Mission/Vision Cards - Desktop */

  .mv-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 2rem;

  }



  /* Team Grid - Desktop */

  .team-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 2rem;

  }



  /* Achievement Grid - Desktop */

  .achievement-grid {

    display: grid;

    grid-template-columns: repeat(4, 1fr) !important;

    gap: 2rem;

  }



  /* Partner Cards - Desktop */

  div[style*="grid-template-columns: repeat(2, 1fr)"] {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  /* Institution Cards - Desktop */

  div[style*="grid-template-columns: repeat(2, 1fr)"].institution-benefits {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  /* Timeline - Desktop */

  .timeline::before {

    left: 50% !important;

  }



  .timeline-year {

    left: 50% !important;

    transform: translateX(-50%) !important;

  }



  .timeline-content {

    width: 45% !important;

  }



  .timeline-item:nth-child(odd) .timeline-content {

    margin-right: auto !important;

    margin-left: 0 !important;

  }



  .timeline-item:nth-child(even) .timeline-content {

    margin-left: auto !important;

    margin-right: 0 !important;

  }



  /* Partner Page Specific */

  .partner-hero h1 {

    font-size: 3.5rem;

  }



  .partner-card {

    padding: 2.5rem;

  }



  .partner-icon {

    width: 90px;

    height: 90px;

    font-size: 3rem;

  }



  /* Institution Page Specific */

  .institution-hero h1 {

    font-size: 3.5rem;

  }



  .stats-card {

    padding: 2rem;

  }



  .stats-number {

    font-size: 3rem;

  }



  .benefit-item {

    flex-direction: row !important;

    text-align: left !important;

  }



  .benefit-icon {

    margin: 0 !important;

  }



  /* About Hero */

  .about-hero-content h1 {

    font-size: 4rem;

  }



  /* Buttons - Desktop */

  .btn-primary,

  .btn-outline,

  .btn-teal {

    width: auto !important;

  }



  /* Fix any 100% width buttons on desktop */

  .whatsapp-btn,

  .whatsapp-partner-btn,

  .whatsapp-institution-btn {

    width: auto !important;

    min-width: 200px;

  }



  /* Form buttons on desktop */

  .contact-form .btn-submit,

  .contact-form .whatsapp-btn {

    width: 100% !important;

    /* Keep form buttons full width */

  }

}



/* Fix for large desktops */

@media (min-width: 1400px) {

  .container {

    max-width: 1320px;

  }



  .hero-content h1 {

    font-size: 3.5rem;

  }

}



/* Fix for tablet landscape */

@media (min-width: 769px) and (max-width: 992px) {

  .hero-content h1 {

    font-size: 2.5rem;

  }



  .about-wrapper {

    grid-template-columns: 1fr 1fr !important;

    gap: 2rem;

  }



  .service-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .process-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .footer-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .achievement-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .mv-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }



  .team-grid {

    grid-template-columns: repeat(2, 1fr) !important;

  }

}





.about-hero-img { 

  background-image: url('../img/new-india-education-about-us.jpg'); /* Replace with your image path */

  

}



.service-hero-img { 

  background-image: url('../img/new-india-education-services-college-selection.jpg'); /* Replace with your image path */

}



.institute-hero-img { 

  background-image: url('../img/new-india-education-services-counselling.jpg'); /* Replace with your image path */

}



.partner-hero-img { 

  background-image: url('../img/new-india-education-services-partnership.jpg'); /* Replace with your image path */

}



.contact-hero-img { 

  background-image: url('../img/new-india-education-services-post-addmision-support.jpg'); /* Replace with your image path */

}