.contact-modal-overlay{

    position:fixed;
    inset:0;

    background:rgba(0,0,0,0.45);

    backdrop-filter:blur(8px);

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:9999;

}



.contact-modal{

    width:90%;
    max-width:450px;

    padding:35px;

    background:rgba(255,255,255,0.15);

    backdrop-filter:blur(20px);

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

    border-radius:20px;

    color:white;

    text-align:center;

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

}



.close-modal{

    position:absolute;

    right:25px;
    top:15px;

    border:none;

    background:none;

    color:white;

    font-size:30px;

    cursor:pointer;

}
.contact-intro {

    position: relative;

}


.contact-badge {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 18px;

    margin-bottom: 20px;

    border-radius: 50px;

    background: rgba(13,110,253,0.08);

    color: #0d6efd;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: .3px;

}



.contact-intro h1 {

    font-weight: 700;

    font-size: 42px;

    color: #1b1f2a;

}



.contact-intro p {

    color: #6c757d;

    line-height: 1.9;

    font-size: 16px;

}



.contact-highlight {

    margin: 25px 0;

    padding: 25px;

    border-radius: 18px;

    background: rgba(255,255,255,0.55);

    border: 1px solid rgba(13,110,253,0.12);

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

    backdrop-filter: blur(12px);

}



.contact-footer-text {

    font-weight: 600;

    color: #212529 !important;

    padding-left: 20px;

    border-left: 4px solid #0d6efd;

}
p {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    font-size: 16px;
    line-height: 2;
    font-weight: 400;
    word-spacing: 1px;
    letter-spacing: 0;
    text-align: right;
}

/* =========================================================
   CONTACT RTL / LTR
   IMPORTANT:
   Do NOT apply direction to Bootstrap .row or .container.
   ========================================================= */


/* =========================================================
   CONTACT INTRO - RTL
   ========================================================= */

.contact-intro-rtl {
    direction: ltr !important;
}

.contact-intro-rtl .contact-intro-content,
.contact-intro-rtl .contact-badge,
.contact-intro-rtl h1,
.contact-intro-rtl > p,
.contact-intro-rtl .contact-highlight,
.contact-intro-rtl .contact-highlight p,
.contact-intro-rtl .contact-footer-text {
    direction: rtl !important;
    text-align: right !important;
}


/* Badge */

.contact-intro-rtl .contact-badge {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row-reverse !important;
}


/* =========================================================
   CONTACT INTRO - LTR
   ========================================================= */

.contact-intro-ltr {
    direction: ltr !important;
}

.contact-intro-ltr .contact-intro-content,
.contact-intro-ltr .contact-badge,
.contact-intro-ltr h1,
.contact-intro-ltr > p,
.contact-intro-ltr .contact-highlight,
.contact-intro-ltr .contact-highlight p,
.contact-intro-ltr .contact-footer-text {
    direction: ltr !important;
    text-align: left !important;
}


/* Badge */

.contact-intro-ltr .contact-badge {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
}


/* =========================================================
   CONTACT FORM - RTL
   ========================================================= */

.contact-form-rtl {
    direction: ltr !important;
}


/*
   Keep Bootstrap form row LTR.
   This prevents the two col-md-6 fields from reversing.
*/

.contact-form-rtl .contact-form-row {
    direction: ltr !important;
}


/* Form title */

.contact-form-rtl .contact-form-title {
    direction: rtl !important;
    text-align: right !important;
}


/* Form floating wrapper */

.contact-form-rtl .form-floating {
    direction: rtl !important;
    text-align: right !important;
}


/* Input */

.contact-form-rtl .form-floating > .form-control {
    direction: rtl !important;
    text-align: right !important;
}


/* Textarea */

.contact-form-rtl .form-floating > textarea.form-control {
    direction: rtl !important;
    text-align: right !important;
}


/* Labels */

.contact-form-rtl .form-floating > label {
    right: 0 !important;
    left: auto !important;

    direction: rtl !important;
    text-align: right !important;

    transform-origin: 100% 0 !important;
}


/*
   Bootstrap floating label when input is focused
   or contains a value.
*/

.contact-form-rtl .form-floating > .form-control:focus ~ label,
.contact-form-rtl .form-floating > .form-control:not(:placeholder-shown) ~ label {
    transform-origin: 100% 0 !important;
}


/* Placeholder */

.contact-form-rtl .form-control::placeholder {
    direction: rtl !important;
    text-align: right !important;
}


/* Submit button */

.contact-form-rtl .contact-submit-button {
    direction: rtl !important;
    text-align: center !important;
}


/* =========================================================
   CONTACT FORM - LTR
   ========================================================= */

.contact-form-ltr {
    direction: ltr !important;
}


.contact-form-ltr .contact-form-row {
    direction: ltr !important;
}


/* Form title */

.contact-form-ltr .contact-form-title {
    direction: ltr !important;
    text-align: left !important;
}


/* Form floating */

.contact-form-ltr .form-floating {
    direction: ltr !important;
    text-align: left !important;
}


/* Input */

.contact-form-ltr .form-floating > .form-control {
    direction: ltr !important;
    text-align: left !important;
}


/* Textarea */

.contact-form-ltr .form-floating > textarea.form-control {
    direction: ltr !important;
    text-align: left !important;
}


/* Labels */

.contact-form-ltr .form-floating > label {
    direction: ltr !important;
    text-align: left !important;
}


/* Placeholder */

.contact-form-ltr .form-control::placeholder {
    direction: ltr !important;
    text-align: left !important;
}


/* Submit */

.contact-form-ltr .contact-submit-button {
    direction: ltr !important;
    text-align: center !important;
}


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

.contact-modal-rtl {
    direction: rtl !important;
    text-align: right !important;
}

.contact-modal-ltr {
    direction: ltr !important;
    text-align: left !important;
}


/* =========================================================
   BDI
   ========================================================= */

.contact-rtl bdi {
    direction: rtl !important;
    unicode-bidi: isolate !important;
}

.contact-ltr bdi {
    direction: ltr !important;
    unicode-bidi: isolate !important;
}


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

@media (max-width: 767.98px) {

    .contact-intro-rtl,
    .contact-intro-ltr {
        width: 100%;
    }

    .contact-form-rtl .form-floating > label {
        right: 0 !important;
        left: auto !important;
    }

}