/* Extra small devices (phones, 600px and down) */

@media only screen and (max-width: 768px) {
  /* Home */
  #home {
    padding: 30px 30px 0 30px;
  }

  nav {
    width: 100%;
  }

  header {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
  }

  #logo {
    height: 30px;
    margin-bottom: 30px;
  }

  header ul {
    flex-direction: column;
    gap: 30px;
    width: 100%;
  }

  header ul li {
    width: 100%;
    font-size: 12px;
    height: 12px;
    display: flex;
  }

  header ul li a {
    display: flex;
    gap: 5px;
  }

  #homeContent {
    margin-top: 30px;
    margin-bottom: 30px;
    gap: 15px;
  }

  .title {
    font-size: 45px;
    line-height: 1.25em;
    margin-bottom: 30px;
  }

  .subtitle {
    font-size: 24px;
    margin-bottom: 30px;
  }

  .summary {
    font-size: 18px;
    line-height: 1.5em;
    margin-bottom: 30px;
    max-width: 400px;
  }

  .button {
    height: 30px;
    font-size: 12px;
    border-radius: 15px;
  }

  #homeText .button {
    max-width: 300px;
  }

  #homeWave {
    display: none;
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: 0 0;
    margin-bottom: 100px;
    margin-right: -30px;
  }

  .down {
    padding: 15px;
  }

  .down img {
    width: 15px;
  }

  /* Services */
  #services {
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
  }

  .service,
  .service-reverse {
    width: 100%;
    gap: 15px;
    border-radius: 0 0 30px 0;
    padding: 30px;
  }

  #services h1 {
    font-size: 24px;
  }

  #services p {
    font-size: 14px;
    line-height: 1.55em;
  }

  #services p.download {
    display: flex;
    width: 100%;
    gap: 0.5em;
    align-items: flex-end;
    height: 100%;
    align-self: flex-end;
  }

  #services p.download a {
    display: inline;
    color: #000000;
    z-index: 100;
  }

  #services p.download img {
    height: 1.5em;
    vertical-align: bottom;
  }

  /* Break */
  #break {
    height: 200px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    display: flex;
  }

  #breakText h1 {
    font-size: 18px;
    text-transform: initial;
  }

  #breakText {
    margin: 15px;
  }

  #break img {
    width: 30.2vw;
    height: 300px;
    margin: -50px 15px -50px -60px;
  }

  /* Sectors */
  #sectors {
    flex-direction: column;
  }

  .sectorText {
    font-size: 16px;
    padding: 45px 0 45px 0;
  }

  .sectorText h1 {
    font-size: 24px;
  }

  /* Solutions */
  #solutions {
    padding: 45px;
    gap: 15px;
  }

  #solutions ul {
    gap: 15px;
    width: 250px;
  }

  #solutions ul li {
    font-size: 14px;
    line-height: 1.5em;
    gap: 15px;
  }

  #solutions ul li img {
    height: 18px;
  }

  #solutionsImage {
    display: none;
  }

  /* Comparison */
  #comparison {
    gap: 15px;
    padding: 30px;
  }

  #comparisonText {
    width: 100vw;
  }

  #comparisonText p {
    font-size: 14px;
    line-height: 1.5em;
    margin-top: 15px;
  }

  #comparisonText h1 {
    font-size: 28px;
  }

  #comparisonText h2 {
    font-size: 24px;
    line-height: 1.75em;
    margin-top: 15px;
  }

  #comparisonImg {
    display: none;
  }

  /* Engineering */
  #eng {
    padding: 30px;
  }

  #engText {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }

  #engText h1 {
    font-size: 24px;
  }

  #engText ul {
    margin: 15px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  #engText p {
    text-align: left;
  }

  #engText p,
  #engText ul li {
    font-size: 14px;
    line-height: 1.5em;
  }

  #engImg {
    display: none;
  }

  #eng .button {
    float: right;
    margin-top: 15px;
    max-width: 300px;
    padding: 15px;
    align-self: flex-end;
  }

  /* About Us */
  #aboutContent {
    gap: 15px;
    padding: 30px;
    flex-direction: column;
  }

  #aboutText {
    gap: 15px;
  }

  #aboutText p {
    font-size: 14px;
    line-height: 1.5em;
    text-align: left;
  }

  #aboutText h1 {
    font-size: 24px;
  }

  #aboutText h2 {
    font-size: 18px;
    line-height: 1.25em;
    margin-bottom: 15px;
  }

  #aboutWave {
    display: none;
  }

  #aboutLogo {
    height: 30px;
    margin-top: 15px;
  }

  /* Contact */
  #contact {
    flex-direction: column;
    padding: 30px;
  }

  #contactWave {
    display: none;
  }

  #contactText {
    gap: 15px;
  }

  #contactText h1 {
    font-size: 28px;
    font-weight: 800;
  }

  #contactText p {
    font-size: 14px;
    line-height: 1.5em;
  }

  #contactForm {
    margin-top: 30px;
  }

  label {
    font-size: 14px;
    height: 14px;
    margin-bottom: 15px;
  }

  label[for="gdpr"] {
    height: auto;
    margin-bottom: 1rem;
  }

  input,
  textarea {
    font-size: 14px;
    padding: 5px;
  }

  input {
    height: 30px;
    width: 100%;
    margin-bottom: 15px;
  }

  input#gdpr {
    width: auto;
    height: auto;
    margin-bottom: auto;
  }

  input.button {
    width: 120px;
    margin: 0;
  }

  textarea {
    height: 120px;
    width: 100%;
    margin-bottom: 30px;
  }

  /* Partners */

  #partners {
    padding: 45px;
    gap: 30px;
  }

  #partners h1 {
    font-size: 24px;
  }

  #partners div.wrapper img {
    max-width: 20vw;
    max-height: 12vw;
    min-height: auto;
    min-width: auto;
  }

  /* References */

  #references {
    padding: 45px;
    gap: 30px;
  }

  #references h1 {
    font-size: 24px;
  }

  #references div.wrapper img {
    max-width: 20vw;
    max-height: 12vw;
    min-height: auto;
    min-width: auto;
  }

  /* Links */
  #links {
    background: url("../img/solar-power-power-station.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 30px;
    gap: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .link {
    width: 100%;
    gap: 15px;
    border-radius: 0 0 60px 0;
    padding: 30px;
    font-size: 14px;
  }

  .link h1 {
    margin-bottom: 15px;
    font-size: 24px;
  }

  .link p br {
    line-height: 30px;
  }

  .link a {
    color: #ffffff;
  }

  #linksLogo {
    margin: 15px 0 15px 0;
    height: auto;
    width: 120px;
  }

  footer {
    height: 90px;
    font-size: 14px;
    flex-direction: column-reverse;
    gap: 5px;
  }

  #footerSeparator {
    display: none;
  }
}

