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

:root {
	--dark-blue: #042149;
	--light-blue: #2a5694;
}
html {
  scroll-behavior: smooth;
}
#open-account {
	scroll-margin-top: 20px;
}
body {
    font-family: "Manrope", sans-serif;
    line-height: 1.4;
    font-size: 24px;
}
img {
	max-width: 100%;
}
.form-group {
	margin-bottom: 1.5rem;
}
form {
	.small_text {
		font-size: 16px;
	}
	label {
		font-size: 1.15rem;
		font-weight: 500;
		margin-bottom: 10px;
	}
	.form-control, select {
		width: 100%;
        height: 55px;
        border: 1px solid #f3f4f7;
        background-color: #f3f4f7;
        outline: none !important;
        box-shadow: none !important;
        font-size: 16px;
        padding: 12px;
        border-radius: .5rem;
    }
    .submit_btn {
	    background: var(--light-blue);
	    color: #fff;
	    text-decoration: none;
	    border-radius: 4px;
	    min-height: 64px;
	    padding: 0 1.5rem;
	    font-size: 1.25rem;
	    border: 0;
	    font-weight: 700;
	}
}
.navbar, .hero, .section-dark-alt {
    background: #042149;
    color: #fff;
}

.font-size-14 {
    font-size: .875rem;
}
.font-size-24 {
    font-size: 1.5rem;
}
.section-dark {
	background-color: #d0dbec;
}
.banner-content {
	max-width: 800px;
	margin: 0 auto;
}
.section-light {
    background: #f3f4f7;
    color: #222;
}
.hero {
    min-height: 90vh;
    display: flex;
    align-items: center;
}
.text-light-emphasis {
    color: rgba(255, 255, 255, 0.75) !important;
}
.testimonial {
    background: transparent;
    border: 0;
    padding: 1.25rem;
    border-radius: 12px;
}
.author {
    margin-top: 1rem;
    font-weight: bold;
    opacity: 0.85;
}
.section_newsletter {
    background-image: url(../images/newsletter-bg-image.webp);
    background-position: 50%;
    background-size: cover;
}
.newsletter-wrapper {
    grid-column-gap: 4rem;
    grid-row-gap: 4rem;
    color: #2f2d3b;
    background-color: #fff;
    border-radius: .25rem;
    justify-content: space-between;
    align-items: center;
    padding: 2.5rem 2rem;
    display: flex;
    .newsletter-form-outer-wrapper {
	    width: 100%;
	    max-width: 480px;
	    margin-bottom: 0;
	}
    .newsletter-form {
	    align-items: center;
	    display: flex;
	    position: relative;
	}
    .newsletter-input {
	    height: 4.5rem;
	    width: 100%;
	    color: var(--dark-grey);
	    letter-spacing: -.015625rem;
	    border: 1px solid #0000001c;
	    border-radius: .25rem;
	    flex: none;
	    margin-bottom: 0;
	    padding: 1.5rem 12rem 1.5rem 1.5rem;
	    font-size: 1.125rem;
	    font-weight: 500;
	    transition: color .3s;
	}
	.newsletter-button {
	    background-color: #042149;
	    color: #fff;
	    border: 0;
	    border-radius: .25rem;
	    padding: 1rem 1.5rem;
	    font-size: 1.125rem;
	    font-weight: 600;
	    transition: background-color .3s;
	    position: absolute;
	    inset: auto .5rem .5rem auto;
	}
}
.newsletter-inner-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    justify-content: flex-start;
    align-items: center;
    max-width: 450px;
    display: flex;
    .newsletter-icon {
	    flex: none;
	    justify-content: center;
	    align-items: center;
	    width: 4rem;
	    height: 4rem;
	    display: flex;
	}
}

.steps li {
    margin-bottom: 1rem;
    font-weight: 600;
}
.text-blue {
	color: var(--dark-blue);
}
.badge {
    padding: 10px 25px;
}
.bg-danger-subtle {
    background-color: var(--light-blue) !important;
    color: #fff !important;
}
.usp-item {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    justify-content: flex-start;
    align-items: flex-start;
    display: flex;
}
.usp-item-icon {
    background-color: var(--dark-blue);
    border-radius: .25rem;
    flex: none;
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    padding: .5rem;
}
.usp-item-p {
    flex-flow: column;
    font-weight: 600;
    line-height: 1.5em;
    display: flex;
    font-size: 1rem;
    strong {
    	color: var(--dark-blue);
    }
}

