/* Reset some default browser styles */

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: none;
    line-height: 1.6;
    background-color: none;
    padding: 0; 
   
    
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background: #fff; /* Ensure containers have a white background */
    padding: 20px;
    border-radius: 8px;
}

/* Header styles */
header {
    background: #003; /* Set header background color */
    padding: 20px 0;
    overflow-x: hidden;
}


/* Centered header content */
.header-content {
    text-align: center;
}

.header-title {
    margin-bottom: 10px;
    
}

.header-title .center {
    font-family: "Pacifico", cursive;
    font-size: 100%;
    color: white;
    margin: 0;
    margin-right: 100px;
    
}

.header-title .centered {
    font-family: "Pacifico", cursive;
    font-size: 100%;
    color: red;
    margin: -30px;
    margin-left: 160px;
}

/* Navigation styles */
.main-nav {
    text-align: center;
    margin-top: 10px;
}

.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-nav ul li {
    display: flex; 
    margin: 10px 0; /* Space between menu items */
}

.main-nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
}

.main-nav ul li a:hover {
    text-decoration: none;
}

/* Media Queries for Responsive Design */
@media (max-width: 768px) {
    .header-title .center, .header-title .centered {
        font-size: 2em;
    }
}

@media (max-width: 480px) {
    .header-title .center, .header-title .centered {
        font-size: 1.0em;
    }

    .main-nav ul li {
        display: block;
        margin: 5px 0;
    }
}

/* Navigation styles */
nav ul {
    margin: 0; /* Remove margins */
    padding: 0; /* Remove padding */
    list-style: none; /* Remove default list styling */
    text-align: left; /* Align text to the left */
}

nav ul li {
    display: flex;
    margin: 20px 20px; /* Space between menu items */
}

nav ul li a {
    color: white; /* Set link color */
    text-decoration: none; /* Remove underline from links */
    font-size: 1.1em; /* Adjust font size */
}

nav ul li a:hover {
    text-decoration: none; /* Underline on hover */
}

/* Hero section styles */
.hero {
    background: url('dental.jpg') no-repeat center center/cover;
    color: #fff; /* Ensure text color contrasts with background image */
    padding: 80px 0;
    text-align: center;
    margin: 0;
    width: 100%;
    height: 500%; /* Ensures the hero section takes the full viewport height */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the background image */
}

.hero .container {
    background: none; /* Remove background to make sure no white box is visible */
    padding: 0; /* Remove padding to make sure container fits well */
}

.hero h2, .hero p, .cta-button {
    margin: 0;
    padding: 10px; /* Optional: Add padding for readability */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Add text shadow for better readability on complex backgrounds */
}

/* Remove the container background from header */
header .container {
    background: none;
    padding: 0;
}

/* Navigation styles */
nav ul {
    margin: 25px 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.1em;
}

nav ul li a:hover {
    text-decoration: none;
}



.cta-button {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    background: green;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
}

.cta-button:hover {
    background: #070;
}

/* Ensure the hero section text is visible and clear */
.hero h2 {
    font-size: 3em;
}

.hero p {
    font-size: 1.2em;
}

/* Services, About, Contact, Gallery section styles */
.services, .about, .contact, .gallery {
    padding: 40px 0;
}

.services .service {
    margin-bottom: 20px;
    padding: 20px; /* Add padding inside the service box */
    border-radius: 8px; /* Rounded corners for the shadow box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect: horizontal offset, vertical offset, blur radius, color */
    background: #fff; /* Ensure background is white for contrast */
}

.service h3 {
    margin-bottom: 10px;
    font-size: 1.5em;
}

/* Footer styles */
footer {
    background: black; /* Set the footer background to black */
    color: white; /* Ensure the text color is white for contrast */
    text-align: center;
    padding: 10px 0;
    margin: 0; /* Remove margin to align with the rest of the page */
    box-shadow: none; /* Remove any shadow if present */
}

