*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: 'Inter', sans-serif;
	text-decoration: none;
	list-style: none;
	scroll-behavior: smooth;

}
:root{
	--text-color: #fff;
	--bg-color: #1b1f24;
	--second-bg-color: #22282f;
	--main-color: #13bbff;
	--other-color: #c3cad5;

	--h1-font:4.5rem;
	--h2-font:2.9rem;
	--p-font:1rem;
}

body{
	color: var(--text-color);
	background: var(--bg-color);
	
}
header{
	position: fixed;
	width: 100%;
	top: 0;
	right: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 40px 16%;
	background: transparent;
	transition: all .50s ease;
}
.logo{
	font-size: 36px;
	color: var(--text-color);
	font-weight: 600;
}
span{
	color: var(--main-color);
}
.navlist{
	display: flex;

}
.navlist a{
	font-size: var(--p-font);
	font-weight: 500;
	color: var(--other-color);
	margin-left: 40px;
	transition: all .50s ease;
}
.navlist a:hover{
	color: var(--main-color);
	text-shadow: 3px 3px 20px var(--main-color),-2px 1px 3px var(--text-color);
}
#menu-icon{
	font-size: 35px;
	z-index: 10001;
	cursor: pointer;
	display: none;

}
.h-btn{
	display: inline-block;
	padding: 11px 26px;
	background: transparent;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	transition: all .50s ease;
}
.h-btn:hover{
	background: var(--main-color);
	color: var(--bg-color);
	box-shadow: 0 0 20px var(--main-color);
	transform: scale(1.1);
}
section{
	padding: 110px 16% 90px;
}
.hero{
	height: 100vh;
	width: 100%;
    /* background-image: url("00.png"); */
	background-position: top right;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
.main-content h4{
	font-size: 1.6rem;
}
.main-content h1{
	font-size: var(--h1-font);
	font-weight: 900;
	margin: 20px 0px 20px;
	line-height: 1.2;
}
.main-content p{
	font-size: var(--p-font);
	font-weight: 400;
	width: 620px;
	max-width: 100%;
	color: var(--other-color);
	line-height: 30px;
	margin-bottom: 15px;
}
.social{
	margin-bottom: 40px;
}
.social i{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	color: var(--main-color);
	border-radius: 50% ;
	backdrop-filter: brightness(88%);
	font-size: 35px;
	margin-right: 35px;
	box-shadow: 0 0 20px transparent;
	cursor: pointer;
    transition: all .50s ease;
}
.social i:hover{
	transform: scale(1.1);
	box-shadow: 0 0 20px var(--main-color);
}
.btn{
	display: inline-flex;
	padding: 11px 26px;
	background: var(--main-color);
	color: var(--bg-color);
	border: 2px solid var(--main-color);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	transition: all .50s ease;
}
.btn:hover{
	background: transparent;
	color: var(--main-color);
	box-shadow: 0 0 20px var(--main-color);
}
.btn2{
	background: transparent;
	color: var(--main-color);
	border: 2px solid var(--main-color);
	margin-left: 15px;
	transition: all .50s ease;
}
.btn2:hover{
	background: var(--main-color);
	color: var(--bg-color);
}
header.sticky{
	background: var(--bg-color);
	box-shadow: 0 .1rem 1rem rgba(0, 0, 0, .2);
	padding: 16px 16%;
}

.about{
	background: var(--second-bg-color);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	gap: 1rem;
}
.about-img img{
	width: 100%;
	height: 530px;
	max-width: 530px;
	border-radius: 50%;
	object-fit: initial;
	border: 7px solid var(--main-color);
	box-shadow: 0 0 20px var(--main-color);
}
.about-text h2{
	font-size: var(--h2-font);
	line-height: 1.3;
	margin-bottom: 20px;
}
.exp-area{
	margin-bottom: 50px;
}
.exp-area p{
	color: var(--text-color);
	font-weight: 600;
	font-size: 19px;
	line-height: 42px;
}
.exp-area p span{
	color: var(--other-color);
	font-size: var(--p-font);
	font-weight: 400;
	margin-left: 8px;
}


.center-text{
	text-align: center;
}
.center-text h2{
	font-size: var(--h2-font);
}
.services-content{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, auto));
    align-items: center;
	gap: 2.3rem;
	margin-top: 4.2rem;
}
.box{
	padding: 80px 40px 66px;
	background: #2d343f;
	border-radius: 28px;
	border: 1px solid transparent;
	box-shadow: 0 0 5px var(--main-color);
	transition: all .50s ease;
	cursor: pointer;
}
.box img{
	margin-bottom: 20px;
}
.box h3{
	font-size: 30px;
	font-weight: 700;
	margin-bottom: 10px;
}
.box p{
	font-size: var(--p-font);
	font-weight: 400;
	color: var(--other-color);
	line-height: 30px;
	margin-bottom: 20px;
}
.box a{
	display: inline-block;
	font-size: 22px;
	line-height: 1.273em;
	font-weight: 700;
	padding: 7px 0;
	color: var(--text-color);
	border-bottom: 2px solid #5d6c83;
	transition: all .50s ease;
}
.box i{
	vertical-align: middle;
	font-size: 25px;
	color: var(--main-color);
	margin-left: 5px;
}
.box a:hover{
	border-bottom: 2px solid var(--main-color);
}
.box:hover{
    border: 1px solid var(--main-color);
    transform: translateY(-5px) scale(1.03);
}

