html, body {
    max-width: 100%;
    overflow-x: hidden;
}



/* Reset some default styles */
body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

/* Set the background color to white (#ffffff) */
body {
    background-color: #ffffff;
    color: #143578; /* Main text color */
    font-family: Arial, sans-serif;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    max-width: 100%;
}


/* Set consistent padding for sections */
section {
    max-width: 100%;
    padding: 1em 1em;
    text-align: center;
}


/* Header Styles */
header {
    background-color: transparent;
    text-align: center;
    padding: 1em 0; /* Responsive padding using em units */
}

.logo-container {
    display: flex;
    justify-content: center;
    text-align: center;
    margin: 0 auto;
    width: 100%;
    max-width: 1080px;
}

.logo-container img {
    max-width: 30%;
    height: auto;
    padding: 1em 15%;
}


/* Heading Styles */
h1, h2, h3 {
    color: #143578;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2em, 7vw, 4em); /* Responsive font size using clamp */
    color: #D21627;
}

h2 {
    font-size: clamp(1.25em, 4vw, 1.5em); /* Responsive font size using clamp */
}

h3 {
    font-size: clamp(1.125em, 3.5vw, 1.25em); /* Responsive font size using clamp */
    color: #D21627;
    margin-top: 2em;
}


/* Paragraph Styles */
p {
    margin-bottom: 1em;
}

/* List Styles */
ul {
    list-style-type: disc;
    margin-left: 1.25em;
    margin-bottom: 1em;
}

li {
    margin-bottom: 0.5em;
}

/* Footer Styles */
footer {
    background-color: #D21627;
    color: #ffffff;
    text-align: center;
    padding: 1em 0; /* Responsive padding using em units */
}

/* Did You Know Styles */

#did-you-know {
    background-color: rgb(243, 243, 243);
    padding-top: 4em;
}

@media (max-width: 768px) {
    #did-you-know {
        background-color: rgb(243, 243, 243);
        padding-top: 2em;
        padding-bottom: 0em;
    }
}


#did-you-know h2 {
    font-size: clamp(1.5em, 6vw, 3em); /* Responsive font size using clamp */
    font-weight: 300;
    line-height: 1.1;
    max-width: 700px;
    margin: 0 auto;
}

#did-you-know span {
    color: #D21627;
    font-weight: 700;
}

/* Intro Styles */

#intro h2 {
    font-size: clamp(1.4em, 5vw, 3em); /* Responsive font size using clamp */
    font-weight: 300;
}

#intro h4 {
    font-size: clamp(1.1em, 3vw, 2em); /* Responsive font size using clamp */
    margin: 1em 0 0 0;
}

#intro p {
    font-size: clamp(1.2em, 3vw, 2em); /* Responsive font size using clamp */
    font-weight: 600;
    margin-top: 1em;
    line-height: 1.2;
}

#intro video {
    width: 100%;
    max-width: 900px;
}

/* True or False Styles */

#true-or-false {
background-color: rgb(243, 243, 243);
padding-bottom: 2em;
}

#true-or-false .question {
    max-width: 220px;
    width: 30%;
    margin-top: 2em;
    margin-bottom: -4em;
}

#true-or-false img {
max-width: 500px;
width: 90%;
margin-top: -1em;
margin-bottom: 0.5em;
}

#true-or-false h3 {
    font-size: clamp(2em, 8vw, 3.5em); /* Responsive font size using clamp */
}

#true-or-false h3 span {
    color: #143578;
}

.small-text {
    font-size: 0.6em; /* Adjust the font size as needed */
}

#true-or-false h4 {
    padding: 1em 0em;
    font-size: clamp(1.5em, 4vw, 2em); /* Responsive font size using clamp */
    max-width: 600px; /* Set your desired maximum width */
    margin: 0 auto; /* Center the paragraph horizontally */
    font-weight: 300;
    line-height: 1.2;
}

#true-or-false h4 strong {
    font-size: clamp(1.2em, 4vw, 2em); /* Responsive font size using clamp */
}

#true-or-false p {
    font-size: clamp(1em, 3vw, 1.5em); /* Responsive font size using clamp */
    max-width: 400px; /* Set your desired maximum width */
    margin: 0 auto; /* Center the paragraph horizontally */
    font-weight: 300;
    line-height: 1.3;
    padding-bottom: 1em;
}

.containerbg {
    background-color: #ffffff;
    max-width: 900px;
    margin: 0 auto;
    padding: 1em 2em;
    border-radius: 10px;
}

/* Healthy Gums Styles */

#heading h2 {
    color:#143578;
    font-size: clamp(2em, 8vw, 4em); /* Responsive font size using clamp */
    max-width: 600px;
    line-height: 1;
    padding: 0.3em 0em;
}

#heading h2 span {
    color: #D21627;
}

#heading h3 {
    color:#143578;
    font-weight: 300;
    font-size: clamp(1.5em, 5vw, 2.5em); /* Responsive font size using clamp */
}

#healthy-gums img {
    max-width: 250px;
    width: 95%;
}


#heading {
    margin-top: 2em;
    margin-bottom: 2em;
}

#healthy-gums h3 {
    font-size: clamp(1.2em, 4vw, 2em); /* Responsive font size using clamp */
    margin-top: 0.5em;
    max-width: 100%;
    margin: 0 auto;
}

#healthy-gums p {
    font-size: clamp(1.2em, 3vw, 1.6em); /* Responsive font size using clamp */
    margin-top: 0.5em;
    line-height: 1.2;
    max-width: 70%;
    margin: 0 auto;
}

.subhead h3 {
    
}

