/* body CSS--------------------------------------------*/
html {
  scroll-behavior: auto;
}
body{
    font-family: verdana, sans-serif;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-size: 1em;
    line-height: 1.5
}
.dark_background{
    background-color: #222222;
    color: whitesmoke;
}
.dark_background2{
    background-color: #2d2d2d;
    color: whitesmoke;
}
/* header CSS------------------------------------------*/
.flex-container{
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
}
#burguer_outer{
    background: none;
    border: none;
    cursor: pointer;
}
#burguer_inner{
    height: 4em;
    fill: whitesmoke;
}
/* nav CSS-------------------------------------------*/
nav {
    height: 0;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #222222;
    overflow-x: hidden;
    transition: 0.5s; 
}
nav > a{    
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 1.5em;
    color: whitesmoke;
    transition: 0.3s;
}
/* other CSS----------------------------------------*/
img{
    width: 100%;
    object-fit: cover;
    display: block;
    background-size: cover;
}
#banner{
    height: 20em;
}
section{
    margin: auto;
}
h1,h2{
    font-weight: normal;
    font-size: 1.5em;
    text-align: left;
}
h3{
    font-weight: normal;
    font-size: 1.3em;
    text-align: left;
}
li {
    list-style-type: circle;
}
.approach_frame{
    border-width: 0.1em;
    border-style: ridge;
    border-color: whitesmoke;
    border-radius: 10px;
}
.solutions_frame{
    border-width: 0.1em;
    border-style: ridge;
    border-color: #222222;
    border-radius: 10px;
}
.image_mobile {
    display: block;
}

.image_desktop {
    display: none;
}
#solutions{
    border-bottom-width: 0.2em;
    border-bottom-style: ridge;
    border-bottom-color: whitesmoke;
}

/*footer CSS----------------------------------------*/
footer{
    font-size: 0.9em;
}
#copyright{
    font-size: 0.9em;
    text-align: left;
}
#registration, #legal{
    width: 100%;
}
footer.flex-container {
    flex-direction: column;
}

/* padding/margin ----------------------------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
header{
    padding: 1.5em 1em;
}
nav > a{    
    padding-top: 0.5em;
    padding-bottom: 0.5em;
}
#about, 
#approach,
#solutions,
#team{    
    padding: 1em;
    padding-bottom: 2.5em;
    /* margin: auto; */
}
h1,
h2,
h3{
    padding-bottom: 1em;
}
#about_image{
    padding-left: 1em;
    padding-right: 1em;
    padding-bottom: 2em;
}
img{
    padding-top: 1em
}
p{
    padding-bottom: 1em;
}
li {
    margin: 1em;
    margin-left: 2em;
}
.approach_frame,
.solutions_frame{
    padding: 1em;
    margin-top: 1em;
}
footer{
    padding: 1em;
    padding-bottom: 0;
}
#copyright{
    padding: 1em;
}

/* size ------------------------------------------------------*/
#logo{
    height: 3em;
    width:auto;
    padding: 0;
    margin: 0;
}

/* responsive design------------------------------------------------------------------- */
/*Tablet-------------------------------------*/
@media only screen and (min-width: 751px){
    /* padding */
    header{
        padding: 2em 16.67%;
    }
    #about, 
    #solutions,
    #about_image,
    #team{    
        padding-left: 0;
        padding-right: 0;
    }
    #approach{
        padding-left: 16.67%;
        padding-right: 16.67%;
    }
    #logo{
        height: 4em;
    }
    footer,
    #copyright{
        padding: 1em 16.67%;
    }
}
/*Desktop-------------------------------------*/
@media only screen and (min-width: 1011px){
    header{
        padding: 3em 8.33%;
    }
    #burguer_outer{
        display: none;
    }
    nav{
        height: 2em;
        position: relative;
        background: none;
        font-size: 1em;
        margin-top: 0.5EM;

    }
    nav > a{
        margin-right: 1.5em;
        display: inline;
        padding: 0;
        color: rgb(0,0,0);
    }
    nav > a:hover {
        text-decoration: underline;
        text-decoration-thickness: auto;
    }
    .flex-container_approach{
        display: flex;
        flex-wrap: wrap;
        gap: 2em;
    }
    #approach{    
        padding-top: 5em;
    }
    #team,
    #about,
    #about_image,
    #solutions{
        padding-top: 5em;
        padding-bottom: 5em;
    }
    #approach{
        padding-left: 8.33%;
        padding-right: 8.33%;
    }
    .approach_frame{
        flex: 40%;
    }
    .solutions_frame{
        flex: 30%;
    }
    .image_mobile {
        display: none;
      }
    .image_desktop {
        display: block;
      }
    footer.flex-container {
        flex-direction: row;
    }
    footer{
        padding: 1em 8.33%;
    }
    #copyright{
        padding: 1em 8.33%;
        text-align: center;
        border-width: 0.1em;
        border-top-style: ridge;
        border-color: white;
    }
    #registration{
        width: 65%;
    }
    #legal{
        text-align: right;
        width: 35%;
    }
    #disclaimer, #privacy{
        padding: 0 8.33%;
    } 
}
@media only screen and (min-width: 1301px){
    #banner{
        height: 40em;
    }
    .approach_frame{
        flex: 20%;
    }
    footer, #copyright{
        font-size: 1em;
    }
}

