.gap-30 {
    gap: 30px;
}

.gap-33 {
    gap: 33px;
}

.gap-40 {
    gap: 40px;
}

.gap-50 {
    gap: 50px;
}

.gap-70 {
    gap: 70px;
}

.gap-80 {
    gap: 80px;
}

@font-face {
    font-family: 'Mulish';
    src: url('/wp-content/themes/multico/assets/fonts/mulish.ttf');
}

h1,
h2,
h3,
p {
    margin: 0;
    font-family: 'Mulish';
    color: #000;
}

footer h1,
footer h2,
footer h3,
footer p {
    color: white;
}

header p {
    color: white;
}

section.sub-footer p {
    color: white;
}

h1,
h2,
h3 {
    font-weight: 700;
}

h2 {
    font-size: 24px;
}

h3 {
    font-size: 18px;
}

p {
    font-size: 18px;
}

.wrapper {
    max-width: 1530px;
    width: 100%;
    margin: auto;
}

section div.container-fluid,
section .custom-container {
    width: 80%;
    margin: auto;
}

@media (max-width: 767px) {

    section div.container-fluid,
    section .custom-container {
        padding: 0 20px;
    }
}

@media (max-width: 991px) {

    section div.container-fluid,
    section .custom-container {
        width: 100%;
        padding: 0 30px;
    }

    section.banner div.col-md-6:last-of-type .image {
        display: none;
    }
}

/* Old Banner */

section.banner {
    padding: 50px 20px;
    background-image: url('/wp-content/themes/multico/assets/images/generator-set-ph/banner-bg-newest.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 125px;
    min-height: 649px;
    display: flex;
    align-items: center;
}

section.banner h1,
section.banner p {
    color: white;
}

section.banner .banner__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.banner .banner__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}


section.banner .banner__text .image {
    display: block;

}

/* Old Banner ends */

