* {
    box-sizing: border-box;
}

main.container:has(.bannerSection) {
  width: 100%;
  padding: 0px;
}
.content-wrapper:has(.bannerSection) {
  padding: 0px !important;
}
.fe-65b8875d8456bd3a43e7d7bc:has(.bannerSection) {
  --inset-padding: auto!important;
  grid-template-rows: auto !important;
  display: block;
}
.content-wrapper:has(.bannerSection) .fe-block-yui_3_17_2_1_1706521210735_2215 {
    display: none !important;
}
#siteWrapper:has(.bannerSection) #header {
  display: none;
}

:root {
    --cq_primary: #F68F36;
    --cq_secondary: #E0D700;
    --cq_orange: #DD6700;
    --cq_blue: #36B1F6;
    --cq_white: #ffffff;
    --cq_black: #000000;
    --cq_font: "museo-sans", sans-serif;
    --cq_fonthead: 'Poppins', sans-serif;;
    --cq_container: 1070px;
    --cq_containerlg: 1400px;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 59px;
}
body {
    width: 100%;
    min-height: 100svh;
    padding: 0;
    margin: 0;
    font-family: var(--cq_font);
    font-weight: 300;
    scroll-behavior: smooth !important;
    overflow-x: hidden;
    background: var(--cq_white);
}
body.overflowOut {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.container {
    width: min(100%, var(--cq_container));
    margin-inline: auto;
    padding: 0px 15px;
}
.containerLg {
    width: min(100%, var(--cq_containerlg));
    margin-inline: auto;
    padding: 0px 30px;
}
.containerFluid {
    width: 100%;
    padding: 0px 30px;
}
.carbonQuest :is(h1,h2,h3,h4,h5,h6) {
    font-family: var(--cq_fonthead);
    font-weight: 800;
    letter-spacing: 0px;
}
.carbonQuest img {
    max-width: 100%;
}
.carbonQuest h1 {
    font-size: 44px;
    line-height: 50px;
    margin: 24px 0px;
    letter-spacing: 0px;
}
.carbonQuest h2 {
    font-size: 48px;
    line-height: 56px;
    color: #052941;
    margin: 15px 0px;
    letter-spacing: 0px;
}
.carbonQuest p {
    font-size: 24px;
    line-height: 28px;
    letter-spacing: 0px;
    font-family: var(--cq_font) !important;
}
.grid-parent {
    display: grid;
}
.grid-parent.g-auto-344 {
    grid-template-columns: auto 344px;
}
.grid-parent.g-300-auto-300 {
    grid-template-columns: 300px auto 300px;
    align-items: flex-end;
}
.grid-parent.g-4 {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    justify-content: center;
}
.grid-parent.g-2 {
    grid-template-columns: 1fr 1fr;
}
.grid-parent.g-460-auto {
    grid-template-columns: 460px auto;
    align-items: center;
}
.grid-parent.g-auto-450 {
    grid-template-columns: auto 450px;
    align-items: center;
}
.grid-parent.gap-40 {
    gap: 40px;
}
.grid-parent.gap-30 {
    gap: 30px;
}
.grid-parent.gap-24 {
    gap: 24px;
}
.posR {
    position: relative;
}

/* BUTTONS */
.carbonQuest .btn {
    font-family: var(--cq_fonthead);
    text-decoration: none;
    font-size: 22px;
    padding: 5px 35px;
    display: inline-block;
    color: var(--cq_black);
    border-radius: 60px;
    background: #cccccc;
    border: 3px solid var(--cq_black);
    box-shadow: 4px 6px 0px 1px var(--cq_black);
    transition: 0.1s linear;
}
.carbonQuest .btn.btn--blue {
    background: var(--cq_blue);
}
.carbonQuest .btn.btn--primary {
    background: var(--cq_primary);
}
.carbonQuest .btn:hover {
    background: var(--cq_secondary);
    transition: 0.1s linear;
}
/* BUTTONS END */

/* HEADER */

.carbonQuest header {
    width: 100%;
    background: var(--cq_secondary);
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 2;
    box-shadow: 0 2px 13px 0 rgba(0, 0, 0, .15);
}
.carbonQuest nav {
    min-height: 60px;
    width: 100%;
    padding: 16px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cqNavOptions {
    display: none;
}
.cqNavOptions__grid {
    width: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 30px;
    gap: 60px;
    text-align: center;
}
.cqNavOptions__grid .tileBlock {
    text-decoration: none;
    cursor: pointer;
}
.carbonQuest .hamburger {
    width: 28px;
    height: 28px;
    position: absolute;
    top: 16px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
}
.carbonQuest .hamburger * {
    cursor: pointer;
}
.carbonQuest .hamburger:before, .carbonQuest .hamburger:after {
    content: '';
    width: 28px;
    height: 4px;
    background: var(--cq_white);
    position: absolute;
    left: 0px;
    transform: rotate(0deg);
    transition: 0.3s linear;
    border-radius: 4px;

}
.carbonQuest .hamburger:before {
    top: 3px;
}
.hamburger:after {
    bottom: 3px;
}
.carbonQuest .hamburger label {
    width: 28px;
    height: 4px;
    border-radius: 4px;
    background: var(--cq_white);
    display: inline-block;
    position: relative;
    opacity: 1;
    left: 0px;
    transition: 0.3s linear;
}
.carbonQuest .hamburger.active label {
    left: -30px;
    opacity: 0;
    transition: 0.3s linear;
}
.hamburger.active:before {
    transform: rotate(45deg);
    top: calc(50% - 2px);
    transition: 0.3s linear;
}
.carbonQuest .hamburger.active:after {
    transform: rotate(-45deg);
    top: calc(50% - 2px);
    transition: 0.3s linear;
}
/* HEADER END */

:is(.lessonOne, .intro, .miniGame, .worksheet, .assessment, .contactUs) {
    padding: 50px 0px 45px 0px;
    background: #e0d700;
    position: relative;
    text-align: center;
}
:is(.lessonOne, .intro, .miniGame, .worksheet, .assessment, .contactUs):before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0px;
    top: 0px;
}
:is(.lessonOne, .intro, .miniGame, .worksheet, .assessment, .contactUs) [class^="container"] {
    position: relative;
    z-index: 1;
}

/* BANNER SECTION */
.carbonQuest .bannerSection {
    background-color: var(--cq_white);
    background-image: url('../images/cloud.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    text-align: center;
    padding-top: 60px;
    padding-bottom: 48px;
}
.carbonQuest .bannerImage {
    margin-bottom: 30px;
}
.carbonQuest .bannerSection h1 {
    color: var(--cq_orange);
}
.windMill {
    width: 218px;
    height: 210px;
    position: absolute;
    right: -143px;
    top: -83px;
}
.bannerSection p {
    margin: 24px 0px;
}
.bannerSection p:last-of-type {
    margin-bottom: 100px;
}
.bannerSection .grid-parent {
    margin-top: 28px;
}

.banner-section-container {
    max-width: 1920px;
    margin: 0 auto;
}
.banner-section-content {
    display: none;
}

@media screen and (min-width: 1200px) {
    .banner-section-content-md {
        display: none;
    }
    .banner-section-container {
        display: grid;
        grid-template-columns: repeat(20, 1fr);
        gap: 0px;
        max-width: 1920px;
        margin: 0 auto;
    }
    .banner-section-container-img {
        grid-row: 1;
        grid-column: 1 / 12;
    }
    .banner-section-content {
        display: block;
        grid-row: 1;
        grid-column: 11 / -1;
        padding-top: 10.5vw;
        padding-right: 20px;
    }
    .banner-section-content.banner-section-content.banner-section-content h1 {
        font-size: 2.15vw;
        line-height: 2.25vw;
    }
    .banner-section-content.banner-section-content.banner-section-content p {
        font-size: 1.38vw;
        line-height: 1.5vw;
    }
}
@media screen and (min-width: 1920px) {
    .banner-section-content {
        padding-top: 212px;
    }
    .banner-section-content.banner-section-content.banner-section-content h1 {
        font-size: 41px;
        line-height: 43px;
    }
    .banner-section-content.banner-section-content.banner-section-content p {
        font-size: 26px;
        line-height: 28px;
    }
}

/* BANNER SECTION END */

/* LESSON ONE SECTION */
.lessonOne:before {
    background: url('../images/pattern.png') repeat center;
    background-size: 180px;
    filter: opacity(0.05);
}
.lessonOne .grid-parent {
    margin-bottom: 0px !important;
}
.lessonOne .videoHolder {
    margin-bottom: 30px;
}
.lessonOne p {
    margin: 15px 0px;
}
.videoHolder {
    width: 100%;
    position: relative;
}
.video-placeholder {
    width: 100%;
}
.videotitle {
    position: absolute;
    width: 100%;
    left: 0px;
    bottom: -5px;
    text-align: center;
}
.videotitle h5 {
    font-size: 20px;
    margin: 0px;
    padding: 5px 45px;
    background: var(--cq_primary);
    border-radius: 47px;
    display: inline-block;
    border: 3px solid #000;
    box-shadow: 3px 5px 0px 1px #000;
}
.videotitle h5.secondary {
    background: var(--cq_secondary);
}
.playIcon {
    width: 140px;
    height: 140px;
    border-radius: 140px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: url('../images/play-button.png') no-repeat center;
    background-size: contain;
    cursor: pointer;
}
.jump-gif {
    width: 100%;
    aspect-ratio: 1/1.4;
    object-fit: contain;
}
.lessonOne p {
    margin: 15px 0px;
}
.p-inline40 {
    padding: 40px 20px;
    margin-bottom: 0 !important;
}
.tileBlock h3 {
    font-size: 32px;
    text-align: center;
    line-height: 40px;
    color: #052941;
    margin: 15px 0px;
}
/* LESSON ONE SECTION END */

/* INTRO SECTION */
.intro {
    background: var(--cq_blue);
}
.intro:before {
    background: url('../images/clouds.png') repeat center;
    background-size: 650px;
    filter: opacity(0.03);
}
.slandedImage {
    margin-top: -140px !important;
    width: 100%;
    display: inline-block;
    overflow: hidden;
}
.slandedImage__img {
    width: calc(100% + (100vw/5));
    aspect-ratio: 1/0.16;
    max-width: max-content;
    margin-inline: -50%;
}
.grid-parent.g-465-auto {
    grid-template-columns: 465px auto;
    align-items: flex-end;
}
.introContentBlock {
    margin-bottom: 45px !important;
}
.introContentBlock img {
    width: 83px;
    height: auto;
}
.introContentBlock h2 {
    color: var(--cq_white);
    line-height: 56px;
}
.grid-parent.gap-45 {
    gap: 45px;
}
.carbonQuest .card {
    width: 100%;
    background: var(--cq_white);
    border-radius: 20px;
    border: 5px solid var(--cq_primary);
    box-shadow: 4px 6px 0px 1px #F68F36;
    padding: 40px;
    margin-bottom: 40px;
}
.carbonQuest .card .videoHolder img {
    border-radius: 20px;
    border: 3px solid var(--cq_black);
    box-shadow: 4px 6px 0px 1px var(--cq_black);
}
.grid-parent.g-520-auto {
    grid-template-columns: 520px auto;
    align-items: center;
}
.videoHolderOffset h2 {
    line-height: 64px;
}
.goatLeft {
    position: absolute;
    bottom: -85px;
    right: -240px;
    transform: rotateY(180deg);
}
/* INTRO SECTION END */

/* MINIGAME SECTION */
.miniGame {
    background: var(--cq_primary);
}
.miniGame:before {
    background: url('../images/atom.png') repeat center;
    background-size: 250px;
    filter: opacity(0.03);
}
.artisticHeader {
    width: 100%;
    position: relative;
    margin: 30px 0px 40px 0px;
}
.artisticHeader:before, .artisticHeader:after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background: var(--cq_white);
    position: absolute;
    top: calc(50% - 4px);
}
.artisticHeader:before {
    left: 0px;
}
.artisticHeader:after {
    right: 0px;
}
.artisticHeader span {
    width: 93%;
    height: 3px;
    background: var(--cq_white);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.artisticHeader span:before, .artisticHeader span:after {
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 16px;
    border: 3px solid var(--cq_white);
    position: absolute;
    top: 50%;
  transform: translate(0%, -50%);
}
.artisticHeader span:before {
    left: -20px;
}
.artisticHeader span:after {
    right: -20px;
}
.artisticHeader h2 {
    width: 80%;
    margin: 0;
    margin-inline: auto;
    background: var(--cq_blue);
    color: var(--cq_white);
    padding: 8px 0px;
    border-radius: 57px;
    border: 3px solid var(--cq_white);
    box-shadow: 4px 6px 0px 1px var(--cq_white);
    position: relative;
    z-index: 2;
}
.miniGame .grid-parent {
    margin-top: 40px;
}
.gameTile__figBlock {
    position: relative;
}
.abImage {
    position: absolute;
}
.abImage.abImage--left {
    width: 175px;
    height: auto;
    left: -65px;
    bottom: -35px;
}
.abImage.abImage--right { 
    width: 226px;
    height: auto;
    top: -32px;
    right: -112px;
}
.gameTile__contentBlock h3 {
    color: var(--cq_white);
    font-size: 32px;
    margin: 20px 0px 0px;
}
.gameTile__contentBlock h3 {
    margin: 20px 0px 0px 0px !important;
}
/* MINIGAME SECTION END */

/* WORKSHEET SECTION */
.worksheet {
    background: var(--cq_white);
}
.worksheet:before {
    background: url('../images/pattern.png') repeat center;
    background-size: 150px;
    filter: opacity(0.03);
}
.worksheetContents img {
    width: 86px;
}
.worksheetContents h2 {
    color: var(--cq_blue);
    line-height: 56px;
}
.worksheetContents p {
    margin: 15px 0px;
}
/* WORKSHEET SECTION END */

/* ASSESSMENT SECTION */
.assessment {
    background: var(--cq_secondary);
}
.assessment:before {
    background: url('../images/atom.png') repeat center;
    background-size: 250px;
    filter: opacity(0.03);
}
.happySun {
    position: absolute;
    width: 260px;
    height: auto;
    left: -80px;
    top: -190px;
}
.grid-parent.g-auto-415 {
    grid-template-columns: auto 390px;
}
.assessmentImgBlock {
    margin-top: -100px;
}
.assessmentContents img {
    width: 90px;
}
.assessmentContents h2 {
    line-height: 56px;
}
.assessmentContents p {
    margin: 15px 0px;
}
.assessmentImgBlock__title {
    font-size: 24px;
    padding: 10px 35px;
    display: inline-block;
    color: var(--cq_black);
    border-radius: 60px;
    background: var(--cq_white);
    border: 3px solid var(--cq_black);
    box-shadow: 4px 6px 0px 1px var(--cq_black);
}
.assessmentImgBlock img {
    float: left;
}
.sliderParent {
    margin-top: 45px;
    position: relative;
}
.carbonQuest .slick-arrow {
    font-size: 0;
    padding: 0;
    margin: 0;
    border: 0;
    position: absolute;
    width: 55px;
    height: 80px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.carbonQuest .slick-prev.slick-arrow {
    left: -75px;
    background: url('../images/prev.png') no-repeat center;
    background-size: contain;
}
.carbonQuest .slick-next.slick-arrow {
    right: -75px;
    background: url('../images/next.png') no-repeat center;
    background-size: contain;
}
.sliderEach__img {
    width: 100%;
    padding: 0px 12px;
}
/* ASSESSMENT SECTION END */

/* CONTACT US SECTION */
.carbonQuest .contactUs {
    background: var(--cq_blue);
}
.carbonQuest .contactUs:before {
    background: url('../images/clouds.png') repeat center;
    background-size: 650px;
    filter: opacity(0.03);
}
.contactUsContent h2 {
    color: var(--cq_white);
}
.contactUs__img {
    width: min(100%, 450px);
    margin-top: -20px;
}
/* CONTACT US SECTION END */

/* FOOTER SECTION */
.carbonQuest .footer {
    padding: 45px 0px;
    text-align: center;
    background: var(--cq_white);
}
.carbonQuest .footer p {
    font-size: 16px;
    line-height: 20px;
}
/* FOOTER SECTION END */

/* MODAL */
.csModal {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0px;
    left: 0px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: rgba(0, 0, 0, 0.9);
    padding: 50px 15px;
}
.csModal.active {
    display: flex;
}
.csModalOut {
    width: 28px;
    height: 28px;
    position: absolute;
    right: 15px;
    top: 10px;
    cursor: pointer;
}
.csModalOut:before, .csModalOut:after {
    content: '';
    width: 28px;
    height: 4px;
    background: var(--cq_white);
    position: absolute;
    border-radius: 4px;
    top: 12px;
    left: 0px;
}
.csModalOut:before {
    transform: rotate(45deg);
}
.csModalOut:after {
    transform: rotate(-45deg);
}
.csModal__content {
    width: min(100%, 900px);
    height: auto;
    max-height: 100%;
    overflow: auto;
}
/* MODAL END */

/* MEDIA QUERIES */

@media (max-width: 1440px) {
    .goatLeft {
        width: 190px;
        right: -50px;
        bottom: -95px;
    }
    .abImage.abImage--right {
        right: 0px;
        top: -50px;
        width: 160px;
    }
    .abImage.abImage--left {
        left: 0px;
        bottom: -30px;
        width: 150px;
    }
    .windMill {
        right: 0px;
        width: 128px;
        height: auto;
        top: -46px;
    }
}

@media (max-width: 1200px) {
    .sliderParent {
        padding: 0px 70px;
    }
    .carbonQuest .slick-prev.slick-arrow {
        left: 0px;
    }
    .carbonQuest .slick-next.slick-arrow {
        right: 0px;
    }
    .grid-parent.g-300-auto-300 {
        grid-template-columns: 190px auto 190px;
    }
}

@media (max-width: 991px) {
    .grid-parent.g-300-auto-300 {
        grid-template-columns: 190px auto 190px;
    }
    .grid-parent.g-auto-344 {
        grid-template-columns: 1fr;
        align-items: center;
        justify-content: center;
        text-align: center;
        place-content: center;
        place-items: center;
    }
    .windMill {
        top: auto;
        bottom: 0px;
    }
    .grid-parent.g-300-auto-300 {
        grid-template-columns: 140px auto 140px;
    }
    .playIcon {
        width: 60px;
        height: 60px;
        background-size: contain;
    }
    .videotitle h5 {
        font-size: 16px;
    }
    .grid-parent.g-4 {
        grid-template-columns: 1fr 1fr;
    }
    .grid-parent.g-465-auto {
        display: flex;
        flex-direction: column;
    }
    .introContentBlock {
        order: 0;
    }
    .grid-parent.g-465-auto img {
        order: 1;
        width: 282px;
    }
    .introContentBlock img {
        width: 90px !important;
    }
    .carbonQuest .card {
        padding: 20px 20px 40px 20px;
    }
    .grid-parent.g-520-auto {
        grid-template-columns: 1fr;
    }
    .goatLeft {
        bottom: -121px;
        right: 0px;
    }
    .carbonQuest h2 {
        font-size: 38px;
        line-height: 46px;
    }
    .grid-parent.g-460-auto {
        grid-template-columns: 1fr;
        place-content: center;
        justify-content: center;
        place-items: center;
    }
    .worksheet {
        padding: 20px 0px 80px 0px;
    }
    .videoHolderOffset h2 {
        line-height: 46px;
    }
    .sliderEach__img {
        width: 100%;
    }
    .sliderEach__img {
        padding: 0px;
    }
    .assessmentImgBlock img {
        margin-inline: auto;
        float: none;
    }
    .cqNavOptions__grid img {
        width: 100px;
        height: 70px;
        object-fit: contain;
    }
    .cqNavOptions__grid {
        gap: 30px;
        width: min(100%, 600px);
        margin-inline: auto;
    }
    .cqNavOptions__grid h3 {
        font-size: 20px;
        line-height: 24px;
    }
}

@media (max-width: 767px) {
    .main {
        width: 100vw;
        overflow: hidden;
    }
    .carbonQuest h1 {
        font-size: 32px;
        line-height: 44px;
    }
    .carbonQuest p {
        font-size: 16px;
        line-height: 24px;
    }
    .cqNavOptions__grid img {
        width: 40px;
        height: 32px;
    }
    .cqNavOptions__grid {
        gap: 10px;
        margin-top: 40px;
    }
    .tileBlock h3 {
        font-size: 12px;
        margin: 0px;
        line-height: 16px;
    }
    header nav .container {
        padding: 0px;
    }
    .carbonQuest .hamburger {
        right: 15px;
    }
    .grid-parent.g-300-auto-300 {
        grid-template-columns: 1fr;
    }
    .grid-parent.g-4 {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    .slandedImage__img {
        width: calc(100% + (100vw/2));
        object-fit: cover;
        aspect-ratio: 1/0.4;
    }
    .carbonQuest h2 {
        font-size: 28px;
        line-height: 36px;
    }
    .artisticHeader h2 {
        width: 85%;
        font-size: 22px;
        padding: 8px 10px;
    }
    .grid-parent.g-2 {
        grid-template-columns: 1fr;
    }
    .miniGame .grid-parent {
        gap: 80px;
    }
    .worksheet {
        padding-bottom: 125px;
    }
    .assessment {
        padding-top: 100px;
    }
    .happySun {
        left: -40px;
        top: -240px;
    }
    .assessmentContents h2 {
        line-height: 36px;
    }
    .grid-parent.g-auto-415 {
        display: flex;
        flex-direction: column;
    }
    .assessmentImgBlock {
        order: 0;
        margin-top: 0;
    }
    .assessmentContents {
        order: 1;
    }
    .sliderParent {
        padding: 0px 30px;
        grid-template-columns: 1fr;
    }
    .sliderEach:nth-of-type(2) {
        display: none;
    }
    .carbonQuest .slick-arrow {
        width: 25px;
        height: 40px;
    }
    .grid-parent.g-auto-450 {
        grid-template-columns: 1fr;
    }
    .contactUs__img {
        margin-top: 20px;
        width: min(100%, 150px);
        margin-inline: auto;
    }
    .jump-gif {
        width: min(100%, 100px);
        margin-inline: auto;
    }
    .tileBlock__img {
        width: 60px;
        height: 48px;
    }
    .tileBlock h3 {
        font-size: 16px;
        line-height: 22px;
    }
    .p-inline40 {
        padding: 40px 0px;
    }
    .introContentBlock h2 {
        line-height: 36px;
    }
    .videoHolderOffset h2 {
        line-height: 36px;
    }
    .carbonQuest .btn {
        font-size: 16px;
    }
    .worksheetContents h2 {
        line-height: 36px;
    }
    .containerFluid {
        padding: 0px 15px;
    }
    
}

@media (max-width: 500px) {
    .videotitle {
        position: static;
    }
    .video-placeholder {
        width: 100%;
        height: 130px;
    }
    .playIcon {
        top: 65px;
    }
    .cqNavOptions__grid {
        grid-template-columns: 1fr;
    }
    .cqNavOptions__grid .tileBlock {
        display: flex;
        align-items: center;
    }
    .cqNavOptions__grid img {
        margin-right: 20px;
    }
}