@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Nastaliq+Urdu:wght@400..700&display=swap');

html, body { font-family: "Montserrat", sans-serif; }
body { background-color: #E2E2E2;}

.navbar-brand-img {  width: 170px; }

.navbar-nav .nav-link { padding: 0.5rem 1rem; font-size: 1rem; }

.btn-primary { font-size: 0.9rem; padding: 0.5rem 1rem; }

.btn-success { background-color: #32BD79; font-weight: 500; text-transform: uppercase; font-size: 12px; }
.btn-join { display: flex; align-items: center; justify-content: center; background-color: #32BD79; color: white; font-weight: 500; text-transform: uppercase; font-size: 12px; height: 40px; }
.btn-join:hover { background-color: #213A57; color: white;}
.btn-join-primary { display: flex; align-items: center; justify-content: center; background-color: #213A57; color: white; font-weight: 500; text-transform: uppercase; font-size: 12px; height: 40px; }
.btn-join-primary:hover { background-color: #32BD79; color: white;}
.navbar-nav .nav-item .nav-link { font-weight: 600; text-transform: uppercase; font-size: 12px; }

.hero-section .container { border-radius: 10px; }
.hero-section .container .card{ min-height: 540px; }
.hero-section .container .card .card-body{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding-left: 5px;}

img.border-color-gray { border-radius: 5px; }

.how-it-works .container.card{ background-image: url('../img/how-it-works.png'); background-size: cover; background-position: center; border-radius: 10px;}
.how-it-works .container.card .row p { color: white;}
.how-it-works .container.card .row ul li { color: white; font-weight: 400; font-size: 16px; }
.how-it-works .container.card .row ul li::marker { color: white; }
.how-it-works .container.card .row h4 { color: white; font-weight: 600; font-size: 32px; text-align: left;}
.how-it-works .container.card .row h3 { color: white; font-weight: 600; font-size: 36px; text-align: center;}
.how-it-works .container.card .row h3 span { color: white; font-weight: 600; font-size: 28px; }

.how-it-works .container.card .row { background-color: #000000a6; border-radius: 8px; }

.how-works-section p { margin: 0; }
.how-works-section .container.card{ border-radius: 10px;}
.how-works-section h4.product-title { font-weight: 600; font-size: 24px; text-align: left;}
.how-works-section p.product-desc { font-weight: 400; font-size: 16px; text-align: left;}

.payment-section .container { background-color: #213A57; border-radius: 8px; }

.footer-section h5 { height: 30px; }
.footer-section .list-unstyled li { margin-bottom: 10px; }
.footer-section .list-unstyled li a { color: #969696; margin-bottom: 10px; }

.footer-section .input-group .input-group-text,
.footer-section .input-group .form-control  { background-color: #323842; font-size: 14px; }

.footer-section .input-group .form-control::placeholder { color: #969696; }
.footer-section .logo-container p { color: #969696; }


.border-color-gray { border: 1px solid #C2C2C2 !important; }
.background-color-gray { background-color: #F6F6F6 !important; }
.background-color-blue { background-color: #213A57 !important; }
.background-color-green { background-color: #D8EAC2 !important; }
.text-color-white { color: #ffffff !important; }

.reverse-column-mobile .how-works-section .card-body img { height: 270px; }
    
@media (min-width: 768px) {
    .payment-section .container img{ width: 175px; height: auto; }
    .hero-section .box-left h2.card-title { font-size: 52px; font-weight: 600; }
    .container h2.card-title { font-size: 42px; font-weight: 500; }
    .hero-section .box-left p.card-text { font-size: 24px; font-weight: 400; }
    .navbar-nav .nav-item .nav-link { padding: 0 20px; }
    .border-color-gray-md { border: 1px solid #C2C2C2 !important; }
    img.border-color-gray { border-radius: 5px; }
    .how-it-works .container.card .row h3 { color: white; font-weight: 600; font-size: 75px; }
    .how-it-works .container.card .row h4 { color: white; font-weight: 600; font-size: 32px; }
    .how-it-works .container.card .row h3 span { color: white; font-weight: 600; font-size: 48px; }
    .how-works-section h2 { font-weight: 700; font-size: 42px; }
    .how-works-section h4 { font-weight: 700; font-size: 32px; }
    .btn-join,.btn-join-primary { width: 300px; }
    .how-works-section h4.product-title { font-weight: 600; font-size: 28px; text-align: center;}
    .how-works-section p.product-desc { font-weight: 400; font-size: 28px; text-align: center;}
    .how-it-works .container.card .row ul li { color: white; font-weight: 400; font-size: 20px; }
    .how-it-works .container.card{ background-image: url('../img/about.png'); background-size: cover; background-position: center; border-radius: 10px;}
}