/*==============================================================================
    GIS CURTAIN DÉCOR
    File        : about.css
    Version     : 2.1.0
    Description : About Page Styles
    Author      : GIS Curtain Décor

    ----------------------------------------------------------------------------
    CONTENTS
    ----------------------------------------------------------------------------
    01. Page Hero
    02. Breadcrumb
    03. Company Story
    04. Story Image
    05. Story Content
    06. Story Features
    07. Mission & Vision
    08. Mission Image
    09. Mission Content
    10. Mission Box
    11. Original Vision Components
    12. Values
    13. Process
    14. About CTA
    15. Responsive Design
    16. Accessibility & Motion
==============================================================================*/


/*==============================================================================
    01. PAGE HERO
==============================================================================*/

.page-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    background: #000;
}

.page-hero-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

    .page-hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform: scale(1.04);
        transition: transform 8s ease;
    }

.page-hero:hover .page-hero-image img {
    transform: scale(1);
}

.page-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient( 90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.60) 48%, rgba(0,0,0,.48) 100% );
}

    .page-overlay::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient( circle at 15% 20%, rgba(200,169,106,.16), transparent 52% );
        pointer-events: none;
    }

.page-hero > .container {
    position: relative;
    z-index: 5;
}

.page-hero-content {
    width: 100%;
    max-width: 850px;
    margin-inline: auto;
    padding: 120px 0 80px;
    text-align: center;
}

    .page-hero-content .section-tag {
        margin-bottom: 1rem;
        color: var(--primary);
    }

    .page-hero-content h1 {
        margin: 1rem 0 1.5rem;
        color: var(--white);
        line-height: 1.08;
        text-wrap: balance;
    }

    .page-hero-content p {
        max-width: 720px;
        margin-inline: auto;
        color: rgba(255,255,255,.90);
        font-size: 1.05rem;
        line-height: 1.9;
    }


/*==============================================================================
    02. BREADCRUMB
==============================================================================*/

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 2rem;
}

    .breadcrumb a {
        color: var(--white);
        font-weight: 500;
        transition: var(--transition);
    }

        .breadcrumb a:hover {
            color: var(--primary);
        }

    .breadcrumb span {
        color: rgba(255,255,255,.75);
    }


/*==============================================================================
    03. COMPANY STORY
==============================================================================*/

.company-story,
.our-story {
    padding: var(--section-space) 0;
    background: var(--white);
}

.story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 5rem;
}


/*==============================================================================
    04. STORY IMAGE
==============================================================================*/

.story-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--light);
    box-shadow: var(--shadow-md);
}

    .story-image::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( to bottom, transparent 65%, rgba(0,0,0,.10) );
        pointer-events: none;
    }

    .story-image img {
        width: 100%;
        height: 650px;
        object-fit: cover;
        object-position: center;
        transition: transform .8s ease;
    }

    .story-image:hover img {
        transform: scale(1.05);
    }


/*==============================================================================
    05. STORY CONTENT
==============================================================================*/

.story-content {
    max-width: 650px;
}

    .story-content .section-tag {
        margin-bottom: .75rem;
    }

    .story-content h2 {
        margin: 1rem 0 1.5rem;
        line-height: 1.12;
        text-wrap: balance;
    }

    .story-content p {
        margin-bottom: 1.25rem;
        color: var(--text);
        line-height: 1.9;
    }

    .story-content > .btn-primary {
        margin-top: 1rem;
    }


/*==============================================================================
    06. STORY FEATURES
==============================================================================*/

/*
    Current about.html uses .story-features + .feature-item.
    Original about.css used .story-list + .story-item.

    Both are supported so existing content is not unnecessarily broken.
*/

.story-features,
.story-list {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin: 2.25rem 0 1.5rem;
}

    .story-features .feature-item,
    .story-list .story-item {
        display: flex;
        align-items: center;
        gap: 1rem;
        transition: var(--transition);
    }

        .story-features .feature-item:hover,
        .story-list .story-item:hover {
            transform: translateX(7px);
        }

        .story-features .feature-item i,
        .story-list .story-item i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            flex: 0 0 44px;
            border-radius: 50%;
            background: rgba(200,169,106,.12);
            color: var(--primary);
            transition: var(--transition);
        }

        .story-features .feature-item:hover i,
        .story-list .story-item:hover i {
            background: var(--primary);
            color: var(--white);
        }

        .story-features .feature-item span,
        .story-list .story-item span {
            color: var(--secondary);
            font-weight: 500;
        }


/*==============================================================================
    07. MISSION & VISION
==============================================================================*/

/*
    Current HTML:
        .mission

    Original HTML compatibility:
        .mission-vision
*/

.mission,
.mission-vision {
    padding: var(--section-space) 0;
    background: var(--light);
}

.mission-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 5rem;
}


/*==============================================================================
    08. MISSION IMAGE
==============================================================================*/

.mission-image {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-md);
}

    .mission-image img {
        width: 100%;
        height: 600px;
        object-fit: cover;
        object-position: center;
        transition: transform .8s ease;
    }

    .mission-image:hover img {
        transform: scale(1.05);
    }


