/* fonts and variables */

 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap');
  
:root {
	--clr-primary: #19c8fa;
	--clr-secondary: #777;
	--gradient: rgba(0,0,0,.7),rgba(0,0,0,.7)
}

/* resets and global styles */

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

h1,
h2,
h3 {
	line-height: 1.5
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden
}

body {
	font-family: "Open Sans", sans-serif;
	line-height: 2 
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}

.flow-content > * + * {
	margin-top: 1.5rem
}

.flow-content--l > * + * {
	margin-top: 2.5rem
}

.flow-content--medium > * + * {
	margin-top: 1rem
}

.grid {
	display: grid
}

.grid--1x2 {
	grid-template-columns: repeat(2, minmax(auto, 1fr))
}

.grid--1x4 {
	grid-template-columns: repeat(4, minmax(auto, 1fr))
}

.btn {
	display: inline-block;
	border: 0;
	padding: .5em 1.5em
}

.btn--dark {
	color: #fff;
	background: #000;
	font-weight: 700;
}

.btn--light {
	border: 1px solid #19c8fa;
	background: #fff ;
	padding: .5em 1.5em;
}

.btn--accent {
	background: var(--clr-primary);
	color: #fff;
	position: relative;
	z-index: 1
}

.section-title,
.section-sub-title {
	text-align: center;
}
.section-title {
	font-size: 3rem;
	position: relative;
	margin-bottom: 2rem;
}

.section-sub-title {
	color: var(--clr-secondary);
	max-width: 550px;
	margin: 0 auto;
}

.section-title::before {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	height: 2px;
	background-color: #333;
	bottom: -.1em;
	width: 120px;
}

.section-title::after {	
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #333;
	bottom: -12px;
	background-color: white;
}

/* hero */


.hero {
	display: flex;
	justify-content: center;
	flex-direction: column;
	height: 100vh;
	background-image: linear-gradient(var(--gradient)), url('https://elzerowebschool.github.io/HTML_And_CSS_Template_Two/images/landing.jpg');
	background-size: cover;
	background-position: center;
	color: #fff
}

.hero__nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 2em 4.5em;
}

.mobile-nav {
	display: none;
}

.hero .link {
	color: inherit
}

.hero .link1 {
	color: var(--clr-primary)
}

.hero .link6 {
	position: relative
}

.hero .link6::after {
	content: '';
	display: inline-block;
	width: 2px;
	height: 40px;
	background: #fff;
	position: absolute;
	top: -.5rem;
	right: -5rem
}

.hero__nav-list {
	display: flex;
	gap: 25px;
	align-items: center;
}

.search-icon {
	margin-left: 5rem;
	color: #fff
}


.hero__line {
	margin: 0 auto;
	width: 90%;
	position: absolute;
	top: 5.5rem
}

