/*=========================================================
PRODUCTS PAGE
Modern Eco Build
=========================================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/*=========================================================
HERO
=========================================================*/

.services-hero{
    position:relative;
    height:60vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.products-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
}

.about-content{
    position:relative;
    z-index:2;
    width:min(900px,90%);
}

.about-content h1{

    color:#fff;
    font-size:58px;
    font-weight:700;

    margin-bottom:18px;

    letter-spacing:-1px;

    text-shadow:0 15px 40px rgba(0,0,0,.35);

}

.about-content p{

    color:#f4f4f4;

    font-size:18px;

    line-height:1.9;

}


/*=========================================================
COMMON SECTION
=========================================================*/

.products-section,
.external-cladding-section,
.internal-cladding-section,
.decking-section{

    padding:100px 5%;

    background:#f8fafc;

}

.external-cladding-section{

    background:#ffffff;

}

.internal-cladding-section{

    background:#f7f9fc;

}

.decking-section{

    background:#ffffff;

}


/*=========================================================
SECTION TITLES
=========================================================*/

.products-title,
.external-title,
.internal-title,
.decking-title{

    max-width:900px;

    margin:0 auto 70px;

    text-align:center;

}

.products-title span,
.external-title span,
.internal-title span,
.decking-title span{

    display:inline-block;

    background:#dcfce7;

    color:#15803d;

    padding:10px 22px;

    border-radius:100px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.products-title h2,
.external-title h2,
.internal-title h2,
.decking-title h2{

    font-size:46px;

    color:#0f172a;

    margin-bottom:18px;

    font-weight:700;

}

.products-title p,
.external-title p,
.internal-title p,
.decking-title p{

    color:#64748b;

    line-height:1.9;

    font-size:17px;

}

/*=========================================================
UNIVERSAL GRID LAYOUT
=========================================================*/

.products-grid,
.external-grid,
.internal-grid,
.decking-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:40px;

    max-width:1500px;

    margin:auto;

}


/*=========================================================
COMMON CARD DESIGN
=========================================================*/

.product-card,
.external-card,
.internal-card,
.decking-card{

    background:#ffffff;

    border-radius:26px;

    overflow:hidden;

    box-shadow:
        0 15px 40px rgba(15,23,42,.08);

    transition:.4s ease;

    border:1px solid rgba(226,232,240,.9);

    display:flex;

    flex-direction:column;

    height:100%;

    position:relative;

}


/* Premium Top Border */

.product-card::before,
.external-card::before,
.internal-card::before,
.decking-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(
        90deg,
        #16a34a,
        #22c55e,
        #4ade80
    );

}


/*=========================================================
CARD HOVER
=========================================================*/

.product-card:hover,
.external-card:hover,
.internal-card:hover,
.decking-card:hover{

    transform:translateY(-10px);

    box-shadow:
        0 25px 60px rgba(15,23,42,.15);

}


/*=========================================================
IMAGE
=========================================================*/

.product-image-wrap,
.external-image,
.internal-image,
.decking-image{

    width:100%;

    height:380px;

    overflow:hidden;

    position:relative;

}


/* Dark Image Overlay */

.product-image-wrap::after,
.external-image::after,
.internal-image::after,
.decking-image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.15),
        transparent 45%
    );

}


.product-image-wrap img,
.external-image img,
.internal-image img,
.decking-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}


.product-card:hover img,
.external-card:hover img,
.internal-card:hover img,
.decking-card:hover img{

    transform:scale(1.06);

}


/*=========================================================
CONTENT
=========================================================*/

.product-content,
.external-content,
.internal-content,
.decking-content{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex:1;

}


/*=========================================================
HEADINGS
=========================================================*/

.product-content h3,
.external-content h3,
.internal-content h3,
.decking-content h3{

    font-size:28px;

    color:#0f172a;

    margin-bottom:18px;

    font-weight:700;

}


/*=========================================================
DESCRIPTION
=========================================================*/

.product-content p,
.external-content p,
.internal-content p,
.decking-content p{

    color:#64748b;

    line-height:1.8;

    font-size:15px;

    margin-bottom:25px;

    flex:1;

}

/*=========================================================
PRODUCT LABEL
=========================================================*/

.product-label{

    display:inline-block;

    background:#f1f5f9;

    color:#475569;

    padding:9px 18px;

    border-radius:100px;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

/*=========================================================
SIZE BUTTONS
=========================================================*/

.product-size,
.external-size,
.internal-size,
.decking-size{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:fit-content;

    padding:12px 22px;

    border-radius:100px;

    background:linear-gradient(
        135deg,
        #ecfdf5,
        #dcfce7
    );

    color:#15803d;

    font-size:14px;

    font-weight:700;

    border:1px solid rgba(34,197,94,.15);

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.8),
        0 6px 18px rgba(34,197,94,.12);

    transition:.3s ease;

    text-align:center;

    margin-bottom:15px;

}


/* Hover */

