/* ====== CONTAINER ====== */
    /* Overall widget width set to 80% as requested */
    .ccus-hero {
        width: 60%;
        max-width: 1200px;
        margin: 40px auto;
        color: #002d54;
    }

    /* ====== HEADINGS & TEXT SIZES ====== */
    /* Small header: 3.5rem, weight 300 */

    .cleanEnergy-breadcrumbs-list {
        list-style: none;
        display: flex;
        max-width: 1200px;
        gap: 10px;
        max-width: 1180px;
        margin: 20px auto;
    }

    .cleanEnergy-breadcrumbs-link {
        color: #00305c;
    }

    .cleanEnergy-breadcrumbs-separator {
        color: #888;
    }

    #cleanEnergy-breadcrumbs-current {
        color: #0077CC;

    }

    .cleanEnergy-breadcrumbs {
        max-width: 1000px;
    }

    .ccus-label {
        font-size: 2.6rem;
        font-weight: 300;
        /* (not px) valid CSS */
        margin: 0 0 14px;
    }

    /* Main headline: 6rem, weight 300 */
    .ccus-title {
        font-size: 3.6rem;
        font-weight: 300;
        line-height: 1.5;
        margin: 0 0 24px;
    }

    /* Paragraphs: 2rem */
    .ccus-hero p {
        font-size: 1.8rem;
        line-height: 1.45;
        margin-top: 30px;
    }

    /* ====== LAYOUT ====== */
    .ccus-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        /* left text slightly wider */
        gap: 32px;
        align-items: start;
    }

    /* Right card */
    .ccus-card {
        background: #eef0ef;
        /* light gray like screenshot */
        padding: 28px;
    }

    /* Card title: 3.5rem (as requested) */
    .ccus-card__title {
        font-size: 2.3rem;
        font-weight: 200;
        /* matches visual emphasis in screenshot */
        margin: 0 0 12px;
    }

    .ccus-btn {
        display: inline-block;
        margin-top: 18px;
        background: #007bc0;
        color: #fff;
        text-decoration: none;
        padding: 12px 22px;
        font-size: 1.8rem;
        /* requested size */
        font-weight: 600;
    }

    .ccus-btn:hover {
        background: #002d54;
        color: white;
        cursor: pointer;
    }

    /* Optional: card paragraph slightly smaller for balance but still 2rem is acceptable.
   If you prefer exact 2rem everywhere, you can remove this rule. */
    .ccus-card__text {
        font-size: 2rem;
        line-height: 1.45;
    }

    /* ====== RESPONSIVE ====== */
    @media (max-width: 1100px) {
        .ccus-title {
            font-size: 3.6rem;
        }

        .ccus-label {
            font-size: 2.6rem;
        }
    }

    @media (max-width: 900px) {
        .ccus-hero {
            width: 90%;
        }

        /* breathe a little on mobile */
        .ccus-grid {
            grid-template-columns: 1fr;
        }

        .ccus-card {
            margin-top: 16px;
        }
    }

    @media (max-width: 520px) {
        .ccus-title {
            font-size: 3.2rem;
        }

        .ccus-label {
            font-size: 2.6rem;
        }

        .ccus-hero p,
        .ccus-card__text {
            font-size: 1.7rem;
        }

        /* maintain legibility on small screens */
        .ccus-btn {
            font-size: 1.6rem;
        }
    }

    /* ===== TEXT + VIDEO WIDGET (same width as previous: 80%) ===== */
    .ccus-video {
        width: 90%;
        max-width: 1200px;
        margin: 40px auto 0;
        /* color: #002d54; */
        height: 400px;
    }

    .ccus-video__inner {
        width: 100%;
        display: flex;
    }
    #ccus-video__inner-text{
        width: 50%;
        margin-right: 30px;
        margin-top: 80px !important;
    }
    #ccus-video__inner-text-second{
        width: 50%;
        margin-right: 30px;
    }

    /* Heading size to visually match screenshot; you asked to keep same scale family */
    .ccus-video__title {
        font-size: 3rem;
        /* matches your smaller header scale */
        font-weight: 300;
        /* screenshot shows bold section title */
        line-height: 1.2;
        margin: 0 0 10px;
    }

    /* Paragraphs same as earlier spec: 2rem */
    .ccus-video__lead {
        font-size: 1.8rem;
        line-height: 1.45;
        margin: 0 0 18px;
    }

    /* Responsive 16:9 video */
    .ccus-video__frame {
        position: relative;
        width: 50%;
        padding-top: 56.25%;
        /* 16:9 */
        /* background: #000;       nice placeholder while loading */
        overflow: hidden;
    }

    .ccus-video__frame iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 350px;
        border: 0;
    }

    /* ---------- Responsive Typography ---------- */
    @media (max-width: 1100px) {
        .ccus-video__title {
            font-size: 3rem;
        }
    }

    @media (max-width: 760px) {
        .ccus-video {
            width: 90%;
        }

        .ccus-video__title {
            font-size: 2.4rem;
        }

        .ccus-video__lead {
            font-size: 1.7rem;
        }
    }

    /* ====== ACCORDION CONTAINER (same width as previous: 80%) ====== */
    .ccus-accordion {
        width: 60%;
        max-width: 1200px;
        margin: 0px auto 80px;
        color: #002d54;
    }

    .ccus-accordion__title {
        font-size: 3rem;
        /* same as your section titles */
        font-weight: 300;
        /* bold, matching screenshot */
        line-height: 1.2;
        margin: 0 0 8px;
    }

    .ccus-accordion__lead {
        font-size: 1.8rem;
        /* same paragraph size as previous widgets */
        line-height: 1.5;
        margin: 0 0 18px;
    }

    /* ====== Accordion list ====== */
    .acc-list {
        display: grid;
        gap: 14px;
    }

    /* Card button */
    .acc-trigger {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 16px 18px;
        /* background: #f1f4f6;     subtle gray to match screenshot tone */
        border: 1px solid #e0e6ea;
        cursor: pointer;
        color: #002d54;
        text-align: left;
        background: white;
    }

    /* Trigger text style */
    .acc-trigger span {
        font-size: 2rem;
        /* match paragraph scale; appears like bold label */
        font-weight: 300;
        /* bold label as in screenshot */
    }

    /* Chevron */
    .acc-trigger .chev {
        width: 22px;
        height: 22px;
        color: #007bc0;
        transition: transform .2s ease;
    }

    /* Panel */
    .acc-panel {
        display: none;
        padding: 16px 18px 8px;
        border: 1px solid #e0e6ea;
        border-top: 0;
        border-radius: 0 0 6px 6px;
        background: #fff;
    }

    .acc-panel p {
        font-size: 1.8rem;
        /* subordinate body; you may keep 2rem if you prefer exact match */
        line-height: 1.55;
        margin: 0 0 8px;
    }

    /* Expanded state */
    .acc-item.is-open .acc-panel {
        display: block;
    }

    .acc-item.is-open .acc-trigger .chev {
        transform: rotate(180deg);
    }

    /* Focus/hover states for accessibility */
    .acc-trigger:focus,
    .acc-trigger:hover {
        outline: none;
        box-shadow: 0 0 0 3px rgba(0, 123, 192, 0.15);
        border-color: #99c9e4;
    }

    /* Responsive */
    @media (max-width: 900px) {
        .ccus-accordion {
            width: 90%;
        }

        .ccus-accordion__title {
            font-size: 2.6rem;
        }

        .ccus-accordion__lead {
            font-size: 1.7rem;
        }

        .acc-trigger span {
            font-size: 1.7rem;
        }

        .acc-panel p {
            font-size: 1.6rem;
        }
    }

    /*Styles for two last blocks - Form and the text */

    .cee-form,
    .cee-legal {
        width: 90%;
        max-width: 1200px;
        margin: 40px auto 0;
    }

    .cee-form__inner,
    .cee-legal__inner {
        width: 100%;
    }

    /* Grid for form: two columns on desktop, one on mobile */
    .cee-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px 24px;
        margin-bottom: 18px;
    }


    /* Final text block */
    .cee-legal h2 {
        font-size: 3rem;
        color: #002d54;
        font-weight: 300;
        margin: 28px 0 10px;
    }

    .cee-legal p {
        font-size: 1.8rem;
        color: #002d54;
        line-height: 1.55;
        margin: 0 0 40px;
    }

    /* Responsive */
    @media (max-width: 900px) {

        .cee-form,
        .cee-legal {
            width: 90%;
        }

        .cee-grid {
            grid-template-columns: 1fr;
            /* stack fields */
            gap: 14px;
        }
    }

    /* =========================================================
   FORM STYLES TO EXISTING CONTACT FORM 
   ========================================================= */

