@import url('./fonts/font.css');

:root {
    --color-white: #fff;
    --color-black: #000000;
    --color-black-200: #00000033;
    --color-light-yellow: #D4B170;
    --color-dark-yellow: #8E6B30;
    --color-dark-yellow-100: #8E6B301A;
    --color-dark-yellow-200: #8E6B3033;
    --color-dark-green: #2A5E31;
    --color-dark-green-300: #2A5E314D;
    --color-main-black: #191919;
    --color-primary-black: #414141;
    --color-secondary-black: #2D2D2D;
    --color-third-black: #323232;
    --color-fourth-black: #0A0A0A;
    --color-gray: #F5F5F5;
    --color-primary-gray: #5C5C5C;
    --color-secondary-gray: #636363;
    --color-light-gray: #E9E9E9;
    --color-navy-gray: #667085;
    --color-matte-gray: #7B7B7B;
    --color-deep-onyx: #252C32;
    --color-wild-sand: #F4F4F4;
    --color-tranquil-black: #344054;
    --color-satin-white: #D0D5DD;
    --color-funky-gray: #787878;
    --color-colour-less: #D7D7D7;
    --color-black-grape: #191D23;
    --color-magnolia-heart: #F9F5FF;
    --color-eerie-black: #1A1A1A;
}

*,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Poppins", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-color: var(--color-gray);
}

a img,
img {
    border: none;
    outline: none !important;
    outline-offset: 0 !important;
}

a,
*:hover,
*:focus,
*:active:focus {
    text-decoration: none;
    outline: none !important;
    outline-offset: 0 !important;
}

a,
i,
input {
    transition: all .3s ease-in-out;
}

ul,
ol,
dl {
    list-style: none;
    margin: 0;
    padding: 0;
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    line-height: normal;
    margin-bottom: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0;
}

button {
    border: 0;
    outline: 0;
    background-color: transparent;
    cursor: pointer;
    box-shadow: none;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 500;
    padding: 14px 20px;
    border-radius: 10px;
    transition: all .3s ease-in-out;
    outline: none !important;
    box-shadow: none !important;
    border: 0;
}

.btn img {
    transition: all .3s ease-in-out;
    width: 18px;
    height: 18px;
}

.btn-sm {
    padding: 12px 20px;
}

.btn-lg {
    padding: 14px 28.5px;
}

.btn-xl {
    padding: 14px 46.5px;
}


.btn-primary,
.btn-primary:disabled {
    color: var(--color-white);
    background-color: var(--color-dark-yellow);
}

.btn-primary:hover,
.btn-primary:focus-visible,
.btn-primary:active {
    color: var(--color-white) !important;
    background-color: var(--color-dark-green) !important;
}

.btn-primary-second,
.btn-primary-second:disabled {
    color: var(--color-white);
    background-color: var(--color-dark-yellow);
}

.btn-primary-second:hover,
.btn-primary-second:focus-visible,
.btn-primary-second:active {
    color: var(--color-dark-yellow) !important;
    background-color: var(--color-white) !important;
}

.btn-primary-outline,
.btn-primary-outline:disabled {
    border: 1px solid var(--color-dark-yellow);
    color: var(--color-secondary-gray);
    background-color: transparent;
}

.btn-primary-outline:hover,
.btn-primary-outline:focus-visible,
.btn-primary-outline:active {
    color: var(--color-white) !important;
    background-color: var(--color-dark-yellow) !important;
}

.btn-secondary,
.btn-secondary:disabled {
    color: var(--color-white);
    background-color: var(--color-dark-green);
}

.btn-secondary:hover,
.btn-secondary:focus-visible,
.btn-secondary:active {
    color: var(--color-white) !important;
    background-color: var(--color-dark-yellow) !important;
}

.btn-white-square {
    box-shadow: 0px 2px 4px 0px #0000001A, -2px 8px 8px 0px #00000017, -4px 17px 11px 0px #0000000D, -7px 31px 13px 0px #00000003, -10px 48px 14px 0px #00000000;
    background-color: var(--color-white);
    border-radius: 10px;
    padding: 11px 15px;
}

