/* BREADCRUMB */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #626568;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {margin-inline: 8px; content: '/';}
.breadcrumb li a {color: var(--c-tertiary);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li a svg {margin-right: 3px;}
.breadcrumb li .active {color: var(--_c-grey-600);}
.breadcrumb * {transition: var(--transition);}

/* QUOTE */
.quote {padding-block: 30px 70px; --_fs-xxl: calc(var(--fs-xl, 36px) * 2);}
.quote .wrapper {background: no-repeat center/cover url(/quote-bg.webp);}
.quote .main {display: grid; grid-template-columns: repeat(2, 1fr); margin-bottom: 50px;}
.quote .main > :first-child {position: relative; font-size: var(--fs-xl, 36px); padding-top: 25px;}
.quote .main > :first-child:before {position: absolute; top: 0; left: 0; width: 135px; height: 5px; background-color: var(--c-secondary); content: '';}
.quote .main p {padding-left: 15px;}
.quote .wrapper > ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.quote .wrapper > ul li {display: flex; align-items: flex-start; gap: 40px;}
.quote .wrapper > ul li > :first-child {font-size: var(--_fs-xxl); color: var(--c-secondary);}
.quote .wrapper > ul li > div :first-child {display: block; font-size: calc(var(--fs-md, 24px) - 2px); margin-bottom: 8px;}
:where(.quote, .quote :where(.wrapper, .main, .main *, ul, ul *)) {transition: var(--transition);}

/* ASSITS */
.assist {padding-block: 50px 70px; margin-top: 70px; --_fs-xxl: calc(var(--fs-xl, 36px) + 14px); background-color: #f8f8f8;}
.assist .title {text-align: center; margin-bottom: 40px}
.assist .title :first-child {position: relative; font-size: var(--_fs-xxl); padding-bottom: 20px;}
.assist .title :first-child::after {position: absolute; inset: auto 0 0; width: 120px; height: 2px; background-color: var(--c-secondary); margin-inline: auto; content: '';}
.assist .wrapper {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 30px;}
.assist .info {display: flex; align-items: flex-start; gap: 30px;}
.assist .info div > :first-child {display: block; font-size: calc(var(--fs-md, 24px) - 2px); margin-bottom: 8px;}
:where(.assist, .assist :where(.title, .title *, .wrapper, .info, .info *)) {transition: var(--transition);}

/* Media Query */
@media only screen and (max-width: 1200px) {
    .quote .wrapper > ul li {gap: 20px;}
    .assist .info {gap: 20px;}
}

@media only screen and (max-width: 991px) {
    .quote .wrapper > ul {grid-template-columns: repeat(2, 1fr);}
    .assist .wrapper {grid-template-columns: repeat(2, 1fr);}
}

@media only screen and (max-width: 767px) {
    .assist {padding-block: 30px; margin-top: 40px;}
    .quote .main {grid-template-columns: 1fr; gap: 10px;}
    .quote .main > :first-child {padding-top: 15px;}
    .quote .main p {padding: 0;}
}

@media only screen and (max-width: 575px) {
    .quote .wrapper > ul {grid-template-columns: 1fr; gap: 20px;}
    .quote-form form .group {flex-wrap: wrap;}
    .quote-form form button[type="submit"] {margin-inline: auto;}
    .assist .wrapper {grid-template-columns: 1fr; gap: 20px;}
}

@media only screen and (max-width: 475px) {
    .quote .main {margin-bottom: 30px;}
    .quote .wrapper > ul li {gap: 15px;}
    .quote-form form {padding: 20px 20px 30px;}
    .quote-form form .group {flex-direction: column; align-items: flex-start;}
    .quote-form form input[id="captcha"] {max-width: 100%; margin: 0;}
    .assist .title {margin-bottom: 20px;}
    .assist .title :first-child {padding-bottom: 15px;}
    .assist .info {gap: 15px;}
}