/* * {
margin: 0px;
padding: 0px;
} */
.service-finance-hero h1 {
font-family: 'Autonation Regular';
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: 120%;
letter-spacing: 0.84px;
color: white;
text-align: left;
margin: 0px;
}
.service-finance-hero {
background-color: black;
padding: 60px 80px;
/* justify-content: space-evenly !important; */
}
.service-finance-hero .two-column-text-container {
align-items: start;
justify-content: start;
/* flex: none !important; */
}
.service-finance-hero .two-column-text {
text-align: left;
color: white;
font-family: 'interstate light';
}
.service-finance-hero .two-column-media-container {
flex: none;
max-width: 580px;
}
.service-finance-hero .two-column-media-container .mobile-image {
display: none;
}
.service-finance-info-container {
display: flex;
flex-flow: row;
justify-content: center;
align-items: start;
}
.service-finance-container {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding: 40px;
width: 100%;
box-sizing: border-box;
}
.service-finance-info-title {
font-family: 'Autonation Regular';
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 36px */
letter-spacing: 0.42px;
color: black;
margin-top: 40px;
margin-bottom: 8px;
text-align: center;
}
.service-finance-info-text {
font-family: 'interstate light';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
letter-spacing: 0.28px;
color: #555;
text-align: center;
}
.service-finance-container.grey-background {
background-color: #F7F8F9;
border-right: 1px solid #D2DADF;
}
.service-finance-image.card {
max-height: 125px;
max-width: 188px;
box-sizing: border-box;
}
.service-finance-image {
max-height: 125px;
max-width: 445px;
box-sizing: border-box;
height: 125px;
}
.service-finance-image img {
width: 100%;
height: 100%;
}
.service-finance-info-container .primary-button {
color: white;
background-color: black;
display: flex;
margin: 0px auto;
width: 100%;
max-width: 343px;
height: 50px;
flex-flow: row;
border-radius: 8px;
justify-content: center;
align-items: center;
gap: 8px;
align-self: stretch;
text-decoration: none;
font-family: 'Autonation Regular';
font-size: 16px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 24px */
letter-spacing: 0.28px;
text-align: center;
margin-top: 40px;
margin-bottom: 10px;
}
.service-finance-info-icon-container {
display: flex;
flex-flow: column;
align-items: start;
justify-content: start;
gap: 40px;
margin-bottom: 80px;
max-width: 440px;
margin: 60px auto 80px auto;
min-height: 470px;
}
.service-finance-info-section {
display: flex;
flex-flow: row;
justify-content: start;
align-items: start;
gap: 16px;
}
.service-finance-info-section .service-finance-info-title,
.service-finance-info-section .service-finance-info-text {
margin-top: 0px;
text-align: left;
}
.service-finance-info-section .service-finance-info-title {
line-height: 120%;
font-size: 20px;
}
.service-finance-info-section .service-finance-info-title sup {
font-size: 12px;
top: -8px;
position: relative;
}
.service-finance-info-text-container {
max-width: 367px;
}
.service-finance-container .service-finance-icon {
min-height: 56px;
max-width: 56px;
width: 100%;
position: relative;
background-color: #F7F8F9;
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.service-finance-icon {
width: 100%;
height: 32px;
max-width: 32px;
max-height: 32px;
}
.icon-container {
width: 100%;
height: 100%;
max-width: 32px;
max-height: 32px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
.icon-container.percentage-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.calendar-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.credit-card-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.tire-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.accessory-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.brake-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.repair-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.maintenance-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.warranty-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.payment-icon {
background-image: url('data:image/svg+xml,');
}
.icon-container.approval-icon {
background-image: url('data:image/svg+xml,');
}
.grey-background .service-finance-icon {
background-color: white;
}
.grey-background .warranty-icon {
background-color: white;
}
.grey-background .payment-icon {
background-color: white;
}
.grey-background .approval-icon {
background-color: white;
}
.service-finance-disclaimer {
background-color: black;
padding: 28px 40px;
}
.service-finance-disclaimer span {
color: var(--Color-base-white, #FFF);
font-family: 'Autonation Light' !important;
font-size: var(--font-size-9, 12px) !important;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 18px */
}
.service-finance-info-range-container {
display: flex;
flex-flow: column;
gap: 24px;
}
.service-finance-numbers {
font-family: 'Autonation Regular';
font-size: 32px;
font-style: normal;
font-weight: 700;
line-height: 120%; /* 38.4px */
letter-spacing: 0.56px;
color: black;
text-align: center;
}
.range-container-icons {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
gap: 30px;
max-width: 420px;
}
.icon-section {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
flex: 30%;
max-width: 110px;
gap: 8px;
}
.icon-section .service-finance-info-text {
color: black;
}
.service-finance-info-range-container .service-finance-info-title {
margin: 0px;
font-size: 20px;
}
.service-finance-disclaimer .one-column-disclaimer {
color: white;
font-size: 12px;
}
.service-finance-disclaimer .one-column-disclaimer ol {
padding-left: 15px;
margin-bottom: 10px;
}
.service-finance-disclaimer .one-column-disclaimer ol li {
list-style-type: numeric;
}
.service-finance-info-container .primary-button svg {
position: relative;
transition: all 300ms ease;
left: 0px;
}
.service-finance-info-container .primary-button:hover,
.service-finance-info-container .primary-button:focus {
text-decoration: none;
background-color: #333;
}
@media all and (max-width: 1116px) {
.service-finance-hero {
padding: 40px 80px;
}
/* .service-finance-hero h1 {
font-size: 32px;
} */
.service-finance-hero .two-column-media-container {
max-width: 375px;
}
.service-finance-hero .two-column-media-container img {
width: 100%;
height: 100%;
}
.service-finance-info-text {
font-size: 15px;
}
.service-finance-image.card {
max-height: 100px;
max-width: 158px;
box-sizing: border-box;
}
.service-finance-image {
max-height: 100px;
max-width: 375px;
box-sizing: border-box;
height: 100px;
}
.icon-section {
max-width: 100px;
}
}
@media all and (max-width: 825px) {
.service-finance-hero {
padding: 40px;
gap: 24px;
}
.service-finance-hero .two-column-media-container {
width: 100%;
max-width: none;
}
.service-finance-hero .two-column-text {
font-size: 14px !important;
}
.range-container-icons {
gap: 13px;
}
.service-finance-info-icon-container {
min-height: 570px;
}
}
@media all and (max-width: 767px) {
.service-finance-info-container {
flex-flow: column;
box-sizing: border-box;
}
.service-finance-info-icon-container {
min-height: auto;
}
}
@media all and (max-width: 577px) {
.service-finance-container {
padding: 24px 16px;
}
.service-finance-hero .two-column-media-container img {
display: none;
}
.service-finance-info-title {
margin-top: 24px;
margin-bottom: 0px;
}
.service-finance-info-text,
.service-finance-info-section .service-finance-info-title,
.service-finance-info-section .service-finance-info-text {
font-size: 14px;
}
.service-finance-info-text {
margin-bottom: 0px;
}
.service-finance-image {
max-height: 70px;
max-width: 260px;
height: 70px;
}
.service-finance-info-container .primary-button {
margin-top: 24px;
}
.service-finance-hero .two-column-media-container .mobile-image {
display: block;
}
.service-finance-info-section .service-finance-info-title {
font-size: 16px;
}
.service-finance-info-icon-container {
margin: 48px auto;
}
.service-finance-info-range-container {
gap: 8px;
}
.service-finance-info-range-container .service-finance-info-title {
margin: 16px 0px;
}
.service-finance-info-section .service-finance-info-text {
margin-top: 8px;
}
.service-finance-info-section .service-finance-info-title sup {
font-size: 11px;
top: -5px;
}
.icon-section {
max-width: 95px;
}
.range-container-icons {
gap: 24px;
}
.service-finance-disclaimer {
padding: 32px 16px;
}
}
/* Wrapper */
.unique-wrapper {
align-self: stretch;
padding: 56px 80px;
background: var(--background-bg-light-secondary, #F9FAFB);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 42px;
max-width: 100%;
}
/* Inner container */
.unique-inner {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}
/* Content block */
.unique-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
}
/* Headline block */
.unique-headline-block {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 16px;
}
/* Headline text */
.unique-headline-text {
width: 580px;
text-align: center;
color: var(--text-text-copy, #384250);
font-size: 24px;
font-family: 'Autonation Regular';
font-weight: 500;
line-height: 36px;
letter-spacing: 0.7px;
word-wrap: break-word;
}
/* CTA block */
.unique-cta-block {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
/* CTA button */
.unique-cta-button {
width: 100%;
max-width: 480px;
padding: 16px 24px;
background: linear-gradient(90deg, var(--Color-pink-600, #E61464) 0%, var(--Color-pink-800, #A90B41) 100%);
overflow: hidden;
border-radius: 8px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
}
/* CTA label */
.unique-cta-label {
color: var(--text-text-invert, #fff);
font-size: 16px;
font-family: 'Autonation Regular';
font-weight: 500;
line-height: 24px;
word-wrap: break-word;
text-decoration: none;
}
/* CTA subtext */
.unique-cta-subtext {
align-self: stretch;
text-align: center;
color: #384250;
font-size: 16px;
font-family: 'Autonation Light';
font-weight: 500;
line-height: 24px;
word-wrap: break-word;
}
.sunbit-wrapper {
align-self: stretch;
padding: 56px 80px;
background: var(--background-bg-light-primary, white);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 42px;
}
.sunbit-content {
align-self: stretch;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}
.sunbit-title {
max-width: 1280px;
width: 100%;
text-align: center;
color: #0D121C;
font-size: 40px;
font-family: 'Autonation Regular';
font-weight: 700;
line-height: 48px;
}
.sunbit-main {
align-self: stretch;
display: flex;
justify-content: space-around;
align-items: center;
/* gap: 178px; */
}
.sunbit-features {
padding: 40px;
background: white;
border-radius: 24px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 32px;
}
.feature-list {
display: flex;
flex-direction: column;
gap: 40px;
}
.feature-item {
display: flex;
align-items: flex-start;
gap: 16px;
}
.feature-icon {
width: 56px;
height: 56px;
background: var(--background-bg-light-secondary, #F9FAFB);
border-radius: 142.86px;
display: flex;
justify-content: center;
align-items: center;
}
.feature-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.feature-heading {
color: #0D121C;
font-size: 20px;
font-family: 'Autonation Regular';
font-weight: 700;
line-height: 30px;
text-wrap: nowrap;
}
.feature-subtext {
color: #384250;
font-size: 16px;
font-family: 'Autonation Light';
font-weight: 500;
line-height: 24px;
}
.sunbit-image img {
display: flex;
max-width: 580px;
width: 100%;
height: 300px;
justify-content: center;
align-items: center;
border-radius: 22px;
}
/* Placeholder for icons */
.icon-no-interest,
.icon-payment-terms,
.icon-approval-rate {
margin: auto;
/* width: 45.71px;
height: 45.71px; */
/* background: #0D121C; Replace with actual SVG or background image */
}
.icon-no-interest svg {
display: flex;
width: 32px;
height: 32px;
padding: 3.5px 4px 2.5px 3px;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.icon-payment-terms svg {
display: flex;
width: 32px;
height: 32px;
padding: 3.5px 4px 2.5px 3px;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.icon-approval-rate svg{
display: flex;
width: 32px;
height: 32px;
padding: 3.5px 4px 2.5px 3px;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
/*3*/
/* Wrapper */
.how-it-works-wrapper {
align-self: stretch;
padding: 56px 80px;
background: #F9FAFB;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 42px;
}
/* Content */
.how-it-works-content {
align-self: stretch;
padding-bottom: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
}
/* Header */
.how-it-works-header {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
gap: 60px;
}
.how-it-works-title {
width: 1280px;
text-align: center;
color: #0D121C;
font-size: 40px;
font-family: 'Autonation Regular';
font-weight: 700;
line-height: 48px;
}
/* Steps */
.steps-wrapper {
/* width: 100%; */
padding: 0 104px;
display: flex;
justify-content: space-between;
align-items: flex-start;
/* gap: 136px; */
}
.step-box {
width: 379px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
.step-number-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.step-number {
background: #1F2A37;
color: #FFFCF5;
font-size: 30.118px;
font-family: 'Autonation Regular';
font-weight: 700;
line-height: 50px;
border-radius: 50%;
/* padding: 5.49px 17.6px; */
width: 56px;
height: 56px;
text-align: center;
}
.step-text {
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
}
.step-title {
color: #0D121C;
font-size: 20px;
font-weight: 700;
line-height: 30px;
font-family: 'Autonation Regular';
}
.step-description {
color: #0D121C;
font-size: 16px;
font-weight: 500;
line-height: 24px;
font-family: 'Autonation Light';
}
/* Button */
.get-started-btn {
width: 100%;
max-width: 480px;
padding: 16px 24px;
background: #1F2A37;
border-radius: 8px;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 8px;
}
.btn-text {
color: white;
font-size: 16px;
font-family: 'Autonation Regular';
font-weight: 500;
line-height: 24px;
text-decoration: none;
}
.btn-text:hover, .unique-cta-label:hover {
text-decoration: underline;
}
.btn-icon {
width: 24px;
height: 24px;
background: url('arrow-right-icon.svg') no-repeat center;
}
.credit-limit-wrapper {
max-width: 100%;
/* max-width: 2560px; */
/* min-width: 768px; */
padding: 56px 80px;
background: var(--surface-surface-light_primary, white);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.credit-limit-content {
max-width: 1680px;
min-width: 688px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
}
.credit-limit-title {
align-self: stretch;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--text-text-primary, black);
font-size: 40px;
font-family: 'Autonation Regular';
font-weight: 700;
line-height: 48px;
word-wrap: break-word;
}
.credit-limit-value {
align-self: stretch;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--text-text-positive, #079455);
font-size: 40px;
font-family: 'Autonation Regular';
font-weight: 700;
line-height: 48px;
letter-spacing: 0.7px;
word-wrap: break-word;
}
.credit-limit-usage {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
gap: 24px;
}
.credit-limit-subtitle {
width: 1280px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: var(--Color-opal-950, #0D121C);
font-size: 20px;
font-family: 'Autonation Regular';
font-weight: 500;
line-height: 30px;
word-wrap: break-word;
}
/* Row wrapper for items */
.sunbit-usage-row {
align-self: stretch;
display: inline-flex;
justify-content: center;
align-items: center;
gap: 40px;
}
/* Each item block */
.sunbit-usage-item {
height: 108px;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 8px;
}
/* Shared circular icon background */
.sunbit-icon-circle {
width: 56px;
height: 56px;
background: var(--background-bg-light-secondary, #F9FAFB);
border-radius: 100px;
display: inline-flex;
justify-content: center;
align-items: center;
}
/* Shared icon canvas */
.sunbit-icon {
width: 32px;
height: 32px;
position: relative;
border-radius: 100px;
}
/* Shared label */
.sunbit-item-label {
width: 108px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
color: #0D121C;
font-size: 16px;
font-family: 'Autonation Light';
font-weight: 500;
line-height: 24px;
word-wrap: break-word;
}
/* Narrower label for "General Repair" group that originally had a tighter wrapper */
.sunbit-item-label-tight {
width: 108px;
justify-content: center;
align-items: center;
gap: 8px;
display: inline-flex;
}
.white-fill { background: var(--fill-fill-white, #FFFFFF); }
.grey-fill { background: var(--fill-fill-icon, #D2D6DB); }
/* ---------------------- */
/* TIRES ICON */
/* ---------------------- */
.sunbit-icon-tires .tire-outer {
width: 26px;
height: 25.96px;
position: absolute;
left: 3px;
top: 3px;
outline: 1.25px var(--border-border-black, #000000) solid;
outline-offset: -0.62px;
}
.sunbit-icon-tires .tire-outer-outline {
width: 26px;
height: 25.96px;
position: absolute;
left: 3px;
top: 3px;
outline: 1.25px var(--border-border-black, #000000) solid;
outline-offset: -0.62px;
}
.sunbit-icon-tires .tire-inner {
width: 15.6px;
height: 15.58px;
position: absolute;
left: 8.2px;
top: 8.19px;
outline: 1.25px var(--border-border-black, #000000) solid;
outline-offset: -0.62px;
}
.sunbit-icon-tires .tire-center {
width: 5.2px;
height: 5.19px;
position: absolute;
left: 13.4px;
top: 13.38px;
outline: 1.25px var(--border-border-black, #000000) solid;
outline-offset: -0.62px;
}
/* ---------------------- */
/* ACCESSORIES ICON */
/* ---------------------- */
.sunbit-icon-accessories .acc-base {
width: 30px;
height: 17.65px;
position: absolute;
left: 1px;
top: 11.5px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
outline-offset: -0.62px;
}
.sunbit-icon-accessories .acc-top-outline {
width: 12px;
height: 24px;
position: absolute;
left: 16px;
top: 2.5px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
outline-offset: -0.62px;
}
.sunbit-icon-accessories .acc-bottom-outline {
width: 12px;
height: 24px;
position: absolute;
left: 16px;
top: 26.5px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
outline-offset: -0.62px;
}
.sunbit-icon-accessories .flipped {
transform: rotate(180deg);
transform-origin: top left;
}
/* ---------------------- */
/* BRAKES ICON */
/* ---------------------- */
.sunbit-icon-brakes .brake-disc {
width: 29.03px;
height: 29.03px;
position: absolute;
left: 1px;
top: 2.47px;
border-radius: 9999px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
outline-offset: -0.62px;
}
.sunbit-icon-brakes .brake-ring {
width: 15.48px;
height: 15.48px;
position: absolute;
left: 7.77px;
top: 9.24px;
border-radius: 9999px;
border: 1.25px var(--border-border-black, #0D121C) solid;
}
.sunbit-icon-brakes .brake-hub {
width: 7.74px;
height: 7.74px;
position: absolute;
left: 11.65px;
top: 13.11px;
border-radius: 9999px;
border: 1.25px var(--border-border-black, #0D121C) solid;
}
.sunbit-icon-brakes .brake-pad {
width: 14.52px;
height: 14.52px;
position: absolute;
left: 16.48px;
top: 1.5px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
outline-offset: -0.62px;
}
.sunbit-icon-brakes .brake-shadow {
width: 19.87px;
height: 20.55px;
position: absolute;
left: 3.9px;
top: 8.27px;
overflow: hidden;
background: var(--border-border-black, #0D121C);
}
/* ---------------------- */
/* GENERAL REPAIR ICON */
/* ---------------------- */
.sunbit-icon-general-repair .gr-wrench-outline {
width: 28px;
height: 12.5px;
position: absolute;
left: 1px;
top: 9.5px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
}
.sunbit-icon-general-repair .gr-wrench-hole {
width: 5px;
height: 5px;
position: absolute;
left: 25px;
top: 8.5px;
background: var(--background-bg-light-primary, #FFFFFF);
outline: 1.25px var(--border-border-black, #0D121C) solid;
outline-offset: -0.62px;
}
/* ---------------------- */
/* PRE-PAID MAINTENANCE */
/* ---------------------- */
.sunbit-icon-prepaid .ppm-bar {
width: 5.03px;
height: 23px;
position: absolute;
left: 13px;
top: 2.5px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
}
.sunbit-icon-prepaid .ppm-notch-1,
.sunbit-icon-prepaid .ppm-notch-2,
.sunbit-icon-prepaid .ppm-notch-3 {
width: 4px;
height: 0; /* keeps outline-only ticks */
position: absolute;
left: 17px;
outline: 1.25px var(--border-border-black, #0D121C) solid;
outline-offset: -0.62px;
}
.sunbit-icon-prepaid .ppm-notch-1 { top: 7.5px; }
.sunbit-icon-prepaid .ppm-notch-2 { top: 11.5px; }
.sunbit-icon-prepaid .ppm-notch-3 { top: 15.5px; }
.sup-star {
color: var(--Opal-Scale-opal-950, #0D121C);
font-family: "Autonation Regular";
font-size: var(--font-size-6, 20px);
font-style: normal;
font-weight: 700;
line-height: 150%;
top: -0.4em !important;
}
.service-finance-hero .two-column-text {
font-size: 20px;
}
.sunbit-usage-row-2 {
display: flex;
gap: 40px;
}
.sunbit-usage-row-1 {
display: flex;
gap: 40px;
}
@media all and (max-width: 767.5px) {
.service-finance-hero h1 {
font-size: 22px;
}
.unique-cta-button, .get-started-btn {
padding: 12px 24px;
margin: 0 auto;
width: 85%;
}
.sunbit-item-label {
font-size: 12px;
}
.steps-wrapper {
flex-direction: column;
gap: 24px;
}
.sunbit-main {
flex-direction: column-reverse;
}
.unique-wrapper {
padding: 24px 16px;
}
.unique-headline-block img{
display: flex;
width: 209px;
height: 73px;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
}
.unique-headline-text {
font-size: 16px;
width: 375px;
line-height: 24px;
}
.unique-content {
gap: 24px;
width: 90%;
}
.unique-cta-subtext {
font-size: 14px;
}
.unique-cta-label {
font-size: 16px;
}
.unique-cta-block {
gap: 8px;
}
.credit-limit-wrapper {
padding: 32px 16px;
}
.how-it-works-wrapper {
padding: 40px 24px;
}
.how-it-works-title {
font-size: 40px;
}
.how-it-works-header {
gap: 40px;
}
.step-title {
display: block !important;
visibility: visible !important;
font-size: 20px;
}
.step-description {
font-size: 16px;
}
.sunbit-wrapper {
padding: 32px 16px;
}
.sunbit-content {
gap: 32px;
}
.sunbit-title {
font-size: 32px;
color: #000;
}
.sunbit-features {
padding: 0px 16px;
}
.sunbit-image {
display: flex;
height: 183px;
justify-content: center;
align-items: center;
}
.feature-list {
gap: 12px;
}
.feature-heading {
font-size: 16px;
}
.feature-item {
gap: 8px;
align-items: center;
}
.feature-subtext {
font-size: 14px;
}
.sunbit-main {
gap: 24px;
}
.sup-star {
top: 0em !important;
}
.feature-text {
gap: 0px;
}
.credit-limit-content {
max-width: 612px;
min-width: 0px;
gap: 0px;
}
.credit-limit-wrapper {
min-width: 352px;
max-width: 767px;
}
.credit-limit-wrapper {
display: block !important;
}
.credit-limit-title {
font-size: 32px;
margin-bottom: 16px;
}
.credit-limit-subtitle {
width: auto;
font-size: 20px;
}
.sunbit-usage-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
}
.sunbit-usage-row-1 {
display: flex;
width: 343px;
height: 108px;
justify-content: center;
margin: 0 auto;
gap: 8px;
}
.sunbit-usage-row-2 {
display: flex;
width: 343px;
height: 108px;
justify-content: center;
align-items: center;
gap: 16px;
margin: 0 auto;
}
.credit-limit-usage {
margin: 0 auto;
margin-bottom: 8px;
}
.credit-limit-value {
font-size: 32px;
margin-bottom: 24px;
}
}
@media all and (min-width: 768px) and (max-width:1199px) {
.service-finance-hero .two-column-text {
text-wrap: nowrap;
}
.service-finance-hero .two-column-text-container {
align-items: center;
/* flex: none !important; */
}
.service-finance-hero h1 {
font-size: 40px;
}
.steps-wrapper {
flex-direction: column;
gap: 24px;
}
.sunbit-main {
flex-direction: column-reverse;
margin: 24px 40px 56px;
gap: 56px;
}
.unique-wrapper {
padding: 40px;
}
.unique-headline-block img {
display: flex;
width: 292px;
height: auto;
padding: 10px;
justify-content: center;
align-items: center;
gap: 10px;
}
.unique-headline-text {
font-size: 20px;
width: 417px;
line-height: 30px;
}
.unique-headline-block {
gap: 24px;
}
.unique-content {
gap: 32px;
}
.unique-cta-subtext {
font-size: 16px;
}
.unique-cta-block {
gap: 8px;
}
.sunbit-title {
margin: 40px 80px 24px;
width: -webkit-fill-available;
}
.sunbit-features {
padding: 0px;
}
.feature-list {
gap: 40px;
}
.sunbit-content {
gap: 0px;
}
.sunbit-wrapper {
padding: 0px;
}
.sunbit-usage-row {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.sunbit-usage-row-1 {
display: flex;
width: 343px;
height: 108px;
justify-content: center;
margin: 0 auto;
gap: 56px;
}
.sunbit-usage-row-2 {
display: flex;
width: 343px;
height: 108px;
justify-content: center;
align-items: center;
gap: 56px;
margin: 0 auto;
}
.credit-limit-title {
font-size: 40px;
}
.credit-limit-subtitle {
font-size: 20px;
}
.how-it-works-title {
font-size: 40px;
}
.how-it-works-header {
gap: 40px;
}
.step-box {
gap: 8px;
}
.step-title {
font-size: 20px;
}
.step-description {
font-size: 16px;
}
.how-it-works-content {
gap: 40px;
}
.btn-text {
font-size: 16px;
}
.feature-heading {
font-size: 20px;
}
.feature-subtext {
font-size: 16px;
}
}
@media all and (min-width: 992px) and (max-width:1365px) {
.service-finance-hero h1 {
font-size: 40px;
}
.sunbit-main {
flex-direction: row;
gap: 42px;
}
.how-it-works-header {
display: flex;
flex-direction: column;
align-items: center;
gap: 60px;
align-self: stretch;
}
.steps-wrapper {
flex-direction: row;
gap: 20px;
display: flex;
height: 210px;
justify-content: space-between;
align-items: flex-start;
align-self: stretch;
width: 100%;
padding: 0px;
}
.sunbit-usage-row {
flex-direction: row;
align-self: center;
gap: 40px;
}
.sunbit-usage-row-1 {
gap: 40px;
}
.sunbit-usage-row-2 {
width: auto;
}
}
@media all and (min-width: 1200px) {
.main-content .container {
max-width: 100% !important;
}
.one-column-container.left-aligned {
/* width: 100vw;
transform: translateX(-50%);
margin-left: 50%; */
border-bottom: 1px solid var(--Color-opal-800, #1F2A37);
}
/* .one-column-container.left-aligned .one-column-disclaimer {
width: 60%;
margin: 0 auto;
} */
}
@media all and (min-width: 2560px) {
.unique-headline-text {
width: 646px;
font-size: 40px;
line-height: 48px;
}
.unique-content {
gap: 56px;
}
.unique-cta-subtext {
font-size: 20px;
line-height: 30px;
}
.unique-cta-label {
font-size: 20px;
line-height: 30px;
}
.sunbit-title {
font-size: 48px;
line-height: 57.6px;
}
.feature-heading {
font-size: 32px;
line-height: 48px;
}
.feature-subtext {
font-size: 20px;
line-height: 30px;
}
.how-it-works-title {
font-size: 48px;
line-height: 57.6px;
}
.step-title {
font-size: 32px;
line-height: 38.4px;
}
.step-description {
font-size: 20px;
line-height: 30px;
}
.btn-text {
font-size: 20px;
line-height: 30px;
}
.credit-limit-title {
font-size: 48px;
line-height: 57.6px;
}
.credit-limit-subtitle {
font-size: 24px;
line-height: 36px;
}
.service-finance-hero h1 {
font-size: 76px;
}
.feature-item {
gap: 32px;
}
.feature-list {
gap: 64px;
}
.sunbit-content {
gap: 72px;
}
.sunbit-main {
justify-content: center;
gap: 176px;
}
.step-number {
font-size: 45.18px;
line-height: 67.76px;
padding: 8.24px 27.94px;
width: 84px;
height: 84px;
}
.sunbit-image img {
width: 768.87px;
height: 415.39px;
border-radius: 26.06px;
}
.unique-wrapper {
padding: 103px 80px;
}
.unique-headline-block {
gap: 32px;
}
.how-it-works-header {
gap: 72px;
}
.how-it-works-content {
gap: 64px;
}
.sunbit-wrapper {
padding: 64px 80px;
}
.service-finance-hero .two-column-text-container {
flex: none !important;
}
}