/*====global utilities===*/
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
}
html{
	font-size: 62.5%;
}
body{
	scroll-behavior: smooth;
}
/*color theme swatch in hex*/
:root{
	--white-primary: #ffffff;
	--white3: #f3f3f3;
	--white6: #f6f6f6;
	--white-e1: #e1e1e1;
	--black: #121111;
	--red-primary: #fe320a;
	--red-secondary: #ff0000;
}

/*===fixed class===*/
h2{
	font-size: 3rem;
	font-weight: 200;
	color: #000;
	text-transform: uppercase;
	text-align: center;
}
p{
	font-size: 2rem;
	font-weight: 200;
	color: var(--black);
}
img{
	width: 100%;
	height: 100%;
}
.pad-1{
	padding-left: 15%;
	padding-right: 15%;
}
.pad-2{
	padding-top: 8rem;
	padding-bottom: 8rem;
}

.join{
	color: var(--red-secondary);
}
.btn{
	font-size: 2.5rem;
	background: var(--red-secondary);
	color: var(--white-primary);
	border: none;
	padding: 1rem 2rem;
	border-radius: .5rem;
	cursor: pointer;
	text-transform: capitalize;
}
.line{
	width: 2rem;
	height: 2rem;
	background-color: var(--red-secondary);
	border-radius: 50%;
	margin: 0 auto;
	position: relative;
}
.line::after{
	content: "";
	width: 9rem;
	height: .2rem;
	background: var(--red-secondary);
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
}
.line::before{
	content: "";
	width: 9rem;
	height: .2rem;
	background: var(--red-secondary);
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
}


/*===header===*/
header{
	width: 100%;
	min-heigh: 70rem;
	background: url("../../img/bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;

}
header nav{
	display: flex;
	justify-content: space-between;
	background: rgb(0, 0, 0, 0.4);
	padding: 1rem 0;
}
nav ul{
	display: flex;
	justify-content: center;
	/*width: 60%;*/
	align-items: center;
}
nav ul li{
	padding: 0 1.5rem;
}
nav ul li a{
	font-size: 1.5rem;
	text-transform: uppercase;
	color: var(--white-primary);
	font-weight: 200;
}
header .banner{
	text-align: center;
	padding-top: 18rem;
	padding-bottom: 18rem;
}
.banner h1{
	font-size: 6rem;
	color: var(--white-primary);
	font-weight: 200;
	margin-bottom: 6rem;
}
h1 span{
	color: var(--red-primary);
}
.banner p{
	color: var(--white-primary);
	text-align: justify;
}
.banner button{
	background: var(--red-primary);
	margin-top: 8rem;
}

/*===about us===*/
.about{
	width: 100%;
	height: auto;
	background: var(--white6);
}
.about .profile{
	margin-top: 5rem;
	display: flex;
	gap: 2rem;
	justify-content: flex-start;
	width: 100%;
}
.profile .profile-img{
	height: 45rem;
	flex-basis: 30%;
	position: relative;
}
.profile .profile-icon{
	width: 100%;
	height: 90px;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgb(0, 0, 0, 0.5);
	text-align: center;
}
.profile-icon small{
	display: block;
	font-size: 2rem;
	color: var(--white-primary);
	margin: 1rem 0;
}
.profile-icon svg{
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--black);
    color: var(--white-primary);
    padding: 0.8rem;
    margin: 0 .5rem;
    cursor: pointer;
}
.profile-icon svg:hover{
	background: var(--white-primary);
	color: var(--black);
}