h1 {
    font-size: 45px;
    line-height: 52px;
    font-weight: 600;
}

h2 {
    font-size: 35px;
    line-height: normal;
    font-weight: 600;
}

p {
    font-size: 18px;
    line-height: 27px;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;

    &.sm {
        font-size: 16px;
        line-height: 20px;
    }

    &.xsm {
        font-size: 14px;
        line-height: 18px;
    }
}

.font-40 {
    font-size: 40px;
    line-height: normal;
}

.font-36 {
    font-size: 36px;
    line-height: normal;
}

.font-28 {
    font-size: 28px;
    line-height: normal;
}

.font-24 {
    font-size: 24px;
    line-height: normal;
}

.font-22 {
    font-size: 22px;
    line-height: normal;
}

.font-20 {
    font-size: 20px;
    line-height: normal;
}

.font-18 {
    font-size: 18px;
    line-height: normal;
}

.font-16 {
    font-size: 16px;
    line-height: normal;
}

.font-14 {
    font-size: 14px;
    line-height: normal;
}

.font-10 {
    font-size: 10px;
    line-height: normal;
}

.poppins-font {
    font-family: "Poppins", sans-serif;
}

.montserrat-font {
    font-family: "Montserrat", sans-serif;
}

/* CUSTOM TEXT COLOR */
.text-primary-black {
    color: var(--color-primary-black);
}

.text-secondary-black {
    color: var(--color-secondary-black);
}

.text-light-yellow {
    color: var(--color-light-yellow);
}

.text-dark-yellow {
    color: var(--color-dark-yellow);
}

.text-dark-green {
    color: var(--color-dark-green);
}

.text-main-black {
    color: var(--color-main-black);
}

.text-third-black {
    color: var(--color-third-black);
}

.text-gray {
    color: var(--color-gray);
}

.text-primary-gray {
    color: var(--color-primary-gray);
}

.text-secondary-gray {
    color: var(--color-secondary-gray);
}

.text-matte-gray {
    color: var(--color-matte-gray);
}

.text-deep-onyx {
    color: var(--color-deep-onyx);
}

.text-tranquil-black {
    color: var(--color-tranquil-black);
}

.text-funky-gray {
    color: var(--color-funky-gray);
}

.text-colour-less {
    color: var(--color-colour-less);
}

.text-black-grape {
    color: var(--color-black-grape);
}

/* CUSTOM BACKGROUND COLOR */
.bg-dark-yellow-200 {
    background-color: var(--color-dark-yellow-200);
}

.bg-light-yellow {
    background-color: var(--color-light-yellow);
}

/* CUSTOM BORDER COLOR */

.border-dark-yellow-200 {
    border-color: var(--color-dark-yellow-200);
}

/* COMMON CSS */
.common-top-spacing {
    margin-top: 134px;
}

.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}

.py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.mb-70 {
    margin-bottom: 70px;
}

.title-wrapper {
    padding-bottom: 35px;
}

.title-wrapper .title:has(+ .description:not(:empty)) {
    margin-bottom: 10px;
}

.title {
    color: var(--color-main-black);
}

.description {
    color: var(--color-primary-black);
}

.rounded-10 {
    border-radius: 10px;
    overflow: hidden;
}

.rounded-12 {
    border-radius: 12px;
    overflow: hidden;
}

.row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: -10px;
    margin-left: -10px;
}

.g-2,
.gx-2 {
    --bs-gutter-x: 8px;
}

.g-2,
.gy-2 {
    --bs-gutter-y: 8px;
}

.g-4,
.gx-4 {
    --bs-gutter-x: 22px;
}

.g-4,
.gy-4 {
    --bs-gutter-y: 22px;
}

.g-15,
.gy-15 {
    --bs-gutter-y: 15px;
}


