/*==================================================
FONT
==================================================*/

.quote-card *{

    box-sizing:border-box;

    font-family:'Inter',sans-serif;

}

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

.quote-card{

    background:#F5F5F5;

    border-radius:32px;

    padding:55px;

}

.quote-header{

    margin-bottom:45px;

}

.quote-header h2{

    font-size:42px;

    font-weight:700;

    color:#151515;

    line-height:1.1;

    margin-bottom:18px;

}

.quote-header p{

    max-width:650px;

    font-size:17px;

    color:#5F5F5F;

    line-height:30px;

}

/*==================================================
STEP
==================================================*/

.quote-step{

    display:none;

}

.quote-step.active{

    display:block;

}

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

.quote-grid{

    display:grid;

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

    gap:26px;

}

.quote-group{

    position:relative;

}

.full-width{

    grid-column:1/-1;

    margin-top:25px;

}

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

.quote-group label{

    display:block;

    margin-bottom:12px;

    color:#181818;

    font-size:15px;

    font-weight:600;

}

.quote-group label span{

    color:#6D3CF5;

}

/*==================================================
INPUT
==================================================*/

.quote-input{

    width:100%;

    height:68px;

    padding:0 28px;

    border-radius:999px;

    border:1px solid #D9D9D9;

    background:#fff;

    color:#111;

    font-size:16px;

    transition:.35s;

}

.quote-input::placeholder{

    color:#B6B6B6;

}

.quote-input:hover{

    border-color:#BBBBBB;

}

.quote-input:focus{

    outline:none;

    border-color:#6D3CF5;

    box-shadow:0 0 0 5px rgba(109,60,245,.08);

}

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

.select-box{

    position:relative;

}

.select-box select{

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

    padding-right:65px;

}

.select-box i{

    position:absolute;

    right:25px;

    top:50%;

    transform:translateY(-50%);

    color:#666;

    pointer-events:none;

    font-size:18px;

}

/*==================================================
DATE ICON
==================================================*/

.input-icon{

    position:relative;

}

.input-icon i{

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    color:#7C7C7C;

    pointer-events:none;

    font-size:18px;

}

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

.quote-textarea{

    width:100%;

    min-height:165px;

    border:1px solid #D9D9D9;

    border-radius:30px;

    padding:22px 26px;

    resize:none;

    font-size:16px;

    background:#fff;

    transition:.35s;

}

.quote-textarea::placeholder{

    color:#B5B5B5;

}

.quote-textarea:focus{

    outline:none;

    border-color:#6D3CF5;

    box-shadow:0 0 0 5px rgba(109,60,245,.08);

}

/*==================================================
FOOTER
==================================================*/

.quote-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-top:45px;

    gap:25px;

}

.quote-buttons{

    display:flex;

    align-items:center;

    gap:18px;

}

/*==================================================
PROGRESS
==================================================*/

.progress-wrapper{

    display:flex;

    align-items:center;

    gap:18px;

}

.progress-text{

    display:flex;

    align-items:flex-end;

    font-weight:700;

    color:#151515;

}

.progress-text span{

    font-size:26px;

    line-height:1;

}

.progress-text small{

    font-size:16px;

    color:#8E8E8E;

    margin-left:4px;

    margin-bottom:2px;

}

.progress-bar{

    width:170px;

    height:8px;

    border-radius:999px;

    background:#DDDDDD;

    overflow:hidden;

}

.progress-fill{

    height:100%;

    background:#6D3CF5;

    border-radius:999px;

    transition:.35s;

}

.step-one{

    width:50%;

}

.step-two{

    width:100%;

}

/*==================================================
PRIMARY BUTTON
==================================================*/

