body {
    font-family: 'Poppins', sans-serif;
    background: #f5f4fa;
    margin: 0;
}

/* Top Bar */
.topbar {
    background: #f1f0f4;
    font-size: 14px;
    padding: 8px 0;
    color: #555;
}

/* Navbar */
.main-navbar {
    background: #ffffff;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

/* Logo */
.logo {
    height: 48px;
}

.brand-title {
    font-weight: 600;
    font-size: 18px;
    color: #3f2b85;
}

.brand-sub {
    font-size: 14px;
    color: #777;
}

/* Menu Links */
.navbar-nav .nav-link {
    font-weight: 500;
    font-size: 16px;
    color: #333;
    margin: 0 15px;
    transition: 0.3s;
}

.navbar-nav .nav-link:hover {
    color: #7b2cbf;
}

/* Appointment Button */
.btn-appointment {
    background: linear-gradient(90deg, #7b2cbf, #9d4edd);
    color: #fff;
    padding: 10px 25px;
    border-radius: 10px;
    font-weight: 500;
    font-size: 15px;
    transition: 0.3s;
}

.btn-appointment:hover {
    background: linear-gradient(90deg, #6a0dad, #7b2cbf);
    color: #fff;
}

/* Mobile Fix */
@media (max-width: 991px) {

    .navbar-nav {
        margin-top: 15px;
    }

    .appointment-wrapper {
        margin-top: 15px;
    }

    .btn-appointment {
        width: 100%;
    }
}
/* ================= FOOTER ================= */

.main-footer {
    background: #0c1633;
    color: #cfd6f5;
    padding: 60px 0 30px;
}

.footer-title {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-heading {
    color: #ffffff;
    font-weight: 600;
    margin-bottom: 15px;
}

.footer-text {
    font-size: 14px;
    line-height: 1.7;
    color: #ffffff;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    transition: 0.3s;
}

.footer-links a:hover {
    color: #ffffff;
}

.footer-icons a {
    display: inline-block;
    margin-right: 10px;
    color: #ffffff;
    background: #18224a;
    padding: 8px 10px;
    border-radius: 50%;
    font-size: 14px;
    transition: 0.3s;
}

.footer-icons a:hover {
    background: #7b2cbf;
}

.newsletter-box {
    display: flex;
    background: #16214a;
    border-radius: 8px;
    overflow: hidden;
}

.newsletter-box input {
    border: none;
    background: transparent;
    padding: 10px;
    color: #ffffff;
    width: 100%;
    font-size: 14px;
}

.newsletter-box input:focus {
    outline: none;
}

.newsletter-box button {
    background: linear-gradient(90deg, #7b2cbf, #9d4edd);
    border: none;
    color: #ffffff;
    padding: 0 15px;
    font-size: 16px;
    cursor: pointer;
}

.footer-bottom {
    border-top: 1px solid #1f2b55;
    margin-top: 40px;
    padding-top: 20px;
    font-size: 13px;
}

.footer-policy a {
    color: #ffffff;
    margin-left: 15px;
    text-decoration: none;
}

.footer-policy a:hover {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-bottom {
        text-align: center;
        flex-direction: column;
        gap: 10px;
    }

    .footer-policy a {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.swiper-button-next,
.swiper-button-prev {
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
    color: #6B3A8A;
}

.swiper-button-prev {
    left: -10px;
}

.swiper-button-next {
    right: -10px;
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-slide {
    animation: slide 25s linear infinite;
}
/* Fade In Scroll */
.fade-in {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.carousel-track {
    display: flex;
    width: max-content;
    animation: infiniteScroll 25s linear infinite;
}

.carousel-img {
    width: 25%;   /* 4 images on desktop */
    height: 280px;
    object-fit: cover;
    border-radius: 20px;
    flex-shrink: 0;
}

/* Tablet */
@media (max-width: 1024px) {
    .carousel-img {
        width: 33.33%;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .carousel-img {
        width: 80%;
        height: 220px;
    }
}

@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
@keyframes fadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.animate-fadeIn {
    animation: fadeIn 0.25s ease-out;
}



.card{
  flex: 0 0 25%;
  padding:20px;
  box-sizing:border-box;
}

.card > div, .card h3, .card p, .card button{
  text-align:center;
}

.card{
  background:#fff;
  border-radius:24px;
  box-shadow:0 10px 25px rgba(0,0,0,0.08);
  padding:40px 20px;
  margin:10px;
}

.social-box{
  width:70px;
  height:70px;
  margin:auto;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:bold;
  font-size:20px;
  margin-bottom:20px;
}

.btn{
  margin-top:20px;
  padding:10px 20px;
  border:none;
  border-radius:12px;
  color:#fff;
  font-weight:600;
  cursor:pointer;
}

.arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:#fff;
  padding:12px;
  border-radius:50%;
  box-shadow:0 5px 15px rgba(0,0,0,0.1);
  cursor:pointer;
}

.left{ left:0; }
.right{ right:0; }

@media(max-width:1024px){
  .card{ flex:0 0 50%; }
}

@media(max-width:640px){
  .card{ flex:0 0 100%; }
}