/*  */
.form-label {
    color: var(--color-tranquil-black);
    margin-bottom: 6px;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.form-label span {
    color: var(--color-funky-gray);
    font-size: 10px;
}

.form-control,
.form-select {
    background-color: var(--color-white) !important;
    outline: none !important;
    border: 1px solid var(--color-satin-white) !important;
    border-radius: 10px;
    font-size: 14px;
    color: var(--black) !important;
    appearance: none;
    -webkit-appearance: none;
    font-weight: normal;
    padding: 12px 16px;
    /* height: 55px; */
    /* cursor: pointer; */
    box-shadow: none !important;
}

.form-select2 .form-select {
    background: url(./../images/down-white-arrow.svg) 92% / 12px no-repeat;
    border: transparent;
    color: var(--color-white);
    border-radius: 10px;
    height: auto;
    outline: none;
    box-shadow: none;
    font-size: 14px;
    font-weight: 500;
    padding-right: 34px;
    background-color: var(--color-dark-green);
    font-family: "Montserrat", sans-serif;
}

.form-select2 {
    width: auto;
    display: inline-block;
}

.form-control::placeholder,
.form-select::placeholder {
    color: var(--color-navy-gray);
    font-size: 14px;
}

.form-control::-moz-placeholder,
.form-select::-moz-placeholder {
    color: var(--color-navy-gray);
}

.form-control:-ms-input-placeholder,
.form-select:-ms-input-placeholder {
    color: var(--color-navy-gray);
}

.form-control::-webkit-input-placeholder,
.form-select::-webkit-input-placeholder {
    color: var(--color-navy-gray);
}

.form-control::-o-input-placeholder,
.form-select::-o-input-placeholder {
    color: var(--color-navy-gray);
}

.form-check-label {
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    font-family: "Montserrat", sans-serif;
    color: var(--color-primary-black);
}

.form-check-input {
    border-color: #B0BABF !important;
    background-color: #F6F8F9;
    box-shadow: none !important;
    outline: none;
}

.form-check-input:checked {
    background-color: var(--color-dark-green);
    border-color: var(--color-dark-green) !important;
}

/* Custom radio style (Yes / No module) */
.form-check-input[type="radio"] {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #B0BABF !important;
    position: relative;
    margin-top: 0;
    cursor: pointer;
}

.form-check-input[type="radio"]:checked {
    background-color: #ffffff;
    border-color: var(--color-dark-green) !important;
}

.form-check-input[type="radio"]::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background-color: transparent;
    transform: scale(0);
    transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}

.form-check-input[type="radio"]:checked::before {
    background-color: var(--color-dark-green);
    transform: scale(1);
}

.form-check {
    display: inline-flex;
    align-items: center;
}

.form-check-input[type="radio"] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 1px solid var(--color-satin-white) !important;
    position: relative;
    margin-top: 0;
    cursor: pointer;
}

.form-check-input[type="radio"]:checked {
    background-color: var(--color-magnolia-heart);
    border-color: var(--color-dark-green) !important;
}

.form-check-input[type="radio"]::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background-color: transparent;
    transform: scale(0);
    transition: transform .2s ease-in-out, background-color .2s ease-in-out;
}

.form-check-input[type="radio"]:checked::before {
    background-color: var(--color-dark-green);
    transform: scale(1);
}

.form-check {
    padding-left: 24px;
    gap: 12px;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

/* HEADER */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.header .header-wrapper {
    background-color: var(--color-white);
    box-shadow: 3px 3px 30px 0px #00000026;
    border-bottom: 1px solid #D3D3D3;
}

.header .header-wrap {
    border-bottom: 1px solid var(--color-dark-yellow-200);
    padding: 12px 0 5px;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-logo .logo {
    display: flex;
}

.header-inner .contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
}

.custom-link {
    color: var(--color-primary-gray);

    &:hover {
        color: var(--color-dark-green);
    }
}

.header-nav .navbar-nav .nav-item {
    padding-bottom: 8px;
}

.navbar {
    max-width: 1140px;
    margin: 0 auto;
}

.navbar-nav .nav-link {
    color: var(--color-third-black);
    font-size: 16px;
    font-weight: 500;

}

.navbar-nav .nav-link:hover {
    color: var(--color-dark-yellow);
}

/* HERO SECTION */
.hero-wrapper {
    min-height: 100vh;
    padding: 200px 0 80px;
}

.hero-wrapper::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);
    width: 78%;
    height: 100%;
    z-index: 1;
}

