body {
    background-color: #00101b;
}

.navbar-custom {
    background-color: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
    border: none;
    padding-top: 20px;
    padding-bottom: 20px;
}

.navbar-custom li a {
    color: #333;
}

.navbar-custom .navbar-brand {
    color: #333;
    font-weight: 700;
}

.navbar-custom .navbar-nav .nav-link {
    color: #333;
}

/* landing jumbo */
.jumbo-hero {
    background-image: url('/static/img/hero-city.webp');
    background-size: cover;
    background-position: 50% 20%;
    color: #fff;
    text-align: center;
    margin-top: -60px;
    padding-top: 10vh;
    padding-bottom: 0vh;
}

.jumbo-hero-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    height: 95vh;
}

.heading-block {
    margin-top: 40vh;
}

.jumbo-heading {
    font-size: 2.5em;
    font-weight: 700;
    margin-bottom: 30px;
}

.jumbo-lead {
    margin-bottom: 20px;
}

.btn-jumbo-transparent {
    background-color: #000;
    padding: 25px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 0px solid;
    font-size: 14px;
    color: #fff;
    margin-right: 20px;
    margin-top: 20px;
    transition: ease 0.2s;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
}

.btn-jumbo-transparent:hover {
    color: #fff;
    box-shadow: 2px 2px 40px rgba(0, 0, 0, 0.25);
}

.btn-jumbo-transparent i {
    margin-left: 10px;
    color: rgb(255, 195, 41);
}


.btn-jumbo-transparent-secondary {
    background-color: transparent;
    border: 1px solid #ddd;
    color: #fff;
}

/* three panel */
.section-service-brief {
    margin-top: 15px;
    background-color: #fafafa;
    border-top: 1px solid #eee;
}