/*==============================================================================
    09. MISSION CONTENT
==============================================================================*/

.mission-content {
    max-width: 650px;
}

    .mission-content .section-tag {
        margin-bottom: .75rem;
    }

    .mission-content h2 {
        margin: 1rem 0 1.5rem;
        line-height: 1.12;
        text-wrap: balance;
    }

    .mission-content > p {
        margin-bottom: 1.25rem;
        color: var(--text);
        line-height: 1.9;
    }


/*==============================================================================
    10. MISSION BOX
==============================================================================*/

/*
    Current about.html uses .mission-box.
*/

.mission-box {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 2rem;
    padding: 2rem;
    border: 1px solid rgba(200,169,106,.18);
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

    .mission-box:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

    .mission-box > i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 58px;
        height: 58px;
        flex: 0 0 58px;
        border-radius: 50%;
        background: rgba(200,169,106,.12);
        color: var(--primary);
        font-size: 1.35rem;
    }

    .mission-box h3 {
        margin-bottom: .6rem;
        font-size: 1.5rem;
    }

    .mission-box p {
        margin: 0;
        line-height: 1.8;
    }


/*==============================================================================
    11. ORIGINAL VISION COMPONENTS
==============================================================================*/

/*
    Kept for compatibility with the original uploaded about.css.
*/

.vision-card {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 2rem;
    padding: 2rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

    .vision-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
    }

.vision-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    border-radius: 50%;
    background: rgba(200,169,106,.12);
    color: var(--primary);
}

    .vision-icon i {
        font-size: 1.35rem;
    }

.vision-text h3 {
    margin-bottom: .6rem;
}

.vision-text p {
    margin: 0;
    line-height: 1.8;
}


/*==============================================================================
    12. VALUES
==============================================================================*/

/*
    These selectors are retained because the original uploaded CSS
    contains a Values section.
*/

.values {
    padding: var(--section-space) 0;
    background: var(--white);
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.value-card {
    position: relative;
    overflow: hidden;
    padding: 2.5rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--light);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

    .value-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--transition);
    }

    .value-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-lg);
    }

        .value-card:hover::before {
            transform: scaleX(1);
        }


/*==============================================================================
    13. PROCESS
==============================================================================*/

.process {
    padding: var(--section-space) 0;
    background: var(--light);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
    margin-top: 4rem;
}

.process-card {
    position: relative;
    overflow: hidden;
    padding: 2.75rem 2rem 2rem;
    border-radius: var(--radius-lg);
    background: var(--white);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: var(--transition);
}

    .process-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background: var(--primary);
        transform: scaleX(0);
        transform-origin: left;
        transition: var(--transition);
    }

    .process-card:hover {
        transform: translateY(-10px);
        box-shadow: var(--shadow-lg);
    }

        .process-card:hover::before {
            transform: scaleX(1);
        }

.process-number {
    position: absolute;
    top: 1rem;
    right: 1rem;
    color: rgba(200,169,106,.18);
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1;
}

.process-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin: 0 auto 1.75rem;
    border-radius: 50%;
    background: rgba(200,169,106,.12);
    transition: var(--transition);
}

    .process-icon i {
        color: var(--primary);
        font-size: 2rem;
    }

.process-card:hover .process-icon {
    background: var(--primary);
}

    .process-card:hover .process-icon i {
        color: var(--white);
    }

.process-card h3 {
    margin-bottom: 1rem;
}

.process-card p {
    line-height: 1.8;
}


/*==============================================================================
    14. ABOUT CTA
==============================================================================*/

/*
    Current HTML:
        .cta
        .cta-box
        .cta-buttons

    Original CSS compatibility:
        .about-cta
        .about-cta-content
        .about-cta-buttons
*/

.cta,
.about-cta {
    position: relative;
    overflow: hidden;
    padding: var(--section-space) 0;
    background: var(--secondary);
    isolation: isolate;
}


    .cta::before,
    .about-cta::before {
        content: "";
        position: absolute;
        top: -180px;
        left: -180px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,169,106,.18) 0%, rgba(200,169,106,0) 70% );
        pointer-events: none;
    }

    .cta::after,
    .about-cta::after {
        content: "";
        position: absolute;
        right: -180px;
        bottom: -220px;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        background: radial-gradient( circle, rgba(200,169,106,.12) 0%, rgba(200,169,106,0) 70% );
        pointer-events: none;
    }

    .cta > .container,
    .about-cta > .container {
        position: relative;
        z-index: 2;
    }

.cta-box,
.about-cta-content {
    max-width: 900px;
    margin-inline: auto;
    text-align: center;
}

    .cta-box > span,
    .about-cta-content .section-tag {
        display: inline-block;
        margin-bottom: 1rem;
        color: var(--primary);
        font-size: .85rem;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
    }

    .cta-box h2,
    .about-cta-content h2 {
        margin-bottom: 1.25rem;
        color: var(--white);
        line-height: 1.12;
        text-wrap: balance;
    }

    .cta-box p,
    .about-cta-content p {
        max-width: 720px;
        margin: 0 auto 2.5rem;
        color: rgba(255,255,255,.80);
        font-size: 1rem;
        line-height: 1.9;
    }

