:root{
    --start-position: 750px;
    --mobile-push-down-1: 400px;
    --section-spacing-full-screen: 100px;  
    --section-spacing: 600px;    
    --mobile-spacing:900px;
    --container-1-top: var(--start-position);
    --container-2-top: calc(var(--container-1-top) + var(--section-spacing));
    --container-3-top: calc(var(--container-2-top) + var(--section-spacing));
    --container-4-top: calc(var(--container-3-top) + var(--section-spacing));
    --container-5-top: calc(var(--container-4-top) + var(--section-spacing));
    --container-6-top: calc(var(--container-5-top) + var(--section-spacing));
    --container-7-top: calc(var(--container-6-top) + var(--section-spacing));
}

body, html {
    height: 100%;
    font-family: "Roboto", Arial, Helvetica, sans-serif;
    margin: 0

}

/* The hero image */
.hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), url("images/img-city-02.jpg");

    /* Set a specific height */
    height: 80%;
    

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin: auto;  
    margin-top: -50px;
    
    
}

.section-div-1 {
    background-color: rgb(134, 221, 220, 1);
    height: 100%;
    margin-top: -70px;	
}

.section-div-2 {
    background-color: rgba(239, 245, 245,0.5);
    height: 100%;
    margin-top: -80px;
}

.section-div-3 {
    background-color: rgba(222, 136, 45, 0.8);
    height: 100%;
    margin-top: -80px;
}

.angle-cut-1 {
    /* -webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); */

    transform: skewY(-4.5deg);
    transform-origin: 100%;
    z-index: -1;
}

.angle-cut-2 {
    transform: skewY(-4.5deg);
    transform-origin: 100%;
    z-index: -1;
    
}

.logo-img{		
    margin:auto;
    min-width:120px;
    max-height:500px;
    width: auto;
    height: auto;
    opacity: 1 !important;
    z-index:100;
    padding:4px;
}

.menu-item {
    text-align: center;
    font-size: 1.0em;
}

.menu-item-link {
    white-space: nowrap;
    font-size: 1.0em;
}

.logo-div-background{
   
    background: rgba(255, 255, 255, .5);
    padding-top: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.body-div {	  
    justify-content: left;
    align-items: left;
    height: 800px;
    margin: 0px;		
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    
    padding: 10px;
    
    z-index: 1000 !important;
    column-gap: 50px;
    row-gap: 50px;
}

.grid-item {
    background-color: rgba(255, 255, 255, 0.4);
    
    padding: 20px;
    font-size: 30px;
    text-align: center;
}

.banner-divider {
    width:1%;font-size: 42px;

}

p {
  text-align: justify;
  text-justify: inter-word;
  color: rgba(0, 0, 0, 0.75)
}

.flex-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    }

.flex-container > div {
    background-color:  rgba(255, 255, 255, 1) !important;
    margin: 10px;
    padding: 20px;
    font-size: 20px;
    min-width: 200px;
}

.center {
    position: absolute; 
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto; 
    top: 100px;    
    
}

.flex-parent {
    z-index:500 !important;width: 100%;
}

.flex-parent-1 {
    margin-top:calc(var(--container-1-top));    
}

.flex-parent-2 {
    margin-top:calc(var(--container-2-top) + var(--section-spacing-full-screen));
}

.flex-parent-3 {
    margin-top:calc(var(--container-3-top) + var(--section-spacing-full-screen) + 100px);
}

.flex-parent-4 {
    margin-top:calc(var(--container-4-top)  + var(--section-spacing-full-screen) + 100px);
}

.flex-parent-5 {
    margin-top:calc(var(--container-5-top) + var(--section-spacing-full-screen) + 200px);
}

.flex-parent-6 {
    margin-top:calc(var(--container-6-top) + var(--section-spacing-full-screen) + 300px)
}

.flex-parent-7 {
    margin-top:calc(var(--container-7-top) + var(--section-spacing-full-screen) + 500px)
}

.flex-child {
    text-align:left;width:30%;font-size: 1.0em;
}

.flex-child-img-container {
    text-align:center;text-align:center;width:50%;height:100%;padding-bottom:150px;
}

.flex-child-img {
    width: 100%; height: 100%;
}

.flex-container-team {
    text-align: left; width: 40%; text-align: center
}

.avatar-img {
    width: 100px; height: auto
}


.div-main-info {
    width:100%;
    background-color:  rgba(255, 255, 255, 0) !important;
    color:white;
    margin: 0px;
}

.heading-main{
    background-color: rgba(215, 113, 37, 0.9);
    text-align:center;
}	

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0.089);
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
    }

#myBtn:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


.banner {
    width:100%;font-size: 24px;padding-top: 8px;padding-left: 4px;
}

/* *** media queries *** */