/* Base container width & spacing (matches .cee-form) */
#contact-form-content-page {
  width: 90%;
  max-width: 1200px;
  margin: 40px auto 0;
}

/* ---------------------------------------------------------
   GRID LAYOUT 
   --------------------------------------------------------- */
.firstRow,
.secondRow,
.thirdRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  margin-bottom: 18px;
}

/* Mobile stacking */
@media (max-width: 900px) {
  .firstRow,
  .secondRow,
  .thirdRow {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------
   FIELD COLUMNS – behave like .cee-field
   --------------------------------------------------------- */
.name_column,
.last_nameColumn,
.company_column,
.customer_column,
.telephone_column,
.email_column,
.segmentDiv,
.DescriptionForCustomer {
  display: flex;
  flex-direction: column;
}

/* Full-width fields  */
.segmentDiv,
.DescriptionForCustomer {
  grid-column: 1 / -1;
}

/* ---------------------------------------------------------
   LABEL STYLES 
   --------------------------------------------------------- */
#contact-form-content-page label {
  font-size: 1.5rem;
  color: #002d54;
  margin-bottom: 8px;
}

/* ---------------------------------------------------------
   INPUT, SELECT, TEXTAREA STYLES 
   --------------------------------------------------------- */
#contact-form-content-page input[type="text"],
#contact-form-content-page input[type="email"],
#contact-form-content-page input[type="tel"],
#contact-form-content-page textarea,
#contact-form-content-page select {
  font-size: 1.5rem;
  padding: 10px 12px;
  border: 1px solid #d7dde1;
  outline: none;
  color: #002d54;
  background: #ffffff;

}
#contact-form-content-page select {
      appearance: none;

}

