/*==================================================
    DESIGN TOKENS
    ------------------------------------------------
    Global colors, spacing, shadows and animations.
    Change them here to affect the entire site.
==================================================*/

:root{
    /* Colors */
    --white:#ffffff;
    --navy:#0F2238;
    --gold:#C89D42;
    --brown:#8B6A46;
    --background:#FAF8F5;
    --text:#343434;
    --text-light:#666666;

    /* Common Values */
    --radius:10px;

    /* Effects */
    --shadow:0 10px 25px rgba(0,0,0,.18);
    --shadow-hover:0 6px 16px rgba(0,0,0,.18);
    --transition:.25s ease;

    /* Fonts */
    --heading-font: "Playfair Display", serif;
}

/* Global Reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*==================================================
    GLOBAL STYLES
==================================================*/


/*==================================================
    GLOBAL LAYOUT
==================================================*/

.container{

    max-width:1280px;

    margin:0 auto;

    padding:0 30px;

}

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

/* Shared button styles */

.btn{

    display:inline-block;

    padding:16px 34px;

    border-radius:var(--radius);

    text-decoration:none;

    font-size:1rem;
    font-weight:600;

    transition:
        background-color .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;

}


/* Primary Button */

.btn-primary{

    background:var(--gold);
    color:var(--white);

}

.btn-primary:hover{

    transform:translateY(-2px);
    box-shadow:var(--shadow-hover);

}

.btn-100 {
    width: 100%;
}

/* Secondary Button */

.btn-secondary{

    background:transparent;

    color:var(--white);

    border:2px solid var(--white);

}

.btn-secondary:hover{

    background:rgba(255,255,255,.12);

    transform:translateY(-2px);
    box-shadow:var(--shadow-hover);

}

/*==================================================
    HEADER SECTION
==================================================*/

header{

    position:absolute;
    top:0;
    left:0;

    width:100%;
    z-index:1000;

}

/*==================================================
    LOGO SECTION
==================================================*/

.logo{

    display:flex;

    flex-direction:column;

    justify-content:center;

    text-decoration:none;

    margin-right:90px;

    font-family:var(--heading-font);

    font-weight:700;

    line-height:.9;

    text-transform:uppercase;

    color:var(--gold);

    font-size:1.05rem;

    letter-spacing:.45em;

}

.logo span{

    color:var(--gold);

    font-size:1.8rem;

    letter-spacing:.02em;

    margin-bottom:4px;

}

/*==================================================
    NAVIGATION SECTION
==================================================*/

.navbar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    width:100%;

    padding:30px 0;

}

.nav-links{

    display:flex;

    justify-content:center;

    gap:52px;

    list-style:none;

    margin-right:auto;
}

.nav-links a{

    color:var(--white);

    text-decoration:none;

    font-weight:500;

    transition:color var(--transition);

}

.nav-links a:hover{

    color:var(--gold);

}

.nav-button{

    margin-left:50px;    

    min-width:170px;

    padding:8px 20px;

    font-size:.95rem;

    text-align:center;

}
/*==================================================
    HERO SECTION
==================================================*/

.hero{

    /* Layout */
    display:grid;
    align-items:start;

    /* Box Model */
    min-height:680px;
    padding-top:120px;

    /* Background */
    background-image:
        linear-gradient(
            rgba(10,24,43,.72),
            rgba(10,24,43,.72)
        ),
        url("../assets/images/hero.png");

    background-size:cover;
    background-position:center;

    /* Typography */
    line-height:1.9;
}


/* Hero Content */

.hero-content{

    max-width:560px;

}


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

.hero h1{

    color:var(--white);

    font-size:4.5rem;
    line-height:1.05;

    margin-bottom:30px;

}

.hero h1 span{

    display:block;
    color:var(--gold);

}

.hero p{

    color:var(--white);

    font-size:1.25rem;
    font-weight:400;
    line-height:1.8;

    margin:30px 0;

    max-width:650px;

}


/*==================================================
    HERO BUTTON LAYOUT
==================================================*/

.hero-buttons{

    display:flex;
    gap:20px;

    margin-top:60px;

}

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

