:root {
	--text: #222;
	--white: #fff;
	--orange: #FE4E03;
	--dark-orange: #a93301;
	--bg: #F7F7F7;
}

body {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	line-height: 120%;
	font-weight: 400;
	color: var(--text);
}

.container {
	max-width: 1440px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-right: 48px;
	padding-left: 48px;
}

.btn {
	padding: 16px 32px;
	font-weight: 500;
	font-size: 18px;
	color: var(--white);
	text-align: center;
	background-color: var(--orange);
	border-radius: 6px;
}
.btn:hover, .btn:active {
	background-color: var(--dark-orange);
}

.btn.white {
	color: var(--text);
	background-color: var(--white);
}
.btn.white:hover, .btn.white:active {
	color: var(--white);
	background-color: var(--orange);
}

.small-btn {
	padding: 14px 24px;
	font-weight: 500;
	color: var(--white);
	background-color: var(--orange);
	border-radius: 6px;
}
.small-btn:hover, .small-btn:active {
	background-color: var(--dark-orange);
}

.h1 {
	font-size: 76px;
	font-weight: 600;
	line-height: 110%;
}

.h2 {
	font-size: 56px;
	font-weight: 600;
	line-height: 110%;
}

.heading {
	display: flex;
	justify-content: center;
	text-align: center;
}

/* header and footer */
.header {
	padding: 12px 0;
	background-color: var(--white);
}

.navbar, .footer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.navbar__logo, .footer__logo {
	display: flex;
	align-items: center;
	gap: 12px;
}

.navbar__logo-icon, .footer__logo-icon {
	width: 70px;
	height: 70px;
	object-fit: contain;
	object-position: center;
}

.navbar__logo-span, .footer__logo-span {
	font-weight: 500;
}

.navbar__socials, .footer__socials {
	display: flex;
	align-items: center;
	gap: 24px;
}

.navbar__socials-link, .footer__socials-link {
	font-size: 18px;
	font-weight: 600;
}
.navbar__socials-link:hover, .footer__socials-link:hover {
	color: var(--orange);
}

.footer {
	padding: 12px 0;
	margin-top: 100px;
	border-top: 1px solid rgba(0, 0, 0, .1);
}

.footer__copyright-text {
	font-size: 14px;
	opacity: .7;
	text-align: center;
}

.footer__socials .navbar__socials-link {
	display: flex;
	align-items: center;
	gap: 8px;
}
.footer__socials .navbar__socials-link::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.footer__socials .navbar__socials-link.phone::before {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9 3C9.17928 2.99995 9.35528 3.0481 9.50957 3.13941C9.66386 3.23071 9.79076 3.36182 9.877 3.519L9.928 3.629L11.928 8.629C12.0086 8.83016 12.0216 9.05204 11.9651 9.26125C11.9087 9.47045 11.7858 9.65566 11.615 9.789L11.515 9.857L9.841 10.861L9.904 10.964C10.7008 12.229 11.771 13.2992 13.036 14.096L13.138 14.158L14.143 12.486C14.2544 12.3001 14.4231 12.1554 14.6239 12.0737C14.8246 11.992 15.0464 11.9777 15.256 12.033L15.371 12.072L20.371 14.072C20.5375 14.1384 20.6831 14.2484 20.7925 14.3903C20.9019 14.5323 20.9712 14.7011 20.993 14.879L21 15V19C21 20.657 19.657 22 17.94 21.998C9.361 21.477 2.522 14.638 2 6C1.99996 5.23479 2.29233 4.49849 2.81728 3.94174C3.34224 3.38499 4.06011 3.04989 4.824 3.005L5 3H9Z' fill='%23FE4E03'/%3e%3c/svg%3e ");
}
.footer__socials .navbar__socials-link.mail::before {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M22 7.53516V17.0002C22 17.7654 21.7077 18.5017 21.1827 19.0584C20.6578 19.6152 19.9399 19.9503 19.176 19.9952L19 20.0002H5C4.23479 20.0002 3.49849 19.7078 2.94174 19.1829C2.38499 18.6579 2.04989 17.9401 2.005 17.1762L2 17.0002V7.53516L11.445 13.8322L11.561 13.8982C11.6977 13.965 11.8478 13.9997 12 13.9997C12.1522 13.9997 12.3023 13.965 12.439 13.8982L12.555 13.8322L22 7.53516Z' fill='%23FE4E03'/%3e%3cpath d='M19.0003 4C20.0803 4 21.0273 4.57 21.5553 5.427L12.0003 11.797L2.44531 5.427C2.6961 5.01982 3.0406 4.6785 3.45008 4.43149C3.85957 4.18448 4.32217 4.03894 4.79931 4.007L5.00031 4H19.0003Z' fill='%23FE4E03'/%3e%3c/svg%3e ");
}

