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

.projects-hero{

    position:relative;

    width:100%;

    height:70vh;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    background:url("../images/projects-hero.jpg") center center/cover no-repeat;

    animation:heroZoom 18s ease-in-out infinite alternate;

}

/* Dark Overlay */

.projects-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(17,17,17,.82),
        rgba(17,17,17,.55)
    );

}

/* Hero Content */

.projects-hero-content{

    position:relative;

    z-index:2;

    max-width:900px;

    padding:0 20px;

    text-align:center;

    animation:fadeUp 1.2s ease;

}

/* Subtitle */

.hero-subtitle{

    display:inline-block;

    color:#C89B3C;

    font-size:15px;

    font-weight:700;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:18px;

    font-family:'Montserrat',sans-serif;

}

/* Heading */

.projects-hero h1{

    font-family:'Montserrat',sans-serif;

    font-size:68px;

    font-weight:800;

    color:#ffffff;

    line-height:1.15;

    margin-bottom:28px;

}

/* Paragraph */

.projects-hero p{

    max-width:760px;

    margin:auto;

    color:#f1f1f1;

    font-size:18px;

    line-height:1.9;

}

/* Scroll Indicator */

.scroll-indicator{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

    width:28px;

    height:48px;

    border:2px solid rgba(255,255,255,.55);

    border-radius:30px;

    display:flex;

    justify-content:center;

    padding-top:8px;

    z-index:5;

}

.scroll-indicator span{

    width:5px;

    height:10px;

    border-radius:20px;

    background:#C89B3C;

    animation:scrollDown 1.8s infinite;

}

/* Hero Zoom */

@keyframes heroZoom{

from{

    transform:scale(1);

}

to{

    transform:scale(1.08);

}

}

/* Fade Up */

@keyframes fadeUp{

from{

    opacity:0;

    transform:translateY(40px);

}

to{

    opacity:1;

    transform:translateY(0);

}

}

/* Scroll Animation */

@keyframes scrollDown{

0%{

    transform:translateY(0);

    opacity:1;

}

100%{

    transform:translateY(18px);

    opacity:0;

}

}

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

@media(max-width:992px){

.projects-hero{

    height:60vh;

}

.projects-hero h1{

    font-size:50px;

}

.projects-hero p{

    font-size:17px;

}

}

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

@media(max-width:768px){

.projects-hero{

    height:52vh;

    background-position:center;

}

.hero-subtitle{

    font-size:13px;

    letter-spacing:3px;

}

.projects-hero h1{

    font-size:34px;

    margin-bottom:20px;

}

.projects-hero p{

    font-size:15px;

    line-height:1.8;

    text-align:justify;

    text-align-last:center;

}

.scroll-indicator{

    display:none;

}

}


/* =====================================================
            PROJECT CATEGORY SECTION
===================================================== */

.project-categories{

    padding:110px 20px;

    background:#F8F8F8;

}

.project-categories-container{

    max-width:1320px;

    margin:auto;

}

/* =====================================================
                SECTION HEADING
===================================================== */

.project-categories .section-heading{

    text-align:center;

    max-width:850px;

    margin:0 auto 70px;

}

.project-categories .section-heading span{

    display:inline-block;

    font-size:15px;

    font-weight:700;

    letter-spacing:4px;

    color:#C89B3C;

    text-transform:uppercase;

    margin-bottom:18px;

    font-family:'Montserrat',sans-serif;

}

.project-categories .section-heading h2{

    font-family:'Montserrat',sans-serif;

    font-size:54px;

    font-weight:800;

    color:#111111;

    line-height:1.2;

    margin-bottom:25px;

}

.project-categories .section-heading p{

    font-size:17px;

    color:#666666;

    line-height:1.9;

}

/* =====================================================
                    GRID
===================================================== */

.category-grid{

    display:grid;

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

    gap:35px;

}

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

.category-card{

    background:#ffffff;

    border-radius:22px;

    overflow:hidden;

    border:1px solid #ECECEC;

    cursor:pointer;

    transition:.45s;

    position:relative;

    box-shadow:0 15px 35px rgba(0,0,0,.05);

}

