:root {
	--brown-dark: #2F281E;
	--orange: #FF9900;
	--coral-light: #F03E3D;
	--coral: #D80B0A;

}

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

body {
	font-family: "Montserrat", sans-serif;
	font-style: normal;
	font-size: 1rem;
	line-height: 1.625rem;
	color: #544837;
}

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}

ul,ol {
	list-style: none;
}



a,button {
	transition: all 0.2 ease;
	text-decoration: none;
}

.page-wrapper {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	min-height: 100vh;
}

main {
	flex-grow: 1;
}


.container {
	width:min(90%, 1230px);
	margin: 0 auto;
}


header {
	height: 80px;
	border:1px solid #D6E0EB;
	.container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 100%;
	}
	.btn-wrap {
		display: flex;
		gap: 32px;
	}
}

.main-menu ul {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 40px;
	a {
		color: var(--brown-dark);
		letter-spacing: 1.2px;
		&:hover {
			color:var(--orange);
		}
		&:active {
			color:var(--coral);
		}
	}
}




.btn {
	cursor: pointer;
	display: inline-block;
	border: none;
	border-radius: 4px;
	padding: 12px 18.5px;
	background-color: var(--orange);
	font-size: 1.125rem;
	width: 180px;
	color: #fff;
	font-family: inherit;
	font-weight: 500;
	&:hover{
		background-color: var(--coral-light);
	}
	&:active{
		background-color: var(--coral);
	}
}

.btn-outline {
	background-color: #fff;
	color:var(--brown-dark);
	border:1px solid var(--brown-dark);
	&:hover{
		background-color: #fff;
		color: var(--coral-light);
		border: 1px solid var(--coral-light);
	}
	&:active {
		background-color: #fff;
		color: var(--coral);
		border: 1px solid var(--coral);
	}
}

header .btn {
	width: 110px;
}


.hero {
	padding: 90px 0;
	.container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}


.hero__content {
	flex-basis: 44%;
	h1 {
		font-size: 2.75rem;
		line-height: 3.375rem;
		margin-bottom: 20px;
		color: var(--brown-dark);
	}
	p {
		font-size: 1.125rem;
		line-height: 1.75rem;
		margin-bottom: 40px;
	}
	.btn {
		height: 50px;
	}
}

.hero_img {
	width: 55%;
}


/*  START Tools section style */


.tools {
	padding-bottom: 90px;
	background-image: url(./../images/Feat_BG.webp);
	background-repeat: no-repeat;
	background-position: left 50% bottom 7px;
	background-size: 100% auto;
	h2 {
		text-align: center;
		margin: 0 auto;
		max-width: 540px;
		margin-bottom: 53px;
		font-size: 2.25rem;
		line-height: 1.2;
		color: var(--brown-dark);
	}
	.btn-wrap {
		text-align: center;
	}
}


.tools__list {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 15px;
	margin-bottom: 60px;
	li h3 {
		font-size: 1.375rem;
		margin-bottom: 16px;
		color: var(--brown-dark);
		font-weight: 600;
	}
	li p {
		line-height: 1.625rem;
		letter-spacing: 0.12px;
	}
}
.tools__item {
	width: 270px;
}

.tools button {
	padding: 14px 18.5px;
}

.tools__icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	height: 50px;
	margin-bottom: 30px;
	background-color: #888;
	margin-bottom: 30px;
	border-radius: 15px;
	&.violet {
		background-color: #7752BE;
	}
	&.orange {
		background-color: #FAB005;
	}
	&.red {
		background-color: #F03E3D;
	}
	&.blue {
		background-color: #4DADF7;
	}
}


/* END Tools section style */

/* START Effort section style */

.Effort {
	padding: 90px 0;
	.container {
		display: flex;
			justify-content: space-between;
			align-items: center;
		gap: 100px;
	}
}


.Effort__img {
	width: 88%;
}

