.volunteer {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
    background-image: url('https://www.jasbir-singh.ca/public/JASBIRSINGH/themeaB9xY12z/assets/images/about/volunteer-bg.jpeg?v=1');
    background-size: cover;
}
.volunteer-wrapper{
    max-width:620px;
    margin:30px auto;
    background:#efefef;
    padding:38px 32px 40px;
}

.volunteer-title {
    font-size: 50px;
    font-weight: 700;
    color: var(--color-1);
    line-height: 1;
    margin-bottom: 22px;
    font-family: var(--font-01);
}

.volunteer-desc{
    font-size:20px;
    color:#3e4756;
    margin-bottom:28px;
}

.form-box{
    background:#e7e7e7;
    padding:22px 20px 35px;
    border:1px solid #dddddd;
}

.form-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.form-top h4 {
    font-family: var(--font-01);
    font-size: 24px;
    text-transform: uppercase;
    color: #3e4756;
    font-weight: 600;
}

.secure{
    font-size:14px;
    color:#666;
}

.form-group{
    margin-bottom:18px;
}

.form-group label {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: #3e4756;
    margin-bottom: 8px;
    font-family: var(--font-02);
}

.form-group label span{
    color:var(--color-1);
}

.form-control{
    width:100%;
    height:42px;
    border:2px solid #cfcfcf;
    background:#fff;
    padding:0 12px;
    font-size:16px;
    outline:none;
    transition:.3s;
}

.form-control:focus{
    border-color:var(--color-1);
}

.form-control::placeholder{
    color:#999;
}

.note {
    margin: 18px 0 28px;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600;
    color: #424242;
    font-family: var(--font-02);
}

.note a{
    color:#184a8b;
    text-decoration:none;
}

.btn-area{
    display:flex;
    justify-content:flex-end;
}

.next-btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border:2px solid var(--color-1);
    color:var(--color-1);
    background:#fff;
    font-size:28px;
    font-family:'Barlow Condensed',sans-serif;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}

.next-btn:hover{
    background:var(--color-1);
    color:#fff;
}

.next-btn svg{
    width:18px;
    height:18px;
    fill:currentColor;
}





.event-search-section{
    background:#efefef;
    padding:120px 20px 160px;
    text-align:center;
}

.event-search-container{
    max-width:900px;
    margin:auto;
}

.event-title {
    font-family: var(--font-01);
    font-size: 48px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-1);
    margin-bottom: 65px;
}

.event-search-form{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.event-field{
    flex:1;
    min-width:500px;
}

.event-field input{
    width:100%;
    height:54px;
    border:1px solid #cfcfcf;
    background:#fff;
    padding:0 16px;
    font-size:16px;
    font-family:var(--font-02);
    color:#444;
    outline:none;
}

.event-field input::placeholder{
    color:#9a9a9a;
}

.event-select{
    width:190px;
}

.event-select select{
    width:100%;
    height:54px;
    border:1px solid #cfcfcf;
    background:#fff;
    padding:0 45px 0 15px;
    font-size:16px;
    font-family:var(--font-02);
    color:#666;
    outline:none;
    cursor:pointer;
}

.search-btn{
    height:50px;
    padding:0 18px;
    border:none;
    background:var(--color-1);
    color:#fff;
    font-family:var(--font-02);
    font-size:18px;
    font-weight:600;
    cursor:pointer;
    transition:.3s;
}

.search-btn:hover{
    opacity:.9;
}

.choose-riding{
    margin-top:20px;
    font-family:var(--font-02);
    font-size:16px;
    color:#444;
}

.choose-riding a{
    color:var(--color-1);
    text-decoration:underline;
}

.event-note{
    margin-top:55px;
    font-family:var(--font-02);
    font-size:18px;
    font-style:italic;
    color:#3d4653;
    line-height:1.7;
}

.event-note a{
    color:var(--color-1);
    text-decoration:underline;
}

@media(max-width:991px){

    .event-title{
        font-size:52px;
    }

    .event-field{
        min-width:100%;
    }

    .event-select{
        width:100%;
    }

    .search-btn{
        width:100%;
        height:54px;
    }

    .event-search-form{
        gap:15px;
    }

}

@media(max-width:767px){

    .event-search-section{
        padding:80px 15px;
    }

    .event-title{
        font-size:38px;
        margin-bottom:40px;
    }

    .event-note{
        font-size:16px;
    }

}