.contact-hero {

position: relative;


overflow: hidden;


padding: 110px 0 100px;


background:
    linear-gradient(
        135deg,
        #f8fbff 0%,
        #eef7ff 55%,
        #e7f3ff 100%
    );

}

.contact-hero::before {

content: "";


position: absolute;


width: 430px;


height: 430px;


top: -230px;


right: -140px;


border-radius: 50%;


background:
    rgba(59, 130, 246, 0.08);

}

.contact-hero::after {

content: "";


position: absolute;


width: 300px;


height: 300px;


bottom: -190px;


left: -130px;


border-radius: 50%;


background:
    rgba(147, 197, 253, 0.10);

}

.contact-hero .container,
.contact-options .container,
.contact-faq .container,
.contact-cta .container {

width:
    min(
        calc(100% - 40px),
        1180px
    );


margin:
    0 auto;

}

/* =========================================================
HERO CONTAINER
========================================================= */

.contact-hero-container {

position: relative;


z-index: 2;


display: grid;


grid-template-columns:
    minmax(0, 0.9fr)
    minmax(400px, 0.8fr);


align-items: start;


gap: 80px;

}

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

.contact-hero-content {

padding-top: 45px;


max-width: 600px;

}

.contact-hero-content h1 {

margin:
    15px 0 20px;


color:
    #0f172a;


font-size:
    clamp(
        42px,
        5vw,
        62px
    );


line-height:
    1.04;


font-weight:
    800;


letter-spacing:
    -2.7px;

}

.contact-hero-content h1 span {

display:
    block;


color:
    #3b82f6;

}

.contact-hero-content > p {

max-width:
    520px;


margin:
    0;


color:
    #64748b;


font-size:
    16px;


line-height:
    1.8;

}

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

.contact-hero-info {

display:
    flex;


flex-direction:
    column;


gap:
    15px;


margin-top:
    38px;

}

.contact-info-item {

display:
    flex;


align-items:
    center;


gap:
    14px;

}

.contact-info-icon {

width:
    48px;


height:
    48px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


flex-shrink:
    0;


border:
    1px solid #dbeafe;


border-radius:
    13px;


background:
    #eff6ff;


color:
    #3b82f6;


font-size:
    18px;

}

.contact-info-item > div:last-child {

display:
    flex;


flex-direction:
    column;

}

.contact-info-item span {

color:
    #94a3b8;


font-size:
    10px;


font-weight:
    700;

}

.contact-info-item strong {

margin-top:
    4px;


color:
    #334155;


font-size:
    13px;


font-weight:
    700;

}

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

.contact-form-card {

padding:
    34px;


border:
    1px solid #dbeafe;


border-radius:
    25px;


background:
    #ffffff;


box-shadow:
    0 25px 65px
    rgba(
        37,
        99,
        235,
        0.08
    );

}

.contact-form-header {

margin-bottom:
    25px;

}

.contact-form-header h2 {

margin:
    10px 0 7px;


color:
    #0f172a;


font-size:
    27px;


line-height:
    1.2;


font-weight:
    800;


letter-spacing:
    -0.8px;

}

.contact-form-header p {

margin:
    0;


color:
    #64748b;


font-size:
    12px;


line-height:
    1.7;

}

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

.contact-form {

display:
    flex;


flex-direction:
    column;


gap:
    17px;

}

.contact-form-row {

display:
    grid;


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


gap:
    13px;

}

.contact-form-group {

display:
    flex;


flex-direction:
    column;


gap:
    7px;

}

.contact-form-group label {

color:
    #334155;


font-size:
    11px;


font-weight:
    700;

}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {

width:
    100%;


box-sizing:
    border-box;


border:
    1px solid #dbe3ee;


border-radius:
    10px;


outline:
    none;


background:
    #f8fafc;


color:
    #0f172a;


font-family:
    inherit;


font-size:
    12px;


transition:
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;

}

.contact-form-group input,
.contact-form-group select {

height:
    45px;


padding:
    0 13px;

}

.contact-form-group textarea {

min-height:
    120px;


padding:
    12px 13px;


resize:
    vertical;


line-height:
    1.6;

}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {

color:
    #94a3b8;

}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {

border-color:
    #60a5fa;


background:
    #ffffff;


box-shadow:
    0 0 0 3px
    rgba(
        59,
        130,
        246,
        0.08
    );

}

/* =========================================================
SUBMIT BUTTON
========================================================= */

.contact-submit-btn {

min-height:
    48px;


display:
    inline-flex;


align-items:
    center;


justify-content:
    center;


gap:
    8px;


border:
    1px solid #3b82f6;


border-radius:
    10px;


background:
    #3b82f6;


color:
    #ffffff;


font-family:
    inherit;


font-size:
    13px;


font-weight:
    700;


cursor:
    pointer;


box-shadow:
    0 12px 25px
    rgba(
        59,
        130,
        246,
        0.15
    );


transition:
    all 0.25s ease;

}

.contact-submit-btn:hover {

border-color:
    #2563eb;


background:
    #2563eb;


transform:
    translateY(-2px);


box-shadow:
    0 15px 30px
    rgba(
        59,
        130,
        246,
        0.20
    );

}