.hero-wrapper .hero-img {
    position: absolute;
    inset: 0;
}

.hero-content {
    max-width: 738px;
    z-index: 2;
}

.our_services_sec .hero-content .hero-inner-content {
    max-width: 520px;
}

.hero-inner-content {
    gap: 15px;
    padding-bottom: 55px;
}

.hero-inner-footer {
    display: flex;
    gap: 13px;
}

/* OUR SERVICES */
.our-services-wrapper {
    padding: 96.54px 0;
}

.our-services-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 20px;
}

.our-services-list li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.our-services-list li img {
    min-width: 25px;
    width: 25px;
    height: 25px;
    object-fit: contain;
    object-position: center;
}

/* Quick Access */
.quick-access-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 21.94px;
}

.access_card {
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    box-shadow: 4px 4px 12px 0px #0000001A, 18px 14px 22px 0px #00000017, 39px 32px 30px 0px #0000000D, 70px 56px 36px 0px #00000003, 109px 88px 39px 0px #00000000;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.access_card .access_card_img {
    height: 204px;
}

.access_card .access_card_body {
    padding: 15px 20px 30px;
    max-width: 288px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    justify-content: space-between;
    gap: 25px;
    flex: 1;
}

/* Featured Helpers */
.featured-slider .swiper-slide,
.supporting-slider .swiper-slide {
    height: auto;
}

.featured_card {
    border: 1px solid var(--color-light-gray);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    height: 100%;
}

.featured_card .featured_img {
    height: 357px;
}

.featured_card .featured_body {
    padding: 15px 20px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
}

.featured_card .featured_body_inner {
    width: 100%;
    max-width: 231px;
}

.featured_body_inner .helper_detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 6px;
}

.featured_body_inner .helper_experience {
    display: flex;
    gap: 33px;
}

.featured_body_inner .helper_experience li {
    font-size: 16px;
    line-height: normal;
    font-weight: 500;
    color: var(--color-secondary-gray);
    padding-right: 33px;
    border-right: 1px solid var(--color-secondary-gray);
}

.featured_body_inner .helper_experience li:last-child {
    border: 0;
    padding-right: 0;
}

/* Our Placement */
.our-placement-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.our-placement-grid .our_placement_items {
    display: flex;
    flex-direction: column;
}

.our_placement_items .step_label {
    display: flex;
    gap: 7px;
    padding-bottom: 10px;
}

.our_placement_items .step_label .step_btn {
    white-space: nowrap;
    min-width: 108px;
    border: 1px solid var(--color-light-gray);
    color: var(--color-main-black);
    cursor: default;

    &.active {
        background-color: var(--color-main-black);
        color: var(--color-white);
    }
}

.our_placement_items .step_label img {
    flex: 1;
    width: 204px;
}

.step_card {
    border-radius: 10px;
    border: 1px solid var(--color-light-gray);
    background-color: var(--color-white);
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: self-start;
    gap: 25px;
    flex: 1;
}

.step_card .step_icon {
    min-width: 90px;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    border: 1px solid var(--color-light-gray);
    box-shadow: 2px 3px 8px 0px #0000001A, 7px 13px 15px 0px #00000017, 16px 29px 20px 0px #0000000D, 29px 51px 24px 0px #00000003, 45px 80px 26px 0px #00000000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step_card .step_icon img {
    min-width: 50px;
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.step_card .step_body {
    flex: 1;
}

.step_card .step_body .step_title {
    margin-bottom: 6px;
}

/* Guardian Angel */
.angel-inner-info .angel-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.angel-inner-info .angel-list li {
    display: flex;
    gap: 10px;
}

.angel-inner-info .angel-list li img {
    min-width: 25px;
    width: 25px;
    height: 25px;
    object-fit: contain;
}

.angel-inner-content {
    border: 1px solid var(--color-light-gray);
    border-radius: 10px;
    background-color: var(--color-white);
    padding: 40px 0 40px 29px;
    display: grid;
    align-items: center;
    grid-template-columns: 261px 1fr;
    gap: 16px;
}

.angel-inner-content .angel-btns {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-top: 20px;
    max-width: 202px;
}

.angel-inner-content .guidance-img {
    height: 311px;
    border-bottom-left-radius: 10px;
    border-top-left-radius: 10px;
    overflow: hidden;
}

/* FOOTER */
.footer-wrapper {
    padding: 30px 0;
}

.footer-wrapper .footer-wrap {
    display: grid;
    grid-template-columns: 474px 1fr;
    gap: 40px;
    align-items: center;
}

.footer-wrapper .footer-wrap .footer-content-left {
    padding: 84px 40px 84px 0;
    border-right: 1px solid var(--color-black-200);
}

.footer-content-left .footer-logo-wrap {
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--color-black-200);
}

