/* ==========================================
   Echo Craft Creative Studio
   Components
========================================== */

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

.section-title{

    text-align:center;

    margin-bottom:70px;

}

.section-title h2{

    font-family:'Cormorant Garamond',serif;

    font-size:3.5rem;

    color:#fff;

    margin-bottom:20px;

}

.section-title p,
.sectionSubtitle{

    max-width:700px;

    margin:auto;

    color:#d7d7d7;

    line-height:2;

    font-size:1.2rem;

    font-weight:400;

}

.divider{

    width:90px;

    height:3px;

    background:#d8b36a;

    margin:25px auto 35px;

}

/* ==========================================
   FEATURED WORK
========================================== */

.selectedWorks{

    background:
        linear-gradient(
            rgba(10,10,10,.92),
            rgba(10,10,10,.94)
        ),
        url("../images/backgrounds/project-bg.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.portfolioGrid{

    display:grid;

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

    gap:35px;

}

.workCard{

    background:#171411;

    border:1px solid rgba(216,179,106,.14);

    border-radius:22px;

    overflow:hidden;

    opacity:.92;

    filter:brightness(.92);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        opacity .35s ease,
        filter .35s ease;

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

}

.workCard:hover{

    transform:translateY(-10px);

    border-color:#d8b36a;

    opacity:1;

    filter:brightness(1);

    box-shadow:
        0 20px 60px rgba(0,0,0,.55),
        0 0 28px rgba(216,179,106,.08);

}

.workThumb{

    overflow:hidden;

}

.workThumb img{

    width:100%;

    display:block;

    transition:.40s;

}

.workCard:hover img{

    transform:scale(1.05);

}

.workInfo{

    padding:30px;

}

.workInfo h3{

    font-family:'Cormorant Garamond',serif;

    color:#d8b36a;

    font-size:2rem;

    margin-bottom:15px;

}

.workInfo p{

    color:#d0d0d0;

    line-height:1.8;

}

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

.card{

    background:#1b1714;

    border:1px solid rgba(216,179,106,.18);

    border-radius:22px;

    padding:35px 30px;

    min-height:270px;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    text-align:center;

    transition:.35s;

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

}

.card:hover{

    transform:translateY(-10px);

    border-color:#d8b36a;

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

}

.card h3{

    font-family:'Cormorant Garamond',serif;

    font-size:3rem;

    color:#d8b36a;

    margin-bottom:12px;

}

.card h4{

    font-family:'Cormorant Garamond',serif;

    font-size:1.9rem;

    color:#ffffff;

    margin-bottom:18px;

}

.card p{

    color:#d0d0d0;

    line-height:1.8;

}

/* ==========================================
   GLASS
========================================== */

.glass{

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

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

    backdrop-filter:blur(20px);

    border-radius:20px;

}

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

.servicesSection{

    position:relative;

    background:
        linear-gradient(
            rgba(12,12,12,.94),
            rgba(12,12,12,.94)
        ),
        url("../images/backgrounds/services-texture.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.servicesGrid{

    display:grid;

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

    gap:40px;

    max-width:1200px;

    margin:0 auto;

}

.serviceCard{

    background:#1b1714;

    border:1px solid rgba(216,179,106,.18);

    border-radius:22px;

    padding:45px 40px;

    min-height:360px;

    display:flex;

    flex-direction:column;

    transition:.35s;

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

}

.serviceCard:hover{

    transform:translateY(-10px);

    border-color:#d8b36a;

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

}

.serviceIcon{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:28px;

    border-radius:50%;

    background:rgba(216,179,106,.08);

    border:1px solid rgba(216,179,106,.22);

}

.serviceIcon i{

    font-size:30px;

    color:#d8b36a;

}

.serviceCard h3{

    font-family:'Cormorant Garamond',serif;

    color:#d8b36a;

    font-size:2rem;

    margin-bottom:18px;

}

.serviceCard p{

    color:#d0d0d0;

    line-height:1.8;

}

/* ==========================================
   OUR PROCESS
========================================== */

.grid-4{

    display:grid;

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

    gap:35px;

}



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

.contactSection{

    position:relative;

    background:
        linear-gradient(
            rgba(8,8,8,.93),
            rgba(8,8,8,.95)
        ),
        url("../images/backgrounds/contact-texture.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}

.contactGrid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 70px;
    align-items: stretch;
}

.contactInfo {
    height: 100%;
}

.contactForm{
    padding:42px;

    border:1px solid rgba(216,179,106,.18);
    border-radius:22px;

    background:rgba(27,23,20,.58);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);

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

.contactForm button{
    margin-top:8px;
}

.contactInfo{

    background:rgba(27,23,20,.88);

    backdrop-filter:blur(6px);

    border:1px solid rgba(216,179,106,.18);

    border-radius:22px;

    padding:42px;

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

}

.contactInfo h3{

    font-family:'Cormorant Garamond',serif;

    color:#d8b36a;

    font-size:2.2rem;

    margin-bottom:24px;

}

.contactInfo p{

    color:#d6d6d6;

    line-height:2;

    margin-bottom:24px;

    font-size:1.05rem;

}

.contactForm{

    display:flex;

    flex-direction:column;

    gap:22px;

}

.contactForm input,
.contactForm textarea{

    width:100%;

    background:rgba(22,19,17,.88);

    backdrop-filter:blur(4px);

    color:#fff;

    border:1px solid rgba(216,179,106,.18);

    border-radius:16px;

    padding:20px 24px;

    font-size:1.05rem;

    transition:.30s;

}

.contactForm input::placeholder,
.contactForm textarea::placeholder{

    color:#9d9d9d;

}

.contactForm textarea{

    min-height:200px;

    resize:vertical;

}

.contactForm input:focus,
.contactForm textarea:focus{

    outline:none;

    border-color:#d8b36a;

    box-shadow:
        0 0 0 3px rgba(216,179,106,.12),
        0 0 24px rgba(216,179,106,.10);

}

.contactForm button{

    align-self:flex-start;

    min-width:230px;

    padding:18px 42px;

    border:none;

    border-radius:50px;

    background:linear-gradient(135deg,#d8b36a,#b98b35);

    color:#111;

    font-size:1rem;

    font-weight:700;

    cursor:pointer;

    transition:.30s;

}

.contactForm button:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(216,179,106,.35);

}

.formSuccess{

    display:none;

    margin-top:35px;

    padding:30px;

    border-radius:20px;

    background:rgba(27,23,20,.90);

    border:1px solid rgba(216,179,106,.18);

}

.formSuccess h3{

    color:#d8b36a;

    margin-bottom:12px;

}

.formSuccess p{

    color:#d6d6d6;

    line-height:1.9;

}

/* ==========================================
   PROJECT DEPOSIT
========================================== */

.depositSection{

    background:#0d0d0d;

}

.depositCard{

    display:grid;

    grid-template-columns:1fr 380px;

    gap:60px;

    align-items:center;

    padding:60px;

    background:#1b1714;

    border:1px solid rgba(216,179,106,.18);

    border-radius:24px;

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

}

.depositLeft h3{

    font-family:'Cormorant Garamond',serif;

    color:#d8b36a;

    font-size:2.2rem;

    margin-bottom:20px;

}

.depositLeft p{

    color:#d0d0d0;

    line-height:1.9;

    margin-bottom:30px;

}

.depositLeft ul{

    list-style:none;

    padding:0;

}

.depositLeft li{

    color:#e0e0e0;

    margin-bottom:18px;

    font-size:1.05rem;

}

.depositReassurance{

    display:inline-flex;

    align-items:center;

    margin-top:18px;

    padding:12px 18px;

    border:1px solid rgba(216,179,106,.18);

    border-radius:999px;

    background:rgba(216,179,106,.06);

    color:#d8b36a;

    font-size:.92rem;

    font-weight:600;

    letter-spacing:.01em;

}

.depositRight{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    text-align:center;

}

.depositRight img{

    display:block;

    width:260px;

    max-width:100%;

    background:#fff;

    padding:12px;

    border-radius:18px;

    margin:0 auto 25px;

}

.depositRight p{

    color:#bfbfbf;

    line-height:1.8;

}

.depositTitle{

    color:#d8b36a;

    font-family:'Cormorant Garamond',serif;

    font-size:1.55rem;

    font-weight:600;

    margin-bottom:18px;

}
.depositSecure{

    margin-top:18px;

    color:#9a9a9a;

    font-size:.9rem;

    font-style:italic;

    opacity:.9;

}


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

.siteFooter{

    background:#0b0b0b;

    border-top:1px solid rgba(216,179,106,.12);

    padding:80px 0 30px;

}

.footerGrid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    margin-bottom:60px;

}

.footerLogo{

    width:200px;

    height:auto;

    margin-bottom:45px;

}

.footerColumn h3{

    font-family:'Cormorant Garamond',serif;

    color:#d8b36a;

    font-size:1.8rem;

    margin-bottom:20px;

}

.footerColumn p{

    color:#bfbfbf;

    line-height:1.9;

}

.footerColumn ul{

    list-style:none;

    margin:0;

    padding:0;

}

.footerColumn li{

    margin-bottom:14px;

}

.footerColumn a{

    color:#bfbfbf;

    text-decoration:none;

    transition:.30s;

}

.footerColumn a:hover{

    color:#d8b36a;

}

.footerBottom{

    margin-top:40px;

    padding-top:30px;

    border-top:1px solid rgba(216,179,106,.10);

    text-align:center;

    color:#888;

    font-size:.95rem;

}

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

@media (max-width:991px){

    .section-title h2{

        font-size:2.7rem;

    }

   .portfolioGrid,
.servicesGrid,
.grid-4{

        grid-template-columns:1fr;

    }

    .contactGrid{

        grid-template-columns:1fr;

        gap:50px;

    }

    .contactForm button{

        width:100%;

        align-self:stretch;

    }

    .depositCard{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footerGrid{

        grid-template-columns:1fr;

        text-align:center;

        gap:40px;

    }

    .footerLogo{

        margin:0 auto 25px;

    }

}

/* ==========================================
   MOBILE CAROUSEL CONTROLS
   Hidden on desktop
========================================== */

.mobileCarouselArrow,
.mobileSwipeHint {
    display: none;
}

.portfolioCarouselFooter {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

.portfolioViewAll {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* ==========================================
   FEATURED WORK MOBILE CAROUSEL
========================================== */

@media (max-width: 768px) {

    .selectedWorks {
        overflow: hidden;
    }

    .mobileCarouselShell {
        position: relative;
    }

    .portfolioGrid.mobileCarouselTrack {
        display: flex;
        grid-template-columns: none;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 42px 24px;
        margin: 0 -20px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .portfolioGrid.mobileCarouselTrack::-webkit-scrollbar {
        display: none;
    }

    .portfolioGrid.mobileCarouselTrack .workCard {
        flex: 0 0 86%;
        max-width: 420px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .mobileCarouselArrow {
        position: absolute;
        top: 50%;
        z-index: 20;
        display: flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(212, 175, 55, 0.55);
        border-radius: 50%;
        background: rgba(10, 10, 10, 0.9);
        color: #d4af37;
        font-size: 1rem;
        cursor: pointer;
        transform: translateY(-50%);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
        transition:
            transform 0.25s ease,
            background 0.25s ease,
            opacity 0.25s ease;
    }

    .mobileCarouselPrevious {
        left: 2px;
    }

    .mobileCarouselNext {
        right: 2px;
    }

    .mobileCarouselArrow:active {
        transform: translateY(-50%) scale(0.92);
        background: #d4af37;
        color: #111111;
    }

    .mobileCarouselArrow:disabled {
        opacity: 0.25;
        pointer-events: none;
    }

    .portfolioCarouselFooter {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-top: 24px;
    }

    .mobileSwipeHint {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #d4af37;
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .portfolioViewAll {
        width: auto;
        min-width: 230px;
        padding: 16px 26px;
    }

}

@media (max-width: 480px) {

    .portfolioGrid.mobileCarouselTrack {
        gap: 15px;
        padding-right: 34px;
        padding-left: 34px;
    }

    .portfolioGrid.mobileCarouselTrack .workCard {
        flex-basis: 88%;
    }

    .mobileCarouselArrow {
        width: 44px;
        height: 44px;
    }

    .mobileCarouselPrevious {
        left: -2px;
    }

    .mobileCarouselNext {
        right: -2px;
    }

}

/* ==========================================
   SERVICES + PROCESS MOBILE CAROUSELS
========================================== */

.mobileCarouselHint {
    display: none;
}

@media (max-width: 768px) {

    .servicesSection,
    .processSection {
        overflow: hidden;
    }

    .servicesGrid.mobileCarouselTrack,
    .grid-4.mobileCarouselTrack {
        display: flex;
        grid-template-columns: none;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 8px 42px 24px;
        margin: 0 -20px;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .servicesGrid.mobileCarouselTrack::-webkit-scrollbar,
    .grid-4.mobileCarouselTrack::-webkit-scrollbar {
        display: none;
    }

    .servicesGrid.mobileCarouselTrack .serviceCard,
    .grid-4.mobileCarouselTrack .card {
        flex: 0 0 86%;
        max-width: 420px;
        min-height: 340px;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .mobileCarouselHint {
        display: flex;
        justify-content: center;
        margin-top: 22px;
    }

}

@media (max-width: 480px) {

    .servicesGrid.mobileCarouselTrack,
    .grid-4.mobileCarouselTrack {
        gap: 15px;
        padding-right: 34px;
        padding-left: 34px;
    }

    .servicesGrid.mobileCarouselTrack .serviceCard,
    .grid-4.mobileCarouselTrack .card {
        flex-basis: 88%;
    }

}