:root {



    --paragraphs: #475874;



    --secondary: #213666;



    --dark-black: #000000;



    --black: #333;



    --blue: #27b1d9;



    --green: #15be7d;



    --background: #eaf9fa;



    --white: #fff;



    --shadow: rgba(10, 32, 70, .3);



    --light-gradient-1: #eaf9fa;



    --light-gradient-2: #a3ebf0;



    --dark-border: #11365f;



    --light-border: #d9f3f5;



    --white-paragraphs: #9da5b5;



    --border: #caebed;



    --dark-gradient-1: #132f5f;



    --dark-gradient-2: #2d4d86;



}







.dm-serif-display-regular {



    font-family: "DM Serif Display", serif;



    font-weight: 400;



    font-style: normal;



}







.dm-serif-display-regular-italic {



    font-family: "DM Serif Display", serif;



    font-weight: 400;



    font-style: italic;



}







.dm-serif-display-bold {



    font-family: "DM Serif Display", serif;



    font-weight: 700;



    font-style: normal;



}











.nunito-regular {



    font-family: "Nunito", sans-serif;



    font-optical-sizing: auto;



    font-weight: 400;



    font-style: normal;



}







body {



    /* background: #111; */



    font-family: "Nunito", sans-serif;



    font-optical-sizing: auto;



    font-style: normal;



    color: var(--paragraphs);



    font-size: 16px;



    font-weight: 400;



    line-height: 1.8em;



}







h2 {



    color: var(--secondary);



    margin-top: 0;



    margin-bottom: 8px;



    font-family: DM Serif Display, sans-serif;



    font-size: 2rem;



    font-weight: 400;



    line-height: 1.15em;



    text-transform: capitalize;



}







h3 {



    color: var(--secondary);



    margin-top: 0;



    margin-bottom: 8px;



    /* font-family: DM Serif Display, sans-serif; */



    font-size: 1.8rem;



    font-weight: 700;



    line-height: 1.15em;



    text-transform: inherit;



}







h4 {



    color: var(--secondary);



    margin-top: 0;



    margin-bottom: 8px;



    /* font-family: DM Serif Display, sans-serif; */



    font-size: 1.6rem;



    font-weight: 700;



    line-height: 1.15em;



    text-transform: inherit;



}







.navbar {



    min-height: 64px;



}







.navbar-brand img {



    max-height: 60px;



    width: 100%;



    max-width: 100px;



}







.navbar-nav .nav-item .nav-link {



    color: var(--black);



    transition: cubic-bezier(0.075, 0.82, 0.165, 1);



}







.navbar-nav .nav-item .nav-link:hover {



    color: var(--green);



    font-weight: 600;



}


.dropdown-item.active, .dropdown-item:active {
    background-color: var(--green);
}





.navbar-nav .nav-item:last-child .nav-link {



    background-color: #0a2046;



    color: #fff;



    border-radius: 25px;



    padding: 6px 18px;



}





.privacy-policy {

    margin-top: 64px;

}



.privacy-policy a {

    color: var(--green);

    text-decoration: none;

}



.owl-carousel .owl-stage-outer {

    /* overflow: inherit; */
    padding-bottom: 2rem;

}



.banner-container {



    margin-top: 64px;



    background-color: var(--background);



    background-image: linear-gradient(145deg, var(--light-gradient-1), var(--light-gradient-2));



    flex-direction: column;



    justify-content: center;



    align-items: center;



    padding: 110px 10px 30px;



    display: flex;



    position: relative;



    overflow: hidden;



    /* width: 100%; */



    /* height: 100vh; */



}







.my-7 {



    margin: 30px 0px;



}







.banner-container .content-block {



    position: relative;



    z-index: 1;



    text-align: left;



    color: var(--secondary);



    margin: 25px 0 50px 0;



}







.banner-container .content-block h1 {



    font-size: 36px;



    margin-bottom: 20px;



    font-family: "DM Serif Display", serif;



    font-weight: 400;



    font-style: normal;



    line-height: 1.05em;



}







