html, body{
margin: 0;
padding: 0;
height: 100%;
}

/* #project_section2_megasolar ul{
    list-style-type: circle;
    margin: 100;
    padding: 100;
    overflow: hidden;
    background-color: white;
    width: 100%;
}

#project_section2_megasolar li{
    float: inline-end;
} */


#project_section2_megasolar ul {
    list-style-type: circle;
    margin: auto; /* Center the list horizontally */
    padding: auto; /* Remove default padding for the list */
    background-color: white;
    width: 100%; /* Adjust the width of the list container */
    overflow: hidden;
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Arrange items vertically */
    align-items: center; /* Center align the items */
}

#project_section2_megasolar li {
    margin: 10px 0; /* Add vertical spacing between list items */
    list-style-type: disc; /* Ensure bullets are enabled */
    display: list-item; /* Restore default list item behavior */
    text-align: left; /* Ensure proper text alignment */
    width: 70%; /* Ensure consistent alignment */
}



ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #004492;
    width: 100%;
}

li{
    float: left;
}



li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}

li a:hover {
    background-color: #778fcf;
}

.nav_container {
    display: flex;
    background-color: #004492;
    position: sticky;
    top: 0;
    padding: 0;
    margin: 0;
    z-index: 1000; 
}

.nav_container > div {
    background-color: #004492;
    margin: 10px;
    padding: 10px;
    font-size: 30px;
}

.section1 {
    position: relative; 
    padding-top: 0px; 
}

.section1 h1 {
    color: white;
    margin: auto;
    width: fit-content;
    font-size: 5em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;

    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0; 
    padding: 10px,20px;
}


@keyframes zoomIn {
    from {
        transform: scale(2);
        font-size: 20em;
        margin-left: -25%;
        margin-top: -3%;
    }
    to {
        transform: scale(1);
        font-size: 5em;
        margin-left: -25%;
        margin-top: -3%;
    }
  }
  
  #section1_home >div > h1  {
    animation: zoomIn 4s    ease-out;
    
  }
  
    

#section2_home p{
    margin: 50px;
}

#section2_home h2{
    margin-left: 100px;
    margin-top: 50px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}


.section2 p{
    font-size: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    
}

#section3_home p{
    font-weight: bold;
    font-size: 1.5em;
    padding: 30px;
    width: 750px;
    margin: auto;
    text-align: center;

}

#section3_home div{
    background-color: rgb(241, 244, 250);
    margin: 0px;
}


#shibata_frame{
    display: flex;
    background-color: #f5f5f7;
    padding: 150px;
}

#shibata_frame > div {
    
    
    align-content: center;
    /* margin-left: 10%; */
    width: 50%;  
    background-color: #cacfcc;
    
}
#shibata_frame > div > img{
    width: 100%;
}

#shibata_frame > div > div > p {
    text-align: justify;
    margin-left: 120px;
    font-size: 150%;
}

#shibata_frame > div > div > h2 {
    text-align: justify;
    margin: 100px;
    font-size: 200%;
}

.social_media_logos_container{
    margin: 120px;
}

.social_media_logos_container > img{
    width: 100px;
    height: 100px;
}

.social_media_logos_container > a > img{
    width: 100px;
    height: 100px;
}

footer{
    background-color: aliceblue;
    text-align: center;
    padding: auto;
    color: black;
}

footer > p {
    text-align: center;
    margin: auto;
}

footer p:first-child{
    font-weight: bolder;
    font-size: 25px;

}

#section1_services > img {
    width: 100%;
    height: 900px;
    object-fit: cover;
    object-position: 100% 50%;
}

#section2_services{
    display: flex;
    background-color: #f5f5f7 ;

}

#section2_services > div {
    width: 50%;
}

#section2_services > div > img{
    width: 100%;
}

#section2_services > div > h1  {
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;

    margin-top: 100px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;
}

#section2_services > div > p  {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    

}