.quote-btn{

    height:62px;

    min-width:190px;

    border:none;

    border-radius:999px;

    background:linear-gradient(90deg,#6D3CF5,#7F4EFF);

    color:#fff;

    font-size:16px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 12px 30px rgba(109,60,245,.18);

}

.quote-btn:hover{

    transform:translateY(-3px);

    box-shadow:0 18px 40px rgba(109,60,245,.28);

}

.quote-btn:active{

    transform:scale(.98);

}

.quote-btn svg{

    transition:.35s;

}

.quote-btn:hover svg{

    transform:translateX(4px);

}

/*==================================================
OUTLINE BUTTON
==================================================*/

.quote-btn-outline{

    height:62px;

    min-width:180px;

    border:1px solid #D7D7D7;

    border-radius:999px;

    background:#fff;

    color:#222;

    font-size:16px;

    font-weight:600;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    cursor:pointer;

    transition:.35s;

}

.quote-btn-outline:hover{

    border-color:#6D3CF5;

    color:#6D3CF5;

    transform:translateY(-2px);

}

.quote-btn-outline svg{

    transition:.35s;

}

.quote-btn-outline:hover svg{

    transform:translateX(-4px);

}

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

.quote-input.error,
.quote-textarea.error{

    border-color:#E53935;

    box-shadow:0 0 0 4px rgba(229,57,53,.08);

}

.error-message{

    margin-top:8px;

    font-size:13px;

    color:#E53935;

}

/*==================================================
SUCCESS MESSAGE
==================================================*/

.quote-success{

    background:#E8F8ED;

    color:#1B7D41;

    border:1px solid #BFE7CC;

    border-radius:18px;

    padding:18px 22px;

    margin-bottom:30px;

    font-size:15px;

    font-weight:500;

}

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

.quote-btn.loading{

    pointer-events:none;

    opacity:.75;

}

.quote-btn.loading svg{

    display:none;

}

.quote-btn.loading::after{

    content:"";

    width:18px;

    height:18px;

    border:2px solid rgba(255,255,255,.35);

    border-top:2px solid #fff;

    border-radius:50%;

    animation:quoteSpin .8s linear infinite;

}

@keyframes quoteSpin{

    to{

        transform:rotate(360deg);

    }

}

/*==================================================
STEP ANIMATION
==================================================*/

.quote-step{

    display:none;

    opacity:0;

    transform:translateX(40px);

    transition:all .45s ease;

}

.quote-step.active{

    display:block;

    opacity:1;

    transform:translateX(0);

    animation:stepFade .45s ease;

}

@keyframes stepFade{

    from{

        opacity:0;

        transform:translateX(35px);

    }

    to{

        opacity:1;

        transform:translateX(0);

    }

}

/*==================================================
INPUT TRANSITIONS
==================================================*/

.quote-group{

    transition:.3s;

}

.quote-group:hover{

    transform:translateY(-2px);

}

.quote-input,
.quote-textarea,
.select-box select{

    transition:

        border-color .30s,

        box-shadow .30s,

        transform .25s,

        background .25s;

}

.quote-input:focus,
.quote-textarea:focus,
.select-box select:focus{

    transform:translateY(-1px);

}

/*==================================================
FLATPICKR
==================================================*/

.flatpickr-calendar{

    border:none !important;

    border-radius:22px !important;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.12) !important;

}

.flatpickr-month{

    background:#6D3CF5 !important;

    color:#fff !important;

}

.flatpickr-current-month .flatpickr-monthDropdown-months{

    color:#fff !important;

}

.flatpickr-current-month input.cur-year{

    color:#fff !important;

}

.flatpickr-weekday{

    color:#666 !important;

    font-weight:600;

}

.flatpickr-day.selected{

    background:#6D3CF5 !important;

    border-color:#6D3CF5 !important;

}

.flatpickr-day:hover{

    background:#EFE9FF !important;

}

/*==================================================
SCROLLBAR
==================================================*/

.quote-textarea::-webkit-scrollbar{

    width:8px;

}

.quote-textarea::-webkit-scrollbar-thumb{

    background:#C7C7C7;

    border-radius:20px;

}

.quote-textarea::-webkit-scrollbar-track{

    background:#F3F3F3;

}

/*==================================================
PLACEHOLDER
==================================================*/

.quote-input::placeholder,

.quote-textarea::placeholder{

    transition:.25s;

}

.quote-input:focus::placeholder,

.quote-textarea:focus::placeholder{

    opacity:.55;

}

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

@media(max-width:1200px){

    .quote-card{

        padding:45px;

    }

}

@media(max-width:991px){

    .quote-card{

        padding:35px;

        border-radius:24px;

    }

    .quote-header{

        margin-bottom:35px;

    }

    .quote-header h2{

        font-size:34px;

    }

    .quote-header p{

        font-size:16px;

        line-height:28px;

    }

    .quote-grid{

        grid-template-columns:1fr;

        gap:22px;

    }

    .quote-footer{

        flex-direction:column;

        align-items:flex-start;

        gap:25px;

    }

    .quote-buttons{

        width:100%;

    }

    .quote-btn,

    .quote-btn-outline{

        flex:1;

        min-width:0;

    }

}

@media(max-width:767px){

    .quote-card{

        padding:25px;

        border-radius:20px;

    }

    .quote-header h2{

        font-size:28px;

    }

    .quote-header p{

        font-size:15px;

        line-height:26px;

    }

    .quote-input{

        height:58px;

        font-size:15px;

        padding:0 22px;

    }

    .quote-textarea{

        min-height:140px;

        padding:18px 22px;

        font-size:15px;

    }

    .quote-btn,

    .quote-btn-outline{

        height:56px;

        font-size:15px;

    }

    .progress-bar{

        width:130px;

    }

}

@media(max-width:480px){

    .quote-footer{

        gap:18px;

    }

    .quote-buttons{

        flex-direction:column;

    }

    .quote-btn,

    .quote-btn-outline{

        width:100%;

    }

    .progress-wrapper{

        width:100%;

        justify-content:space-between;

    }

}

/*==================================
BACK BUTTON
==================================*/

.quote-back{

    width:58px;

    height:58px;

    border-radius:50%;

    border:1px solid #D8D8D8;

    background:#fff;


    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    transition:.3s;

    color:#444;

    flex-shrink:0;

}

.quote-back:hover{

    background:#6D3CF5;

    border-color:#6D3CF5;

    color:#fff;



    transform:translateY(-2px);

}

.quote-back i{

    font-size:18px;

}

@media(max-width:767px){

    .quote-buttons{

        display:flex;

        width:100%;

        gap:12px;

    }

    .quote-back{

        width:56px;

        min-width:56px;

        height:56px;

    }

    .quote-btn{

        flex:1;

    }

}