/*

Main Color -->

Dark Color -->

Light Color -->

*/

/************************************/
/***          Common Css          ***/
/************************************/
.text-align-justify {
	text-align: justify;
}

/************************************/
/***        Page Header Css       ***/
/************************************/
.gallery-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-11.png) center center / cover no-repeat;
}

.contact-us-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-13.png) center center / cover no-repeat;
}

.testimonials-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-3.png) center center / cover no-repeat;
}

.dental-implant-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-14.png) center center / cover no-repeat;
}

.root-canal-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-15.png) center center / cover no-repeat;
}

.orthodontic-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-16.png) center center / cover no-repeat;
}

.dental-filling-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-10.png) center center / cover no-repeat;
}

.pediatric-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-17.png) center top / cover no-repeat;
}

.cosmetic-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-18.png) center top / cover no-repeat;
}

.dental-crown-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-19.png) center top / cover no-repeat;
}

.dental-scaling-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-20.png) center center / cover no-repeat;
}

.gum-treatment-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-21.png) center center / cover no-repeat;
}

.teeth-whitening-page-header {
    background: linear-gradient(rgb(255 247 248 / 68%), rgb(255 247 248 / 30%)), url(../images/bg-22.png) center top / cover no-repeat;
}

/************************************/
/***          Loader Css          ***/
/************************************/
#loading-icon{
    display: flex;
    justify-content: center;
    align-items: center;
}

#loading-icon img {
    width: 264px;
    animation: logoZoom 2s ease-in-out infinite;
    transform-origin: center;
}

@keyframes logoZoom{
    0%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.15);
    }
    100%{
        transform: scale(1);
    }
}

/************************************/
/***          Header Css          ***/
/************************************/
.header-logo {
    width: 100%;
}
.header-navbar-brand {
    width: 300px;
}
.navbar-nav .nav-item.active > .nav-link{
    color: var(--accent-color);
    font-weight: 600;
}

/* Active Dropdown Item */
.submenu ul .nav-item.active > .nav-link{
    color: var(--primary-color);
    font-weight: 600;
    background: var(--secondary-color);
}

/* Parent Treatments Active */
.navbar-nav > .submenu.active > .nav-link{
    color: var(--accent-color);
    font-weight: 600;
}

.navbar-nav > .submenu.active > .nav-link::before{
    width: 100%;
}

/************************************/
/***        Home Banner Css       ***/
/************************************/
.hero.bg-image .hero-content .section-title h1 span {
    background: var(--accent-color);
    padding: 0px 15px;
    line-height: 84px;
    border-radius: 20px;
}

.swiper-horizontal>.swiper-pagination-bullets, 
.swiper-pagination-bullets.swiper-pagination-horizontal {
    bottom: 22px !important;
}

/************************************/
/***       Home Services Css      ***/
/************************************/
.services-slider {
    overflow: visible !important;
}

.swiper {
    overflow: visible !important;
}

/*.services-slider {
    padding-bottom: 80px;
}*/

.swiper-button-prev,
.swiper-button-next {
    width: 40px !important;
    height: 40px !important;
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: all 0.4s ease-in-out;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
    background: var(--primary-color);
    color: #fff !important;
}

.swiper-button-prev:hover::after,
.swiper-button-next:hover::after {
    color: #fff;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 18px !important;
    font-weight: 700;
    color: var(--primary-color);
}

.swiper-button-prev {
    left: 93% !important;
    top: auto !important;
    bottom: -50px !important;
}

.swiper-button-next {
    right: 0% !important;
    top: auto !important;
    bottom: -50px !important;
}

/************************************/
/***         Home About Css       ***/
/************************************/
.experience-count {
	background: var(--primary-color);
	padding: 20px 30px;
	border-radius: 20px;
	position: relative;
    top: 50px;
    right: -80px;
    animation: floating 4s ease-in-out infinite;
}
@keyframes floating {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
}

.experience-count h2 {
	color: #fff;
}
.experience-count p {
	color: #fff;
	margin: 0;
}



/************************************/
/***      Home Treatments Css     ***/
/************************************/
.treatment-section{
    position: relative;
    padding: 70px 0;
    margin-top: 50px;
    background: url("../images/bg-1.png") center/cover no-repeat;
    z-index: 1;
}