.profile-text{
	flex-basis: 70%;
}
.profile-text h3{
	font-size: 3rem;
}
.profile-text p{
	margin: 3rem 0;
}
/*about more*/
.about-more{
	width: 100%;
	height: auto;
	background: url("../../img/banner1.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	text-align: center;
	object-fit: cover;
	position: relative;
}
.about-more h3{
	font-size: 4rem;
	color: var(--white-primary);
	text-transform: uppercase;
}
.about-more svg{
	width: 7rem;
	height: 7rem;
	border-radius: 1.2rem;
	border: 1px solid var(--white-primary);
	color: var(--white-primary);
	padding: 1rem;
	margin-top: 3rem;
}

/*===services section===*/
.service{
	width: 100%;
	height: auto;
	background: var(--white-primary);
}
.service .service-item{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-top: 2rem;
	/*gap: 2rem;*/
}
.service-item .item{
	width: 33%;
	height: auto;
	padding: 1rem;
	margin: 1rem 0;
	text-align: center;
}
.service-item .item svg{
	width: 4rem;
	height: 4rem;
	color: var(--red-secondary);
}
.service-item .item h3{
	font-size: 2.5rem;
	color: var(--black);
	font-weight: 600;
	text-transform: capitalize;
	margin: 1.5rem 0;
}

/*===skill section===*/
.skill{
	width: 100%;
	height: auto;
	background: var(--white3);
}
.skill h3{
	margin-top: 5rem;
	font-size: 3rem;
	font-weight: 200;
	margin-bottom: 3rem;
}
.skill .skill-content{
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
.skill-content .skill-text{
	flex-basis: 49%;
}
.skill-content .skill-pro{
	flex-basis: 49%;
}
.skill-pro h4{
	font-size: 3rem;
	margin-bottom: 3rem;
	font-weight: 200;
}
.skill-pro .pro-item{
	margin-top: 3rem;
}
.pro-item h5{
	font-size: 2rem;
	text-transform: capitalize;
}
.pro-item .pro-bar{
	width: 100%;
	height: 2rem;
	background-color: var(--black);
	border-radius: 2rem;
	position: relative;
	margin-top: 1rem;
}
.pro-bar::before{
	content: "";
	width: 60%;
	height: 1rem;
	background-color: var(--red-secondary);
	border-radius: 2rem;
	position: absolute;
	top: 50%;
	left: 1rem;
	transform: translateY(-50%);
}
.pro-bar::after{
	content: "60%";
	font-size: 1.5rem;
	color: var(--white-primary);
	position: absolute;
	top: 50%;
	right: 1rem;
	transform: translateY(-50%);
}

/* client */
.client{
	width: 100%;
	height: auto;
	background: url("../../img/work.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	display: flex;
	justify-content: space-between;
}
.client .client-bar{
	width: 24%;
	text-align: center;
}
.client-bar svg{
	color: var(--white-primary);
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--white-primary);
	border-radius: 50%;
	padding: 1rem;
}
.client-bar span{
	display: block;
	font-size: 3rem;
	color: var(--white-primary);
	padding: 1rem 0;
}
.client-bar h4{
	font-size: 3rem;
	color: var(--white-primary);
}

/* portfolio */
.port{
	width: 100%;
	height: auto;
	background-color: var(--white-primary);
}
.port ul{
	display: flex;
	justify-content: center;
	margin: 4rem auto;
}
.port ul li{
	padding: 2rem;
}
.port ul li a{
	font-size: 2rem;
	text-transform: capitalize;
	cursor: pointer;
	color: var(--black);
}
.port .port-items{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 2rem;
}
.port-items .port-item{
	width: 32%;
	position: relative;
}
.port-item::after{
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: rgb(255, 0, 0, 0.3);
	display: none;
	transition: 1s all ease-in;
}
.port-item:hover.port-item::after{
	display: block;
	transition: 1s all ease-in;
}

/* team */
.team{
	width: 100%;
	height: auto;
	background: var(--white-e1);
}
.team .team-item{
	margin-top: 5rem;
	display: flex;
	justify-content: space-between;
	gap: 2rem;
}
.team .people{
	position: relative;
	flex-basis: 23%;
}
.people img{
	width: 100%;
	border-bottom: 1rem solid var(--red-secondary);
}
.people::after{
	content: "";
	width: 100%;
	height: 100%;
	background: rgb(255, 0, 0, 0.4);
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.people .people-icon{
	width: 100%;
	height: 10rem;
	background: var(--red-secondary);
	position: absolute;
	bottom: 0;
	left: 0;
	text-align: center;
	color: var(--white-primary);
	display: none;
}
.people-icon span{
	font-size: 2rem;
	text-transform: uppercase;
	display: block;
	margin: 1.5rem 0;
}
.people-icon svg{
	width: 2rem;
	height: 2rem;
	padding: 0 1rem;
}
.people:hover.people::after,
.people:hover.people .people-icon{
	display: block;
}

/* mid-banner */
.banner-2{
	width: 100%;
	height: auto;
	background: url("../../img/banner2.jpg") no-repeat;
	background-size: cover;
	background-position: center center;
	text-align: center;
	color: var(--white-primary);
}
.banner-2 .logo{
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	margin: 0 auto;
}
.banner-2 h4{
	font-size: 3rem;
	padding: 2rem 0;
}
.banner-2 p{
	color: var(--white-primary);
}

/* latest blog */
.blog{
	width: 100%;
	height: auto;
	background: var(--white-primary);
}
.blog .blog-desc{
	width: 100%;
	height: auto;
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	margin-top: 5rem;
}
.blog-desc .blog-item{
	flex-basis: 32%;
	box-shadow: 0px 5px 10px 5px rgb(0, 0, 0, 0.3);
}
.blog-item .img-bar{
	width: 100%;
}
.blog-item .blog-text{
	padding: 2rem;
}
.blog-text h3{
	font-size: 3rem;
}
.blog-text span{
	display: block;
	margin: 2rem 0;
	font-size: 2rem;
}
.blog-text button{
	background: var(--black);
	padding: .5rem 1rem;
	margin-top: 2rem;
}

/* contact */
.contact{
	width: 100%;
	height: auto;
	background: url("../../img/contact.png") no-repeat;
	background-size: cover;
	background-position: center center;
	text-align: center;
}
.contact form{
	margin-top: 5rem;
	width: 100%;
	padding: 0 10%;
}
form .form-top{
	width: 100%;
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	text-align: center;
}
.form-top input{
	flex-basis: 48%;
	font-size: 2rem;
	padding: 1rem;
	border: 1px solid var(--white-primary);
	background-color: transparent;
	border-radius: 1.2rem;
	color: var(--white-primary);
	outline: none;
}
::placeholder{
	color: var(--white-primary);
}

form textarea{
	width: 100%;
	height: 20rem;
	margin: 2rem 0;
	border: 1px solid var(--white-primary);
	border-radius: 1.2rem;
	background-color: transparent;
	padding: 1rem;
	font-size: 2rem;
	color: var(--white-primary);
	resize: none;
	outline: none;
}
form button{
	display: block;
}

/* footer */
footer{
	width: 100%;
	height: auto;
	background-color: var(--black);
	color: var(--white-primary);
	display: flex;
	justify-content: space-between;
}
footer .social svg{
	width: 2rem;
	height: 2rem;
	padding: 1rem;
}
footer p{
	color: var(--white-primary);
}
footer p a{
	color: var(--white-primary);
}



