*{margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
   
    }
    body{background-color: #3a3a3a;}
    img{max-width: 100%;
      height: 100%; 
      border-radius: 20px;
    }
    /* color{#a7c957
      #6a994e;
      #386641
    } */
         /* font */
    .roboto-thin {
        font-family: "Roboto", sans-serif;
        font-weight: 100;
        font-style: normal;
      }
      /* font */
      .oleo-script-regular {
        font-family: "Oleo Script", serif;
        font-weight: 400;
        font-style: normal;
      }
      
      .oleo-script-bold {
        font-family: "Oleo Script", serif;
        font-weight: 700;
        font-style: normal;
      }
      

          /* header */
      .header-wrapper{width: 100%;
        min-height: 10vh;
        position: sticky;
        top:0%;
        left: 0%;
       z-index: 999;
     
    }    
    p{font-size: clamp(20px, 1.5vh,30px);
        font-family:"Roboto", sans-serif; 
        font-weight: 200;
        line-height: 160%;
    }
    button{
        padding: 20px 40px;
        border-radius: 20px;
        background-color: #eaa30b;
      
    margin: 20px;
    color: #1f1e1e;
    font-size: clamp(16px,1vh,20px);
    box-shadow: 0px 0px 30px rgba(252, 125, 41, 0.5);
    transition: all 0.3s ease-in-out;
    }
    button{font-size: 16px;
        font-weight: 500;
        padding: 12px 35px;
        background-color: #eaa30b; ;
        color: var(--text-color2);
        border-radius: 20px;
        margin:20px;
        box-shadow: 0px 0px 30px rgba(234, 93, 11, 0.5);
        /* transition: all 0.3s ease-in-out; */
        }
        button:hover{
            font-size:18px ;
            background-color: transparent;
            cursor: pointer; 
            border: 2px solid rgb(234, 93, 11) ;
            /* transform: scale(1.05); */
        }
        
    .container{max-width: 1200px;
        height: 100%;
        margin: auto;
        padding:10px 40px;
        overflow-x: hidden;
        
    }
    /* common stylling */

    .header-row{display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
    }
 .header-wrapper .logo a {
        color: #eaa30b;
        font-size:50px ;
      font-family: "Oleo Script", serif;
        font-weight: 400;
        font-style: normal;}
    /* .logo img{width: 80px;} */
    .logo,.manu{flex: 1;}
    .header-wrapper .manu ul{display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap:30px;
        list-style: none;
    
    }
    .header-wrapper a{text-decoration: none;
        font-size: clamp(1.2rem,2vh,3rem);
        font-family:"Roboto", sans-serif;
        font-weight: 900 ;
        cursor: pointer;
        color:antiquewhite ;
    }
    .header-wrapper a:hover{
      
        color: aliceblue;
        cursor: pointer;
        font-size:20px ;
            color:  #eaa30b;
   
         }
         /* .header-wrapper a:hover{
            font-size:18px ;
            color: rgb(234, 29, 11);
            cursor: pointer; 
        } */
    .hamberger {display: none;}
    .float-icon{position: fixed;
       top:80%;
       right: 5%;
       color:#eaa30b;
       font-size: 60px;
    }

    /* <!-- banner --> */

    .home .row .home-info{
        flex: 2;
        max-width: 60%;
        min-width: 400px;
        padding-block: 20px;
        padding-right: 30px;
        margin-right: 30px;
    }
    .home .row{display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
    }
    .home .row .home-img{
        flex: 1;
        max-width: 40%;
        max-width: 400px; 
        min-width: 300px;
      
    }
    .home{
       
        display: flex;
        color: var(--text-color2);
    }
    .home .row img{
        height: 400px;
        border-radius: 50%;
        object-fit: cover;
        /* border:3px solid  rgb(234, 29, 11);  */
        box-shadow: 0px 0px 30px  rgb(234, 93, 11);
        }
        .home .row img:hover{
            height: 500px;
            border-radius: 50%;
            object-fit: cover;
            border:3px solid   rgb(234, 93, 11); 
            box-shadow: 0px 0px 30px rgba rgb(234, 93, 11);
        }
    
    .home .row h3{font-size: 40px;
        margin: 15px 0;
        font-weight: 500;
        color: antiquewhite;
    }
    .home .row h3 span.name{
        font-family: "monstserrat",sans-sarif;
        font-size:50px;
        color: #eaa30b;
        font-weight: 700;
        letter-spacing: 2px;
       }
    .home .row h3 span.hellow{
        font-size: 20px;
        color: antiquewhite;
    }
    .home .row h4{
        font-weight: 500;
        font-size: 23px;
        margin: 15px 0;
        color: antiquewhite;
    }
    .home .row h4 span{
        color:   #eaa30b;;
    
    }
    .home-info p{margin-bottom: 20px;
     font-weight: 100;
    line-height: 160%;
    letter-spacing: .5px;
    color: antiquewhite;
    }
    .home-info .social-icon{
        font-size: 25px;
        margin-bottom: 60px;
        }
    .home-info .social-icon i{
        box-shadow: 0px 0px 30px   rgb(234, 93, 11); 
        margin: 10px;
        color: antiquewhite;
        padding: 10px;
        border-radius: 20px;
    }
    .home-info .social-icon i:hover{
        font-size:30px ;
        color:  rgb(234, 93, 11); 
        cursor: pointer; 
    }
   
    /* .home-info button.contact{background-color: transparent;
    border: 2px solid   rgb(234, 93, 11); 
    color: antiquewhite;
   
    }
    .home-info button.contact:hover{background-color: #eaa30b;
    color: antiquewhite;
    } */
    

  .flex{display: flex;
   flex-wrap: wrap;
   align-items: center;
}

/* <!-- about me --> */

.about-wrapper{color: antiquewhite;
  text-align: center;
}

.about-wrapper h1{padding-block: 20px;
    font-size:50px;
}
.about-wrapper h3
{padding-block:5px;
    font-size:30px;
}

.about-wrapper .about-text h4{padding-block: 10px;
font-size:25px;
}

.about-wrapper .about{justify-content: space-between;}
.about-wrapper .about-text,.personal-info{flex: 1;}

.about-wrapper .personal-info{background-color: #eaa30b;
  border-radius: 20px;
  padding-block: 20px;
  color: #1f1e1e;
  font-size: 20px;
  font-weight: 600;
}

.about-wrapper button.read{background-color: #1f1e1e;
  color: antiquewhite;
}
/* <!-- skill   --> */
.skill-wrapper{text-align: center;
 color: antiquewhite;
}
.skill-wrapper h1{padding-block: 20px;
    font-size:50px;
}
.skill-wrapper .skill-logo img{flex: 1;
  max-width: 100px;

}
.skill-wrapper .skill-logo{justify-content: space-around;
padding-block: 20px;
}

/* <!-- <my-work></my-work> --> */
.my-work-wrapper .card-grp{flex: 1;
    justify-content: center;
    gap: 20px;
}
.my-work-wrapper .card-grp img{max-width: 350px;
min-height: 500px;
margin-block: 10px;
}
.my-work-wrapper .card-grp img.id-card{max-height: 500px;}
.card-grp img.info{min-height: 500px;}




















        /* breakpoint */
@media screen and (min-width: 300px) and (max-width:576px){
    .hamberger {display: block;
        margin-left: 20px;
       color:  #386641;
    }
    .header-wrapper .manu{display: none;}
    /* .hamberger span :hover{.manu()} */
  
}