:root{
	--menu-height: 80px;
	--color-dark: #111111;
	--logo-height: 36px;
}
html{
	 scroll-behavior: smooth;
}
img{
	max-width: 100%;
}
body{
	font-family: "Open Sans", sans-serif;
	font-size: 20px;
	font-weight: 300;
}
a {
    text-decoration: none;
    color: inherit;
}
@media (max-width: 768px){
	body{
		font-size: 18px;
	}
	.html img {
		max-width: 280px !important;
		height: auto !important;
	}
	:root {
		--logo-height: 30px;
	}
}
main{
	min-height: calc(100vh - var(--menu-height));
}
header{
	height: var(--menu-height);
	background-color: var(--color-dark);
	
}
.logo{
	height: var(--logo-height);
}
.full-height{
	min-height: calc(100vh - var(--menu-height));
}
.background-image{
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	transition: transform 10s ease-in-out;
}
.category:hover .background-image img{
	transform: scale(1.3);
	
}
.category-title {
    position: absolute;
    color: white;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-weight: 300;
    min-width: 320px;
}
.category-title h3{
	font-weight: 300;
	font-size: 50px;
}
.btn {
    background-image: url("data:image/svg+xml,%3Csvg width='41' height='18' viewBox='0 0 41 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9H20H40M40 9L31 1M40 9L31 17' stroke='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    padding: 16px 80px 16px 30px;
    border-radius: 50px;
    font-size: 18px;
    line-height: 1;
    background-position: calc(100% - 30px) center;
    background-size: 30px;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,background-position .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.btn-dark{
	background-image: url("data:image/svg+xml,%3Csvg width='41' height='18' viewBox='0 0 41 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 9H20H40M40 9L31 1M40 9L31 17' stroke='white'/%3E%3C/svg%3E%0A");
}
.btn:hover{
	background-position: calc(100% - 20px) center;
}
.icon-mouse-scroll{
	cursor: pointer;
}
.icon-mouse-scroll img {
    filter: invert(1) brightness(2);
    width: 80px;
}
@media (min-width: 1520px){
	.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1440px;
	}
}

.mobile-menu-btn{
	width: calc(var(--logo-height) + var(--logo-height) / 100 * 30);
	height: var(--logo-height);
	position: relative;

}
.mobile-menu-btn span{
	width: 80%;
	background-color: white;
	height: 2px;
	position: absolute;
	display: block;
	right: 0;
	
}
.mobile-menu-btn span:nth-child(1){
	top: 0px;
}
.mobile-menu-btn span:nth-child(2){
	top: calc(50% - 1px);
	width: 100%;
}
.mobile-menu-btn span:nth-child(3){
	top: calc(100% - 2px);
}

.offcanvas-header {
    height: var(--menu-height);
}

.offcanvas{
	background-color:  var(--color-dark);
	color: white;
}
.offcanvas .btn-close {
    --bs-btn-close-color: #fff;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
   
}
.offcanvas-body {
    position: relative;
}

.pagination li {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--bs-body-color);
    margin: 0 4px;
}
.pagination li.active{
	background-color: var(--bs-body-color);
	color: var(--bs-body-bg);
	
}

.btn-close {
    
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    
}