.banner-container .content-block .title-italic {



    color: var(--blue);



    font-style: italic;



}







.banner-container .content-block p {



    max-width: 560px;



    margin-bottom: 30px;



    font-size: 18px;



    line-height: 1.6em;



    color: var(--paragraphs);



}







.banner-container .content-block a {



    background-color: var(--green);



    color: var(--white);



    text-align: center;



    border-radius: 100px;



    padding: 19px 44px;



    font-size: 17px;



    font-weight: 600;



    line-height: 1.2em;



    text-decoration: none;



    display: inline-block;



    border: 0;



    transition: background-color .3s cubic-bezier(.215, .61, .355, 1);



}







.banner-container .content-block a:hover {



    background-color: var(--blue);



}







.banner-container .dental-img-container {



    /* position: relative; */



    z-index: 1;



    margin: 0 auto;



    display: flex;



    justify-content: center;



    align-items: center;



}







.banner-container .dental-img {



    will-change: transform;



    transform-style: preserve-3d;



    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);



}







.banner-container .dental-img-1 {



    position: absolute;



    width: 120px;



    height: 140px;



    top: -123px;



    left: 0;



}







.banner-container .dental-img-2 {



    position: absolute;



    width: 100px;



    height: 130px;



    top: -109px;



    left: 136px;



}







.banner-container .dental-img-3 {



    position: absolute;



    width: 120px;



    height: 126px;



    top: -100px;



    right: -40px;



}







.banner-container .dental-img-4 {



    width: 140px;



    height: 170px;



    position: absolute;



    top: 58px;



    right: -89px;



    display: none;



}







.banner-container .dental-img-5 {



    position: absolute;



    width: 140px;



    height: 160px;



    bottom: -41px;



    right: -31px;



}







.banner-container .dental-img-6 {



    width: 120px;



    height: 140px;



    position: absolute;



    bottom: -100px;



    left: 84px;



}







.banner-container .dental-img-7 {



    position: absolute;



    width: 120px;



    height: 180px;



    bottom: -147px;



    left: -48px;



}











.banner-container .image-style {



    width: 100%;



    height: 100%;



    border: 2px solid var(--white);



    background-color: var(--white);



    box-shadow: 0 20px 70px -10px var(--shadow);



    object-fit: cover;



    border-radius: 5px;



}







/* about  */



.about-section {



    background-color: #f9fafc;



}











/* .about-section .about-types {} */







.about-section .about-types .icon-container i {



    font-size: 1.75rem;



}







.about-section .about-types .icon-container img {



    width: 28px;



}







.about-section .about-types .content-container {



    margin-left: 20px;



}







.about-section .about-types .content-container h4 {



    color: var(--secondary);



    font-size: 1rem;



    font-weight: 700;



    margin-bottom: 10px;



}







.about-section .about-types .content-container p {



    color: var(--paragraphs);



    font-size: 0.9rem;



    line-height: 1.6em;



    margin-bottom: 0;



}







.about-section .about-types .content-container h4 {



    color: var(--secondary);



    font-size: 1rem;



    font-weight: 700;



    margin-bottom: 10px;



}







.about-img-container {



    background-color: var(--white);



    border-radius: 12px;



    box-shadow: 0 20px 70px -10px var(--shadow);



}







.about-img-container img {



    width: 100%;



    height: auto;

    max-height: 300px;

    padding: 0.75rem;



    object-fit: cover;



    border-radius: 25px;



}







.about-experience {



    text-align: center;



    background-color: var(--secondary);



    border-radius: 12px;



    padding: 8px 32px;



    color: var(--white);



    max-width: 100%;



}







.happy-exp {



    text-align: center;



    background-color: var(--light-gradient-2);



    border-radius: 12px;



    padding: 8px 32px;



    color: var(--secondary);



    max-width: 100%;



}







.about-experience .count,



.happy-exp .count {



    font-size: 1.5rem;



    font-weight: 700;



}







/* about  */



/* dental-services */



