.topbar {
   background: #00b3a1;
   color: #fff;
   font-size: 14px;
   padding: 5px 0;
 }

 .topbar a {
   color: #fff;
   margin-right: 15px;
   text-decoration: none;
 }

 .navbar-brand img {
   height: 80px;
 }



 .btn-appointment {
   background: #00b3a1;
   color: #fff;
   border-radius: 6px;
   padding: 6px 15px;
   font-weight: 500;
 }

 .btn-appointment:hover {
   background: #009688;
   color: #fff;
 }

 .nav-link:hover {
   color: #00b3a1;
 }

 .nav-item.dropdown:hover .dropdown-menu {
   display: block;
   margin-top: 0;
 }

 .banner {
   background-image: url(../images/banner.jpg);
   width: auto;
   height: 70vh;
 }

 @media (max-width: 540px) {
 .banner {
   background-image: url(../images/banner.jpg);
   width: auto;
   height: auto;
 }
 
 }
 .service-card {
   transition: all 0.4s ease-in-out;
   overflow: hidden;
   position: relative;
 }

 /* yeh change kiya */
 .service-card .card-body::before {
   content: "";
   position: absolute;
   bottom: -100%;
   left: 0;
   width: 100%;
   height: 100%;
   background: #00b3a1;
   /* Greenish overlay */
   transition: bottom 0.4s ease-in-out;
   z-index: -1;
   border-radius: 0 0 .375rem .375rem;
 }

 .service-card:hover .card-body::before {
   bottom: 0;
 }

 .service-card .card-body {
   position: relative;
   z-index: 1;
   transition: color 0.3s ease-in-out;
 }

 .service-card:hover .card-body {
   color: #fff !important;
 }

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



 .appointmentbg {
   background-image: url(../images/smilee.jpg);
   width: 1920px;
   height: 700px;
 }

 .wanto {
   margin-left: 10%;
   padding-top: 10%;
 }


 @media (max-width: 1140px) {

   .wanto {
     margin-left: 2%;
     padding-top: 10%;
   }

   .appointmentbg {
     background-image: url(../images/smilee.jpg);
     width: auto;
     height: 725px;
   }
 }

 @media (max-width: 960px) {

   .wanto {
     margin-left: 2%;
     padding-top: 10%;
   }

   .appointmentbg {
     background-image: url(../images/smilee.jpg);
     width: 1920px;
     height: 400px;
   }
 }

  @media (max-width: 540px) {

   .wanto {
     margin-left: 2%;
     padding-top: 10%;
   }

   .appointmentbg {
     background-image: url(../images/smilee.jpg);
     width: auto;
     height: 400px;
   }

   
 }
      .carousel-item {
      position: relative;
      height: 90vh;
    }
    .carousel-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .carousel-caption {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: left;
      max-width: 700px;
      width: 90%;
    }
    .carousel-caption h1 {
      font-size: 2.8rem;
      font-weight: bold;
      color: #0f4c4c;
    }
    .carousel-caption p {
      font-size: 1.2rem;
      color: red;
      font-weight: 500;
    }
    .btn-custom {
      background-color: #00796b;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      color: white;
      margin-right: 10px;
      transition: background-color 0.3s ease;
    }
    .btn-custom:hover {
      background-color: #004d40;
    }

    /* ✅ RESPONSIVE FIX FOR < 540px SCREENS */
    @media (max-width: 540px) {
      .carousel-item {
        height: 60vh; /* Mobile me height thodi kam */
      }
      .carousel-caption h1 {
        font-size: 1.5rem; /* Heading chhoti */
        text-align: center;
      }
      .carousel-caption p {
        font-size: 1rem;
        text-align: center;
      }
      .carousel-caption {
        text-align: center;
        padding: 0 10px;
      }
      .btn-custom {
        display: block;
        width: 100%;
        margin: 8px 0;
      }
    }

    /* ✅ Full-width Background Section */
    .smile-section {
      position: relative;
      background: url('../images/smilee.jpg') no-repeat center center/cover;
      min-height: 80vh;
      display: flex;
      align-items: center;
      color: #fff;
    }

    /* ✅ Left Text Box */
    .smile-text {

      padding: 40px;
      max-width: 500px;
      margin-left: 5%;
      border-radius: 12px;
    }

    .smile-text p {
      color: #ff0000;
      font-weight: 500;
      font-size: 1.1rem;
      margin-bottom: 10px;
    }

    .smile-text h1 {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .smile-btns .btn-smile {
      background-color: #00b3a4;
      border: none;
      padding: 12px 25px;
      border-radius: 50px;
      color: white;
      margin-right: 10px;
      transition: background-color 0.3s ease;
    }

    .smile-btns .btn-smile:hover {
      background-color: #008b82;
    }

    /* ✅ Responsive for ≤540px */
    @media (max-width: 540px) {
      .smile-section {
        text-align: center;
        justify-content: center;
        padding: 20px;
      }
      .smile-text {
        margin: 0;
        max-width: 90%;
        padding: 20px;
      }
      .smile-text h1 {
        font-size: 1.8rem;
      }
      .smile-btns .btn-smile {
        display: block;
        width: 100%;
        margin: 8px 0;
      }
    }

 .icon-card {
   border: 1px solid #dee2e667 !important;
   transition: transform 0.2s, box-shadow 0.2s !important;
 }

 .icon-card:hover {
   transform: translateY(-5px) !important;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1) !important;
 }

 .footer {
   background-color: #00b3a1 !important;
 }

   .teeth-banner {
      background: linear-gradient(to right, #b2fefa, #00b3a1);
      padding: 80px 20px;
      text-align: center;
      color: #fff;
    }
    .teeth-banner h1 {
      font-weight: 700;
      font-size: 2.5rem;
    }
    .teeth-banner p {
      font-size: 1.2rem;
      color: #fa2916; /* red subtitle */
      margin-top: 10px;
    }

    .contactsection{
      background-color: #146e65;
    }

  .icontooth{
    color: #00b3a1;

    
  }

  .second-banner {
      position: relative;
      background: url('../images/secondsmile.jpg') no-repeat center center/cover;
      min-height: 80vh;
      display: flex;
      align-items: center;
      color: #fff;
    }

    /* ✅ Left Text Box */
    .second-banner-text {

      padding: 40px;
      max-width: 500px;
      margin-left: 5%;
      border-radius: 12px;
    }

    .second-banner-text p {
      color: #ff0000;
      font-weight: 500;
      font-size: 1.1rem;
      margin-bottom: 10px;
    }

    .second-banner-text h1 {
      font-size: 2.8rem;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .second-banner-btns .btn-banner {
      background-color: #00b3a4;
      border: none;
      padding: 12px 25px;
      border-radius: 50px;
      color: white;
      margin-right: 10px;
      transition: background-color 0.3s ease;
    }

    .second-banner-btns .btn-banner:hover {
      background-color: #008b82;
    }

    /* ✅ Responsive for ≤540px */
    @media (max-width: 540px) {
      .second-banner {
        text-align: center;
        justify-content: center;
        padding: 20px;
      }
      .second-banner-text {
        margin: 0;
        max-width: 90%;
        padding: 20px;
      }
      .second-banner-text h1 {
        font-size: 1.8rem;
      }
      .second-banner-btns .btn-banner {
        display: block;
        width: 100%;
        margin: 8px 0;
      }
    }

    
   .appointment-box {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0px 4px 8px rgba(0,0,0,0.1);
      padding: 25px;
    }
    .btn-call {
      background: #00bfa6;
      color: #fff;
      font-weight: 500;
    }
    .btn-call:hover {
      background: #009b85;
      color: #fff;
    }