style.css

@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;500&family=Assistant:wght@200;300&family=Chivo&family=Inter&family=Martel+Sans&family=Merriweather+Sans:ital,wght@1,300&family=Open+Sans&family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@200;400&family=Quicksand:wght@300;500&family=Roboto+Flex:opsz,wght@8..144,200&family=Roboto:ital,wght@0,400;1,300&family=Rubik:ital,wght@1,300&family=Work+Sans:ital,wght@1,200&display=swap');


* {
  padding:0px;
  margin:0px;
  box-sizing:border-box ;
  font-family: 'Outfit', sans-serif
}
@media screen and (max-width: 600px) {
body,html{
  height:100vh ;
  display:border-box ;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background: none;
}
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color:black; 
  margin:-10px;
}

#jay {
  width: 20%;
  margin-left:30px;

}
.nav-list {
  list-style-type: none;
}

.nav-items,
a {
  font-size: 20px;
  color: #Ffff;
  display: inline-block;
  text-decoration: none;
  margin: 10px  05px;
  

}
.nav-items,
a:hover {
  background-color: #000000;
  color: yellow;

}
.hero-container {
  background: linear-gradient(yellow,red,orange);
  padding: 20px;
  margin:-10px;
}

.hero-text {
  text-align: center;
  font-size: 4.1rem;
  outline:dotted white;
  margin: 10px auto 60px 100px;
  color: #fff;
}

.grid-container {
  display: grid;
  grid-template-columns: 0.4fr 1fr;
  gap: 5px;
  background-color: #ffff;
}

.image {
  border-radius: 20px;
  padding: 10px; 
  background-color:  #000000;
  border: 5px solid #000000;
  width:100%
}
#me {
  width: 350px;
  border-radius: 15px;

}

.text {
  padding: 20px;
  border-radius: 20px;
  font-size: 20px;
  color: #ffff;
  background-color: #000000;
} 

.box1{
  display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, auto));
	align-items: center;
	text-align: center;
	gap: 2rem;
	margin-top: 5rem;
}
.box1 h3{
	font-size: 24px;
	font-weight: 600;
	margin: 15px 0;
	transition: all .40s ease;
}
.box1 p{
	color: white;
	font-size: var(--p-font);
	line-height: 30px;
}
.box1:hover{
	transform: scale(1.01) translateY(-5px);
	border-top: 5px solid var(--main-color);
}
.box1:hover h3{
	color: var(--main-color);
}
.box1{
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 400px;
  color:white;
  margin:-10px;
}
.columns1{
  float: left;
  width: 25%;
  padding: 0 10px;
}
    
.card2 {
  height: 365px;
	width:;
  box-shadow: 0 18px 18px 0 rgba(0, 0, 0, 0.4);
  padding: 16px;
  border-radius: 20px;
  text-align: center;
  background-color: #212121;
}
.card2:hover{
	color: #f8c806;
}
.card-header{
  text-align:center
  
}
.card-items {
  list-style-type: none;
  color: #fff;
}
.card2:hover {
  border: 2px solid red;

}
.contact {
  text-align: center;
}

