/* =========================================================
   PROJECT DETAILS PAGE
   FIDAR AFARIN PISHRO
========================================================= */


/* =========================================================
   VARIABLES
========================================================= */

:root {

    --project-gold: #D4AF37;

    --project-gold-light: #F5D36C;

    --project-black: #080808;

    --project-black-2: #101010;

    --project-black-3: #151515;

    --project-white: #ffffff;

    --project-text: #dddddd;

    --project-muted: #929292;

    --project-border:
        rgba(212,175,55,.18);

    --project-radius: 18px;

}


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

body {

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(212,175,55,.055),
            transparent 38%
        ),
        #080808;

}


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

.project-hero,
.project-details-section,
.project-cta {

    width: 100%;

}


.section-container {

    width: 92%;

    max-width: 1450px;

    margin:
        0 auto;

}


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

.project-hero {

    position:
        relative;

    min-height:
        360px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at center,
            rgba(212,175,55,.14),
            transparent 35%
        ),

        linear-gradient(
            135deg,
            #050505,
            #121212 50%,
            #050505
        );

    border-bottom:
        1px solid
        var(--project-border);

}


.project-hero::before {

    content:
        "";

    position:
        absolute;

    width:
        620px;

    height:
        620px;

    border:
        1px solid
        rgba(212,175,55,.08);

    border-radius:
        50%;

    animation:
        projectHeroRotate
        25s linear infinite;

}


.project-hero::after {

    content:
        "";

    position:
        absolute;

    width:
        420px;

    height:
        420px;

    border:
        1px solid
        rgba(255,255,255,.035);

    border-radius:
        50%;

}


.project-hero-overlay {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.65),
            transparent,
            rgba(0,0,0,.65)
        );

}


.project-hero-content {

    position:
        relative;

    z-index:
        2;

    width:
        92%;

    max-width:
        1000px;

    padding:
        100px 20px 55px;

    text-align:
        center;

}


.project-hero-badge {

    display:
        inline-block;

    margin-bottom:
        17px;

    color:
        var(--project-gold-light);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.project-hero-content h1 {

    margin:
        0 0 16px;

    color:
        white;

    font-size:
        clamp(32px,4vw,55px);

    font-weight:
        800;

    line-height:
        1.35;

}


.project-hero-content p {

    max-width:
        750px;

    margin:
        0 auto;

    color:
        #bcbcbc;

    font-size:
        15px;

    line-height:
        2;

}


/* =========================================================
   DETAILS SECTION
========================================================= */

.project-details-section {

    padding:
        80px 0 100px;

    background:
        #0b0b0b;

}


/* =========================================================
   BACK BUTTON
========================================================= */

.project-back-wrapper {

    margin-bottom:
        25px;

}


.project-back-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    min-height:
        43px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        10px;

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

    color:
        #bcbcbc;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .3s ease;

}


.project-back-btn:hover {

    color:
        white;

    border-color:
        rgba(212,175,55,.35);

    background:
        rgba(212,175,55,.06);

    transform:
        translateY(-2px);

}


/* =========================================================
   MAIN CARD
========================================================= */

.project-main-card {

    display:
        grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(300px,.95fr);

    gap:
        45px;

    padding:
        40px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0d0d0d
        );

    box-shadow:
        0 20px 50px
        rgba(0,0,0,.25);

}


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

.project-gallery {

    min-width:
        0;

}


.project-main-image {

    position:
        relative;

    width:
        100%;

    min-height:
        430px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        18px;

    background:

        radial-gradient(
            circle at center,
            rgba(255,255,255,.055),
            transparent 60%
        ),

        #101010;

}


.project-main-image img {

    width:
        100%;

    height:
        430px;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .45s ease;

}


.project-main-image:hover img {

    transform:
        scale(1.035);

}


/* =========================================================
   THUMBNAILS
========================================================= */

.project-thumbnails {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        10px;

    margin-top:
        15px;

}


.project-thumbnail {

    width:
        76px;

    height:
        76px;

    padding:
        4px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius:
        10px;

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

    cursor:
        pointer;

    transition:
        .3s ease;

}


