/******************************************
	Desktop
*******************************************/

@media (max-width: 1120px) {
	.container {
		width: 90%;
	}
}



/******************************************
	Tablet
*******************************************/

@media (max-width: 992px) {
	.container {
		width: 90%;
	}
    section.header {
        height: 120px;
    }
    section.header .setting {
        display: none;
    }
	section.header .bar {
		position: relative;
		display: flex;
		width: 50px;
		height: 50px;
		background: var(--dropdown);
		justify-content: center;
		align-items: center;
		border-radius: 5px;
		box-shadow: 0 7px 12px var(--shadow);
	}
	section.header .bar i {
		font-size: 26px;
		cursor: pointer;
		color: var(--dark);
	}
	section.header .bar i:nth-child(2) {
		display: none;
	}
	.header-left .header-menu {
		width: 280px;
		background: var(--dropdown);
		position: absolute;
		left: 0;
		top: 100%;
		display: block;
		transform: translateX(-100%);
		border-bottom-right-radius: 10px;
		box-shadow: 0 7px 11px 0 var(--shadow);
		overflow: hidden;
	}
	.header-menu .theme {
		display: flex;
	}
	.header-left .header-menu ul {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 1rem 0.5rem;
	}
	section.header .header-left .header-menu li {
		width: 100%;
		padding: 1.2rem 1rem;
		border-radius: 5px;
		margin: 0;
		font-weight: 400;
	}
	.header-left .header-menu li:hover {
		background: var(--pure);
	}
	.header-left .header-menu li::after {
		display: none;
	}
	section.header .header-left .header-menu ul i {
		margin-right: 1rem;
		font-size: 20px;
		display: flex;
		align-items: center;
		color: var(--headerText);
		width: 30px;
	}
	section.header .header-menu .social {
		display: flex;
		padding: 1rem 2rem;
		margin: 1rem 0rem;
	}
	section.header .header-menu .social i {
		font-size: 26px;
	}
	.content {
		height: calc(100vh - 140px);
		overflow: hidden;
	}
	.introduce h1 {
		font-size: 8vw;
	}
	.introduce h4 {
		font-size: 3.5vw;
	}
	.content .content-img {
		width: 100%;
		bottom: -5%;
		right: -43%;
	}
	.content .content-wrapper img {
        opacity: 0.6;
    }
	.about-me {
		clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 70% 95%, 0% 100%);
		padding-bottom: 8rem;
	}
	.about-wrapper {
		grid-template-columns: 1fr;
		align-items: center;
		justify-content: center;
	}
	.about-me .left img {
		width: 50%;
	}
	section.about-me .right {
		padding: 0;
		justify-self: center;
		margin-top: 2rem;
		margin-left: 2rem;
	}
	section.contact .contact-wrapper {
		grid-template-columns: 1fr 1fr;
	}
	section.contact .right .input-wrapper {
		grid-template-columns: 1fr;
	}
    .services-top p {
        max-width: 70vw;
    }
    .services ul {
        grid-template-columns: 1fr 1fr;
        grid-gap: 4rem 8vw;
    }

}



/******************************************
	Landscap Mobile
*******************************************/

@media (max-width: 768px) {
	section.content .introduce {
		padding-top: 0rem;
	}
	.content {
		padding-top: 0;
	}
	/* .content .content-wrapper img {
		width: 420px;
		position: absolute;
		top: -115px;
		z-index: -10;
		right: 0;
	} */
	section.about-me .right {
		padding: 0;
	}
	section.about-me .right a {
		display: block;
		text-align: center;
		width: 100%;
	}
	section.portfolio .inner-bottom .wrapper {
		grid-template-columns: repeat(2,1fr);
	}
	section.contact .contact-wrapper {
		grid-template-columns: 1fr;
		grid-row-gap: 5rem;
	}
	/* section.contact .left {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	} */
	section.contact .left > div {
		/* display: flex;
		flex-direction: column;
		align-items: center; */
		margin-bottom: 3rem;
	}
	section.contact .left i {
		margin-right: 0;
	}
	section.contact .left h3 {
		margin: 1rem 0;
	}
	section.contact .right .input-wrapper {
		grid-template-columns: 1fr 1fr;
		grid-gap: 2rem;
	}

}



/******************************************
	Mobile
*******************************************/

@media (max-width: 580px) {


	section.header .header-left .logo img {
		width: 220px;
	}
	section.header .bar {
		width: 40px;
		height: 40px;
	}
	section.header .bar i {
		font-size: 22px;
	}
	.header-left .header-menu {
		width: 230px;
	}
	section.header .header-left .header-menu li {
		font-size: 12px;
	}
	section.header .header-left .header-menu ul i {
		font-size: 18px;
	}
	.header-text {
		font-size: 6vw;
	}
	.content {
		height: calc(100vh - 140px);
		overflow: hidden;
	}
	.introduce h1 {
		font-size: 10vw;
	}
	.introduce h4 {
		font-size: 4.5vw;
	}
	.content {
		padding-top: 0;
		height: 100vh;
	}
	.content .content-img {
		top: 0%;
		left: -15%;
		width: 850px;
	}
	.about-me {
		clip-path: none;
		padding: 3rem 0;
	}
	.about-me h1 {
		padding: 0;
		margin: 0 0 3rem 0;
	}
	.about-wrapper {
		grid-template-columns: 1fr;
	}
	.about-me .left img {
		width: 60%;
		margin-left: -1rem;
	}
	section.about-me .right {
		margin-top: 1rem;
		justify-self: center;
		margin-left: 0;
	}
	section.about-me .right p strong {
		width: 132px;
	}
	section.about-me .right .social {
		text-align: center;
	}
	.services ul {
		grid-template-columns: 1fr;
		grid-gap: 4rem 8vw;
	}
	section.education .wrapper {
		grid-template-columns: 1fr;
	}
	section.education .left {
		order: 1;
		margin-top: 3rem;
	}
	section.portfolio .inner-bottom .wrapper {
		grid-template-columns: repeat(1,1fr);
	}
	section.portfolio .inner-bottom .item .item-name {
		font-size: 3vw;
	}
	section.contact .right .input-wrapper {
		grid-template-columns: 1fr;
	}
	section.contact .right .input-wrapper div label {
		font-size: 14px;
	}
	footer .wrapper {
		flex-direction: column;
		align-items: center;
	}
	footer .social h3 {
		margin-top: 3rem;
		text-align: center;
	}
	footer .social a {
		margin: 0 10px;
	}

}

@media (max-width: 400px) {
	.header-text span::after {
		width: 45%;
	}

	section.contact .left {
		padding: 2rem 2rem;
	}
	
}