@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300;400;500;600;700;800;900&display=swap');

/******************************
    ---- Table Of Index ----

    00 - Global css
    01 - Header css
    02 - Home css
        # - Banner css
        # - About Us css
        # - Our Services css
        # - Why Choose US css
        # - Book An Appoinment css
        # - Testimonials css
    03 - About Us
        # - Banner css
        # - Who We Are css
        # - Number Section css
        # - Our Doctor's css
        # - Parallax section css
        # - Our Dental Services css
        # - contact css
    04 - Services
        # - Banner css
        # - Service Grid css
        # - Faq
        # - Price Box
    05 - Service Details css
        # -  Teeth Cleaning Page css
    06 - Our Team 
    07 - Team Details Page
    08 - Testimonial Page 
    09 - FAQ's Page
    10 - 404 Page
    11 - Blog Page
    12 - Blog Details Page
    13 - Contact Us Page
    14 - Page Loader css
    15 - Footer
    16 - Back To Top css
    17 - form loader css
******************************/


/*----------------------------------------*/
/*  00 - Global css
/*----------------------------------------*/

:root {
    --primary_color: #0077b6;
    --secondary_color: #00a8cc;
    --white: #fff;
    --black: #000;
    --btn: #ffb900;
    --background-color: #F8F9FA;
    --bg-secondary: #f1f1f1;
    --text-color: #212529;
    --primary-font: 'Poppins', sans-serif;
    --secondary-font: 'Roboto', sans-serif;
}

body {
    font-family: var(--primary-font);
    background-color: var(--background-color);
    color: var(--text-color);
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--secondary-font);
    color: var(--text-color);
}
.cursor-pointer{
    cursor: pointer;
}

.tooltip-inner {
    background-color: var(--primary_color) !important; 
    color: #fff !important;               
}

.text-primary{
    color: var(--primary_color) !important;
}
/*----------------------------------------*/
/*  01- Header css 
/*----------------------------------------*/

/* topbar start end*/
.topbar {
    background-color: var(--secondary_color);
    color: var(--white);
    padding: 10px 0;
}

.topmaindiv {
    display: flex;
    gap: 20px;
}

.topdiv {
    display: flex;
    align-items: center;
    gap: 10px;
}
.topdiv p{
    font-size: 14px;
}
.bgSecondary{
    background: var(--bg-secondary);
}
/* topbar end */

/* header start */
.headerbg {
    padding: 10px 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.sticky-header {
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1000;
    background: var(--white);
    animation: slideDown 0.35s ease-out;
    box-shadow: 0 0 4px rgb(0 0 0 / 10%), 0 4px 8px rgb(0 0 0 / 15%);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.Offc-topmaindiv{
    display: none;
}

/* navbar start*/
.nav-item .nav-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
}
.nav-item .nav-link:hover {
    color: var(--primary_color);
}
.nav-item .nav-link.active {
    color: var(--primary_color);
}

.toothcare-site .navbar-nav .dropdown-menu .dropdown-item.active{
    background: var(--white);
    color: var(--primary_color);
}

/* navbar ends*/

/* Dropdown menu styling */
.toothcare-site .navbar-nav .dropdown-menu {
    background: var(--primary_color);
    color: var(--white);
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    min-width: 200px;
    text-transform: uppercase;

}

.toothcare-site .navbar-nav .dropdown-menu .dropdown-item {
    padding: 5px 15px;
    color: var(--white);
    transition: all 0.3s ease-in-out;
    font-weight: 600;
}

.toothcare-site .navbar-nav .dropdown-menu .dropdown-item:hover {
    background: var(--white);
    color: var(--primary_color);
}

.toothcare-site .nav-item.dropdown:hover .dropdown-menu {
    display: block;
    animation: fadeIn 0.3s ease-in-out;
}

/* Animation for dropdown */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.toothcare-site .dropdown-divider {
    border: 1px solid var(--white) !important;
}

/*----------------------------------------*/
/*   02- Index css 
/*----------------------------------------*/

/* banner start */

.banner {
    padding-top: 4%;
    background: linear-gradient(to right, #004aad, #002f6c);
    text-align: center;
    animation: fadeIn 1.5s ease-in-out;
    position: relative;
    overflow: hidden;
}

.bannertext {
    color: var(--white);
    padding: 8%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}
.bannertext h1, .bannertext h6 {
    color: var(--white);
}

.highlight {
    color: #ffd700;
    position: relative;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.7);
    animation: glow 1.5s infinite alternate;
}

.tooth-icon {
    color: #ffd700;
    font-size: 2rem;
    animation: rotateTooth 2s infinite alternate;
}

.primaryBTN {
    padding: 12px 25px;
    border-radius: 30px;
    border: none;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: var(--white);
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    position: relative;
}

.primaryBTN i {
    margin-right: 8px;
}

.primaryBTN:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.primaryBTN::after {
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 30px;
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.2);
    animation: pulse 1.5s infinite;
}

