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

.application-section{

    position:relative;

    padding:120px 0;

    overflow:hidden;

    background:
    linear-gradient(
        135deg,
        #FCFEFF 0%,
        #F6FAFD 35%,
        #EEF7FC 70%,
        #FFFFFF 100%
    );

}

.application-section::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    left:-180px;

    top:-180px;

    border-radius:50%;

    background:#DDF8F4;

    filter:blur(120px);

    opacity:.55;

}

.application-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    right:-120px;

    bottom:-120px;

    border-radius:50%;

    background:#E2F1FF;

    filter:blur(120px);

    opacity:.5;

}

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

.application-wrapper{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    align-items:start;

}

/*==================================================
GLASS CARD
==================================================*/

.application-card{

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

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

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

    border-radius:28px;

    padding:45px;

    box-shadow:

    0 20px 55px rgba(0,0,0,.06);

}

/*==================================================
HEADER
==================================================*/

.form-header{

    margin-bottom:35px;

}

.form-header h2{

    font-size:42px;

    color:#0B2C5F;

    margin:15px 0;

    font-weight:700;

}

.form-header p{

    color:#667085;

    line-height:1.8;

    max-width:620px;

}

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

.form-grid{

    display:grid;

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

    gap:24px;

    margin-bottom:25px;

}

.form-group{

    display:flex;

    flex-direction:column;

    position:relative;

}

.form-group label{

    font-size:14px;

    font-weight:600;

    color:#0B2C5F;

    margin-bottom:10px;

}

.form-group label span{

    color:#ff4d4d;

}

/*==================================================
INPUTS
==================================================*/

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    border:1px solid #DFE7EF;

    border-radius:16px;

    background:#fff;

    padding:16px 18px;

    font-size:15px;

    color:#243B53;

    transition:.3s;

    outline:none;

    font-family:inherit;

}

.form-group input::placeholder,

.form-group textarea::placeholder{

    color:#98A2B3;

}

/*==================================================
FOCUS
==================================================*/

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:#19C2B5;

    box-shadow:

    0 0 0 4px rgba(25,194,181,.12);

}

/*==================================================
SELECT
==================================================*/

.form-group select{

    cursor:pointer;

    appearance:none;

    background-image:

    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%230B2C5F' viewBox='0 0 256 256'%3E%3Cpath d='M208.49 88.49a12 12 0 0 0-17 0L128 152 64.49 88.49a12 12 0 0 0-17 17l72 72a12 12 0 0 0 17 0l72-72a12 12 0 0 0 0-17Z'/%3E%3C/svg%3E");

    background-repeat:no-repeat;

    background-position:right 18px center;

    background-size:18px;

    padding-right:50px;

}

/*==================================================
TEXTAREA
==================================================*/

.form-group textarea{

    resize:none;

    min-height:170px;

}

/*==================================================
ERROR
==================================================*/

.error{

    color:#E63946;

    font-size:13px;

    margin-top:8px;

    min-height:18px;

}

.form-group.error input,

.form-group.error textarea,

.form-group.error select{

    border-color:#E63946;

    box-shadow:

    0 0 0 4px rgba(230,57,70,.12);

}

.form-group.success input,

.form-group.success textarea,

.form-group.success select{

    border-color:#19C2B5;

}

/*==================================================
CHECKBOX
==================================================*/

.checkbox-group{

    margin-top:25px;

    margin-bottom:35px;

}

.checkbox-group label{

    display:flex;

    gap:12px;

    align-items:flex-start;

    cursor:pointer;

    color:#667085;

    line-height:1.8;

}

.checkbox-group input{

    margin-top:5px;

    accent-color:#19C2B5;

    width:18px;

    height:18px;

}

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

.submit-btn{

    width:100%;

    height:58px;

    border:none;

    border-radius:50px;

    background:

    linear-gradient(
        135deg,
        #19C2B5,
        #11B3A6
    );

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    transition:.35s;

}

.submit-btn:hover{

    background:#0B2C5F;

    transform:translateY(-3px);

    box-shadow:

    0 15px 35px rgba(11,44,95,.18);

}

.submit-btn:active{

    transform:scale(.98);

}
/*==================================================
UPLOAD AREA
==================================================*/

.upload-area{

    position:relative;

    border:2px dashed #D9E5F1;

    border-radius:20px;

    padding:45px 30px;

    text-align:center;

    background:#FCFDFE;

    cursor:pointer;

    transition:.35s ease;

}

.upload-area:hover{

    border-color:#19C2B5;

    background:#F6FFFD;

}

