/*Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* PLACEHOLDER */
.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media screen and (min-width:850px) {
    .navbar .nav-item {
        font-size:16px !important;
        text-transform: uppercase;
        font-weight:700;
        margin-left:20px;
    }
}
@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.font18 {
    font-size:18px !important;
}
.font24 {
    font-size:24px !important;
}
.font30 {
    font-size:30px !important;
}

h2.card-title {
    margin-bottom:15px;
}


p .font18, .card-text {
    font-size:18px !important;
}
/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
    padding-bottom: 3rem;
    color: #5a5a5a;
}

body, html {
    min-height:100vh;
    min-height:100dvh;
}
p, a, ul, li, ol, b, strong, h1, h2, h3, h4, h5, h6, span {
    color: var(--main-dark);
    font-family: "Source Sans 3", serif;
    font-optical-sizing: auto;
    font-style: normal;
}
p, a, ul, li, ol, b, strong, span, body, html {
    font-weight: 400;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 700 !important;
}
:root {
    --accent-dark: #9a6c29;
    --accent-light: #fbf0e4;
    --main-dark: #2a2a2a;
    --main-mid: #3b3b3b;
    --main-light: #f1f1f1;
}

ul.navbar-nav {
    align-items:center;
}

/*Bootstrap-style helpers*/
.accent-dark {
    color: var(--accent-dark);
}
.accent-dark-bg {
    background-color: var(--accent-dark)
}
.accent-light {
    color: var(--accent-light)
}
.accent-light-bg {
    background-color: var(--accent-light);
}
.main-dark {
    color:var(--main-dark);
}
.main-dark-bg {
    background-color: var(--main-dark);
}
.main-light {
    color:var(--main-light);
}
.main-light-bg {
    background-color:var(--main-light);
}
.main-mid {
    color:var(--main-mid);
}
.main-mid-bg {
    background-color:var(--main-mid);
}
.icon-block {
    display:flex;
    gap:1rem;
}
svg.custom-icon {
    box-sizing: border-box;
    width: 50px;
    background: var(--main-light);
    padding: 8px;
    border-radius: 100px;
}
svg.star {
    height:30px;
    fill:var(--accent-dark);
    margin-right:3px;
}

svg.feat-icon {
    height:50px;
    fill:var(--accent-light) !important;
}
svg.nav-icon {
    height:24px;
    fill: white !important;
}


.no-side-padding {
    padding-left:0 !important;
    padding-right:0 !important;
}
.custom-max-width {
    max-width: 1140px;
    margin:0 auto;
}

/* BUTTONS */
.btn.btn-link {
    color:var(--accent-light);
}
.btn.btn-link:hover {
    color:var(--main-dark);
}

.btn-link:focus-visible,
.btn-link:focus {
    border:none !important;
    box-shadow:none;
    background:#ffffff59;
    color:var(--main-accent) !important;
    outline:3px solid rgba(0,0,0,0.4);
}

.btn-base {
    background:var(--accent-dark);
    color:white;
    border:none !important;
}
.btn-base:hover {
    background:var(--main-dark) !important;
    color:white !important;
    outline:3px solid rgba(0,0,0,0.4);
}

.btn-base:focus-visible,
.btn-base:focus {
    background:var(--accent-dark) !important;
    color:var(--main-dark) !important;
    outline:3px solid rgba(0,0,0,0.4);
}
nav a.btn.menu-btn.btn-base li.nav-item,
nav a.btn.menu-btn.btn-base li.nav-item strong {
    color:white !important;
}

.topbar a {
    margin-right:40px;
}
.topbar .navbar-text,
.topbar * {
    color:white !important;
}
.topbar a {
    text-decoration: none;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.hero-section {
    margin-bottom: 4rem;
    height:80vh;
    height: 80dvh;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
    bottom: 50%;
    transform:translateY(50%);
    z-index: 10;
    left:0;
    right:0;
}
.hero-inner {
    position:relative;
    max-height:100%;
    overflow-y:hidden;
}
.hero-inner img {
    object-fit: cover;
    width:100%;
}
.overlay {
    background: rgb(0,0,0);
    background: linear-gradient(51deg, rgba(0,0,0,1) 1%, rgba(219,139,33,0) 53%);
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
.carousel-caption > * {
    text-shadow: 0 0 50px black;
}
/* MARKETING CONTENT
-------------------------------------------------- */

.marketing {
    margin-top: 5rem;
}
/* Center align the text within the three columns below the carousel */
.marketing .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}
.marketing h2 {
    font-weight: 400;
}
/* rtl:begin:ignore */
.marketing .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}
/* rtl:end:ignore */


