section.how-can-we-help { }

.landing-page section.header div.header {
   grid-template-columns: 455px 1fr;
}

.landing-page section.header .header-intro .intro {
   padding-right: 40px;
}

section.how-can-we-help .panels {
   display: grid;
   grid-template-columns: 450px 1fr;
   gap: 80px;
   margin-top: 20px;
}

section.how-can-we-help .panels .panel {
   font-size: 18px;
   margin: 0;
   background-color: transparent;
   display: block;
}


section.how-can-we-help .panel.video-and-actions {
   display: flex;
   flex-direction: column;
   gap: 30px;
   justify-content: space-between;
}

section.how-can-we-help .video {
   position: relative;
   height: 100%;

   /* Incase they use a YouTube video */
   container-type: inline-size;
   container-name: landing-video;
}

section.how-can-we-help .video button.play-button {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: transparent;
}

section.how-can-we-help .video iframe {
   width: 100%;
}

@container landing-video (min-width: 0) {
   /* 56% of the container w, which should equate to ~16:9 video ratio. */
   /* Without this you will get black bars top and bottom of the video. */
   iframe {
      height: 56cqw;
   }
}

section.how-can-we-help .panel.video-and-actions .actions {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   grid-template-areas: "sub sub" "more talk";
}

.btn-subscription-pricing {
   justify-content: center;
   grid-area: sub;
}

.btn-find-out-more {
   justify-content: center;
   grid-area: more;
}

.btn-talk-to-us {
   justify-content: center;
   grid-area: talk
}

section.how-can-we-help .video video {
   box-shadow: 0 0 5px 5px rgba(var(--hl-dark-green-rgb), 0.3);
}


section.mid-banner {
   margin-top: 30px;
}

section.mid-banner div.mid-banner {
   display: flex;
   justify-content: end;
   background-size: cover;
   background-position: center top;
   background-repeat: no-repeat; 
}

section.mid-banner div.mid-banner .content {
   padding: 30px;
   width: 100%;
   max-width: 390px;
   color: #ffffff;
   font-size: 18px;
}

section.mid-banner div.mid-banner .content img {
   height: 85px;
   width: auto;
}


section.challenge-and-solution {
   margin-top: 30px;
}

section.challenge-and-solution .panels {
   font-family: Roobert, sans-serif;
   font-size: 18px;
   font-weight: 400;
   color: var(--hl-dark-green);

   display: grid;
   grid-template-columns: 2fr 3fr;
   gap: 20px;
}

section.challenge-and-solution div.the-challenge {
   padding: 30px;
   background-color: var(--hl-taupe);
}

section.challenge-and-solution ul li {
   padding: 0 0 0 40px;
   position: relative;
}

section.challenge-and-solution ul {
   list-style: none;
   margin: 0;
}

section.challenge-and-solution ul li:before {
   content: "";
   position: absolute;
   top: 3px;
   left: 0;
   width: 25px;
   height: 25px;
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
}

section.challenge-and-solution div.the-challenge ul li:before {
   background-image: url("/Education-GOES-Toolkit/purchase/_assets/icon-exclamation-green.png");
}

section.challenge-and-solution div.our-solution ul li:before {
   background-image: url("/Education-GOES-Toolkit/purchase/_assets/icon-tick.png");
}

section.challenge-and-solution div.our-solution {
   padding: 30px;
   background-color: var(--hl-light-green);
}

section.challenge-and-solution h3 {
   font: inherit;
   font-size: 30px;
   font-weight: 300;
   margin-bottom: 0.5em;
}

section.challenge-and-solution ul li::marker {
   margin: 10px 0 0 0;
   height: 10px;
   width: 10px;
}

/*** ***/

section.no-top {
   margin-top: 30px;
}

.block-header {
font-family: Roobert, sans-serif;
   background-color: var(--hl-dark-green);
   padding: 18px 21px;
   color: #ffffff;
   margin-top: 30px;
}

.block-header h3 {
   font-family: Roobert, sans-serif;
   color: #ffffff;
   font-size: 17px;
}

p.discount-ribbon {
   font-size: 18px;
   color: #ffffff;
   background-image: url(/payment-services-academy/_assets/bg-discount-ribbon.png);
   background-size: 100% 100%;
   display: inline-block;
   padding: 15px 28px;
   vertical-align: middle;
   margin-bottom: 0;
   margin-left: 25px;
   position: relative;
}

.licenses-container .col-4 {
   padding-left: 5px;
   padding-right: 5px;
}

.col-container.licenses-container {
   margin-left: -5px;
   margin-right: -5px;
}

