@import url("https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600&display=optional");

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

body {
	position: block;
	font-family: "Lexend Deca", sans-serif;
	margin: 0;
	padding: 0;
	height: fit-content;
	background-color: #04151B;
}


@media screen and (min-width: 1200px) {

	header {
		color: #fff;
		padding: 10px 0;
		text-align: center;
	}
	section {
		position: block;
		padding: 0;
	}

	footer {
		padding: 10px 0;
		text-align: center;
	}

	a,
	a:visited {
		color: #fff;
		text-decoration: none;
	}

	p, h1, h2, h3 {
		color: white;
	}

	.main {
		position: absolute;
		top: 0%;
		z-index: 2;
		width: 100%;
	}

	.bold-on-hover {
		font-size: larger;
		font-weight: 300;
		transition: font-weight 0.25s ease-in;
	}
	.bold-on-hover:hover {
		font-weight: 600;
		color: #ff8700;
	}

	.header-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		margin-inline: 8%;
	}

	.header-logo {
		margin-top: 10%;
		height: 50px;
	}

	.link-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		width: 50%;
	}

	.menu-item {
		background-color: white;
		border-radius: 10px;
		width: 300px;
		height: 350px;
	}

	.menu-item p {
		color: black;
	}

	.menu-image {
		margin-top: 15px;
		border-radius: 10px;
	}

	.main-title {
		font-size: 5em;
	}

	.main-description {
		font-size: 2.5em;
	}

	.title-div {
		padding: 70px 0;
		height: 100vh;
	}


	.hero-item.hero-image {
		background-image: url("/Images/Image-Hero.avif");
		background-position: 50% 50%;
		background-size: cover;
		animation: fadeInAnimation ease 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}


	.hero-item {
		background-position: 60% 40%;
	}
	.hero-item.hero-image {
		background-position: 60% 40%;
	}

	.w-container {
		margin-left: 10%;
		margin-right: 10%;
		margin-top: -10%;
		max-width: 940px;
	}

	.hero-block {
		position: relative;
		top: 110px;
		display: flex;
		min-height: 750px;
		align-items: center;
		justify-content: left;
	}

	.hero-content {
		width: 100%;
		max-width: 585px;
	}

	.special-heading {
		margin-top: 0px;
		font-size: 70px;
		line-height: 1.2;
		color: #ffffff;
	}

	.hero-description {
		margin-bottom: 60px;
		font-size: 20px;
		line-height: 0.9;
		letter-spacing: 0.05em;
		color: #ffffff;
	}

	.hero-description-inner-text {
		color: #ff8700;
	}

	.button-default {
		padding: 15px 39px 15px 38px;
		border-style: solid;
		border-width: 1px;
		border-color: #fff;
		background-color: transparent;
		transition: transform 300ms ease, background-color 300ms ease;
		font-size: 18px;
		line-height: 1.7;
	}

	.button-default:hover {
		border-color: #ff8700;
		background-color: #ff8700;
		transform: translate(0px, -3px);
	}





	.about-section.about-image {
		background-image: url("/Images/Couscous-About.avif");
		background-position: 50% 50%;
		background-size:cover;
	}

	.about-section {
		background-position: 60% 40%;
	}

	.about-block {
		top: 110px;
		display: flex;
		min-height: 750px;
		align-items: center;
		justify-content: right;
	}

	.about-content {
		width: 100%;
		max-width: 585px;
	}

	.about-container {
		position: relative;
		margin-left: 10%;
		margin-right: 10%;
	}

	.about-heading {
		margin-top: 0px;
		font-size: 70px;
		line-height: 1.2;
		color: #ffffff;
	}

	.about-description {
		margin-bottom: 60px;
		font-size: 30px;
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0.05em;
		color: #ffffff9c;
	}

}


@media screen and (max-width: 550px) {

	header {
		color: #fff;
		padding: 10px 0;
		text-align: center;
	}
	section {
		position: block;
		padding: 0;
	}

	footer {
		padding: 10px 0;
		text-align: center;
	}

	a,
	a:visited {
		color: #fff;
		text-decoration: none;
	}

	p, h1, h2, h3 {
		color: white;
	}

	.main {
		position: absolute;
		top: 0%;
		z-index: 2;
		width: 100%;
	}

	.bold-on-hover {
		font-size: larger;
		font-weight: 300;
		transition: font-weight 0.25s ease-in;
	}
	.bold-on-hover:hover {
		font-weight: 600;
		color: #ff8700;
	}

	.header-container {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.link-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		width: 50%;
	}


	.header-logo {
		margin-left: 50%;
		margin-top: 10%;
		height: 50px;
	}

	.menu-item {
		background-color: white;
		border-radius: 10px;
		width: 300px;
		height: 350px;
	}

	.menu-item p {
		color: black;
	}

	.menu-image {
		margin-top: 15px;
		border-radius: 10px;
	}

	.main-title {
		font-size: 5em;
	}

	.main-description {
		font-size: 2.5em;
	}

	.title-div {
		padding: 70px 0;
		height: 100vh;
	}

	.hero-item.hero-image {
		background-image: url("/Images/Image-Hero-phones.avif");
		background-position: 50% 50%;
		background-size: cover;
		animation: fadeInAnimation ease 1.5s;
		animation-iteration-count: 1;
		animation-fill-mode: forwards;
	}

	.hero-item {
		background-position: 60% 40%;
	}
	.hero-item.hero-image {
		background-position: 60% 40%;
	}

	.w-container {
		margin-left: 10%;
		margin-right: 10%;
		margin-top: -10%;
		max-width: 940px;
	}

	.hero-block {
		position: relative;
		top: 110px;
		display: flex;
		min-height: 750px;
		align-items: center;
		justify-content: left;
	}

	.hero-content {
		width: 100%;
		max-width: 585px;
	}

	.special-heading {
		margin-top: 0px;
		font-size: 70px;
		line-height: 1.2;
		color: #ffffff;
	}

	.hero-description {
		margin-bottom: 60px;
		font-size: 20px;
		line-height: 0.9;
		letter-spacing: 0.05em;
		color: #ffffff;
	}

	.hero-description-inner-text {
		color: #ff8700;
	}

	.button-default {
		padding: 15px 39px 15px 38px;
		border-style: solid;
		border-width: 1px;
		border-color: #fff;
		background-color: transparent;
		transition: transform 300ms ease, background-color 300ms ease;
		font-size: 18px;
		line-height: 1.7;
	}

	.button-default:hover {
		border-color: #ff8700;
		background-color: #ff8700;
		transform: translate(0px, -3px);
	}

	.about-section.about-image {
		background-image: url("/Images/Couscous-About-Phones.avif");
		background-position: 50% 50%;
		background-size:cover;
	}

	.about-section {
		background-position: 60% 40%;
	}

	.about-block {
		top: 110px;
		display: flex;
		min-height: 750px;
		align-items: center;
		justify-content: right;
	}

	.about-content {
		width: 100%;
		max-width: 585px;
	}

	.about-container {
		position: relative;
		margin-left: 10%;
		margin-right: 10%;
	}

	.about-heading {
		margin-top: 0px;
		font-size: 70px;
		line-height: 1.2;
		color: #ffffff;
	}

	.about-description {
		margin-bottom: 60px;
		font-size: 30px;
		font-weight: 400;
		line-height: 1.5;
		letter-spacing: 0.05em;
		color: #ffffff9c;
	}
	
}