/* =================================================================
Table of Contents

- General
- Homepage
    - Hero Section
    - Blog Section
- Single Page
- Mobile Styles

================================================================= */

/* =================================================================
GENERAL
** Put your general styles here e.g. body, h1, h2, h3 ect, ul, li, a **
================================================================= */

html, body {
    min-height: 100vh;
}

body {
    display: flex;
    flex-direction: column;
}

#content {
    /*
    display: flex;
    flex-direction: column;
    */
    flex: 1;
}

.content-wrap {
    /*
    display: flex;
    flex: 1;
    flex-direction: column;
    */
}

/* =================================================================
HOMEPAGE
** Add Homepage styles here **
================================================================= */

/* ====== Sub Section ** e.g. Hero Section, Blog Section ====== */

/* =================================================================
PRODUCT PAGE
** Add styles for individual page here **
================================================================= */

.section-1 {
    padding-top: 5%;
    padding-bottom: 5%;
}

.section-2 {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #f2f2f2;
}

.section-3 {
    padding-top: 5%;
    padding-bottom: 5%;
}

.section-4 {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #f2f2f2;
}

.section-5 {
    padding-top: 5%;
    padding-bottom: 5%;
}

.section-6 {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #f2f2f2;
}

.section-7 {
    padding-top: 5%;
    padding-bottom: 5%;
}

.section-8 {
    padding-top: 5%;
    padding-bottom: 5%;
    background-color: #f2f2f2;

}

/* PHOTO GRID CSS */
.grid-wrapper > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-wrapper > div > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0px;
}

.grid-wrapper {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: auto auto auto;
    grid-auto-rows: 150px;
    grid-auto-flow: dense;
}

.grid-wrapper .wide {
    grid-column: span 2;
}

.grid-wrapper .tall {
    grid-row: span 3;
}

.grid-wrapper .big {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-section {
    padding-top: 8rem !important;
    padding-bottom: 8rem !important;
}


.container-fluid.gallery-section.animated {
    padding-top: 80px !important;
    padding-bottom: 80px !important;

}

p.text-black.text-center.case-studies {
    padding: 0em 8em 3em 8em;
}

svg#Layer_1 {
    width: 136px;
}

.swiper-button-prev, .swiper-button-next {
    color: #000 !important;
}

.info-top {
    padding-right: 5rem;
    padding-left: 5rem;
    padding-top: 5rem;
}

.swiper-button-opacity {
    color: #B1B1B4;
    background-color: rgb(255 255 255 / 67%) !important;
}

ul.nav.navbar-nav.order-2.ms-auto.nav-no-opacity {
    margin-right: 2rem;
}


/* =================================================================
SINGLE PAGE
** Add styles for individual page here **
================================================================= */


/* =================================================================
MOBILE STYLES
** Put all mobile styles here **
================================================================= */

@media only screen and (max-width: 1024px) {
    /* ====== General ====== */
    /* ====== Homepage ====== */
    /* ====== Single Page ====== */

}

@media only screen and (max-width: 769px) {
    /* ====== General ====== */
    p.text-black.mb-0.text-center.case-studies {
        padding-left: 0rem;
        padding-right: 0rem;
    }


    p.text-black.text-center.case-studies {
        padding: 0em 0em 0em 0em !important;
    }

    .row.gy-60.align-items-center.section2 {
        display: flex;
        flex-direction: column-reverse;
    }

    .row.gy-60.align-items-center.section3 {
        display: flex;
        flex-direction: column-reverse;
    }

    .col-12.col-lg-6.s1para {
        margin-top: 0rem !important;
    }

    p.para-text.text-center.text-white {
        padding: 0 0rem 0px 0rem !important;
    }


    .policies-pages {
        padding: 2rem 1rem 2rem 1rem !important;
    }


    /* ====== Homepage ====== */
    /* ====== product Page ====== */
    p.para-text.text-center.text-white {
        padding: 0 0rem 0px 0rem !important;
    }

    .row.gy-60.align-items-center.stone {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .row.gy-60.align-items-center.coursed {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .row.gy-60.align-items-center.copings {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .row.gy-60.align-items-center.paving {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .row.gy-60.align-items-center.masonry {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .row.gy-60.align-items-center.signs {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .row.gy-60.align-items-center.rockery {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .row.gy-60.align-items-center.granite {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 3rem;
        padding-bottom: 3rem;

    }

    a.btn.btn-accent-3.spacer {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    .info-top {
        padding-right: 1rem;
        padding-left: 1rem;
        padding-top: 5rem;
    }


}

@media only screen and (max-width: 480px) {
    /* ====== General ====== */
    /* ====== Homepage ====== */
    /* ====== Single Page ====== */

}