@import './pop-up.css';
@import './header.css';
@import './credit-rating.css';
@import './offers.css';
@import './partners.css';
@import './container.css';
@import './conditions.css';
@import './loan-calculator.css';
@import './footer.css';
:root {
	--bg-all: rgb(230, 244, 249);
	--bg-bank-plate: rgb(186, 226, 245);
	--bg-plate-and-calculator: rgb(203, 236, 252);

	--buttons: rgb(102, 164, 255);
	--sliders-loan-calculator: rgb(70, 165, 212);
	--plate-and-calculator: rgb(186, 226, 245);

	--txt: rgb(0, 30, 73);
	--microtxt: rgba(0, 30, 73, 0.5);

	--percent: rgb(236, 126, 48);
	--sum: rgba(140, 186, 81, 1);

	/* Mobile-first breakpoint variables (for reference only) */
	--breakpoint-xs: 360px;
	--breakpoint-sm: 480px;
	--breakpoint-md: 640px;
	--breakpoint-lg: 960px;
	--breakpoint-xl: 1200px;
}
*, ::before, ::after {
    box-sizing: border-box;
}
body {
	/* font-family: Inter, Montserrat Alternates, sans-serif; */
	color: var(--txt);
	font-style: normal;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
}
@media (min-width: 1200px) {
	body {
		background-image: url('../images/background.png');
		background-repeat: repeat;
		background-position: -200px 0;
	}
}

.overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
	z-index: 100;
}
.overlay.active {
	opacity: 1;
	visibility: visible;
}
.fade-in {
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease;
}
.fade-in.visible {
	opacity: 1;
	visibility: visible;
}

.scrl-button-container{
	display: flex;
	justify-content: center;
	margin-top: -50px;
	width: 100%;
	opacity: .7;
}
.scrl-button{
	display: flex;
	justify-content: center;
	gap: 10px;
	align-items: center;
	font-weight: bold;
	text-align: center;
	width: 100%;
	max-width: 360px;
	padding: 3px 5px 3px 20px;
	text-decoration: none;
	color: var(--txt);
	border: 2px solid var(--buttons);
	border-radius: 20px;
	height: 46px;
	cursor: pointer;
}
.scrl-button span{
	font-family: "Montserrat Alternates";
	font-size: 24px;
}
.scrl-button img{
	width: 50px;
	height: 50px;
	border-radius: 50%;
}
@media (max-width: 640px){
	.scrl-button{
		max-width: 100%;
		height: 50px;
		margin-top: 20px;
		height: 46px;
	}
	.scrl-button span{
		font-size: 20px;
	}
	.scrl-button img{
		width: 40px;
		height: 40px;
	}
}
@media (max-width: 480px){
	.scrl-button span {
		font-size: 16px;
	}
}