.hero-highlights{

    display:flex;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

    color:#fff;

    font-size:.95rem;

    font-weight:600;

}

.highlight{

    display:flex;

    align-items:center;

    gap:8px;

}

.highlight i{

    color:var(--gold);

    font-size:1rem;

}
.highlight-link,
.highlight-link:link,
.highlight-link:visited{

    color:var(--white);

    text-decoration:none;

}

.highlight-link:hover{

    color:var(--gold);

}

.highlight-link:hover i{

    color:var(--gold);

}
/*==================================================
    HERO CONTACT
==================================================*/

.hero-contact{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

    margin-top:30px;

    font-size:1.05rem;

    font-weight:600;

}

.hero-contact a{

    color:var(--white);

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:10px;

    transition:color .25s ease;

}

.hero-contact a:hover{

    color:var(--gold);

}

.hero-contact i{

    color:var(--gold);

}

/*==================================================
    SERVICES 
==================================================*/

/* Section */

.services{
    padding:60px 30px 80px;
    background:var(--background);
}

.our-services{

    padding:80px 0 60px;

    background:var(--light-background);

}

/* Section Heading */

.section-heading{

    max-width:700px;

    margin:0 auto 35px;

    text-align:center;

    color:var(--text);
}

.section-heading .eyebrow{

    color:var(--gold);

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

    font-size:.85rem;

    margin-bottom:8px;
}

.section-heading h2{

    color:var(--text);

    margin:12px 0 18px;

    font-size:2.6rem;

    line-height:1.2;
}

.section-heading p{

    color:var(--text-light);

    font-size:1rem;

    line-height:1.7;
}

/* Grid */

.services-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

    margin-top:45px;

}

@media (max-width:900px){

    .services-grid{

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

    }

}

@media (max-width:640px){

    .services-grid{

        grid-template-columns:1fr;

    }

}

/* Cards */

.service-card{

    background:var(--white);

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 5px 15px rgba(0,0,0,.08);

    transition:transform .3s ease,
               box-shadow .3s ease;

}

.service-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.service-card img{

    width:100%;

    height:220px;

    object-fit:cover;

    transition:transform .4s ease;
}

.service-card:hover img{

    transform:scale(1.05);
}

.service-content{

    padding:22px;
}

.service-content h3{

    font-size:1.25rem;

    margin-bottom:10px;
}

.service-content p{

    font-size:1rem;

    line-height:1.65;
    
    margin:0;

    color:var(--text-light);
}

/*==================================================
    WHY CHOOSE PAUL
==================================================*/

/* Section */

.why-choose{

    margin-top:0;

    padding:60px 30px 70px;

    background:var(--white);

}

/* Grid */

.features-grid{

    display:grid;
    grid-template-columns:repeat(4,1fr);

    gap:30px;

    margin-top:40px;

}

/* Cards */

.feature-card{

    text-align:center;

    padding:35px 25px;

}

.feature-icon{

    width:90px;
    height:90px;

    margin:0 auto 30px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:rgba(200,157,66,.12);

    color:var(--gold);

    font-size:2rem;

}

.feature-icon i{

    font-size:2.2rem;

}

.feature-card h3{

    margin-bottom:16px;

    font-size:1.35rem;

    color:var(--text);

}

.feature-card p{

    margin:0;

    color:var(--text-light);

    line-height:1.65;

}

.why-footer{

    margin-top:70px;

    text-align:center;

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:var(--text-light);

}

.why-footer .separator{

    margin:0 12px;

    color:var(--gold);

}

/*==================================================
    GALLERY
==================================================*/

/* Section */

.gallery{

    padding:70px 30px;

    background:#f8f8f8;

}

.gallery-filters{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin:45px 0;

}

.gallery-filters button{

    padding:12px 24px;

    border:1px solid var(--gold);

    background:transparent;

    color:var(--gold);

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

    font-weight:600;

}

.gallery-filters button:hover,
.gallery-filters button.active{

    background:var(--gold);

    color:white;

}

/* Grid */

.gallery-grid{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:24px;

}

