/* This sets the background color and margin for the body element */
body {
background-color: white;
margin: 0;
}

/* This sets the height, width, and position for the banner element */
.banner {
height: 300px;
width: 100%;
position: relative;
}

/* This sets the source, height, width, and position for the logo image */
.logo {
src: url(“logo.png”);
height: 100px;
width: 100px;
position: absolute;
top: 20px;
left: 20px;
}

/* This sets the color, font size, and position for the banner text */
h1 {
color: white;
font-size: 2.25em; /* Changed from 36px to 2.25em */
position: absolute;
bottom: 20px;
left: 20px;
}

/* This sets the height, width, background color, and display for the nav element */
.nav {
height: 100px;
width: 100%;
background-color: #f0f0f0;
display: flex;
}

/* This sets the height, width, margin, padding, and hover effect for the icon images */
.icon {
height: 80px;
width: 80px;
margin: 10px;
padding: 10px;
transition: transform 0.3s; /* Added a transition effect */
}

/* This changes the scale of the icon images when hovered over */
.icon:hover {
transform: scale(1.1); /* Added a scale effect */
}

/* This sets the height, width, and display for the content element */
.content {
height: auto;
width: 80%;
display: block;
margin: auto;
}

/* This sets the margin and padding for the welcome element */
.welcome {
margin: 20px;
padding: 20px;
}

/* This sets the color and font size for the welcome text */
h2 {
color: #333333;
font-size: 1.5em; /* Changed from 24px to 1.5em */
}

/* This sets the color and font size for the welcome paragraph */
p {
color: #666666;
font-size: 1.125em; /* Changed from 18px to 1.125em */
}

/* This sets the height, width, margin, border-radius, box-shadow, and hover effect for the clinic image */
.clinic {
height: 400px;
width: 600px;
margin: auto;
border-radius: 10px; /* Added a border-radius effect */
box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Added a box-shadow effect */
transition: transform 0.3s; /* Added a transition effect */
}

/* This changes the scale of the clinic image when hovered over */
.clinic:hover {
transform: scale(1.05); /* Added a scale effect */
}

/* This sets the height, width, background color, and display for the footer element */
.footer {
height: 100px;
width: 100%;
background-color: #333333;
display: flex;
}

/* This sets the color, font size, margin, and padding for the footer text */
p {
color: white;
font-size: 0.875em; /* Changed from 14px to 0.875em */
margin: auto;
padding: 10px;
}

/* This sets the height, width, margin, padding, and hover effect for the social media images */
.social {
height: 40px;
width: 40px;
margin: auto;
padding: 10px;
transition: transform 0.3s; /* Added a transition effect */
}

/* This changes the scale of the social media images when hovered over */
.social:hover {
transform: scale(1.2); /* Added a scale effect */
}

/* This is the custom CSS code for Astra theme */

/* This changes the header layout to transparent for desktop devices */
@media (min-width: 769px) {
.ast-theme-transparent-header #masthead {
position: absolute;
width: 100%;
background-color: transparent !important;
box-shadow: none !important;
}
}

/* This changes the header layout to stacked for tablet and mobile devices */
@media (max-width: 768px) {
.ast-theme-transparent-header #masthead {
position: relative;
background-color: #f0f0f0 !important;
box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
}
.ast-theme-transparent-header .main-header-bar {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
.ast-theme-transparent-header .main-header-bar .site-logo-img {
margin-bottom: 10px;
}
.ast-theme-transparent-header .main-header-bar .ast-mobile-menu-buttons {
margin-top: 10px;
}
}