/* ===============================
   home page design
   =============================== */

body {
  font-family: 'Playfair Display', serif;
 
}


/*==========================
  nav bar design 
  ==========================*/
.navbar {
  transition: background-color 0.3s ease;
  
}
.navbar .navbar-nav .nav-link {
  color: #fff;
  font-size: 1.1em;
  padding: 0.5em 1em;
  transition: all 0.3s ease;
}

.navbar .navbar-nav .nav-item .nav-link:hover {
    font-size: 1.2em;
    border: 2px solid #fFF;
    border-radius:10px;
}



.navbar.scrolled {
  background-color: #0A84FF;
}

@media (max-width: 991.98px) {  /* Bootstrap breakpoint for mobile/tablet */
  .navbar-collapse.show {
    background-color: #0A84FF;
  }
}




/*==========================
  cover picture design 
  ==========================*/
  
.cover {
    height: 100vh;
    background-size: cover;        
    background-position: center;   
    background-repeat: no-repeat;
    position: relative;
}

.cover::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

.cover .container {
  position: relative;
  z-index: 2;
}

.btn-primary {
  background-color: #0A84FF;
  border: none;
}

.btn-primary:hover {
  background-color: #0066cc;
}

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


  
  /*==========================
  book button design 
  ==========================*/
.cta-section {
  background-color: #0A84FF; 
  padding: 5rem 0;
}
.cta-section h2 {
  font-size: 1.8rem;
}

@media (min-width: 768px) {
  .cta-section h2 {
    font-size: 2rem;
  }
}



/*==========================
  about us design 
  ==========================*/
  .about-us-section { 
      padding: 8rem 0;
    }

/*==========================
  therapists design 
  ==========================*/
  
     .team-section {
         padding: 8rem 0;
          background-color: #F0FAFF;
        }
    
    .team-member img {
        height:300px;    
        width: 100%;
        aspect-ratio: 4 / 3; 
        object-fit: cover;
        border-radius: 0.5rem;
    }
    
    .team-member h5 {
      margin-top: 0.5rem;
      font-size: 1.1rem;
    }
    
    .team-member p {
      font-size: 0.9rem;
      color: #6c757d;
    }

  
/*==========================
  why choose us design 
  ==========================*/
  #why-choose-us{
     padding: 8rem 0;
  }
  

.image-3d {
  perspective: 1000px;
  position: relative;
  display: inline-block;
}

.image-3d::before {
  content: "";
  position: absolute;
  top: -30px; /* Move above the image */
  left: -30px; /* Move to the left of the image */
  width: 100%;
  height: 100%;
  background: #0A84FF;
  border-top: 10px solid #0A84FF;
  border-left: 10px solid #0A84FF;
  border-radius: 1rem;
  z-index: -1; /* Behind the image */
}

.image-3d img {
  height: 500px;
  object-fit: cover;
  border-radius: 1rem;
  display: block; /* remove extra spacing */
}


.image-3d img:hover {
  transform: rotateY(0deg) rotateX(0deg) scale(1.05);
}


  
  /*==========================
  review design 
  ==========================*/ 
    #reviews{
       background-color: #F0FAFF;
       padding: 8rem 0;
    }
  
  #reviews .border {
    border: 2px solid #31D2F2;
    transition: transform 0.3s;
  }

  #reviews .border:hover {
    transform: translateY(-5px);
  }

  .carousel-control-prev-icon,
  .carousel-control-next-icon {
     
      filter: invert(27%) sepia(91%) saturate(6339%) hue-rotate(190deg) brightness(92%) contrast(101%); 
  }
 

  
  
  /*==========================
  need help section design 
  ==========================*/ 
  
  
    .help-section {
      padding: 10rem 0;
    }
    
    .help-section h2 {
      font-weight: 700;
    }
    
    .help-section p {
      color: #e2e2e2;
    }
    .bg-image {
          background-image: url('../images/5.JPG'); 
          background-position: center;
          background-size: cover;
          background-repeat: no-repeat;
          z-index: 1;
        }
        
    .overlay {
      background: rgba(0, 0, 0, 0.9);
      z-index: 2;
    }

    .help-section .bg-image {
      top: 0;
      left: 0;
    }
    
    .help-section .overlay {
      top: 0;
      left: 0;
    }

  
  
  /*==========================
  footer design 
  ==========================*/
  
    .footer {
      background-color: #0A84FF;
      font-size: 0.9em;
    }
    
    .footer h5 {
      color: #fff;
      font-size: 1.3em;
      margin-bottom: 0.6em;
    }
    
    .footer p, .footer li {
      padding-left: 10px;
      margin-bottom: 0.3em;
    }
    
    .footer a {
      font-size: 1.5em;
      transition: color 0.3s, border 0.3s;
    }
    
    .footer a:hover {
      padding: 5px;
      border-radius: 10px;
      border: 1px solid #fff;
    }
    
    .footer .border-top {
      border-color: rgba(255, 255, 255, 0.2) !important;
      padding-bottom: 0.4em;
    }
    
    /* Align social icons in mobile view */
    @media (max-width: 767.98px) {
      .footer .gap-3 {
        gap: 1rem;
      }
    }


#scrollTopBtn {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 1000;
}


/* ===================================================================================================================
                                                        services Page Styles
   =================================================================================================================== */
   
.service-header {
    background-image: url('../images/cover.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 50vh;
    min-height: 300px;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    margin-top:-50px;
}

.service-header .overlay {
  background: rgba(0, 0, 0, 0.4); 
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.service-header .z-2 {
  z-index: 2;
}

.service-card {
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 12px;
  overflow: hidden;
}

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

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







/* ====================================================================================================================================
                                                             therpaist by service Page Styles
   ==================================================================================================================================== */
  .specialistsbyService {
    background-size: cover;
    background-position: center;
    height: 500px;
    position: relative;
}

.specialistsbyService .overlay {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.specialistsbyService .container {
    z-index: 2;
}

.specialistsbyService-img {
    width: 150px;                
    height: 150px;                
    object-fit: cover;            
    border-radius: 50%;           
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    border: 4px solid #fff;
    margin: auto;
}



.book-now-btn:hover {
    color: #fff !important;
}


/* ====================================================================================================================================
                                                             Login Page Styles
   ==================================================================================================================================== */

    .login-left {
        background: linear-gradient(to bottom, #000080, #00bcd4);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .login-logo {
        width: 250px;
    }
    .auth-button{
        text-decoration:none;
    }
    .auth-button:hover{
        text-decoration:underline;
    }

/* ===============================
   Register Page Styles
   =============================== */

.auth-left {
    background: linear-gradient(to bottom, #005c97, #00c6ff);
    text-align: center;
    padding: 2rem;
}



.auth-left .logo-img {
    width:500px;
    height: auto;
}

.auth-right {
    background-color: #fff;
    padding: 3rem;
}

.auth-right .card-body{
    padding:20px 40px 20px 40px;
}