#section3_services{
    display: flex;
    background-color: #f5f5f7 ;
}

#section3_services > div {
    width: 50%;
}

#section3_services > div > img{
    width: 100%;
}

#section3_services > div > h1  {
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    
    margin-top: 100px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;

}

#section3_services > div > p  {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    

}


#section4_services{
    display: flex;
    background-color: #f5f5f7 ;

}

#section4_services > div {
    width: 50%;
}

#section4_services > div > video{
    width: 100%;
}

#section4_services > div > h1  {
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    
    margin-top: 100px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;

}

#section4_services > div > p  {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    

}


#section5_services{
    display: flex;
    background-color: #ffffff ;

}

#section5_services > div {
    width: 50%;
}

#section5_services > div > video{
    width: 100%;
}

#section5_services > div > h1  {
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;    
    margin-top: 100px;
    margin-bottom: 20px;
    margin-left: 100px;
    margin-right: 100px;

}

#section5_services > div > p  {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 150px;
    
}


#section5_services > div > h3  {
    font-size: 20px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
    
}

#section6_services {
    position: relative;
    text-align: center;
    color: white;
}

#section6_services >div >h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    
}

#section6_services >div >p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-bottom: 30px;
    padding-bottom: 0px;
    
}


#section6_services > div > div >p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    position: absolute;
    bottom: -15%;
    left: 50%;
    text-align: left;
    transform: translate(-50%, -50%);
    margin-bottom: 0px;
    margin-top: 20px;
    padding-top: -50px;

    }

#section1_aboutus > img{
    width: 100%;
    height: 350px;
    object-fit: cover;
    object-position: 100% 55%;

}


#section2_aboutus > div > h2 {
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    font-size: 2.5em;
    margin-bottom: 0px;
}

#section2_aboutus > div > p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    margin: auto;
    width: 1000px;
    text-align: left;
    line-height: 1.5em;
   

}

#section2_aboutus > div {
    margin: 200px;
    margin-top: 50px;
    margin-bottom: 50px;

}



/* About Us Table Styles */
#about_us_table {
    margin: 200px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#about_us_table h2 {
    background-color: #aed8f7;
    font-size: 60px;
}

#about_us_table table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#about_us_table table td, 
#about_us_table table th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

#about_us_table table tr:nth-child(odd) {
    background-color: #bff1c6;
}

/* EV Bus Table Styles */
#EV_Bus_table {
    margin: 50px;
    margin-top: 50px;
    margin-bottom: 50px;
}

#EV_Bus_table h2 {
    background-color: #aed8f7;
    font-size: 50px;
}

#EV_Bus_table table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

#EV_Bus_table table td, 
#EV_Bus_table table th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

#EV_Bus_table table tr:nth-child(odd) {
    background-color: #e6e9ee;
}


#section2_aboutus > div > img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: 100% 45%;
    

}


#section3_aboutus{
    display: flex;
    margin: 100px;
}

#section3_aboutus > img {
    margin: auto;
    width: 45%;
    height: 400px;
    object-fit: fill;
    object-position: 100% 45%;
    

}

#section1_careers{
    background-color: #f5f5f7;
}

#section1_careers > h1 {
    color: black;
    margin-top: -5%;

}

#section1_careers > img {
    margin-top: 15%;
    margin-bottom: 0%;
    margin-left: 20%;
    margin-right: 20%;

}

#section2_careers  {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}

#section2_careers > h3 {
    text-align: center;
    font-weight: bold;
    font-size: 1.5em;
}

#project_section1_EVBus > img{
    width: 100%;
    height: 500px;  
    object-fit: cover;
    object-position: 100% 50%;
}


#project_section1_carport > img{
    width: 100%;
    height: 600px;
    object-fit: cover;
    object-position: 100% 60%;


}

#project_section1_commercial > img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: 100% 50%;
}


#project_section1_megasolar > img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: 100% 50%;
}


#project_section1_garlic_power > img{
    width: 100%;
    height: 500px;
    object-fit: cover;
    object-position: 100% 50%;
}


