@import './header.css';
@import './navigation.css';
@import './first-screen.css';
@import './filters.css';
@import './best-offers.css';
@import './offers.css';
@import './offers-card.css';
@import './creditors.css';
@import './reviews.css';
@import './payout-social.css';
@import './footer.css';
@import './modal.css';

:root {
	/*links, background, cards */
	--bg-popular: rgba(250, 211, 30, 1);
	/*first section background*/
	--bg-gradient-1: rgba(250, 206, 11, 1);
	--bg-gradient-2: rgba(252, 229, 99, 1);
	/*second section background*/
	--section-bg-color: rgba(255, 244, 228, 1);
	--background-shadow: rgba(0, 0, 0, 0.2);

	--bg-offer: rgba(234, 222, 204, 1);
	--bg-link: rgba(242, 233, 200, 1);

	--bg-footer: rgba(217, 205, 187, 1);

	/* Mobile-first breakpoint variables (for reference only) */
	--breakpoint-sm: 576px;
	/* Small devices (landscape phones) */
	--breakpoint-md: 768px;
	/* Medium devices (tablets) */
	--breakpoint-lg: 992px;
	/* Large devices (desktops) */
	--breakpoint-xl: 1200px;
	/* Extra large devices (large desktops) */
	--breakpoint-xxl: 1440px;
	/* Extra extra large devices */
}
*, ::before, ::after{
	box-sizing: border-box ;
}
body {
	font-family: 'Bebas Neue', sans-serif;
	font-style: normal;
	background: var(--section-bg-color);
	color: black;
	position: relative;
	scroll-behavior: smooth;
	z-index: 10000;

}
button:hover {
	box-shadow: 0 4px 12px rgba(255, 255, 255, 0.15);
}

.upbtn {
	z-index: 10001;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	cursor: pointer;
	border: 2px solid white;
	border-radius: 50%;
	transform: scale(0);
	transition:
		transform 0.4s ease-in-out,
		opacity 0.4s ease-in-out;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--bg-popular);
	background-image: url('../icons/arrow-up.svg');
	box-shadow:
		0px 1px 2px rgba(0, 0, 0, 0.1),
		0px 4px 4px rgba(0, 0, 0, 0.09),
		0px 10px 6px rgba(0, 0, 0, 0.05),
		0px 18px 7px rgba(0, 0, 0, 0.01),
		0px 28px 8px rgba(0, 0, 0, 0);
	opacity: 0;
	pointer-events: none;
	-webkit-tap-highlight-color: transparent;
}
.upbtn.show {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}
.upbtn:hover {
	transform: scale(1.2) !important;
}
@media (max-width: 576px) {
	.upbtn {
		width: 40px;
		height: 40px;
		bottom: 10px;
		right: 5px;
	}
}