.portfolio{
	background: var(--second-bg-color);
}
.Portfolio-context{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, auto));
	align-items: center;
	gap: 2.3rem;
	margin-top: 4.2rem;
}
.row img{
	aspect-ratio: 5/2;
	object-fit: contain;
	height: auto;
	width: 100%;
	border-radius: 28px;
	margin-bottom: 1.4rem;
}
.row{
	background: #2d343f;
	border-radius: 28px;
	border: 1px solid transparent;
	box-shadow: 0 0 5px var(--main-color);
	padding: 20px;
	transition: all .50s ease;
}
.main-row{
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 0.5rem;
}
.row h5{
	font-size: 20px;
	font-weight: 600;
	color: var(--other-color);
}
.row i{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	font-size: 27px;
	border-radius: 50%;
	color: var(--text-color);
	background: #075fe4;
}
.row h4{
	font-size: 25px;
	font-weight: 700;
	margin-bottom: 10px;
	line-height: 1.4;
}
.row:hover{
	border: 1px solid var(--main-color);
	transform: translateY(-5px) scale(1.03);
	cursor: pointer;
}

.contact-form{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 4.2rem;
}
.contact-form form{
	position: relative;
	width: 600px;
}
form input,
form textarea{
	width: 100%;
	padding: 20px;
	border: none;
	outline: none;
	box-shadow: 0 0 5px var(--main-color);
	background: #2d343f;
	color: var(--text-color);
	margin-bottom: 20px;
	border-radius: 8px;
}
form input::placeholder,
form textarea::placeholder{
	color: var(--other-color);
	font-size: 15px;
}
form .send-btn{
	display: inline-block;
	padding: 11px 26px;
	background: var(--main-color);
	color: var(--bg-color);
	border: 2px solid var(--main-color);
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	transition: all .50s ease;
	width: 30%;
}
form .send-btn:hover{
	background: transparent;
	color: var(--main-color);
	box-shadow: 0 0 20px var(--main-color);
	cursor: pointer;
}

.footer{
	padding: 22px 16%;
	background: var(--second-bg-color);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}
.copyright p{
	font-size: 15px;
	font-weight: 400;
	color: var(--other-color);
}
.scroll-top i{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #075fe4;
	width: 45px;
	height: 45px;
	border-radius: 50%;
	color: var(--text-color);
	font-size: 27px;
}

@media (max-width: 1700px){
	header{
		padding: 20px 8%;
	}
	header.sticky{
		padding: 14px 8%;
	}
	section{
		padding: 90px 8% 80px;
	}
	.footer{
		padding: 18px 8%;
	}
	.logo{
		font-size: 28px;
	}
}

