@import url('https://fonts.googlepis.com/css@? family=Inter:wght@100..900&displayu=swap');

:root{
   --maincolor:#a4c82e;
   --secondcolor:#03aff8;
   --thirdcolor:#12ac8e;
   --textcolor:#1E1E1E;
}

*{
padding:0;
margin:0;
box-sizing:border-box;
outline: none;
border:none;
text-decoration:none;
transition:all .2s linear;
font-family:"Inter",sans-serif;
}

img{
width:100%;
display:flex;
}

html{
font-size:62.5%;
overflow-x:hidden;
scroll-behavior:smooth;
scroll-padding-top:6rem;
}

header{
position:fixed;
top:0;
left:0;
right:0;
display:flex;
justify-content:space-between;
align-items:center;
padding: 1.5rem 7%;
width:100%;
box-shadow:0 .5rem 1rem rgba(0,0,0,.1);
z-index:1000;
background-color:white !important;
}

.logo{
width: 150px;
}

.logo img{
width: 100%;
}

.navbar a{
color:#000000;
font-size:1.7rem;
margin:1rem;
position: relative;
transition: 0.5s;
}

.navbar a:hover{
color: var(--maincolor);
}

.navbar a::after{
content:"";
background-color:var(--maincolor);
width:0;
position: absolute;
height:0.2rem;
left:0;
margin-top:0.5rem;
top: 100%;
transition:0.5s;
}

.navbar a:hover::after{
width:100%;
}

#menu-bars{
color:var(--textcolor);
font-size: 2.5rem;
cursor:pointer;
margin-right:1rem;
display:none;
}

#menu-bars:hover{
color:var(--maincolor);
}

.right-icons .btn{
padding: 1.2rem 2rem;
font-size: 1.7rem;
background:var(--maincolor);
color:white;
text-decoration:none;
cursor:pointer;
}

.right-icons .btn:hover{
background-color:var(--secondcolor);
}

/* header section ended */
/* home section starts*/