.treatment-section::before{
    content: "";
    position: absolute;
    inset: 0;
    background: #fff7f887;
    z-index: -1;
}

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

.treatment-card{
    position:relative;
    min-height:240px;
    border-radius:25px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    transition:all 0.4s ease;
    border:1px solid #eef2f7;

    overflow: hidden;
    z-index: 1;
}

.treatment-card:hover{
    transform:translateY(-10px);
}

.treatment-card::before{
    content: "";
    position: absolute;
    top: 25px;
    right: 25px;
    width: 50px;
    height: 50px;
    background: url("../images/icon-services-8.svg") no-repeat center;
    background-size: contain;
    opacity: 0.1;
}

.treatment-card-treat1:hover {
    background: url(../images/treat1.png) center center/cover no-repeat;
}

.treatment-card-treat2:hover {
    background: url(../images/treat2.png) center center/cover no-repeat;
}

.treatment-card-treat3:hover {
    background: url(../images/treat3.png) center center/cover no-repeat;
}

.treatment-card-treat4:hover {
    background: url(../images/treat4.png) center center/cover no-repeat;
}

.treatment-card-treat5:hover {
    background: url(../images/treat5.png) center center/cover no-repeat;
}

.treatment-card-treat6:hover {
    background: url(../images/treat6.png) center center/cover no-repeat;
}

.treatment-card-treat7:hover {
    background: url(../images/treat7.png) center center/cover no-repeat;
}

.treatment-card-treat8:hover {
    background: url(../images/treat8.png) center center/cover no-repeat;
}

.treatment-card:hover::after{
    content: "";
    position: absolute;
    inset: 0;
    background: #2a1b1cba;
    opacity: 0;
    transition: 0.4s ease;
    z-index: -1;
}
.treatment-card:hover::after{
    opacity: 1;
}

.treatment-content{
    padding:35px 30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    /*justify-content:space-evenly;*/
    height:100%;
}

.treatment-content h3{
    font-size:22px;
    /*margin-bottom:15px;*/
}

.treatment-content p{
    color:#666;
    line-height:1.7;
    margin-bottom:10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.treatment-content a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    color: var(--accent-color);
    font-weight: 500;
    text-decoration:none;
    transition:0.3s;
}

.treatment-content a:hover{
    letter-spacing:0.5px;
    position:relative;
}

.treatment-card:hover h3,
.treatment-card:hover p,
.treatment-card:hover a{
    color:#fff;
}

.home-treatments-btn {
    justify-self: center;
    margin-top: 50px;
}


/************************************/
/***       Home Gallery Css       ***/
/************************************/
.gallery-section{
    padding:50px 0 80px;
    /*background:#f8fbff;*/
}

.section-row .home-gallery-section-title {
    text-align: left;
}

.gallerySwiper{
    padding-bottom:60px;
}

.gallerySwiper .swiper-slide{
    border-radius:20px;
    overflow:hidden;
}

.gallerySwiper img{
    width:100%;
    /*height:350px;*/
    object-fit:cover;
    border-radius:20px;
    transition:.5s;
    aspect-ratio: 1/1;
}

.gallerySwiper .swiper-slide:hover img{
    transform:scale(1.08);
}

