/* ------------------------------------------------
  Project:   Gharbia Health Care
  Author:    Bibin K.P
  Copyright: © 2025 Gharbia Healthcare. All rights reserved.
  Description: Official website of Gharbia Health Care.
------------------------------------------------ */

/* ------------------------
    Table of Contents

  1. General
  2. Typography
  3. Helper class
  4. Text color
  5. Background color
  6. Jarallax
  7. Pattern
  8. Border Radius
  9. Banner
  10. Countdown
  11. Terms and Conditions
  12. Privacy Policy
  13. Contact
  14. About Us
  15. Video
  16. Side Background
  17. Popup
  18. Menu Price List
  19. List Icon
  20. Nice Select


/* ------------------------
    General
------------------------*/
@import url('https://fonts.googleapis.com/css?family=Fira+Sans:300,400,400i,500,600,700,800,900');

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-style: normal;

  /* Auto responsive font size */
  font-size: clamp(14px, 2vw, 18px);

  line-height: 1.5;
  color: #000000;
  overflow-x: hidden;
}

html {
  scroll-behavior: smooth;
}

/* ------------------------
    Typography
------------------------*/
h1, h2, h3, h4, h5, h6, h7{font-weight:normal; margin-top: 0px; margin-bottom: 0px; text-transform: capitalize;}
h1 a, h3 a, h4 a, h5 a, h6 a { color: inherit; }
h1 { font-size: 70px; font-style: normal; line-height: 75px; font-weight: 600; text-transform: capitalize; color: #1e90ff;}
h3 {   font-size: 30px;font-family: "Times New Roman", Times, serif;line-height: 36px; }
h4 { font-size: 24px; font-style: normal; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; line-height: 30px; color: #202125;}
h5 { font-size: 20px; font-style: normal; text-transform: uppercase; margin-bottom: 10px; font-weight: 500; line-height: 26px; color: #202125;}
h6 { font-size: 18px; font-style: normal; line-height: 24px; margin-bottom: 10px; color: #202125;}
h7 { font-size: 30px; font-style: "Segoe UI", Roboto; line-height: 30px; }
ul { margin: 0px; padding: 0px; }


/* ------------------------
    Helper class
------------------------*/
p{line-height: 1.7;}
.grey-bg p{color: #202125}
.lead{font-weight: normal; font-size: 16px; line-height: 30px;}
.z-index-0{z-index: 0; position: relative;}
.z-index-1{z-index: 1; position: relative;}
h1 span{color: #1e90ff;}
section{padding: 66px 0;}
.section-title{margin-bottom:50px;}
.section-title p{font-size: 16px;}


.font-w-3{font-weight: 300;}
.font-w-4{font-weight: 400;}
.font-w-5{font-weight: 500;}
.font-w-6{font-weight: 600;}
.font-w-7{font-weight: 700;}
.font-w-8{font-weight: 800;}
.font-w-9{font-weight: 900;}


.line-h-2{line-height: 1.6;}
.line-h-3{line-height: 1.7;}
.line-h-4{line-height: 1.8;}
.line-h-5{line-height: 1.9;}

.letter-space-1{letter-spacing: 5px;}
.letter-space-2{letter-spacing: 10px;}
.letter-space-3{letter-spacing: 15px;}


/* ------------------------
    Text color
------------------------*/
.text-theme{color:#1e90ff;}
.text-black{color:#202125 !important;}
.text-grey{color:#565857 !important;}
.text-yellow{color:#1e90ff;}
.text-rgba{color: rgba(255,255,255,0.8);}

/* ------------------------
    Jarallax
------------------------*/
.jarallax {position: relative; z-index: 0;}
.jarallax > .jarallax-img {position: absolute;  object-fit: cover; font-family: 'object-fit: cover;'; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;}


/* ------------------------
    Border Radius
------------------------*/
.radius{-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.radius-0{-webkit-border-radius:0px; -moz-border-radius:0px; border-radius:0px;}
.radius-1{-webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
.radius-2{-webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px;}
.radius-3{-webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px;}
.radius-4{-webkit-border-radius:50%; -moz-border-radius:50%; border-radius:50%;}

/* ------------------------
    Banner
------------------------*/
.fullscreen-banner{position: relative; min-height: 800px;}
[data-bg-img]{background-size: cover; background-position: center center; background-repeat: no-repeat;}
.align-center{position: absolute; top: 50%; width: 100%; z-index: 9;}
.align-end{position: absolute; bottom: 0; width: 100%; z-index: 9;}
.fullscreen-banner .owl-carousel, .fullscreen-banner .owl-stage-outer, .fullscreen-banner .owl-stage, .fullscreen-banner .owl-item, .fullscreen-banner .item { height: 100%; }
.banner-slider h1 { letter-spacing: 8px; text-transform: capitalize; font-weight: 800; }
.banner-slider h5{position: relative; padding-left: 40px; display: inline-block; background: #1e90ff;}
.banner-slider h5:before{content: ""; position: absolute; background: #ffffff; left: 0; top: 50%; margin-top: -1px; width: 30px; height: 2px; }
.banner-slider.owl-carousel .owl-dots{bottom: 4%;}


/* -------------------------------
   Background Position & Size
-------------------------------*/
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.bg-pos-l { background-position: left; }
.bg-pos-r { background-position: right; }
.bg-pos-rt { background-position: right top; }
.bg-pos-lt { background-position: left top; }
.bg-pos-rb { background-position: right bottom; }
.bg-pos-lb { background-position: left bottom; }
.bg-repeat { background-repeat: repeat; }

/* ------------------------
    About Us
------------------------*/
.gif-logo {
  height: 80px;
  width: auto;
  display: block;
  margin: 20px auto;
  animation: fadeIn 2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.featured-step {
  position: relative;
  overflow: hidden;            /* clip the blurred layer */
  padding: 2rem;               /* whatever spacing you had */
  background-color: rgba(255,255,255,0.8); /* optional, to soften the blur */
  z-index: 0;                  /* establish stacking context */
}

.featured-step.blurred-bg::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url('images/PIC/A3.JPG') center/cover no-repeat;
  filter: blur(8px);
  transform: scale(1.05);      /* avoid sharp edges showing */
  z-index: -1;                 /* send behind the content */
}

/* ------------------------
    About Us
------------------------*/
.about-2{display: inline-block; text-align: center; border:9px solid #1e90ff; width: 100%;}
.about-2 h3{background: #1e90ff; color: #ffffff; padding: 15px; margin-bottom: 0; text-transform: capitalize;}
.about-2 .working-hours {padding: 30px; display: inline-block; width: 100%;}
.about-2 .working-hours li{border-color: #ff0000; font-size: 16px; font-weight: bold;}
.about-2:before{z-index: 0;}
.appoinment-img {bottom: 0; position: absolute;}


/* ------------------------
    Countdown
------------------------*/
.countdown{margin:50px 0; display: table; width: 100%;}
.countdown > li{padding: 0 30px; font-weight: 700; text-align: center; border-right: 1px dashed rgba(0,0,0,0.1); list-style-type: none; display: table-cell; width: auto;}
.countdown > li:last-child{border-right: none;}
.countdown > li span{font-size:70px; font-weight:300; line-height:60px; margin-bottom: 20px; display: inline-block;}
.countdown > li p{font-size:20px; text-transform: uppercase; line-height:30px; margin-bottom: 0; color: #1e90ff;}
.dark-bg .countdown > li{border-color:rgba(255,255,255,0.2) }

/* ------------------------
    Terms and Conditions
------------------------*/
.terms-and-conditions p{margin-bottom:25px;}
.terms-and-conditions ul.list{margin-bottom:20px; display:block;}
.terms-and-conditions ul.list li i{padding-right:12px; font-size:15px;}

/* ------------------------
    Privacy Policy
------------------------*/
.privacy-policy p{margin-bottom:25px;}
.privacy-policy ul.list{margin-bottom:20px; display:block;}
.privacy-policy ul.list li i{padding-right:12px; font-size:15px;}

/* ------------------------
    Contact
------------------------*/
.contact-info li {padding-left: 50px; position: relative;}
.contact-info li i{position: absolute; left: 0; top: 0; line-height: 24px; font-size: 30px; color: #1e90ff; text-align: center;}
.contact-info li span{font-size: 16px; color: #202125; font-weight: bold; text-transform: uppercase; display: block; margin-bottom: 8px;}
.contact-info li p{margin-bottom: 0; line-height: 24px;}
.contact-info li a{color: #202125;}
.dark-bg .contact-info li a{color: #ffffff;}
.contact-info li a:hover{color: #1e90ff;}
.theme-bg .contact-info span, .dark-bg .contact-info span{color: #ffffff}
.theme-bg .contact-info li i{color: #ffffff;}
.theme-bg .contact-info li a{color: #ffffff;}
.theme-bg .contact-info li a:hover{color: #202125;}
.contact-1 .contact-box {position: absolute; top: 50%; z-index: 99; transform: translateY(-50%); width: 100%;}

.form-group{margin-bottom: 20px; position: relative;}
 label{font-size: 14px; color: #333}
.form-control{height: 50px; border-radius: 0; font-size: 13px; color: #202125; background: none; border: none; border-bottom: 2px solid #f5f5f5; box-shadow: none;}
.dark-bg .form-control, .theme-bg .form-control{color: #ffffff;}
.dark-bg select.form-select option, .theme-bg select.form-select option { color: black; }
.grey-bg .form-control{background: #ffffffa1}
textarea.form-control{height: 150px;}
.form-control:focus{box-shadow: none; background: none; border-color: #1e90ff;}
.theme-bg .form-control:focus{border-color: #202125;}
select.form-control {-moz-appearance: none; -webkit-appearance: none; appearance: none; height: 50px !important;}
iframe{width: 100%; border: none; pointer-events: auto;}
.iframe-h{height: 500px !important;}
.iframe-h-2{height: 600px !important;}
.map iframe {border: 0px; width: 100%; height: 100%; z-index: 1;}
.help-block.with-errors {position: absolute; color: red; right: 15px; font-size: 10px; line-height: 14px;}

.form-control::-webkit-input-placeholder {color: #202125;}
.form-control::-moz-placeholder {color: #202125;}
.form-control:-ms-input-placeholder {color: #202125;}
.form-control:-moz-placeholder {color: #202125;}
.dark-bg .form-control::-webkit-input-placeholder, .theme-bg .form-control::-webkit-input-placeholder {color: #ffffff;}
.dark-bg .form-control::-moz-placeholder, .theme-bg .form-control::-moz-placeholder {color: #ffffff;}
.dark-bg .form-control:-ms-input-placeholder, .theme-bg .form-control:-ms-input-placeholder {color: #ffffff;}
.dark-bg .form-control:-moz-placeholder, .theme-bg .form-control:-moz-placeholder {color: #ffffff;}


/* ------------------------
    Video
------------------------*/
.video-btn {position: relative; display: inline-block; min-height: 50px; min-width: 60px;}
.video-btn .btn-play {font-size: 30px; background: #1e90ff; color: #fff; line-height: 50px; width: 70px; height: 70px; border: 10px solid rgba(0,0,0,0.1); -webkit-border-radius: 100%;
 border-radius: 100%; text-align: center; cursor: pointer; display: inline-block; -webkit-transition: .15s ease-in-out; transition: .15s ease-in-out; -webkit-transition-property: color, background, border-color; transition-property: color, background, border-color; }
.video-btn .btn-play {position: absolute; top: 50%; left: 0; margin-top: -30px; z-index: 5;}
.video-btn .btn-play:after, .video-btn .btn-play:before {content: ''; border: 10px solid; border-color: inherit; width: 270%; height: 270%; -webkit-border-radius: 100%; border-radius: 100%;
 position: absolute; left: -85%; top: -85%; opacity: 1; -webkit-animation: 1s videomodule-anim linear infinite; animation: 1s videomodule-anim linear infinite; }
.video-btn .btn-play:before {-webkit-animation-delay: .5s; animation-delay: .5s; }
.video-btn-pos{position: absolute; position: absolute; left: 50%; top: 50%; width: auto !important;}
.theme-bg .video-btn .btn-play, .dark-bg .video-btn .btn-play{background: #ffffff; border-color: #ddd; color: #1e90ff;}
.html5-video {height: 100%; left: 0; opacity: 1; overflow: hidden; position: absolute; top: 0; width: 100%; z-index: -2;}
.html5-video video {width: 100%;}

/* ------------------------
    Side Background
------------------------*/
.image-column {
  position: absolute;
  left: 0px;
  top: 0;
}

.image-column.right {
  left: inherit;
  right: 0;
}

/* ------------------------
    Popup
------------------------*/
.modal{z-index: 99999; top: 150px;}
.modal-backdrop{z-index: 9999;}
.modal-dialog{margin: 0 auto;}

/* ------------------------
    Menu Price List
------------------------*/
.pricing-list li{border-top: 1px dashed #ddd; color: #1e90ff; font-weight: 500; float: left; padding: 11px 0 12px; position: relative; text-align: right; width: 100%;}
.pricing-list li:first-child {border-top: none;}
.pricing-list li span {float: left; font-size: 16px; font-weight: 600; color: #202125; position: relative; text-align: left; text-transform: capitalize; width: auto;}


/* ------------------------
    List Icon
------------------------*/
.list-icon li{position: relative; padding-left: 20px;}
.list-icon li i{position: absolute; left: 0; top: 5px; color: #1e90ff}


/* ------------------------
    Nice Select
------------------------*/
.nice-select{-webkit-tap-highlight-color:transparent;border: none; padding-top: 0; padding-bottom: 0; padding-left: 0.75rem; border-bottom: 2px solid #f5f5f5;box-sizing:border-box;clear:both;cursor:pointer;display:block;float:left;font-size:14px;font-weight:normal;height:50px;line-height:50px;outline:none;padding-right:30px;position:relative;text-align:left !important;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap;width:100%;}
.dark-bg .nice-select span, .theme-bg .nice-select span{color: #ffffff;}
.nice-select:active, .nice-select.open, .nice-select:focus{border-color:#1e90ff;}
.nice-select:after{border-bottom:2px solid #999;border-right:2px solid #999;content:'';display:block;height:5px;margin-top:-4px;pointer-events:none;position:absolute;right:12px;top:50%;-webkit-transform-origin:66% 66%;-ms-transform-origin:66% 66%;transform-origin:66% 66%;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-transition:all 0.15s ease-in-out;transition:all 0.15s ease-in-out;width:5px;}
.theme-bg .nice-select:after{border-bottom:2px solid #ffffff;border-right:2px solid #ffffff;}
.nice-select.open:after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg);}
.nice-select.open .list{opacity:1;pointer-events:auto;-webkit-transform:scale(1) translateY(0);-ms-transform:scale(1) translateY(0);transform:scale(1) translateY(0);}
.nice-select.disabled{border-color:#ededed;color:#999;pointer-events:none;}
.nice-select.disabled:after{border-color:#cccccc;}
.nice-select.wide{width:100%;}
.nice-select.wide .list{left:0 !important;right:0 !important;}
.nice-select.right{float:right;}
.nice-select.right .list{left:auto;right:0;}
.nice-select.small{font-size:12px;height:36px;line-height:34px;}
.nice-select.small:after{height:4px;width:4px;}
.nice-select.small .option{line-height:34px;min-height:34px;}
.nice-select .list{background-color:#fff;width:100%;border-radius:5px;box-shadow:0 0 0 1px rgba(68, 68, 68, 0.11);box-sizing:border-box;margin-top:4px;opacity:0;overflow:hidden;padding:0;pointer-events:none;position:absolute;top:100%;left:0;-webkit-transform-origin:50% 0;-ms-transform-origin:50% 0;transform-origin:50% 0;-webkit-transform:scale(0.75) translateY(-21px);-ms-transform:scale(0.75) translateY(-21px);transform:scale(0.75) translateY(-21px);-webkit-transition:all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;transition:all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;z-index:99;}
.nice-select .list:hover .option:not(:hover){background-color:transparent !important;}
.nice-select .option{color: #202125; width: 100%; cursor:pointer;font-weight:400;line-height:40px;list-style:none;min-height:40px;outline:none;padding-left:18px;padding-right:29px;text-align:left;-webkit-transition:all 0.2s;transition:all 0.2s;}
.nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus{background-color:#f6f6f6;}
.nice-select .option.selected{font-weight:bold;}
.nice-select .option.disabled{background-color:transparent;color:#999;cursor:default;}
.no-csspointerevents .nice-select .list{display:none;}
.no-csspointerevents .nice-select.open .list{display:block;}


.box {
    background-color: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* normal shadow */
    transition: all 0.3s ease;
    margin: 40px;
    text-align: center;
    font-size: 18px;
  }

  .box:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25); /* hover shadow */
    transform: translateY(-5px); /* lift effect */
  }
  .hover-glow {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  font-weight: bold;
  margin: 30px auto;
  max-width: 300px;
}

.hover-glow:hover {
  border-color: #007bff;
  box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
}
.hover-slide-up, .hover-glow, .hover-rotate, .hover-effect {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  transition: all 0.4s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: 20px;
  text-align: center;
  font-weight: bold;
}

/* Individual effects */
.hover-slide-up:hover {
  transform: translateY(-10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.hover-glow:hover {
  border: 2px solid #007bff;
  box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
}

.hover-rotate:hover {
  transform: rotate(-2deg) scale(1.03);
}
.animated-box {
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  font-size: 18px;
  margin: 40px auto;
  max-width: 300px;
  width: 100%;
  will-change: transform;
  position: relative; /* ensures hover doesn't affect others */
  z-index: 1;
}

.animated-box:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
  transform: scale(1.03);
  z-index: 10;
}
.service-box {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  border-bottom: 3px solid #e50914; /* red border like image */
  box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* no shadow initially */
  transition: all 0.3s ease-in-out;
  height: 100%;
}

.service-box:hover {
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
}

.box-num {
  float: right;
  color: #e50914;
  font-size: 24px;
  font-weight: bold;
}
.glow-box {
  box-shadow: 0 0 12px rgba(229, 9, 20, 0.3); /* red glow */
  transition: all 0.3s ease;
}

.glow-hover {
  transition: all 0.4s ease;
  border-radius: 10px;
  border-bottom: 0px solid red;
}

.glow-hover:hover {
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4); /* red glow */
  transform: translateY(-5px);
}

/* ensures hover doesn't affect others */

#soundToggle {
  position: fixed;
  top: 5px;
  right: 15px;
  z-index: 1000;
  background: #fff;
  border: 1px solid #ffffff;
  padding: 6px 10px;
  border-radius: 0px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.video-section {
  background-image: url('images/FRONT.jpg'); /* Change to your image path */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 100px 0; /* Optional: adds vertical space */
  position: relative;
  z-index: 1;
}

.video-section1 {
  background-image: url('images/FRONT.jpg'); /* Change to your image path */
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  padding: 100px 0; /* Optional: adds vertical space */
  position: relative;
  z-index: 1;
}


@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-360deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

.aos-animate[data-aos="rotate-in"] {
  animation: rotateIn 1s ease forwards;
}

.fade-scroll {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.6s ease;
}

.fade-box {
  text-align: center;
  background: white;
  padding: 60px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
}


  
  .rotating-badge {
    position: relative;
    width: 150px; /* 👈 Change badge size */
    height: 150px;
    margin: 50px auto; /* 👈 Change positioning (e.g., auto, 0, etc.) */
  }

  .rotating-badge .ring {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: rotateBadge 8s linear infinite;
    top: 0;
    left: 0;
  }

  .rotating-badge .logo {
    position: absolute;
    width: 120px; /* 👈 Change logo size */
    height: 120px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
    @keyframes rotateBadge {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  /* Share group button */
.floating-share-group {
  position: fixed;
  top: 45%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 9999;
}

.share-btn {
  background: #8e44ad;
  color: white;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px 0 0 8px;
}

.share-menu {
  display: none;
  flex-direction: column;
  margin-top: 5px;
}

.share-menu a {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  margin-top: 4px;
  border-radius: 8px 0 0 8px;
}

.whatsapp { background: #25D366; }
.facebook { background: #3b5998; }

/* Separate social icons */
.floating-social-icons {
  position: fixed;
  top: 65%;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 9999;
}

.floating-social-icons a {
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  margin-top: 4px;
  border-radius: 8px 0 0 8px;
}

.instagram {
  background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  background-size: 300% 300%;
  animation: instagramGradient 5s ease infinite;
}
.tiktok { background: #000000; }
.threads { background: #121212; }

@keyframes instagramGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.testimonial-box {
      position: relative;
      padding: 60px 20px;
      background: url('images/VISA2.jpg') center/cover no-repeat;
      color: #fff;
    }

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

    .testimonial-box > .container {
      position: relative;
      z-index: 2;
    }

    .finger-print {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 60px;
      opacity: 0.05;
      z-index: 2;
    }

    .aswini-name h6 {
      color: #ddd;
      font-size: 14px;
    }

    .aswini-name h1 {
      font-size: 36px;
      font-weight: bold;
      color: #fff;
    }

    .customer-box {
      display: flex;
      gap: 40px;
      margin-top: 20px;
    }

    .customer-reviews h3 {
      font-size: 28px;
      margin-bottom: 0;
    }

    .href-btn a {
      display: inline-block;
      background: linear-gradient(to right, #b24592, #f15f79);
      color: #fff;
      padding: 12px 25px;
      border-radius: 25px;
      text-decoration: none;
      font-weight: bold;
      margin-top: 30px;
    }

    .href-btn a:hover {
      background: linear-gradient(to right, #a13d84, #e14a66);
    }

    .swiper-slide img {
      width: 100%;
      border-radius: 12px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }

    .swiper-pagination {
      margin-top: 20px;
    }

    .slide-img-wrap {
      padding: 10px;
    }
    /* Container Box */
.myPromoBox {
    background: #fff url('') no-repeat center center / cover;
    border-radius: 12px;
    padding: 20px; /* Changed from -1px to a positive value */
    margin: 30px auto;
    max-width: 1400px; /* Set your desired max width */
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
}

/* Heading */
.myPromoHeader {
    text-align: center;
    margin-bottom: 20px;
}

.myPromoHeader h2 {
    font-size: 28px;
    color: #0c5b65;
    margin-bottom: 10px;
}

.myPromoHeader p {
    font-size: 15px;
    color: #555;
}

/* Slider Track */
.myPromoSlider {
    display: flex;
    overflow: hidden;
    position: relative;
}

.myPromoTrack {
    display: flex;
    transition: transform 0.5s ease;
}

/* Each Slide */
.myPromoSlide {
    padding: 10px;
    box-sizing: border-box;
}

/* For Desktop: 3 posters per slide */
@media (min-width: 768px) {
    .myPromoSlide {
        min-width: 33.3333%;
    }
}

/* For Mobile: 2 posters per slide */
@media (max-width: 768px) {
    .myPromoSlide {
        min-width: 50%;
    }
}

/* Promo Card */
.myPromoCard img {
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    width: 100%;
    transition: transform 0.3s ease;
}

.myPromoCard img:hover {
    transform: scale(1.03);
}

/* Navigation Arrows */
.myPromoNav {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.myPromoNav button {
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    font-size: 20px;
    width: 40px;
    height: 40px;
    border: none;
    color: #0c5b65;
    pointer-events: all;
    cursor: pointer;
    transition: background 0.3s ease;
}

.myPromoNav button:hover {
    background: #0c5b65;
    color: #fff;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* Container for the scrolling text */
.scrolling-text {
    /* Customize the width of the container */
    width: 57%; /* Adjust the width. You can change this to fit your needs (e.g., 100%, 150%, etc.) */
    
    /* Customize the height of the container */
    height: 80px; /* Adjust height based on your design. Change this value for taller/shorter containers */
    
    /* Text that goes outside of the container will be hidden */
    overflow: hidden; /* Use overflow:hidden to make sure the scrolling text doesn't overflow */
    
    /* Background color of the container */
    background-color: #ffffff00; /* You can change this to any color you prefer */
    
    /* Border around the container (optional) */
    border: 2px solid #cccccc00; /* Customize border size and color */
    
    /* Positioning the container absolutely within the page */
    position: absolute; /* Position the container using absolute positioning */
    
    /* Positioning customization */
    top:-12px; /* Adjust the top value to move the container vertically (e.g., 20px, 100px) */
    left: -205px;
    right: 0; /* Align container to the right side of the page (0 means it takes full width) */
    
    /* Center the container horizontally */
    margin-left: auto; /* These two properties center the container horizontally */
    margin-right: auto; /* These two properties center the container horizontally */
    
    /* You can also use transform for centering:
       transform: translateX(-50%); and position: relative for better centering control */
}

/* Customizing the scrolling text */
.scrolling-text p {
    white-space: nowrap; /* Prevents text from wrapping to the next line */
    
    /* Text color customization */
    color: #000000; /* Adjust text color (e.g., #ff0000 for red, #00ff00 for green) */
    
    /* Font size */
    font-size: 15px; /* Increase or decrease this value to adjust the text size */
    
    /* Font weight */
    font-weight: normal; /* You can change this to 'normal' or 'lighter' */
    
    margin: 0;
    padding: 20px 0; /* Padding inside the container to adjust vertical spacing */
    
    /* Position the text absolutely inside the container */
    position: absolute;
    
    /* Text scroll animation */
    animation: scrollText 29s linear infinite; /* Scroll speed (change '20s' to make it faster or slower) */
}

/* Keyframes for scrolling text animation */
@keyframes scrollText {
    0% {
        transform: translateX(100%); /* Text starts off-screen to the right */
    }
    100% {
        transform: translateX(-124%); /* Text scrolls off-screen to the left (124% width ensures full scroll) */
    }
}


  h1 {
    text-align: center;
    margin-bottom: 15px;
    font-weight: 350;
    font-size: 35px;
  }

  /* Filters & Search Container */
  .MegaSocial_filters,
  .MegaSocial_search {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
  }

  /* Platform Filters */
  .MegaSocial_filters button {
    border: 1.5px solid #0a2d4a;
    background: transparent;
    padding: 8px 18px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.25s ease, color 0.25s ease;
    min-width: 85px;
  }

  .MegaSocial_filters button.MegaSocial_active,
  .MegaSocial_filters button:hover {
    background-color: #0a2d4a;
    color: #fff;
  }

  /* Year, Month Select and Search */
  select,
  input[type="search"] {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1.5px solid #bbb;
    font-size: 15px;
    min-width: 140px;
    transition: border-color 0.3s ease;
  }

  select:focus,
  input[type="search"]:focus {
    outline: none;
    border-color: #0a2d4a;
    box-shadow: 0 0 5px rgba(10, 45, 74, 0.5);
  }

  input[type="search"] {
    flex-grow: 1;
    min-width: 220px;
    max-width: 400px;
  }

 /* Grid Container */
.MegaSocial_grid {
  max-width: 1140px; /* limits width so it won't be too wide on large screens */
  margin: 0 auto 30px auto; /* centers horizontally and adds bottom margin */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

  /* Card Styling */
  .MegaSocial_card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
  }

  .MegaSocial_card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgb(0 0 0 / 0.12);
  }

  .MegaSocial_card img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
  }

  .MegaSocial_card img:hover {
    transform: scale(1.12);
  }

  .MegaSocial_close-btn {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(10, 45, 74, 0.85);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    font-size: 18px;
    transition: background-color 0.25s ease;
  }

  .MegaSocial_close-btn:hover {
    background: #e74c3c;
  }

  .MegaSocial_card-content {
    padding: 15px 18px 18px 18px;
  }

  .MegaSocial_card-date {
    font-size: 12px;
    color: #777;
    margin-bottom: 8px;
    font-style: italic;
  }

  .MegaSocial_card-title {
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 10px;
    line-height: 1.3;
    display: flex;
    align-items: center;
  }

  /* Platform icon next to title */
  .MegaSocial_platform-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
  }

  .MegaSocial_platform-icon:hover {
    filter: grayscale(0%);
  }

  .MegaSocial_card-link {
    font-size: 13px;
    color: #0a2d4a;
    text-decoration: none;
    font-weight: 600;
  }

  .MegaSocial_card-link:hover {
    text-decoration: underline;
  }

  /* Pagination */
  .MegaSocial_pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .MegaSocial_pagination button {
    border: 1.5px solid #0a2d4a;
    background: transparent;
    color: #0a2d4a;
    padding: 7px 14px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.25s ease, color 0.25s ease;
    min-width: 36px;
  }

  .MegaSocial_pagination button.MegaSocial_active,
  .MegaSocial_pagination button:hover {
    background-color: #0a2d4a;
    color: #fff;
  }

  /* Responsive tweaks */
  @media (max-width: 600px) {
    body {
      padding: 15px 15px;
    }
    .MegaSocial_filters,
    .MegaSocial_search {
      justify-content: flex-start;
    }
    input[type="search"] {
      min-width: 100%;
      max-width: none;
    }
    .MegaSocial_grid {
      grid-template-columns: 1fr;
    }
  }

  /* ===== GLOBAL CUSTOM VARIABLES ===== */
:root {
  --main-bg: #ffffff;              /* Background of the page */
  --card-bg: #ffffff;              /* Doctor card background */
  --card-hover-bg: #f7faff;        /* Card background on hover */
  --text-primary: #0a3d62;         /* Primary text color */
  --text-secondary: #555;          /* Secondary text color */
  --button-bg: linear-gradient(45deg, #1e90ff, #00bfff);
  --button-hover-bg: linear-gradient(45deg, #00bfff, #1e90ff);
  --button-text: #ffffff;
  --shadow-color: rgba(0,0,0,0.1);
}

/* ===== MAIN CONTAINER ===== */
.HugeClinicSliderMainContainer {
  background: var(--main-bg);
  padding: 40px 0;
  max-width: 1300px;
  margin: auto;
}

.HugeClinicSliderHeading {
  text-align: center;
  font-size: 30px;
  margin-bottom: 25px;
  font-weight: bold;
  color: var(--text-primary);
}

/* ===== DOCTOR CARD ===== */
.HugeClinicDoctorCard {
  background: var(--card-bg);
  border-radius: 15px;
  text-align: center;
  padding: 20px;
  box-shadow: 0 4px 20px var(--shadow-color);
  transition: all 0.4s ease;
}
.HugeClinicDoctorCard:hover {
  transform: scale(1.05);
  background: var(--card-hover-bg);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.HugeClinicDoctorCard img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 15px;
  transition: transform 0.4s ease;
}
.HugeClinicDoctorCard:hover img {
  transform: scale(1.15);
}

.HugeClinicDoctorName {
  font-size: 20px;
  font-weight: bold;
  color: var(--text-primary);
}

.HugeClinicDoctorSpecialty {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 15px;
}

/* ===== BUTTONS ===== */
.HugeClinicButton {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 15px;
  margin: 5px;
  text-decoration: none;
  color: var(--button-text);
  background: var(--button-bg);
  transition: all 0.4s ease;
  animation: HugeClinicPulse 2s infinite;
}
.HugeClinicButton:hover {
  transform: scale(1.1) rotate(2deg);
  background: var(--button-hover-bg);
}

@keyframes HugeClinicPulse {
  0% { box-shadow: 0 0 0 0 rgba(30,144,255, 0.6); }
  70% { box-shadow: 0 0 0 15px rgba(30,144,255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30,144,255, 0); }
}

/* ===== SWIPER NAVIGATION ===== */
.swiper-button-next, .swiper-button-prev {
  color: var(--text-primary);
}
.swiper-pagination-bullet-active {
  background: #1e90ff !important;
}

/* ======== GRAND MAJESTIC GOLDEN VIDEO SHOWCASE ======== */
.grandMajesticGoldenVideoShowcaseSection {
  background-color: #ffffff69;
  padding: 60px 20px;
  color: hsl(0, 0%, 0%);
  text-align: center;
}

.grandMajesticGoldenVideoShowcaseWrapper {
  max-width: 1200px;
  margin: auto;
}

.grandMajesticGoldenVideoShowcaseTitle {
  font-size: 32px;
  margin-bottom: 10px;
  font-weight: bold;
}

.grandMajesticGoldenVideoShowcaseSubtitle {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.grandMajesticGoldenVideoShowcaseGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.grandMajesticGoldenVideoItem {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.grandMajesticGoldenVideoItem:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.grandMajesticGoldenVideoItem iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

@media (max-width: 900px) {
  .grandMajesticGoldenVideoShowcaseGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .grandMajesticGoldenVideoShowcaseGrid {
    grid-template-columns: 1fr;
  }
}

/* ===== MOBILE BOTTOM HORIZONTAL NAV ===== */
.MobileBottomNav {
  display:none; /* hide by default */
}

@media(max-width:768px){
  .MobileBottomNav {
    display:flex;
    position: fixed;
    bottom:0;
    left:0;
    width:100%;
    background: linear-gradient(135deg,#0077b6,#00b4d8);
    justify-content:space-around;
    align-items:center;
    padding:10px 0;
    z-index:9999;
    box-shadow:0 -4px 15px rgba(0,0,0,0.25);
    transform:translateY(100%);
    transition: transform 0.4s ease-in-out;
  }
  .MobileBottomNav.showNav{transform:translateY(0);}
  .MobileBottomNav button,
  .MobileBottomNav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:600;
    font-size:13px;
    text-decoration:none;
    background:none;
    border:none;
    padding:6px 10px;
    cursor:pointer;
    position:relative;
  }
  .MobileBottomNavIcon{
    font-size:22px;
    margin-bottom:2px;
    animation:pulseIcon 2.5s infinite;
    transition:transform 0.3s ease;
  }
  .MobileBottomNav button:hover .MobileBottomNavIcon,
  .MobileBottomNav a:hover .MobileBottomNavIcon{
    transform:scale(1.2);
  }
  .MobileDropdown {
    position:absolute;
    bottom:50px;
    left:50%;
    transform:translateX(-50%) scale(0.95);
    background:#fff;
    border-radius:8px;
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
    display:flex;
    flex-direction:column;
    min-width:160px;
    overflow:hidden;
    opacity:0;
    max-height:0;
    pointer-events:none;
    transition:all 0.3s ease;
    z-index:9998;
  }
  .MobileDropdown.show{
    opacity:1;
    max-height:500px;
    pointer-events:auto;
    transform:translateX(-50%) scale(1);
  }
  .MobileDropdown a{
    padding:12px;
    border-bottom:1px solid #eee;
    font-size:14px;
    color:#333;
    font-weight:500;
  }
  .MobileDropdown a:hover{background:#f0f8ff;}
  .MobileDropdown a:last-child{border-bottom:none;}
  @keyframes pulseIcon{
    0%{transform:scale(1);}
    50%{transform:scale(1.08);}
    100%{transform:scale(1);}
  }
}

/* ===== DESKTOP ROUND BUTTON ===== */
.DesktopQuickAccess{
    bottom: 80px; /* button moves higher from bottom */
    transition: bottom 0.3s ease;
}

@media(min-width:769px){
.DesktopQuickAccess {
    display: flex;
    position: fixed;
    bottom: 98px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #0077b6;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 9999;
    
    /* Animations */
    animation: fadeIn 15s ease forwards, pulseBtn 2s infinite;
}

/* Fade-in animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px); /* optional: slight slide up */
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Existing pulse animation */
@keyframes pulseBtn {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 6px 16px rgba(0,0,0,0.4);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    }
}

  .DesktopQuickAccess:hover{background:#005f9e;}
  @keyframes pulseBtn{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
  }

  .DesktopQuickMenu{
    display:flex;
    position:fixed;
    bottom:98px;
    right:49px;
    background:#fff;
    border-radius:12px;
    box-shadow:0 6px 16px rgba(0,0,0,0.25);
    flex-direction:column;
    min-width:180px;
    z-index:9998;
    display:none;
    animation:expandUp 0.3s ease forwards;
    transition: bottom 0.3s ease;
  }
  .DesktopQuickMenu a{
    padding:12px 16px;
    color:#0077b6;
    text-decoration:none;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:6px;
    border-bottom:1px solid #eee;
  }
  .DesktopQuickMenu a:last-child{border-bottom:none;}
  .DesktopQuickMenu a:hover{background:#f0f8ff;}
  @keyframes expandUp{
    0%{opacity:0; transform:translateY(10px);}
    100%{opacity:1; transform:translateY(0);}
  }
}

 p.subtitle {
    color: #009499;
    margin-bottom: 40px;
    font-weight: bold;
  }

  .carousel-container {
    overflow: hidden;
    width: 100%;
  }

  .carousel-track {
    display: flex;
    gap: 20px;
    animation: slide 15s linear infinite;
  }

  .testimonial {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    flex: 0 0 calc((100% - 40px)/3); /* 3 cards per view on desktop */
    text-align: left;
  }

  /* Tablet: 2 per view */
  @media (max-width: 991px) and (min-width: 600px) {
    .testimonial {
      flex: 0 0 calc((100% - 20px)/2);
    }
  }

  /* Mobile: 1 per view */
  @media (max-width: 599px) {
    .testimonial {
      flex: 0 0 100%;
    }
  }

  .testimonial p { font-size: 14px; color: #555; min-height: 60px; }

  .testimonial .patient-info {
    display: flex;
    align-items: center;
    margin-top: 15px;
  }

  .testimonial .patient-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .testimonial .patient-info div {
    font-size: 14px;
    color: #009499;
    font-weight: bold;
  }

  .testimonial .patient-info span {
    display: block;
    font-size: 12px;
    color: #999;
    font-weight: normal;
  }

  /* Duplicate track for seamless effect */
  .carousel-track .testimonial:nth-child(n) {
    animation-delay: 0s;
  }

  @keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* moves half of the track width */
  }


/* Content stays above animation */
.bg-animated1 {
  position: relative;
  z-index: 1;
  padding: 60px 0;
  background: transparent !important; /* no static bg */
}

.services-box {
  background: #ffffffab;       /* white background */
  border: 2px solid #e0e0e000; /* light grey border */
  border-radius: 1px;       /* rounded corners */
  padding: 40px 30px;        /* inner spacing */
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); /* soft shadow */
  margin: 50px auto;         /* spacing around */
  max-width: 3200px;         /* keep it centered */
}

.services-box1 {
  background: #ffffffa2;       /* white background */
  border: 2px solid #e0e0e000; /* light grey border */
  border-radius: 1px;       /* rounded corners */
  padding: 40px 30px;        /* inner spacing */
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); /* soft shadow */
  margin: 50px auto;         /* spacing around */
  max-width: 3200px;         /* keep it centered */
}

.services-box2 {
  background: #ffffffb7;       /* white background */
  border: 2px solid #e0e0e000; /* light grey border */
  border-radius: 1px;       /* rounded corners */
  padding: 40px 30px;        /* inner spacing */
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); /* soft shadow */
  margin: 50px auto;         /* spacing around */
  max-width: 3200px;         /* keep it centered */
}
.services-box4 {
  background: #ffffffa9;       /* white background */
  border: 2px solid #e0e0e000; /* light grey border */
  border-radius: 1px;       /* rounded corners */
  padding: 40px 30px;        /* inner spacing */
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); /* soft shadow */
  margin: 50px auto;         /* spacing around */
  max-width: 3200px;         /* keep it centered */
}
.services-box0 {
  background: #ffffff75;       /* white background */
  border: 2px solid #e0e0e000; /* light grey border */
  border-radius: 1px;       /* rounded corners */
  padding: 40px 30px;        /* inner spacing */
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1); /* soft shadow */
  margin: 0px auto;         /* spacing around */
  max-width: 3200px;         /* keep it centered */
}

/* Hospital Info Section Styles */
.hospital-info-section {
    background: #f8f9fa; /* optional overall background if needed */
    color: #fff;
}

.featured-doctor-bg {
    background-color: #007bff; /* blue theme */
}

.schedule-bg {
    background-color: #343a40; /* dark theme */
}

.emergency-bg {
    background-color: #28a745; /* green theme */
}

.section-title {
    font-size: 1.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: capitalize;
}

.section-description {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.highlight-text {
    font-weight: 800;
    text-decoration: underline;
}

.action-btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.action-btn:hover {
    background-color: #fff;
    color: inherit;
    text-decoration: none;
}

.schedule-list li {
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.contact-number .action-btn {
    font-size: 1.25rem;
}

   #genome-particles { position:absolute; width:100%; height:100%; top:0; left:0; background:#f0f0f0; z-index:0; }
    .genome-content { position:relative; z-index:1; text-align:center; top:40%; transform:translateY(-40%); }
    .genome-content h1 { font-size:2.5rem; color:#9933ff; margin-bottom:10px; }
    .genome-content p { font-size:1.2rem; color:#333; }


/* ===== SECTION & CONTAINER ===== */
.fancy-timetable-section {
  padding: 60px 20px;
  background: #ffffff79;
  color: #fff;
  font-family: 'Arial', sans-serif;
  text-align: center;
}
.fancy-timetable-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  align-items: center;
}

/* ===== CARDS ===== */
.fancy-timetable-card {
  flex: 1 1 320px;
  padding: 35px 25px;
  border-radius: 20px;
  transition: transform 0.4s, box-shadow 0.4s;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.fancy-timetable-card h4 {
  margin-bottom: 15px;
  font-size: 1.6em;
  text-transform: uppercase;
}
.fancy-timetable-card p,
.fancy-timetable-card ul {
  font-size: 1em;
  line-height: 1.7;
}
.fancy-timetable-card ul {
  list-style: none;
  padding: 0;
}
.fancy-timetable-card ul li {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 500;
}
.fancy-timetable-card ul li i {
  color: #ffcc00;
  animation: bounceIcon 1.2s infinite;
}

/* ===== CARD THEMES ===== */
.fancy-theme-bg {
  background: #ffffff00;
  box-shadow: 0 8px 25px rgba(106,17,203,0.3);
  color: #9b0000;
}
.fancy-dark-bg {
  background: #ffffff00;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.288);
  color: #a70000;
}

/* ===== BUTTON ===== */
.fancy-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 12px 25px;
  border: 2px solid hsl(0, 100%, 33%);
  border-radius: 50px;
  color: #a80000;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s;
}
.fancy-btn:hover {
  background: #ffffff;
  color: #810000;
  transform: translateY(-6px) scale(1.05);
  box-shadow: 0 0 15px #fff;
}

/* ===== CARD HOVER GLOW ===== */
.fancy-timetable-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 15px 35px rgb(106, 101, 101);
}

/* ===== ANIMATIONS ===== */
.animate-card {
  opacity: 0;
  transform: translateY(60px);
  animation: fadeUpFancy 0.8s forwards;
}
.fancy-timetable-card:nth-child(1) { animation-delay: 0.2s; }
.fancy-timetable-card:nth-child(2) { animation-delay: 0.4s; }
.fancy-timetable-card:nth-child(3) { animation-delay: 0.6s; }

@keyframes fadeUpFancy {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounceIcon {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
  .fancy-timetable-container { flex-direction: column; align-items: center; }
}

/* Container & Columns */
.hyper-footer {
  background: #ffffff00;
  color: #000000;
  padding: 60px 20px 30px;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}
.hyper-container {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.hyper-col {
  flex: 1 1 300px;
  opacity: 0;
  transform: translateY(30px);
}

/* Logo */
.hyper-logo {
  width: 150px;
  transition: transform 0.5s;
}
.hyper-logo:hover {
  transform: rotate(10deg) scale(1.1);
}

/* Text */
.hyper-text {
  margin: 20px 0;
  line-height: 1.6;
  color: #000000;
}

/* Buttons */
.hyper-btn {
  display: inline-block;
  padding: 10px 25px;
  background: #ff3b3f;
  color: #0300b6;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.hyper-btn:hover {
  background: #ff1a1d;
}
.hyper-arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s;
}
.hyper-btn:hover .hyper-arrow {
  transform: translateX(5px);
}

/* Lists */
.hyper-list {
  list-style: none;
  padding: 0;
}
.hyper-list li {
  margin: 10px 0;
}
.hyper-list li a {
  color: #2d5ee2;
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}
.hyper-list li a::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  background: #ff3b3f;
  left: 0;
  bottom: -3px;
  transition: 0.3s;
}
.hyper-list li a:hover::after {
  width: 100%;
}

/* Highlights */
.hyper-highlight {
  color: #ff3b3f;
}

/* Subscribe Form */
.hyper-subscribe {
  display: flex;
  margin-top: 20px;
}
.hyper-subscribe input {
  flex: 1;
  padding: 10px 15px;
  border-radius: 50px 0 0 50px;
  border: none;
  outline: none;
  box-sizing: border-box;
}
.hyper-subscribe button {
  padding: 10px 20px;
  border: none;
  background: #ff3b3f;
  color: #fff;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
  transition: background 0.3s;
}
.hyper-subscribe button:hover {
  background: #ff1a1d;
}

/* Social */
.hyper-social {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.hyper-social-icon {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #fff;
  border-radius: 50%;
  font-size: 18px;
  transition: transform 0.3s, background 0.3s;
}
.hyper-social-icon:hover {
  transform: scale(1.3) translateY(-5px);
  background: #ff3b3f;
}

/* Responsive */
@media(max-width: 992px) {
  .hyper-container { flex-direction: column; gap: 30px; }
}

.hug-letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
}

.hug-letter.animate {
  animation: hugFadeUp 0.6s forwards;
}

@keyframes hugFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .hug-letter {
    transform: translateY(15px);
  }
}
/* Subtitle and heading new classes */
.healthcare-subtitle-text {
  font-size: 2.6rem;
  color: #1e90ff;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  font-weight: 500;
}
.healthcare-subtitle-edits {
  font-size: 1.1rem;
  color: #555555;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
  font-weight: 500;
}

.healthcare-heading-text {
  font-size: 2.8rem;
  color: #222222;
  font-weight: 700;
  line-height: 1.3;
}

/* Letter animation new classes */
.healthcare-letter-span {
  display: inline-block;
  opacity: 0;
  transform: translateY(25px);
}

.healthcare-letter-animate {
  animation: healthcareFadeUpAnim 0.7s forwards;
}

@keyframes healthcareFadeUpAnim {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .healthcare-letter-span {
    transform: translateY(15px);
  }
  .healthcare-heading-text {
    font-size: 2rem;
  }
  .healthcare-subtitle-text {
    font-size: 1.4rem;
  }

}

:root {
  --logo-width: 120px;
  --logo-margin: 20px;

  /* Font colors (easily customizable) */
  --main-color: #ffffff;
  --sub-color: #cce0ff;

  --main-font-size: 2rem;
  --sub-font-size: 1.1rem;
  --swipe-distance: -120%;
}

/* Loader container */
.loaderOptimized {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
/* Loader hidden animation */
#loaderOptimized.hidden {
  animation: swipeUpFade 1.2s forwards;
}

@keyframes swipeUpFade {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

/* Loader subtext */
.subOptimized {
  margin-top: 10px;
  font-size: 18px;
  color: #333;
}

/* Animate main content fade in */
#contentOptimized {
  opacity: 0;
  transition: opacity 0.5s ease;
}

#contentOptimized.visible {
  opacity: 1;
}

/* Hospital image background */
.loaderBackground {
  position: absolute;
  inset: 0;
  background: url('images/clinic-blur.jpg') center/cover no-repeat;
  filter: blur(5px);
  z-index: 0;
}



/* Logo */
.logoOptimized {
  width: var(--logo-width);
  margin-bottom: var(--logo-margin);
  opacity: 0;
  transform: scale(0.2);
  animation: logoZoom 1s ease forwards;
  z-index: 2;
}
@keyframes logoZoom { to { opacity:1; transform: scale(1); } }

/* Main text */
.textOptimized {
  font-size: var(--main-font-size);
  font-weight: 800;
  color: var(--main-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  opacity: 0;
  animation: textFade 1s forwards 1s;
  z-index: 2;
}
.textOptimized span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  animation: letterFade 0.8s forwards;
}
.textOptimized span:nth-child(3n) { animation-name: letterUp; }
.textOptimized span:nth-child(4n) { animation-name: letterRotate; }
.textOptimized span:nth-child(5n) { animation-name: letterZoom; }
@keyframes letterFade { to { opacity:1; transform: translateY(0) scale(1); } }
@keyframes letterUp { 0% { opacity:0; transform:translateY(30px);} 100% {opacity:1; transform:translateY(0);} }
@keyframes letterRotate { 0% {opacity:0; transform: rotate(-180deg) scale(0.3);} 100% {opacity:1; transform: rotate(0) scale(1);} }
@keyframes letterZoom { 0% {opacity:0; transform: scale(0);} 100% {opacity:1; transform: scale(1);} }
@keyframes textFade { to { opacity:1; } }

/* Subtext */
.subOptimized {
  font-size: var(--sub-font-size);
  font-weight: 600;
  color: var(--sub-color);
  margin-top: 10px;
  opacity: 0;
  animation: subFade 1s forwards 1.8s;
  z-index:2;
}
@keyframes subFade { to { opacity:1; transform: translateY(0); } }

/* Swipe-up + fade-out for logo + text + subtext */
.loaderContent {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.loaderContent.hidden {
  animation: swipeUp 1.2s ease forwards;
}
@keyframes swipeUp { 
  0% { transform: translateY(0); opacity:1; } 
  100% { transform: translateY(var(--swipe-distance)) scale(1.05); opacity:0; } 
}

/* Main content */
.contentOptimized {
  opacity: 0;
  transition: opacity 1s ease;
  padding: 50px;
  text-align: center;
  color: #003366;
}
.contentOptimized.visible { opacity:1; }

/* Mobile responsiveness */
@media (max-width: 768px) {
  .logoOptimized {
    width: 90px; /* smaller logo on mobile */
    margin-bottom: 15px;
  }

  .textOptimized {
    font-size: 1.5rem; /* smaller main text */
    gap: 3px;
  }

  .subOptimized {
    font-size: 1rem; /* smaller subtext */
  }

}

/* Hide the top info bar on mobile devices */
@media only screen and (max-width: 767px) {
    .material-icons {  /* replace with the actual class or ID of that bar */
        display: none !important;
    }
    .DesktopQuickMenu  {  /* replace with the actual class or ID of that bar */
        display: none !important;
    }
}


.customized-about-title-heading-text { font-size:8rem; font-weight:900; text-transform:uppercase; letter-spacing:-0.02em; position:absolute; top:40px; left:50%; transform:translateX(-50%); pointer-events:none; white-space:nowrap; font-family:"Arial Black","Arial Bold",Arial,sans-serif; background:linear-gradient(to bottom, rgba(8,42,123,0.35) 30%, rgba(255,255,255,0) 76%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.unique-carousel-wrapper-container-box { width:100%; max-width:1400px; height:550px; position:relative; perspective:1500px; margin-top:120px;}
.rotating-carousel-track-holder { width:100%; height:100%; display:flex; justify-content:center; align-items:center; position:relative; transform-style:preserve-3d;}
.individual-carousel-card-box { position:absolute; width:300px; height:400px; cursor:pointer; opacity:0; transform:scale(0.8) translateZ(-300px); transition:all 0.8s ease-in-out; perspective:1500px;}

/* Flip card integration */
.flip-card-inner { position:relative; width:100%; height:100%; transition: transform 0.8s; transform-style: preserve-3d; border-radius:20px; }
.flip-card-inner.flipped { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back { position:absolute; width:100%; height:100%; backface-visibility:hidden; border-radius:20px;}
.flip-card-front img { width:100%; height:100%; object-fit:cover; display:block; border-radius:20px;}
.flip-card-back { background: #1e90ff; color:white; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; transform: rotateY(180deg); padding:20px; border-radius:20px;}
.flip-card-back h3 { font-size:2rem; margin-bottom:10px;}
.flip-card-back p { font-size:1.2rem; margin:5px 0;}
.flip-card-back .description { font-size:1rem; color:#eee;}

.individual-carousel-card-box.center-position-card { z-index:10; opacity:1; transform:scale(1.2) translateZ(0);}
.individual-carousel-card-box.left-card-step-one { z-index:5; opacity:0.9; transform:translateX(-250px) scale(1) translateZ(-100px);}
.individual-carousel-card-box.left-card-step-two { z-index:2; opacity:0.7; transform:translateX(-450px) scale(0.9) translateZ(-200px);}
.individual-carousel-card-box.right-card-step-one { z-index:5; opacity:0.9; transform:translateX(250px) scale(1) translateZ(-100px);}
.individual-carousel-card-box.right-card-step-two { z-index:2; opacity:0.7; transform:translateX(450px) scale(0.9) translateZ(-200px);}
.individual-carousel-card-box.hidden-card-display { opacity:0; pointer-events:none;}

.team-member-information-display-section { text-align:center; margin-top:40px; transition:all 0.5s ease-out;}
.team-member-primary-name-title { color: rgb(8,42,123); font-size:2.5rem; font-weight:700; margin-bottom:8px; opacity:0; transform:translateY(10px); transition:all 0.6s ease; display:inline-block;}
.team-member-role-job-position { color:#666; font-size:1.3rem; font-weight:500; opacity:0; transform:translateY(10px); transition:all 0.6s ease; text-transform:uppercase; letter-spacing:0.1em;}
.team-member-primary-name-title.visible, .team-member-role-job-position.visible { opacity:1; transform:translateY(0);}

.navigation-dots-wrapper-container { display:flex; justify-content:center; gap:10px; margin-top:50px;}
.single-navigation-dot-circle { width:14px; height:14px; border-radius:50%; background: #1e8fff4d; cursor:pointer; transition:all 0.3s ease;}
.single-navigation-dot-circle.active-dot-style { background:#1e90ff; transform:scale(1.3);}

.carousel-navigation-arrow-button { position:absolute; top:50%; transform:translateY(-50%); background:#1e90ff; color:white; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:20; transition:all 0.3s ease; font-size:2rem; border:none; outline:none; padding-bottom:4px;}
.carousel-navigation-arrow-button:hover { background: rgba(0,0,0,0.8); transform:translateY(-50%) scale(1.1);}
.carousel-navigation-arrow-button.left-side-arrow { left:20px;}
.carousel-navigation-arrow-button.right-side-arrow { right:20px;}

@media (max-width:768px) {
.customized-about-title-heading-text { font-size:5rem;}
.individual-carousel-card-box { width:250px; height:350px;}
.individual-carousel-card-box.left-card-step-one { transform:translateX(-180px) scale(0.95) translateZ(-100px);}
.individual-carousel-card-box.left-card-step-two { transform:translateX(-300px) scale(0.85) translateZ(-200px);}
.individual-carousel-card-box.right-card-step-one { transform:translateX(180px) scale(0.95) translateZ(-100px);}
.individual-carousel-card-box.right-card-step-two { transform:translateX(300px) scale(0.85) translateZ(-200px);}
}

    .medical-about-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin: 0px 0;
    padding: 20px;
    background: #f9f9f986;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }

  .medical-about-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
  }

  .medical-about-content {
    flex: 1;
    min-width: 280px;
  }

  .medical-about-content h6 {
    margin: 0;
    color: #888;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }

  .medical-about-content h2 {
    margin: 15px 0;
    font-size: 34px;
    font-weight: bold;
    color: #222;
  }

  .medical-about-content h2 span {
    color: #0a74da;
  }

  .medical-about-content p {
    margin-bottom: 18px;
    line-height: 1.8;
    font-size: 16px;
    color: #444;
  }

  .medical-about-highlight {
    color: #0a74da;
    font-weight: bold;
    text-decoration: underline;
  }

  /* Mobile friendly */
  @media (max-width: 768px) {
    .medical-about-container {
      flex-direction: column;
      text-align: center;
    }
    .medical-about-content {
      margin-top: 20px;
    }
  }




      .about-title-head{
        font-size: 7.5rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: -0.02em;
        position: absolute;
        top: 45px;
        left: 50%;
        transform: translateX(-50%);
        pointer-events: none;
        white-space: nowrap;
        font-family: "Arial Black", "Arial Bold", Arial, sans-serif;
        background: linear-gradient(
          to bottom,
          rgb(8 42 123 / 35%) 30%,
          rgb(255 255 255 / 0%) 76%
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
      }
      .typewriter {
      font-size: 17px;
      line-height: 1.8;
      max-width: 900px;
      color: #333;
      border-right: 2px solid #00e5ff; /* cursor */
      white-space: pre-wrap; /* preserve line breaks */
      overflow: hidden;
    }


    .timeline-wrapper {
    --primary-accent: #4dabf7;
    --timeline-line: #e3e9f2;
    --background-color: #ffffff75;
    --big-number-color: rgba(27, 54, 81, 0.06);
    --icon-background: #a0a5a941;
    --timeline-max-width: 1180px;
    --line-progress: 0%;
    --glow-speed: 0.3s; /* glow transition speed */
}
.times-font {
    font-family: "Times New Roman", Times, serif !important;
}

.timeline-wrapper * { box-sizing: border-box; }

.timeline-wrapper h1.section-title {
    text-align: center;
    margin: 8px 0 48px;
    font-size: clamp(28px, 4vw, 40px);
    color: #1b3a4f;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-family: "Times New Roman", Times, serif;
}

.timeline-wrapper .timeline {
    max-width: var(--timeline-max-width);
    margin: 0 auto;
    position: relative;
    padding: 30px 10px;
    background: var(--background-color);
}

/* Vertical line */
.timeline-wrapper .timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: var(--timeline-line);
    z-index: 1;
}

/* Scroll progress glow */
.timeline-wrapper .timeline::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: var(--line-progress);
    transform: translateX(-50%);
    background: var(--primary-accent);
    box-shadow: 0 0 10px var(--primary-accent);
    z-index: 2;
    transition: height var(--glow-speed) ease-out;
}

/* Timeline items */
.timeline-wrapper .timeline-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 20px;
    position: relative;
    min-height: 160px;
    margin: 18px 0;
    padding: 10px 0;
    --icon-shift-x: 7px;
    --icon-shift-y: 0px;
    --big-shift-x: -1px;
    --big-shift-y: 0px;
}

/* Icon: supports separate X/Y movement */
.timeline-wrapper .timeline-item .icon {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: var(--icon-background);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    transition: box-shadow .28s ease, transform .28s ease;
    transform: translateX(var(--tx)) translateY(var(--ty)) translateX(var(--icon-shift-x)) translateY(var(--icon-shift-y)) scale(1);
}

.timeline-wrapper .timeline-item .icon img {
    width: 44px;
    height: 44px;
    display: block;
    pointer-events: none;
}

/* Glow icon on hover */
.timeline-wrapper .timeline-item:hover .icon {
  
    background: rgb(48, 123, 196); /* inside glow color */
    box-shadow: 0 10px 30px rgba(72, 0, 255, 0), 0 0 20px rgba(72, 0, 255, 0); /* outside glow */
    transform: translateX(var(--tx)) translateY(var(--ty)) translateX(var(--icon-shift-x)) translateY(var(--icon-shift-y)) scale(1.08);
}



/* Content */
.timeline-wrapper .timeline-item .content {
    position: relative;
    z-index: 3;
    padding: 6px 22px;
    max-width: 540px;
}

.timeline-wrapper .timeline-item .content .big-num {
    position: absolute;
    left: 50%;
    top: 0;
    font-weight: 800;
    font-size: clamp(48px, 8vw, 120px);
    line-height: 1;
    color: var(--big-number-color);
    pointer-events: none;
    z-index: 2;
    letter-spacing: -0.02em;
    transform: translateX(-50%) translateX(var(--big-shift-x)) translateY(var(--big-shift-y));
}

.timeline-wrapper .timeline-item .content h4.index {
    margin: 0 0 6px;
    color: var(--primary-accent);
    font-weight: 700;
    font-size: 18px;
}

.timeline-wrapper .timeline-item .content h3.title {
    margin: 0 0 10px;
    font-size: 20px;
    color:#163247;
    font-weight:700;
    line-height:1.15;
}

.timeline-wrapper .timeline-item .content p {
    margin: 0;
    color: #6e7b88;
    font-size: 14px;
    line-height:1.7;
}

/* Left items */
.timeline-wrapper .timeline-item.left .icon{
    grid-column: 1;
    justify-self: end;
}
.timeline-wrapper .timeline-item.left .content{
    grid-column: 2;
    text-align: left;
    padding-left: 48px;
}

/* Right items */
.timeline-wrapper .timeline-item.right .icon{
    grid-column: 2;
    justify-self: start;
}
.timeline-wrapper .timeline-item.right .content{
    grid-column: 1;
    text-align: right;
    padding-right: 48px;
}

/* Responsive */
@media (max-width: 980px){
    .timeline-wrapper .timeline-item{ min-height: 140px; margin: 22px 0; }
    .timeline-wrapper .timeline-item .content{ max-width: 420px; }
    .timeline-wrapper .timeline-item .icon{ width:84px; height:84px; }
    .timeline-wrapper .timeline-item .icon img{ width:36px; height:36px; }
}

@media (max-width: 760px){
    .timeline-wrapper .timeline::before { display: none; }
    .timeline-wrapper .timeline-item {
        grid-template-columns: 1fr;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }
    .timeline-wrapper .timeline-item .icon {
        justify-self: center;
        transform: translateX(0%) translateY(0%) translateX(var(--icon-shift-x)) translateY(var(--icon-shift-y)) scale(1);
        margin-bottom: 10px;
    }
    .timeline-wrapper .timeline-item.left .content,
    .timeline-wrapper .timeline-item.right .content {
        grid-column: 1;
        text-align: left;
        padding: 0 10px;
    }
    .timeline-wrapper .timeline-item .content .big-num{
        left: 12px;
        transform: translateX(0) translateX(var(--big-shift-x)) translateY(var(--big-shift-y));
        font-size: clamp(36px, 12vw, 64px);
        opacity: 0.04;
    }
}

.timeline-wrapper .timeline-item:first-child{ margin-top: 10px; }
.timeline-wrapper .timeline-item:last-child{ margin-bottom: 20px; }



/* =========================================
  Service - heading
   ========================================= */
.service-team-heading {
    text-align: center;      /* center the heading */
    color: #389dff;          /* heading color */
    font-size: 32px;         /* optional: adjust size */
    font-weight: 700;        /* optional: bold like section title */
    margin-bottom: 30px;     /* space under the heading */
    padding-top: 30px;
}


/* ===== MODERN LOADER ===== */
#pageLoader {
    position: fixed;
    inset: 0;
    background: #f4f5f6;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
}

/* container */
.loader-container {
    position: relative;
    width: 160px;
    height: 160px;
}

/* spinning ring */
.loader-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 4px solid transparent;
    border-top: 4px solid #00d4ff;
    border-right: 4px solid #ff4b5c;
    animation: spin 1s linear infinite;
}

/* logo */
.logo-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.loader-logo {
    width: 85px;
    animation: pulse 1.5s ease-in-out infinite;
}

/* text */
.loading-text {
    position: absolute;
    bottom: -60px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 13px;
    letter-spacing: 1px;
}

/* animations */
@keyframes spin {
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%,100% { transform: scale(0.9); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 1; }
}