.footer-content-left .footer-logo-wrap .footer-logo {
    width: 100%;
    max-width: 400px;
}

.footer-inner-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.footer_items .social_media {
    display: flex;
    gap: 8px;
}

.footer_items .footer_label {
    margin-bottom: 10px;
}

.footer_items .footer_list {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 4px;
    list-style-type: disc;
    padding-left: 24px;
}

.footer_items .footer_list li,
.footer_items .footer_list li a {
    font-size: 14px;
    line-height: normal;
    font-weight: 400;
    color: var(--color-fourth-black);
}

.footer_items .footer_list li a:hover {
    color: var(--color-dark-green);
}

/* Search Helpers */
.search-helpers-wrapper {
    padding: 30px 0;
}

.search-helpers-wrap {
    display: grid;
    grid-template-columns: 414px 1fr;
    gap: 20px;
    align-items: start;
}

.search-helpers {
    border-radius: 10px;
    background-color: var(--color-white);
    padding: 20px 0;
}

.helpers-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 20px 10px;
    border-bottom: 1px solid var(--color-dark-yellow-100);

}

.helpers-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

.helpers-select {
    display: flex;
    gap: 15px;
}

.helpers-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 21px;
    row-gap: 24px;
    padding: 24px 20px 0;
}

.helpers_card {
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    border-radius: 10px;
    overflow: hidden;
}

.helpers_body {
    display: grid;
    align-items: center;
    grid-template-columns: 180px 1fr;
    gap: 9px;
}

.helpers_body .helpers_img {
    height: 210px;
    border-radius: 10px;
    overflow: hidden;
}

.helpers_body .helpers_details {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 5px;
    padding-right: 10px;
}

.helpers_body .helpers_details .helpers_labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.helpers_body .helpers_details .description {
    font-size: 12px;
    line-height: normal;
    color: var(--color-secondary-gray);
}

.helpers_details .skills_list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;

}

.helpers_details .skills_list li .skills_items {
    padding: 4px 5px;
    font-size: 10px;
    line-height: normal;
    font-weight: 400;
    color: var(--color-white);
    font-family: "Montserrat", sans-serif;
    background-color: var(--color-dark-green);
    border-radius: 2px;
}

.helpers_card .helpers_footer {
    padding: 9px 14px;
}

.action_btn {
    display: flex;
    gap: 14px;
}

.helpers_footer {
    display: flex;
    align-items: center;
    gap: 29px;
}

.btn-group {
    gap: 2px;
}

.action_btn .btn {
    border-radius: 2px !important;
    font-size: 10px;
    line-height: normal;
    font-family: "Montserrat", sans-serif;
    padding: 5px;
}

.btn-group .btn img {
    width: 14px;
    height: 14px;
}

.btn-group .dropdown-toggle::after {
    display: none;
}

.action_btn .btn-primary {
    min-width: 72px;
}

/* FILTERS */
.search-helpers-wrap .helpers-filter {
    position: sticky;
    top: 140px;
}

.helpers-filter .filter-wrap {
    background-color: var(--color-white);
    border-radius: 10px;
    overflow: hidden;
}

.helpers-filter .accordion-body {
    padding: 0;
}

.helpers-filter .accordion-item {
    border-radius: 0px !important;
    border: 0;
    border-bottom: 1px solid var(--color-dark-yellow-100);
}

