#header_first_row{
    background-color: rgb(55, 83, 145);
}

.nav-item.li-1:hover{
    background-color: rgb(206, 219, 248) !important;
}

#tutor-usp{
    background-image: url('/static/images/Tutors.webp');       
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    
}

#service-usp{
    background-image: url('/static/images/Services.webp');       
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    

}

#courses-usp{
    background-image: url('/static/images/Courses.webp');       
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;    

}

a.subject:hover{
    color: rgb(15, 107, 160);


}

#footer-down{
    background-image: url('/static/images/student_jumping.webp');
}

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

.span-footer{
    border-bottom: 2px solid white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;  
    
}

@media (min-width: 768px) { /* Medium devices (tablets, 768px and up) */
    .fixed-height-row-md {
      height: 500px;
      background-color: rgb(55, 83, 145);
}}

.marquee-vertical {
    position: relative;
    height: 400px; /* Set a fixed height */
    overflow: hidden;
  }
  
  .marquee-vertical .card-wrapper {
    position: absolute;
    top: 100%; /* Start the cards below the visible area */
    animation: moveUp 90s linear infinite; /* Slower scrolling for smoother effect */
  }

  .anchor-card p {
    text-decoration: none; /* Remove underline from the <p> inside the <a> */
    color: initial; /* Set the default color for the <p> inside the <a> */
  }
  
  .anchor-card:hover p {
    color: rgb(134, 122, 241); /* Change to the color you want on hover (e.g., red) */
    text-decoration: none; /* Ensure no underline appears */
  }
  
  .anchor-card {
    text-decoration: none; /* Remove underline from the link */
  }

  .anchor-card:hover {
    text-decoration: none; /* Ensure no underline on hover */
  }
  
  @keyframes moveUp {
    0% {
      top: 100%; /* Start from below */
    }
    100% {
      top: calc(-100% - (15 * 150px)); /* Move up beyond the visible area */
    }
  }

  ul.custom-bullets {
    list-style-image: url('/concepttutor/static/images/book1.png');
}

.white-hr{
  background-color: white;
    height: 1px;
    border: none;
}

/* #tuition-cover-pic{
  background-image: url('/static/images/Home Tuition.png');
  background-size: cover;
  background-repeat: no-repeat;
  height: 350px; 
} */

#tuition-cover-pic {
  /* background-image: url('/static/images/concept-tutor-page-banner.png'); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  height: 0vh;
  width:100%;
}

  @media (min-width: 992px) {
    #tuition-cover-pic {
      background-image: url('/static/images/concept-tutor-page-banner.webp');
      height:50vh
    }
  
  
  
  
}


/* @media (max-width: 768px) { 
  #tuition-cover-pic {
    background-image: url('/static/images/concept-tutor-head-banner.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 781px;
    width:50%;
    
  }
} */

/* @media (max-width: 768px) { 
  #tuition-cover-pic {
       background-size: contain; 
      height: auto; 
  } 
}  */


@media (max-width: 768px) {
  
  #tuition-cover-pic {
    background-size: cover; /* Ensure the image covers the container */
    /* min-height: 200px; Set a minimum height to ensure visibility  */
    height: 30vh; /* Adjust height for smaller screens */
  }
    
}

@media (max-width: 576px) {
  #tuition-cover-pic {
    height: 25vh; /* Adjust height for very small screens */
  }
}

hr {
  border: none; /* Removes the default border */
  border-top: 2px solid #333; /* Darker color (you can adjust the color and thickness) */
  margin: 20px 0; /* Adjust the spacing around the hr */
}

.float-left-custom {
  float: left; /* Float the image to the left */
  margin-right: 20px; /* Add space to the right of the image */
  margin-bottom: 20px; /* Add space below the image */
  max-width: 50%; /* Limit the width of the image */
}

p {
  overflow: hidden; /* Clear float inside paragraph if needed */
}

.float-right-custom {
  float: right; /* Float the image to the right */
  margin-left: 20px; /* Add space to the right of the image */
  margin-bottom: 20px; /* Add space below the image */
  max-width: 50%; /* Limit the width of the image */
}