@media (max-width: 768px) {
    #healthy-gums p {
        font-size: clamp(1em, 3vw, 2em); /* Responsive font size using clamp */
        margin-top: 0.5em;
        line-height: 1.2;
        max-width: 100%;
        margin: 0 auto;
    }
}

.row {
    display: flex;
    flex-direction: row;
    max-width: 1080px;
    margin: 0 auto;
}

.column {
    flex: 1;
    text-align: center;
    margin: 1em 0em; /* Adjust spacing between columns */
}

.single-column {
    text-align: center;
    margin: 0 auto;
}

.divider {
    width: 60%;
    border: 1.5px solid #ccc; /* Adjust divider style */
    margin: 1em auto; /* Adjust spacing above and below the divider */
}

.divider-long {
    width: 100%;
    border: 1.5px solid #ccc; /* Adjust divider style */
    margin: 1em auto; /* Adjust spacing above and below the divider */
}

#three .column h3 {
    color: #143578; /* Change the h3 text color */
    font-size: clamp(1em, 4vw, 2em); /* Responsive font size using clamp */

}

#three .column p {
    color: #666; /* Change the h3 text color */
    font-size: clamp(0.8em, 3.5vw, 1.4em); /* Responsive font size using clamp */
    padding-top: 10px;
}

.row h2 {
    color:#D21627;
    font-size: clamp(1.3em, 4vw, 2em); /* Responsive font size using clamp */
    margin: 0 auto;
}

#three {
    margin-top: 0em;
}


/* Happy Mouth Styles */

#happy-mouth {
    background-color: rgb(243,243,243);
    padding-top: 3em;
}

@media (max-width: 768px) {
    #happy-mouth {
        background-color: rgb(243,243,243);
        padding-top: 2em;
    }
}


#happy-mouth video {
    padding: 2em 0em 2em 0em;
    width: 100%;
    max-width: 900px;
}

#happy-mouth h1 {
    max-width: 700px;
    margin: 0 auto;
    line-height: 1;
    padding: 10px 0 0 0 ;
}

#happy-mouth p {
    font-size: clamp(1.2em, 3vw, 2em);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.2;
    padding: 20px 0 30px 0;
}

#happy-mouth h2 {
    color:#143578;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    font-size: clamp(1em, 3vw, 2em);
    font-weight: 600;
    padding: 0.7em 0em;
}


#happy-mouth img {
    max-width: 250px;
    width: 95%;
}

#happy-mouth img.arrow {
    max-width: 150px;
    width: 50%;
    margin-top: 20%;
}

#happy-mouth h3 {
    font-size: clamp(2em, 5vw, 3em); /* Responsive font size using clamp */
    line-height: 1;
    margin-top: 1em;
}

.side-by-side {
    background-color: #ffffff;
    border-radius: 10px;
    padding: 2em 1em;
    max-width: 1080px;
    margin: 0 auto;
}

/* Specialist Products Styles */

#specialist-products h1 {
    margin: 30px 0 0 0;
    line-height: 1;
    color:#143578;
}

#specialist-products h2 {
    font-size: clamp(1.2em, 4vw, 2em); /* Responsive font size using clamp */
    margin: 30px 0 0 0;
    line-height: 1;
    
}


#specialist-products p {
    font-size: clamp(1em, 3vw, 1.5em); /* Responsive font size using clamp */
    margin-top: 0.5em;
    line-height: 1.2;
    max-width: 100%;
    margin: 0 auto;
    padding: 15px 0 20px 0;
}

#specialist-products img {
    padding-top: 1em;
    padding-bottom: 1em;
    width: 80%; /* Make width responsive */
    max-width: 500px;
    height: auto; /* Maintain aspect ratio */
}

#specialist-products .column img {
    max-width: 150px; /* Allow image to scale within the column */
    width: 70%;
    display: block;
    margin: 0 auto; /* Center horizontally */
}


#specialist-products .row {
    display: flex;
    flex-direction: row;
    max-width: 900px;
    margin: 0 auto;
}

#specialist-products .column {
    flex: 1;
    text-align: center;
    margin: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
}

#specialist-products .column h2 {
    margin-bottom: 10px; /* Add padding to the bottom of the h2 elements */
}


.fancy-button {
    display: inline-block; /* Allows the use of padding and margins */
    background-color: #D21627; /* Primary button color */
    color: #ffffff; /* Text color */
    padding: 12px 30px; /* Top and bottom padding, left and right padding */
    text-decoration: none; /* Removes underline from link */
    border-radius: 25px; /* Rounded corners */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition for hover effects */
    text-align: center; /* Ensures text is centered */
    font-size: clamp(1em, 3vw, 1.5em); /* Responsive font size using clamp */
    font-weight: bold; /* Makes the text bold */
}

.fancy-button:hover {
    background-color: #143578; /* Color change on hover */
    transform: scale(1.05); /* Slightly enlarges the button on hover */
}


.site-footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: #D21627; /* Red background color */
    color: #ffffff; /* White text color */
    padding: 3em; /* Adjust padding as needed */
    font-family: Arial, sans-serif; /* Specify the font-family */
}

.site-footer a {
    color: #ffffff;
}

.site-footer h2 {
    color: #000000;
}

.footer-logo img {
    max-width: 500px; /* Adjust based on actual logo size */
    width: 80%;
    height: auto; /* Maintain aspect ratio */
}

.footer-info p {
    margin: 0; /* Remove default margin */
    /* Additional styling for the practice info text */
}

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

    .footer-logo, .footer-info {
        margin-bottom: 20px; /* Add space between the logo and info on smaller screens */
    }
}

#footer {
    padding: 0 0 2em 0;
}