.gallerySwiper a{
    display:block;
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

.gallerySwiper a::before{
    content:'';
    position:absolute;
    inset:0;
    background:#2a1b1c95;
    opacity:0;
    transition:.4s;
    z-index:1;
}

.gallerySwiper a::after{
    content:'+';
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    width:70px;
    height:70px;
    border-radius:50%;
    background:#fff;
    color:var(--primary-color);
    font-size:40px;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transition:.4s;
    z-index:2;
}

.gallerySwiper a:hover::before,
.gallerySwiper a:hover::after{
    opacity:1;
}


/************************************/
/***      Home Testimonia Css     ***/
/************************************/
/*.testimonial-section {
    padding: 100px 0;
    background: linear-gradient(to bottom,#fff,var(--secondary-color));
}

.testimonialSwiper {
    padding: 40px 0 70px;
}

.testimonial-card {
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,.5);
    border-radius: 30px;
    padding: 45px 30px;
    text-align: center;
    transition: .4s;
    box-shadow: 0 20px 50px rgba(0,0,0,.08);
    position: relative;
}

.testimonial-card:hover {
    transform: translateY(-8px);
}

.quote {
    width: 70px;
    height: 70px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-bottom: 25px;
}

.quote i {
    color: #fff;
    font-size: 28px;
}

.stars {
    color: #FFC107;
    letter-spacing: 4px;
    font-size: 20px;
    margin-bottom: 20px;
}

.testimonial-card p {
    color: #666;
    line-height: 1.9;
    font-size: 17px;
}

.testimonial-user {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.testimonial-user img {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
}

.testimonial-user h4 {
    margin: 0;
}

.testimonial-user span {
    color: #888;
    font-size: 15px;
}

.testimonialSwiper .swiper-slide {
    opacity: .45;
    transform: scale(.88);
    transition: .4s;
}

.testimonialSwiper .swiper-slide-active {
    opacity: 1;
    transform: scale(1);
}

.testimonial-navigation {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 40px;
}

.testimonial-prev,
.testimonial-next {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    transition: all .35s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
}

.testimonial-prev:hover,
.testimonial-next:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-4px);
}

.testimonial-prev.swiper-button-disabled,
.testimonial-next.swiper-button-disabled {
    opacity: .4;
    cursor: not-allowed;
}*/

.testimonial-slider{
    overflow:hidden;
}

/************************************/
/***         About Page Css       ***/
/************************************/
.about-content-image img {
    aspect-ratio: 1 / 1.31;
    object-fit: cover;
    border-radius: 20px;
}


/************************************/
/***       Services Page Css      ***/
/************************************/
.dental-care-services{
    padding: 100px 0;
    /*background: var(--secondary-color);*/
    background: linear-gradient(to bottom, var(--secondary-color) 0%, var(--secondary-color) 80%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.dental-care-services::before{
    content: '';
    position: absolute;
    width: 450px;
    height: 450px;
    background: rgba(255,82,108,.06);
    border-radius: 50%;
    top: -180px;
    right: -150px;
}

/*.dental-care-services::after{
    content: '';
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(10,93,255,.05);
    border-radius: 50%;
    bottom: -150px;
    left: -120px;
}*/

.care-service-box{
    background: #fff;
    border-radius: 25px;
    padding: 45px 35px;
    position: relative;
    overflow: hidden;
    height: 100%;
    transition: .45s;
    border: 1px solid #eef2f6;
    box-shadow: 0 15px 35px rgba(0,0,0,.06);
    z-index: 2;
}

.care-service-box::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(135deg,var(--primary-color),var(--accent-color));
    transition: .5s;
    z-index: -1;
}

.care-service-box:hover{
    transform: translateY(-12px);
    box-shadow: 0 25px 60px rgba(0,0,0,.12);
}

.care-service-box:hover::before {
    transform: scaleX(1);
    height: 100%;
}

.care-icon{
    width: 85px;
    height: 85px;
    border-radius: 20px;
    background: #fff3f5;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .45s;
}


.care-icon i{
    font-size: 34px;
    color: var(--primary-color);
}

.care-service-box:hover .care-icon {
    background: #fff3f5;
    transform: rotate(-8deg) scale(1.08);
}

.care-service-box:hover .care-icon i{
    color: var(--primary-color);
}

.care-service-box::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    right: -67px;
    top: -76px;
}

.care-service-box h3{
    font-size: 25px;
    margin: 28px 0 15px;
    transition: .4s;
}

.care-service-box p{
    color: #666;
    line-height: 1.8;
    transition: .4s;
}

.care-service-box:hover h3,
.care-service-box:hover p{
    color: #fff;
}

.service-count {
    position: absolute;
    top: 37px;
    right: 17px;
    font-size: 52px;
    font-weight: 700;
    color: #fff3f5;
    transition: .4s;
}

.care-service-box:hover .service-count{
    color: rgba(255,255,255,.18);
}


/************************************/
/***  Treatment Single Page Css   ***/
/************************************/

.treatment-single-row {
    padding: 20px 0 25px;
}

.service-catagery-list ul li:hover a{
    /*background:var(--primary-color);*/
    /*color:#fff;*/
    /*border-color:var(--primary-color);*/
    transform:translateX(5px);
}

/* Active */
.service-catagery-list ul li.active a {
    font-weight: 600;
    color: var(--accent-color);
    padding-left: 18px;
}
.service-catagery-list ul li.active a {
    transform: translateX(0px);
}

.service-catagery-list ul li.active a::after {
    transform: translate(0px, -50%) rotate(45deg);
}

.service-entry h3 {
    position: relative;
    margin-bottom: 25px;
    padding-bottom: 15px;
}
.service-entry h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 75px;
    height: 3px;
    background: var(--accent-color);
    border-radius: 20px;
}
.treatment-single-ul li:before {
    display: none !important;
}
.treatment-single-ul {
    list-style: none;
    padding: 0;
    margin: 40px 0;
    position: relative;
}

