:root {

    --maroon: #8f1d30;
    --maroon-dark: #751426;
    --maroon-light: #a92039;

    --yellow: #ffd166;

    --background: #f4f5f8;

    --white: #ffffff;

    --text: #202020;
    --text-light: #707070;

    --border: #e4e4e4;

}

.kontak-main *,
.kontak-footer * {

    box-sizing: border-box;

}

body {

    margin: 0;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "DM Sans",
        Arial,
        sans-serif;

}

.kontak-main {

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

    margin:
        0 auto;

    padding:
        135px 0 70px;

}

.kontak-heading {

    margin-bottom:
        35px;

}

.kontak-eyebrow {

    display:
        inline-block;

    margin-bottom:
        9px;

    color:
        var(--maroon);

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;

}

.kontak-heading h1 {

    margin:
        0 0 10px;

    color:
        #202020;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        42px;

    line-height:
        1.2;

    font-weight:
        800;

}

.kontak-heading h1 span {

    color:
        var(--maroon);

}

.kontak-heading p {

    max-width:
        650px;

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        14px;

    line-height:
        1.7;

}

.kontak-card {

    display:
        grid;

    grid-template-columns:
        38%
        minmax(0, 62%);

    overflow:
        hidden;

    min-height:
        600px;

    background:
        var(--white);

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

    border-radius:
        22px;

    box-shadow:
        0 15px 40px
        rgba(0,0,0,.08);

}

.kontak-info {

    position:
        relative;

    overflow:
        hidden;

    padding:
        48px 38px;

    background:
        linear-gradient(
            155deg,
            #971d35,
            #751326
        );

    color:
        #ffffff;

}

.info-eyebrow {

    display:
        inline-block;

    margin-bottom:
        10px;

    color:
        var(--yellow);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.8px;

}

.kontak-info h2 {

    margin:
        0 0 14px;

    color:
        #ffffff;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        30px;

    line-height:
        1.2;

}

.info-description {

    margin:
        0 0 35px;

    color:
        rgba(255,255,255,.76);

    font-size:
        13px;

    line-height:
        1.75;

}

.contact-item {

    display:
        flex;

    align-items:
        center;

    gap:
        14px;

    margin-bottom:
        23px;

}

.contact-icon {

    width:
        46px;

    height:
        46px;

    flex-shrink:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

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

    border-radius:
        12px;

    background:
        rgba(255,255,255,.10);

    color:
        var(--yellow);

}

.contact-icon i {

    font-size:
        19px;

}

.contact-item span {

    display:
        block;

    margin-bottom:
        3px;

    color:
        rgba(255,255,255,.58);

    font-size:
        10px;

    font-weight:
        600;

    text-transform:
        uppercase;

    letter-spacing:
        .8px;

}

.contact-item strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        500;

}

.contact-decoration {

    position:
        absolute;

    right:
        -45px;

    bottom:
        -45px;

    width:
        160px;

    height:
        160px;

}

.contact-decoration span {

    position:
        absolute;

    display:
        block;

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

    border-radius:
        50%;

}

.contact-decoration span:nth-child(1) {

    width:
        160px;

    height:
        160px;

}

.contact-decoration span:nth-child(2) {

    width:
        110px;

    height:
        110px;

    top:
        25px;

    left:
        25px;

}

.contact-decoration span:nth-child(3) {

    width:
        60px;

    height:
        60px;

    top:
        50px;

    left:
        50px;

}

.kontak-form-area {

    padding:
        48px 48px;

}

.form-heading {

    margin-bottom:
        28px;

}

.form-heading span {

    color:
        var(--maroon);

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        1.7px;

}

.form-heading h2 {

    margin:
        6px 0 6px;

    color:
        #242424;

    font-family:
        "Playfair Display",
        Georgia,
        serif;

    font-size:
        28px;

    font-weight:
        800;

}

.form-heading p {

    margin:
        0;

    color:
        var(--text-light);

    font-size:
        13px;

}

