*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
	background-image: url(photo/back.png);
}
body,html{
	scroll-behavior: smooth;
}
:root{
    /*===================width==========*/

	--width-lg:90%;
	--width-md:86%; 
	--width-sm:84%; 
	/*====================color================*/
	--color-bg:black;
	--color-text:rgb(135, 94, 94);
	--color-sp:rgba(177, 177, 177, 0.788);
	--color-btn:rgb(254, 167, 6);
	--color-sector:rgb(196, 196, 196);
	--color-blue:rgb(2, 171, 255);
}
.log{
	width: 13%;
	padding: 1px;
	margin-left: 5px;
}
img{
	width: 100%;
    height: 100%;
}

.container{
	width: var(--width-bg);
	margin: 0 auto;
}
.home {
	margin-top: -101vh;
	display: flex;
	align-items: center;
}
.Back {
	height: 550px;
	/* opacity: 80%; */
}
nav {
    background: black;
}
.navbar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100px;
}
.logo {
	width: 120px;
}
.sideBar {
	width: 50px;
	display: none;
}
.logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin-left: 10px;
}
.menu ul {
	display: flex;
	gap: 1rem;
	list-style: none;
}
.menu ul li a {
	color: var(--color-btn);
	text-transform: uppercase;
	text-decoration: none;
	font-size: 23px;
	margin-right: 15px;

}
.menu ul li a:hover {
	color: azure;
}
h2 span {
	color: rgba(255, 0, 76, 0.966);
	font-size: small;
	justify-content: center;
	align-items: center;
	margin-left: 30%;
}
.icon {
    margin-top: 6px;
    margin-left: 10px;
    height: 5.5vh;}
	a{
		text-decoration: none;
	}

/* ======================== menubar responsive  ================================ */
@media screen AND (max-width: 1024px){
    .sideBar {
		width: 50px;
		display: block;
		cursor: pointer;
	}
	#sideNav {
		position: fixed;
		width: 300px;
		height: 60vh;
		right: -300px;
		top: 11%;
		z-index: 3px;
		transform: 0.5s;
		background: black;
		border-bottom-left-radius: 7px;
	}
	ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	ul li {
		height: 30px;
		text-align: center;
		width: 100%;
		padding: 1 1rem;
		display: flex;
		align-items: center;
		cursor: pointer
	}
}
@media screen AND (max-width: 640px) {
	.container{
	  width: var(--width-sm);
	  margin: 0 auto;
	}
	 #sideNav {
	  position: fixed;
	  width: 300px;
	  height: 50vh;
	  right: -300px;
	  top: 14%;
	  z-index: 3;
	  transition: 0.5s;
	  background-color: black;
	}
	
  }
  @media screen AND (max-width: 900px) {
	.container{
	  width: var(--width-sm);
	  margin: 0 auto;
	}
	 #sideNav {
	  position: fixed;
	  width: 300px;
	  height: 50vh;
	  right: -300px;
	  top: 14%;
	  z-index: 3;
	  transition: 0.5s;
	  background-color: black;
	}
	
  }
  @media screen AND (max-width: 320px) {
	.container{
	  width: var(--width-sm);
	  margin: 0 auto;
	}
	 #sideNav {
	  position: fixed;
	  width: 300px;
	  height: 72vh;
	  right: -300px;
	  top: 22.5%;
	  z-index: 3;
	  transition: 0.5s;
	  background-color: black;
	}
	
  }