.product-size:hover,
.external-size:hover,
.internal-size:hover,
.decking-size:hover{

    transform:translateY(-2px);

    box-shadow:
        inset 0 1px 2px rgba(255,255,255,.8),
        0 12px 25px rgba(34,197,94,.20);

}


/*=========================================================
EXTERNAL SIZE GROUP
=========================================================*/

.external-size-group{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}

.external-size{

    margin-bottom:0;

    flex:1;

    min-width:145px;

}

/*=========================================================
ENQUIRE BUTTON
=========================================================*/

.product-content .btn,
.external-content .btn,
.internal-content .btn,
.decking-content .btn{

    display:block;

    width:100%;

    text-align:center;

    margin-top:auto;

    text-decoration:none;

    padding:16px 20px;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        #22c55e,
        #15803d
    );

    color:#ffffff;

    font-weight:600;

    font-size:15px;

    transition:.35s ease;

    box-shadow:
        0 10px 25px rgba(34,197,94,.30);

}


/* Button Hover */

.product-content .btn:hover,
.external-content .btn:hover,
.internal-content .btn:hover,
.decking-content .btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 35px rgba(34,197,94,.40);

    background:linear-gradient(
        135deg,
        #16a34a,
        #166534
    );

}


/*=========================================================
CARD SPACING
=========================================================*/

.product-content>*:last-child,
.external-content>*:last-child,
.internal-content>*:last-child,
.decking-content>*:last-child{

    margin-bottom:0;

}

/*=========================================================
LARGE DESKTOP
=========================================================*/

@media(min-width:1600px){

.products-grid,
.external-grid,
.internal-grid,
.decking-grid{

    max-width:1650px;

}

.product-image-wrap,
.external-image,
.internal-image,
.decking-image{

    height:430px;

}

}



/*=========================================================
LAPTOP
=========================================================*/

@media(max-width:1200px){

.products-grid,
.external-grid,
.internal-grid,
.decking-grid{

    gap:30px;

}

.product-image-wrap,
.external-image,
.internal-image,
.decking-image{

    height:340px;

}

.about-content h1{

    font-size:48px;

}

}



/*=========================================================
TABLET
=========================================================*/

@media(max-width:992px){

.products-section,
.external-cladding-section,
.internal-cladding-section,
.decking-section{

    padding:80px 30px;

}

.products-grid,
.external-grid,
.internal-grid,
.decking-grid{

    grid-template-columns:1fr;

}

.product-image-wrap,
.external-image,
.internal-image,
.decking-image{

    height:360px;

}

.products-title h2,
.external-title h2,
.internal-title h2,
.decking-title h2{

    font-size:38px;

}

.about-content h1{

    font-size:42px;

}

.about-content p{

    font-size:17px;

}

}



/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px){

.services-hero{

    height:48vh;

}

.about-content{

    width:92%;

}

.about-content h1{

    font-size:34px;

    line-height:1.2;

}

.about-content p{

    font-size:15px;

    line-height:1.8;

}

.products-section,
.external-cladding-section,
.internal-cladding-section,
.decking-section{

    padding:70px 18px;

}

.products-title,
.external-title,
.internal-title,
.decking-title{

    margin-bottom:45px;

}

.products-title h2,
.external-title h2,
.internal-title h2,
.decking-title h2{

    font-size:30px;

}

.products-title p,
.external-title p,
.internal-title p,
.decking-title p{

    font-size:15px;

}

.products-grid,
.external-grid,
.internal-grid,
.decking-grid{

    grid-template-columns:1fr;

    gap:25px;

}

.product-image-wrap,
.external-image,
.internal-image,
.decking-image{

    height:280px;

}

.product-content,
.external-content,
.internal-content,
.decking-content{

    padding:22px;

}

.product-content h3,
.external-content h3,
.internal-content h3,
.decking-content h3{

    font-size:22px;

}

.product-content p,
.external-content p,
.internal-content p,
.decking-content p{

    font-size:15px;

}

.product-size,
.external-size,
.internal-size,
.decking-size{

    width:100%;

    justify-content:center;

    text-align:center;

    font-size:13px;

    padding:12px 15px;

}

.product-content .btn,
.external-content .btn,
.internal-content .btn,
.decking-content .btn{

    width:100%;

    padding:15px;

    font-size:15px;

}

}



/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px){

.services-hero{

    height:42vh;

}

.about-content h1{

    font-size:28px;

}

.about-content p{

    font-size:14px;

}

.product-image-wrap,
.external-image,
.internal-image,
.decking-image{

    height:230px;

}

.product-content,
.external-content,
.internal-content,
.decking-content{

    padding:18px;

}

.product-content h3,
.external-content h3,
.internal-content h3,
.decking-content h3{

    font-size:20px;

}

}

.external-size-group{

    justify-content:center;

}

.external-size{

    flex:1 1 calc(50% - 10px);

    min-width:120px;

}


/*=========================================================
SMOOTH ANIMATION
=========================================================*/

.product-card,
.external-card,
.internal-card,
.decking-card{

    animation:fadeUp .7s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}