.dental-services .card {



    border: 0;



    border-radius: 12px;



    box-shadow: 0 20px 30px -10px var(--shadow);



    transition: transform .3s cubic-bezier(.215, .61, .355, 1);



}







.dental-services .card:hover {



    transform: translateY(-10px);



}







.dental-services .card .icon img {



    width: 60px;



    height: 60px;



    color: var(--secondary);



    margin-bottom: 15px;



    padding: 8px 12px;



    border-radius: 12px;



    background-color: #f0f6ff;



}







.dental-services .card .icon.first-icon img {



    background-color: #f0f6ff;



}







.dental-services .card .icon.second-icon img {



    background-color: #fae4e4
}







.dental-services .card .icon.third-icon img {



    background-color: #e7d9f1;



}







.dental-services .card .icon.fourth-icon img {



    background-color: #f2efcf;



}







.dental-services .card h4 {



    color: var(--secondary);



    font-size: 1.2rem;



    font-weight: 700;



    margin-bottom: 10px;



}







.dental-services .card a {



    color: var(--white);



    font-size: 1rem;



    font-weight: 600;



    text-decoration: none;



    background-color: var(--secondary);



    border-radius: 25px;



    display: block;



    text-align: center;



    padding: 6px 20px;



}







/* dental-services */







/* contact-section */







.contact-section {



    background-color: var(--light-gradient-1);



}







.contact-section .contact-form-card {



    border: 0;



    border-radius: 12px;



    box-shadow: 0 20px 30px -10px var(--shadow);



    transition: transform .3s cubic-bezier(.215, .61, .355, 1);



}







.contact-section .contact-form-card:hover {



    transform: translateY(-10px);



}







.contact-section .contact-form-card .card-body {



    padding: 30px;



}







.contact-section .tick-list {



    padding-left: 1rem;



}







.contact-section .tick-list li {



    padding-left: 30px;



    margin-bottom: 20px;



    font-weight: 600;



}







.contact-section .tick-list li::before {



    content: "\f00c";



    font-family: "Font Awesome 5 Free";



    font-weight: 900;



    color: var(--white);



    position: absolute;



    left: -20px;



    top: 50%;



    transform: translateY(-50%);



    font-size: 1rem;



    background-color: var(--secondary);



    padding: 4px;



    border-radius: 50%;



    width: 2rem;



    height: 2rem;



    display: flex;



    justify-content: center;



    align-items: center;



}







.contact-section .input-container i {



    position: absolute;



    left: 16px;



    top: 50%;



    transform: translateY(-50%);



    color: #9da2af;



    font-size: 18px;



}







.contact-section .input-container i.fa-comment {



    top: 28px;



}







.contact-section .input-container .form-control {



    padding-left: 40px;



    line-height: 2.5;



}







.contact-section .form-control,

.contact-section .form-select {



    line-height: 2.5;



}







.contact-section .btn-send {



    background-color: var(--secondary);



    color: var(--white);



    font-size: 1.2rem;



    font-weight: 600;



    padding: 10px 20px;



    border-radius: 25px;



    border: none;



    transition: background-color .3s cubic-bezier(.215, .61, .355, 1);



}







.contact-section .btn-send:hover {



    background-color: var(--green);



}







/* contact-section */



/* insurance-section */



.insurance-section .row {



    background-color: var(--green);



    border-radius: 12px;







}







.insurance-section .row h2,



.insurance-section .row p {



    color: var(--white);



}







/* insurance-section */



/* testimonial-card */



.testimonial-card img {



    /* max-height: 80px;



    width: 80px; */



    object-fit: cover;



    margin-bottom: 16px;



    border-radius: 12px;



}





.testimonial-card .img p {

    /* transform: translateY(100%); */

    bottom: 0;

    opacity: 0;

    font-size: 0.9rem;

    transition: all 0.3s ease;

}





.testimonial-card .img:hover p {

    font-size: 0.9rem;



    color: var(--white);



    background-color: rgba(10, 32, 70, .4);



    padding: 4px 8px;

    opacity: 1;

    bottom: 0;

}