.contact-form-note {

display:
    flex;


align-items:
    center;


justify-content:
    center;


gap:
    6px;


margin:
    0;


color:
    #94a3b8;


font-size:
    10px;

}

.contact-form-note i {

color:
    #3b82f6;

}

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

.contact-options {

padding:
    100px 0;


background:
    #ffffff;

}

.section-heading {

max-width:
    650px;


margin-bottom:
    45px;

}

.section-label {

color:
    #2563eb;


font-size:
    11px;


font-weight:
    800;


letter-spacing:
    0.7px;


text-transform:
    uppercase;

}

.section-heading h2 {

margin:
    12px 0 14px;


color:
    #0f172a;


font-size:
    clamp(
        32px,
        4vw,
        44px
    );


line-height:
    1.12;


font-weight:
    800;


letter-spacing:
    -1.6px;

}

.section-heading p {

margin:
    0;


color:
    #64748b;


font-size:
    14px;


line-height:
    1.75;

}

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

.contact-options-grid {

display:
    grid;


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


gap:
    18px;

}

.contact-option-card {

padding:
    30px;


border:
    1px solid #e2e8f0;


border-radius:
    20px;


background:
    #ffffff;


transition:
    transform 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;

}

.contact-option-card:hover {

transform:
    translateY(-5px);


border-color:
    #bfdbfe;


box-shadow:
    0 20px 45px
    rgba(
        37,
        99,
        235,
        0.07
    );

}

.contact-option-icon {

width:
    52px;


height:
    52px;


display:
    flex;


align-items:
    center;


justify-content:
    center;


border-radius:
    14px;


background:
    #eff6ff;


color:
    #3b82f6;


font-size:
    21px;

}

.contact-option-card h3 {

margin:
    22px 0 9px;


color:
    #0f172a;


font-size:
    18px;


font-weight:
    800;

}

.contact-option-card p {

min-height:
    48px;


margin:
    0 0 18px;


color:
    #64748b;


font-size:
    13px;


line-height:
    1.75;

}

.contact-option-card a {

display:
    inline-flex;


align-items:
    center;


gap:
    7px;


color:
    #2563eb;


font-size:
    12px;


font-weight:
    700;


text-decoration:
    none;

}

.contact-option-card a:hover {

color:
    #1d4ed8;

}

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

.contact-faq {

padding:
    100px 0;


background:
    #f8fbff;

}

.contact-faq-wrapper {

display:
    grid;


grid-template-columns:
    minmax(0, 0.75fr)
    minmax(0, 1.25fr);


gap:
    80px;


align-items:
    start;

}

.contact-faq-heading h2 {

margin:
    12px 0 14px;


color:
    #0f172a;


font-size:
    clamp(
        30px,
        4vw,
        42px
    );


line-height:
    1.12;


font-weight:
    800;


letter-spacing:
    -1.5px;

}

.contact-faq-heading p {

max-width:
    390px;


margin:
    0;


color:
    #64748b;


font-size:
    14px;


line-height:
    1.8;

}

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

.contact-faq-list {

display:
    flex;


flex-direction:
    column;


gap:
    10px;

}

.contact-faq-item {

border:
    1px solid #dbe3ee;


border-radius:
    14px;


background:
    #ffffff;


overflow:
    hidden;

}

.contact-faq-item summary {

display:
    flex;


align-items:
    center;


justify-content:
    space-between;


gap:
    20px;


padding:
    20px;


color:
    #334155;


font-size:
    13px;


font-weight:
    700;


cursor:
    pointer;


list-style:
    none;

}

.contact-faq-item summary::-webkit-details-marker {

display:
    none;

}

.contact-faq-item summary i {

color:
    #3b82f6;


font-size:
    16px;


transition:
    transform 0.2s ease;

}

.contact-faq-item[open] summary i {

transform:
    rotate(45deg);

}

.contact-faq-item p {

margin:
    0;


padding:
    0 20px 20px;


color:
    #64748b;


font-size:
    12px;


line-height:
    1.75;

}

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

.contact-cta {

padding:
    90px 0;


background:
    #ffffff;

}

.contact-cta-card {

display:
    flex;


align-items:
    center;


justify-content:
    space-between;


gap:
    30px;


padding:
    45px 50px;


border:
    1px solid #bfdbfe;


border-radius:
    25px;


background:
    linear-gradient(
        135deg,
        #eaf4ff 0%,
        #f6faff 100%
    );

}

.contact-cta-card > div:first-child {

max-width:
    650px;

}

.contact-cta-card span {

color:
    #2563eb;


font-size:
    11px;


font-weight:
    800;

}

.contact-cta-card h2 {

margin:
    9px 0;


color:
    #0f172a;


font-size:
    clamp(
        28px,
        4vw,
        40px
    );


line-height:
    1.15;


font-weight:
    800;


letter-spacing:
    -1px;

}

.contact-cta-card p {

margin:
    0;


color:
    #64748b;


font-size:
    14px;


line-height:
    1.7;

}

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