/* Featurettes
------------------------- */

.featurette {
    padding:3rem 0 3rem 0;
}

.featurette-divider {
    margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
    font-weight: 300;
    line-height: 1;
    /* rtl:remove */
    letter-spacing: -.05rem;
    font-size:40px !important;
}



/* CARDS
======================================*/
.cards-section .card img,
.cards-section .card {
    border-radius: 6px 6px 0 0;
    border:none !important;
}


/* FEATURE CARDS
-------------------------------------------------- */
.feature-cards {
    background: rgb(42,42,42);
    background: linear-gradient(180deg, rgba(42,42,42,1) 80%, rgba(255,255,255,1) 20%);
}
.feature-cards .card-footer {
    padding-left:0;
}
/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
    /* Bump up size of carousel content */
    .carousel-caption p {
        margin-bottom: 1.25rem;
        font-size: 1.25rem;
        line-height: 1.4;
    }

    .featurette-heading {
        font-size: 50px;
    }
}


.back-to-top {
    visibility:hidden;
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:10;
    background:var(--accent-light);
    border-radius:4px;
    padding:5px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 2px rgba(0,0,0,0.05) !important;
    -webkit-transition:visibility 0.3s ease-in-out;
    transition:visibility 0.3s ease-in-out;
}
.back-to-top.scrolled {
    visibility: visible;
    -webkit-transition:visibility 0.3s ease-in-out;
    transition:visibility 0.3s ease-in-out;
}
.back-to-top .btt {
    width:30px;
}


.modal.lightbox.show,
.modal.lightbox.show .modal-dialog {
    background:black;
}



.modal-dialog button {
    opacity:1;
}
.carousel-control.carousel-control-next {
    right:-30px !important;
    opacity:1;
}
.carousel-control.carousel-control-prev {
    left:-30px !important;
    opacity:1;
}


.gallery img {
    height:280px;
    width:100%;
    object-fit:cover;
    border-radius:8px;
}
.lightbox-caption * {
    font-size:20px;
    font-style: normal;
}



.feedback {
    margin-top:15px;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
}
.suggest {
    outline:none;
    border:none;
    margin:3px 3px 0 0;
    color:var(--accent-dark);
    background:#e1811936;
    font-size:15px;
    border-radius:4px;
    -webkit-transition:all 0.2s ease-in-out;
    transition:all 0.2s ease-in-out;
    border:2px solid var(--accent-light);
}
.suggest:hover {
    background:var(--accent-light);
    border:2px solid var(--accent-dark);
}


.mega-card img {
    object-fit:cover;
    min-height:100%;
}

.home-fc.feature-cards {
    padding:120px 0 85px 0;
}

/* @mobile
=======================================*/
/*Hamburger*/
.menu-btn {
    color: white; /* Example */
    background-color: var(--accent-dark);
}
.menu-btn:hover {
    background-color: var(--main-dark);
}