.project-thumbnail:hover {

    border-color:
        rgba(212,175,55,.4);

    transform:
        translateY(-2px);

}


.project-thumbnail.active {

    border-color:
        var(--project-gold);

    box-shadow:
        0 0 0 2px
        rgba(212,175,55,.12);

}


.project-thumbnail img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        7px;

}


/* =========================================================
   INFORMATION
========================================================= */

.project-main-information {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

}


.project-main-label {

    display:
        inline-block;

    width:
        fit-content;

    margin-bottom:
        13px;

    color:
        var(--project-gold);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.project-main-information h1 {

    margin:
        0 0 18px;

    color:
        white;

    font-size:
        clamp(
            30px,
            4vw,
            48px
        );

    font-weight:
        800;

    line-height:
        1.45;

}


.project-description {

    margin:
        0 0 26px;

    color:
        #999;

    font-size:
        15px;

    line-height:
        2.15;

}


/* =========================================================
   META
========================================================= */

.project-meta {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        12px;

    margin-bottom:
        28px;

}


.project-meta-item {

    padding:
        15px 16px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:
        10px;

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

}


.project-meta-item span {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #666;

    font-size:
        11px;

}


.project-meta-item strong {

    display:
        block;

    overflow:
        hidden;

    color:
        #ddd;

    font-size:
        13px;

    font-weight:
        700;

    white-space:
        nowrap;

    text-overflow:
        ellipsis;

}


/* =========================================================
   ACTIONS
========================================================= */

.project-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        10px;

}


.project-actions a {

    min-height:
        48px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 20px;

    border-radius:
        10px;

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        700;

    transition:
        .3s ease;

}


.project-inquiry-btn {

    color:
        #111;

    background:
        linear-gradient(
            135deg,
            var(--project-gold),
            var(--project-gold-light)
        );

}


.project-inquiry-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(212,175,55,.20);

}


.project-pdf-btn {

    color:
        #ddd;

    border:
        1px solid
        rgba(255,255,255,.1);

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

}


.project-pdf-btn:hover {

    color:
        white;

    border-color:
        rgba(255,255,255,.25);

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

}


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

.project-description-section {

    margin-top:
        35px;

    padding:
        35px 40px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            #151515,
            #0d0d0d
        );

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

}


.project-section-heading {

    margin-bottom:
        25px;

}


.project-section-heading span {

    display:
        block;

    margin-bottom:
        9px;

    color:
        var(--project-gold);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;

}


.project-section-heading h2 {

    margin:
        0;

    color:
        white;

    font-size:
        28px;

    font-weight:
        800;

}


.project-full-description {

    color:
        #969696;

    font-size:
        15px;

    line-height:
        2.2;

}


.project-full-description p {

    margin:
        0 0 15px;

}


.project-full-description p:last-child {

    margin-bottom:
        0;

}


.project-no-description {

    color:
        #777;

}


/* =========================================================
   PDF
========================================================= */

.project-pdf-section {

    margin-top:
        25px;

}


.project-pdf-box {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        25px;

    padding:
        25px 30px;

    border:
        1px solid
        rgba(212,175,55,.10);

    border-radius:
        16px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.015)
        );

}


.project-pdf-icon {

    width:
        50px;

    height:
        50px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        12px;

    background:
        rgba(212,175,55,.08);

    color:
        var(--project-gold-light);

    font-size:
        22px;

}


.project-pdf-content {

    flex:
        1;

}


.project-pdf-content span {

    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--project-gold);

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}


.project-pdf-content h2 {

    margin:
        0 0 6px;

    color:
        white;

    font-size:
        18px;

    font-weight:
        800;

}


.project-pdf-content p {

    margin:
        0;

    color:
        #777;

    font-size:
        13px;

    line-height:
        1.8;

}


.project-pdf-download {

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        0 20px;

    border-radius:
        9px;

    color:
        #111;

    background:
        linear-gradient(
            135deg,
            var(--project-gold),
            var(--project-gold-light)
        );

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        800;

    transition:
        .3s ease;

}