.col-inner.license-panel {
   background-color: #f2f2f2;
   text-align: center; /*transition:all 0.1s ease-out; cursor: pointer;*/
}

.col-inner.license-panel h4 {
   font-family: Roobert, sans-serif;
   color: var(--hl-dark-green);
   margin-bottom: 18px;
}

.col-inner.license-panel h4 p {
   color: inherit;
   font-size: inherit;
   font-family: inherit;
   margin-bottom: 0;
}

.col-inner.license-panel p {
   font-size: 15px;
   margin-left: auto;
   margin-right: auto;
   width: 80%;
   margin-bottom: 30px;
}

.col-inner .panel-top {
   font-family: Roobert, sans-serif;
   color: var(--hl-dark-green);
   padding: 32px 10px;
}

.col-inner .panel-bottom {
   background-color: var(--hl-dark-taupe);
   padding: 32px 10px;
   transition: 0.5s ease-out;
}

.col-inner .panel-bottom h4 {
   color: var(--hl-dark-green);
   font-family: Roobert, sans-serif;
   font-size: 24px;
   margin-bottom: 0;
}

.col-inner .panel-bottom p {
   color: #ffffff;
}

.col-inner .panel-bottom h4 span {
   text-decoration: line-through;
   color: red;
}

.col-inner .panel-bottom h4 span i {
   font-style: normal;
   color: #fff;
}

.col-inner .panel-bottom span.exc-vat {
   font-size: 11px;
   color: #FFF;
   text-decoration: none;
}

.col-inner .panel-bottom span.exc-vat {
   font-size: 11px;
}

section.no-top .form-cell {
   font-size: 13px;
   margin-bottom: 12px;
}

section.no-top .form-cell label {
   display: block;
   margin-bottom: 8px;
   font-size: 16px;
   color: #000000;
}

section.no-top .form-cell label a {
   color: inherit;
}

section.no-top .form-container {
   background-color: var(--hl-light-taupe);
   padding: 30px 25px;
}

section.no-top .form-container input[type="text"],
section.no-top .form-container input[type="password"],
section.no-top .dk-select {
   color: var(--hl-dark-green);
   font-size: 16px;
   width: 100%;
   font-family: Roobert, sans-serif;
   border: 1px solid #999999;
   margin-bottom: 5px;
}

section.no-top .form-container input[type="text"],
section.no-top .form-container input[type="password"] {
   padding: 11px;
}

section.no-top .dk-select {
   padding: 0;
}

.submit-container {
   margin-top: 20px;
}

section.no-top .dk-selected {
   border: none;
   padding-left: 11px;
   font-family: Roobert, sans-serif;
   font-size: 13px;
}

section.no-top .dk-option {
   font-size: 13px;
   padding-left: 0;
}

section.no-top .dk-select-open-down .dk-select-options,
section.no-top .dk-select-options {
   padding: 11px;
}


section.no-top .form-container textarea {
   color: var(--hl-dark-green);
   font-size: 13px;
   padding: 11px;
   width: 100%;
   font-family: Roobert, sans-serif;
   height: 122px;
   resize: none;
   border: 1px solid #f2f2f2;
}

.form-container .col-1,
.form-container .col-2 {
   padding-left: 15px;
   padding-right: 15px;
}

div.thanks {
   padding: 1px 30px 30px 30px;
   background-color: var(--hl-light-taupe);
   max-width: 100%;
   margin-bottom: 100px;
}

div.thanks h2 {
   margin-bottom: 25px;
}

div.thanks p {
   font-size: 18px;
   font-family: Roobert, sans-serif;
   color: var(--hl-dark-green);
}

@media(max-width: 900px) {
   .col-4 {
      width: 33.3%;
   }
}


@media(max-width: 880px) {
   section.how-can-we-help .panels {
      grid-template-columns: 1fr 1fr;
   }
}

@media(max-width: 740px) {
   section.how-can-we-help .panels {
      gap: 50px;
      grid-template-columns: 1fr;
   }

   section.challenge-and-solution .panels {
   grid-template-columns: 1fr;
   }
}

@media (max-width: 700px) {
   .landing-page section.header div.header {
      grid-template-columns: 1fr;
   }
}

@media (max-width: 640px) {
   .col-4 {
      width: 50%;
   }
}

@media (max-width: 550px) {
   .form-container .col-2 {
      width: 100%;
   }
}

@media (max-width: 430px) {
   section.mid-banner div.mid-banner .content img {
      width: calc(100vw - 100px);
      height: auto;
   }

   .col-4 {
      width: 100%;
   }
}