@media screen and (max-width:850px) {
    .hero-section,
    .hero-inner,
    .hero-text,
    .hero-inner img {
        max-height:unset !important;
        min-height:600px;
        height:auto;
    }
    .hero-section {
        margin-bottom:20px;
    }
    .container.marketing {
        margin: 0;
        padding:0 !important;
    }
    .hero-text {
        padding-top:100px;
        padding-bottom:100px;
    }
    .hero-text h1 {
        font-size:30px;
    }
    .hero-text p.text-light {
        font-size:20px !important;
    }
    .navbar-collapse a {
        font-size:18px;
        font-weight:700 !important;
    }
    .topbar div {
        display:block !important;
        flex-direction:row !important;
        justify-content:space-between !important;
        width:100% !important;
        text-align:center;
        font-size:18px;
    }
    .topbar > div a:nth-of-type(2) {
        display:none !important;
    }

    .topbar a {
        padding:0 !important;
        margin:0;
    }
    .topbar svg {
        width:18px;
        margin-right:5px;
    }

    .navbar-brand img {
        height:80px;
    }
    .hero-inner .btn-link {
        display:flex;
        margin-left:0 !important;
        padding-left:0;
        margin-top:15px;
    }
    .home-fc.feature-cards{
        padding-bottom:0 !important;
    }
    .container,
    .container-fluid,
    .row.featurette {
        padding-left:10px !important;
        padding-right:10px !important;
    }
    .cards-section .row-cols-1 {
        padding:8px !important;
    }
    .cards-section.container-fluid {
        padding-top:80px !important;
    }
    .icon-block.container {
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding-top:20px;
    }
    h2.featurette-heading {
        font-size:30px !important;
        text-align:center;
        line-height:1.1em;
    }
    .feature-cards {
        padding-top: 60px !important;
    }
    .feature-cards .col {
        padding:0;
    }
    .feature-cards:last-child img {
        border-radius:6px 6px 0 0 !important;
    }
    .feature-cards:last-child .main-mid-bg.p-5 {
        border-radius:0 0 6px 6px !important;
    }
    .featurette {
        padding:60px 0 !important;
    }
    .featurette p.lead {
        text-align:center !important;
    }
    .mega-card {
        padding-top:60px !important;
        margin-top: 0 !important;
    }
    .mega-card .p-5 {
        padding:40px 10px !important;

    }
    label[for="postcode"] {
        min-width:100%;
        text-align:left;
        margin-left:3px;
        margin-bottom:5px;
    }
    .font18 {
        font-size:18px !important;
    }
    .font24 {

    }
    .font30 {

    }

    h2.card-title {
        margin-bottom:15px;
    }
    p.card-text {

    }
    .card-body p.card-text {

    }

    /*Jumbotron*/
    .p-5.text-start.accent-dark-bg {
        padding:20px !important;
    }

    .postcodes .icon-block.container.accent-light-bg {
        margin:0 !important;
        width:100% !important;
        max-width:unset;
        padding:20px;
    }
    .postcodes {
        padding-bottom:40px !important;
    }
    .postcodes .row {
        padding:0 !important;
    }
    .postcodes .featurette-heading {
        margin-top:60px;
    }
    .row.featurette {
        margin-left: 0 !important;
        margin-right:0 !important;
    }
    .arrow-left {
        transform:rotate(-90deg);
    }



    .project-wrapper h2,
    .project-wrapper p {
        text-align:center;
    }
    .project-wrapper {
        padding:15px;
        max-width:100%;
        margin-top:-40px !important;
    }
    .project-wrapper .gallery img {
        margin:10px 0 5px 0;
    }
    .mega-card img {
        border-radius:10px 10px 0 0 !important;
    }
    .mega-card div.main-mid-bg {
        border-radius:0 0 10px 10px !important
    }
    .carousel-control.carousel-control-next {
        transform:translateX(-20px) scale(0.9);
    }
    .carousel-control.carousel-control-prev {
        transform:translateX(20px) scale(0.9);
    }
    .contact-wrapper {
        margin-top:-20px !important;
    }
    .contact-wrapper div.icon-block.container {
        padding:5px;
    }
    .contact-wrapper > .col-md-7 {
        padding-bottom:50px !important;
    }
    .form-wrap-top .row.featurette {
        padding-top:0 !important;
    }

    .postcode-input-wrap {
        flex-direction:column !important;
    }
    .postcode-input-wrap input {
        margin-top:10px !important;
        min-width:100%;
    }
    .postcode-input-wrap button {
        margin-top:10px !important;
        min-width:100% !important;
        margin-left:0 !important;
    }

}


@media screen and (max-width:350px) {
    .postcoder-wrap form > div {
        flex-direction:column !important;
    }
    .needs-validation > div input {
        flex: 0 1 100% !important;
    }
    .needs-validation button[type="submit"] {
        margin:10px 0px !important;
        min-width:60%;
    }
    form.needs-validation span:has(svg) {
        display:none;
    }
    form.needs-validation input {
        border-radius:5px !important;
    }


}