@media (max-width: 1380px){
	header{
		padding: 20px 5%;
	}
	header.sticky{
		padding: 14px 5%;
	}
	section{
		padding: 90px 5% 80px;
	}
	.footer{
		padding: 18px 5%;
	}
	.hero{
        height: 90vh;
        background-position: center;
	}	
}

@media (max-width: 1290px){
	.box{
		padding: 40px 40px 46px;
	}
	.box img{
		width: 100%;
		height: 60px;
		max-width: 60px;
	}
	.box h3{
		font-size: 21px;
	}
}

@media (max-width: 1240px){
	.about{
		grid-template-columns: 1fr;
		gap: 2rem;
		text-align: center;
	}
	.about-img img{
		text-align: center;
		width: 100%;
		height: 400px;
		max-width: 400px;
		border-radius: 50%;
		object-fit: initial;
		margin: 0 auto;
	}
	:root{
		--h1-font:4rem;
	    --h2-font:2.2rem;
	    --p-font:15px;
	}
}

@media (max-width: 950px){
	:root{
		--h1-font:3.5rem;
	}
	.social{
		margin-bottom: 20px;
	}
	#menu-icon{
    	display:block ;
	}
	.navlist{
		position: absolute;
		top: 100%;
		right: -100%;
		width: 255px;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		background: var(--bg-color);
		transition: all .50s ease;
	}
	.navlist a{
		display: block;
		padding: 17px;
		font-size: 22px;
	}
	.navlist.active{
		right: 0;
	}
}

@media (max-width: 680px){
	.main-content p{
		width: 90%;
	}
	.logo{
		        font-size: 20px;
	}
	
}
@media (max-width: 470px){
	
	:root{
		--h1-font:0;
	    --h2-font:30px;
		--p-font:12px;

	}
	.h-btn{
        padding: 5px 10px;
        font-size: 10px;
	}
	.btn{
		padding: 5px 10px;
		font-size: 10px;
	}
	.about-img img{
		text-align: center;
		width: 100%;
		height: 200px;
		max-width: 200px;
		border-radius: 50%;
		object-fit: initial;
		margin: 0 auto;
	}
	.logo{
		        font-size: 20px;
	}
	.h-btn{
        padding: 8px 15px;
        font-size: 12px;
	}
	.btn{
		padding: 8px 20px;
		font-size: 12px;
	}
	.social i  {
		width: 30px;
    height: 30px;
    font-size: 30px;
    margin-right: 20px;
	}
	    
.hero-img img{
    width: 100px;
    height: 100px;
	

  }
  .main-content h4{
	font-size: 12px;
  }

  .main-content h1{
    font-size: 22px;
  }

  .main-content p{
    font-size: 12px;
  }

  .hero-buttons .btn{
    font-size: 11px;
    padding: 6px 12px;
  }
  
		
}
/* ===============================
   MOBILE OPTIMIZATION - 320px
=================================*/

