/* Start Navigation */
.header__container {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

body {
    margin: 0;
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #F8F7F4;
    line-height: 1.5;
}

header {
    display: flex;
    height: 100px;
    align-items: center;
    justify-content: space-between;
    padding: 20px 5.2%;
    background-color: #FFFFFF;
}

nav {
    display: flex;
    gap: 40px;
}

.logo {
    font-size: 40px;
    font-weight: 700;
    color: #E9450A;
}

.nav__icon {
    max-width: 24px;
}

.nav__icon img {
    display: flex;
    width: 100%;
    height: auto;
    object-fit: contain;
    color: #1E4BB1;
}

.nav__link {
    text-decoration: none;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    row-gap: 4px;
}

.nav__text {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 700;
    color: #1C1C1C;
}

/* End Navigation */

/* Start Breadcrumb */
.breadcrumb__container {
    margin-top: 24px;
}

.breadcrumb__nav {
    max-width: 1720px;
    margin: 0 5.2%;
    display: flex;
    column-gap: 4px;
    align-items: center;
}

.breadcrumb__separator {
    display: flex;
    align-items: center;
    margin-left: 8px;
}

.breadcrumb__link {
    font-size: 16px;
    font-weight: 500;
    color: #828282;
}

.breadcrumb__current {
    font-size: 16px;
    font-weight: 500;
    color: #1C1C1C;
}

/* End Breadcrumb */

/* Start Hero banner */
.hero-banner__container {
    max-width: 1200px;
    margin: 40px auto 60px auto;
    display: flex;
}

.hero-banner__content {
    flex-basis: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-banner__image {
    flex-basis: 50%;
}

.hero-banner__image {
    display: flex;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.hero-banner__image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.title-herobanner__header {
    border-bottom: 2px solid #DCDCDC;
    position: relative;
}

.title-herobanner__title {
    font-size: 56px;
    font-weight: 700;
    color: #1C1C1C;
    padding-bottom: 24px;
    line-height: 1.25;
}

.title-herobanner__divider {
    display: flex;
    height: 4px;
    width: 120px;
    background-color: #E9450A;
    position: absolute;
    bottom: -2px;
}

.hero-banner__description {
    margin-top: 24px;
}

.hero-banner__text {
    font-size: 20px;
    font-weight: 500;
    color: #636363;
}

/* End Hero banner */

/* Start Search by Field */
.search-by-field {
    max-width: 1820px;
    background-color: #F5F1EA;
}

.title-section__header {
    border-bottom: 2px solid #DCDCDC;
    position: relative;
    width: fit-content;
}

.title-section__title {
    font-size: 48px;
    font-weight: 700;
    color: #1C1C1C;
    padding-bottom: 24px;
    line-height: 1.25;
}

.title-section__divider {
    display: flex;
    height: 4px;
    width: 120px;
    background-color: #E9450A;
    position: absolute;
    bottom: -2px;
}

.search-by-field__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0 60px 0;
}

.search-by-category__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.search-by-category__tag {
    font-size: 16px;
    font-weight: 500;
    color: #1C1C1C;
    background-color: #FFFFFF;
    padding: 10px 16px;
    border-radius: 90px;
}

.search-by-category__tag.active {
    background-color: #E9450A;
    color: #FFFFFF;
}


.case-category-divorces {
    margin-top: 40px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(384px, 1fr));
}

.case-category-divorce__header {
    display: flex;
    padding: 16px 20px;
    background-color: #E9EDF7;
    border-left: 4px solid #1E4BB1;
    column-gap: 4px;
}

.case-category-divorce__title {
    font-size: 20px;
    font-weight: 700;
    color: #1E4BB1;
}

.case-category-divorce__link-text {
    color: #E9450A;
    font-size: 14px;
    font-weight: 500;
}

.case-category-divorce {
    display: flex;
    flex-direction: column;
}

.case-category-divorce__info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.case-category-divorce__action {
    display: flex;
    column-gap: 8px;
}

.case-category-divorce__count {
    font-size: 14px;
    font-weight: 400;
    color: #1E4BB1;
    margin-top: 4px;
}

.case-category-divorce__tags {
    padding: 16px 0;
    background-color: #FFFFFF;
}

.case-category-divorce__tags-container {
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.case-category-divorce__tag {
    font-size: 12px;
    font-weight: 400;
    color: #101828;
    background-color: #FAF8F5;
    padding: 3px 12px;
    border-radius: 90px;
}

/* End Search by Field */

/* Start Latest Solution Case */
.latest-solution-case {
    display: flex;
    padding: 60px 0 60px 0;
    background-color: #FFFFFF;
}

.latest-solution-case__container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    flex-direction: column;
    width: 100%;
}

.lawyers__card {
    display: flex;
    flex-direction: column;
    padding: 40px 60px;
    background-color: #FAF8F5;
    row-gap: 32px;
}

.lawyers__card-body {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
    font-size: 16px;
    font-weight: 400;
    color: #1C1C1C;
}

.lawyers__card-text {
    font-size: 16px;
    font-weight: 400;
    color: #1C1C1C;
}

/* not last child */
.lawyers__card:not(:last-child) {
    margin-bottom: 24px;
}

.lawyers__card-header {
    font-size: 24px;
    font-weight: 700;
    color: #1C1C1C;
    border-bottom: 2px solid #DCDCDC;
    width: fit-content;
    padding-bottom: 18px;
    position: relative;
}

.lawyers__card-number {
    font-size: 24px;
    font-weight: 700;
    color: #E9450A;
}

.lawyers-card__avatar {
    max-width: 200px;
    width: 100%;
}

.lawyers-card__avatar-image {
    display: flex;
    width: 100%;
    height: auto;
    object-fit: cover;
}

.lawyers-card__info {
    display: flex;
    column-gap: 40px;
}

.lawyers-card__details {
    flex: 1;
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.lawyers-card__name-and-icon {
    display: flex;
}

.lawyers-card__name-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 32px;
    font-weight: 700;
    color: #1C1C1C;
}

.lawyers-card__specialization {
    display: grid;
    /* 2 item on 1 row */
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.lawyers-card__location {
    display: flex;
    align-items: center;
    column-gap: 8px;
}

.lawyers-card__location-icon {
    display: flex;
    align-items: center;
}

.lawyers-card__location-text {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #1C1C1C
}

.lawyers-card__location-text.special {
    color: #1E4BB1;
}

.lawyers-card__location-sep {
    display: flex;
    align-items: center;
}

.lawyers-card__access {
    display: flex;
    column-gap: 8px;
}

.lawyers-card__access-icon {
    display: flex;
    align-items: center;
}

.lawyers-card__access-text {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #1C1C1C;
}

.lawyer-card__info-divider {
    height: 1px;
    background-color: #EDEDED;
    width: 100%;
    display: block;
}

.lawyer-card__info-bar {
    display: flex;
    justify-content: space-between;
}

.lawyer-card__status {
    display: flex;
    column-gap: 8px;
    align-items: center;
}

.lawyer-card__status-text {
    font-size: 16px;
    font-weight: 500;
    color: #515151;
}

.lawyer-card__status-text--bold {
    font-weight: 700;
    color: #1E4BB1;
}

.lawyer-card__status-dot {
    display: flex;
}

.lawyer-card__contact {
    display: flex;
    column-gap: 12px;
}

.lawyer-card__contact-link {
    font-size: 16px;
    font-weight: 500;
    color: #F7F5F5;
    background-color: #1E4BB1;
    padding: 16px;
    display: flex;
    align-items: center;
}

.lawyer-card__contact-phone {
    display: flex;
    background-color: #E9450A;
    column-gap: 16px;
    align-items: center;
    padding: 16px;
}

.lawyer-card__phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lawyer-card__phone-text {
    font-size: 16px;
    font-weight: 500;
    color: #F9F7F6;
}

.lawyers-card__content {
    margin-top: 20px;
    padding: 20px;
    background-color: #F5F1EA;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.lawyers__card-tags {
    display: flex;
    column-gap: 8px;
}

.lawyers__card-tag {
    font-size: 16px;
    font-weight: 500;
    color: #101828;
    background-color: #FFFFFF;
    padding: 10px 16px;
    border-radius: 90px;
    border: 1px solid #EDEDED;
}

.lawyers__card-quote-text {
    font-size: 24px;
    font-weight: 500;
    color: #1C1C1C;
}

.lawyers__card-meta {
    display: flex;

}

.lawyers__card-meta-item {
    font-size: 14px;
    font-weight: 400;
    color: #1E4BB1;
    display: flex;
    align-items: center;
}

.lawyers__card-meta-item:not(:last-child)::after {
    content: '';
    display: flex;
    width: 4px;
    height: 4px;
    background-color: #E9450A;
    border-radius: 50%;
    margin: 0 12px;
}

.lawyers__card-divider {
    height: 4px;
    background-color: #E9450A;
    width: 100px;
    display: block;
    position: absolute;
    bottom: -2px;
    left: 0;
}

.lawyers__card-line {
    font-size: 16px;
    font-weight: 400;
    color: #1C1C1C;
    margin: 0;
}

.lawyers__card-button {
    display: flex;
    border: 1px solid #E9450A;
    column-gap: 16px;
    padding: 16px;
    margin-top: 12px;
}

.lawyers__card-button-divider {
    display: flex;
    width: 1px;
    background-color: #E9450A;
    height: 28px;
}

.lawyers__card-button-text {
    font-size: 16px;
    font-weight: 500;
    color: #E9450A;
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.lawyers__card-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.lawyers__card-list-title {
    font-size: 20px;
    font-weight: 700;
    color: #1E4BB1;
    display: flex;
    flex-direction: column;
    row-gap: 8px;
}

.lawyers__card-list-description {
    font-size: 16px;
    font-weight: 400;
    color: #636363;
}

.lawyers__card-list-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    margin-top: 20px;
}

.lawyers__card-list-item {
    position: relative;
    padding-left: 28px;
    line-height: 1.5;
    color: #1C1C1C;
    font-size: 16px;
    font-weight: 400;
}

.lawyers__card-list-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity="0.2" d="M14 8C14 9.18669 13.6481 10.3467 12.9888 11.3334C12.3295 12.3201 11.3925 13.0892 10.2961 13.5433C9.19975 13.9974 7.99335 14.1162 6.82946 13.8847C5.66558 13.6532 4.59648 13.0818 3.75736 12.2426C2.91825 11.4035 2.3468 10.3344 2.11529 9.17054C1.88378 8.00666 2.0026 6.80026 2.45673 5.7039C2.91085 4.60754 3.67989 3.67047 4.66658 3.01118C5.65328 2.35189 6.81331 2 8 2C9.5913 2 11.1174 2.63214 12.2426 3.75736C13.3679 4.88258 14 6.4087 14 8Z" fill="%23E9450A"/><path d="M10.8538 6.14625C10.9002 6.19269 10.9371 6.24783 10.9623 6.30853C10.9874 6.36923 11.0004 6.43429 11.0004 6.5C11.0004 6.56571 10.9874 6.63077 10.9623 6.69147C10.9371 6.75217 10.9002 6.80731 10.8538 6.85375L7.35375 10.3538C7.30732 10.4002 7.25217 10.4371 7.19147 10.4623C7.13077 10.4874 7.06571 10.5004 7 10.5004C6.9343 10.5004 6.86923 10.4874 6.80853 10.4623C6.74783 10.4371 6.69269 10.4002 6.64625 10.3538L5.14625 8.85375C5.05243 8.75993 4.99972 8.63268 4.99972 8.5C4.99972 8.36732 5.05243 8.24007 5.14625 8.14625C5.24007 8.05243 5.36732 7.99972 5.5 7.99972C5.63268 7.99972 5.75993 8.05243 5.85375 8.14625L7 9.29313L10.1463 6.14625C10.1927 6.09976 10.2478 6.06288 10.3085 6.03772C10.3692 6.01256 10.4343 5.99961 10.5 5.99961C10.5657 5.99961 10.6308 6.01256 10.6915 6.03772C10.7522 6.06288 10.8073 6.09976 10.8538 6.14625ZM14.5 8C14.5 9.28558 14.1188 10.5423 13.4046 11.6112C12.6903 12.6801 11.6752 13.5132 10.4874 14.0052C9.29973 14.4972 7.99279 14.6259 6.73192 14.3751C5.47104 14.1243 4.31285 13.5052 3.40381 12.5962C2.49477 11.6872 1.8757 10.529 1.6249 9.26809C1.37409 8.00721 1.50282 6.70028 1.99479 5.51256C2.48676 4.32484 3.31988 3.30968 4.3888 2.59545C5.45772 1.88122 6.71442 1.5 8 1.5C9.72335 1.50182 11.3756 2.18722 12.5942 3.40582C13.8128 4.62441 14.4982 6.27665 14.5 8ZM13.5 8C13.5 6.9122 13.1774 5.84883 12.5731 4.94436C11.9687 4.03989 11.1098 3.33494 10.1048 2.91866C9.09977 2.50238 7.9939 2.39346 6.92701 2.60568C5.86011 2.8179 4.8801 3.34172 4.11092 4.11091C3.34173 4.8801 2.8179 5.86011 2.60568 6.927C2.39347 7.9939 2.50238 9.09977 2.91867 10.1048C3.33495 11.1098 4.0399 11.9687 4.94437 12.5731C5.84884 13.1774 6.91221 13.5 8 13.5C9.45819 13.4983 10.8562 12.9184 11.8873 11.8873C12.9184 10.8562 13.4983 9.45818 13.5 8Z" fill="%23E9450A"/></svg>') no-repeat center;
    background-size: contain;
}

.lawyers__card-important {
    padding: 20px 32px;
    background-color: #FFFFFF;
    display: flex;
    row-gap: 12px;
    flex-direction: column;
    border-left: 3px solid #4B6FC1;
}

.lawyers__card-important-title {
    font-size: 16px;
    font-weight: 700;
    color: #E9450A;
}

.lawyers__card-important-text {
    font-size: 16px;
    font-weight: 400;
    color: #1C1C1C;
}

.lawyers__card-footer {
    display: flex;
    justify-content: flex-start;
    font-size: 16px;
    font-weight: 400;
    color: #828282;
}

.footer-policy__contact-form {
    background-image: url('../images/policy-contact-bg.png');
    background-repeat: no-repeat;
    min-height: 747px;
    background-color: #47413E;
    position: relative;
}

.footer-policy__title {
    font-size: 48px;
    font-weight: 700;
    color: #1C1C1C;
    padding-bottom: 24px;
}

.footer-policy__contact-form-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 0 60px 0;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    align-items: center;
    transform: translateX(100px);
}