.upload-area.dragover{

    border-color:#19C2B5;

    background:#ECFCF9;

    transform:scale(1.01);

}

.upload-area i{

    font-size:52px;

    color:#19C2B5;

    margin-bottom:18px;

}

.upload-area h4{

    font-size:22px;

    color:#0B2C5F;

    margin-bottom:10px;

}

.upload-area p{

    color:#667085;

    margin-bottom:8px;

}

.upload-area span{

    color:#19C2B5;

    font-weight:600;

    cursor:pointer;

}

.upload-area small{

    display:block;

    color:#98A2B3;

    margin-top:10px;

}

/*==================================================
FILE PREVIEW
==================================================*/

.file-preview{

    display:none;

    margin-top:25px;

    padding:16px 18px;

    border-radius:16px;

    background:#FFFFFF;

    border:1px solid #E4ECF4;

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

    text-align:left;

}

.file-preview.active{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.file-details{

    display:flex;

    align-items:center;

    gap:15px;

}

.file-details i{

    font-size:30px;

    color:#19C2B5;

}

.file-info h5{

    font-size:15px;

    color:#0B2C5F;

    margin-bottom:4px;

}

.file-info small{

    color:#98A2B3;

}

.remove-file{

    border:none;

    background:none;

    color:#E63946;

    cursor:pointer;

    font-size:18px;

}

/*==================================================
SIDEBAR
==================================================*/

.application-sidebar{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.info-card,

.contact-card{

    border-radius:28px;

    padding:35px;

    box-shadow:0 18px 45px rgba(0,0,0,.06);

}

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

.info-card{

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

    backdrop-filter:blur(18px);

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

}

.info-card h3{

    color:#0B2C5F;

    font-size:26px;

    margin-bottom:28px;

}

.info-card ul{

    list-style:none;

}

.info-card li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:24px;

}

.info-card li:last-child{

    margin-bottom:0;

}

.info-card li i{

    color:#19C2B5;

    font-size:20px;

    margin-top:4px;

}

.info-card strong{

    display:block;

    color:#0B2C5F;

    margin-bottom:5px;

}

.info-card p{

    color:#667085;

    line-height:1.7;

}

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

.contact-card{

    background:

    linear-gradient(

        135deg,

        #0B2C5F,

        #103C74

    );

    color:#FFFFFF;

    position:relative;

    overflow:hidden;

}

.contact-card::before{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

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

    top:-70px;

    right:-70px;

}

.contact-card h3{

    font-size:28px;

    margin-bottom:15px;

}

.contact-card p{

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

    line-height:1.8;

    margin-bottom:28px;

}

.whatsapp-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:100%;

    height:56px;

    border-radius:50px;

    text-decoration:none;

    background:#25D366;

    color:#FFFFFF;

    font-weight:600;

    transition:.35s;

}

.whatsapp-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 35px rgba(37,211,102,.30);

}

.contact-hours{

    margin-top:30px;

    padding-top:25px;

    border-top:1px solid rgba(255,255,255,.15);

    text-align:center;

    line-height:1.8;

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

}

/*==================================================
HOVER EFFECTS
==================================================*/

.application-card,

.info-card,

.contact-card{

    transition:.35s;

}

.application-card:hover,

.info-card:hover{

    transform:translateY(-6px);

    box-shadow:0 22px 60px rgba(0,0,0,.08);

}

/*==================================================
BUTTON LOADING
==================================================*/

.submit-btn.loading{

    pointer-events:none;

    opacity:.8;

}

.submit-btn.loading i{

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

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

@media(max-width:1100px){

    .application-wrapper{

        grid-template-columns:1fr;

    }

    .application-sidebar{

        order:-1;

        display:grid;

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

    }

}

@media(max-width:768px){

    .application-section{

        padding:80px 0;

    }

    .application-card{

        padding:30px;

    }

    .form-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .application-sidebar{

        grid-template-columns:1fr;

    }

    .form-header h2{

        font-size:34px;

    }

    .upload-area{

        padding:35px 20px;

    }

    .upload-area h4{

        font-size:20px;

    }

    .submit-btn{

        height:54px;

    }

}

@media(max-width:480px){

    .application-card{

        padding:24px;

        border-radius:22px;

    }

    .info-card,

    .contact-card{

        padding:25px;

        border-radius:22px;

    }

    .form-header h2{

        font-size:30px;

    }

    .upload-area{

        padding:28px 15px;

    }

    .upload-area i{

        font-size:42px;

    }

}