@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap');
*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Montserrat' ;
}

html{
	scroll-behavior: smooth;
}

:root{
	--mainColor: #532c00;
	--textColor: rgb(69, 69, 69);
	--dopColor: rgb(169, 169, 169); 
	--legendWhite: #fff;
	--legendNewBlack: #030303;
}

a{
	text-decoration: none;
}

ul{
	list-style-type: none;
}

#myBtn {
	display: none; /* Hidden by default */
	position: fixed; /* Fixed/sticky position */
	bottom: 80px; /* Place the button at the bottom of the page */
	right: 30px; /* Place the button 30px from the right */
	z-index: 99; /* Make sure it does not overlap */
	border: none; /* Remove borders */
	outline: none; /* Remove outline */
	background-color: var(--mainColor); /* Set a background color */
	color: var(--legendWhite);
	cursor: pointer; /* Add a mouse pointer on hover */
	width: 50px;
	height: 50px;
	border-radius: 10px; /* Rounded corners */
	font-size: 25px; /* Increase font size */
	transition: all 0.3s ease;
	border-radius: 50%;
}

#myBtn:hover{
	background-color: transparent;
	color: var(--mainColor);
}

.container{
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;

}

/* header{
	position: fixed;
	width: 100%;
} */

.header-nav{
	/* background: var(--legendNewBlack); */
	background: #f4f4f4;
	padding: 10px;
}

.header-logo{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 20px;
}


.header-logo-link > img{
	width: 100px;
	height: 100px;
}
.header-logo-link-text{
	font-style: 60px;
	font-weight: 600;
	color: var(--mainColor);
	display: none;
}

.header-body{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}

