/* =====================================================
   MR CONTACT PREMIUM
   Part 1/4
   Layout + Left Column
===================================================== */

:root{

    --bg:#0f0f12;

    --card:#17171d;

    --card2:#1d1d25;

    --border:rgba(255,255,255,.06);

    --text:#ffffff;

    --muted:#b7b7bd;

    --red:#8f1d2e;

    --red2:#b22234;

    --red3:#d62839;

    --radius:28px;

    --transition:.35s;

}

/* ==========================================
   SECTION
========================================== */

.contact-premium{

    position:relative;

    background:var(--bg);

    padding:120px 40px;

    overflow:hidden;

}

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

.contact-wrapper{

    max-width:1450px;
    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:stretch;

    grid-auto-rows:1fr;

}

/* ==========================================
   LEFT
========================================== */

.contact-left{

    display:flex;

    flex-direction:column;

}

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

.contact-left h2{

    color:var(--text);

    font-size:64px;

    line-height:1.05;

    font-weight:800;

    margin:0 0 30px;

}

/* ==========================================
   DESCRIPTION
========================================== */

.contact-left p{

    color:var(--muted);

    font-size:20px;

    line-height:1.9;

    margin:0 0 45px;

    max-width:680px;

}

/* ==========================================
   BADGES
========================================== */

.contact-badges{

    display:flex;

    flex-wrap:wrap;

    gap:16px;

    margin-bottom:45px;

}

.contact-badge{

    display:flex;

    align-items:center;

    gap:8px;

    padding:14px 22px;

    border-radius:999px;

    background:rgba(143,29,46,.10);

    border:1px solid rgba(143,29,46,.25);

    color:#ececec;

    font-size:15px;

    transition:var(--transition);

}

.contact-badge:hover{

    transform:translateY(-3px);

    border-color:rgba(214,40,57,.45);

    background:rgba(143,29,46,.16);

}

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

.contact-info{

    display:flex;

    flex-direction:column;

    gap:22px;

    flex:1;

}

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

.contact-card{

    background:var(--card);

    border:1px solid rgba(143,29,46,.14);

    border-radius:24px;

    padding:28px;

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-4px);

    border-color:rgba(214,40,57,.35);

    box-shadow:

        0 20px 50px rgba(0,0,0,.20);

}

.contact-card small{

    display:block;

    color:#9f3043;

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:13px;

    margin-bottom:12px;

}

.contact-card a,
.contact-card span{

    color:#fff;

    text-decoration:none;

    font-size:18px;

    font-weight:700;

}
/* =====================================================
   PART 2/4
   RIGHT COLUMN
===================================================== */

.contact-form{

    display:flex;
    flex-direction:column;

    align-self:stretch;

    background:linear-gradient(
        180deg,
        var(--card2),
        var(--card)
    );

    border-radius:30px;

    border:1px solid var(--border);

    padding:50px;
    min-height:100%;

    position:relative;

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.35);

}

/* Glow */

.contact-form::before{

    content:"";

    position:absolute;

    top:-140px;
    right:-120px;

    width:320px;
    height:320px;

    border-radius:50%;

    background:
        radial-gradient(
            rgba(143,29,46,.18),
            transparent 70%
        );

    pointer-events:none;

}

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

.contact-form h3{

    color:#fff;

    font-size:40px;

    font-weight:800;

    text-align:center;

    line-height:1.2;

    margin:0 0 38px;

    position:relative;

}

.contact-form h3::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    margin:18px auto 0;

    border-radius:30px;

    background:linear-gradient(
        90deg,
        var(--red),
        var(--red3)
    );

}

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

.mr-form{

    display:flex;

    flex-direction:column;

    flex:1;

}

.mr-form form{

    display:flex;

    flex-direction:column;

    flex:1;

}

/* Przycisk zawsze na dole */

.contact-form .ff_submit_btn_wrapper{

    margin-top:auto;

}
/* =====================================================
   PART 3/4
   FLUENT FORMS PREMIUM
===================================================== */

/* Formularz */

.contact-form .ff-default{

    width:100%;

}

/* Ukryj etykiety */

.contact-form .ff-el-form-label{

    display:none;

}

/* Odstępy */

.contact-form .ff-el-group{

    margin-bottom:22px;

}

