footer {
   h2 {
      color: white;
      border-bottom: 1px solid gray;
      margin-bottom: 10px;
      padding-bottom: 10px;
      font-size: 21px;
      @media only screen and (max-width: 1024px) {
         font-size: 18.9px; /* 90% of 21px */
      }
      @media only screen and (max-width: 767px) {
         font-size: 16.8px; /* 80% of 21px */
      }
   }
   .wp-element-button {
      background-color: #fbd232;
      color: black !important;
      font-weight: bold;
      &:hover {
         background-color: #111111;
         color: white !important;
      }
   }
}
.wpb_text_column {
   a {
      text-decoration: underline;
   }
}
.wysiwyg {
   display: flex;
   flex-direction: column;
   gap: 14px;
   align-items: start;
   a {
      text-decoration: underline;
   }
   p {
      margin-bottom: 0;
   }
   &.large {
      p,
      li {
         font-size: 21px;
         @media only screen and (max-width: 1024px) {
            font-size: 18.9px; /* 90% of 21px */
         }
         @media only screen and (max-width: 767px) {
            font-size: 16.8px; /* 80% of 21px */
         }
      }
   }
   &.small {
      p,
      li {
         font-size: 16px;
         @media only screen and (max-width: 1024px) {
            font-size: 14.4px; /* 90% of 16px */
         }
         @media only screen and (max-width: 767px) {
            font-size: 12.8px; /* 80% of 16px */
         }
      }
   }
}

.deft-button {
   background-color: #fbd232;
   color: black !important;
   font-weight: bold;
   border-radius: 1000px;
   min-width: 100px;
   text-align: center;
   padding: 13px 25px;
   text-decoration: none !important;
   font-size: 17px;
   @media only screen and (max-width: 1024px) {
      font-size: 16.2px; /* 90% of 18px */
   }
   @media only screen and (max-width: 767px) {
      font-size: 14.4px; /* 80% of 18px */
   }
   &:hover {
      background-color: #111111;
      color: white !important;
   }
}
.bg-white {
   background-color: white;
}
.bg-light-gray {
   background-color: #f5f5f5;
}

section[class^="deft-"] {
   padding-top: 100px;
   padding-bottom: 100px;
   @media only screen and (max-width: 1024px) {
      padding-top: 70px;
      padding-bottom: 70px;
   }
   @media only screen and (max-width: 767px) {
      padding-top: 45px;
      padding-bottom: 45px;
   }
   h1 {
      font-size: 43px;
      @media only screen and (max-width: 1024px) {
         font-size: 38.7px; /* 90% of 43px */
      }
      @media only screen and (max-width: 767px) {
         font-size: 33.6px; /* 80% of 43px */
      }
   }
   h2 {
      font-size: 34px;
      @media only screen and (max-width: 1024px) {
         font-size: 30.6px; /* 90% of 34px */
      }
      @media only screen and (max-width: 767px) {
         font-size: 27.2px; /* 80% of 34px */
      }
   }
   h3 {
      font-size: 26px;
      @media only screen and (max-width: 1024px) {
         font-size: 23.4px; /* 90% of 26px */
      }
      @media only screen and (max-width: 767px) {
         font-size: 20.8px; /* 80% of 26px */
      }
   }
   p {
      font-size: 18px;
      @media only screen and (max-width: 1024px) {
         font-size: 16.2px; /* 90% of 18px */
      }
      @media only screen and (max-width: 767px) {
         font-size: 14.4px; /* 80% of 18px */
      }
   }
}

.deft-section-intro {
   display: flex;
   gap: 20px;
   align-items: center;
   justify-content: space-between;
   .hold-content {
      max-width: 800px;
      display: flex;
      gap: 10px;
      flex-direction: column;
   }
   .hold-button {
      min-width: fit-content;
   }
   @media only screen and (max-width: 1024px) {
   }
   @media only screen and (max-width: 767px) {
      flex-direction: column;
      align-items: start;
   }
}
.scheme-dark {
   h1,
   h2,
   h3,
   h4,
   h5,
   h6,
   .wysiwyg,
   a {
      color: white;
   }
}
@media only screen and (min-width: 75rem) {
   .container,
   .renovation .esg-filters {
      max-width: 83.125rem;
   }
}
@media only screen and (max-width: 48rem) {
   .container {
      max-width: 95%;
   }
}
/* Tablet styles */
@media only screen and (max-width: 1024px) {
   footer h2 {
      font-size: 18.9px; /* 90% of 21px */
   }
}

/* Mobile styles */
@media only screen and (max-width: 767px) {
   footer h2 {
      font-size: 16.8px; /* 80% of 21px */
   }
}
body .site-footer a {
   color: white;
}
body .site-footer {
   background-size: cover;
}