.header-menu-list{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.header-menu-list > li{
	display: inline-block;
}

.header-menu-link{
	display: block;
	font-size: 18px;
	font-weight: 400;
	color: var(--legendNewBlack);
	transition: all 0.2s ease;
}

.header-menu-link:hover{
	color: var(--mainColor);
}

.header-dop{
	display: flex;
	justify-content: center; 
	align-items: center;
	gap: 20px;
}

.header-call{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.header-call-number{
	text-align: right;
	display: flex;
	flex-direction: column;
}

.header-call-number > p{
	font-size: 13px;
	color: var(--dopColor);
}

.header-call-number-link{
	font-size: 18px;
	font-weight: 700;
	color: var(--mainColor);
}

.call{
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	text-align: center;
	font-size: 17px;
	/* color: var(--legendWhite); */
	color: white;
	/* width: 40px; */
	height: 40px;
	line-height: 40px;
	border-radius: 50px;
	padding: 20px 7px;
	background:green;
	/* border: 2px solid green; */
	transition: all 0.4s ease;
	right: 30px;
	bottom: 20px;

}


.call p{
	color: var(--legendWhite);
	font-weight: 600;
}

#telephone{
	background: green;
	width: 30px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	color: var(--legendWhite);
	border-radius: 50%;
	font-size: 19px;
	animation: bbb 1s linear infinite;
}

@keyframes bbb {
	0%{
		transform: 	(1);
	}
	50%{
		transform: scale(1.4);
	}
	100%{
		transform: scale(1);
	}
}

.telegram{
	position: fixed; 
	text-align: center;
	font-size: 20px;
	color: var(--legendWhite);
	width: 50px;
	height: 50px;
	line-height: 50px;
	border-radius: 50%;
	background: #23aaea;
	transition: all 0.4s ease;
	right: 30px;
	bottom: 80px;
}

.homee{
    position: fixed;
    text-align: center;
    line-height: 42px;
    left: 30px;
    bottom:  70px;
    width: 42px;
    height: 42px;
    font-size: 22px;
    background: var(--mainColor);
    color: var(--legendWhite);
    border-radius: 50px;
    z-index: 99;
}


.header-call-btn{
	display: flex;
	justify-content: center;
	align-items: center;

}



.header-call-btn-link{
	text-align: center;
	font-size: 16px;
	font-weight: 500;
	color: var(--legendWhite);
	padding: 10px 16px;
	border-radius: 6px;
	/* background: rgba(176, 102, 17, 0.178); */
	background: var(--mainColor);
	animation: scale 1s linear infinite ;
}

/* @keyframes scale {
    0%{
        font-size: 12px;
    }
    50%{
        font-size: 14px;
    }
    100%{
        font-size: 12px;
    }
} */



.header-burger{
	color: var(--mainColor);
	font-size: 23px;
	cursor: pointer;
	display: none;
}


/* home styling */

.home{
	background: url(../images/bg-main.jpg) no-repeat center/cover fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 780px;
	background-attachment: fixed;
}

.home-body{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.home-title-block{
	text-align: center;
	font-size: 30px;
	color: var(--legendWhite);
	margin-bottom: 20px;
}

.home-text-block{
	text-align: center;
	font-size: 25px;
	width: 800px;
	color: var(--legendWhite);
	font-weight: 500;
	margin-bottom: 40px;
}


.home-btn-block > a{
	color: var(--legendWhite);
	padding: 18px;
	border-radius: 7px;
	font-size: 16px;
	font-weight: 500;
	background: var(--mainColor) ;
	transition: all 0.3s ease;
}


/*  */

.progress-container {
	width: 100%;
	height: 8px;
	background: #ccc;
}
  
.progress-bar {
	height: 8px;
	background: var(--mainColor);
	width: 0%;
}

/*  */

/* main body styling */


section{
	margin-top: 40px;
}

/* catalog */

.catalog-body{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	margin-top: 30px;
	flex-wrap: wrap;
}

.catalog-item{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	

}

.f{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	box-shadow: 0px 5px 15px grey;
}

.card-image{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	flex-wrap: wrap;
}

.catalog-item{
	transition: all 0.3s ease;

}

.f:hover{
	transform: translateY(-10px);
}


.card-image img{
	width: 350px;
	height: 350px;
}

.card-much{
	width: 100%;
	padding: 10px;
	background: var(--legendWhite);
	color: var(--mainColor); 	
}

.card-much-title{
	font-weight: 600;
	font-size: 20px;
}

/* about */


.about-company-body{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.title{
	text-align: center;
	font-size: 30px;
	font-weight: 700;
	color: var(--mainColor);
	margin: 20px auto;
}

.about-company-big-title{
	text-align: center;
	font-size: 60px;
	margin: 20px auto;
	color: var(--mainColor);
}

.about-company-text{
	text-align: center;
	font-size: 22px;
	font-weight: 400;
	color: var(--dopColor);
	margin-bottom: 30px;
}

.about-company-services{
	text-align: center;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 30px;
}

.about-company-service{
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 250px;
	gap: 10px;
}

.about-service-title{
	font-size: 25px;
	font-weight: 500;
	color: var(--mainColor);
}

.about-service-text{
	font-size: 18px;
	font-weight: 400;
	color: var(--dopColor);
}

/* news */

.company-news{
	padding: 40px;
	background: #b066112d;
}

.news-body{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.news-left, .news-right{
	width: 50%;
}

.news-left-title{
	text-align-last: left;
	width: 50%;
	font-size: 40px;
	color: var(--legendWhite);
	font-weight: 700;

}

.news-right-text{
	text-align-last: left;
	font-size: 18px;
	right: 0;
	width: 90%;
	color: var(--legendWhite);
}

/* help */


.help{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin-top: 100px;
	margin-bottom: 100px;
}

.help-body{
	display: flex;
	justify-content: center;
	align-items: center;
}

.help-body-left{
	display: flex;
	flex-direction: column;
	width: 500px;
}

.help-body-title{
	font-size: 50px;
	font-weight: 700;
	line-height: 40px;
	color: var(--mainColor);
	margin-bottom: 20px;
}

.help-body-text{
	font-size: 20px;
	font-weight: 400;
	color: var(--dopColor);
	letter-spacing: 1px;
}

.help-body-right img{
	width: 780px;
	height: 100vh;
}

/* comment */

.comment{
	background: #b066112d;

}

.comment-titles{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.comment-title{
	font-size: 50px;
	font-weight: 600;
	color:var(--mainColor);
}

.comment-textlist{
	text-align: center;
	font-size: 20px;
	font-weight: 500;
	margin: 20px;
	color: var(--dopColor);
}

.comment-body{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
	padding: 20px;
}

.comments-block{
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
}

.comment-item{
	text-align: center;
	width: 200px;
}

.comment-image{
	width: 100px;
	height: 100px;
	Border-radius: 50% ;
	object-fit: cover;
}

.comment-text{
	color: var(--textColor);
}

/* footer */

footer{
	margin-top: 70px;
	/* background: rgb(244, 244, 244); */
	padding: 15px;
	background: #f4f4f4;

}

.footer-body{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.footer-menu-list{
	display: flex;
	margin-left: 20px;
	margin-right: 20px;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.footer-call > a{
	font-size: 20px;
	font-weight: 500;
	color: var(--mainColor);
}

.footer-call > h5{
	font-size: 12px;
	font-weight: 400;
	color: var(--dopColor);
}

.footer-brands{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 20px auto;
}

.footer-brands img {
	width: 40px;
}