.main-home{
padding: 2rem 7%;
background-image:url(images/home pic for family care.jpeg);
width: 100%;
min-height:100vh;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.home{
display:flex;
justify-content:space-between;
align-items:center;
margin-top:6rem;
flex-wrap:wrap;
gap:1rem;
}

.home .home-left-content{
flex: 1 1 40rem;
}

.home-left-content span{
font-size:2rem;
color:var(--secondcolor);
padding: 1rem 0;
font-weight: bolder;
}

.home-left-content h2{
font-size:48px;
margin: 1rem 0;
}

 .home-left-content p{
font-size: 1.3rem;
color:var(--textcolor);
line-height:2rem;
}

.home-btn{
display:flex;
align-items:center;
gap:2rem;
margin-top:2rem;
}

.home-btn a{
dispaly:inline-block;
padding:1.5rem 3rem;
background-color:var(--maincolor);
font-size:1.7rem;
color:white;
transition: 0.5sec ease;
}

.home-btn a:hover{
padding: 1.5rem 2.5rem;
}

.homebtnsec{
 background:transparent !important;
 color: var(--textcolor) !important;
 border: 1px solid var(--maincolor);
}

.homebtnsec:hover{
  background-color:var(--secondcolor) !important;
  color:white !important;
}

.home .home-right-content{
flex:1 1 50rem;
}

.home .home-right-content img{
 width:100%;
 margin-top:4rem;
}

.technology{
padding:3rem 7%;
}

.main-technology{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:3rem;
margin-top:-100px;
}

.inner-technology{
flex:1 1 300px;
padding:3rem 3rem;
box-shadow:rgba(0,0,0,0.24) 0px 3px 8px;
bachground-image:url(images/home pic for family care.jpeg);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
cursor:pointer;
background-color:white;
position:relative;
z-index:1;
border:1px solid var(--secondcolor);
}

.inner-technology span{
width:0;
height:100%;
backgroung-color:var(--maincolor);
position:absolute;
top:0;
left:0;
z-index:-1;
transition:0.5s;
}

.inner-technolgy:hover span{
width:100%;
}

.inner-technology:hover i{
color; #63DE61;
}
.inner-technology:hover h2{
color:#4992E8;
}
.inner-technology:hover p{
color:#4992E8;
}
.inner-technology i{
font-size:48px;
color:var(--maincolor);
}
.inner-technology h2{
font-size:2.5rem;
padding:1rem 0;
}
.inner-technolgy p{
font-size:1.5rem;
line-height:2.5rem;
padding:1rem 0;
}


/* home section end */
/* About Us Section*/


.main-about{
padding:2rem 7%;
width:100%;
background-image:url(images/dental chair for family care edited copy.jpg);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}

.main-about .about-heading{
text-align:center;
font-size:40px;
color:var(--maincolor);
border-bottom:2px solid var(--secondcolor);
width:200px;
margin:0 auto;
padding:2rem 0;
}

.inner-main-about{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:2rem;
}

.about-inner-content-left{
flex:1 1 45rem;
}

.about-inner-content-left img{
width:90%;
padding:2rem;
}

.about-inner-content{
flex: 1 1 45rem;
}

.about-inner-content img{
width:100%;
margin-top:4rem;
}

.about-right-content h2{
font-size:30px;
padding:1.5rem 0;
color:black;
line-height:4rem;
}


.about-right-content p{
font-size:1.5rem;
padding:1.5rem;
color:var(--textcolor);
font-family:"Inter",sans-serif;
text-align:left;
line-height:2.5rem;
}

.aboutsec-content{
line-height:2.5rem !important;
}

aboutbtn{
padding:1.5rem 3rem;
background-color:transparent;
border:1p solid var(--maincolor);
margin-top:0.5rem;
cursor:pointer;
font-size:1.5rem;
transition:0.5s all;
}

.aboutbtn:hover{
background-color:var(--secondcolor);
color:#63E6BE;
border:none;
padding:1.5rem 3.5rem;
}


.our-service{
width:100%;
padding:3rem 7%;
}

.service-heading h2{
font-size:40px;
color:#4992E8;
text-align:center;
padding:1rem 0;
margin-bottom:3rem;
}

.main-services{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:4rem;
text-align:center;
padding:3rem 2rem;
flex:1 1 300px;
}

.inner-services{
flex:1 1 300px;
padding :3rem 2rem;
box-shadow:rgba(99,99,99,0.2) 0px 2px 8px 0px;
border:2px solid var(--textcolor);
}

.inner-services:hover{
transform:translate(-10px);
border-bottom:2px solid var(--maincolor);
backgraound-color:#4992E8;
}

.inner-services:hover .servive-icon{
width:100px;
height:100px;
border-radius:0;
background-color:var(--maincolor);
}

.inner-services:hover  .service-icon i{
color:white;
transform:scale(1.1);
}

.service-icon{
width:100px;
height:100px;
line-height:100px;
margin: 0 auto;
border-radius:40%;
background-color:#FFFFFF;
}

.service-icon i{
font-size:3rem;
color:#63DE61;
padding:2rem;
}

.inner-services h3{
font-size:2rem;
padding:2rem;
}

.inner-services p{
font-size:1.5rem;
padding:1.5rem 0;
line-height: 2.5rem;
}

/* services ends */

/* contact form begins*/



.container {
    width: 100%;
    max-width: 600px;
    margin: 50px auto;
    background-color: white;
    padding: 20px;
    border:#4992E8;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    margin-bottom: 20px;
}

label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #63DE61;
    border-radius: 4px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #25d366;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    
}

button:hover {
    background-color: #1ebe5b;
}

#emailLink, #googleCalendarLink {
    display: block;
    text-align: center;
    margin-top: 20px;
    text-decoration: none;
    color: #0073e6;
    font-weight: bold;
}

#emailLink:hover, #googleCalendarLink:hover {
    color: #005bb5;
}

/* Footer Styles */

