body {
    font-family: Inter, sans-serif;
    margin: 0 auto;
    min-width: 320px;    
}
img {
    max-width: 100%;
}
.section-title {
    text-align: center;
    text-decoration: underline;
    text-decoration-color: #F68634;
    margin: 30px auto 0px auto;
}
/* Font Sizings */
h1 {font-size: 28px;font-weight: 500;}h2 {font-size: 26px;font-weight: 500;}h4{font-size: 18px;}h5{font-size: 16px;}p{font-size: 14px;}
@media (min-width: 500px){
    h1 {font-size: 30px;}h2 {font-size: 28px;}h4{font-size: 20px;}h5{font-size: 18px;}p{font-size: 16px;}
} 
@media (min-width:700px){
    h1 {font-size: 32px;font-weight: 600;}h2 {font-size: 30px;}h4{font-size: 24px;}h5{font-size: 20px;}p{font-size: 18px;}
    #hero-text p {
        font-weight: 500;
    }
    footer p {
        font-size: 14px;
    }
    #button {
        font-size: 18px;
    }
}
@media (min-width:1000px) {
    h1 {font-size: 34px;}h2 {font-size: 32px;}h4{font-size: 26px;}h5{font-size: 22px;}p{font-size: 20px;}
}
@media (min-width:1200px) {
    h1 {font-size: 36px;}h2 {font-size: 34px;}h4{font-size: 22px;}h5{font-size: 24px;}p{font-size: 22px;}
     #button {
        font-size: 22px;
    }
}
@media (min-width:1400px) {
    h1 {font-size: 38px;}h2 {font-size: 36px;}h4{font-size: 24px;}h5{font-size: 26px;}p{font-size: 24px;}
}
@media (min-width:1600px) {
    h1 {font-size: 40px;}h2 {font-size: 38px;}h4{font-size: 26px;}h5{font-size: 28px;}p{font-size: 26px;}
}
/* Header Styling */
header {
    height: 50px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-shadow: 1px 0px 5px #ddd;
}
#logo {
    height: 50px;
    width: 50px;
}
/* End */
/* Hero Section  */
#hero-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 10% 50% 10%;
    gap: 30px;
    background: url(img/hero-image.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #fff;
}
#hero-text > * {
    margin: 0;
}
#button {
    background-color: #F68634;
    color: #fff;
    padding: 10px 50px;
    border: 0px;
    border-radius: 10px;
    font-weight: bold;
    box-shadow: 1px 5px 4px #444;
    text-decoration: none;
}
/* End */
/* About Us Section */
#about-us-list {
    margin: 0 auto 0 5%;
   
}
 #about-us p{
    text-align: center;
    padding: 0 7% 0 7%;
 }
/* End */
/* Our Services Section */
#our-services-section {
    display: grid;
    grid-template-columns: 35% 35%;
    justify-content: space-around;
    background-color: #FCFBFA;
}
.our-services-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.our-services-section img {
    width: 100%;
    max-width: 200px;
    
}
.our-services-section h4 {
    margin: 0;
    text-align: center;
}

/* End */
/* Achievements Section */
#achievements {
    margin: auto auto auto 5%;
}
.achievements-ticks {
    height: 25px;
    vertical-align: baseline;
}
/* End */
/* Footer Section */
footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    
    background-color: #ddd;
}
footer > * {
    margin: 10px auto 10px auto;
}
/* End */
@media (min-width:750px) {
    #hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 5% 20% 10% 5%; 
    background: url(img/hero-image-long.svg);  
    background-size: cover;
    background-repeat: no-repeat; 
    }
    #our-services-section {
    display: grid;
    grid-template-columns: 20% 20% 20% 20%;
    justify-content: space-around;
    background-color: #FCFBFA;
}
header {
    height: 100px;
    text-align: center;
    border-bottom: 1px solid #ddd;
    box-shadow: 1px 0px 5px #ddd;
}
#logo {
    height: 100px;
    width: 100px;
}
}