.aboutcontainer {
	padding: 3rem;
	height: 370px;
	background: var(--color-sector)
}
.cardcontainer {
	padding:0;
	margin: top 0px; ;
	height: 50vh;
}
h1{
	gap:2rem;
	margin-top: 0vh;
	font-size: 60px;
	color: rgb(0, 0, 0);
}
h1 span {
	color: blue;
}
.home {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.Image {
	margin-top: 0px;
	width: 80vh;
}
.Home {
	margin-right: 200px;
}
h3 span {
	font-size: 30px;
	color: var(--color-text);
	opacity: 100%;
}
p span {
	font-size: 25px;
	color: var(--color-btn);
}
h3, p {
	margin-top: 6px;
	opacity: 75%;
}
.cardleft {
	margin-top: 90px;
}
.intercontainer {
	margin-top: 0px;
	height: 50px;
	width: 350px;	
	background: white;
	border-radius: 20px;

}
h2 {
	padding: 10px;
	margin-left: 15px;
	margin-top: 10px;
	color: var(--color-btn);
}
.TopColor {
	padding: 7px;
	height: 300px;
	width: 250px;
	background: var(--color-sp);
	border-radius: 10px;
}
.experince {
    display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	padding: 10px;
	gap: 1rem;
}
.Experince {
	display: grid;
	grid-template-columns:1fr 1fr 1fr;
	padding: 70px;
	gap: 2rem;
}
h4 {
	padding: 10px;
	margin-left: 50px;
	margin-top: -200px;
	color: var(--color-btn);
}
li {
	margin-top: 10px;
	margin-left: 60px;
	color: var(--color-sp);
}
image {
	border-radius: 10px;
}
.back {
	padding: 0%;

	margin-top: 18px;
	margin-right: -700px;
	width: 400px;
}
.box {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
}
.exper {
	display: flex;
	margin-top: -15px;
	height: 70px;
	width: 370px;	
	background: var(--color-blue);
	border-radius: 20px;
}
.img{
	width: 18%;
	padding: 1px;
	margin-left: 5px;
}
.footer {
    padding: 5rem;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    height: 300px;
    background: rgb(35, 34, 34);
    border-top-left-radius: 80px;
    border-top-right-radius: 80px;
}
small {
	margin-left: 20px;
	font-size: 30px;
	color: var(--color-btn);
}
small span {
		margin-left: 20px;
	font-size: 30px;
	color: var(--color-btn);
}
.phone {
    padding: 1rem;
    display: flex;
}
.phone img {
    width: 10%;
}
.paragraph {
	color: var(--color-sp);
	margin-left: 7px;
}
.Image {
	margin-top: 6px;
	margin-left: 10px;
	height: 99.5vh;
}
.cardcontainer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;

}
.Card {
	margin-left: 20px;
	height: 320px;
	width: 250px;
	background: var(--color-sp);
	border-radius: 5px;
	margin-top: 10px;
}
.cardcontainer p {
    margin-left: 6px;
	margin-right: 6px;
}
@media screen AND (max-width: 1024px) {
	.container {
        width: var(--width-md);
		padding: 0 auto;
		margin: 0 auto;
	}
	.aboutcontainer {
		height: 500px;
		display: block;
}
	.back {
		padding: 210px;
		margin-top: 23px;
		margin-left: 0px;
		width: 400px;
	}
	.cardcontainer {
		display: grid;
		grid-template-columns: 1fr 1fr;
	
	}
	.Card {
		margin-left: 20px;
		height: 320px;
		width: 250px;
		background: var(--color-sp);
		border-radius: 5px;
		margin-top: 10px;
	}
	img.imageTop {
		width: 90vh;
		margin-left: -99vh;
		margin-top: 30px;
	}
	.mageTop {
		width: 10%;
	}
	.Experince {
		display: grid;
		grid-template-columns: 1fr;
		margin-top: 80px;
		margin-left: 70px;
		gap: 2rem;
	}
	.experince {
		margin-top: 0px;
		display: grid;
		grid-template-columns: 1fr;
		height: 70px;
		width: 380px;
		gap: 3rem;	
	}
	h2 {
		margin-top: 60px;
	}
	.TopColor {
		width: 350px;
		height:  200px;
	}
	.exper {
		display: flex;
		margin-top: 36px;
		height: 70px;
		width: 340px;
		background: var(--color-blue);
		border-radius: 20px;
		margin-left: 190px;
	}
	.box {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		height: 550px;
	}
	.intercontainer {
		padding: auto;
	    margin-left: 205px;
        margin-top: 0px;
        height: 35px;
        width: 350px;
	}
	.aboutcontainer {
		height: 750px;
		width: 1000px;
	}
	small {
		margin-left: 20px;
		font-size: 30px;
		color: var(--color-btn);
	}
	small span {
			margin-left: 20px;
		font-size: 30px;
		color: var(--color-btn);
	}
	.footer {
		margin-top: 370px;
		display: grid;
		grid-template-columns: 1fr 1fr;
		height: 430px;
	}

}
@media screen AND (max-width: 624px) AND (min-width: 300px) {
	.container {
		width: var(--width-sm);
		padding: 0 auto;
		margin: 0 auto;
	}
	section.about {
		height: 129.7vh;
		background: var(--color-sector);
	}
	img.imageTop {
		width: 90vh;
		margin-left: -99vh;
		margin-top: 30px;
	}
	.aboutcontainer {
		height: 500px;
		display: grid;
		grid-template-columns: 1fr;
	}
	.back {
		padding: 0 ;
		margin-top: 5px;
	}
	.cardcontainer {
		display: grid;
		grid-template-columns: 1fr ;
	
	}
	.Card {
		margin-left: 20px;
		height: 320px;
		width: 250px;
		background: var(--color-sp);
		border-radius: 5px;
		margin-top: 10px;
	}
	.Experince {
		display: grid;
		grid-template-columns: 1fr;
		margin-top: 80px;
		margin-left: 0px;
		gap: 2rem;
	}
	.experince {
		margin-top: 120px;
		display: grid;
		grid-template-columns: 1fr;
		height: 70px;
		width: 370px;
		gap: 1rem;		
	}
	h2 {
		margin-top: 60px;
	}
	.TopColor {
		width: 350px;
		height:  200px;
	}
	.exper {
		display: flex;
		margin-top: 36px;
		height: 70px;
		width: 340px;
		background: var(--color-blue);
		border-radius: 20px;
		margin-left: 190px;
	}
	.intercontainer {
		padding: auto;
		margin: left 0px;;
		margin-top: 0px;
		height: 35px;
		width: 350px;
	}
	/* .aboutcontainer {
		height: 750px;
		width: 1000px;
	} */
	small {
		margin-left: 20px;
		font-size: 30px;
		color: var(--color-btn);
	}
	small span {
			margin-left: 20px;
		font-size: 30px;
		color: var(--color-btn);
	}
	.footer {
		margin-top: 640px;
		display: grid;
		grid-template-columns: 1fr;
		height: 550px;
	}
	img.imageTop {
		width: 40vh;
		margin-left: -356px;
		margin-top: 30vh;
	}
	.number, .link, .socal   {
		margin-left: -25px;
	}

}
/* ======================================== project ===================== */
.proj1{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}
link .proj1 img{
	width: 90%;
	height: 100%;
}
.schm{
	gap:10px;
	width: 100%;
	height: 35vh;
	margin: 2% 2px;
	padding: 1% 2%;
	border-radius: 9px;
}