* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: Poppins,sans-serif;
            scroll-behavior: smooth;
        }

        body {
            background: #f7fbfc;
            color: #222;
        }

        header {
            background: white;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            box-shadow: 0 2px 15px rgba(0,0,0,.08);
            z-index: 999;
        }

        .container {
            width: 90%;
            max-width: 1200px;
            margin: auto;
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;
        }

        .logo {
            font-size: 30px;
            font-weight: 700;
            color: #009688;
        }

            .logo span {
                color: #0b2545;
            }

        nav ul {
            display: flex;
            list-style: none;
            gap: 25px;
        }

            nav ul li a {
                text-decoration: none;
                color: #333;
                font-weight: 500;
            }

                nav ul li a:hover {
                    color: #009688;
                }

        .hero{

height:100vh;
display:flex;
align-items:center;
background-size:cover;
background-position:center;
color:white;
text-align:center;
animation:slider 18s infinite;

}
@keyframes slider{

0%{
background-image:
linear-gradient(rgba(0,120,120,.65),rgba(0,120,120,.65)),
url("Images/hero.jpg");
}

33%{
background-image:
linear-gradient(rgba(0,120,120,.65),rgba(0,120,120,.65)),
url("Images/camp.jpeg");
}

66%{
background-image:
linear-gradient(rgba(0,120,120,.65),rgba(0,120,120,.65)),
url("images/hero3.jpg");
}

100%{
background-image:
linear-gradient(rgba(0,120,120,.65),rgba(0,120,120,.65)),
url("images/hero1.jpg");
}

}

        .hero-content {
            width: 100%;
        }

        .hero h1 {
            font-size: 58px;
        }

        .hero p {
            font-size: 20px;
            margin: 20px 0;
        }

        .btn {
            display: inline-block;
            padding: 15px 35px;
            background: #ffc107;
            color: #000;
            text-decoration: none;
            border-radius: 40px;
            font-weight: bold;
            margin: 10px;
        }

            .btn:hover {
                background: white;
            }

        section {
            padding: 80px 0;
        }

        .section-title {
            text-align: center;
            font-size: 38px;
            margin-bottom: 50px;
            color: #0b2545;
        }

        .about {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

            .about img {
                width: 100%;
                border-radius: 15px;
            }

        .services {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
            gap: 25px;
        }

        .service {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 10px 25px rgba(0,0,0,.08);
            transition: .4s;
        }

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

            .service h3 {
                margin-bottom: 10px;
                color: #009688;
            }

        .doctor {
            display: grid;
            grid-template-columns: 300px 1fr;
            gap: 40px;
            align-items: center;
        }

            .doctor img {
                width: 100%;
                border-radius: 15px;
            }

        footer {
            background: #0b2545;
            color: white;
            padding: 40px 0;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
            gap: 30px;
        }

        footer a {
            color: white;
            text-decoration: none;
        }

        .float {
            position: fixed;
            right: 20px;
            bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

            .float a {
                width: 60px;
                height: 60px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                color: white;
                font-size: 25px;
                text-decoration: none;
            }

        .whatsapp {
            background: #25D366;
        }

        .call {
            background: #0077cc;
        }

        @media(max-width:768px) {

            .hero h1 {
                font-size: 38px;
            }

            .about, .doctor {
                grid-template-columns: 1fr;
            }

            nav {
                flex-direction: column;
            }

                nav ul {
                    margin-top: 15px;
                    flex-wrap: wrap;
                    justify-content: center;
                }
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
            gap: 25px;
        }

            .gallery img {
                width: 100%;
                height: 260px;
                object-fit: cover;
                border-radius: 15px;
                transition: .4s;
                cursor: pointer;
            }

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

        .appointment-box {
            max-width: 700px;
            margin: auto;
            background: white;
            padding: 40px;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,.1);
        }

            .appointment-box form {
                display: grid;
                gap: 20px;
            }

            .appointment-box input,
            .appointment-box textarea,
            .appointment-box select {
                padding: 15px;
                font-size: 16px;
                border: 1px solid #ddd;
                border-radius: 10px;
            }

        .contact-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        @media(max-width:768px) {

            .contact-grid {
                grid-template-columns: 1fr;
            }
        }

        .stats {
            background: #009688;
            padding: 70px 0;
            color: white;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
            gap: 30px;
            text-align: center;
        }

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

        .stat p {
            font-size: 18px;
        }

        .testimonials {
            background: #f7fbfc;
        }

        .testimonial-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
            gap: 30px;
        }

        .testimonial {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 8px 25px rgba(0,0,0,.08);
            text-align: center;
        }

            .testimonial p {
                margin: 20px 0;
            }

        .why {
            background: white;
        }

        .why-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
            gap: 30px;
        }

        .why-box {
            padding: 35px;
            text-align: center;
            border-radius: 15px;
            box-shadow: 0 8px 20px rgba(0,0,0,.08);
            transition: .4s;
        }

            .why-box:hover {
                transform: translateY(-8px);
            }

            .why-box h3 {
                margin: 15px 0;
            }
  .appointment{

padding:80px 0;
background:#f5f9fa;

}

#appointmentForm{

max-width:700px;
margin:auto;
display:flex;
flex-direction:column;
gap:20px;

}

#appointmentForm input,
#appointmentForm select,
#appointmentForm textarea{

padding:15px;
font-size:16px;
border:1px solid #ccc;
border-radius:8px;

}

#appointmentForm button{

background:#009688;
color:#fff;
padding:15px;
font-size:18px;
border:none;
border-radius:8px;
cursor:pointer;

}

#appointmentForm button:hover{

background:#00796b;

}