@media (max-width: 1281px) {


    .banner {
        font-size: 20px;
        width: 50%;
    }

    .banner-divider {
        width:1%;
        
    }

    
    

}

@media (max-width: 1025px) {

    .banner {
        width:20%;font-size: 16px;padding-top: 8px;padding-left: 4px;    
        display:none;   
    }
    .banner-divider {
        width:100%;font-size: 14px;padding-top: 8px;padding-left: 4px;
        display:none;
    }

    .menu-item {
        text-align: center;
        font-size: inherit;
    }
    .menu-item-link {
        text-align: center;
        font-size: inherit;
    }     

}

@media (max-width: 981px) {

    .logo-img{		
        margin:auto;
        min-width:170px;
        max-height:500px;
        width: auto;
        height: auto;
        opacity: 1 !important;
        z-index:100;
        padding:4px;
    }

    .menu-item {
        text-align: center;
        font-size: x-large;
    }
    .menu-item-link {
        text-align: center;
        font-size: 2.25em;
    }

    .flex-container {
        flex-direction: column;
    }
    .flex-parent {
        z-index:500 !important;width: 100%;
    }
    .flex-parent-1 {
        margin-top:calc(var(--container-1-top) + var(--mobile-push-down-1))
    }
    .flex-parent-2 {
        margin-top:calc(var(--container-2-top) + (var(--mobile-push-down-1) + var(--mobile-spacing) ))
    }
    .flex-parent-3 {
        margin-top:calc(var(--container-3-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 1000px)
    }
    .flex-parent-4 {
        margin-top:calc(var(--container-4-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 1900px)
    }
    .flex-parent-5 {
        margin-top:calc(var(--container-5-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 2600px)
    }
    .flex-parent-6 {
        margin-top:calc(var(--container-6-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 3600px)
    }
    .flex-parent-7 {
        margin-top:calc(var(--container-7-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 4600px)
    }
    .flex-child {
        text-align:left;width:inherit;
    }

    .flex-child > h3 {
        text-align:left;width:inherit;font-size: 2em;
    }

    .flex-child > p {
        text-align:left;width:inherit;font-size: 2em;
    }

    .flex-child-img-container {
        text-align:center; text-align:center; width:inherit;height: 550px;
    }
    .flex-child-img {
        width: 100%; height:auto;
    }
    .flex-container-team {
        text-align:center; text-align:center; width:inherit;
    }

    .flex-container-team > h3 {
        text-align:center;width:inherit;font-size: 1.75em;
    }

    .flex-container-team  p {
        text-align:left;width:inherit;font-size: 2em;
    }

    .avatar-img {
        width: 150px; height:auto;vertical-align: top;
    }
    

}

@media (max-width: 320px) {

    .logo-img{		
        margin:auto;
        min-width:240px;
        max-height:500px;
        width: auto;
        height: auto;
        opacity: 1 !important;
        z-index:100;
        padding:4px;
    }

    .menu-item {
        text-align: center;
        font-size: x-large;
    }
    .menu-item-link {
        text-align: center;
        font-size: 2.25em;
    }

    .flex-container {
        flex-direction: column;
    }
    .flex-parent {
        z-index:500 !important;width: 100%;
    }
    .flex-parent-1 {
        margin-top:calc(var(--container-1-top) + var(--mobile-push-down-1))
    }
    .flex-parent-2 {
        margin-top:calc(var(--container-2-top) + (var(--mobile-push-down-1) + var(--mobile-spacing)))
    }
    .flex-parent-3 {
        margin-top:calc(var(--container-3-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 500px)
    }
    .flex-parent-4 {
        margin-top:calc(var(--container-4-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 300px)
    }
    .flex-parent-5 {
        margin-top:calc(var(--container-5-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 500px)
    }
    .flex-parent-6 {
        margin-top:calc(var(--container-6-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 900px)
    }
    .flex-parent-7 {
        margin-top:calc(var(--container-7-top) + var(--mobile-push-down-1) + var(--mobile-spacing) + 1300px)
    }
    .flex-child {
        text-align:left;width:inherit;
    }

    .flex-child > h3 {
        text-align:left;width:inherit;font-size: 2em;
    }

    .flex-child > p {
        text-align:left;width:inherit;font-size: 2em;
    }

    .flex-child-img-container {
        text-align:center; text-align:center; width:inherit;height: 550px;
    }
    .flex-child-img {
        width: 100%; height:auto;
    }
    .flex-container-team {
        text-align:center; text-align:center; width:inherit;
    }

    .flex-container-team > h3 {
        text-align:center;width:inherit;font-size: 1.75em;
    }

    .flex-container-team  p {
        text-align:left;width:inherit;font-size: 2em;
    }

    .avatar-img {
        width: 150px; height:auto;vertical-align: top;
    }
    

}