.cta-buttons,
.about-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

    .cta-buttons .btn-primary,
    .cta-buttons .btn-outline,
    .about-cta-buttons .btn-primary,
    .about-cta-buttons .btn-secondary {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .65rem;
        min-width: 210px;
    }

    .cta-buttons .btn-outline,
    .about-cta-buttons .btn-secondary {
        border: 2px solid rgba(255,255,255,.75);
        color: var(--white);
    }

        .cta-buttons .btn-outline:hover,
        .about-cta-buttons .btn-secondary:hover {
            border-color: var(--white);
            background: var(--white);
            color: var(--secondary);
        }


/*==============================================================================
    COMPACT ABOUT PAGE SPACING
==============================================================================*/

.company-story,
.our-story,
.mission,
.mission-vision,
.values,
.process,
.cta,
.about-cta {
    padding-top: 70px;
    padding-bottom: 70px;
}


/*------------------------------------------------------------------------------
    Story / Mission
------------------------------------------------------------------------------*/

.story-grid,
.mission-grid {
    gap: 50px;
}


/*------------------------------------------------------------------------------
    Values / Process
------------------------------------------------------------------------------*/

.values-grid,
.process-grid {
    margin-top: 40px;
}


/*------------------------------------------------------------------------------
    CTA
------------------------------------------------------------------------------*/

.cta-box p,
.about-cta-content p {
    margin-bottom: 2rem;
}


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

@media (max-width: 992px) {

    .company-story,
    .our-story,
    .mission,
    .mission-vision,
    .values,
    .process,
    .cta,
    .about-cta {
        padding-top: 60px;
        padding-bottom: 60px;
    }
}


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

@media (max-width: 768px) {

    .company-story,
    .our-story,
    .mission,
    .mission-vision,
    .values,
    .process,
    .cta,
    .about-cta {
        padding-top: 55px;
        padding-bottom: 55px;
    }
}

/*------------------------------------------------------------------------------
    Small Mobile
------------------------------------------------------------------------------*/

@media (max-width: 480px) {

    .page-hero {
        min-height: 50vh;
    }

    .page-hero-content {
        padding: 90px 0 50px;
    }

        .page-hero-content h1 {
            font-size: 2rem;
        }

        .page-hero-content p {
            font-size: .92rem;
        }

    .breadcrumb {
        font-size: .9rem;
    }

    .story-image img {
        height: 360px;
    }

    .mission-image img {
        height: 340px;
    }

    .story-content h2,
    .mission-content h2,
    .cta-box h2,
    .about-cta-content h2 {
        font-size: 2rem;
    }

    .story-content p,
    .mission-content > p {
        font-size: .95rem;
    }

    .story-features,
    .story-list {
        gap: 1rem;
        margin: 2rem 0 1.25rem;
    }

        .story-features .feature-item,
        .story-list .story-item {
            align-items: flex-start;
        }

            .story-features .feature-item i,
            .story-list .story-item i {
                width: 40px;
                height: 40px;
                flex-basis: 40px;
            }

    .mission-box,
    .vision-card {
        gap: 1rem;
        padding: 1.25rem;
    }

        .mission-box > i,
        .vision-icon {
            width: 48px;
            height: 48px;
            flex-basis: 48px;
            font-size: 1.1rem;
        }

        .mission-box h3,
        .vision-text h3 {
            font-size: 1.3rem;
        }

        .mission-box p,
        .vision-text p {
            font-size: .92rem;
        }

    .value-card,
    .process-card {
        padding: 2rem 1.5rem;
    }

    .cta,
    .about-cta {
        padding: 70px 0;
    }

    .cta-box > span,
    .about-cta-content .section-tag {
        font-size: .75rem;
        letter-spacing: 1.5px;
    }

    .cta-box p,
    .about-cta-content p {
        font-size: .93rem;
    }
}


/*------------------------------------------------------------------------------
    Extra Small Devices
------------------------------------------------------------------------------*/

@media (max-width: 360px) {

    .page-hero-content h1 {
        font-size: 1.8rem;
    }

    .story-image img {
        height: 320px;
    }

    .mission-image img {
        height: 300px;
    }

    .story-content h2,
    .mission-content h2,
    .cta-box h2,
    .about-cta-content h2 {
        font-size: 1.8rem;
    }

    .mission-box,
    .vision-card {
        align-items: flex-start;
    }
}


/*==============================================================================
    16. ACCESSIBILITY & MOTION
==============================================================================*/

@media (prefers-reduced-motion: reduce) {

    .page-hero-image img,
    .story-image img,
    .mission-image img,
    .story-features .feature-item,
    .story-list .story-item,
    .mission-box,
    .vision-card,
    .value-card,
    .process-card,
    .process-icon,
    .cta-buttons .btn-primary,
    .cta-buttons .btn-outline,
    .about-cta-buttons .btn-primary,
    .about-cta-buttons .btn-secondary {
        transition: none;
    }

    .page-hero:hover .page-hero-image img,
    .story-image:hover img,
    .mission-image:hover img {
        transform: none;
    }
}