.instagram-connect {
    width: 100%;
    margin: 0 0 32px;
    padding: 0 20px;
}

.instagram-inner {
    width: 100%;
    min-height: 170px;
    border-radius: 24px;
    padding: 35px 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    position: relative;
    overflow: hidden;
    background: radial-gradient(circle at top right, rgba(169,131,92,.25), transparent 35%), linear-gradient(135deg,#080F1F,#2b3654);
    color: #fff;
    box-shadow: 0 20px 45px rgba(8,15,31,.35);
}


    .instagram-inner::before {
        content: "";
        position: absolute;
        width: 320px;
        height: 320px;
        right: -120px;
        top: -140px;
        border-radius: 50%;
        background: rgba(169,131,92,.12);
    }


.instagram-icon {
    width: 82px;
    height: 82px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    background: linear-gradient( 135deg, #a9835c, #8a683f );
    box-shadow: 0 12px 30px rgba(169,131,92,.35);
    position: relative;
    z-index: 2;
}


.instagram-content {
    flex: 1;
    position: relative;
    z-index: 2;
}


    .instagram-content h2 {
        margin: 0 0 12px;
        font-size: 28px;
        font-weight: 800;
        color: #fff;
    }


    .instagram-content p {
        margin: 0;
        font-size: 16px;
        line-height: 2;
        color: rgba(255,255,255,.82);
    }


.instagram-btn {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 32px;
    border-radius: 50px;
    background: linear-gradient( 135deg, #a9835c, #8a683f );
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all .35s ease;
    box-shadow: 0 12px 25px rgba(169,131,92,.35);
}


    .instagram-btn:hover {
        transform: translateY(-5px);
        background: linear-gradient( 135deg, #b99368, #a9835c );
        box-shadow: 0 18px 35px rgba(169,131,92,.45);
    }


    .instagram-btn span {
        font-size: 22px;
        transition: transform .35s ease;
    }


    .instagram-btn:hover span {
        transform: translateX(-6px);
    }


@media(max-width:768px) {

    .instagram-inner {
        padding: 35px 20px;
        flex-direction: column;
        text-align: center;
    }


    .instagram-content h2 {
        font-size: 22px;
    }


    .instagram-content p {
        font-size: 14px;
    }


    .instagram-btn {
        width: 100%;
    }
}
/* ===========================
   Contact Page Luxury Interaction
=========================== */


/* کارت های اصلی */
.contact-info.card,
.contact-form.card {
    transition: transform .45s ease, box-shadow .45s ease;
}


    .contact-info.card:hover,
    .contact-form.card:hover {
        transform: translateY(-6px);
        box-shadow: 0 25px 60px rgba(8,15,31,.12);
    }



/* Header Animation */
.contact-head {
    position: relative;
}


.contact-badge {
    background: linear-gradient( 135deg, #a9835c, #8a683f );
    color: #fff;
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(169,131,92,.25);
    animation: badgePulse 4s infinite;
}


@keyframes badgePulse {

    0%,100% {
        box-shadow: 0 10px 25px rgba(169,131,92,.25);
    }


    50% {
        box-shadow: 0 10px 35px rgba(169,131,92,.55);
    }
}



/* ===========================
   Info Cards
=========================== */


.info-box {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
    border: 1px solid rgba(169,131,92,.12);
}



    .info-box::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 0;
        height: 3px;
        background: linear-gradient( 90deg, #a9835c, #8a683f );
        transition: .4s ease;
    }



    .info-box:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(8,15,31,.12);
    }



        .info-box:hover::after {
            width: 100%;
        }




.info-icon {
    transition: transform .35s ease, background .35s ease;
}



.info-box:hover .info-icon {
    transform: rotate(8deg) scale(1.12);
    background: linear-gradient( 135deg, #a9835c, #8a683f );
    color: #fff;
}



/* ===========================
   Map Interaction
=========================== */


.map-card {
    overflow: hidden;
}


    .map-card iframe {
        filter: grayscale(40%);
        transition: filter .5s ease, transform .5s ease;
    }



    .map-card:hover iframe {
        filter: none;
        transform: scale(1.03);
    }



.map-label {
    transition: .35s ease;
}


.map-card:hover .map-label {
    background: #a9835c;
    color: #fff;
}



/* ===========================
   Form Interaction
=========================== */


.form-group {
    position: relative;
}



.field {
    transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}



    .field:hover {
        border-color: rgba(169,131,92,.5);
    }



    .field:focus {
        border-color: #a9835c;
        box-shadow: 0 0 0 4px rgba(169,131,92,.15);
        transform: translateY(-2px);
        outline: none;
    }



/* فرم فعال */

.contact-form.card:focus-within {
    box-shadow: 0 25px 60px rgba(169,131,92,.15);
}



/* ===========================
   Submit Button
=========================== */


.btn-primary {
    position: relative;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}



    .btn-primary::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient( 120deg, transparent, rgba(255,255,255,.25), transparent );
        transition: .6s;
    }



    .btn-primary:hover::before {
        left: 100%;
    }



    .btn-primary:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 30px rgba(169,131,92,.35);
    }



/* ===========================
   Page Entry Effect
=========================== */


.contact-info.card,
.contact-form.card {
    animation: contactReveal .8s ease both;
}



.contact-form.card {
    animation-delay: .15s;
}



@keyframes contactReveal {


    from {
        opacity: 0;
        transform: translateY(35px);
    }


    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* ===========================
   Mobile
=========================== */


@media(max-width:768px) {


    .contact-info.card:hover,
    .contact-form.card:hover {
        transform: none;
    }


    .info-box:hover {
        transform: translateY(-4px);
    }
}

.section-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    margin: 0 0 16px;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(169,131,92,.12);
    color: #a9835c;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .3px;
    border: 1px solid rgba(169,131,92,.25);
    transition: .35s ease;
}


    .section-label::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #a9835c;
        box-shadow: 0 0 12px rgba(169,131,92,.7);
    }


    .section-label:hover {
        background: rgba(169,131,92,.2);
        transform: translateY(-2px);
    }