/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap');*/


/* Global Classes */

/* Tags */
main{
    color: gray;  
    background-color: inherit;
    margin-top: 2.5em;
}

h1 {

    visibility: visible;
}

h2{
    font-size: 3rem;
    overflow-wrap: break-word;
    text-align: center;

}

h3{ 
    text-align: center;
    font-size: 1.95rem;
    
}

h4{
    text-align: center;
} 

p, ul {
    font-size: 1.25rem;
}

p{
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
    display:block;
}

/* IDS  */

#banner{
    background-color: whitesmoke;
    position: relative;
}

#banner  h1 {

    margin: 0;
    padding: 1em;

    background-color: none;
    color:     white;

    position: absolute;
    text-align: center;

    top: 0%;
    bottom: 0%;
    left: 0%;
    right: 0%;

    text-align: center;
    font-weight: bolder;
    font-weight: bolder;
    font-size: 6rem;
    overflow-wrap: break-word;
    text-shadow:
        -1px -1px 0 #004aad,
        1px -1px 0 #004aad,
        -1px 1px 0 #004aad,
        1px 1px 0 #004aad;
        
 
}

#banner img {
    width: 100%;
    height: 25rem;
    object-fit:cover;
}

#services h2 {
    /*color: #AD004A;*/
    color: darkgray;
}

#about h2 {
    /* color: #4AAD00; */
    color: darkgrey;
}

/*Classes*/

.milestone{
    margin: 2.5em auto 2.5em auto;
    width: 75%;
    padding: 0em;
}

.offering div{
    background-color: darkgrey;
    color: white;
    margin: 0.25rem;
    padding: 0.25rem;
}

.offering img{

    width: 100%;
    height: auto;
    object-fit:cover;
    
}

.about div {
margin: 0.25rem;
background-color: darkgrey;
color: white;
text-align: center;
}

.explore{
    border-radius: 50px;
    padding: 1em 1em;
    border: solid 1px rgb(112, 141, 150);
    color: rgb(112, 141, 150);
    text-align: center;
    display: inline-block;
    font-size: 1.25em;
    
}

.explore:hover{
    text-decoration: none;
    background-color: lightgray;
}






/* Screen specific styles */

@media (max-width: 999px){
 
    .top{
        
        display: none;
    }

    .bottom{
        display: inline;
    }

}

@media (min-width: 1000px) { 
    
    /* IDS */
    
    
    /* Classes */
    .offering {
    display:grid;
    grid-template-columns: 25% 25% 25% 25%; 

    }

    /* Classes */
    .about {
    display:grid;
    grid-template-columns: 50% 50%; 
    }
   
}