@media (max-width: 320px){

  body{
    overflow-x: hidden;
  }

  header{
    padding: 12px 5%;
  }

  .logo{
    font-size: 16px;
  }

  #menu-icon{
    font-size: 25px;
  }

  /* HERO SECTION */
  .hero{
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: right center; /* image right side */
  }

  .main-content h4{
    font-size: 14px;
  }

  .main-content h1{
    font-size: 26px;
    line-height: 1.2;
  }

  .main-content p{
    font-size: 12px;
    width: 100%;
    line-height: 20px;
  }

  /* Buttons */
  .btn,
  .btn2,
  .h-btn{
    padding: 6px 14px;
    font-size: 11px;
  }

  /* Social Icons */
  .social i{
    width: 28px;
    height: 28px;
    font-size: 18px;
    margin-right: 10px;
  }

  /* About Section */
  .about{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-img img{
    width: 180px;
    height: 180px;
  }

  .about-text h2{
    font-size: 20px;
  }

  .exp-area p{
    font-size: 14px;
    line-height: 24px;
  }

  /* Services */
  .box{
    padding: 25px 20px;
  }

  .box h3{
    font-size: 18px;
  }

  .box p{
    font-size: 12px;
    line-height: 20px;
  }

  /* Portfolio */
  .Portfolio-context{
    grid-template-columns: 1fr;
  }

  .row h4{
    font-size: 16px;
  }

  .row h5{
    font-size: 14px;
  }

  /* Contact */
  .contact-form form{
    width: 100%;
  }

  form input,
  form textarea{
    padding: 12px;
    font-size: 12px;
  }

  form .send-btn{
    width: 100%;
    font-size: 12px;
  }

  /* Footer */
  .footer{
    flex-direction: column;
    text-align: center;
  }

  .copyright p{
    font-size: 11px;
  }

}
@media (max-width: 380px){
	 body{
    overflow-x: hidden;
  }

  header{
    padding: 12px 5%;
  }

  .logo{
    font-size: 16px;
  }

  #menu-icon{
    font-size: 25px;
  }

  /* HERO SECTION */
  .hero{
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-position: right center; /* image right side */
  }

  .main-content h4{
    font-size: 14px;
  }

  .main-content h1{
    font-size: 26px;
    line-height: 1.2;
  }

  .main-content p{
    font-size: 12px;
    width: 100%;
    line-height: 20px;
  }

  /* Buttons */
  .btn,
  .btn2,
  .h-btn{
    padding: 6px 14px;
    font-size: 11px;
  }

  /* Social Icons */
  .social i{
    width: 28px;
    height: 28px;
    font-size: 18px;
    margin-right: 10px;
  }

  /* About Section */
  .about{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .about-img img{
    width: 180px;
    height: 180px;
  }

  .about-text h2{
    font-size: 20px;
  }

  .exp-area p{
    font-size: 14px;
    line-height: 24px;
  }

  /* Services */
  .box{
    padding: 25px 20px;
  }

  .box h3{
    font-size: 18px;
  }

  .box p{
    font-size: 12px;
    line-height: 20px;
  }

  /* Portfolio */
  .Portfolio-context{
    grid-template-columns: 1fr;
  }

  .row h4{
    font-size: 16px;
  }

  .row h5{
    font-size: 14px;
  }

  /* Contact */
  .contact-form form{
    width: 100%;
  }

  form input,
  form textarea{
    padding: 12px;
    font-size: 12px;
  }

  form .send-btn{
    width: 100%;
    font-size: 12px;
  }

  /* Footer */
  .footer{
    flex-direction: column;
    text-align: center;
  }

  .copyright p{
    font-size: 11px;
  }

}
@media (max-width: 250px){
	.main-content p{
		width: 90%;
	}
	.logo{
		        font-size: 20px;
	}
	.hero {
        height: 90vh;
        width: 50%;
        background-position: right;
        }
}
/* ===== SKILLS =====*/
 .skills-section {
      background: #22282f;
      padding: 80px;
      max-width: 1300px;
      margin: auto;
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

    .skills-section h2 {
      text-align: center;
      font-size: 36px;
      margin-bottom: 40px;
      color: #fff;
    }

    .skill-category {
      margin-bottom: 40px;
    }

    .skill-category h3 {
      font-size: 24px;
      margin-bottom: 20px;
      color: #fff;
      border-left: 6px solid #4CAF50;
      padding-left: 12px;
    }

    .skills-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 30px;
      justify-items: center;
    }

    .skill-item {
      text-align: center;
    }

    .skill-item a {
      text-decoration: none;
      color: inherit;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.3s;
    }

    .skill-item a:hover {
      transform: scale(1.1);
    }

    .skill-item img {
      width: 50px;
      height: 50px;
      margin-bottom: 8px;
    }

    .skill-title {
      font-weight: 600;
      color: #fff;
    }
  /* HERO NEW MOBILE LAYOUT */

