@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');



/* <uniquifier>: Use a unique and descriptive class name

   <weight>: Use a value from 300 to 800



.open-sans-<uniquifier> {

  font-family: "Open Sans", sans-serif;

  font-optical-sizing: auto;

  font-weight: <weight>;

  font-style: normal;

  font-variation-settings:

    "wdth" 100;

}

*/



/* 1. Use a more-intuitive box-sizing model. */

*, 

*::before, *::after {

  box-sizing: border-box;

}



/*  2. Remove default margin */

* {

  margin: 0;

}

 

/*  Typographic tweaks!

  3. Add accessible line-height

  4. Improve text rendering

*/

html {
  scroll-behavior: smooth;
}

body {

  /* line-height: 1.5; */

  -webkit-font-smoothing: antialiased;

  font-family: "Open Sans", sans-serif;

}

/*

  5. Improve media defaults

*/

img, picture, video, canvas, svg {

  display: block;

  max-width: 100%;

}

/*

  6. Remove built-in form typography styles

*/

input, button, textarea, select {

  font: inherit;

}

/*

  7. Avoid text overflows

*/

p, h1, h2, h3, h4, h5, h6 {

  overflow-wrap: break-word;

}

/*

  8. Create a root stacking context

*/

#root, #__next {

  isolation: isolate;

}



.container {

    width: 60vw;

    margin-inline: auto;

  }



  /*****************

          Header

  *******************/

  #header {

      position: sticky;

      top: 0;

      border-bottom: 1px solid rgb(228, 225, 225);
      z-index: 10;

      /*glassmorphism*/

      background: rgba( 255, 255, 255, 0.25 );       

      backdrop-filter: blur( 4px );

      -webkit-backdrop-filter: blur( 4px );

  }

  

  header .container {

      /* background-color: pink; */

      display: flex;

      justify-content: space-between;      

      padding: 10px 0 10px 0;

      /*glassmorphism*/

      /* background: rgba( 255, 255, 255, 0.25 );       

      backdrop-filter: blur( 4px );

      -webkit-backdrop-filter: blur( 4px ); */

  }



  .logo {

      height: 80px;

  }



  .logo img {

      height: 100%;

  }



  header .container menu {

      /* background-color: rgb(140, 231, 155); */

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      gap: 15px;

  }



  header .container menu li {

      list-style: none;

      /* border-right: 1px solid gray;

      border-left: 1px solid gray;

      padding: 0 5px 0 5px; */

  }



  header .container menu li a {

      text-transform: uppercase;

      text-decoration: none;

      color: black;

      /* border: 1px solid greenyellow; */

  }





  /*****************

      Main content

  *******************/

  h1 {

      margin: 70px 0 20px 0;

      text-align: center;

      font-size: 25px;

  }



  h2, h3 {

    text-align: center;

    margin-block: 30px;

  }



  .green-line {

    color: rgb(3, 115, 3);

    text-decoration: underline;

  }



.img-left {

  float: left;

  margin-right: 15px;

  padding-top: 8px;

  }



.img-right {

    float: right;

    margin-left: 15px;

    padding-top: 8px;

}



p {

    text-align: justify;

}



/* Constructions */



.constructions-wrap {

  display: flex;

  justify-content: space-between;

  margin: 25px 0;  

  align-items: center;

}



.constructions-wrap .content {

  width: 30%;

  text-align: center;

}



/* Custom made */



.custom-wrap {

  display: flex;

  flex-wrap: wrap;

  row-gap: 1em;

  justify-content: space-evenly;

  margin: 25px 0;  

  align-items: center;

}



.custom-wrap .content {

  width: 30%;

  text-align: center;

}







#custom ul li {

  list-style: circle;

}



/* Solar */



.charging-wrap {

  display: flex;

  gap: 15px;

  padding-bottom: 10px;

  /* border-bottom: 1px solid rgb(204, 201, 201); */

}



.charging-wrap>img {

  width: 20vw;

  align-self: center;

}



.img-center {

  margin-inline: auto;

}



/* gallery section */



.gallery {

  display: flex;

  flex-wrap: wrap;

  gap: 4px;

  justify-content: center;

}



.gallery img {

  width: 18vw;

  border-radius: 10px;

  transition: transform .3s;

  opacity: .65;

}



.gallery img:hover {

  transform: scale(2.3);

  border: 2px solid rgba(255, 68, 0, 0.666);

  outline: 1px solid #fff;

  outline-offset: -2px;

  opacity: 1;

  z-index: 1;

}



  #standards a {

      color: #000;

  }

#constructions,
#custom,
#techpark,
#standards {
  scroll-margin-top: 100px;
}

  /*****************

          Hero

  *******************/



  /* .hero {

      background-image: url(./media/hero.webp);

      background-repeat: no-repeat;

      background-size: 100% ;

      background-position: center center;

      background-attachment: fixed;

      background-color: rgba(0,49,70,1);

      height: 80vh;

  } */



  /*****************

          Footer

  *******************/



  footer {

      border-top: 1px solid gray;

      padding: 30px 0 30px 0;

  }

  

  footer p,

  footer a {

      color: #000;

      text-align: center;

      font-size: small;



  }



  @media screen and (max-width: 1130px) {

    .solar .img-left {

      float: none;

      margin-inline: auto;

    }

  }



  @media screen and (max-width: 750px) {

    #header {

      position: static;

    }



    .container {

        width: 90vw;

    }



    .logo {

        width: 100%;

        /* border: 1px solid black; */

    }

        

    .img-left,

    .img-right {

        width: 35vw;

      }



    .constructions-wrap {

      flex-direction: column;

      gap: 20px;

    }



    .constructions-wrap .content {

      width: 70%;

      text-align: center;

    }



    .custom-wrap {

      flex-direction: column;

      gap: 20px;

    }



    .custom-wrap .content {

      width: 70%;

      text-align: center;

    }



    .gallery img {

      width:40vw;

      opacity: 1;

    }

    

    .gallery img:hover {

      transform: none;

      border: none;

      outline: none;

    }



    .charging-wrap>img {

      display: none;

    }

  }



  @media screen and (max-width: 850px) and (orientation: landscape) {

    #header {

      position: static;

    }

  }