.presentation {
	margin-top: 0px;
	margin-bottom: 0px;
}

.presentation-text,
.services,
.portfolio,
.targets,
.promotion {
	padding: 10px;
	margin: 15px;
}

.presentation-text {
	background-color: var(--textColor);
	padding: 20px;
	margin: 0 auto;
	max-width: 80%;
	text-align: left;
}

#personal-photo {
	border-radius: 50%;
	width: clamp(250px, 40vw, 500px);
	height: clamp(250px, 40vw, 500px);
	display: block;
	margin: auto;
	object-fit: cover;
}

.presentation-text > p {
	color: var(--secondaryColor);
	font-size: clamp(1em, 2.5vw, 1.5em);
	font-style: italic;
	line-height: 1.5;
}

.presentation-text > p > strong {
	font-size: 0.9em;
	font-weight: bold;
	font-style: italic;
}

h1 {
	color: var(--mainColor);
	text-align: center;
	font-weight: bold;
}

hr {
	background-color: var(--textColor);
	margin: 0 auto;
	width: 10%;
	min-height: 5px;
	margin-bottom: 15px;
	border: none;
}

.services,
.targets {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	flex-direction: column;
}

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

.services > div,
.targets > div {
	padding: 10px;
	background-color: var(--textColor);
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-direction: column;
}
.services > div {
	height: 350px;
}
.targets > div {
	height: 235px;
}
.services > div > img,
.targets > div > img {
	width: 150px;
	height: 100px;
}

.services > div > p,
.targets > p {
	text-align: center;
}

h2 {
	text-align: center;
	color: var(--secondaryColor);
	font-size: clamp(1em, 2.5vw, 1.2em);
	font-weight: bold;
	margin-top: clamp(5px, 3vw, 10px);
}

.second-title {
	text-align: center;
	color: var(--secondaryColor);
	font-size: clamp(1rem, 5vw, 3rem);
	font-weight: bold;
	font-style: italic;
	margin-bottom: clamp(2vh, 5vw, 5vh);
}

li {
	list-style-type: disc;
	margin-left: 20px;
	margin-top: 15px;
	margin-bottom: 10px;
	color: var(--textColor);
}
h3 {
	text-align: center;
	color: var(--textColor);
	font-style: italic;
	font-size: clamp(1em, 2vw, 1.5em);
	font-weight: bold;
}

.special-title {
	text-align: center;
	color: var(--secondaryColor);
	font-family: "al-fresco", sans-serif;
	font-weight: 700;
	font-style: normal;
	font-size: clamp(2.5em, 5vw, 6em);
	margin-bottom: 10px;
}

#subtitle {
	text-align: center;
	color: var(--fourthColor);
	font-size: 1em;
	font-style: italic;
	margin-bottom: 10px;
}

.works-container {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	max-width: 50%;
	overflow: hidden;
}

.works-container > * {
	max-width: 300px;
	margin: 5px;
	min-height: 300px;
	padding: 10px;
	border: 1px solid var(--mainColor);
	border-radius: 10px;
	background-color: white;
	animation: translateCards 30s linear infinite;
}

@keyframes translateCards {
	0% {
		transform: translateX(0);
	}

	50% {
		transform: translateX(-1000px);
	}
}

#new-year-card {
	min-width: 50%;
	width: 1000px;
	margin: 5px auto;
	min-height: 200px;
	border: 1px solid var(--secondaryColor);
	border-radius: 10px;
	object-fit: fill;
}

.promotion {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.promotion > h1 {
	margin: 10px;
}

.promotion > p,
#note {
	color: var(--secondaryColor);
}

.promotion > p {
	margin: 10px;
	text-align: center;
	font-size: 1.1em;
}

strong {
	font-weight: bold;
	font-size: 1.4em;
}

#note {
	color: var(--thirdColor);
	font-size: 0.8em;
}
.horizontal-line {
	background-color: var(--secondaryColor);
	border: none;
	height: 2px;
	width: 95%;
}

.btn {
	height: 50px;
	width: auto;
	min-width: 135px;
	max-width: 200px;
	padding: 10px 20px;
	outline: none;
	border: none;
	font-style: italic;
	font-size: clamp(0.9em, 2.5vw, 1.1em);
	background-color: var(--mainColor);
	color: var(--textColor);
	text-align: center;
	cursor: pointer;
	margin-bottom: 50px;
	margin-top: 50px;
	border-radius: 10px;
	transition: opacity 0.3s ease-in-out;
}

.btn:hover {
	opacity: 0.8;
}

.center-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}
.btn-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

.open-book {
	display: block;
	margin: 0 auto;
	max-width: 70%;
	height: auto;
	margin-bottom: clamp(3vh, 5vw, 6vh);
}
.why-job {
	display: block;
	margin: clamp(20px, 5vw, 40px) auto clamp(5px, 2vw, 20px) auto;
	max-width: 10%;
	height: auto;
}

.graphic-icon {
	display: block;
	margin: clamp(20px, 5vw, 40px) auto clamp(5px, 2vw, 20px) auto;
	max-width: 15%;
	height: auto;
}

#presentation-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	width: auto;
	min-width: 240px;
	max-width: 300px;
	outline: none;
	border: none;
	font-style: italic;
	font-size: clamp(0.9em, 2.5vw, 1.1em);
	background-color: var(--secondaryColor);
	color: var(--textColor);
	text-align: center;
	cursor: pointer;
	margin-bottom: 50px;
	margin-top: 50px;
	border-radius: 10px;
	transition: opacity 0.3s ease-in-out;
}

#presentation-btn:hover {
	opacity: 0.8;
}
.center-btn {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media screen and (max-width: 1200px) {
	.services,
	.targets {
		flex-direction: column;
	}
}

.services > div,
.targets > div {
	max-width: 90%;
	margin: 10px;
}
@media screen and (max-width: 768px) {
	.presentation-text {
		max-width: 90%;
		padding: 15px;
	}

	.presentation-text > p {
		font-size: 1.2em;
	}
}

@media screen and (max-width: 480px) {
	.presentation-text {
		max-width: 95%;
		padding: 10px;
	}

	.presentation-text > p {
		font-size: 1em;
	}
}
@media screen and (max-width: 768px) {
	.special-title {
		font-size: 3em;
		margin-bottom: 5px;
	}
}

@media screen and (max-width: 480px) {
	.special-title {
		font-size: 2.5em;
		margin-bottom: 5px;
	}
}
@media screen and (max-width: 768px) {
	h2 {
		font-size: 1em;
		margin-top: 20px;
	}
}

@media screen and (max-width: 480px) {
	h2 {
		font-size: 0.8em;
		margin-top: 15px;
	}
}
@media screen and (max-width: 480px) {
	.why-job {
		min-width: 20%;
		margin-bottom: 0px;
	}
}
@media screen and (max-width: 768px) {
	.why-job {
		min-width: 20%;
		margin-bottom: 0px;
	}
}
@media screen and (max-width: 480px) {
	.graphic-icon {
		min-width: 35%;
		margin-bottom: 0px;
	}
}
@media screen and (max-width: 768px) {
	.graphic-icon {
		min-width: 35%;
		margin-bottom: 0px;
	}
}
@media screen and (max-width: 480px) {
	.open-book {
		max-width: 80%;
	}
}
@media (max-width: 768px) {
	.horizontal-line {
		height: 1.5px;
	}
}

@media (max-width: 480px) {
	.horizontal-line {
		height: 0.5px;
	}
}
@media (max-width: 480px) {
	#presentation-btn {
		min-width: 200px;
	}
}