body{
  background: #f1f1f1;
}

figure{
    display:block;
    width:120px;
    height:120px;
    border-radius: 120px;
      background-color: white;
      margin:auto;


/*    font-size: 25px;*/
    text-align: center;
/*    margin-right: 10px;
    
    line-height: 1.7em;*/
}

figure img{
   display:inline-block;
   width: 60%;
   height: auto;
   margin-top:6%;
   object-fit:contain; 
   margin-top:20px;

}

.white_cirle {
  height: 125px;
  width: 125px;
  background-color: white;
  border-radius: 50%;

}
.white_cirle > img {
    width: 50px;
    height:50px;
    object-fit:contain;    }  

/* .accreditation{
    display:inline;
}*/

/* table for request for information form on projects.html */
.table_form1 {
    color:black; 
    background-color: white;
    width:50%; 
    margin-top:0px;
    margin-left: auto; 
    margin-right: auto; 
    border-collapse: collapse;}                

#table_projects {
    border-collapse: collapse;
    margin-top:20px;
    margin-bottom:60px;
    width:60%;
    margin-left:20%;
    text-align:left;}

.td_first{
    color:gray;
    border-top:solid 3px black;    
    border-left:none;
    border-right:none;
    border-bottom:solid 3px black;    
    
}
.td_second{
    color:gray;
    border-left:none;
    border-right:none;
    border-bottom:none;    
    
}
.td_third{
    color:gray;
    border-left:none;
    border-right:none;
    border-bottom:solid 3px black;    
}


.table_projet_details td {
    border-style:solid;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom:thick double black;
}




body {
/*    font-size: calc (16px + .20vw);*/
    font-size:20px;
    font-family:"Helvetica Neue", Arial, sans-serif;
    background-color:white;
}
    
    
/* Company header and navigation menu bar */
/************************************************************************/

.company_name_on_menu{          /* company name on the menu bar*/
    font-size:28px;
    color:#3790AE; 
    padding-top:5px; 
    padding-left:8px; 
    padding-bottom:0; 
    margin:0; 
    text-align:left; }
    
.company_name2_on_menu{          /* 2nd line of company name on the menu bar*/
    font-size:17px;
    color:gray; 
    padding-left:8px; 
    padding-bottom:0; 
    background-color:white; 
    margin:0;
    text-align:left;
}    

#menu_logo {                    /* logo on the menu bar*/
    display: block;
    float: left;
    padding-left: 0px;}

#menu_logo img {
    height:65px; 
    width:65px;}
    
#menu_nav {                     /* the menu bar*/
    width: 95%;
    margin-left: 2.5%;
    margin-top: 15px;
    margin-bottom: 15px;  
    background: white;   
    position: sticky !important;
    top: 30px;
    padding-top: 2px; 
    padding-bottom:2px;           /* top bottom right left */
    text-align: center;
    overflow: hidden;}
    
#menu_company {
    float: left;
    margin-bottom:10px;
}
    
#menu_items {                   /* HORIZONTAL MENU ITEMS */ 
    /*display: inline; */
    margin-top:20px ;           /* vertically align the menu options to the middle */
    float:right;                /* right aling menu options container */
    width:40%;
    text-align:right;}          /* right align menu options */ 
    
#menu_items a {
    padding: 1%;                /* scales proportionally - on ALL sides (instead of fixed size) */
    color: gray;                /* text that appears as menu options e.g. HOME */
    /*float: right;*/           /* Float will put menu items in the wrong order, first one becomes last*/
    text-decoration: none;
    font-size:20px;
    text-align: center;}
    
#menu_items a:hover { 
    background: #3790AE; 
    color: white;
    text-align: center;}
    
#menu_nav label, #hamburger {       /* (C) HIDE HAMBURGER */ 
    display: none; }
    

.homepage_photo {                  /* homepage photo */
    margin-left:2.5%;
    text-align:center;
    margin-top:70px;
    margin-bottom:30px;
    width:100%;
}
    
.homepage_photo > img {
    width:70%;
    height:auto;}       
    
.page_heading1 {
    font-size:40px;
    color:#3790AE;
    text-align:center;
    font-weight:bold;}     

.page_heading2 {
/*    color:gray;
    font-weight:bold;
    text-align:center; 
    font-size:26px;
    margin-top:30px;
    margin-bottom:0px*/


    color:gray;
    text-align:center; 
    font-size:26px;
    margin-top:10px;
    margin-bottom:0px}      
    