.footer {
    background-color: #1E1E1E;
    color: #ecf0f1;
    padding: 40px 20px 20px 20px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer-left, .footer-right {
    flex: 1 1 300px;
    margin: 10px;
}

.footer-left h3 {
    margin-bottom: 20px;
    font-size: 24px;
    color: #63DE61;
}

.footer-left p {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.6;
}

.footer-left a {
    color: #4992E8;
    text-decoration: none;
}

.footer-left a:hover {
    color: #63E6BE;
}

.social-icons {
    margin-top: 15px;
    color:#63DE61;
}

.social-icons a {
    display: inline-block;
    margin-right: 15px;
    font-size: 20px;
    color: #ecf0f1;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #63E6BE;
}

.footer-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
   
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    margin-top: 30px;
    border-top: 1px solid #4992E8;
    padding-top: 20px;
    font-size: 14px;
}

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

    .footer-right {
        margin-top: 20px;
    }
}

.nav-links {
    list-style-type: none;
    display: flex;
    gap: 20px;
}

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

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    transition: background-color 0.3s ease;
}

.nav-links li a:hover {
    background-color: #f4ffff;
    border-radius: 4px;
}

/* Hamburger Menu (hidden by default on larger screens) */
.hamburger {
    display: none;
    cursor: pointer;
}

.hamburger i {
    font-size: 24px;
    color: black;
}

/* Media Queries for Small Screens */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #f4ffff;
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 10px 0;
    }

    .hamburger {
        display: block;
    }
}

/* Section Styles */
section {
    padding: 100px 20px;
    text-align: center;
    min-height: 100vh;
}

#section1 {
    background-color: #ffffff;
}

#section2 {
    background-color: #f4ffff;
}

#section3 {
    background-color: #fffff;
}

#section4 {
    background-color: #f4ffff;
}

#section5{
    background-color:#ffffff;
}

#section6{
bacground-color:#f4ffff;
}


h2 {
    text-align: center;
    margin-bottom: 20px;
}

/* Braces and Implants Section */
.braces-implants {
    padding: 50px 20px;
    background-color: #f4ffff;
    text-align: center;
    
}

/* Slideshow Container */
.slideshow-container {
    position: relative;
    max-width: 350px;
    margin: 0 auto;
   
}

.slide {
    display: none;
}

img {
    width: 100%;
    display:flex;
      
}

/* Dot controls for circular slideshow */
.circle-controls {
    text-align: center;
    margin-top: 15px;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active-dot {
    background-color: #333;
}

/* Reviews Section */
.reviews {
    padding: 50px 20px;
    background-color: #e2e2e2;
    text-align: center;
}

.review {
    margin-bottom: 20px;
}

.review i {
    color: #00aaff;
}

.review p {
    font-size: 18px;
    line-height: 1.5;
    display: inline;
}

.client-name {
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    font-style: italic;
    display: block;
}

/* --- Media Queries for Small Screens --- */
@media screen and (max-width: 768px) {
    /* Adjust section padding for smaller screens */
    .braces-implants, .reviews {
        padding: 30px 10px;
    }

    /* Reduce image size in the slideshow */
    .slideshow-container {
        max-width: 300px; /* Smaller container for small screens */
    }

    img {
        width: 100%; /* Adjust the image size for smaller screens */
        display:flex;
    }

    /* Reduce dot size in the slideshow controls */
    .dot {
        height: 10px;
        width: 10px;
        margin: 0 3px;
    }

    /* Reduce font sizes for reviews */
    .review p {
        font-size: 16px; /* Smaller font for reviews */
    }

    .client-name {
        font-size: 14px; /* Smaller font for client names */
    }
}

@media screen and (max-width: 480px) {
    /* Further reduce padding and font size for extra small screens */
    .braces-implants, .reviews {
        padding: 20px 10px;
    }

    .review p {
        font-size: 14px; /* Smaller font for reviews */
    }

    .client-name {
        font-size: 12px; /* Even smaller font for client names */
    }

    .slideshow-container {
        max-width: 150px; /* Further smaller container for very small screens */
    }

    img {
        width: 100%;
    }

    .dot {
        height: 8px;
        width: 8px;
        margin: 0 2px;
    }
}