.project-pdf-download:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(212,175,55,.20);

}


/* =========================================================
   BOTTOM ACTION
========================================================= */

.project-bottom-actions {

    margin-top:
        35px;

}


/* =========================================================
   STATES
========================================================= */

.project-state {

    padding:
        90px 20px;

    text-align:
        center;

    border:
        1px dashed
        rgba(255,255,255,.1);

    border-radius:
        var(--project-radius);

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

}


.project-state-icon {

    margin-bottom:
        18px;

    font-size:
        42px;

}


.project-state h2 {

    margin:
        0 0 10px;

    color:
        white;

    font-size:
        23px;

    font-weight:
        800;

}


.project-state p {

    margin:
        0 0 20px;

    color:
        #777;

    font-size:
        14px;

    line-height:
        2;

}


.project-state-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        46px;

    padding:
        0 22px;

    border-radius:
        10px;

    color:
        #111;

    background:
        linear-gradient(
            135deg,
            var(--project-gold),
            var(--project-gold-light)
        );

    text-decoration:
        none;

    font-size:
        13px;

    font-weight:
        800;

}


/* =========================================================
   CTA
========================================================= */

.project-cta {

    position:
        relative;

    overflow:
        hidden;

    padding:
        100px 0;

    background:
        radial-gradient(
            circle at center,
            rgba(212,175,55,.12),
            transparent 48%
        ),
        #070707;

    border-top:
        1px solid
        rgba(212,175,55,.1);

}


.project-cta::before {

    content:
        "";

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    top:
        50%;

    left:
        50%;

    transform:
        translate(-50%,-50%);

    border:
        1px solid
        rgba(212,175,55,.07);

    border-radius:
        50%;

}


.project-cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        800px;

    margin:
        auto;

    text-align:
        center;

}


.project-cta-content > span {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--project-gold);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        2px;

}


.project-cta-content h2 {

    margin:
        0 0 18px;

    color:
        white;

    font-size:
        34px;

    font-weight:
        800;

}


.project-cta-content p {

    max-width:
        650px;

    margin:
        0 auto 28px;

    color:
        #929292;

    font-size:
        15px;

    line-height:
        2;

}


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

@keyframes projectHeroRotate {

    from {

        transform:
            rotate(0deg);

    }

    to {

        transform:
            rotate(360deg);

    }

}


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

@media (max-width:992px) {

    .project-main-card {

        grid-template-columns:
            1fr;

        padding:
            30px;

    }


    .project-main-image,
    .project-main-image img {

        min-height:
            400px;

        height:
            400px;

    }

}


@media (max-width:768px) {

    .project-hero {

        min-height:
            320px;

    }


    .project-hero-content {

        padding:
            90px 20px
            50px;

    }


    .project-details-section {

        padding:
            60px 0 75px;

    }


    .project-main-card {

        padding:
            22px;

        border-radius:
            15px;

    }


    .project-main-image,
    .project-main-image img {

        min-height:
            330px;

        height:
            330px;

    }


    .project-meta {

        grid-template-columns:
            1fr;

    }


    .project-actions {

        flex-direction:
            column;

    }


    .project-actions a {

        width:
            100%;

    }


    .project-description-section {

        padding:
            25px 20px;

    }


    .project-pdf-box {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .project-pdf-icon {

        margin-inline:
            auto;

    }


    .project-pdf-content {

        text-align:
            center;

    }


    .project-pdf-download {

        width:
            100%;

    }


    .project-cta {

        padding:
            70px 0;

    }


    .project-cta-content h2 {

        font-size:
            28px;

    }

}


@media (max-width:480px) {

    .project-hero-content h1 {

        font-size:
            34px;

    }


    .project-hero-content p {

        font-size:
            13px;

    }


    .project-main-image,
    .project-main-image img {

        min-height:
            270px;

        height:
            270px;

    }


    .project-thumbnail {

        width:
            65px;

        height:
            65px;

    }


    .project-main-information h1 {

        font-size:
            29px;

    }


    .project-description,
    .project-full-description {

        font-size:
            13px;

    }

}