@charset "utf-8";
/* CSS Document */



.container {
    width:min(90%, 1400px);
    margin:0 auto;
}

/*
============================== 
 Header 
============================== 
*/
#home {
    height:80vh;
    background:linear-gradient(rgba(0,0,0,0)40%, rgba(0,0,0,.7)),
    linear-gradient(rgba(48,84,150,0.5), rgba(27,179,160,0)35%),
    url(/images/header-mobile.jpg) center center no-repeat;
    background-size:cover;
}

#gallery {
    
}

.header-container {
    position:relative;
    height:100%;
    display:flex;
}

/*call to action*/
.hero-card {
    max-width:1000px;
    line-height:1.2;
    align-self: center;
    margin-bottom:-20%;
}

.hero-heading {
    color:white;
    margin-bottom:2rem;
    text-shadow: 0 0 10px rgba(0,0,0,0.7);
    /*overwrite default font size*/
    font-size:clamp(2.4rem,1rem + 2.5vw,4rem);
}

.cta-button {
    padding:1.5rem 2rem;
    background-color:var(--red);
    display:block;
    color:white;
    font-size:1.5rem;
    text-decoration:none;
    width:max-content;
    border-radius:10px;
    box-shadow:0px 0px 3px rgba(0,0,0,0.3);
    transition:background-color 0.3s ease-out; 
}

.cta-button:hover,
.cta-button:focus {
    color:var(--accent);
    background-color:white;
}

@media (min-width:1024px) {

    #home {
        background:linear-gradient(rgba(0,0,0,0)40%, rgba(0,0,0,.7)),
    linear-gradient(rgba(48,84,150,0.5), rgba(27,179,160,0)35%),
    url(/images/hero.webp) center top no-repeat;
        background-size:cover;
    }
    
    #gallery {
        
    }

    /*call to action*/
    .cta {
        width:max(70%,750px);
    }

}

/*
============================== 
ALL SECTIONS 
============================== 
*/
section {
    padding:var(--spacer) 0;
    position:relative;
}

.section-heading {
    font-size:2rem;
    color:var(--grey);
}

/*
============================== 
Section Why 
============================== 
*/
.why-container {
    text-align: center;
}

.why-intro {
    width:max(90%,300px);
    margin: 0 auto;
}

.why-intro p {
    font-size:1.3rem;
    margin-bottom:2rem;
}

.why-button {
    margin: 0 auto;
    margin-bottom:var(--spacer);
}

.why-gallery {
    list-style:none;
    display:flex;
    justify-content:space-between;
	gap:1rem;
    width:100%;
    list-style:none;
}

.why-image {
    width:33.333333%;
    min-height:200px;
    aspect-ratio:1;/*square images*/
}

.why-image-1 {
    background:url(/images/sectional.jpeg)center center no-repeat;
    background-size:cover;
}

.why-image-2 {
    background:url(/images/GarageDoorLogos.png)center center no-repeat;
    background-size:contain;
}

.why-image-3 {
    background:url(/images/RollerDoors/img-garage_051.jpg)center center no-repeat;
    background-size:cover;
}

@media (min-width:1024px) {
    
    .why-container {
        display:grid;
        grid-template-columns:1fr 2fr;
        column-gap:var(--spacer);
        text-align: left;
    }

    .why-heading {
        grid-column:1/2;
    }

    .why-intro p {
        font-size: var(--body-copy);
        margin-bottom:1.5rem;
    }

    .why-button {
        margin: 0;
    }

    .why-gallery {
        grid-column:2/3;
        grid-row:1/2;
    }

}

/*
============================== 
Section Services 
============================== 
*/
.products {
    background:var(--lt-grey);
}

.products-body {
    display:flex;
    flex-wrap:wrap;
    gap:var(--spacer);
    justify-content: center;
    font-size:var(--body-copy);
}

.products-header {
    text-align:center;
}

.products-main-heading {
    width:100%;
    background:coral;
}

.products-intro {
    width:max(60%,300px);
    margin:0 auto;
    font-size:var(--body-copy);
    margin-bottom:var(--spacer);
}

.product {
	width: 360px;
	height: 360px;
	display:grid;
    grid-template-rows: 2fr 1fr;
    text-align: center;
	overflow: hidden;
	transform: scale(100%);
	transition: transform 0.3s ease-out;
	background-image: url(/images/roller.jpg);
}

.product-upandover {
    background:url(/images/upandover.jpg) center center no-repeat;
}

.product-sectional {
    background:url(/images/sectional.jpg) center center no-repeat;
}

.product-roller {
    background:url(/images/roller.jpg) center center no-repeat;
}

.product-heading {
    padding-top:2rem;
    font-size:2rem;
    font-weight:600;
    color:#fff;
}

.product-body {
    color:white;
    text-align: center;
    padding:2rem;
}

.product-body a {
    text-decoration:none;
    text-transform:uppercase;
    color:white;
    display:block;
    background:rgba(182,2,3,0.85);
    padding:1rem 0;
    border-radius:10px;
}

.product:hover {
    transform:scale(105%);
}

@media (min-width:1024px) {

    .product-body {
        bottom:%;
    }

}

/*
============================== 
Section Customers 
============================== 
*/
.customers {
    background:var(--accent);
}

.customers-container {
    background:url(/images/66.png) left top no-repeat, url(/images/99.png) right bottom no-repeat;
    text-align:center;    
}

.section-heading-customers {
    color:white;
}

.quote, .customers-intro {
    width:min(90%,800px);
    margin:0 auto;
    color:white;
}

.customers-intro {
    text-transform:uppercase;
    font-size:1.2rem;
    font-weight:100;
    color:white;
    line-height:1.2;
    margin-bottom:2rem;
}

.author {
    color:white;
    font-weight:600;
    margin-bottom:1rem;
}

.location {
    font-weight:400;
}



/*
============================== 
Scroll to top button 
============================== 
*/

.scrolltop {
    background:var(--accent);
    font-weight:600;
    font-size: 1.2rem;
    color:white;
    text-decoration:none;
    padding:1.5rem;
    border-radius:10px;
    position:fixed;
    bottom:var(--spacer);
    right:-6rem;
    display:block;
    text-transform:uppercase;
    box-shadow:0px 0px 5px rgba(0,0,0,0.5);
    transition:right 0.3s ease-out;
}

.scrolltop:hover, .scrolltop:active {
    background:white;
    color:var(--accent);
}

.isvisible {
    right:2rem;
}