*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Plus Jakarta Sans", sans-serif;
}
body{
  background: #FFFEFA;

}
 /* common class */
 .btn{
 
  color: #FFFFFF;
  background: #872BFF;
  font-size: 14px;
  font-weight: bold;
  padding: 14px 30px;
  border: none;
  border-radius: 30px;
  box-shadow: 0 11px 31px 0 #8C8C8C;
  margin-right: 20px;
  cursor: pointer;
  transition: all .5s;
  border: 2px solid #872BFF;


 }
 .btn:hover{
  color: #1C1C1C;
  background: #FFFFFF;
  border: 2px solid #872BFF;
 }
 .btn-white{
  color: #1C1C1C;
  background: #FFFFFF;
  border: 2px solid #872BFF;
 }
 .container{
  width: 87.5%;
  margin: 0 auto;
  
 }
 .heading{
  text-align: center;
  margin-bottom: 60px;
 }
 .heading h4{
   font-size: 22px;
   font-weight: bold;
   color: #6A14DA;
   letter-spacing: 3px;
   text-transform: uppercase;
   margin-bottom: 20px;
 }
 .heading h2{
  font-size: 44px;
 }
 .card-box{
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 60px;
 }
 .card{
  background:#FFFFFF;
  padding: 40px;
  text-align: center;
  width: 320px;
  box-shadow: 0 4px 4px  0 #00000025;
  border-radius: 16px;
 }
.card *{
  margin-bottom: 20px;
}
.card h3{
  font-size: 24px;
  font-weight: bolder;
  
}
.card p{
  font-size: 16px;
  color: #0D1321;
  line-height: 26px;

}
.card a{
  font-size: 16px;
  font-weight: bold;
  color: #0D1321;

}
.project-card{
  padding: 40px;
  background: #FFFFFF;
  border: 1px solid #872BFF;
  border-radius: 20px;
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 60px;
}

.project-img img{
  width: 400px;
  border-radius: 20px;
}
.project-content h3{
  font-size: 30px;
}
.project-content p{
  color: #0E0E0E70;
}
.project-content *{
  margin-bottom: 20px;
}
 
.Brands{
  padding: 40px;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 0 4px 4px  0 #00000025;
  transition: all .5s;
}
.Brands:hover{
  background:#FFFFFF10 ;
}

.hidden{
  display: none;
}

/* common class end */

#hero{
  padding-top: 20px;
  background: url("image/Hero-bg.png");
  background-size:500px;
  margin-bottom: 150px;

}
#hero-container{
width: 87.5%;
margin: 0 auto;
display: flex;
gap: 40px;

align-items: end;
justify-content: space-between;
padding-right: 20px;
}
#hero-content{
  margin-bottom: 100px;
 
}
#hero-content h1{
  color: #000000;
  font-size: 48px;
  margin-bottom: 20px;
}
#hero-content h1 span{
  color: #872BFF;
}

 #hero-content p{
  color: #8A8A8A;
  font-size: 16px;  
  font-weight: 400;
  line-height: 26px;
  margin-bottom: 30px;
 }
 #hero-image img{
  width: 500px;
  vertical-align: middle;
 }

 #skill, #projects, #experience{
  margin-bottom: 150px;
 }
.company-card{
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap ;
}
.btn-container{
  text-align: center;
  padding: 60px 0;
}
footer{
  border-top: 1px solid #872BFF30;
  padding: 16px 0;
}
#finish{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fotter-box{
  display: flex;
  gap: 30px;
}

/* responsiv */
/* laptop size 1025- 1200px */
@media screen and (max-width:1200px){
  #hero-content h1{
  font-size: 32px;
  margin-bottom: 20px;
}
#hero-btn{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
 #hero-content p{
  font-size: 14px;
 
 }
}


/* tablet device 769- 1024px */
@media screen and (max-width:1024px) {
       #hero-container{
        flex-direction: column;
        text-align: center;
        align-items: center;
        
       }
       #hero-btn{
        flex-direction: row;
        justify-content: center;
       }
      #hero-image img{
            width: 320px;
        }
       #hero-content{
        margin-bottom:0;
       }
       .card-box{
        flex-direction: column;
       }
       .card{
        width: 100%;
       }
       .project-img img{
        width: 250px;
}
      .project-content *{
  margin-bottom: 10px;
}
}

/* android device landscape 569 - 768px */
@media screen and (max-width:768px) {
   .heading h2{
    font-size: 32px;
   }
   .project-card{
    flex-direction: column;
   }
   .project-img img{
    width: 100%;
   }
   .fotter-heading h4{
    font-size: 14px;
   }
   .fotter-box{
  gap: 15px;
}
  
}

/* android device landscape 320 - 568px */
@media screen and (max-width:568px) {
    .container{
         width: 98%;    
 }

 #hero-container {
  padding: 0;
 }
 .btn{
  margin-right: 0;
 }
  #hero-image img{
            width: 100%;
        }
     #hero-btn{
        flex-direction: column;

       }   
        .heading{
          margin-bottom: 10px;
        } 
   .heading h2{
    font-size: 19px;
     margin-bottom: 20px;
   }   
   .heading h4{
    font-size: 16px;
    margin-bottom: 10px;
   }  
    .project-card{
    padding: 10px;
   } 
   .project-content{
    text-align: center;
   }
  .company-card{
    flex-direction: column;
  }
  .company-card img{
    max-width: 150px;
    width:100%;
  }
    #finish{
      flex-direction: column;
      gap: 20px;
    }
}