.category-card:hover{

    transform:translateY(-12px);

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

}

/* Gold Border Animation */

.category-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:0;

    height:4px;

    background:#C89B3C;

    transition:.45s;

    z-index:5;

}

.category-card:hover::before{

    width:100%;

}

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

.category-image{

    position:relative;

    height:240px;

    overflow:hidden;

}

.category-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s ease;

}

.category-card:hover img{

    transform:scale(1.08);

}

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

.image-overlay{

    position:absolute;

    inset:0;

    background:rgba(17,17,17,.55);

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.45s;

}

.category-card:hover .image-overlay{

    opacity:1;

}

.image-overlay span{

    color:#ffffff;

    font-size:17px;

    font-weight:600;

    letter-spacing:1px;

    transform:translateY(20px);

    transition:.45s;

}

.category-card:hover .image-overlay span{

    transform:translateY(0);

}

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

.category-content{

    padding:30px;

}

.category-content h3{

    font-family:'Montserrat',sans-serif;

    font-size:25px;

    color:#111111;

    margin-bottom:15px;

    line-height:1.3;

}

.category-content p{

    font-size:16px;

    color:#666666;

    line-height:1.8;

    text-align:justify;

}




/* =====================================================
            PREMIUM HOVER EFFECTS
===================================================== */

/* Card Glow */

.category-card:hover{

    border-color:#C89B3C;

}

/* Heading Animation */

.category-content h3{

    transition:.35s;

}

.category-card:hover .category-content h3{

    color:#C89B3C;

}

/* Paragraph */

.category-content p{

    transition:.35s;

}

.category-card:hover .category-content p{

    color:#444444;

}

/* Explore Text */

.image-overlay span{

    position:relative;

}

.image-overlay span::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#C89B3C;

    transition:.4s;

}

.category-card:hover .image-overlay span::after{

    width:100%;

}


/* =====================================================
            SCROLL REVEAL ANIMATION
===================================================== */

.category-card{

    opacity:0;

    transform:translateY(60px);

    transition:

    opacity .8s ease,

    transform .8s ease,

    box-shadow .4s ease,

    border-color .4s ease;

}

.category-card.show{

    opacity:1;

    transform:translateY(0);

}

/* Stagger */

.category-card:nth-child(1){

    transition-delay:.05s;

}

.category-card:nth-child(2){

    transition-delay:.15s;

}

.category-card:nth-child(3){

    transition-delay:.25s;

}

.category-card:nth-child(4){

    transition-delay:.35s;

}

.category-card:nth-child(5){

    transition-delay:.45s;

}

.category-card:nth-child(6){

    transition-delay:.55s;

}


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

@media(max-width:992px){

.category-grid{

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

    gap:28px;

}

.project-categories{

    padding:90px 20px;

}

.project-categories .section-heading h2{

    font-size:42px;

}

.category-image{

    height:220px;

}

.category-content{

    padding:25px;

}

.category-content h3{

    font-size:22px;

}

}


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

@media(max-width:768px){

.project-categories{

    padding:75px 18px;

}

.project-categories .section-heading{

    margin-bottom:45px;

}

.project-categories .section-heading span{

    font-size:13px;

    letter-spacing:3px;

}

.project-categories .section-heading h2{

    font-size:31px;

    line-height:1.3;

}

.project-categories .section-heading p{

    font-size:15px;

    text-align:justify;

    text-align-last:center;

}

.category-grid{

    grid-template-columns:1fr;

    gap:24px;

}

.category-image{

    height:230px;

}

.category-content{

    padding:24px;

}

.category-content h3{

    font-size:22px;

}

.category-content p{

    font-size:15px;

    line-height:1.8;

}

.image-overlay{

    opacity:1;

    background:linear-gradient(

        to top,

        rgba(17,17,17,.75),

        rgba(17,17,17,.15)

    );

    align-items:flex-end;

    justify-content:flex-start;

    padding:20px;

}

.image-overlay span{

    transform:none;

    font-size:15px;

}

}


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

@media(min-width:1400px){

.category-grid{

    gap:40px;

}

.category-image{

    height:260px;

}

}