*{
 margin:0;
 padding:0;
 font-family: 'poppins',sans-serif;
 box-sizing:border-box;
}
body{
 background-color:rgb(13, 0, 0);
 color:rgb(249, 247, 247) ;
}
/* Header container fix */
.header-text {
  display: flex;
  justify-content: space-between; /* text left, image right */
  align-items: center;        /* align top of text & image */
  margin-top: 0;                  /* remove any gap below navbar */
                     /* small gap if needed */
}

/* Text block styling */
.text-block p,
.text-block h1 {
  margin: 0;                      /* remove default margins */
}

.text-block p {
  margin-bottom: 5px;             /* controlled spacing above h1 */
}
/* Image styling */
.sideimg img {
  margin-right: 10px;
  margin-left: 20px;
  width: 30rem;  
  background: linear-gradient(rgba(0,0,0,0.1),#fecf59);
  height: 30rem;                   /* maintain aspect ratio */              /* limit max height */
  border-radius: 50px;
  object-fit: cover;              /* ensure image fills area without distortion */
  display: block;                 /* removes inline spacing issues */
}
nav{
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
}
.logo{
 width:140px;
}
nav ul li{
   display: inline-block;
  list-style: none;
  margin:10px 20px;
}
nav ul li a{
 
 color: rgb(248, 246, 246);
 text-decoration: none;
 font-size:18px;
 position: relative;
}
nav ul li a::after{
 content: '';
 width:0;
 height:3px;
 background-color: rgb(248, 200, 28);
 position: absolute;
 left: 0;
 bottom: -6px;
 transition: 0.5;
}
nav ul a:hover::after{
  width: 100%;
}
.header-text{
  margin-top:5%;
  margin-bottom: 15%;
  margin-left: 8%;
  font-size:30px;
}
.header-text h1{
  font-size:60px;
  margin-top:30px;
}
.header-text h1 span{
 color:rgb(246, 172, 12);
}

/*-----------about----------*/
#about{
 padding:50px 0;
color: #ababab;
}
.user-img{
 border: 3px solid white;
}
.row{
 display:flex;
 justify-content: space-between;
 flex-wrap:wrap;
}
.about-col-1{
 flex-basis: 35%;
}
.about-col-1 img{
 width:100%;
 border-radius: 15px;
}
.about-col-2{
 flex-basis: 60%;
}
.sub-title{
 font-size:60px;
 font-weight: 600;
 color: #fcfbfb;
}
.tab-title{
 display: flex;
 margin:20px 0 40px;
}
.tab-links{
 display: inline-block;
 margin-right: 50px;
 font-size:18px;
 font-weight: 500;
 cursor: pointer;
 position: relative;
}
.tab-links::after{
 content:'';
 width:0;
 height: 3px;
 background:#eaa904;
 position:absolute;
 left:0;
 bottom:-8px;
 transition:0.5;
}
.tab-links.active-link::after{
 width:100% ;
}
.tab-contents ul li{
 list-style: none;
 margin:10px 0;
}
.tab-contents ul li span{
  color:#eaa904;;
  font-size:14px;
  
}
.tab-contents{
 display: none;
}
.tab-contents.active-tab{
 display:block;
}


/*------services------*/
#services{
 padding:50px 0;
}
.services-list{
 display: grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 grid-gap:40px;
 margin-top:50px;
}
.services-list div{
 background: #262626;
 padding: 40px;
 font-size:13px;
 font-weight: 300;
 border-radius: 10px;
}
.services-list div i{
 font-size:30px;
 margin-bottom:30px;
}
.services-list div h2{
 color: #ffff;
 font-size: 30px;
 font-weight: 500;
 margin-bottom: 15px;
}
.services-list div a{
 color: #f8f4f4;
  font-size: 12px;
 display: inline-block;

}

/*my-work*/
#porfolio{
 padding: 50px 0;
}
.work-list{
  display: grid;
 grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
 grid-gap:40px;
 margin-top:50px;
}
.work{
 border-radius: 10px;
 position: relative;
 overflow: hidden;
 display: flex;
 justify-content: center;
 align-items: center;
}
.work img1{
  width: 80%;
}
.work img{
  margin:10px;
  padding: 10px;
  width: 40%;
  object-fit: cover;
 overflow: hidden;
 border-radius: 10px;
 display: block;
 transition: transform 0.5s;
}
.layer{
 display: flex;
 background: linear-gradient(rgba(0,0,0,0.1),#fecf59);
 width:100%;
 height:0;
 border-radius: 10px;
 position: absolute;
 left:0;
 bottom:0;
 overflow: hidden;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 padding: 0 40px;
 text-align: center;
 font-size:14px;
 transition: height 0.5s;
}
.layer a{
 margin-top: 20px;
 color:#f8f4f4;
 text-decoration: none;
 font-size: 18px;
 line-height: 60px;
}
.layer h3{
  font-weight: 500;
  margin-bottom: 20px;
}
.layer a{
  margin-top:20px;
  color: #ff9500;
  font-size: 18px;
  line-height: 60px;
  background: #fff;
  width:60px;
  height:60px;
  border-radius: 50%;
  text-decoration: none;
}
.work:hover img{
  transform:scale(1.1);
}
.work:hover .layer{
  height:100%;
}
/*----------contact----------*/
.contact-left{
  flex-basis:35%;
}
.contact-right{
  flex-basis: 60%;
}
.contact-left p{
  margin-top: 30px;
}
.contact-left p i{
  color: #eaa904;
  margin-right: 15px;
  font-size: 25px;
}
.social-icons{
  margin-top: 30px;
}
.social-icons a{
  font-size: 30px;
  margin-right:15px;
  color:#eaa904;
  display: inline-block;
  transition: transform 0.5s;
}
.social-icons a:hover{
  color: #2a04ea;
  transform: translateY(-5px);
}
.btn{
  display: block;
  margin: 50px auto;
  width:1px solid;
  border:1px solid #eaa904;
  padding: 14px 50px;
  text-decoration: none;
  color:#f5f4f1;
  transition: transform 0.5s;
}
.btn:hover{
 background: #eaa904;
}
.btn.btn2{
  display: inline-block;
  background-color: #eaa904;
  border-radius: 10px;
}
.contact-right form{
  width:100%;
}
form input,form textarea{
    width: 100%;
    border: 0;
    margin: 15px 0;
    outline:none;
    background: #262626;
    padding: 15px;
    color: #fff;
    border-radius: 6px;
   
}
form .btn2{
  padding: 14px 60px;
  font-size: 18px;
  margin-top: 20px;
  cursor: pointer;
}
.copyright{
  width: 100%;
  text-align: center;
  padding: 25px 0;
  background: #262626;
  font-weight: 300;
  margin-top: 20px;
}
.copyright i{
  color: #fab506 ;
}