:root {
    --icon-red: #E42628;
    --icon-blue: #20A9E0;
    --icon-dark: #273238;
    --icon-border: #e1e6ea;
}


body{
    width: 100%;
    overflow-x: hidden;
    transition: none;
}

.modern-fieldset {
    position: relative;
    margin: 25px auto !important;
    padding: 30px 35px !important;
    background: #ffffff;
    border: 1px solid var(--icon-border) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .06);
    animation: formShow .5s ease;
}



    .modern-fieldset::before {
        content: "";
        position: absolute;
        top: 0;
        left: 30px;
        right: 30px;
        height: 3px;
        border-radius: 0 0 5px 5px;
        background: linear-gradient( 90deg, var(--icon-red), var(--icon-blue) );
    }



    .modern-fieldset legend {
        width: auto !important;
        margin: 0 0 20px 5px !important;
        padding: 0 10px !important;
        color: var(--icon-dark);
        background: #fff;
        border: 0 !important;
        font-size: 20px;
        font-weight: 700;
    }



        .modern-fieldset legend::before {
            content: "";
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 9px;
            background: var(--icon-red);
            border-radius: 50%;
            vertical-align: 2px;
        }



.AlseinTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
}



    .AlseinTable td:first-child {
        width: 10px;
    }



    .AlseinTable td:nth-child(2) {
        width: 27%;
        padding: 8px 20px 8px 0;
        color: #374151;
        font-size: 14px;
        font-weight: 600;
        vertical-align: middle;
        transition: color .25s ease;
    }



        .AlseinTable td:nth-child(2) strong {
            color: var(--icon-red) !important;
        }



    .AlseinTable tr:focus-within td:nth-child(2) {
        color: var(--icon-red);
    }



.modern-input {
    width: 100%;
    height: 48px;
    padding: 10px 14px;
    color: #263238;
    background: #f8fafb;
    border: 1px solid var(--icon-border) !important;
    border-radius: 9px !important;
    outline: none !important;
    font-size: 14px;
    box-shadow: none !important;
    transition: border-color .25s ease, box-shadow .25s ease, background .25s ease, transform .25s ease;
}


    

    .modern-input:hover {
        background: #fff;
        border-color: #bfc9cf !important;
    }


   

    .modern-input:focus {
        background: #fff;
        border-color: var(--icon-red) !important;
        box-shadow: 0 0 0 3px rgba(228, 38, 40, .09) !important;
        transform: translateY(-1px);
    }



    .modern-input::placeholder {
        color: #a0a9af;
        transition: opacity .2s ease;
    }


    .modern-input:focus::placeholder {
        opacity: .5;
    }




.modern-textarea {
    height: 115px !important;
    min-height: 115px;
    padding-top: 13px;
    resize: vertical;
    line-height: 1.5;
}




.AlseinTable tr {
    animation: rowShow .4s ease both;
}


    .AlseinTable tr:nth-child(1) {
        animation-delay: .05s;
    }

    .AlseinTable tr:nth-child(2) {
        animation-delay: .10s;
    }

    .AlseinTable tr:nth-child(3) {
        animation-delay: .15s;
    }

    .AlseinTable tr:nth-child(4) {
        animation-delay: .20s;
    }

    .AlseinTable tr:nth-child(5) {
        animation-delay: .25s;
    }

    .AlseinTable tr:nth-child(6) {
        animation-delay: .30s;
    }

    .AlseinTable tr:nth-child(7) {
        animation-delay: .35s;
    }

    .AlseinTable tr:nth-child(8) {
        animation-delay: .40s;
    }


