/* For all pages */
body {
  font-family: serif;
  background-color: rgba(248, 245, 245, 0.9);
}

header{
    display: flex;
    /* justify-content: space-between; */
    
    justify-content: center; /* Centers the text div horizontally */
    align-items: center; 
    position: relative;   
}

header h3{
    font-size: clamp(1rem, 3vh + 1vw, 1.5rem);
    margin-bottom: 0vh;
}

header h4{
    font-size: clamp(0.875rem, 2.5vh + 1vw, 1rem);
    margin-top: 0vh;
}

.logo {
    /* For the div object holding the logo */
    position: absolute;
    left: 2vw; 
    width: clamp(5rem, 5%, 8rem);
    height: auto;
}
#logo{
    /*For the actual logo itself */
    width: 100%;
    height: auto;
}

.nav_main_content {
    display: flex
}

.navbar {
    width: 20vw;
    height: 50vh;
    /* box-sizing: border-box; */ /*https://www.w3schools.com/css/css_padding.asp */
}

.navbar ul{
    width: 8vw;
    height: 100%;
    background-color: rgba(11, 109, 11, 0.7);

}

.navbar ul li{
    font-size: calc(2vh + 1vw);
}

.navbar ul li a{
    display: block;
    color: #dbdbdb;
}

.navbar ul li a:hover{
    color: #46d1f3;
}

main {
    width: 70vw;
}
header, footer {
    text-align: center;
}

h1, h2, h3, h4, h5, p{
    color: #030303;
}

h1 {
    font-size: clamp(1.5rem, 5vh + 1vw, 3rem);
    /* font-size: calc(5vh + 1vw); */
    text-decoration: underline;
}

h2 {
    font-size: clamp(1.25rem, 4vh + 1vw, 2.5rem);
}



p{
    font-size: clamp(0.875rem, 2vh + 1vw, 1.25rem);
    /* font-size: calc(2vh + 1vw); */
}

footer {
    margin-top: 20vh;
}

/* For About/Home Page */


.Intro_img img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 80vh;
    width: 60vh;
    
}



/* For service page */
.services_provided{
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto; /* might not need */
    gap: 1vw;
}

.service{
    /* width:50%; */
    background: #f0f0f0;
    border: 2px solid #ccc;
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%; 
    width: 100%;
}

.service h2{
    /* font-size: clamp(1rem, 0.5vh + 0.5vw, 1.5rem); */
    font-size: 1vw;
}

.service h2 a{
    color: #030303;
}

/* #debris_chute{
    width: 112px;
    height: 200px;
} */

.placeholder_img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    flex-grow: 1;
    
}

/* For Service Gallery */
.service_img_gallery{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 2vh;
}

.service_img_gallery .service_img_card img{
    width: 100%;       /* Fill the width of the card */
            
    /* THIS IS THE KEY PROPERTY: */
    object-fit: cover; /* Crops the image to fit the box without stretching */
    aspect-ratio: 4 / 3;
            
    display: block;
    border: 1px solid #999;
}

/* For Contact Page */
.contact_container{
    display: flex;
    grid-template-columns: auto auto;
    justify-content: space-evenly;
}

.contact div{
    text-align: center;
    
}

.contact_reach{
    text-align: center;
    margin-top: 5vh;
    margin-bottom: 10vh;
}

.contact_reach h3{
    font-size: clamp(1rem, 3vh + 1vw, 1.5rem);
}

.contact_reach h4{
    font-size: clamp(0.875rem, 2.5vh + 1vw, 1rem);
}

.profile_pic{
    width: 16vw;
    height: auto;
}

.social-icons{
    display: flex;
    justify-content: center;
    align-items: center;
}

.social-icons img{
  width: 4vw;
  height: 4vh;

}

#Social_media{
    margin: 0;
}