/* Cards */

.gallery-item{

    display:block;

    position:relative;

    overflow:hidden;

    border-radius:16px;

    background:var(--white);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

    cursor:pointer;

}

.gallery-item img{

    display:block;

    width:100%;

    aspect-ratio:5 / 4;

    object-fit:cover;

    transition:.45s ease;

}

.gallery-item:hover img{

    transform:scale(1.06);

}

.gallery-caption{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:14px 18px;

    background:linear-gradient(
        transparent,
        rgba(15,34,56,.88)
    );

    color:var(--white);

    font-size:.95rem;

    font-weight:600;

    opacity:0;

    transition:opacity .25s ease;

}

.gallery-item:hover .gallery-caption{

    opacity:1;

}

.gallery .container{

    max-width:1400px;

}

/*=========================================
    ESTIMATE PAGE
=========================================*/

.estimate-grid{

    display:grid;

    grid-template-columns: 45% 55%;

    gap:60px;

    align-items:start;

}

.estimate-benefits{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.estimate-benefits li{

    margin-bottom:10px;

    display:flex;

    align-items:center;

    gap:12px;

}

.estimate-benefits i{

    color:var(--gold);

}

.estimate-image{

    width:75%;

    border-radius:16px;

    margin-top:25px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.estimate-form-card{

    background:white;

    border-radius:16px;

    padding:40px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.form-group input,
.form-group select,
.form-group textarea{

    width:100%;

    padding:14px 16px;

    border:1px solid #ddd;

    border-radius:8px;

    font:inherit;

}

textarea{

    resize:vertical;

}

.radio-group{

    display:flex;

    gap:24px;

    align-items:center;

    flex-wrap:wrap;
}

.radio-group label{

    display:flex;

    align-items:center;

    gap:6px;

    font-weight:400;

}

@media(max-width:900px){

    .estimate-grid{

        grid-template-columns:1fr;

    }

}

/*=========================================
    THANK YOU PAGE
=========================================*/

.thank-you{

    display:flex;

    justify-content:center;

}

.thank-you-card{

    max-width:700px;

    background:white;

    padding:60px;

    border-radius:18px;

    text-align:center;

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

}

.thank-you-icon{

    font-size:5rem;

    color:var(--gold);

    margin-bottom:25px;

}

.thank-you-card h2{

    margin-bottom:20px;

}

.thank-you-card p{

    margin-bottom:20px;

    line-height:1.8;

}

.thank-you-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    margin-top:40px;

    flex-wrap:wrap;

}

/* ===========================
   LIGHTBOX
============================ */

.lightbox{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.9);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:1000;

}

.lightbox.active{

    opacity:1;

    visibility:visible;

}

.lightbox img{

    max-width:min(90vw, 1200px);

    max-height:80vh;

    width:auto;

    height:auto;

    border-radius:12px;

    box-shadow:0 20px 60px rgba(0,0,0,.6);

    opacity:0;

    transform:scale(.95);

    transition:.3s ease;

}

.lightbox.active img{

    opacity:1;

    transform:scale(1);

}

.lightbox-close{

    position:absolute;

    top:20px;

    right:25px;

    color:#fff;

    font-size:3rem;

    font-weight:300;

    cursor:pointer;

    z-index:1001;

}

/*=========================================
    LIGHTBOX ARROWS
=========================================*/

.lightbox-prev,
.lightbox-next{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    color:#fff;

    font-size:3rem;

    font-weight:300;

    cursor:pointer;

    padding:20px;

    user-select:none;

    transition:.25s;

    z-index:1001;

}

.lightbox-prev{

    left:20px;

}

.lightbox-next{

    right:20px;

}

.lightbox-prev,
.lightbox-next{

    background:none;
    border:none;
    color:#fff;

}
.lightbox-prev:hover,
.lightbox-next:hover{

    color:var(--gold);

}

/*=========================================
    INNER PAGE HERO
=========================================*/

.page-hero{

    display:flex;
    align-items:center;

    min-height:380px;

    padding-top:120px;

    background:
        linear-gradient(rgba(10,24,43,.72),rgba(10,24,43,.72)),
        url("../assets/images/page-hero.jpg");

    background-size:cover;
    background-position:center;

}

.page-hero h1{

    color:#fff;

    font-size:3.6rem;

    margin-bottom:15px;

}

.page-hero p{

    color:#fff;

    max-width:700px;

    font-size:1.15rem;

}

/*=========================================
    BREADCRUMBS
=========================================*/

.breadcrumb{

    margin-bottom:20px;

    font-size:.95rem;

}

.breadcrumb a{

    color:var(--gold);

    text-decoration:none;

}

.breadcrumb span{

    color:rgba(255,255,255,.75);

}

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

.page-content{

    padding:90px 30px;

    background:var(--background);

}

.page-section{

    margin-bottom:90px;

}

.page-section:last-child{

    margin-bottom:0;

}

.financing-overview {
    padding: 2rem 0 3rem;
}

.two-column {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 4rem;
    align-items: center;
}

.two-column img {
    width: 100%;
    border-radius: 12px;
    display: block;
    box-shadow: 0 12px 30px rgba(0,0,0,.12);
}

.feature-list {
    list-style: none;
    padding: 0;
    margin: 2rem 0 0;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-bottom: 1rem;
    font-size: 1.05rem;
}

.feature-list i {
    color: var(--gold);
}

.financing-page {
    padding: 90px 30px 20px;
}

.financing-card {
    max-width:650px;
    margin-left:auto;
    margin-right:auto;
    margin: 0 auto;
    padding: 3rem;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
}

.financing-cta {
    padding-top: 35px;
}

.center-button {
    text-align: center;
    margin: 2.5rem 0;
    padding:18px 42px;
    font-size:1.05rem;
}

.small-print {
    font-size: .9rem;
    color:#888;
    font-size:.85rem;
    text-align: center;
    margin-top: 2rem;
}

@media (max-width: 900px) {

    .two-column {
        grid-template-columns: 1fr;
    }

}

/*=========================================
    GALLERY PAGE
=========================================*/

.gallery-intro{

    margin-bottom:70px;

}

.gallery-feature-image{

    width:100%;

    height:480px;

    object-fit:cover;

    border-radius:16px;

    margin-top:45px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.project-gallery{

    margin-bottom:20px;

}

.project-gallery .gallery-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:24px;

}

.project-gallery .gallery-item{

    overflow:hidden;

    border-radius:14px;

    box-shadow:0 8px 20px rgba(0,0,0,.08);

    transition:transform .3s ease,
               box-shadow .3s ease;

}

.project-gallery .gallery-item:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(0,0,0,.15);

}

