.offerboat {
--ob-band: #f3f7fa;
}
.ob-hero {
padding: 3rem 0;
background: linear-gradient(180deg, var(--ob-band), #fff);
}
@media (min-width: 992px) {
.ob-hero-text > h1 {
margin-top: -.2em;
}
}
.ob-hero-lines {
margin-top: 1.25rem;
}
.ob-claim-block {
width: fit-content;
max-width: 100%;
margin-top: 1.75rem;
}
.ob-flags {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: .5rem;
margin: 1.5rem 0 0;
padding: 0;
list-style: none;
font-size: 1.75rem;
line-height: 1;
}
.ob-flags a {
display: block;
}
.ob-flags .flag-icon {
display: block;
}
.ob-claim {
margin: 0;
font-family: 'Nunito Sans', sans-serif;
font-size: 1.35rem;
font-weight: 700;
font-style: italic;
line-height: 1.3;
color: var(--brand-primary);
}
.ob-band-light {
background: var(--ob-band);
}
.ob-hero-map {
display: block;
width: 100%;
height: auto;
border-radius: var(--by-radius);
}
.ob-step-shot {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
margin-bottom: 1rem;
object-fit: cover;
object-position: top left;
border: 1px solid #dde6ec;
border-radius: .75rem;
background: #fff;
}
.ob-type-photo {
border-radius: .75rem .75rem 0 0;
}
.ob-type-media {
position: relative;
overflow: hidden;
border-radius: .75rem .75rem 0 0;
}
.ob-type-media .ob-type-photo {
filter: saturate(.8);
}
.ob-type-media::after {
content: "";
position: absolute;
inset: 0;
background: rgba(var(--brand-primary-rgb), .08);
pointer-events: none;
}
.ob-tile {
height: 100%;
padding: 1.5rem;
border-radius: .75rem;
background: var(--ob-band);
text-align: center;
}
.ob-tile-icon {
display: block;
margin-bottom: .75rem;
font-size: 2.2rem;
color: var(--brand-primary);
}
.ob-steps > li::before {
top: -.75rem;
left: -.75rem;
}
.ob-type {
display: flex;
flex-direction: column;
height: 100%;
background: var(--by-surface);
border-radius: .75rem;
}
.ob-type > .p-4 {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.ob-type-button {
align-self: flex-start;
margin-top: auto;
}
.ob-guide-step {
display: flex;
gap: 1.5rem;
align-items: flex-start;
margin-top: 2rem;
}
.ob-guide-number {
flex-shrink: 0;
width: 4.75rem;
height: auto;
}
@media (max-width: 575.98px) {
.ob-guide-step {
gap: 1rem;
}
.ob-guide-number {
width: 3rem;
}
}
.ob-faq-grid {
display: grid;
gap: 1rem;
}
@media (min-width: 992px) {
.ob-faq-grid {
grid-template-columns: 1fr 1fr;
}
}
.ob-faq-item {
padding: 1.5rem;
background: #fff;
border-radius: .75rem;
}
.ob-faq-item > :last-child {
margin-bottom: 0;
}
.ob-list li {
margin-bottom: .25rem;
}
.ob-checklist {
columns: 2 16rem;
padding: 0;
list-style: none;
}
.ob-check-box {
columns: auto;
height: 100%;
margin: 0;
padding: 1.5rem;
background: #fff;
border-radius: .75rem;
}
.ob-checklist li {
position: relative;
padding-left: 1.75rem;
margin-bottom: .5rem;
break-inside: avoid;
}
.ob-checklist li::before {
content: "\F270";
position: absolute;
left: 0;
font-family: bootstrap-icons;
color: var(--brand-primary);
}
.offerboat .btn {
font-size: 1rem;
line-height: 50px;
padding: 0 1.5rem;
}
.ob-step-head i {
color: var(--brand-primary);
margin-right: .4rem;
}