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

.services-hero {

    position: relative;

    padding: 140px 0 100px;

    text-align: center;

    background: linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.45)),
                url("../images/contact/contact-hero.jpg") center center / cover no-repeat;

    color: #fff;

}

.services-hero span {

    display: inline-block;

    margin-bottom: 15px;

    font-size: .95rem;

    font-weight: 500;

    letter-spacing: 2px;

    text-transform: uppercase;

    color: var(--primary-color);

}

.services-hero h1 {

    font-size: 3.5rem;

    font-weight: 700;

    margin-bottom: 20px;

}

.services-hero p {

    max-width: 650px;

    margin: auto;

    font-size: 1.05rem;

    opacity: .9;

    line-height: 1.8;

}


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

.contact-info{

    padding:100px 0;

}

.contact-info .category-card{

    height:100%;

    text-align:center;

    padding:45px 30px;

    transition:.35s;

}

.contact-info .category-card:hover{

    transform:translateY(-8px);

}

.contact-icon{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    border-radius:50%;

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

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.8rem;

    color:var(--primary-color);

}

.contact-info h3{

    margin-bottom:12px;

}

.contact-info p{

    color:#777;

    margin:0;

}


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

.services-list{

    padding:100px 0;

}

.service-card{

    border-radius:24px;

}

.service-card form{

    margin-top:20px;

}

.form-control{

    height:56px;

    border-radius:14px;

    border:1px solid #e6e6e6;

    box-shadow:none;

}

.form-control:focus{

    border-color:var(--primary-color);

    box-shadow:none;

}

textarea.form-control{

    min-height:180px;

    resize:none;

    padding-top:15px;

}

.book-btn{

    margin-top:15px;

    min-width:180px;

}


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

.services-cta{

    padding:100px 0;

    text-align:center;

}

.services-cta h2{

    margin-bottom:20px;

}

.services-cta p{

    max-width:650px;

    margin:0 auto 35px;

    color:#666;

}

/* ==========================================
                OUR STUDIO
========================================== */

.studio-section {

    padding: 100px 0;

}

.studio-wrapper {

    display: flex;

    gap: 50px;

    align-items: stretch;

    margin-top: 60px;

}

.studio-map {

    flex: 1;

    min-height: 450px;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

    background: #f5f5f5;

}

.studio-map iframe {

    width: 100%;

    height: 100%;

    border: 0;

}

.studio-details {

    flex: 0 0 380px;

    background: #fff;

    border-radius: 24px;

    padding: 40px;

    box-shadow: var(--shadow-sm);

}

.studio-details h3 {

    margin-bottom: 20px;

}

.studio-details p {

    color: #777;

    line-height: 1.8;

}

.studio-details ul {

    list-style: none;

    padding: 0;

    margin: 30px 0 0;

}

.studio-details li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 18px;

}

.studio-details li::before {

    content: "";

    width: 10px;

    height: 10px;

    border-radius: 50%;

    background: var(--primary-color);

}



/* ==========================================
            OPENING HOURS
========================================== */

.hours-section {

    padding: 100px 0;

}

.hours-wrapper {

    max-width: 750px;

    margin: 60px auto 0;

    background: #fff;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: var(--shadow-sm);

}

.hour-item {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 22px 35px;

    border-bottom: 1px solid #f2f2f2;

    transition: .3s;

}

.hour-item:last-child {

    border-bottom: none;

}

.hour-item:hover {

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

}

.hour-item span {

    font-weight: 500;

}

.hour-item strong {

    color: var(--primary-color);

}

.hour-item.closed strong {

    color: #dc3545;

}



/* ==========================================
                    FAQ
========================================== */

.faq-section {

    padding: 100px 0;

}

.faq-section .accordion {

    max-width: 900px;

    margin: 60px auto 0;

}

.faq-section .accordion-item {

    border: none;

    border-radius: 18px;

    overflow: hidden;

    margin-bottom: 20px;

    box-shadow: var(--shadow-sm);

}

.faq-section .accordion-button {

    padding: 22px 28px;

    font-weight: 600;

    box-shadow: none;

}

.faq-section .accordion-button:not(.collapsed) {

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

    color: var(--primary-color);

}

.faq-section .accordion-button:focus {

    box-shadow: none;

}

.faq-section .accordion-body {

    line-height: 1.8;

    color: #666;

}



/* ==========================================
            INSTAGRAM
========================================== */

.instagram-section {

    padding: 100px 0;

}

.instagram-grid {

    display: grid;

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

    gap: 25px;

    margin-top: 60px;

}

.instagram-item {

    position: relative;

    overflow: hidden;

    border-radius: 22px;

    aspect-ratio: 1;

    cursor: pointer;

}

.instagram-item img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .4s;

}

.instagram-item:hover img {

    transform: scale(1.08);

}

.instagram-overlay {

    position: absolute;

    inset: 0;

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

    display: flex;

    justify-content: center;

    align-items: center;

    opacity: 0;

    transition: .3s;

}

.instagram-item:hover .instagram-overlay {

    opacity: 1;

}

.instagram-overlay i {

    font-size: 2rem;

    color: #fff;

}



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

@media (max-width: 991px){

    .studio-wrapper{

        flex-direction: column;

    }

    .studio-details{

        flex: auto;

    }

    .instagram-grid{

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

    }

}

@media (max-width: 767px){

    .services-hero{

        padding: 110px 0 80px;

    }

    .services-hero h1{

        font-size: 2.4rem;

    }

    .hour-item{

        padding: 18px 20px;

    }

    .studio-map{

        min-height: 320px;

    }

}

@media (max-width: 576px){

    .instagram-grid{

        grid-template-columns: 1fr;

    }

    .hour-item{

        flex-direction: column;

        align-items: flex-start;

        gap: 10px;

    }

    .studio-details{

        padding: 30px;

    }

}