section.updated-generator-banner {
    padding: 32px 31px !important;
    background-image: url('/wp-content/themes/multico/assets/images/generator-set-ph/banner-bg-newest.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: 125px;
    max-height: 563px;
    display: flex;
    align-items: center;
    filter: 0!important;
}

section.updated-generator-banner h1,
section.updated-generator-banner p {
    color: white;
}

section.updated-generator-banner .updated-generator-banner__content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.updated-generator-banner .updated-generator-banner__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

section.updated-generator-banner .image {
    display: flex;
}

section.updated-generator-banner .image img{
    max-width: 500px;
    object-fit: contain;
    object-position: center;
    margin: 0 auto;
}

section.updated-generator-banner .align-items{
    display: flex;
    align-items: center;
    justify-content: center;
}


/* generater set work */
section.generator-set-work {
    padding: 50px 20px;
}

section.generator-set-work .generator-set-work__content {
    display: flex;
    flex-direction: column;
}

section.generator-set-work .generator-set-work__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

section.generator-set-work .image {
    display: none;
}

section.generator-set-work .generator-set-work__text .image {
    display: block;

}

section.why-trust._revert {
    background: #fff;
}

section.why-trust._revert h2,
section.why-trust._revert p,
section.why-trust._revert h3 {
    color: #000;
}

section.why-trust .get-the-best-cta {
    width: max-content;
    margin: auto;
    border-radius: 15px;
    background: #FFF;
    padding: 12px 30px;
    border: 1px solid #fff;
}

section.why-trust .get-the-best-cta a {
    color: #DB402A;
    font-family: 'Mulish';
    font-size: 18px;
    line-height: 26px;
    text-decoration: none;
}

section.why-trust .get-the-best-cta:hover {
    background: transparent;
    border: 1px solid #fff;
}

section.why-trust .get-the-best-cta:hover a {
    color: #fff;
}

/* main-component */
section.main-component {
    padding: 50px 20px;
    background: #F8F8F8;
}

section.main-component .main-component__content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


section.main-component .main-component__row {
    display: flex;
    flex-direction: column;
}

section.main-component .main-component__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

section.main-component .image {
    display: none;
}

section.main-component .main-component__text .image {
    display: block;
    background: #fff;
}

section.main-component .main-component__card {
    display: flex;
    flex-wrap: wrap;
}

section.main-component .main-component__card .panel {
    display: flex;
    flex-direction: column;
    flex: 1 0 370px;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
    max-width: 100%;
}

section.main-component h3 {
    color: #DB402A;
}

/* large scale */
section.large-scale {
    padding: 50px 20px;
}

section.large-scale .large-scale__content {
    display: flex;
    flex-direction: column;
}

section.large-scale .large-scale__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

section.large-scale .large-scale__text a {
    color: #DB402A;
    text-decoration: underline;
}

section.large-scale .image {
    display: none;
}

section.large-scale .large-scale__text .image {
    display: block;

}

/* small scale */
section.small-scale {
    padding: 50px 20px;
    background: #F8F8F8;
}

section.small-scale .small-scale__content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

section.small-scale .small-scale__row {
    display: flex;
    flex-direction: column;
}

section.small-scale .small-scale__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

section.small-scale .image {
    display: none;
}

section.small-scale .small-scale__text .image {
    display: block;

}

section.small-scale .small-scale__card {
    display: flex;
    flex-direction: column;
}

section.small-scale .cards {
    display: flex;
    flex-direction: column;
}

section.small-scale .panel {
    border-radius: 0;
    border: 0;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    max-width: 100%;
    width: 100%;
    margin-bottom: 0;
    min-height: 92px;
    height: 100%;
}

section.small-scale .panel .box {
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    background: #DB402A;
}

section.small-scale .panel .box p {
    color: white;
}

section.small-scale .panel .panel-text {
    padding: 20px;

}

/* solutions */
section.solutions {
    padding: 50px 20px;
}

section.solutions .solutions__content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

section.solutions .solutions__row {
    display: flex;
    flex-direction: column;
}

section.solutions .solutions__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

section.solutions .image {
    display: none;
}

section.solutions .solutions__text .image {
    display: block;

}

section.solutions .solutions__card {
    display: flex;
    flex-direction: column;
}

section.solutions .panel {
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-width: 100%;
    width: 100%;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 0;
}

section.solutions .panel h3 {
    color: #DB402A;
}

/* get */
section.get {
    padding: 50px 20px;
    background: #F8F8F8;
}

section.get .get__content {
    display: flex;
    flex-direction: column;
}

section.get .get__row {
    display: flex;
    flex-direction: column;
}

section.get .get__text {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    width: 100%;
}

section.get .image {
    display: none;
}

section.get .get__text .image {
    display: block;

}

section.get .get__card {
    display: flex;
    flex-direction: column;
}

section.get .panel {
    display: flex;
    flex-direction: column;
    padding: 20px;
    max-width: 100%;
    width: 100%;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 0;
}

section.get .panel h3 {
    color: #DB402A;
}

/* why trust */
section.why-trust {
    padding: 50px 20px;
    background-image: url('/wp-content/themes/multico/assets/images/generator-set-ph/trust-bg.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    color: white;
}

section.why-trust h2,
section.why-trust h3,
section.why-trust p {
    color: white;
}

section.why-trust .why-trust__content {
    display: flex;
    flex-direction: column;
}

section.why-trust .why-trust__heading {
    max-width: 921px;
    width: 100%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

section.why-trust .why-trust__heading p {
    max-width: 835px;
    width: 100%;
    margin: auto;
}

section.why-trust .why-trust__card {
    display: flex;
    flex-wrap: wrap;
}

section.why-trust .why-trust__card .panel {
    display: flex;
    flex-direction: column;
    flex: 1 0 356px;
    border: 0;
    border-radius: 0;
    margin-bottom: 0;
    max-width: 100%;
    background: #FFF;
    box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.25);
    padding: 20px;
    border-radius: 0;
    border: 0;
    margin-bottom: 0;
}

@media (min-width: 768px) {

    section.banner,
    section.updated-generator-banner,
    section.generator-set-work,
    section.main-component,
    section.large-scale,
    section.small-scale,
    section.solutions,
    section.get,
    section.why-trust {
        padding: 70px 30px;
    }

    section.banner {
        margin-top: 171px;
    }

    section.updated-generator-banner{
        margin-top: 171px;
    }

    section.main-component .main-component__content {
        gap: 50px;
    }

    section.small-scale .small-scale__content {
        gap: 50px;
    }

    section.solutions .solutions__content {
        gap: 50px;
    }
}

@media (min-width: 992px) {

    /* Old Banner media queries to be repalced */

    section.banner {
        margin-top: 105px;
    }

    section.banner .banner__content {
        flex-direction: row-reverse;
        align-items: center;
    }

    section.banner .banner__text {
        display: flex;
        flex-direction: column;
        max-width: 743px;
        width: 100%;
    }

    section.banner .image {
        display: block;
    }

    section.banner .banner__text .image {
        display: none;
    }

    /* Placeholders */

    section.updated-generator-banner {
        margin-top: 105px;
    }

    section.updated-generator-banner .updated-generator-banner__content {
        flex-direction: row-reverse;
        align-items: center;
    }

    section.updated-generator-banner .updated-generator-banner__text {
        display: flex;
        flex-direction: column;
        max-width: 743px;
        width: 100%;
    }

    section.generator-set-work .generator-set-work__content {
        flex-direction: row;
        align-items: center;
    }

    section.generator-set-work .generator-set-work__text {
        display: flex;
        flex-direction: column;
        max-width: 730px;
        width: 100%;
    }

    section.generator-set-work .image {
        display: block;
    }

    section.generator-set-work .generator-set-work__text .image {
        display: none;
    }

    section.main-component .main-component__row {
        flex-direction: row-reverse;
        align-items: center;
    }

    section.main-component .main-component__text {
        display: flex;
        flex-direction: column;
        max-width: 730px;
        width: 50%;
    }

    section.main-component .image {
        display: block;
        width: 50%;
    }

    section.main-component .main-component__text .image {
        display: none;
    }

    section.large-scale .large-scale__content {
        flex-direction: row;
        align-items: center;
    }

    section.large-scale .large-scale__text {
        max-width: 728px;
        width: 100%;
    }

    section.large-scale .image {
        display: block;
    }

    section.large-scale .large-scale__text .image {
        display: none;
    }


    section.small-scale .small-scale__row {
        flex-direction: row-reverse;
        align-items: center;
    }

    section.small-scale .small-scale__text {
        width: 50%;
    }

    section.small-scale .image {
        display: block;
        width: 50%;
    }

    section.small-scale .small-scale__text .image {
        display: none;
    }

    section.small-scale .cards {
        flex-direction: row;
    }

    section.small-scale .panel {
        max-width: 750px;
        width: 100%;
    }

    section.solutions .solutions__row {
        flex-direction: row;
        align-items: center;
    }

    section.solutions .solutions__text {
        max-width: 730px;
        width: 100%;
    }

    section.solutions .image {
        display: block;
    }

    section.solutions .solutions__text .image {
        display: none;
    }

    section.solutions .solutions__card {
        flex-direction: row;
    }

    section.solutions .panel {
        max-width: 750px;
        width: 100%;
    }

    section.get .get__row {
        flex-direction: row-reverse;
        align-items: center;
    }

    section.get .get__text {
        max-width: 730px;
        width: 100%;
    }

    section.get .image {
        display: block;
    }

    section.get .get__text .image {
        display: none;
    }

    section.get .get__card {
        flex-direction: row;
    }

    section.get .panel {
        max-width: 750px;
        width: 100%;
    }
}

@media (min-width: 1200px) {

    section.banner,
    section.updated-generator-banner,
    section.generator-set-work,
    section.main-component,
    section.large-scale,
    section.small-scale,
    section.solutions,
    section.get,
    section.why-trust {
        padding: 100px 0px;
    }

    section.main-component .main-component__content {
        gap: 80px;
    }

    section.small-scale .small-scale__content {
        gap: 70px;
    }

    section.solutions .solutions__content {
        gap: 70px;
    }
}