html{
    scroll-behavior: smooth;
}
body{
   background-image: linear-gradient(to top, #000000 61% , #242434 90%);
    padding: 0;
    margin: 0;
  
}
.header{
    background-image: linear-gradient(to top, #000000 61% , #242434 90%);
    color: white;
    padding: 15px;
    text-align: center;
    font-size: 24px;
    font-family: Arial, sans-serif;
    font-weight: bold;
   
    box-shadow: 0 3px 10px rgba(232, 211, 248, 0.8);
    left: 0;
    right: 0;
    position: fixed;
    height: 40px;
    width: 1500px;
    margin: 60px auto;
    border-radius: 40px;
    transition: 0.4s;
}
.header:hover{
    box-shadow: 0 10px 15px rgba(232, 211, 248, 0.9);

}
.name{
    margin: 0;
    padding: 0;
    display: flex;
    position: absolute;
}
.p9he{
    
   font-size: 24px;
   font-weight: bold;
    margin-top: auto;
    margin-top: 8px;
    margin-left: 20px;
  
}
.includes{
    margin-left: auto;
    margin-right: auto;
    margin-top: 7px;
    .title{
        margin-left: 20px;
        text-decoration: none;
        color: white;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 18px;
        font-weight: bold;
        transition: 0.5s;
        background-color:inherit;
        border:none;
        outline: none;
    }
    .title:hover{
        color: #705190;
       
       
    }
   
}
.hero {

   background-image: url('photo_2025-04-17_04-33-07-removebg-preview.png');
   background-size: cover;
    height: 700px;
    width: 700px;
    margin: auto;
    margin-top: 200px;
    left: 0;
    right: 0;
    position: absolute;
    z-index: -1;
}
.anzlk{
    background-color: #fff;
    height: 1000px;
    width: 0;
}
.home{
    display:flex;
    width: 500px;
    height: 300px;
   
    margin: auto;
  
  
    
}
.Hi{
    font-size: 24px;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
span{
    color: #705190;
}

.main-boxes{
    
    width: 70%;
    height: 300px;
    justify-content: space-between;
    display: flex;

    margin: auto;
    margin-top: 100px;
}

.box1 {
    width: 30%;
    height: 230px;
    box-shadow: 0 10px 15px rgba(232, 211, 248, 0.3);
    margin-top: 20px;
    display: inline-block;

    border-radius: 30px;
    border:4px #242434 dashed;
    transition: 0.7s;
}
.box1:hover{
    box-shadow: 0 10px 15px rgba(232, 211, 248, 0.9);
    transform: rotate(2deg);
}
.box2 {
    width: 30%;
    height: 230px;
    box-shadow: 0 10px 15px rgba(232, 211, 248, 0.3);
    margin-top: 20px;
    display: inline-block;
    
    border-radius: 30px;
    border:4px #242434 dashed;
    transition: 0.7s;
}
.box2:hover{
    box-shadow: 0 10px 15px rgba(232, 211, 248, 0.9);
    transform: rotate(-2deg);
}
.box3 {
    width: 30%;
    height: 230px;
    box-shadow: 0 10px 15px rgba(232, 211, 248, 0.3);
    margin-top: 20px;
    display: inline-block;
    
    
    border-radius: 30px;
    border:4px #242434 dashed;
    transition: 0.7s;
}
.box3:hover{
    box-shadow: 0 10px 15px rgba(232, 211, 248, 0.9);
    transform: rotate(2deg);
}
.title1{
    font-size: 24px;
    color: aliceblue;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to bottom, #705190 40% , #fff 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.title2{
    font-size: 24px;
    color: aliceblue;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to bottom, #705190 40% , #fff 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.title3{
    font-size: 24px;
    color: aliceblue;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    background: linear-gradient(to bottom, #705190 40% , #fff 90%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.descreption1{
    font-size: 20px;
    color: #fff;
    text-align: center;
}
.descreption2{
    font-size: 20px;
    color: #fff;
    text-align: center;
}
.descreption3{
    font-size: 20px;
    color: #fff;
    text-align: center;
}
.Contact{
 
   
    display: flex;
    margin: auto;
    margin-bottom: 50px;

    .con1{
        margin-top: 10px;
        display: inline-block;
        a{
            display: block;
        }
    }
    .con2{
        margin-top: 10px;
        display: inline-block;
        a{
            display: block;
        }
        
    }
  
    .github{
        width: 120px;
        height: 100px;
        
    
    }
    .insta{
        width: 120px;
        height: 100px;
   
    }
    .tele{
        width: 120px;
        height: 100px;
       
    }
    .in{
        width: 120px;
        height: 100px;

    }
}
.cen{
    display: flex;
    margin: auto;
    border-radius: 30px;
    box-shadow: 0 15px 15px rgba(232, 211, 248, 0.9);
    height: auto;
    width:auto;
    border:5px #242434 dashed;
   
}

.g{
    background-color: #929292;
    margin: 10px;
    border-radius: 10px;
    transition: 0.7s;
}
.g:hover{
    background-color: #fdfaff;
   scale: 1.05; 

}
.e{
    background-color: #929292;
    margin: 10px;
    border-radius: 10px;
    transition: 0.7s;

}
.e:hover{
    background-color: #fdfaff;
   scale: 1.05; 

}
.t{
    background-color: #929292;
    margin: 10px;
    border-radius: 10px;
    transition: 0.7s;
}
.t:hover{
    background-color: #fdfaff;
   scale: 1.05; 

}
.i{
   background-color: #929292;
    border-radius: 10px;
    margin: 10px;
    transition: 0.7s;
}
.i:hover{
    background-color: #fdfaff;
   scale: 1.05; 

}
footer{
  
   height: 80px; 
   
   box-shadow: 0 120px 150px rgba(232, 211, 248);
   background-color: #111011;
color: #ffffff;
border:4px #424242 solid;
border-radius: 10px;
transition: 0.7s;
}
footer:hover{
    box-shadow: 0 40px 150px rgba(232, 211, 248);
    
}
.footer-des{
    display: flex;
    margin: auto;
  
    width: auto;
    height: 30px;
    margin-top:10px;
    text-align: center;
    h1{
        font-size: 20px;
        text-align: center;
        display: flex;
        margin: auto;
        font-family: Arial, Helvetica, sans-serif;
    }
}
.footer-des2{
    display: flex;
    margin: auto;
   
    width: auto;
    height: 30px;
    margin-top: 10px;
    text-align: center;
    h1{
        font-size: 20px;
        margin: 0;
        display: flex;
        margin: auto;
        font-family: Arial, Helvetica, sans-serif;
    }
}
@media (max-width: 1950px) {
    .descreption1 {
        font-size: 19px;
    }
    .descreption2 {
        font-size: 19px;
    }
    .descreption3 {
        font-size: 19px;
    }
}
@media (max-width: 1720px) {
    .descreption1 {
        font-size: 18px;
    }
    .descreption2 {
        font-size: 18px;
    }
    .descreption3 {
        font-size: 18px;
    }
}
@media (max-width: 1550px) {
    .header {
        width: 800px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        margin-bottom: 5px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        
        
        
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
        text-align: center;
    }
   
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
}
@media (max-width: 1220px) {
    
}

@media (max-width: 920px)  {
    .header {
        width: 400px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        margin-bottom: 5px;
    }
    .hero{
        width: 600px;
        height: 600px;
        margin: auto;
        margin-top: 300px;
        left: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }
    .main-boxes{
        display: block;
        height: 900px;
        
        
        
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
        text-align: center;
    }
   
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
}
@media (max-width: 760px)  {
    .header {
        width: 400px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        margin-bottom: 5px;
    }
    .hero{
        width: 400px;
        height: 400px;
        margin: auto;
        margin-top: 300px;
        left: 0;
        right: 0;
        position: absolute;
        z-index: -1;
    }
    .main-boxes{
        display: block;
        height: 900px;
        
        
        
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
        text-align: center;
    }
   
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
}

@media (max-width: 850px) {
    .header {
        width: 500px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        margin-bottom: 5px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        
        
        
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
        text-align: center;
    }
   
    .box2{
        display:list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 500px;
    }
}

@media (max-width: 560px) {
    .header {
        width: 400px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        display: none;
    }
    
    .title{
        margin-right: 20px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        
        
        
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
       width: 400px;
    }
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 400px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 400px;
    }
    
}
@media (max-width: 720px) {
  
    .header {
        width: 420px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        display: none;
    }
    .hero{
        margin-bottom: 20px;
      

    }
    .title{
        margin-right: 20px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        width: auto;
        
        
    }
    .descreption1{
        font-size: 17px;
        color: #fff;
        text-align: center;
    }
    .descreption2{
        font-size: 17px;
        color: #fff;
        text-align: center;
    }
    .descreption3{
        font-size: 17px;
        color: #fff;
        text-align: center;
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 300px;
    }
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .anzlk{
        height: 730px;
    }
    .home{
        display:flex;
        width:380px;
        height: auto;
        
       
        
      
        
    }
    .Hi{
        font-size: 18px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    span{
        color: #705190;
    }
}
.show-more{
    display: flex;
    margin: auto;
    .show{
        background-image: linear-gradient(to top, #000000 61% , #242434 90%);
        margin: auto;
        height: 40px;
        width: 100px;
        border-radius: 30px;
        text-align: center;
        box-shadow: 0 10px 15px rgba(232, 211, 248, 0.3);
        border: #705190 1px solid;
        color: #fdfaff;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 15px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.6s;
    }
    .show:hover{
        scale: 1.05;
        box-shadow: 0 10px 15px rgba(232, 211, 248, 0.9);
    }
    margin-bottom: 200px;
    height: 70px;

}
@media (max-width: 450px) {
  
    .header {
        width: 320px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        display: none;
    }
    .hero{
        margin-bottom: 20px;
       

    }
    .title{
        margin-right: 20px;
    }
    .main-boxes{
        display: block;
        height: 000px;
        width: auto;
        
        
    }
    .descreption1{
        font-size: 17px;
        color: #fff;
        text-align: center;
    }
    .descreption2{
        font-size: 17px;
        color: #fff;
        text-align: center;
    }
    .descreption3{
        font-size: 17px;
        color: #fff;
        text-align: center;
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 300px;
    }
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .anzlk{
        height: 730px;
    }
    .home{
        display:flex;
        width:380px;
        height: auto;
        
       
        
      
        
    }
    .Hi{
        font-size: 18px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
    }
    span{
        color: #705190;
    }
}
@media (max-width: 450px) {
  
    .header {
        width: 320px;
        height: 35px;
        margin-top: 60px;
        
    }
    .p9he{
        display: none;
    }
    .hero{
        margin-bottom: 20px;
       

    }
    .title{
        margin-right: 20px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        width: auto;
        
        
    }
    .descreption1{
        font-size: 13px;
        color: #fff;
        text-align: center;
    }
    .descreption2{
        font-size: 13px;
        color: #fff;
        text-align: center;
    }
    .descreption3{
        font-size: 13px;
        color: #fff;
        text-align: center;
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 300px;
    }
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .anzlk{
        height: 730px;
    }
    .home{
        display:flex;
        width:380px;
        height: auto;
        
       
        
      
        
    }
    .Hi{
        font-size: 13px;
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        font-weight: bold;
    }
    span{
        color: #705190;
    }
}
@media (max-width: 390px) {
    
    .header {
        width: 320px;
        height: 35px;
        margin-top: 60px;
        font-size: 10px;
    }
    .p9he{
        display: none;
    }
    .hero{
        margin-bottom: 20px;
        width: 360px;
        height: 360px;

    }
    .title{
        margin-right: 20px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        width: auto;
        
        
    }
    .descreption1{
       
        color: #fff;
        text-align: center;
    }
    .descreption2{
       
        color: #fff;
        text-align: center;
    }
    .descreption3{
        
        color: #fff;
        text-align: center;
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 300px;
    }
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .anzlk{
        height: 730px;
    }
    .home{
        display:flex;
        width:380px;
        height: auto;
        
       
        
      
        
    }
    .Hi{
        
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        
      
       
    }
    
}
@media (max-width: 390px) {
    
    .header {
        width: 300px;
        height: 35px;
        margin-top: 60px;
        font-size: 8px;
    }
    .p9he{
        display: none;
    }
    .hero{
        margin-bottom: 20px;
        width: 330px;
        height: 350px;

    }
    
    .title{
        margin-right: 20px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        width: auto;
        
        
    }
    .descreption1{
      
        text-align: center;
    }
    .descreption2{
     
        color: #fff;
        text-align: center;
    }
    .descreption3{
      
        color: #fff;
        text-align: center;
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 300px;
    }
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .anzlk{
        height: 730px;
    }
    .home{
        display:flex;
        width:330px;
        height: auto;
        
       
        
      
        
    }
  
    .Hi{
       
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        width: 355px;
      
       
    }
    
}
@media (max-width: 370px) {
    
    .header {
        width: 300px;
        height: 35px;
        margin-top: 60px;
      
    }
    .p9he{
        display: none;
    }
    .hero{
        margin-bottom: 20px;
        width: 330px;
        height: 350px;

    }
    
    .title{
        margin-right: 20px;
    }
    .main-boxes{
        display: block;
        height: 900px;
        width: auto;
        
        
    }
    .descreption1{
       
        color: #fff;
        text-align: center;
    }
    .descreption2{
       
        color: #fff;
        text-align: center;
    }
    .descreption3{
      
        color: #fff;
        text-align: center;
    }
    .box1{
        display: list-item;
        margin: auto;
        margin-top: 40px;
        margin-bottom: 60px;
        width: 300px;
    }
    .box2{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .box3{
        display: list-item;
        margin: auto;
        margin-bottom: 60px;
        width: 300px;
    }
    .anzlk{
        height: 730px;
    }
    .home{
        display:flex;
        width:330px;
        height: auto;
        
       
        
      
        
    }
  
    .Hi{
       
        color: #fff;
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        width: auto;
      
       
    }
    
    .includes{
    
        .title{
           
            font-weight: bold;
        }
    }
    
}