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

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    color: #333;
    background-color: #fff;
    overflow-x: hidden;
}

.page-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 40px;
    background: #fff;
}

.lang-switcher {
    display: flex;
    gap: 5px;
}

.lang-item {
    font:700 .75rem/1rem Roboto,sans-serif;
    cursor: pointer;
    color: #333;
    padding: 4px 8px;
}

.lang-item.active {
    background: #a8e0f9;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px #006f9e;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 13px;
    color: #555;
}
.header-right div {
  width: 33px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg width='33' height='32' viewBox='0 0 33 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.09984 27.1921C2.68684 27.2064 2.27901 27.097 1.92878 26.8778C1.57856 26.6587 1.30196 26.34 1.13457 25.9626C0.967169 25.5852 0.916624 25.1664 0.989429 24.7601C1.06224 24.3538 1.25507 23.9785 1.54312 23.6825C1.83117 23.3866 2.20128 23.1834 2.60585 23.0993C3.01042 23.0151 3.43095 23.0537 3.81336 23.2102C4.19576 23.3667 4.52256 23.6338 4.75174 23.9773C4.98091 24.3208 5.10198 24.7249 5.09937 25.1377C5.10363 25.4038 5.05524 25.6682 4.95698 25.9157C4.85871 26.1631 4.7125 26.3887 4.52673 26.5796C4.34096 26.7705 4.11928 26.9229 3.87442 27.028C3.62956 27.1331 3.36633 27.1889 3.09984 27.1921Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M32.0431 19.4645C32.0431 14.7865 29.3663 11.7012 25.2885 11.7012C22.325 11.7012 20.1929 13.387 19.1537 15.8424C18.0106 13.0721 15.3482 11.7012 12.5388 11.7012C11.5455 11.7074 10.5582 11.8569 9.60763 12.145V4.57141H5.78418V26.3545C7.02761 27.0704 8.71537 27.4283 10.7543 27.4283C14.3377 27.4283 17.5197 25.7353 18.9459 22.7324C19.8668 25.3989 22.0921 27.4283 25.9227 27.4283C27.8754 27.4424 29.7867 26.8659 31.4053 25.7747L30.4808 23.3229C29.2888 24.0106 27.937 24.3735 26.5606 24.3752C24.235 24.3752 22.3859 22.8147 22.3214 20.5884H32.0431V19.4717V19.4645ZM11.7433 14.8438C11.0007 14.8494 10.2677 15.0129 9.59326 15.3234L9.55025 15.3449V24.0674L9.60042 24.0853C10.213 24.2916 10.8569 24.3897 11.5032 24.3752C14.0689 24.3752 16.0039 22.2098 16.0039 19.3393C15.9896 17.1023 14.5311 14.8438 11.7433 14.8438ZM25.1917 14.493C27.1518 14.493 28.0978 16.1895 28.1623 17.8718L28.1659 17.9469H22.153V17.8754C22.153 16.211 23.2889 14.493 25.1917 14.493Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

.be-logo {
    height: 30px;
}

.content-wrapper {
    flex: 1;
    display: flex;
    position: relative;
    padding: 40px 0 40px 80px;
    background-image: url(../images/bfg.webp);
    background-repeat: no-repeat;
    background-position: right top 0px;
    background-size: 60vw;
}

.left-section {
    flex: 0 0 500px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.right-section {
    flex: 1;
    position: relative;
}

.hero-image {
    position: absolute;
    right: -100px;
    top: -50px;
    width: 100%;
    height: 110%;
    background-size: cover;
    background-position: center;
    border-radius: 50% 0 0 50%;
    box-shadow: -20px 0 50px rgba(0,0,0,0.05);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.logo-text {
    font-size: 48px;
    font-weight: 400;
    color: #333;
}

.logo-box {
    background-color: #a8e0f9;
    padding: 5px 20px;
    border-radius: 12px;
    font-size: 48px;
    font-weight: 900;
  color: rgb(42, 45, 65);
}

.card {
    background: #f0f4f8;
    border-radius: 16px;
    padding: 32px;
    width: 400px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.card.hidden {
    display: none;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a2b49;
    margin-bottom: 20px;
}

.card-subtitle {
    margin-bottom: 20px;
    color: #666;
}

.card-body p {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 15px;
    color: #444;
}

.primary-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background: #6ec8f2;
    box-shadow: inset 0 0 0 2px #006f9e;
    color: #003d58;
    border-radius: 8px;
    gap: 8px;
    padding: 0.7rem 1rem;
    border: none;
    cursor: pointer;
    transition: transform 0.1s, opacity 0.2s;
    margin-top: 10px;
    font: 400 1rem/1.5rem Roboto,sans-serif;
  	font-weight: 600;
}

.primary-button:hover {
    background: #006f93;
  	box-shadow: 0px 2px 4px 0px rgba(0,0,0,.149);
  	color: #fff;
}

.primary-button:active {
    transform: scale(0.98);
}

/* Form Styles */
.form-group {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #003d58;
}

input {
    padding: 12px;
    border: 1px solid #ccd6e0;
    border-radius: 6px;
    font-size: 15px;
    outline: none;
}

input:focus {
    border-color: #006f9e;
    box-shadow: 0 0 0 2px rgba(110, 200, 242, 0.2);
}

/* Bank Selection Styles */
.bank-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.bank-item {
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.bank-item:hover {
    border-color: #6ec8f2;
    background: #f9fcfe;
}

.bank-item img {
    height: 40px;
    width: auto;
    object-fit: contain;
}

.bank-item span {
    font-weight: 600;
    font-size: 14px;
}

.footer {
    padding: 20px 0px;
    display: block;
    justify-content: center;
    font-size: 14px;
    color: #666;
    border-top: 1px solid #6d6e83;
}
.footer .links{
	display: flex;
	padding-left: 40px;
	padding-right: 40px;
	gap: 15px;
	justify-content: center;
}
.footer a {
    color: #0c0f1e;
    text-decoration: none;
}

.footer a:hover {
    color: #006f9e;
}

.separator {
    color: #0c0f1e;
}
.lgs{
	display: flex;
  	gap: 15px;
  	justify-content: center;
  	margin-top: 15px;
  	padding:0px 40px;
  	margin-bottom: 10px;
}
.lgs .bosa {
	background-image: url('../images/bosa.svg');
	background-repeat: no-repeat;
	width: 200px;
	height: 60px;
}
.lgs .bosa1 {
	background-image: url('../images/bosa1.svg');
	background-repeat: no-repeat;
	width: 200px;
	height: 60px;
}
.lst{
	border-top: 1px solid #6d6e83;
	padding: 13px 20px 0px 20px;
}
.lst span{
	color: #474a5e;
  	font: 400 .875rem/1.25rem Roboto,sans-serif;
}
.lst span:nth-child(2){
	float: right;
}

@media (max-width: 900px) {
    .content-wrapper {
        flex-direction: column;
        padding: 20px;
    }
    .right-section {
        display: none;
    }
    .left-section {
        flex: 1;
        width: 100%;
        align-items: center;
    }
    .card {
        width: 100%;
        max-width: 480px;
    }
}


@media (max-width: 600px) {
    .footer .links {
    	display: grid;
    	gap:10px;
    	text-align: center;
    }
    .separator {display: none;}
    .lgs{
    	display: grid;
  		gap: 0px;
  		text-align: center;
  		align-content: center;
    }
    .lst {
    	display: grid;
    	text-align: center;
    }
    .lst span:nth-child(2) {
    	float: none;
    }
    .header-right span{display: none;}
    .form-row{display: block;}
}