.kontak-form {

    display:
        grid;

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

    gap:
        19px;

}

.form-group {

    min-width:
        0;

}

.form-group:nth-last-child(2),
.form-group:nth-last-child(1) {

    grid-column:
        span 2;

}

.form-group label {

    display:
        block;

    margin-bottom:
        7px;

    color:
        #292929;

    font-size:
        12px;

    font-weight:
        700;

}

.contact-input {

    position:
        relative;

}

.contact-input > i {

    position:
        absolute;

    top:
        50%;

    left:
        15px;

    transform:
        translateY(-50%);

    color:
        #999999;

    font-size:
        16px;

    pointer-events:
        none;

}

.contact-input input,
.contact-input textarea {

    width:
        100%;

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

    border-radius:
        10px;

    outline:
        none;

    background:
        #ffffff;

    color:
        #222222;

    font-family:
        inherit;

    font-size:
        13px;

    transition:
        .2s ease;

}

.contact-input input {

    height:
        48px;

    padding:
        0 15px 0 44px;

}

.contact-input textarea {

    min-height:
        120px;

    padding:
        13px 15px 13px 44px;

    resize:
        vertical;

    line-height:
        1.6;

}

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

    color:
        #aaaaaa;

}

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

    border-color:
        var(--maroon);

    box-shadow:
        0 0 0 3px
        rgba(143,29,48,.08);

}

.contact-input:focus-within > i {

    color:
        var(--maroon);

}

.textarea-input > i {

    top:
        18px;

    transform:
        none;

}

.contact-submit {

    grid-column:
        span 2;

    width:
        100%;

    height:
        50px;

    margin-top:
        2px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--maroon);

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        14px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        .2s ease;

}

.contact-submit:hover {

    background:
        var(--maroon-dark);

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 18px
        rgba(143,29,48,.18);

}

.contact-submit i {

    font-size:
        16px;

    transition:
        .2s ease;

}

.contact-submit:hover i {

    transform:
        translateX(3px);

}

.kontak-footer {

    min-height:
        70px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #751326;

    color:
        rgba(255,255,255,.9);

}

.kontak-footer p {

    margin:
        0;

    font-size:
        12px;

}

.contact-toast {

    position:
        fixed;

    right:
        25px;

    bottom:
        25px;

    z-index:
        9999;

    min-width:
        280px;

    padding:
        14px 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    border-left:
        4px solid
        #16a34a;

    border-radius:
        11px;

    background:
        #ffffff;

    color:
        #333333;

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.16);

    font-size:
        13px;

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(15px);

    transition:
        .25s ease;

}

.contact-toast.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}

.contact-toast i {

    color:
        #16a34a;

    font-size:
        18px;

}

@media (max-width: 900px) {

    .kontak-card {

        grid-template-columns:
            1fr;

    }

    .kontak-info {

        padding:
            40px 35px;

    }

    .kontak-form-area {

        padding:
            40px 35px;

    }

}

@media (max-width: 650px) {

    .kontak-main {

        width:
            calc(100% - 24px);

        padding:
            115px 0 50px;

    }

    .kontak-heading h1 {

        font-size:
            32px;

    }

    .kontak-heading p {

        font-size:
            13px;

    }

    .kontak-card {

        border-radius:
            18px;

    }

    .kontak-info {

        padding:
            35px 25px;

    }

    .kontak-form-area {

        padding:
            32px 22px;

    }

    .kontak-form {

        grid-template-columns:
            1fr;

    }

    .form-group:nth-last-child(2),
    .form-group:nth-last-child(1) {

        grid-column:
            span 1;

    }

    .contact-submit {

        grid-column:
            span 1;

    }

}

@media (max-width: 430px) {

    .kontak-heading h1 {

        font-size:
            28px;

    }

    .kontak-info h2 {

        font-size:
            26px;

    }

    .kontak-form-area {

        padding:
            28px 18px;

    }

    .contact-toast {

        left:
            15px;

        right:
            15px;

        min-width:
            auto;

    }

}