.treatment-single-ul::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 15px;
    bottom: 15px;
    width: 2px;
    background: #e8e8e8;
}

.treatment-single-ul li {
    position: relative !important;
    padding-left: 70px !important;
    margin-bottom: 12px;
    width: calc(100% - 10px) !important;
}

.treatment-single-ul li:last-child {
    margin-bottom: 0;
}

.treatment-single-ul li span{
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--accent-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

.treatment-single-ul h4 {
    margin-bottom: 6px;
    font-size: 20px;
    font-weight: 500;
}

.treatment-single-ul p {
    margin: 0;
    color: var(--text-color);
    /*font-weight: 500;*/
}

.treatment-entry-img-1 img {
    aspect-ratio: 1 / 0.8;
    object-fit: cover;
    border-radius: 40px;
}

.treatment-single-ul-new li {
    width: calc(100% - 10px) !important;
}


/************************************/
/***      Contact Us Page Css     ***/
/************************************/
.contact-us-item{
    position: relative;
    background: rgba(255,255,255,.96);
    border-radius: 24px;
    padding: 35px 23px;
    text-align: center;
    overflow: hidden;
    height: 345px;
    border: 1px solid rgba(0,0,0,.05);
    backdrop-filter: blur(8px);
    box-shadow: 0 15px 40px rgba(0,0,0,.06);
    transition: .45s ease;
}

/* Gradient Border */

.contact-us-item::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,
    var(--primary-color),
    var(--accent-color));
}

/* Background Blob */

.contact-us-item::after{
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    border-radius:50%;
    background:rgba(255,0,21,.05);
    top:-90px;
    right:-90px;
    transition:.6s;
}

/* Shine Effect */

.contact-us-item .shine{
    position:absolute;
    left:-140%;
    top:0;
    width:60%;
    height:100%;
    background:linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.7),
    transparent);
    transform:skewX(-25deg);
    transition:1s;
}

.contact-us-item:hover .shine{
    left:160%;
}

/* Hover */

.contact-us-item:hover{
    transform:translateY(-12px);
    box-shadow:0 30px 60px rgba(0,0,0,.12);
}

.contact-us-item:hover::after{
    transform:scale(1.4);
}

/* Icon */

.contact-us-item .contact-us-icon-box{
    width:82px;
    height:82px;
    margin:auto;
    margin-bottom:22px;
    border-radius:50%;
    background:linear-gradient(135deg,#fff0f2,#ffe6ea);
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
    transition:.45s;
    z-index:2;
}

/* Pulse Ring */

/*.contact-us-item .contact-us-icon-box::before{
    content:"";
    position:absolute;
    inset:-8px;
    border:2px dashed rgba(255,0,21,.25);
    border-radius:50%;
    animation:rotateRing 12s linear infinite;
}*/

.contact-us-item .contact-us-icon-box img{
    width:42px;
    transition:.4s;
}

.contact-us-item:hover .contact-us-icon-box {
    transform: translateY(-6px) scale(1.08);
    background: var(--accent-color);
}

.contact-us-item:hover .contact-us-icon-box img{
    filter:brightness(0) invert(1);
}

/* Heading */

.contact-info-content h3{
    font-size:23px;
    margin-bottom:15px;
    transition:.3s;
}

.contact-us-item:hover h3{
    color:var(--primary-color);
}

/* Text */

.contact-info-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:8px;
}

.contact-info-content a{
    color:#555;
    transition:.3s;
    text-decoration:none;
}

.contact-info-content a:hover{
    color:var(--primary-color);
}

/* Phone Icons */

.contact-info-content i{
    color:var(--primary-color);
    margin-right:6px;
}

/* Floating Animation */

.contact-us-item{
    animation:floatingCard 5s ease-in-out infinite;
}

.contact-us-item:nth-child(2){
    animation-delay:.5s;
}