.hero__content {
  max-width: 780px;
  width: 50%;
  background: #0f748fb3;
  padding: 2em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__desc {
	max-width: 450px;
}

.fa-angle-left,
.fa-angle-right {
	position: absolute;
	top: 50%;
	font-size: 2rem;
}

.fa-angle-left {
	top: 50%;
	left: 2.5rem 

}

.fa-angle-right {
	top: 50%;
	right: 2.5rem
}

.hero__ball-icons {
	width: 100%;
	display: flex;
	gap: 15px;
	align-items: flex-end;
	justify-content: center;
	position: absolute;
	bottom: 2em;

}

.ball {
	width: 22px;
	height: 22px;
	background: #000;
	border-radius: 50%;
}

.ball:nth-child(2) {
	background: var(--clr-primary);
}

.ball:nth-child(2n+1) {
	background: #222;
	border: 1px solid #fff; 
}

@media (max-width: 1040px) {
	.hero__content {
	padding: 0;
}
}

@media (max-width: 910px) {
	html {
	font-size: 70%;
}

	.hero .link6::after {
	height: 25px
}
}

@media (max-width: 750px) {
	.desktop-nav {
	display: none;
	background: #222;
	position: absolute;
	right: 0;
	top: 2.5em;
	letter-spacing: 2px;
	padding: 0
}
	.mobile-nav {
	display: block;
	position: relative
}
	.mobile-nav:hover .desktop-nav {
	display: block;
}

.fa-bars:hover,
.fa-bars:focus {
	cursor: pointer
}

.nav-item {
	text-align: center;
	padding: 1em 3em;
	font-family: sans-serif;
	font-weight: 400;
}

.nav-item {
	transition: 250ms transform
}

.nav-item:hover,
.nav-item:focus {
	transform: translateX(-5px)
}

.search-icon,
.hero .link6::after {
display: none;
}


}

/* services */


.services {
	padding: 3em 6em;
}


.services__grid-wrapper {
	gap: 50px;
	place-items: center
}
.card__flex-wrapper {
	display: flex;
	align-items: center;
	gap: 25px
}

.card__desc {
	max-width: 450px;
	color: var(--clr-secondary)
}

.card__title {
	color: var(--clr-primary)
}

@media (max-width: 750px) {
	.services {
	padding: 1.5em 3em;
}
	.hero__line {
		display: none
}

	.card {
	margin: 0;
	text-align: center;
}
	.card__desc {
	margin-bottom: 1rem
}
	.card__flex-wrapper {
	flex-direction: column;
}
	.services__grid-wrapper {
		grid-template-columns: minmax(auto, 1fr)
	}

}


/* design */

.design {
	background-image: linear-gradient(var(--gradient)),url('https://elzerowebschool.github.io/HTML_And_CSS_Template_Two/images/design-features.jpg');
	background-size: cover;
	background-position: center; 
	padding: 6em 0;
	color: #fff;
	position: relative;
	overflow: hidden
}

.design__img {
	position: absolute;
	bottom: -100px;
}

.design__card {
	background: #0f748fb3;
	padding: 2rem 4rem;
	grid-column: 2/3
}

.design__content {
	font-size: 1.5rem;
	display: flex;
	align-items: center;
	gap: 25px
}

.design__title {
	font-size: 2.5rem;
}

@media(max-width: 750px) {
	.design {
		height: 100vh;
	}
	.design__wrapper {
		grid-template-columns: minmax(auto,1fr);
	}
	.design__card {
		grid-column: 1/-1;
		padding: 1.5em 3em;
	}
	.design__img {
		display: none;
	}
}

/* portfolio */

.portoflio {
	padding: 3em 0;
	position: relative
}

.portfolio__sub-title {
	margin-bottom: 5rem
}

.portfolio__list {
	display: flex;
	justify-content: center;
	margin-bottom: 5em;
	gap: 25px;

}

.portfolio__list-item {
	padding: .25em .5em;
}
.portfolio__list-item:first-child {
	background: var(--clr-primary);
	color: #fff
}

.portfolio__img-gallary {
	height: 100%;
	place-content: center;
	gap: 10px
}


.portfolio__img img {
	width: 100%;
	transition: 500ms;
}

.portfolio__img:hover img,
.portfolio__img:focus img {
	transform: scale(1.1) rotate(3deg);
}

.portfolio__img:hover .caption,
.portfolio__img:focus .caption{
	bottom: 0;
}

.caption {
	transition: .3s;
	width: 100%;
	padding: 20px;
	background-color: white;
	position: absolute;
	left: 0;
	bottom: -100%;
}

.portfolio__img {
	position: relative;
	overflow: hidden
}

.caption__desc {
	color: var(--clr-primary);
	font-weight: 700;
}

.portfolio__btn {
	display: block;
	width: fit-content;
	margin: 2.5rem auto
}

@media(max-width: 910px) {
	.portoflio {
	padding: 2.5em 0;
}

	.caption {
	padding: 10px
}
}

@media (max-width: 750px) {
	.portfolio__img-gallary {
	display: block;
}

	.portfolio__list {
	margin-bottom: 6em
}
	.caption {
	padding: 20px
}

}

/* video */


.video {
	padding: 5em 0;
	overflow-x: hidden;
	position: relative;
	max-width: 100%;
}
video {
	max-width: 100%;
	border-bottom: 2px solid #aaa
}

.video__txt {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	background: #0f748fb3;
	padding: 5em;
	width: 100%;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.video__title {
	font-size: 2rem;
}

.video__sub-title {
	font-size: 1.25rem;
}

/* about */

.about {
	width: 100%;
	overflow: hidden;
}

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

.about__img {
	display: block;
	width: 750px;
	max-width: 100%;
	margin: 0 auto;
	position: relative;
	bottom: -125px
}

@media (max-width: 450px) {
	.about__img {
		bottom: -70px
	}

}



/* achivements */


.achievements {
	background-image: linear-gradient(var(--gradient)) , url('https://elzerowebschool.github.io/HTML_And_CSS_Template_Two/images/stats.png');
	background-size: cover;
	background-position: center;
	padding: 10em 5em;
}
.card-wrapper {
	display: flex;
	justify-content: center;
	text-align: center;
}

.achievements__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #0f748fb3;
	gap: 25px;
	padding: 4em;
	color: #fff
}

.a__icon {
	background: #000;
	border-radius: 50%;
	font-size: 2rem;
	color: #fff;
	padding: .6em;
}

.number {
	font-size: 3rem;
	font-weight: 900;
}

.achievements__desc {
	font-weight: 700;
	font-size: 1.125rem;
}

@media (max-width: 650px) {

	.achievements {
		padding:3em 1.5em;
	}
	.card-wrapper {
		flex-direction: column;
	}
}

/* testimonials */

.testimonials {
	width: 100%;
	padding: 3em;
	position: relative
}

.testimonial__line {
	color: lightgray; 
	width: 100%;
}

.testimonial__line-2 {
	margin-bottom: 5em;
}

.testimonials__wrapper {
	display: flex;
	flex-direction: column;
	gap: 25px
}


.testimonial__content {
	position: relative;
	display: flex;
	max-width: 650px;
	align-items: center;
	gap: 25px;
}

.testimonials__title {
	font-size: 1.5rem;
	text-align: center;
	margin-bottom: 2rem;
}

.testimonials__sub-title {
	font-size: 1.125rem;
	color: var(--clr-secondary);
	text-align: center;
	max-width: 550px;
	margin: 0 auto;
}
.testimonial__desc {
	max-width: 100%;
}

.candidate-img {
	border-radius: 50%;
	width: 150px
}

.candidate__name {
	color: var(--clr-secondary);
	text-align: end;
	width: 100%;
	font-weight: 700;
}


.testimonial__balls {
	display: flex;
	justify-content: center;
	gap: 25px
}


.testimonials .ball:nth-child(2n+1) {
	background: #fff ;
	border: 1px solid #aaa;
}

/* skills */

.skills {
	padding: 3em 0;
	width: 100%;
}

.skills__title {
	text-align: center;
	font-size: 1.5rem;
	margin-bottom: 1.5rem;
}

.skills__sub-title {
	color: var(--clr-secondary);
	font-size: 1.125rem;
}

.skill__loader {
	width: 75%;
	height: 30px;
	background: lightgray;
	margin-top: .5rem;
}

.skill__accent {
	background: var(--clr-primary);
	width: 90%;
	height: 30px;
}

.skill__title {
	font-size: 1.125rem;
}

.html--accent {
	width: 85%
}

.js--accent {
	width: 80%
}
.php--accent {
	width: 90%
}
.html--accent {
	width: 85%
}

.testimonials-skills-wrapper {
	display: flex;
	gap: 15px
}

@media (max-width: 750px) {
.testimonials-skills-wrapper {
	flex-direction: column;
	gap: 50px
}


.skills {
	padding: 0 1.5em;
	margin-bottom: 3rem;
}
.skill__loader {
	width: 90%
}
}


@media (max-width: 450px) {
	.testimonial__content {
		gap: 10px;
	}

	.testimonials {
		padding: 3em 1.5em;
	}

	.candidate-img{
		margin-bottom: 1em
	}

	.testimonial__balls {
		margin: 0;
		position: absolute;
		left: 50%;
		bottom:  0;
		transform: translateX(-50%)
	}

	.skills {
		padding: 3em 1.5em;
	}
}

/* quote */

.quote {
	background-image: linear-gradient(var(--gradient)),  url('https://elzerowebschool.github.io/HTML_And_CSS_Template_Two/images/quote.jpg');
	background-size: cover;
	text-align: center;
	color: #fff;
	padding: 1em;
	font-size: 2.5rem;
	line-height: 1.3
}

.quote__author {
	font-size: 1.5rem;
	margin-top: .5em;
}

.quote__txt::before {
	content: '"';
}

.quote__txt::after {
	content: '"'
}


/* pricing */


.pricing {
	padding: 3em; 
}

.pricing__sub-title {
	margin-bottom: 2.5rem;
}
.plan__header {
	width: fit-content
}

.pricing__plan {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 25px
}

.plan__title {
	text-align: center;
	font-size: 1.7rem;
}
.pricing__desc {
	font-size: 3.5rem;
	font-weight: 700;
	padding: .5em;
	position: relative;
}

.pricing__desc::before {
		content: '$';
		position: absolute;
		top: 0;
		left: 0px;
		font-size: 1.5rem;
}

.pricing__desc::after {
		content: '/Mo';
		font-size: 1.5rem;
}


.pricing__list {
	width: fit-content;
	border-top: 2px solid #aaa;
	border-bottom: 2px solid #aaa;
}
.pricing__item {
	font-size: 1.3rem;
	padding: .5em 1.5em;
	position: relative
}

.pricing__item:not(:last-child)::after {
	content: '';
	width: 140px;
	height: 1px;
	background: #19c8fa;
	position: absolute;
	left: 50%;
	width: 100%;
	transform: translateX(-50%);
	bottom: 0;
}


.pricing__plan-wrapper {
	display: flex;
	justify-content: center;
	gap: 50px;
}

@media (max-width: 650px) {
	.pricing__plan-wrapper {
		flex-direction: column;
		align-items: center;
	}
}

/* subscribe */

.subscribe {
	color: #fff;
	background-image: linear-gradient(var(--gradient)),url('https://elzerowebschool.github.io/HTML_And_CSS_Template_Two/images/subscribe.jpg');
	background-size: cover;
	background-position: center;
	padding: 3em 1.5em;
}

.subscribe__content {
	display: flex;
	justify-content: space-around;
	gap: 25px
}

.subscribe__desc {
	max-width: 650px
}

.subscribe__input-wrapper {
	display: flex;
	border: 1px solid silver;
	padding-left: 1.5em
}

.subscribe .fa-envelope {
	align-self: center;
}
.subscribe input {
	padding: .5em 1em;
	border: 0;
	font-family: inherit;
	background: 0;
	flex: 1;
	width: 100%;
	color: #fff
}

.subscribe input::placeholder {
	font-weight: 600;
	color: #aaa
}

.subscribe input:focus {
	outline: none 
}


.subscribe__btn {
	font-size: 1.125rem ;
	font-weight: 700;
}

@media (max-width: 650px) {
	.subscribe__input-wrapper  {
		width: 85%
	}

	.subscribe__content {
		flex-direction: column;
	}

	j
}

.contact {
	padding: 6em 3em;
}

.contact__form {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%
}

.contact input,
.contact textarea {
	padding: 1.5em;
	border: 1px solid #ccc;
}

.contact input::placeholder,
.contact textarea::placeholder {
	font-size: 1.125rem;
}

.contact textarea {
	resize:  vertical;
	min-height: 185px;
	max-height: 230px;
}

.contact__sub-title {
	margin-bottom: 3rem
}


.contact__content-wrapper {
	place-items: center
}

.location__title {
	margin-bottom: 1.5rem;
}

.location__desc {
	color: var(--clr-secondary);
	font-size: 1.125rem;
}

.location__desc3 {
	margin-bottom: 2.5rem
}

.contact__btn {
	align-self: end;
	padding: 1em 1.5em;
	font-size: 1.125rem;
	margin-top: .5em;
}

@media (max-width: 650px) {
	.contact__content-wrapper {
		grid-template-columns: minmax(auto, 1fr)
	}

	.contact__btn {
		margin: 0;
		margin-bottom: 2em;
	}
}

/* footer */

.footer {
	background-image: linear-gradient(var(--gradient)), url('https://elzerowebschool.github.io/HTML_And_CSS_Template_Two/images/subscribe.jpg');
	background-size: cover;
	background-position: center ;
	color: #fff;
	padding: 3em 1.5em;
}

.footer__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 15px;
	
}

.line-separator {
	color: #fff;
	width: 220px;
	max-width: 100%;
	margin: 1em 0;
}

.socials {
	display: flex;
	gap: 35px;
	margin-bottom: 2.5rem
}

.footer__desc {
	font-size: 1.125rem;
}

.special-word {
	color: var(--clr-primary);
	font-weight: 900;
}