/* Ensure no background or padding issues for paragraph and links */
footer p {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

.footer-links {
    margin: 10px 0; /* Add margin as needed */
    padding: 0; /* Remove default padding */
}

.footer-button {
    display: inline-block;
    color: white; /* Set button text color to white */
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    background: black; /* Match the button background with the footer background */
    margin: 5px;
}

.footer-button:hover {
    background: black; /* Change hover color to provide visual feedback */
}

/* Ensure no padding or margin issues for the container inside the footer */
footer .container {
    background: none; /* Ensure no background color is applied */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}


/* WhatsApp chat container */
#whatsapp-chat {
    position: fixed;
    top: 585px;
    left: 280px;
    z-index: 1000;
    animation: shake 0.5s ease-in-out infinite;
}

#whatsapp-chat a {
    display: block;
    width: 60px;
    height: 60px;
}

#whatsapp-chat img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Gallery styles */
.gallery {
    position: relative;
    overflow: hidden;
    
}

.gallery-container {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.gallery-item {
    min-width:100%;
    box-sizing: border-box;
}

.gallery-item img {
    width: 100%;
    display: block;
}

.gallery-indicators {
    text-align: center;
    padding: 10px 0;
}

.gallery-indicator {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: #333;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}

.gallery-indicator.active {
    background: #fff;
}

.view-more-button {
    display: block;
    text-align: center;
    margin: 20px auto;
    padding: 10px 20px;
    color: #fff;
    background: #007bff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1em;
}

.view-more-button:hover {
    background: #0056b3;
}

/* Additional CSS for contact section phone link */
/* Contact section styles */
.contact {
    padding: 40px 20px;
    background: #fff; /* Ensure background is white for contrast */
    border-radius: 8px; /* Rounded corners for the shadow box */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow effect: horizontal offset, vertical offset, blur radius, color */
    margin: 20px auto; /* Add margin to center the box and separate it from other sections */
    max-width: 600px; /* Optional: constrain the width for better readability */
}

.contact p {
    margin-bottom: 20px;
}

.contact a {
    color: green;
    text-decoration: none;
    font-weight: bold;
}

.contact a:hover {
    text-decoration: underline;
}


/* Keyframes for shaking animation */
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    50% { transform: translateX(0); }
    75% { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

/* Media Queries for Computer Screens (wider than 1024px) */
@media (min-width: 1024px) {
    /* Increase font size for header on larger screens */
    .header-title .center, 
    .header-title .centered {
        font-size: 4em; /* Adjust as needed */
    }

    /* Increase the height of the hero section background image */
    .hero {
        height: 80vh; /* Adjust as needed for desired height */
    }

    /* Ensure the background image covers the entire area */
    .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('dental.jpg') no-repeat center center/cover;
        z-index: -1; /* Make sure the image is behind the text */
    }
}
/* Media Queries for Computer Screens (wider than 1024px) */
@media (min-width: 1024px) {
    /* Increase font size and padding for About Us section */
    .about {
        font-size: 1.2em; /* Adjust font size */
        padding: 60px 20px; /* Increase padding for better spacing */
    }

    .about h2 {
        font-size: 2.5em; /* Adjust header font size */
        margin-bottom: 20px; /* Increase margin below header */
    }

    .about p {
        font-size: 1.1em; /* Adjust paragraph font size */
        line-height: 1.8; /* Increase line height for better readability */
    }

    /* Increase font size and padding for Contact Us section */
    .contact {
        font-size: 1.2em; /* Adjust font size */
        padding: 60px 20px; /* Increase padding for better spacing */
    }

    .contact h2 {
        font-size: 2.5em; /* Adjust header font size */
        margin-bottom: 20px; /* Increase margin below header */
    }

    .contact p {
        font-size: 1.1em; /* Adjust paragraph font size */
        line-height: 1.8; /* Increase line height for better readability */
    }

    .contact a {
        font-size: 1.2em; /* Adjust link font size */
    }
}
  

    .cta-button {
        padding: 8px 16px;
    }

@media (max-width: 768px) {
    .header-title .center, .header-title .centered {
        font-size: 7em;
    }
    
}

@media (max-width: 480px) {
    .header-title .center, .header-title .centered {
        font-size: 3.0em;
    
    }
}



    nav ul li {
        display: row;
        margin: 20px 20px;
    
    }

    #whatsapp-chat {
        width: 40px;
        height: 40px;
    }

    .cta-button {
        padding: 5px 10px;
    }