.project-gallery .gallery-item img{

    width:100%;

    aspect-ratio:4/3;

    object-fit:cover;

    transition:transform .4s ease;

}

.project-gallery .gallery-item:hover img{

    transform:scale(1.05);

}

@media (max-width:900px){

    .project-gallery .gallery-grid{

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

    }

}

@media (max-width:640px){

    .project-gallery .gallery-grid{

        grid-template-columns:1fr;

    }

    .gallery-feature-image{

        height:260px;

    }

}

.estimate-photo{

    width:60%;

    margin:25px auto 0;

    text-align:center;

}

.estimate-image{

    width:100%;

    display:block;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.estimate-photo figcaption{

    margin-top:10px;

    line-height:1.35;

}

.estimate-photo strong{

    display:block;

    margin-bottom:2px;

    color:var(--navy);

    font-size:1.15rem;

    font-weight:700;

}

.estimate-photo span{

    color:#777;

    font-size:.95rem;

}

.checkbox-group{

    display:flex;

    align-items:center;

    gap:10px;

}

.checkbox-group input{

    width:auto;

}
/*=========================================
    CONTACT PAGE
=========================================*/

.contact-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:start;

    margin-top:60px;

}

.contact-photo{

    width:65%;

    display:block;

    margin:0 auto 25px;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(0,0,0,.12);

}

.contact-about h3{

    margin-bottom:18px;

}

.contact-about p{

    margin-bottom:20px;

    line-height:1.8;

}