.panel-service-brief {
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.panel-service-brief-image {
    object-fit: cover;
    min-height: 175px;
    max-height: 175px;
    width: 100%;
}

.panel-service-circle {
    background-color: #000;
    ;
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 100%;
    padding-top: 15px;
    margin: 0 auto;
    margin-bottom: 20px;
    z-index: 1;
    position: relative;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}

.panel-service-brief-circle {
    margin-top: -35px;
    background-color: #000;
}

.panel-service-circle i {
    font-size: 1.5em;
    color: #fff;
}

.panel-service-heading {
    font-size: 1em;
    font-weight: 700;
    margin-bottom: 50px;
}

/* about */
.section-about {
    background-color: #fafafa;
    padding-top: 60px;
    padding-bottom: 60px;
}

.about-heading {
    font-size: 3.5em;
    margin-bottom: 40px;
    font-weight: 500;
    line-height: 1.2em;
    margin-top: -5px;
}

.about-heading-logo {
    height: 150px;
    width: auto;
    margin-top: -50px;
    margin-right: 30px;
}

.section-about-second {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.about-heading-second {
    margin-bottom: 0;
    font-size: 1em;
    text-align: left;
    line-height: 2em;
}

.about-lead {
    font-size: 1.5em;
    margin-bottom: 30px;
}

/* featured work */
.section-featured-work {
    background-color: #eee;
    background-size: cover;
    color: #000;
    padding-top: 80px;
    padding-bottom: 100px;
}

.panel-featured-work {
    padding: 20px;
}

.panel-featured-work-image {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.featured-work-header {
    margin-bottom: 50px;
    font-size: 1.4em;
    display: inline;
    margin-top: 30px;
    float: left;
}

.slick-dots {
    padding: 0;
    display: inline-block;
    text-align: center;
}

.slick-dots li {
    display: inline-block;
}

.slick-dots li button {
    font-size: 0;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.4);
    width: 15px;
    height: 15px;
    border: 0px;
    display: inline-block;
    margin-left: 15px;
    margin-right: 15px;
}

.slick-dots li.slick-active button {
    background-color: #000;
}

.slick-controls button {
    background-color: transparent;
    font-size: 3em;
    color: #000;
    border: 0px;
}

.slick-controls {
    display: inline;
    float: right;
}

.featured-work-icons button {
    float: right;
    border-radius: 4px;
    background-color: #fff;
}

.carousel-item {
    height: 20vh;
}

.carousel-controls button {
    border-radius: 4px;
}

.carousel-image {
    max-height: 250px;
    min-height: 250px;
    object-fit: cover;
    width: 100%;
}

.featured-work-title {
    margin-top: 20px;
    margin-bottom: 50px;
    font-size: 1em;
}


/* brief cta */
.section-brief-cta {
    background-image: url('/static/img/bg-light.jpg');
    background-size: cover;
    padding-top: 100px;
    padding-bottom: 0px;
}

.brief-cta-heading {
    font-size: 2.4em;
}

.brief-cta-image {
    margin-bottom: 0px;
}

.btn-yellow {
    background-color: #000;
    color: #fff;
    font-size: 0.8em;
    padding: 10px 20px;
}

/* exclusive services */
.section-services {
    background-color: #fafafa;
    padding-top: 80px;
    padding-bottom: 80px;
    text-align: center;
}

.panel-service {
    background-color: #fff;
    text-align: center;
    padding: 20px;
    border: 1px solid #eee;
    margin-top: 80px;
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1);
}

.panel-service-circle-exclusive {
    margin-top: -55px;
}

.panel-service-heading-exclusive {
    font-size: 1em;
}

.service-seperator {
    border-top: 4px solid #000;
    width: 50px;
    margin: 0 auto;
    margin-bottom: 20px;
    margin-top: 20px;
    opacity: 1;
}

/* mid section cta */
.section-mid-cta {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/5/54/Tuggerah_Beach_-_panoramio_%285%29.jpg');
    background-size: cover;
    color: #fff;
    padding-top: 0px;
    padding-bottom: 00px;
    text-align: center;
    background-position: 50% 30%;
}

.section-mid-cta-overlay {
    background-color: rgba(0, 0, 0, 0.5);
    padding-top: 180px;
    padding-bottom: 200px;
}

.mid-cta-brand {
    font-size: 1em;
    color: #e73514;
}

.mid-cta-tagline {}

.mid-cta-header {
    font-size: 1.5em;
}

/* news section */
.section-news {
    padding-top: 100px;
    padding-bottom: 100px;
}

.panel-news {
    margin-top: 20px;
}

.panel-news-image {
    max-height: 200px;
    min-height: 200px;
    object-fit: cover;
    width: 100%;
}

.panel-news-header {
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 20px;
}

.panel-news-seperator {
    margin-top: 40px;
    margin-bottom: 40px;
}

/* section testimonials */
.section-testimonials {
    text-align: center;
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #eee;
}

.img-circle {
    border-radius: 50%;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* final cta */
.section-cta-final {
    padding-top: 70px;
    padding-bottom: 70px;
    background-color: #eee;
    color: #222;
}

.cta-final-text {
    font-weight: 700;
    margin-top: 10px;
}

.btn-white {
    background-color: #fff;
}

/* footer */
.footer {
    background-color: #ddd;
    color: #222;
    padding-top: 50px;
    padding-bottom: 50px;
}

.footer-brand {
    color: #222;
    font-weight: 700;
}

.footer-subheader {
    color: #fff;
}

.footer hr {
    display: inline-block;
    margin-top: 10px;
}

.footer-author-link {
    color: #fff;
    text-decoration: none;
}

.working-hours {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

.working-hours span {
    color: #fff;
    float: right;
}

.footer-credits {
    background-color: #262626;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #fff;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.footer-text a {
    color: #fff;
    text-decoration: none;
}

@media (min-width:576px) {
    .navbar-custom {
        padding-left: 5px;
        padding-right: 5px;
    }

    .jumbo-heading {
        margin-bottom: 50px;
    }

}

@media (min-width: 768px) {
    .jumbo-hero {
        height: 95vh;
        padding-bottom: 0;
        padding-top: 0;
        background-image: url('/static/img/hero-city.webp');
    }

    .heading-block {
        color: #fff;
        margin-top: 35vh;
    }

    .jumbo-heading {
        font-size: 5em;
        margin-bottom: 30px;
    }

    .jumbo-lead {
        font-size: 1.5em;
    }

    .btn-jumbo-transparent {
        font-size: 1em;
    }

    .btn-jumbo-transparent-secondary:hover {
        color: #000;
    }

    /* three panel */
    .section-service-brief {
        margin-top: -100px;
        background-color: #fafafa;
        border-top: 1px solid #eee;

    }

    .panel-service-brief {
        margin-top: -80px;
    }

    .panel-service-brief-image {
        min-height: 150px;
        max-height: 150px;
    }

    .container-about {
        text-align: center;
    }

    .about-heading {
        font-size: 2.5em;
    }

    .section-brief-cta {
        padding-bottom: 0px;
        padding-top: 100px;
    }

    .brief-cta-textblock {
        margin-bottom: 100px;
    }

    .brief-cta-image {
        left: -200px;
        position: absolute;
        width: 70%;
        ;
        margin-top: -80px;
        ;
    }

    .section-mid-cta {
        padding-top: 000px;
        padding-bottom: 0px;
    }

    .mid-cta-header {
        font-size: 3.2em;
    }

    .section-featured-work {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .carousel-item {
        height: 55vh;
    }

    .carousel-image {
        max-height: 400px;
        min-height: 400px;
        object-fit: cover;
        width: 100%;
    }

}

@media (min-width: 992px) {
    .jumbo-hero {
        background-image: url('/static/img/hero-city.webp');
        height: auto;
        text-align: left;
        padding-top: 0vh;
        background-position: 100px 0%;
        background-repeat: no-repeat;
        padding-bottom: 150px;
    }

    .jumbo-hero-overlay {
        background-color: transparent;
    }

    .heading-block {
        color: #000;
        margin-top: 30vh;
    }

    .jumbo-heading {
        font-size: 3.5em;
        margin-bottom: 30px;
    }

    .jumbo-lead {
        width: 450px;
        font-size: 1.3em;
    }

    .btn-jumbo-transparent-secondary {
        color: #000;
    }

    .panel-service-brief-image {
        min-height: 180px;
        max-height: 180px;
    }

    .container-about {
        text-align: left;
    }

    .about-heading {
        font-size: 3em;
    }

    .about-lead {
        margin-bottom: 10px;
    }

    .grey-text {
        color: #aaa;
    }

    .section-brief-cta {
        padding-top: 30vh;
        height: 80vh;
    }

    .brief-cta-image {
        margin-bottom: 0;
        position: absolute;
        left: -10vh;
        width: 60%;
        margin-top: -22vh;
    }

    .brief-cta-textblock {}

    .mid-cta-header {
        margin-bottom: 40px;
    }

    .btn-cta-final {
        float: Right;
    }

    .footer-subheader {
        font-size: 1em;
    }
}

@media (min-width: 1200px) {
    .jumbo-hero {
        height: auto;
        text-align: left;
        background-size: 100%;
        background-position: 0% 50%;
        background-repeat: no-repeat;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
        padding-bottom: 10vh;
        padding-top: 5vh;
    }

    .heading-block {
        margin-top: 30vh;
    }

    .jumbo-heading {
        font-size: 4.5em;
    }

    .panel-service-brief {
        margin-top: -15vh;
    }

    .panel-service-brief-image {
        min-height: 250px;
        max-height: 250px;
        box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
    }

    .about-heading {
        font-size: 3.5em;
    }

    .carousel-image {
        max-height: 500px;
        object-fit: cover;
    }

    .brief-cta-image {
        margin-bottom: 0;
        position: absolute;
        left: 0;
        width: 50%;
        margin-top: -44vh;
    }

}

@media (min-width: 1400px) {}