.header{

  position:fixed;
  top:0;
  right:0;
  left:0;
z-index: 10;

 }
 
 
 .topbar {
   background-color: #799EFF;
   color: white;
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   padding: 12px;
   height: 50px
 }

 .topbar .container-fluid .tb {

   margin-left: 120px;
 }

 .topbar a {
   color: white;
   text-decoration: none;
   margin-left: 5px;
 }

 .topbar a:hover {
   text-decoration: underline;
   color: black;
 }

 .topbar .container-fluid .btn {
   padding: 0px auto;
   margin: 0px auto;

 }

 .topbar .container-fluid .btn:hover {
   color: black;
   background-color: #ffe480;

 }

 /* header secion star */

 .header h1 {
   margin-left: 150px;
   font-family: Georgia, 'Times New Roman', Times, serif;

 }

 .header {
   background-color: #ffe480;
   ;
 }

 .header a:hover {

   text-decoration: underline;


 }

 /* header secion star */
 /* hero section start*/

 .hero{
  margin-top: 116px;
 }
 .hero .carousel-item {
   height: 600px;

 }

 .hero .carousel-item img {
   height: 100%;
   width: 100%;
   object-fit: cover;
 }

 .hero .carousel-item h2 {
   font-size: 60px;
   margin-bottom: 50px;
   text-shadow: 7px 0px 0px black;
 }

 .hero .carousel-item p {
   font-size: 40px;
   text-shadow: 3px 0px 0px rgb(0, 0, 252);
 }

 .hero .carousel-item .form {
   margin-bottom: 60px;
 }

 /* hero section end*/
 /*main section 1 start*/
 /* .main{
  background-color: #feffc4;
} */
 .main .feature-box .img-fluid {

   margin-left: 50px;
 }

 .main .row .border {
   border: 2px solid black;

 }

 .main h2 {
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
 }

 .main h5 {
   font-family: Georgia, 'Times New Roman', Times, serif;

 }

 .main p {
   font-family: Verdana, Geneva, Tahoma, sans-serif;

 }

 /*main section 1 end */
 /* popular cousre start*/
 .course-section h2 {
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }

 .course-section p {
   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }

 .course-section {
   background-color: #feffc4;
 }

 /* popular cousre end*/
 .register-section {
   background: url('https://images.unsplash.com/photo-1555066931-4365d14bab8c') no-repeat center center/cover;
   color: white;
   padding: 60px 0;
 }

 .overlay {
   background-color: rgba(0, 0, 0, 0.7);
   padding: 60px 30px;
 }

 .register-box h2 {
   font-weight: 700;
   font-size: 2.5rem;
 }

 .register-box p {
   font-size: 1rem;
   line-height: 1.7;
 }

 .stats h3 {
   color: #00c0f3;
   font-weight: 700;
 }

 .form-box {
   background: white;
   padding: 50px 30px;
   border-radius: 5px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
 }

 .form-box h4 {
   font-weight: bold;
   color: #333;
 }

 .form-control,
 .form-select {
   margin-bottom: 15px;
 }

 .btn-submit {
   background-color: #00c0f3;
   color: white;
   padding: 10px 25px;
   font-weight: bold;
   border: none;
 }

 .btn-submit:hover {
   background-color: #00a4d8;
 }

 /* main section 3 start*/
 .last p {
   font-family: cursive;
 }

 /* main section 3 end*/
 /* upcoming event */
 .last {
   background-color: #feffc4;
 }

 /* footer section*/
 .footer {
   background-color: #799EFF;
 }

 .footer ul li a,
 .footer ul li address {
   color: #f7810a;
   font-size: large;

 }

 .footer ul li a:hover,
 .footer ul li address:hover {
   color: white;
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   text-decoration: dotted;
 }

 .footer p {
   font-family: initial;
 }

 /* footer section end*/

 /* responsive section */

 @media (max-width:740px) {

   .hero .carousel-item h2 {
     height: 10px;
   }
 }

 /* Course css */
 .roadmap {
   padding: 40px 20px;
   text-align: center;
   max-width: 1200px;
   margin: 0 auto;
 }

 .roadmap h2 {
   font-size: 2.5em;
   color: #2c3e50;
   text-transform: uppercase;
   letter-spacing: 3px;
   margin-bottom: 20px;
   animation: fadeInDown 1s ease-in-out;
 }

 .colorful-line {
   height: 6px;
   background: linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1);
   width: 60%;
   margin: 0 auto;
   border-radius: 3px;
   animation: slideIn 1s ease-in-out;
 }

 .content-section {
   margin: 30px 0;
   opacity: 0;
   transform: translateY(20px);
   animation: fadeInUp 1s ease-in-out forwards;
   animation-delay: 0.3s;
   font-family: cursive;
 }

 .roadmap article {
   background-color: #fff;
   padding: 20px;
   border-left: 5px solid #007bff;
   margin: 15px 0;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .roadmap article:hover {
   transform: translateY(-5px);
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
 }

 .roadmap article h3 {
   color: #007bff;
   margin-bottom: 10px;
 }

 .roadmap article p {
   text-align: left;
   font-size: 1.1em;
   color: #555;
 }

 .bottom.navbar {
   background-color: #2c3e50;
   padding: 15px;
   position: sticky;
   top: 0;
   z-index: 1000;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }

 .course-container {
   max-width: 1200px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   gap: 20px;
   flex-wrap: wrap;
 }

 .course-item {
   background-color: #007bff;
   color: white;
   padding: 12px 20px;
   border-radius: 5px;
   cursor: pointer;
   position: relative;
   text-align: center;
   transition: background-color 0.3s ease, transform 0.3s ease;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .course-item i {
   font-size: 1.2em;
 }

 .course-item:hover {
   background-color: #0056b3;
   transform: scale(1.05);
 }

 .tap-to-explore {
   font-size: 0.9em;
   color: #e0e0e0;
   margin-top: 5px;
   font-style: italic;
   transition: color 0.3s ease;
   cursor: pointer;
 }

 .course-item:hover .tap-to-explore {
   color: #fff;
 }

 .dropdown {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: #fff;
   min-width: 250px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
   border-radius: 8px;
   padding: 10px;
   z-index: 100;
   flex-direction: column;
   animation: slideDown 0.3s ease-in-out;
 }

 .course-item.active .dropdown {
   display: flex;
 }

 .dropdown-item {
   color: #007bff;
   padding: 10px;
   cursor: pointer;
   border-radius: 5px;
   transition: background-color 0.3s ease;
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .dropdown-item:hover {
   background-color: #f0f0f0;
 }

 .description-container {
   display: none;
   position: absolute;
   top: 0;
   left: 100%;
   width: 320px;
   background-color: #fff;
   padding: 15px;
   border: 1px solid #ddd;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   z-index: 10;
   flex-direction: column;
   gap: 10px;
 }

 .dropdown-item:hover .description-container {
   display: flex;
 }

 .description-text {
   font-size: 0.95em;
   color: #333;
 }

 .requirements-text {
   font-size: 0.9em;
   color: #666;
 }

 .syllabus-link a {
   display: block;
   padding: 8px;
   color: #007bff;
   text-decoration: none;
   font-weight: 500;
   transition: color 0.3s ease;
 }

 .syllabus-link a:hover {
   color: #0056b3;
   text-decoration: underline;
 }

 img {
   max-width: 100%;
   height: auto;
   border-radius: 8px;
   margin-bottom: 10px;
 }

 .back-to-top {
   position: fixed;
   bottom: 20px;
   right: 20px;
   background-color: #007bff;
   color: white;
   padding: 10px 15px;
   border-radius: 50%;
   cursor: pointer;
   display: none;
   transition: background-color 0.3s ease;
 }

 .back-to-top:hover {
   background-color: #0056b3;
 }

 @keyframes fadeInDown {
   0% {
     opacity: 0;
     transform: translateY(-20px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes fadeInUp {
   0% {
     opacity: 0;
     transform: translateY(20px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @keyframes slideIn {
   0% {
     width: 0;
   }

   100% {
     width: 60%;
   }
 }

 @keyframes slideDown {
   0% {
     opacity: 0;
     transform: translateY(-10px);
   }

   100% {
     opacity: 1;
     transform: translateY(0);
   }
 }

 @media (max-width: 768px) {
   .course-container {
     flex-direction: column;
     align-items: center;
   }

   .course-item {
     width: 100%;
     max-width: 300px;
   }

   .dropdown {
     position: static;
     width: 100%;
     max-width: 300px;
     margin-top: 10px;
   }

   .description-container {
     position: static;
     width: 100%;
     margin-top: 10px;
   }



 }

 /* About Page css */
 .section-title {
   font-weight: 700;
   font-size: 32px;
 }

 .card-title {
   font-weight: 600;
   font-size: 20px;
 }

 .card-text {
   color: #666;
   font-size: 14px;
 }

 .card img {
   height: 200px;
   object-fit: cover;
 }



 .section-title {
   font-weight: 700;
   font-size: 32px;
 }

 .video-wrapper {
   position: relative;
   max-width: 100%;
   overflow: hidden;
   border-radius: 10px;
 }

 .video-wrapper img {
   width: 100%;
   height: auto;
   display: block;
 }

 .play-button {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #007bff;
   color: white;
   border: none;
   border-radius: 50%;
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 }

 .accordion-button::after {
   background-image: none;
 }

 .accordion-button:focus {
   box-shadow: none;
 }

 .accordion-button:not(.collapsed) {
   color: #007bff;
   background-color: #eef5ff;
 }

 .tutor-card {
   border: none;
   border-radius: 12px;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
   transition: transform 0.3s;
   background-color: white;
 }

 .tutor-card:hover {
   transform: translateY(-5px);
 }

 .tutor-img {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   object-fit: cover;
   height: 240px;
 }

 .social-icons i {
   margin: 0 8px;
   cursor: pointer;
   transition: color 0.2s;
 }

 .social-icons i:hover {
   color: #007bff;
 }

 .register-section {
   background: url('image/a6.jpg')no-repeat center center/cover;
   position: relative;
   padding: 80px 0;
   color: white;
 }

 .overlay {
   background-color: rgba(0, 0, 0, 0.6);
   padding: 60px 40px;
 }

 .form-container {
   background-color: white;
   padding: 30px;
   border-radius: 8px;
   color: #333;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
 }

 .form-control:focus {
   box-shadow: none;
   border-color: #00bfff;
 }

 .submit-btn {
   background-color: #00bfff;
   border: none;
   color: white;
   font-weight: bold;
 }

 .submit-btn:hover {
   background-color: #009ace;
 }

 .stats {
   margin-top: 40px;
 }

 .stats h4 {
   font-size: 28px;
   color: #00bfff;
 }

 .stats p {
   font-size: 14px;
   color: #ddd;
 }

 @media (max-width: 768px) {
   .register-section {
     text-align: center;
   }
 }

 /* blog page css */

 .blog {
   background-color: #feffc4;

 }

 .blog .container-fluid .img {
   height: 400px;
   width: 100%;


 }

 .blog h2 {
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
 }

 .blog h3 {
   font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
   font-size: 35px;
   font-weight: 10px;
 }

 .blog p {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 /* .blog.img-image img{
    height: 100%;
    width: 100;
    padding: 2px auto;
    margin: 50px;
    object-fit: cover;

} */

 /* <video src="media/v3.mp4" autoplay muted  class="img-fluid" height="300px" width="400px"></video> */

 .video-section {
   height: 200px;
 }

 .video-section video {
   height: 100%;
 }
 /* contact*/
/* reg*/
 .form-container {
      width: 100%;
      max-width: 500px;
      padding: 30px;
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      margin: 10px auto;
}
 /* login section*/
.form-container{
  margin-top:120px;
}