:root {
    /**** GENERAL ****/
    --faw-color-primary : #DB254E;
    --faw-color-secondary : #FFF;

    /**** TEXT ****/
    --faw-text-light : #FFF;
    --faw-text-dark : #000;

    /**** BORDER ****/
    --faw-color-border: #DB254E;
}

.elementor-widget-filter-advance {

    .filter-text{
        color:white;
        font-size: 26px !important;
        font-weight: 500;
        font-family: 'Montserrat',sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    @media screen and (max-width:1024px){
        .filter-text{
            font-size: 19px !important;
        }
        .filter-text img{
            width:20px !important;
            height:auto;
        }
    }

    @media screen and (max-width:852px){
        .filter-text{
            font-size: 15px !important;
        }
        .filter-text img{
            width:16px !important;
            height:auto;
        }
    }

    @media screen and (max-width:805px){
        .filter-text{
            font-size: 14px !important;
        }
        .filter-text img{
            width:15px !important;
            height:auto;
        }
    }

    @media screen and (max-width:430px){
        .filter-text{
            font-size: 11px !important;
        }
        .filter-text img{
            width:10px !important;
            height:auto;
        }
    }

    .filter-text img{
        width:30px;
        height:auto;
    }

    .filter-text p{
        margin-bottom: 0;
    }



    form {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: rgba(255, 255, 255, 0.4);
        border: 2px solid white;
        padding: 40px 20px;
        width: fit-content;
        margin: 40px 9.375vw;
        border-radius: 50px;
        max-height:346px;
    }

    @media screen and (max-width:1344px){
        form{
            margin:20px 3.72vw;
        }
    }

    @media screen and (max-width:1024px){
        form{
            margin:5px 3.72vw;
            padding:15px 5px;
        }
    }

    @media screen and (max-width:1024px){
        form{
            padding:10px 5px;
        }
    }

    @media screen and (max-width:430px){
        form{
            padding:10px 10px;
        }
    }

    .fields {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.25rem;
        margin-bottom: 4rem;
        margin-top:40px;
    }

    @media screen and (max-width:1900px){
        .fields{
            margin-bottom: 1.25rem;
        }
    }

    @media screen and (max-width:1024px){
        .fields{
            margin-bottom: 1rem;
            margin-top: 15px;
        }
    }

    @media screen and (max-width:430px){
        .fields{
            margin-bottom: 0.7rem;
            margin-top: 10px;
        }
    }



    label {
        display: flex;
        gap : 1.25rem;
        align-items: baseline;
        color:white;
        font-family: 'Montserrat',sans-serif;
        font-weight: 400;
        font-size: 24px;
    }

    @media screen and (max-width:1024px){
        label{
            font-size: 18px;
        }
    }

    @media screen and (max-width:852px){
        label{
            font-size: 15px;
        }
    }

    @media screen and (max-width:805px){
        label{
            font-size: 13px;
        }
    }

    @media screen and (max-width:430px){
        label{
            font-size: 10px;
        }
    }

    select {
        width: auto;
        border-bottom: 3px solid var(--faw-color-border);
        border-top : 0;
        border-left : 0;
        border-right : 0;
        border-radius: 0;
        outline: none;
        cursor: pointer;
        max-width: 240px;
        color: rgba(255,255,255,0.4) !important;
        background: transparent;
        font-family: 'Montserrat',sans-serif;
        font-weight: 700;
        font-size: 18px;
    }

    @media screen and (max-width:1024px){
        select{
            font-size: 13px;
        }
    }

    @media screen and (max-width:852px){
        select{
            font-size: 12px;
        }
    }

    @media screen and (max-width:430px){
        select{
            border-bottom: 2px solid var(--faw-color-border);
            font-size: 8.5px;
        }
    }

    select option{
        color:black;
        font-weight: 500;
        background-color: white;
    }

    button[type="submit"] {
        background-color: var(--faw-color-primary);
        color: var(--faw-text-light);
        font-family: 'Montserrat',sans-serif;
        font-weight: 600;
        font-size: 20px;
        border-radius: 20px;
        padding:8px 35px;
    }

    @media screen and (max-width:1024px){
        button[type="submit"]{
            font-size: 13px !important;
            padding:5px 24px !important;
        }
    }

    @media screen and (max-width:430px){
        button[type="submit"]{
            font-size: 8px !important;
            padding:4px 15px !important;
        }
    }

    button[type="submit"]:hover{
        background-color: white;
        color:black;
        transition-duration:0.3s;
    }

    button[type="reset"] {
        background-color: var(--faw-color-primary);
        color: var(--faw-text-light);
        border-radius: 100%;
        line-height: 0;
        padding: 4px;
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 5px;
        margin-left: 10px;
        border: 0;

        svg {
            width: 22px;
            height: 22px;
        }
    }

    @media screen and (max-width:1024px){
        button[type="reset"]{
            width:22px;
            height:22px;
        }
    }

    @media screen and (max-width:430px){
        button[type="reset"]{
            width:18px;
            height:18px;
        }
    }
}