@keyframes rowShow {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes formShow {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




.modern-button-area {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 25px 0 15px;
}



.modern-submit {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 210px;
    height: 50px;
    padding: 0 25px;
    color: #fff !important;
    background: linear-gradient( 135deg, var(--icon-red), #ef4a4c );
    border: none !important;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    box-shadow: 0 7px 18px rgba(228, 38, 40, .20);
    overflow: hidden;
    transition: all .25s ease;
}



    .modern-submit::before {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: linear-gradient( 90deg, transparent, rgba(255,255,255,.3), transparent );
        transform: skewX(-20deg);
        transition: left .6s ease;
    }


   

    .modern-submit:hover {
        color: #fff !important;
        transform: translateY(-2px);
        box-shadow: 0 10px 25px rgba(228, 38, 40, .28);
    }


        .modern-submit:hover::before {
            left: 130%;
        }


 

    .modern-submit i {
        transition: transform .25s ease;
    }


    .modern-submit:hover i {
        transform: scale(1.15) rotate(-5deg);
    }




.LoadingIcon {
    width: 28px !important;
    height: 28px !important;
}



@media (max-width: 768px) {

    .modern-fieldset {
        margin: 15px 0 !important;
        padding: 25px 15px !important;
        border-radius: 13px !important;
    }


        .modern-fieldset::before {
            left: 15px;
            right: 15px;
        }


        .modern-fieldset legend {
            font-size: 18px;
        }


    .AlseinTable {
        display: block;
    }


        .AlseinTable tbody,
        .AlseinTable tr {
            display: block;
            width: 100%;
        }


        .AlseinTable tr {
            margin-bottom: 14px;
        }


        .AlseinTable td:first-child {
            display: none;
        }


        .AlseinTable td:nth-child(2) {
            display: block;
            width: 100% !important;
            padding: 0 0 6px;
            font-size: 13px;
        }


        .AlseinTable td:nth-child(3) {
            display: block;
            width: 100%;
        }


    .modern-input {
        height: 47px;
    }


    .modern-textarea {
        height: 105px !important;
    }


    .modern-button-area {
        flex-direction: column;
        gap: 10px;
    }


    .modern-submit {
        width: 100%;
        max-width: 320px;
    }
}


.iconic-info {
    position: relative;
    margin: 20px auto 30px;
    padding: 0;
    max-width: 1100px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid #e6eaed;
    box-shadow: 0 8px 30px rgba(0,0,0,.06);
    overflow: hidden;
    animation: iconicShow .6s ease;
}



.iconic-info-header {
    position: relative;
    padding: 32px 35px 28px;
    color: #fff;
    background: linear-gradient( 120deg, #E42628 0%, #df3437 45%, #20A9E0 100% );
    overflow: hidden;
}


    .iconic-info-header::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -70px;
        top: -100px;
        border: 35px solid rgba(255,255,255,.08);
        border-radius: 50%;
    }


.iconic-badge {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 10px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
}


.iconic-info-header h2 {
    margin: 0 0 10px;
    font-size: 27px;
    font-weight: 700;
    color: #fff;
}


.iconic-question {
    margin: 0;
    max-width: 750px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,.95);
    font-weight: 500;
}



.iconic-content {
    padding: 28px 35px 25px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.7;
}


    .iconic-content p {
        margin: 0 0 14px;
    }


    .iconic-content strong {
        color: #273238;
    }




.iconic-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 22px 0;
    padding: 17px 20px;
    background: #fff7f7;
    border-left: 4px solid #E42628;
    border-radius: 9px;
}


.iconic-highlight-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    color: #E42628;
    background: #ffe5e5;
    border-radius: 50%;
    font-size: 17px;
}


.iconic-highlight strong {
    display: block;
    margin-bottom: 2px;
    color: #E42628;
}


.iconic-highlight span {
    display: block;
    color: #68737a;
    font-size: 13px;
}



.iconic-subtitle {
    margin: 25px 0 14px;
    color: #273238;
    font-size: 17px;
    font-weight: 700;
}



.iconic-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}


.iconic-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 14px;
    background: #f8fafb;
    border: 1px solid #edf0f2;
    border-radius: 9px;
    transition: all .25s ease;
}


    .iconic-item:hover {
        background: #fff;
        border-color: #20A9E0;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(32,169,224,.08);
    }


    .iconic-item i {
        min-width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #20A9E0;
        background: #e9f8fd;
        border-radius: 7px;
        margin-top: 1px;
    }


    .iconic-item span {
        color: #59636a;
        font-size: 13px;
        line-height: 1.55;
    }



.iconic-ending {
    margin-top: 22px !important;
    padding-top: 18px;
    border-top: 1px solid #edf0f2;
}



.iconic-coffee {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding: 17px 20px;
    background: #f7fbfd;
    border-radius: 10px;
    border: 1px solid #e2f1f7;
}


    .iconic-coffee > i {
        font-size: 24px;
        color: #20A9E0;
    }


    .iconic-coffee strong {
        display: block;
        color: #273238;
        margin-bottom: 3px;
    }


    .iconic-coffee span {
        display: block;
        color: #68737a;
        font-size: 13px;
    }



.iconic-final {
    margin-top: 20px !important;
    text-align: center;
    color: #59636a;
}



.iconic-cta {
    padding: 24px 30px;
    text-align: center;
    background: #fafbfc;
    border-top: 1px solid #edf0f2;
}


.iconic-cta-question {
    margin-bottom: 5px;
    color: #E42628;
    font-size: 21px;
    font-weight: 700;
}


.iconic-cta-text {
    color: #68737a;
    font-size: 14px;
}



@keyframes iconicShow {

    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}




@media(max-width: 768px) {

    .iconic-info {
        margin: 15px 0 25px;
        border-radius: 13px;
    }


    .iconic-info-header {
        padding: 25px 20px;
    }


        .iconic-info-header h2 {
            font-size: 22px;
        }


    .iconic-question {
        font-size: 14px;
    }


    .iconic-content {
        padding: 22px 18px;
    }


    .iconic-list {
        grid-template-columns: 1fr;
    }


    .iconic-highlight {
        align-items: flex-start;
        padding: 14px;
    }


    .iconic-coffee {
        align-items: flex-start;
        padding: 15px;
    }


    .iconic-cta {
        padding: 20px 15px;
    }


    .iconic-cta-question {
        font-size: 18px;
    }
}

.iconic-question-label {
    line-height: 1.5 !important;
    vertical-align: top !important;
    padding-top: 12px !important;
}

    .iconic-question-label strong {
        color: #E42628 !important;
    }

    .iconic-question-label small {
        display: block;
        margin-top: 7px;
        color: #89939a;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.5;
    }