.contact-me{
	width: 100%;
	height: 290px;
	background: #191919;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
.contact-me p{
	color: white;
	font-size: 30px;
	font-weight: bold;
	margin-bottom: 25px;
}
.contact-me .button-two{
	background-color: #f8c806;
	color: white;
	text-decoration: none;
	border: 2px solid transparent;
	font-weight: bold;
	padding: 13px 30px;
	border-radius: 30px;
	transition: .4s;
}
.contact-me .button-two:hover{
background-color: transparent;
	border: 2px solid #f8c806;
	cursor: pointer;	
}
.contact2 {
  text-align: center;
}
.contact-me2{
	width: ;
	height: 290px;
	background: #191919;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

.btn:hover,
.social div:hover {
  background-color: #f8c806;
  color: #000000;
}
.btn {
  background-color: #212121;
  color: #f8c806;
  border: none;
  border-radius: 70px;
  padding: 10px 27px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.footer-container {
  background-color: #191919;
  padding: 15px;
  text-align: center;
  margin:-10px

}
.footnote {
  color: #f8c806;
}
footer p:nth-child(1){
	font-size: 30px;
	color: white;
	margin-bottom: 20px;
	font-weight: bold;
}
footer p:nth-child(2){
	color: white;
	font-size: 17px;
	width: 500px;
	text-align: center;
	line-height: 26px;
}
.contact-container{
  background: black;
  box-shadow: 0 18px 18px 0 rgba(0, 0, 0, 0.4);
  padding: 2.5rem 2.5rem;
  border-radius: 10px;
  width: 750px;
  margin: 20px auto 20px auto;
  display: block;
  padding-bottom: 10px;
  border: none;
  color: #ffff;
}
h3 {
  color: red;
  letter-spacing: 0.5px;
  outline: none;
  border: none;
  font-size: 32px;
  font-weight: 500;
  line-height: 49px;
  text-align: center;
}
button {
  margin-top: 50px;
  width: 100%;
  background-color: yellow;
  color: black;
  border: none;
  padding: 15px 0;
  font-size: 18px;
  font-weight: 600;
  border-radius: 5px;
  cursor: pointer;
}
label {
  display: block;
  margin-top: 30px;
  font-size: 16px;
  font-weight: 500;
}

input,select,textarea {
  display: block;
  height: 50px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
  padding: 0 10px;
  margin-top: 8px;
  font-size: 20px;
  font-weight: 600px;
  color:white;
}
select:hover{
  color:red;
}
body .contact-container {
  background-color: black;
  background:cover;
}
button:hover{
  background-color: red;
  color: black;
}
::placeholder{
  color: #fff503;
}
.projects{
	background: white;
	width: 100%;
	padding: 100px 0px;
}
main-text{
	text-align: center;
}
.main-text h2{
	font-size: var(--h2-font);
	margin-bottom: 10px;
}
.main-text h4{
	color: var(--main-color);
	font-size: 24px;
	font-weight: 600;
}
.portfolio-contents{
	display: grid;
  background: ;
	grid-template-columns: repeat(auto-fit, minmax(350px, auto));
	align-items: center;
	gap: 2rem;
	margin-top: 10rem;
  margin-below: 5 rem;
}
.row img{
	height: auto;
	width: 100%;
	border-radius: 0.5rem;
	margin-bottom: 1.5rem;
}
.row{
	padding: 25px;
	background: #000000;
	border-radius: 0.5rem;
	transition: all .40s ease;
  margin-bottom: 10rem
  margin-top:5rem;
}
.main-row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.row h3{
	font-size: 25px;
	font-weight: 700;
}
.row h6{
	color: var(--main-color);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 1px;
}
.row-icon i{
	font-size: 21px;
}
.row:hover{
	transform: scale(1.01) translateY(-5px);
	cursor: pointer;
}
h3 .button{
 background-color: #f8c806;
	color: red;
	border: 2px solid transparent;
	text-decoration: none;
	font-weight: bold;
	padding: 9px 22px;
	border-radius: 30px;
	transition: .4s;
	
}
h3 .button:hover{
	background-color: transparent;
	border: 2px solid #f8c806;
	cursor: pointer;
} 
.services{
	background: white;
	width: 100%;
	padding: 100px 0px;
}
.title h2{
	color: red;
	font-size: 75px;
	width: 1130px;
	margin: 30px auto;
	text-align: center;
}

.box{
  max-width:1000px;
  margin: 0px auto;
	display: flex;
  flex-wrap: flex
	justify-content: center;
	align-items: center;
	min-height: 400px;
  color:white;
}

.box{
	padding: 45px;
	background: #12141c;
	border-top: 5px solid transparent;
	border-radius: 0.5rem;
	transition: all .40s ease;
	cursor: pointer;
}
.box h3{
	font-size: 24px;
	font-weight: 600;
	margin: 15px 0;
	transition: all .40s ease;
}
.box p{
	color: white;
	font-size: var(--p-font);
	line-height: 30px;
}
.box:hover{
	transform: scale(1.01) translateY(-5px);
	border-top: 5px solid var(--main-color);
}
.card:hover {
  border: 2px solid red;

}

.card{
	height: 365px;
	width: 100%;
	padding: 20px 35px;
	background:white; 
	border-radius: 20px;
	margin: 15px;
	position: center;
	overflow: hidden;
	text-align: center;
}
.card i{
	font-size: 50px;
	display: block;
	text-align: center;
	margin: 25px 0px;
	color: black;
}

h5{
	color: black;
	font-size: 23px;
	margin-bottom: 15px;
}
.pra p{
	color: black;
	font-size: 16px;
	line-height: 27px;
	margin-bottom: 25px;
}
.card .button{
	background-color: #f8c806;
	color: black;
	border: 2px solid transparent;
	text-decoration: none;
	font-weight: bold;
	padding: 9px 22px;
	border-radius: 30px;
	transition: .4s;
	
}
.card .button:hover{
	background-color: transparent;
	border: 2px solid #f8c806;
	cursor: pointer;
}
.main-text h3{
	color: red;
	font-size: 75px;
	width: 1130px;
	margin: 30px auto;
	text-align: center;
}