/*Grid CSS - responsive design-------------------------------------------------------------------*/
/*mapping-----------------------------------------*/    
header{grid-area: header;}
#menu_nav{grid-area: menu_nav;}
#banner{grid-area: banner;}
#about{grid-area: about;}
#about_image{grid-area:about_i}
#approach{grid-area: approach;}
#solutions{grid-area: main;}
#team{grid-area: team;}
footer{grid-area: footer;}
#copyright{grid-area: copyright;}
/*Mobile-------------------------------------*/
@media only screen and (max-width: 750px){
/*Grid - all sections*/
    .grid-container{
        display: grid;
        grid-template-columns: repeat(12, 8.33%);
        grid-template-areas:
            "header header header header header header header header header header header header"
            "menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav"           
            "about about about about about about about about about about about about"
            "about_i about_i about_i about_i about_i about_i about_i about_i about_i about_i about_i about_i"
            "approach approach approach approach approach approach approach approach approach approach approach approach"
            "main main main main main main main main main main main main"
            "team team team team team team team team team team team team"
            "banner banner banner banner banner banner banner banner banner banner banner banner"
            "footer footer footer footer footer footer footer footer footer footer footer footer"
            "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright";
    }
}
/*Tablet-------------------------------------*/
@media only screen and (min-width: 751px) and (max-width: 1010px){
/*Grid - home*/
    .grid-container{
        display: grid;
        grid-template-columns: repeat(12, 8.33%);
        grid-template-areas:
            "header header header header header header header header header header header header"
            "menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav"           
            ". . about about about about about about about about . ."
            ". . about_i about_i about_i about_i about_i about_i about_i about_i . ."
            "approach approach approach approach approach approach approach approach approach approach approach approach"
            ". . main main main main main main main main . ."
            ". . team team team team team team team team . ."
            "banner banner banner banner banner banner banner banner banner banner banner banner"
            "footer footer footer footer footer footer footer footer footer footer footer footer"
            "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright";
    }
}
/*Desktop-------------------------------------*/
@media only screen and (min-width: 1011px) 
{
/*Grid - home*/
    .grid-container{
        display: grid;
        grid-template-columns: repeat(12, 8.33%);
        grid-template-areas:
            "header header header header header header header header header header header header"
            ". menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav menu_nav ."
            "banner banner banner banner banner banner banner banner banner banner banner banner"
            ". about about about about about . about_i about_i about_i about_i ."
            "approach approach approach approach approach approach approach approach approach approach approach approach"
            ". main main main main main main main main main main ."
            ". team team team team team team team team team team ."
            "footer footer footer footer footer footer footer footer footer footer footer footer"
            "copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright copyright";
    }
}
/*-------------------------------------------------------------*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #222222; /* Fallback color */
    background-color: rgba(34,34,34,0.4); /* Black w/ opacity */
    -webkit-animation-name: fadeIn; /* Fade in the background */
    -webkit-animation-duration: 0.4s;
    animation-name: fadeIn;
    animation-duration: 0.4s
  }  
  /* Modal Content */
.modal-content {
    position: fixed;
    bottom: 0;
    background-color: #fefefe;
    width: 100%;
    -webkit-animation-name: slideIn;
    -webkit-animation-duration: 0.4s;
    animation-name: slideIn;
    animation-duration: 0.4s
}
.modal-header{
    font-size: 1.5em;
    background-color: #222222;
    padding: 0.5em;
} 
.modal_title{
    display: block;
    text-align: center;
}
  /* The Close Button */
.close {
    color: white;
    float: right;
    margin-top: -1.5em;;
}
.close:hover,.close:focus {
    color: rgb(125,125,125);
    cursor: pointer;
}
.modal-body {
    padding: 0.5em;
    color: #000;
    text-align: left;
}
#myBtn_1, #myBtn_2{
    margin-bottom: 0.2em;
    padding: 0.4em;
    font-size: inherit;
    font-family: inherit;   
    border-color: whitesmoke;
    border-radius: 10px;
}
#myBtn_1:hover,
#myBtn_2:hover {
  color: grey;
  text-decoration: none;
  cursor: pointer;
}
  /* Add Animation */
  @-webkit-keyframes slideIn {
    from {bottom: -300px; opacity: 0} 
    to {bottom: 0; opacity: 1}
  }
  @keyframes slideIn {
    from {bottom: -300px; opacity: 0}
    to {bottom: 0; opacity: 1}
  }
  @-webkit-keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
  }  
  @keyframes fadeIn {
    from {opacity: 0} 
    to {opacity: 1}
  }