.contact-page{

    padding-top:10px;
    padding-bottom:80px;

    background:
    linear-gradient(
        to bottom,
        #f8f9fb,
        #ffffff
    );
}

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

.contact-hero{

    padding-top:10px;
}

/* =========================================================
   HERO CARD
========================================================= */

.contact-hero-card{

    padding:42px;

    border-radius:34px;

    background:
    linear-gradient(
        135deg,
        #ffffff,
        #fbfbfc
    );

    border:
    1px solid rgba(0,0,0,.05);

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

/* =========================================================
   BADGE
========================================================= */

.contact-badge{

    display:inline-flex;

    align-items:center;

    padding:9px 16px;

    border-radius:999px;

    background:#fff;

    border:
    1px solid rgba(0,0,0,.05);

    font-size:.78rem;

    font-weight:600;

    color:#666;
}

/* =========================================================
   TITLE
========================================================= */

.contact-title{

    font-size:clamp(34px,5vw,52px);

    line-height:1.15;

    font-weight:700;

    letter-spacing:-1.8px;

    color:#111;
}

/* =========================================================
   SUBTITLE
========================================================= */

.contact-subtitle{

    max-width:620px;

    font-size:1rem;

    line-height:1.9;

    color:#727987;
}

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

.contact-action-wrap{

    display:flex;

    flex-wrap:wrap;

    gap:14px;
}

.contact-btn-dark{

    height:54px;

    padding:0 26px;

    border-radius:18px;

    background:#111;

    color:#fff;

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

    font-weight:600;

    transition:.25s ease;
}

.contact-btn-dark:hover{

    background:#000;

    color:#fff;

    transform:translateY(-1px);
}

.contact-btn-light{

    height:54px;

    padding:0 26px;

    border-radius:18px;

    background:#fff;

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

    color:#111;

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

    font-weight:600;

    transition:.25s ease;
}

.contact-btn-light:hover{

    background:#f7f7f7;

    color:#111;

    transform:translateY(-1px);
}

/* =========================================================
   INFO CARD
========================================================= */

.contact-info-card{

    padding:34px;

    border-radius:30px;

    background:#fff;

    border:
    1px solid rgba(0,0,0,.05);

    box-shadow:
    0 14px 36px rgba(0,0,0,.04);
}

/* =========================================================
   COMPANY HEAD
========================================================= */

.contact-company-head{

    display:flex;

    align-items:center;

    gap:16px;

    margin-bottom:30px;
}

/* =========================================================
   COMPANY LOGO
========================================================= */

.contact-company-logo{

    width:56px;
    height:56px;

    border-radius:18px;

    background:#111;

    color:#fff;

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

    font-size:1.2rem;

    flex-shrink:0;
}

/* =========================================================
   COMPANY NAME
========================================================= */

.contact-company-name{

    font-size:1.1rem;

    font-weight:700;

    color:#111;

    margin-bottom:6px;
}

/* =========================================================
   COMPANY DESC
========================================================= */

.contact-company-desc{

    font-size:.92rem;

    line-height:1.7;

    color:#7a808c;

    margin-bottom:0;
}

/* =========================================================
   INFO LIST
========================================================= */

.contact-info-list{

    display:flex;

    flex-direction:column;

    gap:20px;
}

/* =========================================================
   INFO ITEM
========================================================= */

.contact-info-item{

    display:flex;

    align-items:flex-start;

    gap:16px;
}

/* =========================================================
   INFO ICON
========================================================= */

.contact-info-icon{

    width:42px;
    height:42px;

    border-radius:14px;

    background:#f4f6f8;

    color:#111;

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

    flex-shrink:0;
}

/* =========================================================
   INFO LABEL
========================================================= */

.contact-info-label{

    font-size:.8rem;

    font-weight:600;

    color:#8b93a1;

    margin-bottom:4px;

    text-transform:uppercase;

    letter-spacing:.3px;
}

/* =========================================================
   INFO TEXT
========================================================= */

.contact-info-text{

    font-size:.95rem;

    line-height:1.7;

    color:#111;
}

/* =========================================================
   LINK
========================================================= */

.contact-link{

    color:#111;

    text-decoration:none;

    font-weight:600;
}

.contact-link:hover{

    color:#000;
}

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

@media(max-width:768px){

    .contact-hero-card{

        padding:28px 22px;

        border-radius:26px;
    }

    .contact-title{

        font-size:2rem;
    }

    .contact-subtitle{

        font-size:.92rem;
    }

    .contact-btn-dark,
    .contact-btn-light{

        width:100%;
    }

    .contact-info-card{

        padding:26px 22px;

        border-radius:24px;
    }

    .contact-company-head{

        align-items:flex-start;
    }

}