.Effort__content {
	/* width: 50%; */
	padding-top: 10px;
	h2 {
		display: flex;
		flex-direction: column;
		font-size: 1rem;
		line-height: 1.625rem;
		font-weight: 400;
		color: var(--brown-dark);
		letter-spacing: 0.1px;
		span {
			font-size: 2.25rem;
			font-weight: 700;
			line-height: 2.8rem;
		}
		margin-bottom: 20px;
	}
	p {
		line-height: 1.62rem;
		margin-bottom: 40px;
		width: 90%;
		letter-spacing: 0.12px;
	}
}

.Effort__item { 
	h3 {
	color: var(--brown-dark);
	font-size: 1rem;
	line-height: 1.85rem;
	}
	& p {
		line-height: 1.75rem;
		margin-bottom: 25px;
	}
}

/* END Effort section style */

/* START Product section style */



.Product {
	padding: 0 0 90px 0;
	.container{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row-reverse;
		gap: 165px;
	}
}

.Product__img {
	width: 75%;
}

.Product__content {
	width: 65%;
	padding-top: 34px;

	h2 {
		display: flex;
		flex-direction: column;
		font-size: 1rem;
		line-height: 1.25rem;
		font-weight: 400;
		color: var(--brown-dark);
		letter-spacing: 0.1px;

		span {
			font-size: 2.25rem;
			font-weight: 700;
			line-height: 2.8rem;
		}

		margin-bottom: 20px;
	}

	p {
		line-height: 1.65rem;
		margin-bottom: 40px;
		width: 90%;
		letter-spacing: 0.15px;
	}
}

.Product__item {
	display: flex;
	align-items: center;
	justify-content:flex-start;
	margin-bottom: 30px;
	gap: 20px;
	.icon {
		width: 35px;
		height: 35px;
		border-radius: 10px;
		background-color: var(--orange);
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	p{
		margin-bottom: 0;
		line-height: 1.625rem;
	}
}




/* END Product section style */


/* START Marketers section style */
.marketers {
	padding-bottom: 90px;
	.container {
		display: flex;
		justify-content: flex-start;
		gap: 165px;
	}
}

.marketers__img {
	width: 116%;
}

.marketers__content {
	width: 100%;
	padding-top: 36px;
	padding-left: 5px;
	h2 {
		display: flex;
		flex-direction: column;
		font-size: 1rem;
		line-height: 1.625rem;
		font-weight: 400;
		letter-spacing: 0.1px;
		margin-bottom: 10px;
		span {
			font-size: 2.25rem;
			font-weight: 700;
			color: var(--brown-dark);
			line-height: 2.8rem;
		}
		&+p {
			font-size: 1rem;
			line-height: 1.76rem;
			margin-bottom: 40px;
			letter-spacing: 0.12px;
		}
	}
	
}

.marketers__item {
	margin-bottom: 33px;
	&:nth-child(2) {
		margin-bottom: 35px;
	}
	h3 {
		font-size: 1rem;
		line-height: 1.625rem;
	}
	p {
		letter-spacing: 0.12px;
	}
}
/* END Marketers section style */

/* START Footer style */

.footer {
	height: 350px;
	padding: 68px 0;
	border-top: 1px solid #D6E0EB;
	.container { 
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 140px;
	}

}



.footer__column {
	&:nth-child(2) {
		max-width: 123px;
	}
	&:nth-child(3) {
		max-width: 147px;
	}
	h3 {
		font-size: 1.25rem;
		line-height: 1.875rem;
		color: var(--brown-dark);
		margin-bottom: 30px;
	}
}

.footer__item {
	a {
		display: inline-block;
		color: var(--brown-dark);
		font-size: 1.125rem;
		line-height: 1.75rem;
		margin-bottom: 12px;
		&:hover {
			color: var(--orange);
		}
		&:active {
			color: var(--coral);
		}
	}
}

.footer__form-wrap {
	max-width: 340px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 22px;
	h3 {
		max-width: 280px;
		font-size: 1.25rem;
		line-height: 1.875rem;
		}
}

.footer__form {
	input {
		padding: 15px 10px;
		width: 100%;
		margin-bottom: 25px;
		&::placeholder {
			font-family: inherit;
			color: #BCD0E5;
			font-size: 1rem;
			letter-spacing: 1.4px;
		}
	}
	button {
		padding: 14px 18.5px;
	}
}