.banner-img {
    max-width: 100%;
    transition: transform 0.5s ease-in-out;
}

.banner-img:hover {
    transform: scale(1.05);
}

.bubble {
    font-size: 2rem;
    color: #ffd700;
    position: absolute;
    opacity: 0.5;
}

.bubble1 {
    top: 10%;
    left: 20%;
    animation: float 6s infinite ease-in-out;
}

.bubble2 {
    top: 64%;
    right: 4%;
    animation: float 8s infinite ease-in-out;
}

.bubble3 {
    bottom: 10%;
    left: 40%;
    animation: float 7s infinite ease-in-out;
}

.bubble4 {
    top: 10%;
    right: 20%;
    animation: float 6s infinite ease-in-out;
}

/* Keyframes */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

@keyframes glow {
    from {
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.7);
    }

    to {
        text-shadow: 0 0 20px rgba(255, 215, 0, 1);
    }
}

@keyframes rotateTooth {
    from {
        transform: rotate(-10deg);
    }

    to {
        transform: rotate(10deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 0.7;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.7;
    }
}

@keyframes float {
    0% {
        transform: translateY(0);
        opacity: 0.5;
    }

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

    100% {
        transform: translateY(0);
        opacity: 0.5;
    }
}

/* banner end */

/* About Us start */

.aboutus {
    padding: 5% 0;
    background-color: var(--background-color);
}

.aboutimg {
    position: relative;
}

.counter-section {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: bold;
}

.counterbox {
    background-color: var(--secondary_color);
    width: 40%;
    height: 230px;
    color: var(--white);
    text-align: center;
    border-radius: 15px 0;
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.counterbox p {
    margin-bottom: 0;
    font-size: 20px;
    font-weight: 600;
}

.counter {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.counter.show {
    opacity: 1;
    transform: translateY(0);
}

.features {
    list-style: none;
    padding: 0;
}

.features li {
    font-size: 16px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}

.features i::before {
    margin-right: 10px;
    color: var(--secondary_color);
}

.AboutBtn {
    background-color: var(--secondary_color);
    color: var(--white);
    padding: 10px 20px;
    text-decoration: none;
    display: inline-block;
    margin-top: 15px;
    border-radius: 5px;
}

.AboutBtn:hover {
    background-color: var(--primary_color);
    color: var(--white);
}

.iconbox i {
    font-size: 40px;
    color: var(--primary_color);
}

.iconbox h3 {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
}

.iconbox p {
    font-size: 1rem;
    color: #666;
}

.iconbox {
    background: var(--white);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    height: 100%;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.iconbox:hover {
    transform: translateY(-10px); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.aboutcol p{
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

/* about us end */

/* Our services start */
.services {
    padding: 5% 0;
}

.servicetitle {
    display: flex;
    align-items: center;
}

.servicetitle h1 {
    color: var(--secondary_color);
    font-weight: 700;
    font-size: 50px;
}

.services-container {
    width: 80%;
    max-width: 1000px;
    text-align: left;
}

.services-container h2 {
    color: #00a8df;
    font-size: 2rem;
}

.swiper {
    width: 100%;
    padding: 20px 0;
}

.swiper-slide {
    position: relative;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#Services img {
    width: 100%;
    object-fit: cover;
}

.services-slider-wrapper {
    width: 69%;
}
.service-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: white;
    padding: 10px 10px 10px 40px;
    font-size: 1.2rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(0deg, rgb(2 93 142), rgba(397, 377, 394, 0));
    align-items: flex-start;
}
.ServiceHeading{
    font-size: 28px;
}

.service-info i {
    font-size: 50px;
}
.ServiceinnerBox {
    position: relative;
    text-align: start;
}

.ServiceinnerBox h4 {
    color: var(--white);
    margin-top: 20px;
}
.servicebox {
    position: relative;
}

.serviceovely {
    position: absolute;
    bottom: 16px;
    background: #000;
    opacity: 0.8;
    color: var(--white);
    margin: 0 20px;
    padding: 30px;
    border-radius: 20px;
    visibility: hidden;
    transform: translateY(100%);
    transition: 0.4s ease;
}

.servicebox:hover .serviceovely {
    visibility: visible;
    transform: translateY(0);
}

.servicebox:hover .service-info {
    visibility: hidden;
}
.ServicehoverBox {
    font-size: 28px;
    position: absolute;
    top: -80%;
    background: #002e8c;
    padding: 5px 13px;
    border-radius: 60px;
    border: 3px solid #fff;
}
/* services end */

/* Why choose Us start */
.whychooseus {
    padding: 5% 0;
    background-color: #002e8c;
}

.whyiconbox {
    background-color: #1a4092;
    padding: 20px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.whyiconbox {
    position: relative;
    overflow: hidden;
}

.whyiconbox::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease-in-out;
}

.whyiconbox:hover::after {
    left: 100%;
}

.whyiconbox i {
    font-size: 40px;
    color: #ffdd57;
}

.whyiconbox h3 {
    text-align: center;
    color: var(--white);
    margin-top: 20px;
}

.whyiconbox p {
    color: var(--white);
    margin-bottom: 0;
    text-align: center;
}

.chooseus h1 {
    font-size: 50px;
    font-weight: 700;
}

.chooseus p {
    font-size: 25px;
    margin-bottom: 0;
}

/* Why choose Us end */

/* Book Your Appointment start */
.calendarbg {
    padding: 5% 0;
}

.calendarbox {
    position: relative;
}

.calendarsubbox {
    background: #002e8c;
    padding: 20px;
    border-radius: 20px;
    color: var(--white);
    text-align: center;
    position: absolute;
    bottom: -13px;
    right: 79px;
}

.calendarsubbox h4 {
    font-size: 22px;
    color: var(--white);
}

.calendarsubbox p {
    font-size: 14px;
}

.appoinmentbox {
    width: 100%;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
    display: flex;
    gap: 20px;
}

.calendarsub {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
}

.calendar-title {
    font-size: 30px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 10px;
}

.month {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.weekdays,
.days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-top: 10px;

}

.weekdays div {
    font-weight: bold;
    background-color: var(--secondary_color);
    color: var(--white);
    padding: 10px;
}

.days div {
    padding: 10px;
    background: #e3e3e3;
    border-radius: 5px;
    cursor: pointer;
}

.days div:hover {
    background: #d3d3d3;
}

.today {
    background: var(--primary_color) !important;
    color: white;
    font-weight: bold;
}
.selected{
    background: var(--secondary_color) !important;
    color: var(--white);
}

/* time start */
.time {
    display: flex;
    flex-direction: column;
    width: 26%;
    gap: 10px;
    min-height: 100px;
    height: 448px;
    overflow-y: scroll;
}

.timeBTN {
    border: 1px solid var(--secondary_color);
    padding: 10px;
    font-size: 15px;
}

.timeBTN:hover {
    background-color: var(--secondary_color);
    color: var(--white);
}

/* time end */

/* form start */

.toothcare-site .form-control {
    padding: 12px 20px;
    border: 1px solid #d4d3d3;
}

.toothcare-site .appoinmentbtn {
    border: 1px solid var(--secondary_color);
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 16px;
}

.toothcare-site .appoinmentbtn:hover {
    background-color: var(--secondary_color);
    color: var(--white);
}

.dateTiemBox{
    display: flex;
    gap: 30px;
}
.FinalDAteTime {
    display: flex;
    gap: 30px;
    margin-bottom: 20px;
}
.FinalSelection {
    margin-left: 7px;
    color: #838383;
}
.formBox{
    position: relative;
}

/* Book Your Appointment  end */

/* Testimonials start */
.review {
    padding: 2% 0;
    position: relative;
}

.swiper.testimonial-slider {
    padding-bottom: 50px;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: auto !important;
    position: relative;
    transition-property: transform;
    display: block;
}

.reviewcard {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.cardbbox {
    padding: 20px;
    background-color: #f1f1f1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cardbbox p {
    font-size: 18px;
    line-height: 1.5;
}

.qoute i {
    background: var(--white);
    padding: 6px;
    border-radius: 50%;
}

.qoute {
    text-align: left;
}

.testimonialBOX {
    display: flex;
    gap: 10px;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    background: var(--white);
}
.swiper-pagination {
    position: absolute;
    bottom: 0px !important;
    width: 100%;
    text-align: center;
}

/* Testimonials End */


/* ---------------------
    03 - about us 
------------------------ */

/* banner start */
.aboutbg {
    background-image: url(../img/aboutusbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
}

.pagetitle {
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 10;
}
.pagetitle p{
    text-align: center;
}

.breadcrumb {
    display: flex !important;
    box-shadow: 0 8px 14px -2px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
    padding: 0.75rem 1.25rem !important;
    border-radius: 35px !important;
    background: var(--primary_color) !important;
    border: 1px solid var(--white);
    backdrop-filter: blur(2px);
}

.breadcrumb-links {
    display: flex;
    column-gap: 1rem;
    align-items: center;
    padding-left: 0;
}

.breadcrumb-links li {
    list-style: none;
}

.breadcrumb-links>li:nth-child(n + 4) {
    display: none;
}

.breadcrumb-box {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    color: #9ca3af;
}

.breadcrumb-box:hover>*:not(.breadcrumb-icon) {
    color: var(--textcolor);
}

.breadcrumb-icon,
.breadcrumb-icon-home {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    color: #f7c844;
    padding-top: 4px;
}

.breadcrumb-links li:first-child .breadcrumb-text {
    display: none;
}

.breadcrumb-text {
    margin-left: 1rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    font-weight: 500;
    color: var(--white);
}

/* banner end */

/* who we are start */
.whoare {
    padding: 5% 0;
}

.arebox {
    padding: 40px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    text-align: center;
}

.arebox.visible {
    opacity: 1;
    transform: translateY(0);
}

h2 {
    color: #0077b6;
    font-size: 2rem;
    margin-bottom: 15px;
}

p {
    line-height: 1.8;
    font-size: 1.1rem;

}

.arebox::after {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background: #0077b6;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* who we are end */

/* number section start */
.numbersection {
    padding: 5% 0;
    background-image: url(../img/numberbg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: 5% 0;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.stat-box {
    background: white;
    padding: 40px 0;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: #007BFF;
}

.stat-label {
    font-size: 1.2rem;
    color: #333;
    margin-top: 10px;
}

/* number section end */

/* Our Doctor's start */
.testimonial {
    padding-bottom: 5%;
}

.testimonial h2 {
    font-size: 50px;
}

.swiper-slide {
    text-align: center;

}

.doctor {
    padding-top: 3%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    border: 1px solid var(--secondary_color);
}

.doctor img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: transform 0.3s ease;
    margin-bottom: 10px;
}

.doctor img:hover {
    transform: scale(1.1);
}

.doctor h3 {
    margin-top: 15px;
    font-size: 22px;
    color: #333;
}

.doctor p {
    font-size: 16px;
    color: #666;
}

.doctorbox {
    background: #f1f1f1;
    padding: 10px 0;
}

/* Our Doctor's end */

/* parallax image start */
.parallax {
    background-image: url(../img/parallax.jpg);
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 15%;
}

/* parallax image end */

/* Our Dental Services start */
.services {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 40px 20px;
}

.service {
    background: white;
    border-radius: 20px;
    padding: 30px;
    width: 220px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service img {
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    transition: transform 0.6s ease-in-out;
    border: 4px solid var(--secondary_color);
    border-radius: 50%;
}

.service h2 {
    font-size: 1.2rem;
    color: var(--primary_color);
    font-weight: 600;
    text-transform: uppercase;
}

.service:hover {
    transform: translateY(-15px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.service:hover img {
    transform: rotate(360deg) scale(1.1);
}

.service::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 5px;
    background: linear-gradient(to right, var(--secondary_color), var(--primary_color));
    bottom: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.service:hover::before {
    transform: scaleX(1);
}

/* Our Dental Services end */

/* about contact start */
.aboutcontactbg {
    background: linear-gradient(135deg, #f1f1f1, #e6e6e6);
    padding: 50px 0;
    border-radius: 12px;
    margin-top: 5%;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.about-text {
    color: #3f3e3e;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.8;
    font-family: 'Poppins', sans-serif;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 1s ease-out 0.3s, transform 1s ease-out 0.3s;
}

.brand-name {
    font-weight: 600;
    color: #0072ff;
}

.toothcare-site .btn-custom {
    display: inline-block;
    background: linear-gradient(45deg, #0072ff, #00c6ff);
    color: white;
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 24px;
    border-radius: 30px;
    text-decoration: none;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0px 4px 12px rgba(0, 114, 255, 0.3);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 1s ease-out 0.6s, transform 1s ease-out 0.6s;
}

.toothcare-site .btn-custom:hover {
    transform: scale(1.1);
    box-shadow: 0px 8px 16px rgba(0, 114, 255, 0.5);
}

/* Fade-in effect when section enters viewport */
.show-section {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.show-text {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

.show-btn {
    opacity: 1 !important;
    transform: scale(1) !important;
}

/* about contact end */


/*----------------------------------------*/
/*  04 - Services css
/*----------------------------------------*/

/* banner start */
.servicesbg {
    background-image: url(../img/servicesbg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
}

.servicesbg h2 {
    color: var(--white);
}

/* banner end */

/* services grid start */
.servicesour {
    padding: 20px;
    margin-top: 40px;
}

.filter-buttons {
    margin-bottom: 20px;
}

.filter-buttons button {
    padding: 10px 20px;
    margin: 5px;
    border: none;
    background-color: #007bff;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.filter-buttons button:hover {
    background-color: #0056b3;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
    gap: 40px;
    padding: 10px;
}

.service-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.service-text {
    text-align: left;
}

.service-item {
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    padding: 20px;
}

.service-item img {
    width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.service-item:hover img {
    transform: scale(1.05);
}

.icon-box {
    background: #007bff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin: 0 auto 10px;
    font-size: 30px;
    padding: 15px;
}

.service-item h3 {
    color: #333;
    margin: 10px 0;
}

.service-item p {
    color: #666;
    font-size: 14px;
}

.hidden {
    display: none;
}

.tabs {
    margin-bottom: 20px;
}

.tab-btn {
    padding: 12px 24px;
    margin: 5px;
    border: none;
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    cursor: pointer;
    border-radius: 25px;
    transition: all 0.3s ease;
    font-size: 16px;
    font-weight: bold;
}

.tab-btn:hover,
.tab-btn.active {
    background: #ff6b6b;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
}

/* services grid end */

/* faq's start */
.faq-container {
    padding: 30px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

.faq-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.faq-item {
    border-bottom: 1px solid #e0e0e0;
    overflow: hidden;
    border-radius: 20px;
}

.faq-question {
    width: 100%;
    text-align: left;
    padding: 15px;
    border: none;
    background: #eef1f8;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.3s ease;
}

.faq-question:hover {
    background: #dde5f3;
}

.faq-answer {
    display: none;
    padding: 15px;
    background: white;
    font-size: 16px;
    animation: fadeIn 0.3s ease-in-out;
}

.faq-question:after {
    content: '\002B';
    font-size: 20px;
    transition: transform 0.3s ease;
}

.faq-question.active:after {
    content: '\2212';
    transform: rotate(180deg);
}

.emergency-box {
    background: linear-gradient(135deg, #6b8cff, #9b59b6);
    padding: 20px;
    text-align: center;
    margin-top: 20px;
    border-radius: 10px;
    color: white;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 65%;
}

.emergency-box h3 {
    margin: 0;
    font-size: 22px;
    color: var(--white);
}

.emergency-box p {
    font-size: 18px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

.faqcolumn {
    display: flex;
    gap: 20px;
}

.faqcolumnitme {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* faq's end */

/* Price Box start */
.pricing-section {
    padding: 60px 0;
    background: #f9f9f9;
}

.section-title {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 10px;
    color: var(--white);
}

.section-subtitle {
    font-size: 18px;
    color: #666;
    margin-bottom: 40px;
}

.pricing-card {
    background: white;
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.pricing-card:hover {
    transform: translateY(-5px);
}

.pricing-card h3 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 15px;
}

.price {
    font-size: 28px;
    font-weight: bold;
    color: #007bff;
    margin-bottom: 15px;
}

.price span {
    font-size: 16px;
    color: #666;
}

.pricing-card ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.pricing-card ul li {
    font-size: 16px;
    margin-bottom: 10px;
}

.pricing-btn {
    background: linear-gradient(135deg, #007bff, #0056b3);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

.pricing-btn:hover {
    background: #ff6b6b;
}

.featured {
    border: 2px solid #007bff;
    transform: scale(1.05);
}
/* Price Box start */

/*----------------------------------------*/
/*  05 - Services Detail css
/*----------------------------------------*/

/* teeth-cleaning */

.serviceinner {
    display: flex;
    max-width: 1200px;
    margin: 50px auto;
    gap: 20px;
}
.servicedetailsbg{
    background-image: url(../img/bg2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white) !important;
}

.servicedetailsbg h2{
    color: var(--white);
}
.inner-content {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 800px;
}

.inner-content img {
    border-radius: 8px;
    margin-top: 10px;
}

.sidebar {
    background: var(--white);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 155%;
}

.sidebar h2 {
    margin-bottom: 15px;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin: 10px 0;
}

.sidebar ul li a {
    text-decoration: none;
    color: #333;
    padding: 10px;
    display: block;
    border-radius: 5px;
    border: 2px solid var(--primary_color);
}

.sidebar ul li a:hover {
    background-color: var(--primary_color);
    color: var(--white);
}

.maincontainer {
    display: flex;
    gap: 20px;
    flex-direction: column;
}

.working-hours {
    background: var(--primary_color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 155%;
}

.working-hours h2 {
    color: var(--white);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--white);
}

.working-hours div {
    color: var(--white);
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

@media (max-width: 768px) {
    .serviceinner {
        flex-direction: column;
    }
}

/* teeth-cleaning end */

/*----------------------------------------*/
/*  06 - Our Taem css
/*----------------------------------------*/
.teambg{
    background-image: url(../img/bg1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
}
.team-section {
    padding: 50px 20px;
    background: #fff;
}

.team-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.team-member {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.teamimg {
    transition: background 0.3s ease;
    position: relative;
    overflow: hidden;
}

.teamimg::before,
.teamimg::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    transform: scale(0);
    transition: transform 0.3s ease-out;
    background: #00a8cc52;
    pointer-events: none;
    z-index: 1;
}

.teamimg::before {
    transform-origin: left top;
}

.teamimg::after {
    transform-origin: right bottom;
}

.team-member img {
    object-fit: cover;
    margin-bottom: 15px;
    transition: opacity 0.3s ease;
}

.team-member h3 {
    margin: 10px 0 5px;
    color: #333;
}

.team-member p {
    color: #777;
}

.social-links {
    position: absolute;
    top: 59%;
    left: 32%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.social-links a {
    color: #fff;
    background: #0077b6;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.3s ease;
}

.social-links a:hover {
    background: #005f8a;
    transform: scale(1.2);
}

.team-member:hover .social-links {
    opacity: 1;
    transform: translate(130%, -150%) scale(1);
    z-index: 1;
    border: none;
}

.teamimg:hover::before,
.teamimg:hover::after {
    transform: scale(1);
}

/*----------------------------------------*/
/*  07 - Team Details Page css
/*----------------------------------------*/

.profile-card {
    padding: 20px;
    border-bottom: 2px solid var(--primary_color);
    display: flex;
    gap: 20px;
}

.doctor-img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.specialization {
    font-size: 1.1em;
    color: #555;
}

.bio {
    font-size: 1em;
    margin: 10px 0;
    color: #666;
}

.contact-btn {
    background: #0077b6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.contact-btn:hover {
    background: #005f8b;
}

/* Sections Styling */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.details, .services1, .faqs, .before-after, .contact-info, .social-links, .map {
    padding: 20px;
    border-bottom: 2px solid var(--primary_color);
    animation: fadeIn 0.8s ease-in-out;
}

.faqs h3{
    color: var(--primary_color);
}

.details h3 {
    color: var(--primary_color);
}

.details p{
    margin-bottom: 0;
}

.services1 h3{
    color: var(--primary_color);
}

.contact-info h3{
    color: var(--secondary_color);
}

.contact-info p{
   
    margin-bottom: 0;
}
.contact-info i{
    color: var(--primary_color);
}

.before-after{
    color: var(--primary_color);
}
/* Testimonials & FAQ */

/* Modal Styling for Appointment Form */
.modal {
    display: none; /* Ensures it's hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background: white;
    padding: 20px;
    border-radius: 10px;
    width: 400px;

}

.close {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
}

.map h3 {
    color: var(--secondary_color);
}

.map h3 i{
    color: var(--primary_color);
}

.contact-btn {
    transition: transform 0.3s ease-in-out, background 0.3s;
}

.contact-btn:hover {
    transform: scale(1.05);
}

.doctor-img {
    transition: transform 0.3s ease-in-out;
}

.doctor-img:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* book an appoinment */
.appoinmentbg{
    background-image: url(../img/bg9.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
}


/*----------------------------------------*/
/*  08 - Testimonial Page css
/*----------------------------------------*/

.testimonialbg{
  background-image: url(../img/bg3.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  padding: 5% 0;
  color: var(--white);
}

.testimonial_title {
  color: var(--btn);
  font-weight: bold;
  font-size: 1.25rem;
}

.testimonial-heading {
  font-weight: 800;
  font-size: 2rem;
  margin-top: 0.5rem;
  color: var(--primary_color);
}

.left-col p {
  color: var(--text-color);
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1.5rem;
    min-height: 600px;
    height: 400px;
    overflow-y: scroll;
    padding: 0 20px;
}

.rowGrid{
    display: grid;
    gap: 1.5rem;
}

  .bento-card {
    background-color: var(--white);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  }

  .profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
  }

  .name {
    font-weight: 700;
    color: #007bff;
    margin-bottom: 0;
  }

  .title {
    font-weight: 600;
    color: var(--text-color);
  }

  /* Grid Span Variants */
  .span-1 { grid-column: span 1; }
  .span-2 { grid-column: span 2; }
  .span-3 { grid-column: span 3; }
  .span-4 { grid-column: span 4; }
  .span-5 { grid-column: span 5; }
  .span-6 { grid-column: span 6; }

  .row-span-1 { grid-row: span 1; }
  .row-span-2 { grid-row: span 2; }
  .row-span-3 { grid-row: span 3; }
  .row-span-4 { grid-row: span 4; }
  .row-span-5 { grid-row: span 5; }
  .row-span-6 { grid-row: span 6; }
  

/*----------------------------------------*/
/*  09 - FAQ's Page css
/*----------------------------------------*/
  
.faqbg{
    background-image: url(../img/bg4.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
}
.faq-section {
    max-width: 800px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.faq-section h2 {
    text-align: center;
    color: #007BFF;
}

.faq-main {
    border-bottom: 1px solid #ddd;
    padding: 15px 0;
    transition: all 0.3s ease;
}

.faq-head {
    cursor: pointer;
    font-weight: bold;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #f9f9f9;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.faq-head:hover {
    background: #e9ecef;
}

.faq-para {
    display: none;
    padding: 10px;
    color: #666;
    background: #f1f1f1;
    border-radius: 8px;
    margin-top: 5px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.faq-main.active .faq-para {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.faq-head span {
    transition: transform 0.3s ease;
}

.faq-main.active .faq-head span {
    transform: rotate(180deg);
}

.bg {
    background-color: var(--btn);
}

.cta-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    color: var(--white);
    font-family: 'Poppins', sans-serif;
}

.cta-text {
    font-size: 18px;
    margin: 0;
}

.cta-button {
    background-color: #64b5f6;
    color: white;
    padding: 12px 20px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 25px;
    transition: background 0.3s ease;
}

.cta-button:hover {
    background-color: #42a5f5;
}

@media (max-width: 768px) {
    .cta-section {
        flex-direction: column;
        text-align: center;
    }

    .cta-button {
        margin-top: 10px;
    }
}

/*----------------------------------------*/
/*  10 - 404 Page css
/*----------------------------------------*/

.errorbg{
    background-image: url(../img/bg5.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
}
#changingImage {
    transition: opacity 1s ease-in-out;
    opacity: 1;
}

.error-title {
    font-size: 28px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.error-text {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
}

.toothcare-site .btn-primary {
    padding: 12px 25px;
    font-size: 18px;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.3s, transform 0.3s;
}

.arrow {
    font-size: 20px;
    transition: transform 0.3s;
}

.toothcare-site .btn-primary:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
}

.toothcare-site .btn-primary:hover .arrow {
    transform: translateX(5px);
}

/*----------------------------------------*/
/*  11 - Blog Page css
/*----------------------------------------*/

.blog-card img {
    height: 100%;
    object-fit: cover;
}
.blogbg{
    background-image: url(../img/bg6.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
}

/*----------------------------------------*/
/*  12 - Blog Details Page css
/*----------------------------------------*/

  .blogdetailsbg{
    background-image: url(../img/bg7.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
  }
.blog-content img {
    width: 97%;
    border-radius: 8px;
}

.sidebarblog {
    padding: 20px;
    background: #edf3f8;
    border-radius: 8px;
    height: 65%;
}
.commentbox {
    padding: 40px;
    border: 4px solid var(--primary_color);
    border-left: 4px solid var(--secondary_color);
    border-right:4px solid var(--secondary_color);
    border-radius: 0 20px;
    width: 50%;
}

.sidelist {
    list-style: none;
    padding-left: 0;
    font-size: 20px;
}
.workingblog{
    background: var(--primary_color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    margin-top: 8%;
}

.workingblog h2 {
    color: var(--white);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--white);
}

.workingblog div {
    color: var(--white);
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}
.blog-content img {
    width: 97%;
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
}

.blog-content img:hover {
    transform: scale(1.05);
}

.sidebarblog, .workingblog, .commentbox {
    animation: fadeInUp 1s ease-in-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.sidelist li a {
    display: inline-block;
    color: var(--primary_color);
    transition: color 0.3s, transform 0.3s;
    text-decoration: none;
}

.sidelist li a:hover {
    color: var(--secondary_color);
    transform: translateX(5px);
}

.toothcare-site .btn-primary {
    transition: all 0.3s ease-in-out;
}

.toothcare-site .btn-primary:hover {
    background: var(--secondary_color);
    transform: scale(1.1);
}

.toothcare-site .form-control:focus {
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
    border-color: var(--primary_color);
}

.blog-content {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* comment box */

.comment-box {
    display: flex;
    align-items: flex-start;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  }

  .comment-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
  }

  .comment-content {
    flex: 1;
  }

  .comment-header {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 4px;
  }

  .comment-name {
    font-weight: 600;
    color: #0d6efd;
  }

  .comment-text {
    font-size: 15px;
    color: #333;
    margin-top: 5px;
  }

/*----------------------------------------*/
/*  13 - Contact Us Page css
/*----------------------------------------*/
.contactbg {
    background-image: url(../img/bg8.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 5% 0;
    color: var(--white);
}

.card-custom {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.card-emergency {
    background: linear-gradient(to bottom right, #0077b6, #004469);
    color: white;
}

.icon-circle {
    width: 40px;
    height: 40px;
    background-color: #e0e7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.emergency {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    font-size: 1.25rem;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 20px;
}

.toothcare-site .form-control:focus {
    box-shadow: none;
    border-color: #6c63ff;
}

.DemoFrpmTop {
    background: var(--primary_color);
    color: #fff;
    padding: .5rem;
    border-radius: 16px 16px 0 0;
}

.ContactBtn {
    background: var(--primary_color);
    color: var(--white);
    border-radius: 10px;
    padding: 10px 20px;
}

.ContactBtn:hover {
    background: var(--secondary_color);
    color: var(--white);
}

.ContactInfo {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

.ContactInfo p {
    margin-bottom: 0;
}

.OfficeHour {
    padding: 0;
}

.OfficeHour li {
    list-style: none;
}

.ContactSocial {
    display: flex;
    gap: 20px;
}
/*----------------------------------------*/
/*  13 - Page Loader css
/*----------------------------------------*/

  #loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transition: opacity 0.5s ease-out, visibility 0.5s;
    
    z-index: 999999;
}

.circle-loader {
    width: 80px;
    height: 80px;
    border: 5px solid #ddd;
    border-top: 5px solid var(--primary_color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tooth-icon {
    width: 40px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.toothbrush {
    width: 100px;
    margin-top: 15px;
    animation: brush 1.5s infinite;
}

@keyframes brush {
    0% { transform: translateX(-20px); }
    50% { transform: translateX(20px); }
    100% { transform: translateX(-20px); }
}

#content {
    display: none;
    text-align: center;
}

/*----------------------------------------*/
/*  14 - footer css
/*----------------------------------------*/
.footer {
    padding: 20px 0;
    color: var(--white);
    background-color: var(--secondary_color);
}

.footer a {
    color: var(--white);
}

.footer {
    background: var(--primary_color);
    color: var(--white);
    text-align: center;
}

.footer .container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.footer-row {
    display: flex;
    justify-content: space-between;
}

.footer-col {
    padding: 10px;
    text-align: left;
}

.footer-col img {
    margin-bottom: 10%;
}

.footer-col h4 {
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 2px solid var(--btn);
    display: inline-block;
    padding-bottom: 5px;
    color: var(--white);
}

.QuickLinks {
    list-style: none;
    padding: 0;
}
.QuickLinks li a{
   text-decoration: none;
}
.QuickLinks li a:hover{
   color: var(--btn);
}

/* Newsletter Styles */
.newsletter form {
    display: flex;
    flex-direction: column;
}

.newsletter input {
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
    width: 100%;
}

.newsletter button {
    background: #f7c844;
    color: var(--primary_color);
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
}

.newsletter button:hover {
    background: #e6b933;
}

/* Social Media Links */
.social-links {
    margin-top: 20px;
}

.social-links a {
    color: var(--white);
    margin: 0 10px;
    font-size: 20px;
    transition: 0.3s;
}

.social-links a:hover {
    color: #f7c844;
}

.footer-bottom {
    margin-top: 20px;
    border-top: 1px solid #ccc;
    padding-top: 10px;
}

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

    .footer-col {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* footer end */

/*----------------------------------------*/
/*  16 - Back To Top css
/*----------------------------------------*/

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    transition: transform 0.3s;
}

.back-to-top:hover {
    transform: scale(1.1);
}

.back-to-top img {
    width: 60px;
    height: 60px;
    animation: bounce 1.5s infinite;
}

@keyframes bounce {

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

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

/* back to top button end */

/*----------------------------------------*/
/*  17 - form loader css
/*----------------------------------------*/

.form-loader {
    display: none;

  }

  .Loader-Container{
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border-radius: 16px;
  }

  .dot-loader {
    display: flex;
    gap: 8px;
  }

  .dot-loader div {
    width: 12px;
    height: 12px;
    background-color: var(--primary_color);
    border-radius: 50%;
    animation: bounce 0.6s infinite alternate;
  }

  .dot-loader div:nth-child(2) {
    animation-delay: 0.2s;
  }

  .dot-loader div:nth-child(3) {
    animation-delay: 0.4s;
  }

  @keyframes bounce {
    from { transform: translateY(0); opacity: 0.6; }
    to { transform: translateY(-10px); opacity: 1; }
  }