*{
    margin:0;
    padding:0;
}
body{
    display:grid;
    background:url("https://img.freepik.com/free-vector/gradient-white-monochrome-background_23-2149017048.jpg?uid=R176801158&ga=GA1.1.543813015.1742283983&semt=ais_hybrid");
    background-size: cover;
}
.navbar{
    display:flex;
    justify-content:space-between;
    background-color:white;
    box-shadow:0px 0px 10px grey;
    padding:25px;
    margin:20px;
    border-radius:20px;
}
.navbar h1 span{
    color:red;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.nav-link ul li{
    display:inline-block;

}
.nav-link a{
    color:grey;
    margin:15px;
    font-size:20px;
    text-decoration:none;
    font-family:Verdana, Geneva, Tahoma, sans-serif;
}
.nav-link a:hover{
    background-color:rgb(73, 167, 170);
    border-radius:20px;
    padding:10px;
    color:white;
    transition:0.1s ease-in;
}
.container{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:6%;
    
}
.hero-text p{
    text-align:center;
    font-size:20px;
    font-family:'Times New Roman', Times, serif;
    margin:10px;
}
.hero-text h5{
    text-align:center;
}
.hero-text h1{
    text-align:center;
}
.hero-text h5 span{
    color:red;
    font-size:25px;

}
.hero-text h5{
    font-size:19px;
}
.hero-text h1{
    font-size:30px;
    margin-top:15px;
}
.hero-logo{
    width:300px;
    height:300px;
    border-radius:50%;
    overflow:hidden;
    border:10px solid rgb(73, 95, 93);
    box-shadow:5px 7px 25px rgba(0,0,0,0.5);
}
.hero-logo img{
    height:100%;
    width:100%;
    transition:0.5;
   
}
.hero-logo img:hover{
    transform: scale(1.2);
}
.hero-text{
    margin:30px;
}
.social-media{
    display:flex;
    align-items:center;
    justify-content:center;
}
.social-media i{
    margin:15px;
   font-size:2rem;
}
.skill h3{
text-align:center;
margin-top:5rem;
font-size:35px;

}
.flex-box{
    display:flex;
    align-items:center;
    justify-content:center;
    
}
.flex-box .box{
    box-shadow:0px 0px 10px grey;
    border-radius:20px;
    margin:1rem;
    width:200px;
    height:200px;
    display:grid;
    align-items:center;
    justify-content:center;
    
}
.flex-box .box img{
    width:100px;
    height:100px;
    border-radius:50px;
}
.flex-box .box h1{
    text-align:center;
}
.btn{
    display:flex;
    align-items:center;
    justify-content:center;
}
.btn button{
    border:none;
    background-color:rgb(49, 73, 49);
    padding:20px;
    border-radius:20px;
    color:white;
    cursor:pointer;
    margin:10px;
}
.btn button:hover{
    box-shadow:0px 0px 10px green;
    background-color:rgb(55, 102, 55);
    transition: 0.1s ease-in;
}
@media screen and (max-width:767px){
    .flex-box{
        display:grid;
    }
}
@media screen and (max-width:767px) {
    .navbar{
        display:grid;
        align-items:center;
        justify-content:space-around;
        
    }
}