same issue for mobile only
	:root{
	  --nav-h: 60px;
	  --header-h: 200px; /* Desktop */
	  --gap: 16px;
	}

	*{margin:0;padding:0;box-sizing:border-box;}
	html{scroll-behavior:smooth;}
	body{
	  font-family:'Segoe UI',sans-serif;
	  line-height:;
	  padding-top: calc(var(--nav-h) + var(--header-h));
	  background:#fff;
	  font-size:0.9rem;
	}

	/* NAVIGATION */
	nav{
	  position:fixed;
	  top:0;
	  left:0;
	  width:100%;
	  height:var(--nav-h);
	  background:#16355C;
	  color:#fff;
	  display:flex;
	  justify-content:space-between;
	  align-items:center;
	  padding:0 15px;
	  z-index:1000;
	  flex-wrap:nowrap;
	  height: 40px;
	}
	nav .logo{
	  font-size:0.85rem;
	  font-weight:600;
	  white-space:nowrap;
	  margin-right:10px;
	}
	nav .nav-links{
	  display:flex;
	  gap:8px;
	  flex-wrap:nowrap;
	}
	nav a{
	  color:#fff;
	  text-decoration:none;
	  padding:6px 8px;
	  font-size:0.8rem;
	  transition:0.3s;
	  white-space:nowrap;
	}
	nav a:hover{ background:#2ecc71; border-radius:4px; }

	/* HEADER IMAGE */
	header{
	  position:fixed;
	  top:var(--nav-h);
	  left:0;
	  width:100%;
	  height:var(--header-h);
	  background-image: url("homeImage.jpg");
	  background-size: cover;
	  background-position: center;
	  background-repeat: no-repeat;
	  display:flex;
	  align-items:center;
	  justify-content:center;
	  color:#fff;
	  text-align:center;
	  font-size:1rem;
	  box-shadow: inset 0 0 60px rgba(0,0,0,0.5);
	  z-index:900;
	}

	/* SECTIONS */
	111section{
	  padding:60px 15px;
	  text-align:center;
	  scroll-margin-top: calc(var(--nav-h) + var(--header-h) + var(--gap));
	}
	
section {
  min-height: 100vh;   /* full page */
  padding: 60px 15px; 
  text-align: center;
  scroll-margin-top: calc(var(--nav-h) + var(--header-h) + var(--gap));
  
  flex-direction: column;
  justify-content: center; /* vertically center */
}


	
	section h2{ font-size:2em; margin-bottom:20px; }

	.grid{
	  display:grid;
	  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
	  gap:20px;
	  max-width:1000px;
	  margin:0 auto;
	}
	.box{
	  background: rgba(255,255,255,0.05);
	  border-radius:15px;
	  padding:25px 20px;
	  backdrop-filter: blur(12px);
	  box-shadow:0 8px 20px rgba(0,0,0,0.3);
	  transition: transform 0.3s ease;
	}
	.box:hover{ transform:translateY(-10px); }
	.box img{ width:60px; margin-bottom:15px; }
	.box h3{ margin-bottom:10px; font-size:1.2rem; }
	.box p{ font-size:0.9rem; color:#ccc; line-height:1.5; }

	.responsive-img{ max-width:100%; height:auto; display:block; margin:15px auto; }

	footer{
	  background:#2c3e50;
	  color:#fff;
	  text-align:center;
	  padding:20px;
	  font-size:0.85rem;
	}

	/* HOME SPECIAL */
	#home{
	  background: linear-gradient(135deg,#0f2027,#203a43,orange);
	  color:#fff;
	  }
	#home .home-container{ max-width:1200px; margin:auto; text-align:center; }
	#home .home-text{
	  font-size:1.2em;
	  max-width:800px;
	  margin:30px auto 0;
	  line-height:1.6;
	  color:#dcdcdc;
	}
	.highlight{ color:#2ecc71; }
	.green{ color:#2ecc71; }
	.blue{ color:#3498db; }
	.yellow{ color:#f1c40f; }

	/* MOBILE STYLES */
	@media (max-width:768px){
	  :root{  --header-h:140px; }
	  nav .logo{ font-size:0.4rem; }
	  nav a{ font-size:0.4rem; padding:1px 1px; }
	  header{ font-size:0.85rem; padding:10px; }
	  section{ padding:40px 10px; }
	  section h2{ font-size:0.75em; }
	  .box{ padding:15px; font-size:0.8rem; }
	  .box img{ width:45px; margin-bottom:10px; }
	  .box h3{ font-size:1rem; }
	  .grid{ gap:10px; }
	  
	}

	/* SECTION BACKGROUNDS */
	#about, #services, #ceo, #enrollment, #contact{
	  background: linear-gradient(135deg,#0f2027,#203a43,orange);
	}



	/* ==== About ==========*/

	.about-section {
	  padding: 200px 30px 60px;
	  background: linear-gradient(135deg, #141e30, #243b55); /* Dark blue gradient */
	  position: relative;
	  color: burlywood;

	  
	}

	/* scroll offset fix */
	#about::before {
	  content: "";
	  display: block;
	  height: 2px;
	  margin-top: -60px;
	  visibility: hidden;
	}

	.about-container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 25px;
	  max-width: 1000px;
	  margin: auto;
	  background: rgba(255, 255, 255, 0.05); /* transparent glassy bg */
	  border-radius: 16px;
	  backdrop-filter: blur(10px);
	  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
	  padding: 40px 25px;
	}

	.about-text h2 {
	  font-size: 2rem;
	  margin-bottom: 20px;
	  color: #2ecc71; /* Highlighted green */
	  font-weight: 700;
	  text-align: center;
	}

	.about-text ul {
	  list-style: none;
	  padding-left: 0;
	  text-align: left;
	}

	.about-text li {
	  margin-bottom: 12px;
	  font-size: 1.1rem;
	  position: relative;
	  padding-left: 25px;
	}

	.about-text li::before {
	  content: "➤"; /* Stylish arrow bullet */
	  position: absolute;
	  left: 0;
	  color: #f1c40f; /* Yellow arrow */
	  font-size: 1.2rem;
	}

	.about-image img {
	  max-width: 150px;
	  transition: transform 0.3s ease;
	  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
	}
	.about-image img:hover {
	  transform: scale(1.1) rotate(2deg);
	}

	/* Desktop responsive */
	@media (min-width: 768px) {
	  .about-container {
		flex-direction: row;
		justify-content: space-between;
		padding: 50px;
		
	  }
	  .about-text {
		flex: 2;
	  }
	  .about-image {
		flex: 1;
		text-align: center;
	  }
	}


	/* ========== Services ============*/
	.services-section {
	  background: linear-gradient(135deg,#0f2027,#203a43,orange); /* same as home */
	  padding: 2px 20px;
	  text-align: center;
	}

	.services-section h2 {
	  font-size: 2.2rem;
	  margin-bottom: 40px;
	  color: #2ecc71; /* green highlight */
	  font-weight: 700;
	}

	.services-section .grid {
	  display: grid;
	  gap: 30px;
	  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	  max-width: 1100px;
	  margin: auto;
	}

	.services-section .box {
	  background: rgba(255, 255, 255, 0.08); /* glassy effect */
	  padding: 30px 20px;
	  border-radius: 16px;
	  backdrop-filter: blur(10px);
	  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
	  transition: transform 0.3s ease, box-shadow 0.3s ease;
	  color: #fff;
	}

	.services-section .box:hover {
	  transform: translateY(-10px);
	  box-shadow: 0 12px 30px rgba(0,0,0,0.6);
	}

	.services-section img {
	  max-width: 70px;
	  margin-bottom: 15px;
	  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.4));
	}

	.services-section h3 {
	  font-size: 1.3rem;
	  margin-bottom: 10px;
	  color: #f1c40f; /* yellow highlight */
	  font-weight: 600;
	}

	.services-section p {
	  font-size: 0.95rem;
	  color: #dcdcdc;
	  line-height: 1.6;
	}


	/* ========== CEO Section ============*/
	/* CEO Section */
	.ceo-section {
	  padding: 10px 2px 60px;
	  background: linear-gradient(135deg, #141e30, #243b55); /* same as About */
	  color: burlywood;
	}

	.ceo-container {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  gap: 25px;
	  max-width: 1000px;
	  margin: auto;
	  background: rgba(255, 255, 255, 0.05);
	  border-radius: 16px;
	  backdrop-filter: blur(10px);
	  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
	  padding: 40px 25px;
	}

	/* Image */
	.ceo-image img {
	  max-width: 180px;
	  border-radius: 50%;
	  border: 4px solid #2ecc71;
	  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
	  transition: transform 0.3s ease;
	}
	.ceo-image img:hover {
	  transform: scale(1.05);
	}

	/* Text */
	.ceo-details h2 {
	  font-size: 2rem;
	  color: #2ecc71;
	  margin-bottom: 10px;
	  margin-top: 40px;
	}

	.ceo-details h3 {
	  font-size: 1.4rem;
	  color: #f1c40f;
	  margin-bottom: 8px;
	}

	.ceo-details p {
	  font-size: 1rem;
	  color: #dcdcdc;
	  margin-bottom: 12px;
	  line-height: 1.6;
	}

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

	.ceo-details ul li {
	  margin: 8px 0;
	  font-size: 1rem;
	  padding-left: 25px;
	  position: relative;
	  color: #eee;
	}

	.ceo-details ul li::before {
	  content: "➤";
	  position: absolute;
	  left: 0;
	  color: #f1c40f;
	}

	/* Desktop layout */
	@media (min-width: 768px) {
	  .ceo-container {
		flex-direction: row; /* image left, text right */
		align-items: center;
		padding: 10px;
	  }
	  .ceo-image {
		flex: 1;
		text-align: center;
	  }
	  .ceo-details {
		flex: 2;
		text-align: left;
	  }
	}


	/* Enrollment Section (same as Services) */
	.enrollment-section {
	   background: linear-gradient(135deg,#0f2027,#203a43,orange); /* Dark background */
	  padding: 40px 20px;
	  text-align: center;
	}

	.enrollment-section h2 {
	  font-size: 2.2rem;
	  font-weight: 700;
	  color: #2ecc71;  /* Green heading */
	  margin-bottom: 10px;
	  margin-top: 25px; /* Heading वर खेचले */
	  text-transform: uppercase;
	  letter-spacing: 2px;
	}

	.enrollment-section .subtitle {
	  font-size: 1rem;
	  color: #bbb;
	  margin-top: 25px;
	  font-style: italic;
	}

	.enrollment-section .grid {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	  gap: 25px;
	  margin-top: 30px;
	}

	.enrollment-section .box {
	   background: linear-gradient(135deg,#0f2027,#203a43,orange);
	  border-radius: 12px;
	  padding: 30px 20px;
	  box-shadow: 0 6px 15px rgba(0,0,0,0.5);
	  transition: transform 0.3s, box-shadow 0.3s;
	}

	.enrollment-section .box:hover {
	  transform: translateY(-8px);
	  box-shadow: 0 10px 20px rgba(0,0,0,0.6);
	}

	.enrollment-section .box img {
	  max-width: 90px;
	  margin-bottom: 15px;
	}

	.enrollment-section .box h3 {
	  color: #2ecc71;
	  margin-bottom: 12px;
	  font-size: 1.3rem;
	}

	.enrollment-section .box p {
	  color: #ddd;
	  font-size: 0.95rem;
	  margin-bottom: 20px;
	  line-height: 1.5;
	}

	/* Buttons */
	.enrollment-section .btn {
	  display: inline-block;
	  background: #2ecc71;
	  color: #111;
	  font-weight: 600;
	  padding: 10px 22px;
	  border-radius: 8px;
	  text-decoration: none;
	  transition: background 0.3s, transform 0.2s;
	}

	.enrollment-section .btn:hover {
	  background: #27ae60;
	  transform: scale(1.07);
	}




	/* Contact Section */
	.contact-section {
	  padding: 60px 20px;
	  background: linear-gradient(135deg, #1a1a1a, #222);
	  color: #fff;
	  text-align: center;

	}

	.contact-section h2 {
	  font-size: 2.2rem;
	  margin-bottom: 10px;
	  color: #4caf50; /* Green highlight */
	}

	.contact-section .subtitle {
	  font-size: 1.1rem;
	  margin-bottom: 40px;
	  color: #bbb;
	}

	.contact-container {
	  display: grid;
	  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	  gap: 30px;
	  max-width: 1000px;
	  margin: auto;
	}

	.contact-info {
	  background: #2a2a2a;
	  padding: 25px;
	  border-radius: 12px;
	  box-shadow: 0 6px 15px rgba(0,0,0,0.6);
	}

	.contact-info img {
	  max-width: 70px;
	  margin-bottom: 15px;
	}

	.contact-info h3 {
	  margin-bottom: 15px;
	  color: #4caf50;
	}

	.contact-info p {
	  margin: 8px 0;
	  font-size: 1rem;
	  color: #ddd;
	}

	.contact-form {
	  background: #2a2a2a;
	  padding: 25px;
	  border-radius: 12px;
	  box-shadow: 0 6px 15px rgba(0,0,0,0.6);
	  text-align: left;
	}

	.contact-form h3 {
	  margin-bottom: 15px;
	  color: #4caf50;
	}

	.contact-form input,
	.contact-form textarea {
	  width: 100%;
	  padding: 12px;
	  margin-bottom: 15px;
	  border: none;
	  border-radius: 8px;
	  outline: none;
	  background: #333;
	  color: #fff;
	}

	.contact-form input::placeholder,
	.contact-form textarea::placeholder {
	  color: #aaa;
	}

	.contact-form button {
	  background: #4caf50;
	  color: #fff;
	  padding: 12px 20px;
	  border: none;
	  border-radius: 8px;
	  cursor: pointer;
	  font-weight: bold;
	  transition: 0.3s;
	}

	.contact-form button:hover {
	  background: #45a049;
	}






	.contact-container {
	  display: flex;
	  flex-wrap: wrap;
	  gap: 20px;
	}

	.contact-info {
	  flex: 1;
	  min-width: 250px;
	}

	.form-wrapper {
	  flex: 2;
	  min-width: 300px;
	}

	.form-wrapper iframe {
	  width: 100%;
	  height: 400px; /* height adjust कर */
	  border: none;
	  border-radius: 10px;
	}







	header {
	  width: 100%;
	  height: 50vh; /* full screen header */
	  background-image: url('homeImage.jpg');
	  background-size: cover;
	  background-position: center;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: #fff;
	  text-align: center;
	  font-size: 2rem;
	  
	  animation: fadeCollapse 1s forwards;
	  animation-delay: 3s; /* 3 sec दिसेल, नंतर fade out */
	}

	@keyframes fadeCollapse {
	  0% { opacity: 1; }
	  100% { opacity: 0; height: 0; padding: 0; margin: 0; }
	}