*{
    margin: 0;
    padding: 0;
    box-sizing:border-box ;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.nav{
    background-color:white;
    display: flex;
    justify-content: space-between;   
    align-items: center;
    padding: 17px 250px 25px 100px;  
    position: fixed;
    width: 100%;
    z-index: 1;
    box-shadow: 0 2px 5px  rgb(0,  0,  0.2);
     
}

 
 .name{
    
    font-size: 35px;
    font-weight: bold;
    color: #3f396d;
    
}
 .container{
    
    display: flex;
    gap: 30px;
    
}  

.container :hover{
    color: orange;
    transition: 1s ;
}
  .container a{
    text-decoration: none;
    color: black;
    font-weight:500;
    font-size: 22px;
    scroll-behavior: smooth;
    

}

.nav-btn{
    padding-left: 35px;
    display: flex;
    justify-content: flex-end;
}
 .top-btn{
    font-size: 26px;
    padding: 10px 25px;   
    border-radius: 50px;
    font-weight: bold;
    color: aliceblue;
    background-color: rgb(244, 171, 14);
    border: none;
    text-decoration: none;

}

.box
{
    background-color:aliceblue;
    height: 540px;
    width: 100%;
    padding: 120px 70px;
    
}
.box h1{
       padding: 15px;
        color:rgb(49, 49, 124);
        font-weight: bold;
        font-size: 50px;
    
}
.box p{
    padding: 15px;
    font-size: 20px;
    opacity: 0.7;
}
.box .high{ 
    color: rgb(84, 84, 220);
    
}

.button{
    margin: 30px;
    
}

.btn-1{
    background-color: rgb(71, 108, 146);
    border-radius: 50px;
    border: none;
    color: white;
    padding: 10px 25px ;
    font-size:20px;
    
    }
  

.btn-2{
    background-color: orange;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 10px 25px;
    font-size: 20px;
}

.photo {
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.photo img{
    border-radius: 6px;
    position: absolute;
    right: 90px;
    bottom: 55px;
    box-shadow: 2px 2px 5px grey ;
}

.hero-section{
    background-color: white;
    
    height: 600px;

}
.hero-section .text{
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 50px 70px;

}


  .text h3{
    
        color:rgb(63, 107, 200);
        font-weight: bold;
        font-size: 25px;
        
  }

  .text h2{
    color:#3f396d ;
    font-weight: bold;
    padding: 10px;
    font-size: 38px;
    
  }
.cards{
    display: grid;
    grid-template-columns: 280px 280px 280px;
    justify-content:space-evenly;
    align-items: center;
    margin-top: 20px;
    
    
    
}

.cards i{
    
    
    font-size: 35px;
    padding-left: 40%;

}


.card-one{
 background-color: white;
 border-radius: 5px;
 height: 300px;
 padding:20px 20px 30px 20px ;
position: relative;
box-shadow: 2px 2px 5px grey;

}

 
.card-one h2{
    
    padding-top: 20px;
}

.card-one h3{
    color: orange;
    padding-left:35px ;
    padding-top: 30px;

}

.card-two{
 background-color: white;
 border-radius: 5px;
 height: 300px;
 padding:20px 20px 30px 20px ;
 position: relative;
 box-shadow: 2px 2px 5px grey;
 
}

.card-two h2{
    padding-left: 50px;
    padding-top: 20px;
    
}
.card-two p {
    padding-left: 35px;
    
}

.card-two h3{
    color: orange;
    padding-left:40px ;
    padding-top: 25px;
    
}

.cards :hover{
    

    transition: 1s;
}

.card-three{
 background-color: white;
 border-radius: 5px;
 height: 300px;
 padding: 20px 20px 30px 20px;
 position: relative;
 box-shadow: 2px 2px 5px grey;
}

.card-three h2{
    padding-left: 13px;
    padding-top: 20px;

}

.card-three p{
    padding-left: 13px;
    
}

.card-three h3{
    color: orange;
    padding-left:35px ;
    padding-top: 28px;
    
}

.skills{
    background-color: aliceblue;
    height: 90%;
    padding: 50px;
    margin-top: 20px;
    position: relative;
    
}


.head{
    
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding-left: 20%;

}

.skills h3{
    color: #7784e2;
    font-size: 20px;
    padding-bottom: 20px;
    padding-left:48px;
}

.head h2{
    font-size: 34px;
}

#para p{
    font-size: 20px;
    padding-top: 20px;
    padding-left: 75px;
    word-spacing: 5px;

}

#para .bold{
    color: #074b8f;
    font-size: 25px;
}

 


.CV-btn {
    display: flex;
    justify-content: center;
}

.CV-btn a{
    text-decoration: none;
    color: rgb(224, 219, 219);
    font-weight: 500;
    font-size: 24px;
    background-color: #7784e2;
    border-radius: 50px;
    padding: 16px 16px;
    margin-right: 45%;
    margin-top: 26px;
    
}

.CV-btn :hover{
    background-color:white;
    color: #7784e2;
    transition: 1s;
    border: 1px solid #7784e2;

    
}

.html-cards{

    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 20px; 
    margin-left: 70%;
    position: absolute;
    bottom: 100px;



   
}

 


.one-cards{
    background-color:#e2e2fe ;
      height: 175px;
     width: 350px;
    border-radius: 10px;
    padding-top: 18px;
    

} 

.one-cards i{
    font-size: 55px;
    color: maroon;
    padding-left: 155px;
}