.footer-policy__contact-form-group {
    background-color: #F5F1EA;
    max-width: 1820px;
    width: 100%;
    position: absolute;
    bottom: 0;
}

.footer-policy__title-group {
    border-bottom: 2px solid #DCDCDC;
    position: relative;
    width: fit-content;
}

.footer-policy__divider {
    display: flex;
    height: 4px;
    width: 120px;
    background-color: #E9450A;
    position: absolute;
    bottom: -2px;
}

.footer-policy__contact-form-button-text {
    font-size: 20px;
    font-weight: 400;
    color: #1C1C1C;
}

.footer-policy__contact-form-button {
    display: flex;
    align-items: center;
    padding: 16px;
    width: fit-content;
    background-color: #E9450A;
    column-gap: 16px;
}

.footer-policy__contact-form-divider {
    display: block;
    width: 1px;
    height: 28px;
    background-color: #FFFFFF;
}

.footer-policy__contact-form-icon {
    display: flex;
    align-items: center;
}

.footer-policy__contact-form-text {
    color: #F5F3F2;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
}

/* End Latest Solution Case */

/* Start Pagination */
.pagination {
    margin-top: 40px;
    display: flex;
    column-gap: 5px;
    justify-content: flex-end
}

.pagination__link {
    display: flex;
    padding: 12px;
    min-width: 48px;
    justify-content: center;
    border: 1px solid #F1F1F1;
    align-items: center;
    column-gap: 10px;
}

