* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 body {
   font-family: 'Poppins', sans-serif;
 }

 .navbar {
   font-size: 1rem;
   padding-top: 1rem;
   padding-bottom: 1rem;
 }

 .nav-link {
   color: #333 !important;
   transition: color 0.3s ease;
 }

 .nav-link:hover,
 .nav-link.active {
   color: #0d6efd !important;
   font-weight: 600;
   position: relative;
 }

 .nav-link.active::after,
 .nav-link:hover::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -5px;
   width: 100%;
   height: 2px;
   background-color: #0d6efd;
 }

 .navbar-brand img {
   height: 40px;
   width: auto;
   object-fit: contain;
 }

 #about ul {
   padding-left: 0;
   margin-top: 1rem;
 }

 #about li {
   margin-bottom: 0.5rem;
   font-size: 1.05rem;
 }

 /*.hero {
  height: 100vh;
  color: black;
  text-shadow: 1px 1px 5px rgba(0,0,0,0.8);
}*/

 .custom-hover {
   transition: all 0.3s ease;
 }

 .custom-hover:hover {
   background-color: #0056b3;
   /* Slightly darker blue */
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   transform: translateY(-2px);
 }

 .hero {
   position: relative;
   z-index: 1;
 }

 .hero-wrapper {
   position: relative;
   overflow-x: hidden;
 }

 .hero-section {
   display: flex;
   align-items: center;
   position: relative;
   height: 100vh;
   padding-top: 5rem;
   padding-bottom: 2rem;
   background: linear-gradient(to right, #005baa, #0096c7);
   min-height: 100vh;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-blend-mode: overlay;
   background-color: rgba(0, 0, 0, 0.5);
   animation: slideBackground 20s infinite ease-in-out;
   color: white;
   overflow: hidden;
 }

 @keyframes slideBackground {
   0% {
     background-image: url('./images/Obeid_Facility_1.jpg')
   }

   33% {
     background-image: url('./images/Obeid_Facility_2.jpeg');
   }

   66% {
     background-image: url('./images/Obeid_Facility_3.jpg');
   }

   100% {
     background-image: url('./images/Obeid_Facility_4.png');
   }
 }

 .doctor-hero-img {
   max-height: 500px;
   object-fit: contain;

 }

 .typewriter-text {
   font-size: 2.5rem;
   font-weight: 600;
   white-space: nowrap;
   font-family: 'Poppins', sans-serif;
   white-space: pre-line;
   overflow: hidden;
   display: inline-block;
   line-height: 1;
   /*border-right: 3px solid white;*/
   width: fit-content;
   /*animation: typing 3s steps(30, end), blink 0.75s step-end infinite;*/
 }

 .col-lg-6 {
   padding-bottom: 10rem;
 }

 /*.cursor {
   display: inline-block;
   width: 5px;
   height: 1em;
   background-color: white;
   margin-left: 2px;
   animation: blinkCursor 0.7s steps(1) infinite;
   vertical-align: bottom;
 }

 @keyframes blinkCursor {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: 0;
   }
 }*/

 @keyframes typing {
   from {
     width: 0
   }

   to {
     width: 100%
   }
 }

 @keyframes blink {

   0%,
   100% {
     border-color: transparent
   }

   50% {
     border-color: white
   }
 }

 @media (max-width: 768px) {
   .hero-section {
     flex-direction: column;
     height: auto;
     padding-top: 6rem;
     padding-bottom: 2rem;
     text-align: center;
     margin-top: -4rem;
   }

   .typewriter-text {
     font-size: 1.5rem;
     line-height: 1.3;
     padding-top: 3rem;
   }

   .hero-section img {
     max-width: 90%;
     margin-top: -15rem;
     height: auto;
   }

   .hero-section .btn {
     font-size: 1rem;
     padding: 0.5rem 1.5rem;
   }

   .hero-section .col-lg-6 {
     margin-bottom: 2rem;
   }

   .doctor-card {
     width: 220px;
   }

   .about-img {
     margin-top: 1rem;
   }

   .footer .row>div {
     text-align: center;
   }

   .footer .row>div:not(:last-child) {
     margin-bottom: 1.5rem;
   }

   .footer form {
     justify-content: center;
   }

   .input-group {
     flex-direction: column;
     gap: 0.5rem;
     width: 100% !important;
   }

   .input-group .form-control,
   .input-group .btn {
     width: 100% !important;
     display: block;

   }

   .input-group input,
   .input-group button {
     width: 100%;
     font-size: 1rem;
     padding: 0.5rem 1rem;

   }

   .input-group button {
     white-space: nowrap;
   }
 }

 @media (max-width: 576px) {
   .appointment-form-container {
     padding: 1rem;
     margin: 1rem 0;
   }

   .appointment-form .form-control,
   .appointment-form .form-select {
     font-size: 1rem;
     padding: 0.6rem 1rem;
   }

   .appointment-form button,
   .appointment-form a {
     font-size: 1rem;
     padding: 0.6rem 1rem;
   }
 }


 /* @media (max-width: 768px) {
   .typewriter-text {
     font-size: 1.5rem;
   }

   .hero-section .btn {
     font-size: 1rem;
     padding: 0.5rem 1.5rem;
   }

   .hero-section img {
     max-width: 90%;
   }

   .doctor-card {
     width: 220px;
   }
 }

 @media (max-width: 767px) {
   .typewriter-text {
     font-size: 1.5rem;
     line-height: 1.2;
   }

   .hero-section .col-lg-6 {
     text-align: center;
     margin-bottom: 2rem;
   }

   .footer .row>div {
     text-align: center;
   }

   .footer .row>div:not(:last-child) {
     margin-bottom: 1.5rem;
   }

   .footer form {
     justify-content: center;
   }

   .footer .input-group {
     flex-direction: column;
   }

   .footer .input-group input {
     margin-bottom: 0.5rem;
   }
 }*/

 .card {
   min-height: 350px;
   overflow: hidden;
 }

 .service-card {
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .service-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
 }

 #services {
   margin-top: -16rem;
   margin-left: 10px;
   ;
 }

 .doctor-slider {
   position: relative;
   overflow-x: auto;
   /*overflow: hidden;*/
   height: 350px;
   /* width: 100%;*/
   overflow-x: auto;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   white-space: nowrap;
   padding-bottom: 1rem;
 }

 .doctor-track {
   display: flex;
   gap: 1rem;
   width: max-content;
   animation: scroll-horizontal 30s linear infinite;
   will-change: transform;
 }

 .doctor-card {
   flex: 0 0 auto;
   width: 260px;
   scroll-snap-align: start;
   background: #fff;
   padding: 1rem;
   border-radius: 10px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   text-align: center;
 }

 .doctor-card img {
   width: 100%;
   height: 200px;
   object-fit: cover;
   border-radius: 8px;
   margin-bottom: 0.5rem;
 }

 .doctor-card:hover {
   transform: scale(1.05);
 }

 .doctor-slider:hover .doctor-track {
   animation-play-state: paused;
 }

 @keyframes scroll-horizontal {
   0% {
     transform: translateX(0);
   }

   100% {
     transform: translateX(-50%);
   }
 }

 .department-card {
   padding: 1.5rem;
   color: white;
   background-size: cover;
   background-position: center;
   border-radius: 12px;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   position: relative;
   overflow: hidden;
   z-index: 1;
 }

 .department-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.45);
   z-index: 0;
 }

 .department-card h5,
 .department-card p {
   position: relative;
   z-index: 1;
 }

 .cardiology {
   background-image: url('./images/Cardiology_Service.jpeg');
 }

 .internal-medicine {
   background-image: url('./images/Internal_Medicine.png');
 }

 .orthopedics {
   background-image: url('./images/Orthopedic.jpeg');
 }

 .pediatrics {
   background-image: url('./images/Pediatrics.jpeg');
 }

 .surgery {
   background-image: url('./images/Surgery_dept.jpeg');
 }

 .oncology {
   background-image: url('./images/Oncology_service.png');
 }

 .radiology {
   background-image: url('./images/Radiology_Service.jpeg');
 }

 .ophthalmology {
   background-image: url('./images/Opthalmology.jpeg');
 }

 .dental {
   background-image: url('./images/Dental_Service.jpeg');
 }

 .department-card {
   min-height: 300px;
   padding: 1.5rem;
   background-size: cover;
   background-position: center;
   color: white;
   border-radius: 12px;
   position: relative;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   overflow: hidden;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 }

 .department-card::before {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.5);
   z-index: 0;
 }

 .department-card h5,
 .department-card p,
 .department-card .btn {
   position: relative;
   z-index: 1;
 }

 .department-card .btn {
   margin-top: auto;
 }

 .appointment-bg {
   background: url('./images/Obeid_hospital.jpg') no-repeat center center;
   background-size: cover;
   min-height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .appointment-form-container {

   background: rgba(255, 255, 255, 0.2);
   border: 1px solid rgba(255, 255, 255, 0.3);
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
   padding: 2rem;
   border-radius: 15px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
   max-width: 600px;
   width: 90%;
   color: #000;
 }

 .learn-more-btn {
   transition: background-color 0.3s ease, transform 0.3s ease;
 }

 .learn-more-btn:hover {
   background-color: #0056b3;
   /* Darker blue */
   transform: translateY(-2px);
 }

 .find-us-section {
   background: url('./images/find-us-bg.jpg') no-repeat center center;
   background-size: cover;
   position: relative;
 }

 .find-us-section::before {
   content: "";
   position: absolute;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: 1;
 }

 .find-us-section .container {
   position: relative;
   z-index: 2;
 }

 .find-us-section input,
 .find-us-section textarea {
   background: #f8f9fa;
   border: 1px solid #ccc;
 }

 .find-us-section .btn-primary {
   background-color: #007bff;
   border: none;
 }

 .find-us-section .btn-primary:hover {
   background-color: #0056b3;
 }

 .footer {
   background-image: url('./images/Obeid_hospital.jpg');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: white;
   position: relative;
   z-index: 1;
 }

 .footer::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 50, 0.7);
   z-index: -1;
 }

 .login-bg,
 .register-bg {
   background: url('./images/Obeid_Facility_2.jpeg') no-repeat center center fixed;
   background-size: cover;
   font-family: 'Poppins', sans-serif;
 }

 .login-bg::before,
 .register-bg::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.6);
   z-index: -1;
 }

 .glass-form {
   background: rgba(255, 255, 255, 0.1);
   border: 1px solid rgba(255, 255, 255, 0.25);
   border-radius: 1rem;
   backdrop-filter: blur(15px);
   -webkit-backdrop-filter: blur(15px);
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }

 .toggle-password i {
   font-size: 1rem;
   color: black;
   padding-top: 2.1rem;
 }

 .about-btn {
   margin-bottom: 5rem;
 }

 .card-text {
   padding: 3rem 2rem
 }

 .card-title {
   font-size: 1.5rem;
   font-weight: 600;
 }

 .lead-text {
   padding-top: 4rem;
   font-size: 17px;
 }

 .about-header {
   font-size: 40px;
   font-weight: 700;
 }