.hero{
  display: flex;
   align-items: center; 
  justify-content: center;
   background-position: right center; 
   background-size: cover; 
} 

.hero-container{
  width: 100%;
  height: 100%;
   /* display: flex;  */
  flex-direction: column;
  justify-content: space-between; 
  /* align-items: center; */
  /* text-align: center;  */
   padding: 110px 80px; 
}

/* TOP IMAGE */
.hero-img img{
  width: 250px;
  height: 270px;
  /* border-radius: 50%;
  object-fit: cover; */
  border: 4px solid var(--main-color);
  box-shadow: 0 0 15px var(--main-color);
}

/* BOTTOM CONTENT */
.main-content{
  margin-bottom: 40px;
}

.main-content h4{
  font-size: 14px;
}

.main-content h1{
  font-size: 26px;
  margin: 10px 0;
}

.main-content p{
  font-size: 13px;
  margin-bottom: 15px;
}

/* Buttons */
.hero-buttons{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.hero-buttons .btn{
  padding: 8px 16px;
  font-size: 12px;
}
@media (max-width: 320px){

  .hero-img img{
    width: 90px;
    height: 90px;
	
  }

  .main-content h1{
    font-size: 22px;
  }

  .main-content p{
    font-size: 12px;
  }

  .hero-buttons .btn{
    font-size: 11px;
    padding: 6px 12px;
  }

}
.hero-img img {
  float: right;
  margin-left: 25px; /* Adds space between the image and surrounding content */
}
/* ========== 992px (Tablet) ========== */
@media (max-width:992px){

  #menu-icon{ display:block; }

  .navlist{
    position:absolute;
    top:100%;
    right:-100%;
    width:250px;
    height:100vh;
    flex-direction:column;
    background:var(--bg-color);
    transition:.4s;
  }

  .navlist.active{ right:0; }

  .navlist a{
    display:block;
    padding:15px;
    font-size:18px;
  }

  .hero{
    flex-direction:column;
    text-align:center;
    justify-content:center;
  }

  .hero-img img{
    float:none;
    margin:20px auto 20px;
    width:200px;
    height:220px;
  }

  .main-content p{
    width:100%;
  }

  .hero-buttons{
    justify-content:center;
  }
}

/* ========== 768px ========== */
@media (max-width:768px){

  :root{
    --h1-font:2.5rem;
    --h2-font:1.8rem;
  }

  .services-content,
  .Portfolio-context{
    grid-template-columns:1fr;
  }

  .box{
    padding:30px;
  }

  .contact-form form{
    width:100%;
  }
.hero-container{
  width: 100%;
  height: 100%;
   display: flex; 
  flex-direction: column;
  justify-content: space-between; 
  align-items: center;
  text-align: center;   
  }
}

/* ========== 480px (Mobile) ========== */
@media (max-width:480px){

  header{
    padding:12px 5%;
  }

  .logo{
    font-size:18px;
  }

  .hero{
    height:auto;
    padding-top:10px;
  }

  .hero-img img{
    width:150px;
    height:160px;
  }

  .main-content h1{
    font-size:22px;
  }

  .main-content p{
    font-size:13px;
    line-height:20px;
  }

  .btn,
  .btn2,
  .h-btn{
    padding:7px 14px;
    font-size:12px;
  }

  .social i{
    width:35px;
    height:35px;
    font-size:18px;
    margin-right:10px;
  }

  .footer{
    flex-direction:column;
    text-align:center;
    gap:10px;
  }

}

/* ========== 320px Small Devices ========== */
@media (max-width:320px){

  .hero-img img{
    width:110px;
    height:120px;
  }

  .main-content h1{
    font-size:18px;
  }

  .main-content p{
    font-size:12px;
  }

  .hero-buttons{
    flex-direction:column;
    gap:8px;
  }

  .hero-buttons .btn{
    width:100%;
  }
  .hero-container{
  width: 100%;
  height: 100%;
   display: flex; 
  flex-direction: column;
  justify-content: space-between; 
  align-items: center;
  text-align: center;   
  }
  
}