body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
     background: linear-gradient(#dbf5bb5f, #ffffffd3, #d8fea842, #ffffffcb, #f0fce2c4), url(../images/body.png);
     background-repeat: no-repeat;
     background-position: center;
     background-size: cover;
     background-attachment: fixed;
 }

 .tooth-icon {
     font-size: 60px;
     display: inline-block;
     animation: spinScale 3s infinite ease-in-out;
     transform-origin: center;
 }

 @keyframes spinScale {
     0% {
         transform: rotate(0deg) scale(1);
     }

     50% {
         transform: rotate(10deg) scale(1.2);
     }

     100% {
         transform: rotate(0deg) scale(1);
     }
 }


 nav .nav-link {
     color: #000;
     font-weight: bold;
 }

 nav .active {
     color: #007c48 !important;
 }

 footer h3 {
     color: #007c48;
     font-weight: bold;
     font-size: 28px;
 }

 .overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: linear-gradient(#00000000, #00000000);
     z-index: 1;
     pointer-events: none;
 }

 .carousel img {
     background: linear-gradient(#00000000, #00000000);
 }

 .carousel-caption {
     position: absolute;
     right: 15%;
     bottom: 10.25rem;
     left: 40%;
     padding-top: 1.25rem;
     padding-bottom: 1.25rem;
     color: #fff;
     text-align: justify;
     width: 50%;
 }

 .carousel-caption h1 {
     font-size: 50px;
 }

 .carousel-caption p {
     font-size: 20px;
     font-weight: bold;
 }

 .section-one .card {
     border: none;
     background-color: #f3f3f3;
     margin: 10px;
     padding: 10px;
     border-radius: 20px;
     box-shadow: 10px 10px 10px 10px #ebe7e7;
 }

 p {
     text-align: justify;
     color: #000;
     font-weight: 500;
 }

 a {
     color: #000;
     text-decoration: none;
 }

 h1 {
     color: #007c48;
     font-weight: bold;

 }

 h2 {
     color: #007c48;
     font-weight: bold;

 }

 h4 {

     color: #007c48;
     font-weight: bold;

 }

 nav {
     background-color: transparent;
 }

 .carousel-control-next-icon,
 .carousel-control-prev-icon {
     background-color: #000;
 }

 .topbar {

     background: linear-gradient(45deg, #d8fea842, #ffffff63, #d8fea842, #ffffff66, #d8fea842);
     color: #000;
     font-weight: bolder;
 }

 .section-one .card img {
     width: 80%;

 }

 .doctor .d-flex img {
     width: 45px;
     margin-bottom: 20px;
     margin-right: 10px;
 }

 .slider-wrapper {
     width: 100%;
     max-width: 1200px;
     margin: 0 auto;
     overflow: hidden;
     height: 380px;
     padding: 30px 0;
     position: relative;
     display: flex;
     align-items: center;
 }

 .section-banner {
     background: url(../images/section-banner.png);
     padding-bottom: 100px;
     padding-top: 100px;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
     background-attachment: fixed;
 }

 .accordion {

     box-shadow: 3px 6px 19px 11px #ccc;
     padding: 15px;
 }

 .services .card {
     border: none;
     margin: 10px;
     padding: 10px;
     text-align: center;
     background-color: #ffffffad;
 }

 .services .card:hover {
     box-shadow: 10px 10px 10px 10px #ccc;
 }

 .services .card img {
     width: 100%;
 }

 .services .card h4 {
     font-size: 21px;
 }

 .gallery .slider-track {
     display: flex;
     transition: transform 0.6s ease;
     will-change: transform;
 }

 .gallery .slide {
     flex-shrink: 0;
     background: #444;
     border-radius: 12px;
     overflow: hidden;
     cursor: pointer;
     position: relative;
     opacity: 0.7;
     transition: 0.6s all;
 }

 .gallery .slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
 }

 .gallery .slide.active {
     box-shadow: 0 0 20px rgba(255, 208, 0, 0.6);
     opacity: 1;
 }

 .gallery .slide::after {
     content: attr(data-label);
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     background: rgba(0, 0, 0, 0.7);
     color: #fff;
     text-align: center;
     font-size: 18px;
     padding: 10px;
 }

 .nav-button {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: #0d6efd;
     border: none;
     padding: 12px 18px;
     font-size: 18px;
     cursor: pointer;
     z-index: 10;
     color: #ffffff;
     font-weight: bold;
     border-radius: 8px;
 }

 .prev-button {
     left: 10px;
 }

 .next-button {
     right: 10px;
 }

 footer {
     background: url(../images/footer.png);
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     padding-top: 100px;
 }

 footer h4 {
     color: #007c48;
     font-weight: bold;
 }

 .call-button {
     position: fixed;
     bottom: 30px;
     left: 20px;
 }

 .call-button i {
     background: #0d6efd;
     color: #fff;
     padding: 15px;
     font-size: 17px;
     border-radius: 50%;
 }

 .whasapp-button {
     position: fixed;
     bottom: 30px;
     right: 20px;
 }

 .whasapp-button i {
     background: #009303;
     color: #fff;
     padding: 15px;
     font-size: 17px;
     border-radius: 50%;
 }

 /* Mobile Vertical Mode */
 @media screen and (max-width: 768px) {}

 @media screen and (max-width: 768px) {
     .slider-wrapper {
         flex-direction: column;
         height: 100vh;
         padding: 0 50px;
     }

     .slider-track {
         flex-direction: column;
         width: 100%;
     }

     .nav-button {
         position: absolute;
         top: auto;
         left: auto;
         right: auto;
         transform: none;
         margin: 10px auto;
     }

     .prev-button {
         order: -1;
     }

     .next-button {
         bottom: 0;
     }

     .slide {
         width: 100% !important;
     }

     .slide img {
         width: 100%;
         height: 100%;
     }
 }

 .social-media i {
     background: #0d6efd;
     color: #fff;
     margin-right: 10px;
     padding: 15px;
     border-radius: 50%;
 }

 .choose .card {
     padding: 10px;
     margin: 10px;
     background: #ffffffb3;
     box-shadow: 1px 2px 17px 1px #ccc;

 }

 #button {
     display: inline-block;
     background-color: #0d6efd;
     padding: 10px;
     text-align: center;
     position: fixed;
     bottom: 30px;
     right: 70px;
     transition: background-color .3s,
         opacity .5s, visibility .5s;
     opacity: 0;
     visibility: hidden;
     border-radius: 50%;
 }

 #button::after {

     font-family: FontAwesome;
     font-weight: normal;
     font-style: normal;
     font-size: 17px;

     color: #fff;
 }

 #button:hover {
     cursor: pointer;
     background-color: #333;
 }

 #button:active {
     background-color: #555;
 }

 #button.show {
     opacity: 1;
     visibility: visible;
 }

 .section-panda {
     background: linear-gradient(135deg, #f1f1f1, #e0e0e0);
     display: flex;
     justify-content: end;
     align-items: center;
     height: 700px;
     margin: 0;


 }

 .panda-body {
     position: relative;
     right: 0px;
 }

 .panda {
     position: relative;
     top: -50px;
     width: 200px;
     height: 200px;
     animation: panda-animation 2s infinite;
 }

 .head {
     position: absolute;
     width: 200px;
     height: 200px;
     background: white;
     border-radius: 50%;
     z-index: 1;
 }

 .ear {
     position: absolute;
     width: 60px;
     height: 60px;
     background: black;
     border-radius: 50%;
     z-index: 0;
 }

 .ear.left {
     top: -5px;
     left: -5px;
 }

 .ear.right {
     top: -5px;
     right: -5px;
 }

 .eye {
     position: absolute;
     width: 20px;
     height: 30px;
     background: black;
     border-radius: 50%;
     z-index: 1;
 }

 .eye.left {
     top: 70px;
     left: 55px;
 }

 .eye.right {
     top: 70px;
     right: 55px;
 }

 .nose {
     position: absolute;
     top: 100px;
     left: 80px;
     width: 40px;
     height: 20px;
     background: black;
     border-radius: 50%;
     z-index: 1;
 }

 .cheek {
     position: absolute;
     width: 20px;
     height: 20px;
     background: pink;
     border-radius: 50%;
     opacity: 0.5;
     z-index: 1;
 }

 .cheek.left {
     top: 110px;
     left: 40px;
 }

 .cheek.right {
     top: 110px;
     right: 40px;
 }

 .section-panda .body {
     position: absolute;
     top: 150px;
     width: 200px;
     height: 180px;
     background: black;
     border-radius: 80px 80px 100px 100px;
     left: 0px;
     z-index: 0;
 }

 .belly {
     position: absolute;
     top: 240px;
     width: 200px;
     height: 180px;
     background: white;
     border-radius: 170px 170px 140px 140px;
     left: 0px;
     z-index: 1;
 }

 .arm {
     position: absolute;
     width: 100px;
     height: 230px;
     background: black;
     border-radius: 50%;
     top: 100px;
     z-index: 0;
 }

 .arm.left {
     left: -15px;
     transform: rotate(-150deg);
 }

 .arm.right {
     right: -20px;
     transform: rotate(150deg);
 }

 .foot {
     position: absolute;
     width: 90px;
     height: 90px;
     top: 355px;
     background: black;
     border-radius: 50%;
     z-index: 1;
 }

 .foot.left {
     left: -25px;
 }

 .foot.right {
     right: -25px;
 }

 @keyframes panda-animation {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-20px);
     }
 }

 .floating-object {
     font-size: 40px;
     position: relative;
     animation: moveLeftRight 3s ease-in-out infinite;
 }

 .floating-object-right {
     font-size: 40px;
     position: relative;
     animation: moverightleft 3s ease-in-out infinite;
 }

 /* Animation keyframes */
 @keyframes moveLeftRight {
     0% {
         left: 0;
     }

     50% {
         left: 50px;
     }

     100% {
         left: 0;
     }
 }

 @keyframes moverightleft {
     0% {
         right: 0;
     }

     50% {
         right: 50px;
     }

     100% {
         right: 0;
     }
 }



 .doctor {
     background-color: #f7f7f7e0;
     padding-top: 100px;
     padding-bottom: 100px;
 }

 @media screen and (max-width: 500px) {
     .carousel {
         text-align: center;

     }

     .prev-button {
         rotate: 270deg;
     }

     .next-button {
         rotate: 270deg;
     }

     .carousel-caption {
         position: absolute;
         right: 15%;
         bottom: 1.25rem;
         left: 35px;
         padding-top: 1.25rem;
         padding-bottom: 1.25rem;
         color: #fff;
         text-align: center;
         width: 80%;
         background: #ffffffde;
         padding: 20px;
     }

     .carousel-caption h1 {
         font-size: 20px;
     }

     .carousel-caption p {
         font-size: 10px;
         font-weight: bold;
         color: #000;
     }

     .slide img {
         height: 200px;
         object-fit: unset;
     }

     .floating-object img {
         width: 50px;
     }

     .floating-object-right img {
         width: 50px;
     }

     .display-heading {
         font-size: 12px;
         padding: 30px;
         text-align: center;

     }

     .tooth-icon {
         font-size: 35px;
     }

     .doctor {
         padding-top: 0px;
     }
 }