.helpers-filter .accordion-button {
    outline: none;
    box-shadow: none;
    font-size: 20px;
    line-height: normal;
    font-weight: 600;
    border-radius: 0 !important;
    padding: 15px 24px;
    color: var(--color-deep-onyx);
}

.helpers-filter .accordion-button:not(.collapsed) {
    background-color: var(--color-dark-green);
    color: var(--color-white);
}

.helpers-filter .accordion-button:not(.collapsed)::after {
    filter: invert(1);
}

.helpers-filter .filter_list {
    padding: 10px 20px 14px;
    border-bottom: 1px solid var(--color-dark-yellow-100);
}

.helpers-filter .filter_list:last-child {
    border-bottom: 0;
}

.helpers-filter .filter-wrap .filter_btns {
    padding: 10px 20px 20px;
}

/* SERVICES PAGE */
/* SERVICES SECTION */
.service-wrap .service_card {
    background-color: var(--color-white);
    border-radius: 10px;
    border: 1px solid var(--color-light-gray);
    padding: 35px 40px;
    height: 100%;
}

.service_card .service_img {
    min-width: 50px;
    width: 50px;
    height: 50px;
    margin-bottom: 10px;
}

.service_lists {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bg-white .service_lists .service_items {
    background-color: var(--color-wild-sand);
}

.service_lists .service_items {
    border-radius: 10px;
    background-color: var(--color-white);
    padding: 30px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.service_lists .service_items img {
    min-width: 20px;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

.service_sec .service_image {
    height: 492px;
}

/* placement process */
.placement-process-card {
    background-color: var(--color-gray);
    border-radius: 10px;
    padding: 25px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: 100%;
}

.placement-process-card .placement-process-list {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 10px;
    list-style-type: disc;
    padding-left: 28px;
}

.placement-process-card .placement-process-list li {
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: var(--color-dark-green);
    font-family: "Montserrat", sans-serif;
}

/* PROMO BANNER */
.promo_banner_wrapper {
    background-color: var(--color-dark-green);
    border: 1px solid var(--color-light-gray);
    border-radius: 10px;
    padding: 40px 65px;
}

.promo_banner_wrap {
    display: grid;
    align-items: center;
    grid-template-columns: 511px 1fr;
    gap: 16px;
}

.promo_banner_wrap .promo_inner_content {
    gap: 56px;
}

.promo_banner_wrap .promo_inner_img {
    height: 313px;
}

.promo_banner_wrap .promo_inner_btns {
    display: flex;
    gap: 13px;
}

.promo_banner_wrap .promo_inner_btns .btn {
    min-width: 204px;
}

/* Our Hiring Process */
.our_hiring_wrap .step_card {
    height: 100%;
}

.our_hiring_wrap .step_card .step_body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.employer_inner_content {
    gap: 15px;
}

.services-card {
    border: 1px solid var(--color-light-gray);
    border-radius: 10px;
    background-color: var(--color-white);
    padding: 25px 30px;
    display: flex;
    align-items: start;
    gap: 20px;
    height: 100%;
}

.services-card .services-icon {
    min-width: 55px;
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1.26px 1.9px 5.06px 0px #0000001A, 4.43px 8.22px 9.48px 0px #00000017, 10.12px 18.34px 12.65px 0px #0000000D, 18.34px 32.25px 15.17px 0px #00000003, 28.45px 50.58px 16.44px 0px #00000000;
    border: 1px solid var(--color-light-gray);
    border-radius: 6px;
    background-color: var(--color-white);
}

.services-card .services-icon img {
    min-width: 30px;
    width: 30px;
    height: 30px;
}

.services-card .services-body {
    gap: 5px;
}

/* Supporting Section */
.supporting_card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-light-gray);
    border-radius: 10px;
    background-color: var(--color-white);
    overflow: hidden;
    height: 100%;
}

.supporting_card .supporting_img {
    height: 188px;
}

.supporting_card .supporting_body {
    padding: 25px 16px 30px;
}

.supporting_card .supporting_body .supporting_title {
    margin-bottom: 5px;
    min-height: 54px;
}

/* Join Us Page */
/* Domestic Helpers */
.domestic-helpers-wrapper .helpers_img {
    border: 5px solid var(--color-dark-yellow);
}

/* Overview Section */
.overview_wrap {
    gap: 5px;
}

.overview_card {
    box-shadow: 2px 2px 10px 0px #0000001A;
    border: 1px solid var(--color-light-gray);
    border-radius: 20px;
    background-color: var(--color-white);
    padding: 20px 20px;
    height: 100%;
}

.overview_card .overview_header {
    background-color: var(--color-dark-green);
    padding: 15px 14px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.overview_card .overview_header img {
    min-width: 30px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    object-position: center;
}

.information_form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 19px;
    row-gap: 24px;
}

/* Our Placement Process */
.our_placement_process_grid {
    display: grid;
    grid-template-columns: 260px 297px 1fr 1fr;
    gap: 12px;
}

.our_placement_process_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-top: -20px;
}