/* Medium devices (landscape tablets, 768px and up) */

@media screen and (min-width: 768px) {
  /* Home */
  #home {
    padding-top: 3.125vw;
  }

  header {
    height: 3.125vw;
    margin-left: calc(3.125vw + 6.38vw + 1.5625vw);
  }

  #logo {
    width: calc(3 * (6.38vw + 1.5625vw));
  }

  header ul {
    flex-direction: row;
  }

  header ul li {
    width: calc(2 * (6.38vw + 1.5625vw));
    font-size: 0.9375vw;
    height: 0.9375vw;
  }

  header ul li a {
    gap: 0.5vw;
  }

  #homeContent {
    margin-top: 6.25vw;
  }

  #homeText {
    margin-left: calc(3.125vw + 6.38vw + 1.5625vw);
  }

  .title {
    font-size: 6.458vw;
    line-height: 8vw;
    margin-bottom: 1.5625vw;
  }

  .subtitle {
    font-size: 1.5625vw;
    margin-bottom: 0.52vw;
  }

  .summary {
    margin-bottom: 3.125vw;
    font-size: 1.5625vw;
    width: 44vw;
    line-height: 1.15em;
  }

  .button {
    height: 3.125vw;
    font-size: 1.25vw;
    border-radius: 1.5625vw;
  }

  #homeText .button {
    width: calc(2 * 12.38vw + 1.5625vw);
  }

  #homeWave {
    width: calc(4 * (6.38vw + 1.5625vw) + 3.125vw);
    height: calc(19 * 1.5625vw);
    object-fit: cover;
    object-position: 0 0;
    margin-bottom: 1.5625vw;
  }

  .down {
    padding: calc(2 * 1.5625vw);
  }

  .down img {
    width: 1.5625vw;
  }

  /* Services */
  #services {
    padding: 6.25vw 3.125vw 6.25vw 3.125vw;
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1.5625vw;
  }

  .service {
    gap: 1.5625vw;
  }

  .service,
  .service-reverse {
    width: calc(4 * 6.38vw + 3 * 1.5625vw);
    border-radius: 0 0 7.8125vw 0;
    padding: 3.125vw;
  }

  .service-reverse {
    gap: 0;
  }

  #services h1 {
    font-size: 2.1875vw;
  }

  #services p {
    font-size: 1.04vw;
    line-height: 1.354vw;
  }

  #services p.download {
    display: flex;
    width: 100%;
    gap: 0.5vw;
    align-items: flex-end;
    height: 100%;
    align-self: flex-end;
  }

  #services p.download a {
    display: inline;
    color: #000000;
    z-index: 100;
  }

  #services p.download img {
    height: 1.25em;
    vertical-align: bottom;
  }

  /* Break */
  #break {
    height: calc(19 * 1.5625vw);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    display: flex;
  }

  #breakText {
    margin: 7vw;
  }

  #breakText h1 {
    font-size: 2.1875vw;
    text-transform: initial;
  }

  #break img {
    width: 30.2vw;
    height: calc(34 * 1.5625vw);
    margin: -11.71875vw 0 -11.71875vw -9.11vw;
  }

  /* Sectors */
  #sectors {
    height: calc(14 * 1.5625vw);
    flex-direction: row;
  }

  .sectorText {
    font-size: 1.5625vw;
  }

  .sectorText h1 {
    font-size: 3.23vw;
  }

  /* Solutions */
  #solutions {
    padding: 6.25vw 0 6.25vw 0;
  }

  #solutionsList {
    width: 35.4vw;
  }

  #solutions ul {
    gap: 3.125vw;
  }

  #solutions ul li {
    width: 28.125vw;
    font-size: 1.5625vw;
    gap: calc(0.75 * 1.5625vw);
  }

  #solutions ul li img {
    height: 1.5625vw;
  }

  #solutionsImage {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: calc(0.5 * (6.38vw + 1.5625vw));
    width: calc(3.5 * (6.38vw + 1.5625vw));
  }

  /* Comparison */
  #comparison {
    gap: calc(1.5625vw + 6.38vw);
  }

  #comparisonText {
    width: calc(5 * 6.38vw + 4 * 1.5625vw + 1vw);
    margin-left: calc(3.125vw + 6.38vw + 1.5625vw);
    margin-top: calc(5 * 1.5625vw);
    margin-bottom: calc(5 * 1.5625vw);
  }

  #comparisonText p {
    font-size: 0.8854vw;
    line-height: 1.5em;
    width: calc(5 * 6.38vw + 4 * 1.5625vw);
    margin-top: 1.5625vw;
  }

  #comparisonText h1 {
    font-size: 2.97vw;
  }

  #comparisonText h2 {
    font-size: 1.25rem;
    line-height: 1.75em;
    margin-top: 1.5625vw;
  }

  #comparisonImg {
    background-image: url("../img/aerial-view-private-house-with-solar-panels-roof.jpg");
    width: calc(5 * 1.5625vw + 5 * 6.38vw + 3.125vw);
    opacity: 0.15;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  /* Engineering */
  #eng {
    gap: calc(6.38vw + 1.5625vw);
  }

  #engText {
    width: calc(5 * (6.38vw + 1.5625vw));
    margin: 6.51vw 0 6.51vw 0;
  }

  #engText h1 {
    font-size: 3.2vw;
    margin-bottom: 1.5625vw;
  }

  #engText ul {
    margin: 1.04vw auto 1.04vw auto;
    list-style-type: none;
  }

  #engText p {
    font-size: 1.04vw;
    line-height: 1.5em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }

  #engText ul li {
    font-size: 1.04vw;
    line-height: 1.75em;
    margin-top: 0.15em;
    margin-bottom: 0.15em;
    margin-left: 0;
  }

  #engImg {
    width: 32.8125vw;
    height: 100%;
    margin-left: calc(3.125vw + 6.38vw + 1.5625vw);
  }

  #eng .button {
    float: right;
    margin-top: calc(2 * 1.5625vw);
    width: calc(2 * 12.38vw + 1.5625vw);
    font-size: 1.04vw;
  }

  /* About Us */
  #aboutContent {
    gap: calc(6.38vw + 2 * 1.5625vw);
    padding-bottom: 3.125vw;
  }

  #aboutText {
    gap: 1.5625vw;
    width: calc(6 * 6.38vw + 5 * 1.5625vw);
    margin-left: calc(3.125vw + 6.38vw + 1.5625vw);
    margin-top: calc(4 * 1.5625vw);
  }

  #aboutText p {
    font-size: 1.04vw;
    line-height: 1.458vw;
  }

  #aboutText h1 {
    font-size: 3.23vw;
  }

  #aboutText h2 {
    font-size: 1.5625vw;
    margin-bottom: 3.125vw;
  }

  #aboutWave {
    width: calc(4 * 6.38vw + 3 * 1.5625vw + 3.125vw);
    height: 30.2vw;
    object-fit: cover;
    object-position: 0 0;
    margin: -3.125vw 0 0 0;
  }

  #aboutLogo {
    height: 3.125vw;
    margin-right: calc(6.38vw + 3.125vw);
  }

  /* Partners */

  #partners {
    padding-left: calc(3.125vw + 6.38vw + 1.5625vw);
    padding-right: calc(3.125vw + 6.38vw + 1.5625vw);
    padding-top: 3.125vw;
    padding-bottom: 3.125vw;
    gap: calc(3.125vw + 1.5625vw);
  }

  #partners h1 {
    font-size: 3.23vw;
  }

  #partners div.wrapper img {
    max-width: 6vw;
    max-height: 4vw;
    min-height: auto;
    min-width: auto;
  }

  /* references */

  #references {
    padding-left: calc(3.125vw + 6.38vw + 1.5625vw);
    padding-right: calc(3.125vw + 6.38vw + 1.5625vw);
    padding-top: 3.125vw;
    padding-bottom: 3.125vw;
    gap: calc(3.125vw + 1.5625vw);
  }

  #references h1 {
    font-size: 3.23vw;
  }

  #references div.wrapper img {
    max-width: 6vw;
    max-height: 4vw;
    min-height: auto;
    min-width: auto;
  }

  /* Contact */
  #contact {
    flex-direction: row;
  }

  #contactWave {
    width: calc(3.125vw + 3 * 6.38vw + 3 * 1.5625vw);
    background-image: url("../img/planergy_wave_orange_right.svg");
    background-repeat: no-repeat;
    background-position: top -14.58vw right 5.729vw;
    background-size: 30.2vw 53.125vw;
  }

  #contactText {
    width: calc(4.25 * 6.38vw + 5 * 1.5625vw);
    gap: 1.5625vw;
    margin: calc(2 * 1.5625vw) 0 calc(4 * 1.5625vw) 0;
  }

  #contactText h1 {
    font-size: 3vw;
    width: calc(5 * 6.38vw + 1.5625vw);
  }

  #contactText p {
    width: calc(4 * 6.38vw + 3 * 1.5625vw);
    font-size: 1.1458vw;
    letter-spacing: 0.01em;
  }

  #contactForm {
    margin: calc(2 * 1.5625vw) 0 1.5625vw 0;
    width: calc(3.5 * 6.38vw + 4.5 * 1.5625vw);
  }

  label {
    font-size: 1.1458vw;
    height: 1.5625vw;
    margin-bottom: 0.26vw;
  }

  label[for="gdpr"] {
    height: auto;
    margin-bottom: auto;
  }

  input,
  textarea {
    font-size: calc(0.75 * 1.1458vw);
    padding: 0.25vw;
  }

  input {
    height: 2.5vw;
    width: 100%;
    margin-bottom: 1.5625vw;
  }

  input#gdpr {
    width: auto;
    height: auto;
    margin-bottom: 1rem;
  }

  input.button {
    width: calc(2 * 6.38vw + 1.5625vw);
  }

  textarea {
    height: 8.33vw;
    margin-bottom: 1.5625vw;
    width: 100%;
  }

  /* Links */
  #links {
    background: url("../img/solar-power-power-station.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    padding: 3.125vw calc(6.38vw + 3.125vw) 3.125vw calc(6.38vw + 3.125vw);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #ffffff;
  }

  .link {
    width: calc(3 * 6.38vw + 4 * 1.5625vw);
    gap: 1.5625vw;
    border-radius: 0 0 7.8125vw 0;
    padding: 3.125vw;
    font-size: 1vw;
  }

  .link h1 {
    margin-bottom: 1.5625vw;
    font-size: 1.875vw;
  }

  .link p br {
    line-height: 1.5625vw;
  }

  #linksLogo {
    height: 3.125vw;
    width: 11.354vw;
  }

  .link a {
    color: #ffffff;
  }

  footer {
    height: 6.51vw;
    font-size: 0.729vw;
  }
}

/* Extra large devices (large laptops and desktops, 1200px and up) */

@media only screen and (min-width: 1600px) {
  #home {
    min-height: 100vh;
  }
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #000;
  color: #fff;
  padding: 25px;
  text-align: center;
  display: none;
  /* Initially hide the banner */
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
}

.cookie-banner p {
  margin: 0;
}

.cookie-banner a {
  color: #f18623;
}