.contact-cta-actions {

display:
    flex;


align-items:
    center;


gap:
    10px;

}

.contact-btn {

min-height:
    46px;


display:
    inline-flex;


align-items:
    center;


justify-content:
    center;


gap:
    7px;


padding:
    0 19px;


border-radius:
    10px;


font-size:
    12px;


font-weight:
    700;


text-decoration:
    none;


transition:
    all 0.25s ease;

}

.contact-btn-primary {

border:
    1px solid #3b82f6;


background:
    #3b82f6;


color:
    #ffffff;

}

.contact-btn-primary:hover {

border-color:
    #2563eb;


background:
    #2563eb;


color:
    #ffffff;


transform:
    translateY(-2px);

}

.contact-btn-secondary {

border:
    1px solid #dbe3ee;


background:
    #ffffff;


color:
    #334155;

}

.contact-btn-secondary:hover {

border-color:
    #bfdbfe;


background:
    #eff6ff;


color:
    #2563eb;


transform:
    translateY(-2px);

}

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

@media (max-width: 950px) {

.contact-hero-container {


    grid-template-columns:
        1fr;


    gap:
        60px;


}




.contact-hero-content {


    padding-top:
        0;


    max-width:
        700px;


}




.contact-form-card {


    max-width:
        700px;


}




.contact-options-grid {


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


}




.contact-option-card:last-child {


    grid-column:
        1 / -1;


}




.contact-faq-wrapper {


    grid-template-columns:
        1fr;


    gap:
        40px;


}

}

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

@media (max-width: 600px) {

.contact-hero {
        /* -1px; */


}




.contact-faq-item summary {


    padding:
        17px;


    font-size:
        12px;


}




.contact-faq-item p {


    padding:
        0 17px 17px;


}




.contact-cta {


    padding:
        60px 0;


}




.contact-cta-card {


    flex-direction:
        column;


    align-items:
        stretch;


    padding:
        30px 24px;


    border-radius:
        21px;


}




.contact-cta-card h2 {


    font-size:
        29px;


}




.contact-cta-card p {


    font-size:
        13px;


}




.contact-cta-actions {


    flex-direction:
        column;


    align-items:
        stretch;


}




.contact-btn {


    width:
        100%;


    box-sizing:
        border-box;


}

}

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

@media (max-width: 380px) {

.contact-hero .container,
.contact-options .container,
.contact-faq .container,
.contact-cta .container {


    width:
        calc(
            100% - 24px
        );


}




.contact-hero {


    padding-top:
        60px;


}




.contact-hero-content h1 {


    font-size:
        35px;


    letter-spacing:
        -1.5px;


}




.contact-info-icon {


    width:
        43px;


    height:
        43px;


}




.contact-info-item strong {


    font-size:
        12px;


}




.contact-form-card {


    padding:
        21px 17px;


}




.contact-form-group input,
.contact-form-group select {


    height:
        43px;


}




.contact-option-card {


    padding:
        22px;


}




.contact-cta-card {


    padding:
        26px 20px;


}

}

.contact-alert {

position: fixed;


top: 25px;


right: 25px;


z-index: 9999;


width: min(420px, calc(100% - 30px));


display: flex;


align-items: flex-start;


gap: 13px;


padding: 16px 17px;


border-radius: 14px;


background: #ffffff;


box-shadow:
    0 18px 45px
    rgba(15, 23, 42, 0.14);


animation:
    contactAlertIn 0.35s ease forwards;

}

.contact-alert-success {

border:
    1px solid #bfdbfe;

}

.contact-alert-error {

border:
    1px solid #fecaca;

}

.contact-alert-icon {

width: 38px;


height: 38px;


flex-shrink: 0;


display: flex;


align-items: center;


justify-content: center;


border-radius: 10px;


background: #eff6ff;


color: #2563eb;


font-size: 17px;

}

.contact-alert-error .contact-alert-icon {

background: #fef2f2;


color: #dc2626;

}

.contact-alert-content {

flex: 1;


display: flex;


flex-direction: column;


gap: 4px;

}

.contact-alert-content strong {

color: #0f172a;


font-size: 13px;


font-weight: 800;

}

.contact-alert-content span {

color: #64748b;


font-size: 11px;


line-height: 1.6;

}

.contact-alert-close {

width: 28px;


height: 28px;


flex-shrink: 0;


display: flex;


align-items: center;


justify-content: center;


padding: 0;


border: 0;


border-radius: 7px;


background: transparent;


color: #94a3b8;


cursor: pointer;


font-size: 17px;


transition:
    background 0.2s ease,
    color 0.2s ease;

}

.contact-alert-close:hover {

background: #f1f5f9;


color: #334155;

}

@keyframes contactAlertIn {

from {


    opacity: 0;


    transform:
        translateY(-15px)
        translateX(15px);


}


to {


    opacity: 1;


    transform:
        translateY(0)
        translateX(0);


}

}

@media (max-width: 600px) {

.contact-alert {


    top: 15px;


    right: 15px;


    width:
        calc(100% - 30px);


    box-sizing: border-box;


}

}