.footer {
background-image: url(https://storage.googleapis.com/clevertap-assets/paper-lp/bg-dark-blue.webp);
background-size: cover;
background-position: center;
color: rgba(255, 255, 255, 0.88);
font-family: "Figtree", sans-serif;
padding-top: 5.5rem;
padding-bottom: 2rem;
position: relative;
overflow: hidden;
}
.footer__sparkle {
position: absolute;
top: 0;
width: 100%;
height: auto;
opacity: 0.8;
background-blend-mode: hard-light;
mix-blend-mode: overlay;
z-index: 1;
}
.footer a {
color: inherit;
text-decoration: none;
}
.footer a:hover,
.footer a:focus {
color: #4ecbff;
}
.footer__content {
max-width: 1200px;
margin: 0 auto 4rem;
position: relative;
z-index: 2;
}
.footer__top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4rem;
}
.footer__logo img {
height: 82px;
}
.footer__download-btn {
display: flex;
align-items: center;
gap: 1rem;
}
.footer__download-btn img {
height: 36px;
}
.footer__body {
display: grid;
grid-template-columns: repeat(3, minmax(160px, 1fr));
gap: 6.25rem;
min-width: 320px;
}
.footer__menu {
display: flex;
flex-direction: column;
gap: 44px;
}
.footer__menu-group {
display: flex;
flex-direction: column;
}
.footer__menu-group.groupCustomerCare, .footer__menu-group.groupHours { max-width: 260px;
}
.footer__menu-label {
color: var(--Sky-Blue, #2FADEC);
font-family: 'Sora', sans-serif;
font-size: var(--text-body-sm);
font-style: normal;
font-weight: 400;
line-height: normal;
margin-bottom: 20px;
}
.footer__menu-item {
text-decoration: none;
color: #fff;
font-family: 'Figtree', sans-serif;
font-size: var(--text-body-sm);
font-style: normal;
font-weight: 400;
line-height: 26px;
}
.footer__bottom {
border-top: 1px solid #2FADEC;
padding-top: 2rem;
}
.footer__bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--text-body-sm);
max-width: 1200px;
margin: 0 auto;
gap: 2rem;
}
.footer__social {
display: flex;
gap: 1rem;
height: 24px;
}
.footer__social img {
height: 100%;
}
.footer__social a {
transition: opacity 0.2s ease;
}
.footer__social a:hover {
opacity: 0.8;
}
.footer__terms {
display: flex;
gap: 2rem;
}
.footer__arrow {
width: 25px;
height: 25px;
margin-left: 4px;
vertical-align: middle;
transition: transform 0.2s ease;
}
.footer a:hover .footer__arrow {
transform: translateX(3px);
}
.noWrap {
white-space: nowrap;
}
.opacity60 {
opacity: 0.6;
}
.opacity80 {
opacity: 0.8;
}
.opacity90 {
opacity: 0.9;
}
.groupPartners .footer__menu-partners:first-child {
margin-bottom: 4rem;
}
.banks_logo {
border-bottom: 1.5px dashed #2FADEC;
padding: 1.5rem 0;
justify-content: space-evenly;
align-items: center;
height: 36px;
text-align: center;
}
.banks_logo:nth-child(2) {
border-top: 1.5px dashed #2FADEC;
}
.banks_logo:last-child {
border-bottom: none;
margin-top: 1rem;
justify-content: flex-end;
gap: 1rem;
} .banks_logo img {
max-height: 50px;
}
.footer__bi {
vertical-align: middle;
margin-bottom: 6px;
margin-left: 4px;
height: 28px;
}
.footer__ojk {
height: 23px;
}
.footer__visa {
height: 25px;
}
.footer__mastercard {
height: 34px;
}
.footer__jcb {
height: 37px;
}
.footer__ae {
height: 30px;
}
.footer__bri {
height: 35px;
}
.footer__bni {
height: 24px;
}
.footer__bca {
height: 50px;
}
.footer__mandiri {
height: 44px;
margin-bottom: 1rem;
}
.footer__kan {
height: 32px;
}
.footer__iso {
height: 40px;
}
.footer__secure {
height: 22px;
} @media (max-width: 1280px) {
.footer {
padding-inline: 2rem;
}
.footer__body {
gap: 4rem;
}
} @media (max-width: 1024px) {
.footer {
padding: 5rem 2rem 2rem;
}
.footer__content {
margin-bottom: 3rem;
}
.footer__top {
margin-bottom: 3rem;
}
.footer__logo img {
height: 70px;
}
.footer__body {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 2.5rem;
}
.footer__menu {
gap: 36px;
max-width: 350px;
} .footer__menu:last-child {
grid-column: 1 / -1;
}
.groupHours .footer__menu-item {
max-width: 280px;
}
.footer__bottom-content {
gap: 1.5rem;
}
.footer__terms {
gap: 1.5rem;
}
}
@media (max-width: 970px) {
.footer__bottom-content {
flex-direction: column;
gap: 2rem;
text-align: center;
}
.footer__copyright {
order: 3;
}
.footer__social {
order: 1;
justify-content: center;
}
.footer__terms {
order: 2;
flex-direction: column;
gap: 1rem;
}
} @media (max-width: 768px) {
.footer {
padding: 5rem 1.5rem 2.5rem;
}
.footer__top {
flex-direction: column;
gap: 2rem;
margin-bottom: 2.5rem;
text-align: center;
}
.footer__logo img {
height: 60px;
}
.footer__download-btn {
justify-content: center;
}
.footer__download-btn img {
height: 32px;
}
.footer__body {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.footer__menu {
gap: 32px;
}
.footer__menu-group.groupCustomerCare {
margin-top: 0;
}
.footer__menu-item {
font-size: 14px;
line-height: 26px;
}
.footer__arrow {
margin-left: 12px;
}
.groupHours .footer__menu-item {
max-width: 100%;
}
.banks_logo {
padding: 1.25rem 0;
height: auto;
min-height: 36px;
flex-wrap: wrap;
gap: 1rem;
}
.banks_logo:last-child {
justify-content: center;
}
.groupPartners .footer__menu-partners:first-child {
margin-bottom: 2.5rem;
}
} @media (max-width: 480px) {
.footer__content {
margin-bottom: 2rem;
}
.footer__top {
gap: 1.5rem;
}
.footer__logo img {
height: 50px;
}
.footer__download-btn {
gap: 0.75rem;
}
.footer__download-btn img {
height: 36px;
}
.footer__body {
gap: 2rem;
}
.footer__menu {
gap: 28px;
}
.footer__menu-label {
margin-bottom: 16px;
font-size: 14px;
}
.footer__bottom {
padding-top: 1.5rem;
}
.footer__bottom-content {
gap: 1.5rem;
font-size: 12px;
}
.footer__social {
gap: 0.75rem;
height: 20px;
}
.footer__terms {
font-size: 12px;
}
.noWrap {
white-space: normal;
} .banks_logo img {
max-height: 40px;
}
.footer__bi {
height: 24px;
}
.footer__ojk {
height: 20px;
}
.footer__visa {
height: 22px;
}
.footer__mastercard {
height: 30px;
}
.footer__jcb {
height: 32px;
}
.footer__ae {
height: 26px;
}
.footer__bri {
height: 30px;
}
.footer__bni {
height: 20px;
}
.footer__bca {
height: 42px;
}
.footer__mandiri {
height: 38px;
}
.footer__kan {
height: 28px;
}
.footer__iso {
height: 36px;
}
.footer__secure {
height: 20px;
}
.groupPartners .footer__menu-partners:first-child {
margin-bottom: 2rem;
}
.banks_logo {
gap: 0.75rem;
}
} @media (max-width: 375px) {
.footer__logo img {
height: 45px;
}
.footer__menu:not(:last-child) {
max-width: 250px;
}
.footer__menu:last-child .footer__menu-group {
max-width: fit-content;
}
.footer__menu-label {
font-size: 13px;
}
.footer__menu-item {
font-size: 13px;
line-height: 24px;
}
.footer__menu-group {
max-width: 220px;
}
.footer__social {
gap: 0.5rem;
height: 18px;
}
.banks_logo {
gap: 0.5rem;
}
}