.contact-highlights{

    list-style:none;

    padding:0;

    margin:35px 0 0;

}

.contact-highlights li{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:14px;

}

.contact-highlights i{

    color:var(--gold);

}

.contact-card{

    background:var(--white);

    padding:45px;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.contact-card h3{

    margin-bottom:18px;

}

.contact-card p{

    margin-bottom:30px;

    line-height:1.8;

}

.contact-method{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:30px;

}

.contact-method i{

    width:24px;

    font-size:1.3rem;

    color:var(--gold);

    margin-top:4px;

}

.contact-method strong{

    display:block;

    margin-bottom:4px;

    color:var(--navy);

}

.contact-method a{

    color:inherit;

    text-decoration:none;

}

.contact-method a:hover{

    color:var(--gold);

}

.contact-method p{

    margin:0;

}

.contact-card .btn{

    margin-top:20px;

    width:100%;

}

.contact-cta{

    padding-top:40px;

}

@media (max-width:900px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:50px;

        align-items:start;

    }

    .contact-photo{

        width:60%;

    }

}

/*=========================================
    REVIEWS PAGE
=========================================*/

.reviews-card{

    max-width:700px;

    margin:0 auto;

    background:var(--white);

    padding:60px;

    text-align:center;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.reviews-icon{

    font-size:4rem;

    color:var(--gold);

    margin-bottom:25px;

}

.reviews-card h3{

    margin-bottom:20px;

}

.reviews-card p{

    line-height:1.8;

    margin-bottom:35px;

}
.service-row{

display:grid;

grid-template-columns:1fr 1fr;

gap:70px;

align-items:center;

margin:90px 0;

}

.service-row:nth-child(even){

direction:rtl;

}

.service-row:nth-child(even)>*{

direction:ltr;

}

.service-image img{

width:100%;

border-radius:16px;

box-shadow:0 12px 30px rgba(0,0,0,.08);

}

.service-content ul{

list-style:none;

padding:0;

margin:25px 0;

}

.service-content li{

margin-bottom:12px;

}

.service-content li::before{

content:"✓";

color:var(--gold);

font-weight:bold;

margin-right:10px;

}

.why-grid{

display:grid;

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

gap:35px;

margin-top:50px;

}
/*==================================================
    FOOTER
==================================================*/

.site-footer{

    background:var(--navy);

    color:var(--white);

    text-align:center;

    padding:80px 30px 50px;

}

.footer-logo{

    display:block;
    
    width:320px;

    max-width:90%;

    margin:0 auto 45px;

}

.footer-badges{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:30px;

    margin-bottom:35px;

    font-weight:600;

}

.footer-badges span{

    display:flex;

    align-items:center;

    gap:8px;

}

.footer-badges i{

    color:var(--gold);

}

.footer-text{

    max-width:700px;

    margin:0 auto 35px;

    color:rgba(255,255,255,.85);

    line-height:1.8;

    font-size:1.05rem;

}

.site-footer .btn{

    margin-bottom:45px;

}

.footer-copyright{

    font-size:.9rem;

    color:rgba(255,255,255,.65);

    margin:0;

}


/*=========================================
    FOOTER CONTACT
=========================================*/

.footer-contact{

    margin:35px 0;

}

.footer-contact p{

    margin:12px 0;

    font-size:1.05rem;

}

.footer-contact i{

    color:var(--gold);

    width:28px;

}

.footer-contact a,
.footer-contact a:link,
.footer-contact a:visited,
.footer-contact a:hover,
.footer-contact a:active{

    color: var(--white) !important;
    text-decoration: none !important;

    -webkit-text-fill-color: var(--white);

}
/*=========================================
    RESPONSIVE
=========================================*/

@media (max-width: 768px) {

    .features-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .hero h1 {
        font-size: 3rem;
    }

    .navbar {
        flex-wrap: wrap;
    }

    .nav-links {
        display: none;
    }

    .nav-button {
        margin-left: 0;
        min-width: auto;
    }
    .hero-contact{

        flex-direction:column;

        align-items:flex-start;

        gap:12px;

    }
}