@font-face {
  font-family: "Gotham";
  src: url("../webfonts/Gotham-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("../webfonts/Gotham-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("../webfonts/Gotham-Light.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

main .wp-bootstrap-blocks-container {
    font-family: "Gotham", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1rem;
}

.esa-container, .esa-header, .esa-container-reverse, .esa-footer {
    background-color: #2e3b46;
    color: #fff;
    position: relative;
    padding-top: 250px;
    padding-bottom: 250px;
}

.esa-container, .esa-container-reverse {
    background-image: url('https://www.bradfordcollege.ac.uk/wp-content/uploads/2026/11/ESA-Pattern-Head.svg');
    background-repeat: no-repeat;
    background-position: 60% 0%;
    background-size: auto 20%;
}

.esa-container-reverse {
    background-position: 40% 0%;
}

.esa-container h2, .esa-container h3, .esa-container-reverse h2, .esa-container-reverse h3, .course-card h3 {
    color: #c2cd59;
    font-family: "Gotham", sans-serif;
    font-weight: 900;
}

.esa-header {
    padding-top: 100px;
    position: relative;
    background-image: url('https://www.bradfordcollege.ac.uk/wp-content/uploads/2026/11/ESA-Pattern-White.svg'), url('https://www.bradfordcollege.ac.uk/wp-content/uploads/2026/11/ESA-Pattern.svg');
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 110% 0%, -10% 100%;
    background-repeat: no-repeat, no-repeat;
    background-size: 200% 200%, 200% 200%;

}

.esa-header::before {
    content: '';
    position: absolute;
    clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%);
    bottom: 0;
    left: 0;
    top: 33%;
    right: 80%;
    background-color: #fff;
}  

.esa-header::after {
    content: '';
    position: absolute;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%);
    top: 0;
    right: 0;
    bottom: 33%;
    left: 80%;
    background-color: #c2cd59;
}  

.esa-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 33.333%;
    background-color: #c2cd59;
    clip-path: polygon(0 0, 100% 0, 0 50%);
}

.esa-container-reverse::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 33.333%;
    background-color: #c2cd59;
    clip-path: polygon(0 0, 100% 0, 100% 50%);
}

.esa-container::after, .esa-footer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 50%;
    background-image: url('https://www.bradfordcollege.ac.uk/wp-content/uploads/2026/11/esa2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: left center;
    clip-path: polygon(0 0, 50% 0, 100% 100%, 0% 100%);
}

.esa-footer::after {
    background-image: url('https://www.bradfordcollege.ac.uk/wp-content/uploads/2026/11/esa3.jpg');
}

.esa-container-reverse::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 50%;
    background-image: url('https://www.bradfordcollege.ac.uk/wp-content/uploads/2026/11/esa1.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    clip-path: polygon(0 100%, 100% -100%, 100% 100%, 0% 100%);
}

.esa-circuit-container {
    background: #0D123F;
    background-image: url('https://www.bradfordcollege.ac.uk/wp-content/uploads/2026/11/ESA-Pattern.svg'), linear-gradient(270deg,rgba(13, 18, 63, 1) 0%, rgba(0, 145, 186, 1) 100%);
    background-size: 120% auto, 100% 100%;
    background-repeat: no-repeat;
    padding: 250px 0;
    background-position: center;
    background-attachment: fixed;
}

.esa-circuit-container .wp-block-button__link {
    color: #2e3b46;
}

.course-card .article-body {
    background-color: #2e3b46;
    color: #fff;
}

.course-card p.badges .badge {
    text-shadow: none;
    color: #2e3b46;
}

.esa-footer {
    background-color: #2e3b46;
    padding: 150px 0;
}

.esa-footer h2 {
    color: #c2cd59;
    font-size: 3rem;
    line-height: 2.6rem;
    font-weight: 900;
    margin-bottom: 64px;
    width: 100px;
}

.esa-footer div.row div:nth-of-type(3) h2 {
    color: #fff;
    margin-bottom: 0;
}

@media all and (max-width: 768px) {
    .esa-container, .esa-header, .esa-container-reverse, .esa-footer {
        padding-bottom: 450px;
    }
    .esa-footer::after, .esa-container::after, .esa-container-reverse::after {
        clip-path: none;
        bottom: 0;
        left: 0;
        right: 0;
        top: calc(100% - 452px);
    }
    .esa-container::before, .esa-container-reverse::before {
        bottom: calc(100% - 400px);
    }
    .esa-footer::after {
        top: calc(100% - 450px);
    }
    .esa-footer {
        padding: 32px 0 482px 0;
    }
    .esa-circuit-container {
        padding: 32px 0;
    }
}