.pagination__link.disabled {
    pointer-events: none;
}

.pagination__link.disabled .pagination__text {
    color: #515151;
}

.pagination__link.active {
    background-color: #E9450A;
    border: transparent;
    pointer-events: none;
}

.pagination__link.active .pagination__text {
    color: #FFFFFF;
}

.pagination__text {
    font-size: 16px;
    font-weight: 400;
    color: #101828;
    display: flex;
    align-items: center;
}


.pagination__icon {
    display: flex;
    align-items: center;
}

/* End Pagination */

/* Start Footer */
footer {
    background-color: #47413E;
}

.footer__container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer__content {
    padding: 32px 0 32px 0;
    display: flex;
    column-gap: 40px;
}

.footer__column {
    flex: 1;
}

.footer__nav {
    flex: 1;
    max-width: 208px;
    width: 100%;
}

.footer__column-title {
    font-size: 16px;
    font-weight: 700;
    color: #E9450A;
    padding-bottom: 8px;
    border-bottom: 1px solid #636363;
    position: relative;
}

.footer__column-title::after {
    content: '';
    display: block;
    width: 64px;
    height: 3px;
    background-color: #E9450A;
    position: absolute;
    bottom: -1px;
}

.footer__column-group {
    display: flex;
    margin-top: 20px;
}

.footer__list-item {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.footer__link {
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    display: flex;
}

.footer__list-item-group {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.footer__list-sub-item {
    display: flex;
    flex-direction: column;
    row-gap: 12px;
}

.footer__sublink {
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
}

.footer__sublink::before {
    content: '';
    background-color: #E9450A;
    width: 4px;
    height: 4px;
    display: inline-block;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 16px;
}

.footer__list-sub-item--right-caret {
    max-width: 20px;
    width: 100%;
    display: flex;
    margin-left: 8px;
}

.footer__link--red {
    color: #E9450A;
}

.footer__bottom {
    display: flex;
    width: 100%;
    border-top: 1px solid #515151;
}

.footer__bottom-links {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 14px 0 14px 0;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.footer__logo-link {
    font-size: 24px;
    font-weight: 700;
    color: #ED6A3B;
}

.footer__bottom-link {
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
}

.footer__copyright {
    padding: 20px 0;
    background-color: #272422;
}

.footer__copyright-text {
    font-size: 20px;
    font-weight: 400;
    color: #FFFFFF;
    text-align: center;
}

/* End Footer */