/* Focus state  */
#contact-form-content-page input:focus,
#contact-form-content-page textarea:focus,
#contact-form-content-page select:focus {
  border-color: #99c9e4;
  box-shadow: 0 0 0 3px rgba(0, 123, 192, 0.15);
}

/* ---------------------------------------------------------
   SUBMIT BUTTON
   --------------------------------------------------------- */
#submitButton-content-page {
  display: inline-block;
  background: #007bc0;
  color: #ffffff;
  padding: 12px 22px;
  font-weight: 600;
  font-size: 1.8rem;
  border: 0;
  cursor: pointer;
  margin-top: 8px;
}

#submitButton-content-page:hover {
  background: #005fa3;
}

#submitButton-content-page:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* =========================================================
   TABLET BREAKPOINT
   ========================================================= */

@media (max-width: 900px) {
  .ccus-grid {
    grid-template-columns: 1fr;
  }

  .ccus-card {
    max-width: 520px;
  }

  /* ================= VIDEO BLOCK ================= */
  .ccus-video {
    width: 94%;
    margin: 48px auto 0;
  }

  .ccus-video__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
  }

  #ccus-video__inner-text,
  #ccus-video__inner-text-second {
    width: 100%;
  }

  .ccus-video__title {
    font-size: 2.6rem;
  }

  .ccus-video__lead {
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .ccus-video__frame {
    width: 100%;
  }

  /* ================= ACCORDION ================= */
  .ccus-accordion {
    width: 94%;
    margin: 32px auto 64px;
  }

  .ccus-accordion__title {
    font-size: 2.6rem;
  }

  .ccus-accordion__lead {
    font-size: 1.7rem;
    line-height: 1.6;
  }

  .acc-trigger {
    padding: 14px 16px;
  }

  .acc-trigger span {
    font-size: 1.7rem;
  }

  .acc-panel p {
    font-size: 1.6rem;
    line-height: 1.55;
  }

}


/* =========================================================
   MOBILE BREAKPOINT
   ========================================================= */

@media (max-width: 600px) {
  .ccus-hero {
    margin: 24px auto;
  }

  .ccus-title {
    margin-bottom: 16px;
  }

  .ccus-copy p {
    margin-bottom: 24px;
  }

  .ccus-card {
    margin-top: 12px;
  }

  /* ================= VIDEO BLOCK ================= */
  .ccus-video {
    width: 96%;
    margin-top: 40px;
  }

  .ccus-video__inner {
    gap: 24px;
  }

  .ccus-video__title {
    font-size: 2.3rem;
  }

  .ccus-video__lead {
    font-size: 1.5rem;
    line-height: 1.6;
  }

  .ccus-btn {
    width: 100%;
    text-align: center;
    padding: 14px 18px;
  }

  /* ================= ACCORDION ================= */
  .ccus-accordion {
    width: 96%;
    margin: 24px auto 48px;
  }

  .ccus-accordion__title {
    font-size: 2.2rem;
  }

  .ccus-accordion__lead {
    font-size: 1.6rem;
    line-height: 1.6;
  }

  .acc-trigger {
    padding: 16px;
  }

  .acc-trigger span {
    font-size: 1.6rem;
  }

  .acc-trigger .chev {
    width: 20px;
    height: 20px;
  }

  .acc-panel {
    padding: 14px 16px;
  }

  .acc-panel p {
    font-size: 1.5rem;
    line-height: 1.6;
  }
}