.contact-us-item:nth-child(3){
    animation-delay:1s;
}

.contact-us-item:nth-child(4){
    animation-delay:1.5s;
}

@keyframes floatingCard{
    0%,100%{
        transform:translateY(0px);
    }

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

/*@keyframes rotateRing{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}*/

.contact-us-icon-box{
    animation:pulse 2.8s infinite;
}

@keyframes pulse{
    0%{
        box-shadow:0 0 0 0 rgba(255,0,21,.30);
    }

    70%{
        box-shadow:0 0 0 18px rgba(255,0,21,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(255,0,21,0);
    }
}

/************************************/
/***    Home Why Choose Us Css    ***/
/************************************/
.why-choose-item .icon-box img{
    animation: floatingIcon 3s ease-in-out infinite;
}

@keyframes floatingIcon{
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.09);
    }
}

/************************************/
/***  Whatsapp Floating Icon Css  ***/
/************************************/
/* Floating WhatsApp */
.floating-whatsapp{
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 65px;
    height: 65px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 34px;
    text-decoration: none;
    z-index: 9999;
    box-shadow: 0 12px 30px rgba(37,211,102,.35);
    animation: floatWhatsapp 3s ease-in-out infinite;
    transition: .35s;
}
.floating-whatsapp{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all .4s ease;
}

.floating-whatsapp.show{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Hover */
.floating-whatsapp:hover{
    transform: scale(1.12);
    color: #fff;
    box-shadow: 0 18px 40px rgba(37,211,102,.45);
}

/* Ripple Effect */
.floating-whatsapp::before,
.floating-whatsapp::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(37,211,102,.5);
    animation: ripple 2.5s infinite;
}

.floating-whatsapp::after{
    animation-delay: 1.2s;
}

/* Icon Animation */
.floating-whatsapp i{
    animation: iconPop 2s infinite;
}

/* Floating */
@keyframes floatWhatsapp{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-10px);
    }
}

/* Ripple */
@keyframes ripple{
    0%{
        transform: scale(1);
        opacity:.6;
    }
    100%{
        transform: scale(1.4);
        opacity:0;
    }
}

/* Icon Pulse */
@keyframes iconPop{
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.15);
    }
}

/* Mobile */
@media(max-width:768px){
    .floating-whatsapp{
        width:58px;
        height:58px;
        font-size:30px;
        right:20px;
        bottom:20px;
    }

    .tooltip{
        display:none;
    }
}


/************************************/
/***      Book Now Modal Css      ***/
/************************************/
.appointment-modal{
    border:none;
    border-radius:20px;
    overflow:hidden;
}

.appointment-modal .modal-header{
    background: var(--accent-color);
    color:#fff;
    padding:18px 25px;
    border:none;
}

.appointment-modal .modal-title{
    color:#fff;
    margin:0;
}

.appointment-modal .btn-close{
    filter:invert(1);
    opacity:1;
}

.appointment-modal .modal-body{
    padding:30px;
}

.appointment-modal .form-control{
    height:55px;
    border-radius:10px;
    border:1px solid #ddd;
    box-shadow:none;
}

.appointment-modal textarea.form-control{
    height:130px;
    resize:none;
}

.appointment-modal .form-control:focus{
    border-color:var(--primary-color);
    box-shadow:0 0 0 .2rem rgba(220,53,69,.15);
}

.appointment-modal-btn {
    text-align: center;
}

.appointment-modal .btn-default {
    width: auto;
    margin-top: 10px;
}

.appointment-modal .form-select{
    height:55px;
    border:1px solid #ddd;
    border-radius:10px;
    box-shadow:none;
}

.appointment-modal .form-select:focus{
    border-color:var(--primary-color);
    box-shadow:0 0 0 .2rem rgba(220,53,69,.15);
}


/************************************/
/***    Footer CTA Section Css    ***/
/************************************/
/*.cta-box {
    border-bottom: 1px solid var(--secondary-color);
}

.cta-box-item-last-child {
    border: none;
}

.cta-box-content a {
    color: var(--bs-body-bg);
    transition: all 0.4s ease-in-out;
    border-bottom: 1px solid #fff;
}

.cta-box-content a:hover {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

.home-timing-box p {
    display: flex;
    justify-content: flex-start;
    gap: 15px;
}*/
.clinic-contact-strip {
    /* padding: 70px 0; */
    /* background: #f8fbff; */
    top: 64px;
    position: relative;
    z-index: 2;
}