.testimonial-card h4 {



    font-size: 1.5rem !important;



}



.testimonial-card .profession {



    color: #888d97;



    font-size: 1.2rem;



    font-weight: 600;



}







.testimonial-card .stars i {



    color: #FFD700;



}







/* testimonial-card */



/* footer */



footer {



    background-color: var(--secondary);



    color: var(--white);



    padding: 40px 0;



}







footer img {



    max-width: 100%;



    height: 100px !important;



    background-color: var(--white);



}







footer .social-icons {



    display: flex;



    align-items: center;



    text-align: center;



    gap: 20px;



}







footer .social-icons a {



    color: var(--white);



    font-size: 1rem;



    background: var(--dark-gradient-1);



    width: 35px;



    height: 35px;



    display: flex;



    justify-content: center;



    align-items: center;



    overflow: hidden;



    text-decoration: none;



    border-radius: 50%;



    transition: color .3s ease;



}







footer h5 {



    font-weight: 700;



}







footer ul {



    list-style: none;



    padding: 0;



    margin: 0;



}







footer ul li {



    margin-bottom: 10px;



}







footer ul li a,



a:not([href]):not([class]) {



    color: var(--white-paragraphs);



    text-decoration: none;



    font-size: 1rem;



    transition: color .3s ease;



    display: flex;



}







footer ul li a:hover {



    color: var(--white);



}







footer ul li a i {



    color: var(--green);



    font-size: 1rem;



    margin-right: 8px;



}







.owner-info {



    color: var(--white-paragraphs);



    font-size: 0.9rem;



}







/* footer */



.call-to-action a {

    position: fixed;

    right: 20px;
    
    bottom: 15px;

    z-index: 1;

    padding: 16px;

    border-radius: 50%;

    background-color: var(--green);

    color: var(--white);

    width: 64px;

    height: 64px;

}



.call-to-action a i {

    font-size: 2rem;

}



/* media queries starts from here */



@media (min-width: 992px) {



    .navbar-expand-lg .navbar-nav {



        gap: 24px;



    }







    .navbar-expand-lg .navbar-nav .nav-item:last-child .nav-link {



        background-color: var(--secondary);



        color: #fff;



        border-radius: 25px;



        padding: 6px 18px;



    }







    h2 {



        font-size: 2.5rem;



    }







    h3 {



        font-size: 2rem;



    }







    .w-lg-50 {



        width: 50%;



    }











    .pr-lg-5 {



        padding-right: 5rem;



    }







    .banner-container .content-block h1 {



        font-size: 60px;



    }







    .banner-container {



        padding: 140px 26px 60px;



    }







    .my-7 {



        margin: 60px 0px;



    }







    .banner-container .dental-img-container {



        position: relative;



    }







    .banner-container .dental-img-1 {



        width: 220px;

        height: 260px;

        position: absolute;

        top: -181px;

        left: 40px;



    }







    .banner-container .dental-img-2 {



        width: 207px;

        height: 245px;

        position: absolute;

        top: -179px;

        left: 456px;



    }







    .banner-container .dental-img-3 {



        width: 280px;



        height: 330px;



        position: absolute;



        top: -4px;



        left: 144px;



    }







    .banner-container .dental-img-4 {



        width: 240px;



        height: 270px;



        position: absolute;



        top: 58px;



        left: 619px;



        display: block;



    }







    .banner-container .dental-img-5 {



        width: 320px;



        height: 380px;



        position: absolute;



        bottom: -205px;



        left: -92px;



    }







    .banner-container .dental-img-6 {



        width: 320px;



        height: 380px;



        position: absolute;



        bottom: -250px;



        left: 350px;



    }







    .banner-container .dental-img-7 {



        width: 200px;



        height: 250px;



        position: absolute;



        bottom: -150px;



        left: 796px;



    }







    .dental-services .card p {



        min-height: 200px;



    }



}







@media (min-width: 1200px) {



    .container {



        max-width: 1416px;



    }



}