/* EDUCATION THEME OVERRIDES */
/* Re-sets the default.css root tokens with the education palette. Loaded after default.css. */
:root {

  /* ── BASE COLOURS ────────────────────────────────────────── */
  --white:     #ffffff;
  --black-900: #000000;
  --red:       #ff0000;

  --grey-100: #f7f3ec;
  --grey-200: #f0ece2;
  --grey-700: #4a4a42;

  /* ── SEMANTIC COLOUR ALIASES ────────────────────────────── */
  --primarycolor-100:   #b2e0d3;
  --primarycolor-400:   #60BFB2;
  --primarycolor-700:   #01B49D;
  --primarycolor-900:   #417e76;
  --secondarycolor-200: #006196;
  --secondarycolor-400: #002336;
  --accentcolor-700:    #d97b29;
  --accentcolor-800:    #f0913f;
  --linkcolor:          #3f7d52;
  --surfacecolor-100:   #eaf2df;
  --bodytextcolor:      #002336;
  --mutedtextcolor:     #8a8578;
  --bordercolor:        #d8d2c4;
}

/* Header / Nav */
.education .header a.logo.education {display: block; width: 100%; height: 139px; background: url(../images/G&B-Education.png) no-repeat 0 0; background-size: 100%}
.education .header .left.homepage, .education .header .left {width: 155px;}

.education .nav li a:hover, .education .nav li.selected a {color: var(--bodytextcolor); opacity: 1;}
.education .nav.education-home li a:hover, .education .nav.education-home li.selected a {color: var(--secondarycolor-400); opacity: 1;}

.education .nav .blockbutton a {text-align: center; text-wrap: nowrap; font-weight: 700;}
.education .nav .blockbutton.green a {border: 1px solid var(--white); background: var(--secondarycolor-400); color: var(--white);}
.education .nav .blockbutton.green a:hover {background: var(--secondarycolor-200);}
.education .nav .blockbutton.teal a {border: 1px solid var(--white); background: var(--primarycolor-400); color: var(--secondarycolor-400);}
.education .nav .blockbutton.teal a:hover {background: var(--primarycolor-700); color: var(--white);}

/* Footer */
.education .footer {display: flex; flex-direction: row;}
.education .footer * {color: var(--white);}
.education.footer a.logo {background-size: contain; height: 110px;}
.education .footer .left, .education .footer .right {width: max-content; float: unset;}
.education .footer .right {padding-left: 40px;}
.education .footer li a {display: inline-block;}
.education .footer a:hover, .education .bottom-footer p a:hover {text-decoration: underline; color: var(--white);}

/* Banner */
.education .banners {background: var(--primarycolor-700); display: grid !important; grid-template-columns: minmax(var(--gutter, 20px), 1fr) repeat(var(--col-count, 2), minmax(0, calc(var(--container-400) / var(--col-count, 2)))) minmax(var(--gutter, 20px), 1fr);}
.education .banners .image, .education .banners .slick-slider, .education .banners .fade {grid-column: 3/-1; grid-row: 2; opacity: 1;  z-index: 2;}

.education .banners .gradient {grid-column: 1/-1; grid-row: 1/-1; height: 100%;}
.education .banners.innerbanners:has(.fade) .gradient {display: none;}
.education .banners .bannerspacing {background: var(--primarycolor-700); grid-column: 1/-1; grid-row: 1/3;}

.education .banners.innerbanners {grid-template-rows: 120px auto 1fr;}
.education .banners.innerbanners .image, .education .banners.innerbanners .slick-slider, .education .banners.innerbanners .fade {grid-column: 1/-1;}
.education .banners.innerbanners .inner {margin-top: auto; z-index: 2;}

.education .banners .inner {grid-column: 2; grid-row: 2; opacity: 1; width: 100%; max-width: unset; position: relative; height: max-content; padding: 0 30px 0 0; bottom: 0;}
.education .banners .inner:nth-child(2){grid-column: 2/4;}
.education .banners .inner .bannertext {max-width: unset; width: auto;}

.education .banners .banner {background: var(--secondarycolor-400);}
.education .banners .inner .bannertext p.arrowbutton a:after {color: var(--primarycolor-400);}
.education .banners .inner .bannertext h1 {padding: 100px 0 20px 0;}

.education .banners.innerbanners.posttitle .inner {grid-row: 3; grid-column: 2/4;}
.education .banners.innerbanners.posttitle .inner .bannertext h1 {padding: 20px 0;}

/* Home bg overide */
.education .servicessection.grey {background: var(--secondarycolor-400);}
.education .servicessection.grey > .content > *, .education .servicessection.grey .editable1 * {color: var(--white);}
.education .servicessection.grey h2 {color: var(--primarycolor-700);}
.education .servicessection.lightblue {background: var(--primarycolor-100)}