.our_placement_process_inner .steps {
    padding-left: 14px;
    line-height: 40px;
}

.our_placement_process_card {
    background-color: var(--color-white);
    border: 1px solid var(--color-light-gray);
    padding: 20px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -12px;
    position: relative;
    height: 100%;
}

.our_placement_process_card .our_placement_process_icon {
    box-shadow: 1.11px 1.67px 4.44px 0px #0000001A, 3.89px 7.22px 8.33px 0px #00000017, 8.89px 16.11px 11.11px 0px #0000000D, 16.11px 28.33px 13.33px 0px #00000003, 25px 44.44px 14.44px 0px #00000000;
    border: 1px solid var(--color-light-gray);
    background-color: var(--color-white);
    border-radius: 6px;
    min-width: 50px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.our_placement_process_card .our_placement_process_icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

/* Careers at Guardian Angel */
.careers_guardian_grid {
    display: grid;
    grid-template-columns: 522px 1fr;
    gap: 30px;
}

.openings_list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.openings_list .openings_items {
    background-color: var(--color-wild-sand);
    border-radius: 10px;
    padding: 28px 10px 28px 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.openings_list .openings_items i {
    color: var(--color-dark-green);
    font-size: 20px;
}

.resume_form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.resume-upload-box {
    border: 1px solid var(--color-satin-white);
    border-radius: 10px;
    background-color: var(--color-white);
    padding: 24px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
}

.resume-upload-btn {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background-color: var(--color-dark-green);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-size: 20px;
    line-height: 1;
}

.resume-upload-box .resume-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.row-span-2 {
    grid-row: span 2 / span 2;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.careers_guardian_grid .careers_label {
    margin-bottom: 10px;
}

.risk_wrapper .risk_form {
    gap: 6px;
}

.risk_form .form-group .form-label {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 4px;
}

.risk_form .form-group textarea.form-control {
    font-size: 12px;
    box-shadow: 0px 1px 2px 0px #1018280D !important;
    border: 1px solid var(--color-satin-white) !important;
    padding: 10px 14px;
    resize: none;
}

.risk_form .form-group textarea.form-control::placeholder {
    font-size: 12px;
    color: var(--color-navy-gray);
}

.form-check-label span {
    font-size: 10px;
}

.experience_form {
    gap: 24px;
}

.skills_items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}

.skills_items .form-check {
    gap: 6px;
}

.experience-options {
    display: flex;
    gap: 6px;
}

.experience-option {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--color-light-gray);
    background-color: transparent;
    color: var(--color-primary-black);
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    flex: 1;
}

.experience-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.experience-option span {
    pointer-events: none;
}

.experience-option input:checked+span {
    color: var(--color-eerie-black);
}

.experience-option input:checked~span,
.experience-option input:checked~* {
    /* no-op to keep selector valid */
}

.experience-option input:checked~span,
.experience-option input:checked {
    /* keep for specificity */
}

.experience-option input:checked+span {
    /* already handled above */
}

/* Use :has to style the active pill (supported in modern browsers) */
.experience-option:has(input:checked) {
    background-color: var(--color-dark-green-300);
    border-color: var(--color-dark-green);
}