.page_heading3 {
    font-size:30px;
    color:#3790AE;
    text-align:center;
    }    
     

/***************************************************************** 
About the company
******************************************************************/
.about_paragraph_heading {
    width: 100%;
    font-size:30px;
    color:#3790AE;
    text-align:left;
    font-style:italic;
   /* margin-top:20px;*/
}    

.about_desc {
    width: 100%;
    color: gray;
    margin-top: 20px;
    padding-top:0px;
    line-height:1.5;}   
    
.grid_parent_about {
    width:95%;
    margin-left:2.5%;
    margin-top:20px;
    margin-bottom:20px;
    display: grid;
    color: black;
    grid-gap: 2rem;
   /* grid-gap: 2rem;*/
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    /*padding:0;
    margin:0;*/    
   /* background-color: white;
        border:solid green;*/}
    
.grid_child_about {
    width:100%;
    background-color: white;
    color: black;
    color:white;
    border-radius: .66rem;
    display: grid;
    text-align:left;}
    
.grid_parent_mission_vison {
    display: grid;
    grid-gap: 2rem;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    padding: 2rem;
    margin-top: 10px;
    margin-bottom: 60px;
    text-align:left;
    background-color: #3e97b2;}
    
.grid_child_mission_vision {
    background-color: white;
    color:white;
    border-radius: .66rem;
    display: grid;
    justify-content: center;
    margin-bottom:30px;
} 
    

/*****  Services ******/
/**********************/
.services_heading{
    width:100%;
    color:white;
    font-size:32px;
    background-color:#3e97b2;
    text-align:center;
    padding-top:50px;
    padding-bottom:50px;
    margin:0;}

.services_desc {
    color: white;
    margin-top: 10px;
    padding-top:0px;}

.grid_parent_services {
    width:100%;
    margin-bottom:20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-flow: row;
    text-align:center;
    background-color: #3e97b2;}
    
.grid_child_services {
    background-color: #3e97b2;
    color:white;
    padding: 30px;   
    text-align:center;}
    
.grid_child_services > img {
    width: 200px;
    height:120px;
    object-fit:contain;    }         
        
               
/***********
About CEO
**************/

.grid_parent_ceo {
    width:100%;
    display: grid;
    grid-template-columns: 62% 38%;
    grid-auto-flow: row;
    text-align:center;
    background-color: #3e97b2;}
    
.grid_child_ceo {
    width:90%;
    margin-left:5%;
    margin-right:5%;
    background-color: #3e97b2;
    padding:20px;
    padding-top:30px;
    color:white;
    display: grid;
    }
    
.grid_child_ceo > img {
    width: 100%;
    height:auto;
}    
    
.ceo {
    width: 100%;
    color: white;
    margin-top: 10px;
    padding-top:0px;
    text-align:left;}    


.social_media_line{
    width:20%; 
    height:3px;
    border-width:0;
    color:#3790AE;
    background-color:#3790AE;
    margin:auto; 
    margin-bottom:20px;}

.full_line{    
    width:95%; 
    height:2px;
    border-width:0;
    color:#3790AE;
    background-color:#3790AE; 
    margin-top:30px; 
    margin-bottom:10px; 
    margin-left:2.5%;}
    
.copyright{
    text-align:center;  
    margin-left: 5%; 
    margin-right: 5%; 
    margin-top: 20px; 
    margin-bottom: 
    20px; 
    font-size: 10px;}    
   
    
    
/***********
Projects
**************/

.projects_desc {
    color: gray;
    margin-top: 10px;
    padding-top:0px;}

.grid_parent_projects {
    width:95%;
    margin-left:2.5%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    text-align:center;
    background-color: white;}
    
.grid_child_projects {
    background-color: white;
    color:white;
    padding: 10px;   
    text-align:center;}

.grid_child_projects > a > img {
    width: 300px;
    height:250px;
    border:solid gray;
    object-fit:cover; }     



 

.grid_parent_aboutproject {
    width:100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    text-align:center;
    background-color: white;
    margin-bottom:30px;
}
    
.grid_child_aboutproject {
    background-color: white;
    color:white;
    padding: 30px;   
    text-align:center;
    justify-content: center;}

.grid_child_aboutproject > img {
    width: 300px;
    height:250px;
    border:solid gray;
    object-fit:cover;    }   


/***********
Endorsements
**************/    
.grid_parent_endorsements {
    width:100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    text-align:center;
    background-color: white;}
    
.grid_child_endorsements {
    background-color: white;
    color:white;
    padding: 30px;   
    text-align:center;
    justify-content: center;}

.grid_child_endorsements > a > img {
    width: 300px;
    height:250px;
    border:solid gray;
    object-fit:cover;    } 


/***********
Contact information
**************/
.img_map {
    width:100%;
    height:auto;
}

.contact_info{
    text-align:center; 
    width:95%; 
    margin-left:2.5%;
    line-height:2;
}


/***********
blogs
*******************/

.blog_title{
    color:#3790AE;
}

.grid_parent_blogs {
    width:100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-flow: row;
    text-align:center;
    margin-top:50px;
    margin-bottom:100px;
}
    
.grid_child_blogs {
    background-color: white;
    color:gray;
   
    text-align:center;
    margin-bottom:30px;
}

.grid_child_blogs > a > img {
    width: 300px;
    height:250px;
    border:solid gray;

    object-fit:cover;
    margin-bottom:30px;

} 
    
/***************************************************/
/* for small screens */
/***************************************************/
    
@media only screen and (max-width: 1024px) {
    
    body {
        font-size:16px;}    
 
    .company_name_on_menu{
        font-size:22px;
        padding-top:.5px; }

    /*responsive menu bar*/
    #menu_nav {
        text-align: left;
        background: white;}
    #menu_logo img {
        height:45px; 
        width:45px;}
    #menu_items { 
        width: 100%;                    /*display menu options across the page*/
        display: none; }                /* (C) TOGGLE SHOW/HIDE MENU */
    #menu_items a {                     /* (A) BREAK INTO VERTICAL MENU */
        box-sizing: border-box;
        display: block;
        font-size: 16px;                /*size of menu option*/
        padding-top: 12px;
        padding-bottom: 12px;
        background:#3790AE;
        padding-left: 5px;
        padding-right: 5px;
        color:white;}
    #menu_items a:hover { 
        background: #D0D0D0; 
        color: #383838;}    
    #menu_nav label {                   /* (B) SHOW HAMBURGER ICON */
        display: block;
        color: black;
        background: white;   
        font-style: normal;
        font-size: 22px;                /* the 3 bars*/
        padding-right: 10px;
        float: right;}
    #menu_nav input:checked ~ #menu_items { 
        display: block;}      
        
        
    .page_heading3 {
        font-size:20px;}    
        
    .page_heading2 {
        font-size:16px;}        
          
     /*about the company, mission, vision*/     
    .about_paragraph_heading {
        font-size:24px;}
    .about_paragraph_heading {
        text-align:center;}   
    .grid_parent_about {
        grid-template-columns: 1fr;
        /*font-size:15px;*/
        width:80%;
        margin-left:10%;
        margin-right:10%;}        
    .grid_child_about {
        text-align:center;
        /*font-size:18px;*/}
        
    /* services offered*/    
    .services_heading{
        width:95%;
        margin-left:2.5%;
        font-size:20px;
        padding-top:40px;
        padding-bottom:20px;}    
    .grid_parent_services {
        width:95%;
        margin-left:2.5%;
        grid-template-columns: 1fr;
        padding-bottom:20px;}
    .grid_child_services {
        padding-top:30px;
        padding-bottom:20px;}
    .grid_child_services > img {
        width: 225px;
        height:175px;}  


    .ceo {
        text-align:center;}        

    .grid_parent_ceo {
        width:95%;
        margin-left:2.5%;
        grid-template-columns: 1fr;}  
        



    .grid_parent_projects {
        grid-template-columns: 1fr;}   
    .grid_child_projects {
        padding: 10px;}     
    .grid_child_projects > a > img {
        width: 225px;
        height:175px;} 

    .grid_child_aboutproject {
        padding: 10px;}           
    .grid_child_aboutproject > img {
        width: 225px;
        height:175px;}  
         
    .grid_child_endorsements > a > img {
        width: 225px;
        height:175px; }
    .grid_child_endorsements {
        padding: 10px;} 

    .grid_parent_blogs {
        grid-template-columns: 1fr;}     
        
    .img_map {
        width:95%;
        margin-left:2.5%}     

    .social_media_line{
        width:40%;}
        
    #table_projects {
        width:100%;
        margin-left:0;}
    
    .table_form1 {
        width:98%;
        margin-left:1%}    
    
    .accreditation{
        display:block;}
    
        
    
}  /* for small screens */