.contact-strip {
    background: #fff;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 30px;
    box-shadow: 0 1px 13px rgb(0 0 0 / 23%);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 18px;
}

.contact-icon {
    width: 55px;
    height: 55px;
    border-radius: 16px;
    background: #fff2f4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
}

.contact-icon i {
    font-size: 22px;
    color: var(--primary-color);
}

.contact-text span {
    display: block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #413f3f;
    margin-bottom: 3px;
}

.contact-text a,
.contact-text p {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--primary-color);
    transition: all .4s ease-in-out;
}

.contact-text a:hover {
    color: var(--accent-color);
}

.contact-text small {
    color: #504e4e;
}

.strip-divider {
    width: 1px;
    height: 50px;
    background: #e8e8e8;
}

.strip-btn {
    padding: 14px 28px;
    border-radius: 50px;
    background: var(--primary-color);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: .35s;
}

.strip-btn i {
    margin-left: 8px;
    transition: .35s;
}

.strip-btn:hover {
    background: #111;
    color: #fff;
}

.strip-btn:hover i {
    transform: translateX(5px);
}

/************************************/
/***          Footer Css          ***/
/************************************/
.footer-row > * {
    padding-right: 0;
    padding-left: 0;
}

.facebook-scroll{
    /*max-height: 500px;*/
    overflow-y: auto;
    /*border-radius: 10px;*/
}

.facebook-scroll iframe{
    width: 100%;
    height: 390px;
    border: 0;
}

.footer-copyright-text a {
    color: #ff0015;
    font-size: 17px;
    font-weight: 500;
    transition: all 0.4s ease-in-out;
}
.footer-copyright-text a:hover {
    color: var(--primary-color);
}

.footer-social{
    display:flex;
    align-items:center;
    gap:12px;
    list-style:none;
    padding:0;
    margin: 20px 0 0;
}

.footer-social li a{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(255,255,255,0.1);
    color:#fff;
    font-size:18px;
    transition:all .3s ease;
}

.footer-social li a:hover{
    background:var(--accent-color);
    color:var(--primary-color);
    transform:translateY(-5px);
}

.footer-margin-top {
    margin-top: 40px;
}

/* CTA */
.clinic-footer-cta{
    margin-bottom:-80px;
    position:relative;
    z-index:10;
}

.clinic-footer-cta-box{
    background:#fff;
    border-radius:25px;
    padding:40px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.cta-left-content{
    width:70%;
}

.cta-left-content span{
    color:var(--primary-color);
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:1px;
}

.cta-left-content h2{
    font-size:42px;
    margin:15px 0;
}

.cta-left-content p{
    color:#666;
    margin:0;
}

.cta-book-btn{
    background:var(--primary-color);
    color:#fff;
    padding:18px 40px;
    border-radius:50px;
    text-decoration:none;
    font-weight:600;
    transition:.4s;
}

.cta-book-btn:hover{
    background: var(--accent-color);
    color:#fff;
}


/* Footer */
.clinic-main-footer {
    padding: 120px 0 0;
    color: #fff;
    position: relative;
    background: url(../images/bg-2.png) center / cover no-repeat;
    overflow: hidden;
    z-index: 1;
}
.clinic-main-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff7f8c2;
    z-index: -1;
}

.footer-logo {
    width: 89%;
    margin-bottom: 25px;
    /*background: var(--secondary-color);*/
    /*padding: 15px 37px 15px 20px;*/
    /*border-radius: 5px 50px 50px 5px;*/
    /*box-shadow: -3px 5px 10px #ffffff29;*/
}

.clinic-footer-widget1 {
    padding-right: 30px;
}

.clinic-footer-widget h3{
    position:relative;
    font-size:24px;
    font-weight:700;
    color: var(--accent-color);
    margin-bottom:25px;
    padding-bottom:15px;
}

.clinic-footer-widget h3::before{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width: 75px;
    height:3px;
    background:var(--accent-color);
    border-radius:20px;
}

.clinic-footer-widget p{
    color: #403434;
    line-height:1.8;
    text-align: justify;
    font-size: 15px;
}

.clinic-footer-widget i {
    color: #ff0015;
}

