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

       BANNER

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

       .cta-banner {
        box-sizing: border-box;
        width: 100%;
        position: relative;
      
        & picture {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
        }
      
        & img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      
        &:before {
          content: "";
          position: absolute;
          height: 100%;
          width: 100%;
          background: var(--base-0);
          opacity: 0.1;
          top: 0;
          left: 0;
          z-index: 1;
        }
      }
      
      .cta-banner-container {
        display: flex;
        flex-direction: column;
        color: var(--base-950);
        align-items: center;
      
        & h2 {
          color: var(--base-950);
          font-size: clamp(2rem, 6vw, 3rem);
          z-index: 2;
          text-align: center;
          flex: 1;
        }
      }
      
      .hidden, .beekeeper {
        display: none;
      }
      
      .form-box {
        flex: 1;
        z-index: 2;
      }
      
      .quote-form {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        align-items: center;
        text-align: left;
        z-index: 2;
      
        & input,
        textarea {
          margin-bottom: 0.5rem;
          padding: 0.5rem;
          width: 100%;
          max-width: 21.75rem;
      
          &:focus {
            outline: 4px solid var(--brand);
          }
        }
      
        & textarea:focus {
          outline: 4px solid var(--brand);
        }
      
        & .form-submit-btn {
          margin-top: 0.5rem;
          justify-self: center;
          /* color: var(--base-0); */
          color: white;
          width: 100%;
          max-width: 23rem;
        }
      }
      
      .quote-form.sending {
      
        & .form-submit-btn {
          opacity: 0.6;
          pointer-events: none;
        }
      }
      
      .sent {
        position: relative;
      
        &:before {
          z-index: 3;
          content:'';
          position: absolute;
          height: 20%;
          width: 100%;
          max-width: 23rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: transparent;
          background-image: url('/svgs/msg-sent.svg');
          background-repeat: no-repeat;
          background-position: 50%;
          transform: translateY(100%);
          opacity: 0;
          top: 40%;
          left: 0;
          animation-name: sent-successful;
          animation-duration: 1.5s;
          animation-fill-mode: forwards;
        }
      }
      
      @keyframes sent-successful {
        0% {opacity:0;}
        25% {opacity:0.7; transform: translateY(-10%);}
        50% {opacity:1; transform: translateY(5%);}
        75% {opacity:1; transform: translateY(0%);}
        100% {display: none;}
      }
      
      .not-sent {
        position: relative;
      
        &:before {
          z-index: 3;
          content:'';
          position: absolute;
          height: 20%;
          width: 100%;
          max-width: 23rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: transparent;
          background-image: url('/svgs/error.svg');
          background-repeat: no-repeat;
          background-position: 50%;
          transform: translateY(100%);
          opacity: 0;
          top: 40%;
          left: 0;
          animation-name: not-sent;
          animation-duration: 1.5s;
          animation-fill-mode: forwards;
        }
      }
      
      @keyframes not-sent {
        0% {opacity:0;}
        25% {opacity:0.7; transform: translateY(-10%);}
        50% {opacity:1; transform: translateY(5%);}
        75% {opacity:1; transform: translateY(0%);}
        100% {display: none;}
      }
      
      
      @media only screen and (min-width: 930.1px) {
        .cta-banner-container {
          flex-direction: row;
        }
      
        .cta-banner-text {
          align-content: center;
          text-align: right;
        }
      
        .quote-form {
          align-items: baseline;
        }
      }
      
      
/* ----------------- *
 *        OFFER      *
 * ----------------- */

 #offer {

    box-sizing: border-box;
    width: 100%;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-color: var(--brand);
    /* color: var(--base-0); */
    color: white;
  
    & .container {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: clamp(1rem, 4vw, 2rem);
  
      & h2 {
        /* color: var(--base-0); */
        color: white;
        font-size: clamp(2rem, 6vw, 3rem);
        padding-bottom: 0.5rem;
      }
  
      & p {
        font-size: clamp(1rem, 0.886rem + 0.455vi, 1.25rem);
        text-align: center;
      }
    }
  
    & .offer-heading {
      display: flex;
      align-items: flex-end;
  
      & svg {
        height: 4em;
      }
    }
   }
  
   @media only screen and (min-width: 831.1px){
    & .offer-heading {
      & svg {
        height: 5rem;
      }
    }
   }