html {
  scroll-behavior: smooth;
}
#ourservices,
#aboutus,
#home {
  scroll-margin-top: 140px; /* or match your header height */
}
 body {
      margin: 0;
      font-family:Roboto, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f3f6fb;
	  
    }

   header {
      background-color: #fff;
      color: white;
      padding: 1rem 2rem;
      text-align: center;
      font-size: 1.8rem;
      font-weight: bold;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1001;
    }

    .menu-bar {
      background: #544EF7;
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top:1rem;
      position: sticky;
      top: 70px;
      z-index: 1000;
    }
    .menu-bar a {
      color: white;
      text-decoration: none;
      font-weight: bold;
      font-size: 1.2rem;
      transition: color 0.3s;
	  padding:20px;
    }

    .menu-bar a:hover {
      color: #f1c40f;
    }

    .container {
  display: flex;
  flex-wrap: wrap; /* Responsive on small screens */
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
}

    .sidebar {
      width: 20%;
      background-color: #ecf0f1;
      padding: 1rem;
      overflow-y: auto;
	  
    }

.announcements {
      width: 20%;
      background-color: #ecf0f1;
      padding: 1rem;
      overflow-y: auto;
	  
    }

    .main-content {
      width: 60%;
      background-color: #ffffff;
      padding: 1.5rem;
      overflow-y: auto;
	  line-height: 1.6;
	 }
 .img {
  width: 100%;
  height: 300px;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  padding:5px;
}
.img-content {
  flex: 1 1 30%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  overflow: hidden;
  
}
.hero-container {
  position: relative;
  width: 100%;
  height: 550px; /* Full screen height */
  overflow: hidden;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

.hero-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  text-align: center;
  font-size: 2rem;
  z-index: 1;
  padding: 1rem;
 
}

.hero-text h1 {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

.hero-text p {
  font-size: 1.5rem;
  text-shadow:
    -1px -1px 0 black,
     1px -1px 0 black,
    -1px  1px 0 black,
     1px  1px 0 black;
}

	

.pcolor {
  background-color: #fff;
  padding: 2rem;
  padding-top:.2rem;
  flex: 1; /* Take up remaining space */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  line-height: 1.6;
  
}
	.pcolor h3 {
   /* Reduce spacing below the heading */
}

.pcolor p {
  margin-top: 0; /* Remove space above the paragraph */
  text-align: justify;
  hyphens: auto;
}
.pcolor a {
  display: block;
  margin-top: 1rem; /* optional: adds space above the link */
  color: #0066cc;    /* optional: link color */
  text-decoration: none;
  font-weight: bold; /* optional: makes the link stand out */
}
	.title-content {
      width: 100%;
      background-color: #fff;
      padding-left:1rem;
	  font-size:1rem;
	  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }
	 
	.home-content {
      width: 60%;
      background-color: #fff;
      padding: 2rem;
      overflow-y: auto;
	  float:left;
	  font-size:1rem;
	  line-height: 1.6;
	 }

    .ad-box, .announcement-box {
      background-color: #ffffff;
      margin-bottom: 1rem;
      padding: 1rem;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      border-left: 5px solid #2980b9;
	  
    }

    .course {
      border-bottom: 1px solid #ddd;
      padding-bottom: 1rem;
      margin-bottom: 1rem;
    }

    .course h3 {
      margin-top: 0;
      color: #2c3e50;
    }
 .category-link {
      display: block;
      margin: 0.5rem 0;
      color: #2980b9;
      font-weight: bold;
      text-decoration: none;
	  font-size:12px;
    }

    .category-link:hover {
      text-decoration: none;
	  background-color:green;
	  color:white;
    }
    footer {
      text-align: center;
      padding: 1rem;
      background-color: #2c3e50;
      color: #ecf0f1;
    }



.sidebar,
.main-content,
.announcements {
  padding: 1rem;
  box-sizing: border-box;
}

/* Desktop default widths */
.sidebar {
  width: 20%;
}

.main-content {
  width: 60%;
}

.announcements {
  width: 20%;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
  .img-content{
	  width:100%;
  }
  .home-content{
  width:100%;}
  .sidebar,
  .main-content,
  .announcements {
    width: 100%;
  }
}
@media (max-width: 600px) {
	.body{
		width: 100%;
		
	}
  .container {
    flex-direction: column;
	 
  }

  .sidebar, .main-content, .announcements,.title-content,.home-content,.img-content{
  

	
	    }
		.pcolor{
		
		}
		
.home-content{
  }
  
  .menu-bar {
    flex-wrap: wrap;
  padding-right:3rem;
    justify-content: center;
  }

  .menu-bar a {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 5px;
  }

  header {
    font-size: 1.4rem;
    padding: 0.7rem 1rem;
  }
}