.ul-tuition{
  margin-left: 10px;
}

#side{
  background-color: rgb(231, 232, 233);
}


/* Basic styles for the dropdown */
.dropdown-menu {
  display: none; /* Hide the menu by default */
  position: absolute;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: .25rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  z-index: 1000;
  margin-top: 0;
  margin-left: 0;
}

/* Show dropdown menu on hover */
.nav-item:hover >.dropdown-menu {
  display: block;
}

/* Additional styling */
.dropdown-menu a {
  color: #333;
  padding: .5rem 1rem;
  text-decoration: none;
  display: block;
}

/* Add a hover effect to dropdown items */
.dropdown-menu a:hover {
  background-color: #e9ecef;
  color: #007bff;
}

.dropdown-menu .submenu {
  display: none;
  position: absolute;
  left: -45%;
  top: 0;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: .25rem;
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
  z-index: 1000;
  padding:0
}

.dropdown-menu .dropdown-item:hover >.submenu {
  display: block;
}

/* .dropdown-menu {
  pointer-events: none;
}

.dropdown-menu .dropdown-item {
  pointer-events: auto;
} */

html {
  scroll-behavior: smooth;
}

/* Basic styles for hamburger menu */
.hamburger-menu {
  position: relative;
}

.hamburger {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 30px;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 3px;
  background: #333;
  margin: 3px 0;
  transition: 0.3s;
}

/* Styles for menu */
.menu {
  position: absolute;
  top: 50px;
  right: 0;
  background: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  width: 200px;
  display: none; /* Hidden by default */
}

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

.menu ul li {
  border-bottom: 1px solid #ddd;
}

.menu ul li:last-child {
  border-bottom: none;
}

.menu ul li a {
  display: block;
  padding: 15px;
  color: #333;
  text-decoration: none;
  /* transition: background 0.3s; */
  background: #fff;
}

.menu ul li a:hover {
  background: #f1f1f1;
}

/* Styles for active state */
#toggle:checked ~ .hamburger + .menu {
  display: block;
}

#toggle:checked ~ .hamburger span:nth-child(1) {
  transform: rotate(45deg);
  background: #333;
}

#toggle:checked ~ .hamburger span:nth-child(2) {
  opacity: 0;
}

#toggle:checked ~ .hamburger span:nth-child(3) {
  transform: rotate(-45deg);
  background: #333;
}

#main-form{
  border:1px dotted grey;
  border-radius: 10px;
  box-shadow: 0 0px 32px rgba(0, 0, 0, 0.5); /* Creates a soft shadow */
  background-color: #fff; /* Sets the background color of the form */
  z-index: 2;
}

#form-background{
  background-color: rgb(235, 232, 232); 
  
  
}




.form-hr {
  border: none; /* Removes the default border */
  border-top: 2px dotted #858484; /* Darker color (you can adjust the color and thickness) */
  margin: 20px 0; /* Adjust the spacing around the hr */
}

/* .errorlist{
  list-style-type: none;
  color:red;
  font-size: 10px;
  margin:0;
  padding:0
} */

@media (min-width: 768px) { /* md breakpoint */
  .text-md-light {
    color: #0f0f0f; /* Light color */
  }
}


#phone{
  border-radius: 0% 40% 40% 0%;
  background-color: rgb(182, 225, 245);
}

#watsup{
  border-radius: 0% 40% 40% 0% ;
  background-color: rgb(182, 225, 245);
}

.grey-hr {
  border: none; /* Removes the default border */
  border-top: 2px solid #d6d6d6; /* Darker color (you can adjust the color and thickness) */
  margin: 20px 0; /* Adjust the spacing around the hr */
}
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
    position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}
/* Handle submenu positioning */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
}

/* Mobile-friendly override: show dropdown below on small screens */
@media (max-width: 767.98px) {
    .dropdown-submenu > .dropdown-menu {
        left: 0;
        top: 100%;
    }
}