/* back to top  */
#myBtn {display: none; position: fixed;bottom: 20px;right: 20px;z-index: 99;border: none;outline: none;background-color: #ffffff; color: #bb7859;cursor: pointer;width: 50px;height: 50px;border-radius: 50%; font-size: 18px;transition: all 0.3s ease; }
#myBtn:hover {background-color: #bb7859;color: white;}
#myBtn i.fa-arrow-up {display: flex;justify-content: center;align-items: center;height: 100%;font-size: 25px;}
.mobile-menu-btn {display: none;background: none;border: none;font-size: 24px;color: #333;cursor: pointer;padding: 10px;position: absolute;right: 20px;top: 20px;z-index: 1001;}
@media only screen and (max-width:768px){header img{width:100%;max-width:100%;height:auto;}}
/* Mobile Navbar Styles */
@media (max-width: 768px) {
  .mobile-menu-btn {display: block;}
  .navbar {position: fixed;top: 0;right: -100%;width: 100%;background: #fff;flex-direction: column;align-items: flex-start;transition: right 0.3s ease;z-index: 1000;box-shadow: -5px 0 15px rgba(0,0,0,0.1);}
  .navbar.active {right: 0;}
  .navbar a {padding: 15px 0;width: 100%;border-bottom: 1px solid #eee;}
/* Ensure navbar has lower z-index */
.navbar {z-index: 1000;}}
@media only screen and (max-width:768px){.appoinment_btn{position:fixed;right:0;top:50%;transform:translateY(-50%);margin-top:0;padding:0.7rem 1.5rem;z-index:1000;border-bottom-right-radius:0;border-top-right-radius:0;}}

/* home */

@media only screen and (max-width: 768px) {
    
.contact-social > ul { display: flex; flex-direction: column; align-items: center; padding: 0; margin: 15px 0; width: 100%; }
.contact-social > ul li { margin: 8px 0; width: 100%; text-align: center; } 
.contact-social > ul li a { justify-content: center; padding: 8px 0; }
}

@media only screen and (max-width: 768px) { 
  .header { padding: 1rem 3%; } 
  .header .logo { width: 40%; } 
  .wrapper { width: 100%; height: auto; margin: 50px auto; background: none; } 
  .name { position: static; text-align: center; font-size: 2.5rem; padding: 20px 0; color: #000 !important; display: none; } 
  .abt_content { position: static; width: 100%; padding: 20px; box-shadow: none; } 
  .abt_content h2 { text-align: center; } 
  .stats { flex-direction: column; gap: 15px; } 
  .services { padding: 30px 0; margin-top: 3em; } 
  .services .services-box { padding-top: 30px; margin-bottom: 20px; } 
  .services .hsptl { margin: 20px auto; } 
  .contact_body { margin-top: 2em; margin-bottom: 2em; } 
  .contact_container { width: 90%; min-width: unset; min-height: unset; box-shadow: 0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.1); } 
  .form-container { flex-direction: column; } 
  .left-container, .right-container { flex: none; width: 100%; height: auto; padding: 30px 20px; } 
  .left-container { order: 1; background-color:#bb7859; color: #ffffff; } 
  .left-container h2 { text-align: center; } 
  .left-container p { color: #ffffff; text-align: center; } 
  .right-container { order: 2; } 
  .right-inner-container, 
  .left-inner-container { width: 100%; height: auto; } 
  .contact_form { border-bottom: 1px solid #333; } 
  .timeline::after { left: 31px; } 
  .timeline-container { width: 100%; padding-left: 70px; padding-right: 25px; } 
  .timeline-container.right { left: 0%; } 
  .timeline-container::before { left: 31px; } 
  .about_content { padding: 30px 15px; font-size: 16px; }
    /* Work experience page*/ 
  .experience-title { margin-bottom: 1em; } 
  .cbp_tmtimeline > li .cbp_tmicon { width: 80px; height: 80px; } 
  .faPra { font-size: 40px; line-height: 80px; } 
  .date { position: relative; top: auto; right: auto; margin-top: 10px; } }

/* testimonials */

@media (min-width: 768px) {
    .testimonial {padding: 40px 34px 20px;}
    .testimonial-photo {height: 84px;width: 84px;top: -32px;}
    .photo-author {height: 68px;width: 68px;top: 8px;left: 8px;}
    .testimonial-content p {padding-top: 25px;line-height: 1.9;}
    .testimonial-author {font-size: 15px;}
  }
      /* ABOUT PAGE */

@media only screen and (max-width: 768px) {
  .about_body h2 {
    font-size: 1.8rem;
    letter-spacing: 1px;
    text-shadow: -1px -1px 5px rgba(0, 0, 0, 0.2);
    line-height: 1.3;
    padding: 0 15px;
    animation: textGlowMobile 3s ease-in-out infinite alternate;
  }
  
  @keyframes textGlowMobile {
    to {
      text-shadow: -1px -1px 8px rgba(0, 0, 0, 0.25);
    }
  }
}