@font-face {
    font-family: 'textfont';
    font-style: NORMAL_OR_ITALIC;
    font-weight: NUMERIC_WEIGHT_VALUE;
    src: url(Oswald/Oswald-VariableFont_wght.ttf) format('woff2');
  }

html {
    background-color: rgb(192, 237, 243);
    /* overflow: hidden; */
}

body{
    margin:0!important;
    font-family: textfont;
    
}


/* NAV BAR */

.nav-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100vw;
    background-color: rgb(15, 28, 56);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 100;
}

.logo-name-container {
    display: flex;
    width: 30vw;
    flex-direction: row;
    align-items: center;
    margin-left: 2%;
    margin-right: 2%;
}

#logo {
    width: 5vw;
    margin: 2%;
}

#logo-name {
    margin-top: 3%;
    width: 12vw;
}

.nav-items {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 60%;
    margin-right: 3%;
}

button {
    font-family: textfont;
    width: max-content;
    height: 50%;
    padding-left: 3%;
    padding-right: 3%;
    background-color: rgb(26, 37, 71);
    color: white;
    border-radius: 5px;
    border-color:  rgb(15, 28, 56);
    box-shadow: 0 4px 8px 0 rgba(18, 7, 43, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

button:hover {
    background-color: rgb(0, 56, 19);
}

@media (max-width:1010px) {
    button {
        font-size: small;
    }
} 
@media (min-width:1010px) {
    button {
        font-size: large;
    }
} 

#menu-icon {
    font-size: 2em;
    right: 10px;
}

.popup {
    position: relative;
    color: white;
}

.popup .popuptext {
    visibility: hidden;
    font-size: medium;
    width: 80px;
    background-color:  rgb(0, 56, 19);
    color: #fff;
    text-align: center;
    border-radius: 5px;
    position: absolute;
    z-index: 1;
    top: 1px;
    right: 1px;
}

 
.popup .show {
    visibility: visible;
}

 

/* HOME MAIN */


.h-body {
    justify-content: space-between;
    height: 100vh;
}

.flex-col{
    display: flex;
    flex-direction: column;
}

.flex-row {
    display: flex;
    flex-direction: row;
}

.h-main {
    
    background-color: rgb(212, 234, 238);
    height: 100vh;
}

@media (min-width:1146px) {
    .h-main {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .h-left {
        flex: 1;
        background-image: url('images/homepageimage.jpg');
        background-repeat: no-repeat;
        background-size: auto 100%;
    }

    .h-main {
    
        background-color: rgb(212, 234, 238);
        height: 100vh;
    }

    .h-right {
        flex: 2;
        background-color: aliceblue;
        box-shadow: 0 4px 8px 0 rgba(18, 7, 43, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin: 2%;
        align-items: center;
    }

} 

@media (max-width:1146px) {
    .h-main {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .h-left {
        flex: 1;
        background-image: url('images/homepageimage.jpg');
        background-repeat: no-repeat;
        background-size: auto 100%;
    }

    .h-main {
    
        background-color: rgb(212, 234, 238);
        height: 100vh;
    }

    .h-right {
        flex: 2;
        background-color: aliceblue;
        box-shadow: 0 4px 8px 0 rgba(18, 7, 43, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin: 2%;
        align-items: center;
    }

} 

@media only screen and (hover: none) and (pointer: coarse){

    .h-body {
        justify-content: flex-start;
        height:fit-content;
    }

    .h-main {
     background-image: url('images/homepageimage.jpg'); 
         /* background-repeat: no-repeat; */
         height: 100%;
        background-size: 100% auto; 
    }

    .h-left {
        display: none;
    }

   body {
    overflow-x: hidden;
   }

    .h-right {
       
        background-color: aliceblue;
        box-shadow: 0 4px 8px 0 rgba(18, 7, 43, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin: 5%;
        align-items: center;
    }

    
    }

@media (max-width:885px) {
    .h-body {
        justify-content: flex-start;
        height:fit-content;
    }

    .h-main {
     background-image: url('images/homepageimage.jpg'); 
         /* background-repeat: no-repeat; */
         height: 100%;
        background-size: 100% auto; 
    }

    .h-left {
        display: none;
    }

   body {
    overflow-x: hidden;
   }

    .h-right {
       
        background-color: aliceblue;
        box-shadow: 0 4px 8px 0 rgba(18, 7, 43, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        margin: 5%;
        align-items: center;
    }

   
} 


@media (min-width:800px) {
    #menu-icon {
        display: none;
    }
}

@media (max-width:800px) {
    button {
        display: none;
    }


    .nav-bar {

        justify-content: space-between;
      
    }

    .nav-items {
        
        justify-content: flex-end;
       
    }
}

@media only screen and (hover: none) and (pointer: coarse){
    button {
        display: none;
    }


    .nav-bar {

        justify-content: space-between;
      
    }

    .nav-items {
        
        justify-content: flex-end;
       
    }
}









#h-h1 {
    margin-top: 10vh;
    margin-left: 2%;
    margin-right: 2%;
    color: rgb(14, 14, 73);
}

#h-h2 {
    color: rgb(9, 63, 27);
    margin-bottom: 5%;
}

#h-h3 {
    color: rgb(14, 14, 73);
}

@media (min-width:1146px) {
    /* .home-table {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    } */

    .services-col {
        /* display: flex;
        flex-direction: row;
        background-color: aliceblue;
        gap: 10px 40px;
        flex-wrap: wrap;
        margin-top: 1vh;
        margin-left: 5%;
        margin-right: 5%; */
        display: grid;
        grid-template-columns: repeat(3, 5fr);
    }
} 

@media (max-width:1146px) {
    /* .home-table {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    } */

    .services-col {
        /* display: flex;
        flex-direction: row;
        background-color: aliceblue;
        gap: 10px 40px;
        flex-wrap: wrap;
        margin-top: 1vh;
        margin-left: 5%;
        margin-right: 5%; */
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }


  
} 


@media (max-width:885px) {
    /* .home-table {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    } */

    .services-col {
        /* display: flex;
        flex-direction: row;
        background-color: aliceblue;
        gap: 10px 40px;
        flex-wrap: wrap;
        margin-top: 1vh;
        margin-left: 5%;
        margin-right: 5%; */
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }


  
} 

li {
    margin-bottom: 1em;
    margin-left: 5em;
    font-size: medium;
}

li:before { content: '🌲'; margin-left: -1.7em; margin-right: 5px; } 























.footer {
    background-color: rgb(15, 28, 56);
    color: rgb(15, 28, 56);

}