.clinic-footer-widget ul li a i{
    animation: iconFloat 2.5s ease-in-out infinite;
}

@keyframes iconFloat{
    0%,100%{
        transform: translateX(-3px);
    }
    50%{
        transform: translateX(1px);
    }
}

.footer-contact-item i {
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse{
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.15);
    }
}

.clinic-footer-widget ul{
    padding:0;
    list-style:none;
}

.clinic-footer-widget ul li{
    position:relative;
    transition:.3s;
    line-height: 37px;
}

.clinic-footer-widget ul li a {
    color: #403434;
    font-size: 15px;
}

.clinic-footer-widget ul li a:hover {
    color: var(--accent-color);
}

.clinic-footer-widget ul li:hover{
    transform:translateX(8px);
}

.clinic-footer-widget ul li a i{
    transition:.3s;
}

.clinic-footer-widget ul li:hover i {
    color: var(--primary-color);
}

.footer-contact-item{
    /*background:rgba(255,255,255,.05);*/
    /*padding:15px;*/
    /*border-radius:12px;*/
    /*transition:.4s;*/
    margin-bottom:15px;
    transition: all .3s ease-in-out;
}

.footer-contact-item1{
    display: flex;
    flex-direction: column;
}

.footer-contact-item1 ul {
    margin: 0;
}

/*.footer-contact-item:hover{
    transform: translateX(8px);
}*/

.footer-contact-item ul li:hover {
    transform: translateX(0px);
}

.footer-contact-item i{
    color: #ff0015;
    margin-top:4px;
}

.footer-contact-item a {
    color: #403434;
    transition: all .3s ease-in-out;
    font-size: 15px;
}

.footer-contact-item a:hover {
    color: var(--accent-color);
}

.footer-social-links{ 
    display:flex; 
    gap:12px; 
    margin: 0; 
    /*padding-top: 10px;*/ 
} 

.footer-social-links a{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: 1px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: .4s;
    animation: socialFloat 3s ease-in-out infinite;
}

.footer-social-links a:nth-child(2){
    animation-delay: .2s;
}

.footer-social-links a:nth-child(3){
    animation-delay: .4s;
}

.footer-social-links a:nth-child(4){
    animation-delay: .6s;
}

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

.footer-social-links a i {
    font-size: 20px;
}
.footer-social-links a:hover {
    /*background: var(--accent-color);*/
    transform: translateY(-5px);
    border: none;
    color: #fff;
}

.footer-social-links a:nth-child(1):hover{
    background:#1877F2;
}

