@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;800&display=swap');

body {
    font-family: 'Poppins';
    overflow-x: hidden;
}

.fw-bold {
    font-weight: 700;
}

.fw-thin {
    font-weight: 400;
}

.bg-payfren-semi-dark {
    background: #1F2638;
}

.bg-payfren-dark {
    background: #161C2A;
}

.logo-nav,
.logo-footer,
.logo-footer-cc {
    width: 130px;
}

.bg-primary-cust {
    background-color: #3F81EF !important;
}

.bg-secondary-cust {
    background-color: #305299 !important;
}

.border-color-primary-cust {
    border-color: #3F81EF !important;
}

.text-primary-cust {
    color: #3F81EF !important;
}

.text-dark-primary {
    color: #1F2638;
}

.w-full {
    width: 100%;
}

.card-banner {
    width: 100%;
    max-width: 450px;
}

.text-secondary-cust {
    color: #9fa4af !important;
}

.bg-gray-cust {
    background-color: #e0e2e4 !important;
}

.mt-lg-space {
    margin-top: 150px !important;
}

.w-fit {
    width: fit-content;
    width: -moz-fit-content;
}

.btn-disable {
    color: #7C8AA1;
    background-color: #EEF3F7;
    border-color: #dde0e2;
}

.box-cashless {
    background-image: url('../BG/banner-go-cashless.png');
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    background-position: center;
    height: 600px;
}

.max-w-600px {
    max-width: 600px;
}

.max-w-750px {
    max-width: 750px;
}

.max-w-250px {
    max-width: 250px;
}

.bg-dark-primary {
    background-color: #1F2638;
}

.bg-dark-primary:hover {
    background-color: #1F2638;
}

.h-50px {
    height: 20px;
}

.icon-link {
    width: 20px;
}

.super-small {
    font-size: 10px;
}

.text-address {
    font-size: 10pt;
}

.fs-semi-large {
    font-size: 18pt;
}

.fs-p-small {
    font-size: 10pt;
}

.lh-medium {
    line-height: 30px;
}

.logo-payment-footer {
    width: 50px;
}

.footer-desc {
    background: url('../BG/footer-banner.png');
    background-repeat: no-repeat;
    height: 400px;
    background-size: 100vw;
    background-position: center;
}

@media screen and (min-width: 500px) {
    .card-banner {
        max-width: 800px;
    }

    .img-banner,
    .img-banner-2,
    .img-banner-3,
    .img-banner-4 {
        max-width: 500px;
    }
}

@media screen and (min-width: 900px) {
    .card-banner {
        max-width: 800px;
    }

    .img-banner,
    .img-banner-2,
    .img-banner-3,
    .img-banner-4 {
        max-width: 600px;
    }
}

@media screen and (min-width: 1100px) {
    .card-banner {
        max-width: 600px;
    }

    .img-banner {
        max-width: 900px;
    }

    .img-banner-3 {
        max-width: 600px;
    }

    .img-banner-2,
    .img-banner-4 {
        max-width: 700px;
    }
}

.card-img {
    height: 180px;
    width: auto;
}

.max-w-300px {
    max-width: 300px;
}

.bg-img-banner {
    background-image: url('../BG/bg_banner.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.bg-third {
    background-color: #1AF6DD;
}

.bg-third:hover {
    background-color: #1AF6DD;
}

.text-third {
    color: #1AF6DD;
}

.banner-member {
    background-image: url("../Image/become-member.png");
    height: 664px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.banner-member .container,
.banner-merchant .container {
    width: 300px;
}

.banner-merchant {
    background-image: url('../Image/become-merchant.png');
    height: 664px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.banner-img img {
    z-index: 999;
    width: auto;
    max-height: 664px;
}

.btn-social {
    width: 40px;
    height: 40px;
    padding: 8px 6px 5px 6px;
}

@media screen and (max-width: 1200px) {
    .banner-img img {
        z-index: 999;
        width: 100%;
        max-height: 664px;
        object-fit: contain;
    }
}

.hr {
    width: 40px;
    height: 3px;
}

.icon-transaksi-integrasi,
.icon-footer-sosmed {
    width: 35px;
}

.h-auto {
    height: auto;
}

.logo-transaksi-all {
    width: 130px;
}

.btn-logo-transaksi-all {
    cursor: pointer;
    border: 1px solid #e0e2e4;
    transition: .3s;
}

.btn-logo-transaksi-all:hover {
    border-color: #3F81EF;
}

.caption-transaksi-all {
    height: 58px;
}

.max-w-1300px {
    max-width: 1300px;
}

.banner-footer {
    background-color: #F2F6FF;
    border-color: #ccd4e7;
}

.banner-footer img {
    margin-bottom: -60px;
}

@media screen and (max-width: 825px) {
    .box-cashless {
        background-position: right;
    }

    .footer-desc {
        background-size: cover;
    }

    .footer-desc .fs-semi-large {
        font-size: 10pt;
        line-height: 20px;
    }

    .logo-payment-footer {
        width: 30px;
    }

    .footer-desc .row {
        padding: 10px 20px;
    }

    .footer-desc .col-xl-6 {
        margin-top: 0px;
    }
}

@media screen and (max-width: 430px) {
    .footer-desc {
        height: 300px;
    }

    .box-cashless {
        background-position: left;
    }

    .box-cashless .row {
        padding: 0px;
    }

    .box-cashless .col-xl-6 {
        margin-left: 0px !important;
    }
}

.max-w-450px {
    max-width: 450px;
}

.white-space-break {
    white-space: break-spaces !important;
}

.icon-footer {
    width: 40px;
}

.text-footer-color {
    color: #9DB7E3;
}

@media screen and (min-width: 2642px) {
    .ms-xxxl-0 {
        margin-left: 0 !important;
    }

    .banner-container h1 {
		margin-top: 0px !important;
		margin-bottom: 0px !important;
	}
}

@media screen and (min-height: 945px) {
	.banner-container {
		height: calc(100% - 72px);
	}
    
	.bg-img-banner {
		height: 100vh;
	}
}