.education .education-feeds {margin: 30px 0 0; --gap: 40px;}

/* EDUCATION SERVICES */
.education-services {gap: 40px; justify-content: center;}
.education-service-card {background: var(--primarycolor-100); padding: 20px; border-radius: 20px; flex: 1 0 33%; max-width: 460px; border: 1px solid var(--primarycolor-100);}
.education-service-card * {color: var(--black-900);}
.education-service-card .heading {font-size: 1.2rem; font-weight: 700; padding: 0; margin: 0 0 10px;}
.education-service-card .desc {margin: 0 0 60px;}
.education-service-card .arrowbutton {margin-top: auto; padding: 0;}
.education-service-card .arrowbutton a {color: var(--black-900);}

.education-service-card:nth-child(2n) {background: var(--primarycolor-700); border-color: var(--primarycolor-700);}
.education-service-card:nth-child(2n) .arrowbutton a::after {color: var(--black-900);}

.education-service-card:nth-child(3n) {background: var(--secondarycolor-400); border-color: var(--white);}
.education-service-card:nth-child(3n) * {color: var(--white);}
.education-service-card:nth-child(3n) .arrowbutton a {color: var(--white);}

/* FEATURED CASE STUDY */
.featured-casestudy {display: flex; background: var(--white); -webkit-box-shadow: 0px 1px 15px 5px #00000096; box-shadow: 0px 1px 15px 5px #00000096;}
.featured-casestudy .text > * {color: var(--black-900);}
.featured-casestudy .image:last-child {width: 100%;}
.featured-casestudy .image {width: 45%; overflow: hidden;}
.featured-casestudy .image img {width: 100%; height: 100%; object-fit: cover; display: block; transition: all 0.2s ease-in-out; transform-origin: center;}
.featured-casestudy .image:hover img {transform: scale(1.05);}
.featured-casestudy .text {width: 55%; box-sizing: border-box; padding: 30px; display: flex; flex-direction: column; text-align: left;}
.featured-casestudy .text h3 {font-weight: 700; font-size: 120%; padding: 0 0 15px 0; color: var(--black-900)!important;}
.featured-casestudy .text * {color: var(--bodytextcolor)!important;}
.featured-casestudy .text .arrowbutton {margin-top: auto; padding: 0;}

/* RESOURCE HUB */
.resource-filter {background: var(--white); border-radius: 10px; padding: 5px 20px; margin: 0 0 20px; gap: 15px;}
.resource-filter p {margin: 0;}
.resource-filter p.heading {font-weight: 700; width: max-content; padding: 0;}
.resource-filter ul {display: flex; flex-direction: row; align-items: center; gap: 15px; margin: 0;}
.resource-filter ul li {list-style-type: none; margin: 0;}
.resource-filter ul li label {padding: 10px 20px; background: var(--bordercolor); font-family: var(--secondaryfont); font-weight: 600; border-radius: 5px; color: var(--bodytextcolor); line-height: 3; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.resource-filter ul li label:hover {background: var(--secondarycolor-200); color: var(--white);}
.resource-filter ul li label input {display: none;}
.resource-filter ul li label:has(input:checked) {background: var(--secondarycolor-400); color: var(--white);}

.resource-filter.topic .heading {font-size: 1rem;}
.resource-filter.topic ul li label {background: var(--primarycolor-100); color: var(--black-400); font-size: 1rem; padding: 10px 16px 8px;}
.resource-filter.topic ul li label:has(input:checked) {background: var(--black-200); color: var(--black-900);}

.resource-hub {display: grid; grid-template-columns: repeat(3,1fr); gap: 30px}
.resource-hub .resource {position: relative; background: var(--white); box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column;}
.resource-hub .resource .image {overflow: hidden;}
.resource-hub .resource .image img {width: 100%; height: 100%; object-fit: cover; transition: all 0.2s ease-in-out; transform-origin: center;}
.resource-hub .resource .image:hover img {transform: scale(1.05);}
.resource-hub .resource .inner {padding: 20px; box-sizing: border-box; flex-grow: 1; position: relative; display: flex; flex-direction: column;}
.resource-hub .resource .inner h3 {font-size: 1.4rem;}
.resource-hub .resource .inner .inner-sub {display: flex; flex-direction: row; justify-content: space-between; padding: 0 0 10px;}
.resource-hub .resource .inner .inner-sub:after {display: none;}
.resource-hub .resource .inner > p {padding: 0;}
.resource-hub .resource time {font-size: 1rem; color: var(--grey-700);}
.resource-hub .resource .tag {font-size: 1rem; background: var(--grey-200); color: var(--black-100); padding: 0 7px; border-radius: 3px;}
.resource-hub .resource .blockbutton, .resource-hub .resource .arrowbutton {padding: 0 20px 15px;}
.resource-hub .resource .blockbutton a, .resource-hub .resource .arrowbutton a {line-height: 1;}
.resource-hub .resource .video-wrap.inner {padding: 0; aspect-ratio: 1/1;}
.resource-hub .resource .video-wrap.inner iframe {width: 100%; height: 100%; min-height: unset;}

.video-wrap.inner iframe {width: 100%; height: 520px;}

/* LATEST RESOURCES */
.latest-resources {--gap: 40px; row-gap: 0;}
.latest-resources:after {display: none;}
.latest-resources .newsstory {background: var(--white); box-shadow: rgb(100 100 111 / .2) 0 7px 29px 0; overflow: hidden; display: flex; flex-direction: column; -webkit-box-shadow: 0px 1px 15px 5px #00000096; box-shadow: 0px 1px 15px 5px #00000096;}
.latest-resources .newsstory .image {overflow: hidden; height: 220px;}
.latest-resources .newsstory .image img {width: 100%; height: 100%; object-fit: cover; display: block; transition: all 0.2s ease-in-out; transform-origin: center;}
.latest-resources .newsstory .image:hover img {transform: scale(1.05);}
.latest-resources .newsstory .text {padding: 20px; box-sizing: border-box; flex-grow: 1; display: flex; flex-direction: column;}
.latest-resources .newsstory .text h3 {font-size: 1.2rem; font-weight: 700; padding: 0 0 10px 0; color: var(--black-900);}
.latest-resources .newsstory .text p {color: var(--bodytextcolor);}
.latest-resources .newsstory .text .arrowbutton {padding: 0; margin-top: auto;}
.latest-resources .newsstory .text .arrowbutton a {margin: 0; color: var(--bodytextcolor)!important;}
.latest-resources .newsstory .video-wrap.inner iframe {width: 100%; height: 220px; min-height: unset;}

.education form input[type="text"]:focus, .education form input[type="password"]:focus, .education form input[type="email"]:focus, .education form input[type="tel"]:focus, .education form textarea:focus, .education form select:focus {border: 1px solid var(--secondarycolor-200);}

.education form input[type="submit"], .education form button[type="submit"] {display: block; padding: 8px 24px; box-sizing: border-box; border: 1px solid var(--white); background: var(--secondarycolor-400); color: var(--white); height: auto;}
.education form input[type="submit"]:hover, .education form button[type="submit"]:hover {background: var(--secondarycolor-200);}

.pagination {display: flex; flex-direction: row; gap: 15px; justify-content: center; margin-top: 20px;}
.pagination .pager {color: var(--bodytextcolor);}
.pagination .pager:hover {color: var(--secondarycolor-200);}
.pagination .pager.arrow-control {padding: 5px 0;}
.pagination .pager:not(.arrow-control) {text-decoration: none; width: 30px; border-radius: 50vh; aspect-ratio: 1/1; text-align: center; padding: 5px; color: var(--bodytextcolor);}
.pagination .pager:not(.arrow-control):hover {background: var(--white); color: var(--secondarycolor-200);}

.pagination .pager.selected {background: var(--secondarycolor-400); color: var(--white);}
.pagination .pager.selected:hover {background: var(--secondarycolor-200); color: var(--white);}



@media (max-width: 1280px) {
  .education .education-feeds {grid-template-columns: 1fr;}

}

@media (max-width: 1080px) {
  .resource-hub {grid-template-columns: repeat( 2,1fr ); gap: 20px;}
  .resource-filter {flex-direction: column; gap: 5px;}
  .resource-filter ul {flex-wrap: wrap; justify-content: center; gap: 5px;}
}

@media (max-width: 820px) {
  .featured-casestudy {grid-column: span 1; flex-direction: column;}
  .featured-casestudy .image, .featured-casestudy .text {width: 100%;}
  .featured-casestudy .image {height: 220px;}

  .latest-resources {grid-template-columns: 1fr; row-gap: 40px;}
  .resource-hub {grid-template-columns: 1fr; gap: 20px;}

  .education .footer {flex-direction: column;}
  .education .footer a.logo {display: inline-block; position: relative;}

  .education .footer .right {margin-left: unset; padding-left: unset;}

}

@media (max-width: 780px) {
  .education .footer a.logo {display: inline-block; margin-bottom: 20px;}
  .education .footer .left {padding: 0 0 20px 0}
}

@media (max-width: 740px) {
  .education .banners {--col-count: 1; --gutter: 20px;}
  .education .banners > * {grid-row: 1/-1; grid-column: 2;}
  .education .banners .slick-slider {grid-column: 1/-1;}
  .education .banners .inner {padding: 0;}
  .education .banners .slick-slider {opacity: 0.3;}
}

@media (max-width: 580px) {
  .education-services {flex-direction: column; flex-wrap: nowrap; gap: 20px;}
}

@media (max-width: 510px) {
  .content-wrap {padding: 0 20px;}
}