/* Wszystkie pola */

.contact-form input,
.contact-form textarea,
.contact-form select,
.contact-form .ff-el-form-control{

    width:100%;

    background:#111114;

    color:#ffffff;

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

    border-radius:16px;

    padding:18px 20px;

    font-size:16px;

    transition:.30s;

    box-sizing:border-box;

}

/* Placeholder */

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

    color:#8b8b94;

}

/* Focus */

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

    outline:none;

    border-color:#b22234;

    background:#15151b;

    box-shadow:

        0 0 0 3px rgba(178,34,52,.12),
        0 0 25px rgba(143,29,46,.18);

}

/* Textarea */

.contact-form textarea{

    min-height:180px;

    resize:none;

}

/* Fluent nie może zmieniać wysokości */

.contact-form textarea.ff-el-form-control{

    min-height:180px;

}

/* Checkbox */

.contact-form input[type="checkbox"]{

    width:auto;

}

/* Radio */

.contact-form input[type="radio"]{

    width:auto;

}

/* Select */

.contact-form select{

    appearance:none;

}

/* Success */

.contact-form .ff-message-success{

    background:#14301f;

    color:#b9ffd4;

    border:1px solid #2d9c5d;

    border-radius:16px;

    padding:18px;

}

/* Errors */

.contact-form .ff-el-is-error input,
.contact-form .ff-el-is-error textarea{

    border-color:#ff5757;

}

/* Error text */

.contact-form .text-danger{

    color:#ff8f8f;

    margin-top:8px;

    font-size:14px;

}
/* =====================================================
   PART 4/4
   BUTTON + ANIMATIONS + RESPONSIVE
===================================================== */

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

.contact-form .ff-btn-submit,
.contact-form .ff-btn.ff-btn-submit{

    position:relative;

    width:100%;

    height:62px;

    border:none;

    border-radius:18px;

    overflow:hidden;

    cursor:pointer;

    color:#fff;

    font-size:17px;

    font-weight:700;

    letter-spacing:.3px;

    background:linear-gradient(
        135deg,
        #8f1d2e,
        #b22234 50%,
        #d62839
    );

    transition:
        transform .30s,
        box-shadow .30s;

    box-shadow:
        0 18px 40px rgba(143,29,46,.30);

}

/* Shine */

.contact-form .ff-btn-submit::before,
.contact-form .ff-btn.ff-btn-submit::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:45%;

    height:100%;

    transform:skewX(-25deg);

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );

    transition:left .8s;

}

/* Hover */

.contact-form .ff-btn-submit:hover,
.contact-form .ff-btn.ff-btn-submit:hover{

    transform:translateY(-3px);

    box-shadow:
        0 25px 50px rgba(143,29,46,.40);

}

.contact-form .ff-btn-submit:hover::before,
.contact-form .ff-btn.ff-btn-submit:hover::before{

    left:170%;

}

/* Active */

.contact-form .ff-btn-submit:active{

    transform:scale(.98);

}

/* ===============================
   CARD ANIMATION
================================ */

.contact-card{

    transition:
        transform .35s,
        box-shadow .35s,
        border-color .35s;

}

.contact-form{

    transition:
        transform .35s,
        box-shadow .35s;

}

.contact-form:hover{

    transform:translateY(-5px);

    box-shadow:
        0 40px 80px rgba(0,0,0,.45);

}

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

@media (max-width:1100px){

.contact-wrapper{

    grid-template-columns:1fr;

    gap:60px;

}

.contact-left h2{

    font-size:52px;

}

}

@media (max-width:768px){

.contact-premium{

    padding:80px 24px;

}

.contact-left h2{

    font-size:40px;

}

.contact-left p{

    font-size:17px;

}

.contact-form{

    padding:32px;

}

.contact-form h3{

    font-size:32px;

}

.contact-card{

    padding:24px;

}

}

@media (max-width:480px){

.contact-left h2{

    font-size:34px;

}

.contact-form h3{

    font-size:28px;

}

.contact-badge{

    width:100%;

    justify-content:center;

}

}
.contact-form .ff-message-success{

    text-align:center;

    font-size:17px;

    line-height:1.7;

    padding:22px;

    border-radius:18px;

}