.project_section2 {
    margin-left: 20%;
    margin-right: 20%;
}

.project_section2 > h3{
    font-size: 3em;
    margin-left: 50px;
    margin-right: 50px;
    
}

.project_section2 > h5{
    font-size: 1.7em;
    font-weight: lighter;
    margin-left: 50px;
    margin-right: 50px;
}

.project_section2 > p {
    margin-left: 50px;
    margin-right: 50px;
    margin-bottom: 50px;

}

.project_section3 {
    display: flex;
    margin: 20px;
    width: fit-content;
}

.project_section3 > img {
    width: 31%;
    height: auto;
    margin: 20px;
}

.project_section3a {
    display: flex;
    margin: 40px;
    width: fit-content;
}

.project_section3a > img {
    width: 42%;
    height: auto;
    margin: 100px;
    margin-top: 30px;
    margin-bottom: 30px;
    margin-right: 0px;
}

#section1_inquiry{
    margin-left: 20%;
    margin-right: 20%;
}

#section1_inquiry > h1 {
    color: black;
    position: absolute;
    top: 100px;    
    text-align: center;
  
    
}

#section2_inquiry > form{
    margin-left: 25%;
    margin-right: 25%;
    margin-top: 10%;
    margin-bottom: 10%;
    
}

#section2_inquiry > form >input, textarea{
    width: 100%;
    background-color: #e7edf4;
    color: rgb(2, 2, 2);
    font-weight: bolder;
    padding: 14px 20px;
    margin: 8px 0  ;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#section2_inquiry > form > input[type=submit] {
    width: 100%;
    background-color: #004492;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
  
#section2_inquiry > form > input[type=submit]:hover {
    background-color: #004492;
}


#section2_inquiry > form > input[type=reset] {
    width: 100%;
    background-color: #ee0505;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
  
#section2_inquiry > form > input[type=reset]:hover {
    background-color: #ee0505;
}

.project_menu_show{
    display: flex;
    padding: 20px;
    background-image: radial-gradient(circle, white, #004492);
}

.language_menu{
    display: flex;
    padding: 10px;
    background-image: radial-gradient(circle, white, #004492);
    text-align: left;
    float: left;
}

.language_menu >nav > ul > li{
    font-size: 15px;
}

.project_menu_show_child{
    background-color: rgba(113, 151, 191, 0.2);
    /* height: 500px;
    width: 100%; */
    margin-block-start: auto;
    margin: 80px;
}

.project_menu_show_child > div{
    background-color: rgba(212, 224, 236, 1);
    height: fit-content;
    margin-block-start: auto;
    
}

.project_menu_show_child > div > h3{
    font-weight: lighter;
    font-size: 1.5em;
    
}

.project_menu_show_child > div > h5{
    font-weight: lighter;
    font-size: 1.2em;
    
}



.project_menu_show > div > a > img {
    width: 500px;
    height: 50%;
    margin: 30px;
    }

.button {
    border: none;
    color: black;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: auto;
    cursor: pointer;
}

.button:hover {
    background-color: #004492;
    color: white;
}

.dropbtn {
    background-color: #004492;
    color: white;
    padding: 16px;
    font-size: 1.2em;
    font-weight: bolder;
    border: none;
    cursor: pointer;
    width: 250px;
    font-family: Arial, Helvetica, sans-serif;

  }
  
  .project_menu {
    position: relative;
    float: right;
    
  }
  
  .dropdown-content {
    display: none;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    background-color: #f9f9f9;
    width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
  }
  
  .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
  }
  
  .dropdown-content a:hover {background-color: #5374a9}
  
  .project_menu:hover .dropdown-content {
    display: block;
  }
  
  .project_menu:hover .dropbtn {
    background-color: #004492;
  }

  #homepage_map {
    width: 100%;
    height: 400px;
    padding-left: -50px;
    padding-right: -50px;
  }