/* hero */

.hero {
	position: relative;
	padding-top: 84px;
	padding-bottom: 84px;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
}
.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .1) 100%);
}

.hero__content {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 48px;
	color: var(--white);
}

.hero__heading, .hero__info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.hero__heading-text {
	font-size: 24px;
	line-height: 120%;
}

.hero__info-link {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 24px;
	font-weight: 500;
}	
.hero__info-link:hover {
	color: var(--orange);
}
.hero__info-link::before {
	content: '';
	display: inline-block;
	width: 24px;
	height: 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
.hero__info-link.phone::before {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9 3C9.17928 2.99995 9.35528 3.0481 9.50957 3.13941C9.66386 3.23071 9.79077 3.36182 9.877 3.519L9.928 3.629L11.928 8.629C12.0086 8.83016 12.0216 9.05204 11.9651 9.26125C11.9087 9.47045 11.7858 9.65566 11.615 9.789L11.515 9.857L9.841 10.861L9.904 10.964C10.7008 12.229 11.771 13.2992 13.036 14.096L13.138 14.158L14.143 12.486C14.2544 12.3001 14.4231 12.1554 14.6239 12.0737C14.8246 11.992 15.0464 11.9777 15.256 12.033L15.371 12.072L20.371 14.072C20.5375 14.1384 20.6831 14.2484 20.7925 14.3903C20.9019 14.5323 20.9712 14.7011 20.993 14.879L21 15V19C21 20.657 19.657 22 17.94 21.998C9.361 21.477 2.522 14.638 2 6C1.99996 5.23479 2.29233 4.49849 2.81728 3.94174C3.34224 3.38499 4.06011 3.04989 4.824 3.005L5 3H9Z' fill='white'/%3e%3c/svg%3e ");
}
.hero__info-link.mail::before {
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M22 7.53516V17.0002C22 17.7654 21.7077 18.5017 21.1827 19.0584C20.6578 19.6152 19.9399 19.9503 19.176 19.9952L19 20.0002H5C4.23479 20.0002 3.49849 19.7078 2.94174 19.1829C2.38499 18.6579 2.04989 17.94 2.005 17.1762L2 17.0002V7.53516L11.445 13.8322L11.561 13.8982C11.6977 13.965 11.8478 13.9997 12 13.9997C12.1522 13.9997 12.3023 13.965 12.439 13.8982L12.555 13.8322L22 7.53516Z' fill='white'/%3e%3cpath d='M19.0003 4C20.0803 4 21.0273 4.57 21.5553 5.427L12.0003 11.797L2.44531 5.427C2.6961 5.01982 3.0406 4.6785 3.45008 4.43149C3.85957 4.18448 4.32217 4.03894 4.79931 4.007L5.00031 4H19.0003Z' fill='white'/%3e%3c/svg%3e ");
}

.hero__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* about */

.about {
	padding-top: 100px;
}

.about__content {
	display: grid;
	grid-template-columns: .5fr 1fr;
	gap: 48px;
}

.about__info {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.about__info-text {
	font-size: 18px;
	line-height: 130%;
	opacity: .8;
}

.about__image {
	background-color: var(--bg);
	background-size: 140px;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 12px;
}

/* preem */

.preem {
	margin-top: 100px;
	padding-top: 64px;
	padding-bottom: 64px;
	background-color: var(--bg);
}

.preem__content {
	margin-top: 48px;
}

.preem__list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: 1fr;
	grid-auto-rows: 1fr;
	gap: 20px;
}

.preem__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 24px;
	background-color: var(--white);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.preem__item-icon {
	display: inline-block;
	width: 50px;
	height: 50px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.preem__item-text {
	font-size: 18px;
	font-weight: 600;
	line-height: 120%;
	text-align: center;
}

/* products */

.products {
	padding-top: 100px;
}

.products__content {
	margin-top: 48px;
}

.products__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.products__item {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 8px;
	background-color: var(--white);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}

.products__item-img {
	width: 100%;
	height: 250px;
	object-fit: cover;
	object-position: center;
	border-radius: 8px;
}

.products__item-info {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 12px;
}

.products__item-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 120%;
}

.products__item-text {
	opacity: .8;
}

@media screen and (max-width: 1280px) {
	.container {
		padding-right: 26px;
    	padding-left: 26px;
	}
}

@media screen and (max-width: 991px) {
	.container {
		padding-right: 16px;
    	padding-left: 16px;
	}
	
	.h1 {
		font-size: 56px;
	}
	
	.h2 {
		font-size: 36px;
	}
	
	/* hero */
	.hero__heading-text {
		font-size: 20px;
	}
	
	/* about */
	.about {
		padding-top: 80px;
	}
	
	.about__content {
		grid-template-columns: .3fr 1fr;
		gap: 32px;
	}
	
	/* preem */
	.preem {
		margin-top: 80px;
		padding-top: 48px;
		padding-bottom: 48px;
	}
	
	.preem__list {
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* products */
	.products {
		padding-top: 80px;
	}
	
	.products__item-img {
		height: 180px;
	}
	
	/* footer */
	.footer {
		margin-top: 80px;
	}
}

@media screen and (max-width: 767px) {
	.h1 {
		font-size: 46px;
	}
	
	.h2 {
		font-size: 28px;
	}
	
	.small-btn {
		font-size: 14px;
	}
	
	/* header */
	.navbar__socials {
		gap: 16px;	
	}
	
	.navbar__socials .navbar__socials-link {
		width: 47px;
		height: 47px;
	}
	.navbar__socials-link span {
		display: none;
	}	
	.navbar__socials-link i {
		display: inline-block;
		width: 47px;
		height: 47px;
		background-color: var(--orange);
		background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M9 3C9.17928 2.99995 9.35528 3.0481 9.50957 3.13941C9.66386 3.23071 9.79077 3.36182 9.877 3.519L9.928 3.629L11.928 8.629C12.0086 8.83016 12.0216 9.05204 11.9651 9.26125C11.9087 9.47045 11.7858 9.65566 11.615 9.789L11.515 9.857L9.841 10.861L9.904 10.964C10.7008 12.229 11.771 13.2992 13.036 14.096L13.138 14.158L14.143 12.486C14.2544 12.3001 14.4231 12.1554 14.6239 12.0737C14.8246 11.992 15.0464 11.9777 15.256 12.033L15.371 12.072L20.371 14.072C20.5375 14.1384 20.6831 14.2484 20.7925 14.3903C20.9019 14.5323 20.9712 14.7011 20.993 14.879L21 15V19C21 20.657 19.657 22 17.94 21.998C9.361 21.477 2.522 14.638 2 6C1.99996 5.23479 2.29233 4.49849 2.81728 3.94174C3.34224 3.38499 4.06011 3.04989 4.824 3.005L5 3H9Z' fill='white'/%3e%3c/svg%3e ");
		background-size: 30px;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 900px;
	} 
	
	.navbar__logo-span {
		display: none;	
	}
	
	/* hero */
	.hero {
		padding-top: 64px;
		padding-bottom: 64px;
	}
	
	.hero__info-link {
		font-size: 20px;
	}
	
	.hero__actions {
		align-items: flex-start;
		flex-direction: column;
	}
	
	/* about */
	.about {
        padding-top: 60px;
    }
	
	.about__content {
		display: flex;
		flex-direction: column-reverse;
	}
	
	.about__image {
		height: 250px;
	}
	
	/* preem */
	.preem {
        margin-top: 60px;
        padding-top: 32px;
        padding-bottom: 32px;
    }
	
	.preem__item {
		gap: 24px;
	}
	
	/* products */
	.products {
        padding-top: 60px;
    }
	
	.products__list {
		grid-template-columns: 1fr;
	}
	
	.products__item-title {
		font-size: 20px;
	}
	
	/* footer */
	.footer {
		margin-top: 60px;
	}
	
	.footer__top {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	} 
	
	.footer__bottom {
		margin-top: 16px;
	}
}

@media screen and (max-width: 479px) {
	.h1 {
        font-size: 36px;
    }
	
	.navbar__logo-icon, .footer__logo-icon {
		width: 50px;
		height: 50px;
	}
	
	.hero__heading-text {
        font-size: 18px;
    }
	
	.hero__info-link::before {
		width: 18px;
    	height: 18px;
	}
	
	.hero__actions {
		align-items: stretch;
	}
	
	.about__image {
        height: 150px;
		background-size: 100px;
    }
	
	.about__info-text {
		font-size: 16px;
	}
	
	.preem__item {
        padding: 16px;
    }
	
	.preem__item-text {
		font-size: 16px;
	}
	
	.footer__socials {
		flex-direction: column;
	}
}