.one-cards h2{
    padding-left: 40%;
    padding-top: 45px;
    color: black;
}

 
.two-cards{
    
    background-color: #e2e2fe  ;
    height: 175px;
    width: 350px;
    border-radius: 10px;
    padding-top: 18px;

    
    
}

.two-cards i{
    font-size: 55px;
    color: rgb(157, 45, 157);
    padding-left: 155px;
}


.two-cards h2{
    padding-left: 45%;
    padding-top: 45px;
    color: black;
}


.contact{
    background-color:   rgb(255, 254, 254);
    height: 700px;
    width: 100%;
}

    
.top{
    padding-left: 45%;
    padding-top: 20px;
}

.top p{
    color: #5d588a;
    font-size: 22px;
    padding-left: 45px;
}

.top h1{
    
    font-size: 40px;
    padding-top: 5px;
}

  .left-box{
    padding-left: 150px;
    position: relative;

  }
 

 .element i,h2,h3{
    padding-top: 30px;
 }

  .element i{
    color: #3c73da;
    font-size: 30px;
    position: absolute;
    
    padding-right: 10px;

     
    

  }

  .element h2{
     color: #3f396d;
      margin-top: 40px;
      font-size:34px;
      padding-left: 48px;
  }

  .element h3{
    color: rgb(200, 198, 198);
     padding-top: 5px;
    font-size:17px;
    padding-left: 40px;
    
  }


 .form-container{
    position: absolute;
    margin-left: 50%;
    top: 20px;
       width: 100%;
       max-width: 600px;
     /*  margin: 0 auto ;  */
       padding: 20px;
 }

 .form-container form{
    display: flex;
    flex-direction: column;
    gap: 15px;
 }


 .form-container input,
  .form-container textarea {
    padding: 15px 20px;
    font-size: 16px;
    font-family:  sans-serif;
    background-color: #f3f3f3;
    border: 1px solid #e0e0e0;
    border-radius: 8px;


  }

  .send-btn{

    background-color: #6c5ce7;
    color: white;
    border: none ;
    padding: 15px 40px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 30px;
    cursor: pointer;
    width: fit-content;
    margin: 10px auto 0 auto;
    transition: background-color 0.3s ,transform 0.1s;

  }


  .send-btn:hover{
    background-color: #5a4bcf;

  }

  
.Footer{
    background-color: #3f396d;
    height: 250px;
    width: 100%;
    position: relative;
}

.Footer h1{
    color: white;
    padding-left: 75px;
    padding-top: 50px;
    font-size: 40px;
}

.Footer p{
    color:rgb(179, 176, 176);
    padding-left: 140px;
    padding-top: 15px;

}

.tag{
     display: flex;
     justify-content: center;
     margin-left: 59%;
     position: absolute;
     bottom: 65%;
     gap: 20px;
}

.tag :hover{
    color: orange;
    transition: 1s ;
}

.tag a{
    text-decoration: none;
    color: rgb(179, 176, 176) ;
    font-weight:500;
    font-size: 22px;
    
     
}

.tag i{
    color: rgb(179, 176,  176);
    font-size:20px ;
}


.last{
    color: rgb(179,  176,  176);
    margin-left: 35%;
    position: absolute;
    bottom: 25px;
    font-size: 16px;
}

.last i{
    font-size: 14px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .nav {
        padding: 17px 20px 25px 20px;
    }

    .name {
        font-size: 24px;
    }

    .container a {
        font-size: 16px;
        gap: 15px;
    }

    .top-btn {
        font-size: 14px;
        padding: 8px 15px;
    }

    .box {
        height: auto;
        padding: 100px 20px;
    }

    .box h1 {
        font-size: 32px;
    }

    .box p {
        font-size: 16px;
    }

    .photo img {
        position: relative;
        right: auto;
        bottom: auto;
        width: 100%;
        max-width: 250px;
    }

    .hero-section {
        height: auto;
    }

    .hero-section .text {
        padding: 30px 20px;
    }

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

    .text h2 {
        font-size: 26px;
    }

    .cards {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }

    .card-one, .card-two, .card-three {
        height: auto;
        padding: 20px;
    }

    .skills {
        padding: 30px 20px;
        height: auto;
    }

    .head {
        padding-left: 0;
        text-align: center;
    }

    .skills h3 {
        padding-left: 0;
    }

    #para p {
        padding-left: 0;
        font-size: 16px;
        text-align: center;
    }

    .CV-btn {
        justify-content: center;
    }

    .CV-btn a {
        margin-right: 0;
    }

    .html-cards {
        position: relative;
        bottom: auto;
        margin-left: 0;
        flex-direction: column;
        align-items: center;
    }

    .contact {
        height: auto;
        padding: 30px 20px;
    }

    .top {
        padding-left: 20px;
    }

    .top p {
        padding-left: 0;
        font-size: 16px;
    }

    .top h1 {
        font-size: 28px;
    }

    .left-box {
        padding-left: 0;
    }

    .element i {
        position: relative;
        font-size: 24px;
    }

    .form-container {
        position: relative;
        margin-left: 0;
        top: auto;
        width: 100%;
    }

    .Footer {
        height: auto;
        padding: 30px 20px;
    }

    .Footer h1 {
        padding-left: 0;
        font-size: 28px;
    }

    .Footer p {
        padding-left: 0;
        font-size: 14px;
    }

    .tag {
        position: relative;
        bottom: auto;
        margin-left: 0;
        justify-content: center;
    }

    .last {
        position: relative;
        margin-left: 0;
        bottom: auto;
        text-align: center;
    }
}