.font_size_large {
	font-size: 1.75rem;
}
.quote-author {
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    justify-content: flex-start;
    align-items: center;
    display: flex;
    .quote-icon {
	    background-color: var(--light-blue);
	    border-radius: .25rem;
	    flex: none;
	    width: 4.5rem;
	    height: 4.5rem;
	    padding-left: 1.25rem;
	    padding-right: 1.25rem;
	}
}
.open-btn {
    background: var(--light-blue);
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    min-height: 84px;
    padding: 0 2.5rem;
    width: max-content;
    transition: all 0.3s ease;
	.btn-text {
	    font-size: 1.5rem;
	    font-weight: 600;
	    line-height: 1;
	}
	.divider {
	    width: 1px;
	    height: 42px;
	    background: rgba(255, 255, 255, 0.6);
	    margin: 0 1.75rem;
	}
	.icon {
	    font-size: 2rem;
	    line-height: 1;
	}
	&:hover {
	    background: #3a79d1;
	    color: #fff;
	}
}

.feature-card {
    background: #fff;
    border-radius: 4px;
    padding: 24px 28px;
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 20px;
	&:last-child {
	    margin-bottom: 0;
	}
	.feature-icon {
	    width: 60px;
	    height: 60px;
	    background: var(--dark-blue);
	    border-radius: 4px;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-shrink: 0;
	    color: #ffffff;
	    font-size: 30px;
	}
	h3 {
	    margin: 0 0 6px;
	    font-size: 1.5rem;
	    font-weight: 700;
	    line-height: 1.2;
	    color: #1a1f2e;
	}
	p {
	    margin: 0;
	    font-size: 1.10rem;
	    line-height: 1.6;
	    color: #1a1f2e;
	}
}

.features-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 2;
	li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 22px;
        font-size: 1.10rem;
        line-height: 1.5;
        color: #ffffff;
	    &:last-child {
	        margin-bottom: 0;
	    }
		.icon {
	        color: #4be36a;
	        font-size: 22px;
	        line-height: 1;
	        margin-top: 3px;
	        flex-shrink: 0;
	    }
		strong {
	        font-weight: 700;
	        color: #ffffff;
	    }
	}
}

.steps-section {
	margin: 2rem 0;
	.step-item {
		display: flex;
		align-items: flex-start;
		gap: 24px;
		margin-bottom: 22px;
		&:last-child {
		    margin-bottom: 0;
		}
	}
    .step-number {
		width: 64px;
		height: 64px;
		background: var(--dark-blue);
		border-radius: 3px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		color: #ffffff;
		font-size: 34px;
		font-weight: 700;
		line-height: 1;
    }
	h3 {
		margin: 0 0 6px;
		font-size: 24px;
		font-weight: 700;
		line-height: 1.2;
		color: #111827;
	}
	p {
		margin: 0;
		font-size: 18px;
		line-height: 1.5;
		color: #7b8092;
		font-weight: 400;
	}
}

.testimonialSwiper {
	padding-bottom: 70px;
	.swiper-button-prev, .swiper-button-next {
	    bottom: 0;
	    top: auto;
	    transform: translate(-50%, 0%);
	    left: calc(50% - 30px);
	   	cursor: pointer;
	    background-color: #fff;
	    border-radius: 50%;
	    width: 2.5rem;
	    height: 2.5rem;
	    padding: .3rem;
	    transition: color .3s;
	    &:after {
			width: 100%;
            height: 100%;
            font-size: 20px;
            text-align: center;
            line-height: 1.6;
            text-indent: -2px;
	    }
	}
	.swiper-button-next {
		left: calc(50% + 30px);
		&:after {
        	text-indent: 2px;
        }
	}
}
.testimonial-card {
    background-color: #fff;
    border-radius: .25rem;
    flex-flow: column;
    flex: none;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding: 2rem;
    display: flex;
    .quote-icon {
	    background-color: var(--dark-blue);
	    border-radius: .125rem;
	    width: 2.5rem;
	    height: 2.5rem;
	    margin-bottom: 1.25rem;
	    padding-left: 11px;
	    padding-right: 11px;
	}
	.testimonial-item-p {
	    margin-bottom: 1.375rem;
	    font-size: 1.125rem;
	    font-weight: 500;
	    line-height: 1.3em;
	}
	.user-info {
	    grid-column-gap: .75rem;
	    grid-row-gap: .75rem;
	    justify-content: flex-start;
	    align-items: center;
	    display: flex;
	    img {
		    object-fit: cover;
		    border-radius: 50%;
		    width: 2.5rem;
		    height: 2.5rem;
		}
		.user-name {
		    margin-bottom: 2px;
		    font-size: .875rem;
		    font-weight: 700;
		    line-height: 1.3em;
		}
		.user-role {
		    color: #2f2d3b;
		    font-size: .875rem;
		    font-weight: 400;
		    line-height: 1.3em;
		}
	}
}