.footer-social-links a:nth-child(2):hover{
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.footer-social-links a:nth-child(3):hover{
    background:#ff0000;
}
.clinic-footer-widget{
    position:relative;
    /*padding-right:30px;*/
}

.clinic-footer-bottom{
    border-top: 1px solid rgb(0 0 0 / 15%);
    text-align: center;
    margin-top: 30px;
    padding: 25px 0;
}

.clinic-footer-bottom p{
    margin: 0;
    color: var(--primary-color);
}

.footer-clinic-features{
    margin: 25px 0;
}

.footer-clinic-features span{
    display: block;
    margin-bottom:10px;
    color:#fff;
}

.footer-clinic-features i{
    color:#25d366;
    margin-right:8px;
}


/************************************/
/***        Responsive Css        ***/
/************************************/
@media (max-width: 768px) {

/* ========== COMMON CSS ========== */
    .cb-cursor {
        display: none;
    }

/* ========== HOME BANNER CSS ========== */
	.hero.bg-image .hero-content .section-title p {
	    text-align: justify;
	}
	.hero.bg-image .hero-content .section-title h3 {
	    font-size: 13px;
	}
	.treatment-grid{
        grid-template-columns:1fr;
    }
    .hero.bg-image .hero-content .section-title h1 span {
        padding: 0px 12px;
        line-height: 53px;
    }

/* ========== HOME ABOUT CSS ========== */
    .experience-count {
        right: 58px;
    }
    .about-content {
        padding-top: 25px;
    }

/* ========== HOME TREATMENT CSS ========== */
    .swiper-button-prev {
        left: 74% !important;
    }
    .treatment-section {
        padding: 70px 0 50px;
    }

/* ========== HOME WHY CHOOSE US CSS ========== */
    .why-choose-us .section-title {
        text-align: left !important;
    }

/* ========== HOME SERVICES CSS ========== */
    .section-header h2{
        font-size:30px;
    }

/* ========== ABOUT PAGE CSS ========== */
    .about-member-info, .member-winning-awards, .team-member-skills {
        padding: 35px 25px;
    }
    .about-member-details {
        padding: 25px 0 0;
    }
    .team-member-skills {
        margin-bottom: 0;
    }
    .about-content-image img {
        aspect-ratio: 1 / 1;
        margin-bottom: 30px;
    }

/* ========== GALLERY PAGE CSS ========== */
    .gallery-section {
        padding: 50px 0 0;
    }

/* ========== SERVICES PAGE CSS ========== */
    .dental-care-services {
        padding: 100px 0 0;
    }

/* ========== TREATMENT SINGLE PAGE CSS ========== */
    .service-entry-img-1 img, .service-entry-img-2 img {
        aspect-ratio: 1 / 0.7;
        border-radius: 10px;
    }
    .page-service-single {
        padding: 50px 0 0;
    }
    .service-featured-image img {
        aspect-ratio: 1 / 0.6;
    }
    .service-entry h2 {
        font-size: 38px;
        margin-bottom: 20px;
    }
    .service-single-content {
        padding-bottom: 0;
    }
    .treatment-single-row > * {
        padding-right: 5px;
        padding-left: 5px;
    }
    .service-catagery-list h3 {
        font-size: 20px;
    }
    .service-catagery-list {
        padding: 25px;
    }

/* ========== CONTACT PAGE CSS ========== */
    .page-contact {
        padding: 50px 0 0;
    }
    .contact-us-content {
        margin-bottom: 0;
    }
    .contact-form {
        margin: 0 0 50px;
    }
    .contact-us-form {
        padding: 25px 0 0;
    }

/* ========== TREATMENT SINGLE PAGE CSS ========== */
    .treatment-single-ul li {
        padding: 10px 20px 20px;
        gap: 18px;
    }

    .treatment-single-ul li span{
        width:55px;
        height:55px;
        min-width:55px;
        font-size:18px;
    }

    .treatment-single-ul li h4{
        font-size:18px;
    }

    .treatment-single-ul li p{
        font-size:15px;
    }

/* ========== FOOTER CTA SECTION CSS ========== */
    .cta-box-item {
        margin-bottom: 40px;
    }
    .cta-box-item-last-child {
        margin-bottom: 0;
    }
    .contact-strip {
        flex-direction: column;
        gap: 25px;
        padding: 30px;
    }

    .strip-divider {
        display: none;
    }
    .contact-strip {
        align-items: flex-start;
    }
    .contact-text {
        text-align: left;
    }
    .contact-text span {
        margin-bottom: 0px;
    }
    .contact-text a, .contact-text p {
        line-height: 23px;
    }
    .contact-item{
        align-items:flex-start;
    }

    .contact-icon{
        width:50px;
        height:50px;
        min-width:50px;
        min-height:50px;
        flex-shrink:0;
    }

    .clinic-contact-strip {
        top: 100px;
    }
    .clinic-main-footer {
        padding: 150px 0 0;
    }
    .strip-btn {
        align-self: center;
    }

/* ========== FOOTER CSS ========== */
    .clinic-footer-widget h3 {
        margin-bottom: 15px;
    }
    .clinic-footer-widget ul {
        margin-bottom: 20px;
    }
    .clinic-footer-widget1 {
        padding-right: 0;
    }
    .footer-copyright-text p {
        font-size: 15px;
    }
    .footer-copyright-text a {
        font-size: 16px;
    }
    .footer-social-links {
        padding-bottom: 30px;
    }
    .col-lg-4:not(:last-child) .clinic-footer-widget,
    .col-lg-3:not(:last-child) .clinic-footer-widget,
    .col-lg-2:not(:last-child) .clinic-footer-widget{
        border-right:1px solid rgba(255,255,255,.08);
    }
    .clinic-footer-cta-box{
        flex-direction:column;
        text-align:center;
    }
    .cta-left-content{
        width:100%;
        margin-bottom:30px;
    }
    .cta-left-content h2{
        font-size:34px;
    }
    .clinic-main-footer {
        background: url(../images/bg-2.png) center right / cover no-repeat;
    }

}