footer {
	.footer-main-content {
	    grid-column-gap: 2rem;
	    grid-row-gap: 2rem;
	    grid-template-rows: auto;
	    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	    grid-auto-columns: 1fr;
	    /* justify-content: space-between; */
	    align-items: flex-start;
	    display: flex;
	}
	.footer-column {
	    grid-column-gap: 1rem;
	    grid-row-gap: 1rem;
	    flex-flow: column;
	    grid-template-rows: auto auto;
	    grid-template-columns: 1fr 1fr;
	    grid-auto-columns: 1fr;
	    justify-content: flex-start;
	    align-items: flex-start;
	    line-height: 1.3em;
	    display: flex;
	}
	.footer-logo-column {
	    width: 45%;
        margin-right: 2rem;
	}
	.footer-text, .contact-link, .copyright {
      	font-size: 1rem;
      	line-height: 1.4;
	}
    .footer-text {
      	margin-bottom: 10px;
    }
    .contact-link {
		color: #1f1f1f;
		text-decoration: underline;
    }
    .footer-heading {
        font-weight: 700;
        margin-bottom: 0;
        font-size: 1.10rem;
    }
    .footer-links a {
		display: block;
		text-decoration: none;
		color: #1f1f1f;
		font-size: 0.85rem;
    }
    .footer-bottom {
		border-top: 1px solid #d9d9d9;
		margin-top: 60px;
		padding-top: 35px;
    }
    .logo-dots {
      	width: 4.5rem;
    }
    .copyright {
      	color: #333;
    }
}

@media (min-width: 1200px) {
	.py-5 {
		padding-top: 5rem !important;
		padding-bottom: 5rem !important;
	}
	.pb-0 {
		padding-bottom: 0 !important;
	}
	.container {
	    max-width: 1260px !important;
	}
}

@media (max-width: 991px) {
	body {
		font-size: 18px;
	}
	.font_size_large {
	    font-size: 1.25rem;
	}
	.open-btn {
	    min-height: 60px;
	    padding: 0 1.5rem;
	    .btn-text {
	        font-size: 1rem;
	    }
	    .divider {
	        height: 32px;
	        margin: 0 1rem;
	    }
	    .icon {
	        font-size: 1.25rem;
	    }
	}
	.quote-author {
	    .quote-icon {
	        width: 3.5rem;
	        height: 3.5rem;
	        padding-left: .75rem;
	        padding-right: .75rem;
	    }
	}
	.newsletter-wrapper {
	    grid-column-gap: 0;
	    grid-row-gap: 2rem;
	    justify-content: center;
	    flex-wrap: wrap;
	}
	footer {
		.footer-main-content {
			grid-column-gap: 1rem;
			flex-wrap: wrap;
			justify-content: flex-start;
		}
	    .footer-column {
	    	width: calc(50% - 1rem);
	    }
		.footer-logo-column {
	        width: calc(50% - 1rem);
	        margin-right: 0;
	    }
	}
}

@media (max-width: 767px) {
    .hero {
        min-height: auto;
    }
    .display-4 {
        font-size: 2.4rem;
    }
    .display-5 {
        font-size: 2.2rem;
    }
    .features-list li {
        font-size: 16px;
        margin-bottom: 18px;
    }
    .features-list .icon {
        font-size: 18px;
        margin-top: 2px;
    }

    .feature-card {
	    padding: 20px;
	    gap: 15px;
	    margin-bottom: 20px;
	    align-items: flex-start;
		.feature-icon {
		    width: 52px;
		    height: 52px;
		    font-size: 24px;
		}
		h3 {
		    font-size: 22px;
		}
		p {
		    font-size: 15px;
		    line-height: 1.5;
		}
	}
	.steps-section {
		.step-item {
	        gap: 18px;
	    }
	    .step-number {
	        width: 56px;
	        height: 56px;
	        font-size: 28px;
	    }
		h3 {
	        font-size: 20px;
	    }
		p {
	        font-size: 16px;
	    }
	}
	.quote-author {
	    justify-content: center;
	    text-align: left;
	}
	footer {
		.brand-title {
        font-size: 42px;
      }

      .footer-heading {
        margin-top: 30px;
      }

      .copyright {
        text-align: left !important;
        margin-top: 20px;
      }
	}
}


@media (max-width: 575.98px) {
	.feature-card {
	    flex-direction: column;
	    align-items: flex-start;
		h3 {
		    font-size: 20px;
		}
	}
	.steps-section {
		.step-item {
			gap: 15px;
			margin-bottom: 18px;
		}
		.step-number {
			width: 48px;
			height: 48px;
			font-size: 24px;
		}
		h3 {
			font-size: 18px;
		}
		p {
			font-size: 14px;
			line-height: 1.4;
		}
	}
	.newsletter-inner-wrapper {
		flex-direction: column;
	}
	.newsletter-wrapper {
		.newsletter-form {
			flex-direction: column;
			gap: 1rem;
		}
		.newsletter-input {
			padding:.75rem;
			height: 3.5rem;
		}
	    .newsletter-button {
	    	position: unset;
	    	font-size: 1rem;
	    	width: 100%;
	    }
	}
}


@media (max-width: 480px) {
	footer {
		.footer-main-content {
            grid-column-gap: 1rem;
            grid-row-gap: 0rem;
        }
		.footer-column, .footer-logo-column {
	    	width: calc(100% - 1rem);
	    }
	}
}