* {
    box-sizing: border-box;
    border-style: none;
    font-style: normal;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

:root{
     --bold:700;
     --gap:1rem;
     --size:1.5rem;
     --mar:5rem;
}
.logo{
     width: 5rem;
     height: 5rem;
     object-fit: contain;
}
.logo +p{
     font-size: 2rem;
     font-weight: bolder;
}
.logo-div{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap:1rem;
}

.navigation-bar{
     font-family: system-ui, sans-serif;
     font-size:1.1rem;
     font-weight:var(--bold);
     color:white;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     padding:2rem 5rem;
     position: sticky;
     top:0;
     background: #22272d;
     z-index: 1000;
}
.link-div{
     display: flex;
     flex-direction: row;
     gap:3rem;
     font-size: var(--size); 
}
.link-div a{
     color:white;
}
.link-div a:hover{
      color: rgb(38, 145, 129)

}
.link-div a.active {
   color:rgb(28, 125, 109);
}
.talk-btn{
    background: linear-gradient(90deg, rgba(39, 187, 134, 1) 0%, rgba(0, 189, 149, 1) 100%);
     font-size: var(--size);
     color: white;
     padding: 1rem 2rem;
     border-radius: 1rem;
     box-shadow: 0 8px 15px rgba(0, 189, 149, 0.4);
}
.talk-btn:hover{
      box-shadow: 0 13px 20px rgba(0, 194, 154, 0.5);
      cursor: pointer;
}
#background-one{
     background-color:#22272d;
     width:100vw;
     height: 100vh;
}
.hexagon-container .shape {
  transition: filter 0.3s ease;
}

.hexagon-container:hover .shape {
  filter: url(#bottomGlowHover);
}
.introduction{
     color:white;
     font-family: sans-serif,monospace;
     margin-left: var(--mar);
     display: flex;
     flex-direction: column;
     gap:3rem;
}
.profile-sec{
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     justify-items: center;
     align-items: center;
}
.about-myself{
     text-align: justify;
     font-size: 1.2rem;
     width:75%;
}
.name-div{
     font-size: 2rem;
     display: flex;
     flex-direction: column;
     gap:1rem;
}
.hexagon{
     transform: translateY(-5rem);
}
.talk-btn-1{
     background: linear-gradient(90deg, rgba(39, 187, 134, 1) 0%, rgba(0, 189, 149, 1) 100%);
     font-size: var(--size);
     color: white;
     padding: 1.5rem 1.5rem;
     border-radius: 1rem;
     box-shadow: 0 8px 15px rgba(0, 189, 149, 0.4);
     width:15%;
}
.talk-btn-1:hover{
     box-shadow: 0 20px 27px rgba(0, 194, 154, 0.5);
      cursor: pointer;
}
.icon-div{
     font-family: sans-serif,monospace;
     font-size: var(--size);
     color:white;
     margin-left: var(--mar);
     display: flex;
     flex-direction:row;
     align-items: center;
     gap:2rem;
}
.icon-div a{
     color:white;
     transition: all 0.3s ease;
}
.icon-div a:hover{
     transform:translateY(-1rem) scale(1.5);
     color:#006df1;
}
#background-two{
     background-color:#151c24;
     width:100vw;
     height: 100vh;
}

@media (max-width: 768px) {
    .link-div,.talk-btn{
     display: none;
    }
    .three-dot{
        position:absolute;
        right: 1rem;   
     }
    .logo{
     width: 2rem;
     height: 2rem;
}
.logo +p{
     font-size: 1.2rem; 
}
.logo-div{
    gap:0.2rem;
}
.navigation-bar{
     padding:1rem;
}
.column-nav{
     display:flex;
     flex-direction: column;
     font-size: 1rem;
     float: right;
     text-align: left;
     gap:1rem;
     background-color:#181f28;
     padding:1rem;
     position:fixed;
     right: 1rem;
     z-index: 1000;
     border-radius:10px;
     font-family: monospace,sans-serif;
     transform: translateY(-1rem);
}
#background-one{
     height: 110vh;
}  
   .introduction{
     flex-direction: column;
     margin:0 1rem;
   }
   .name-div{
     font-size:1.5rem;
   }
   .profile-sec{
     flex-direction: column-reverse;
     gap:10rem;
   }
   .about-myself{
     width:100%;
     font-size: 1rem;
   }
   .talk-btn-1{
      width: 100%;
      padding: 1rem;
   }
   .hexagon{
     transform: scale(2) translate(-0.5rem,2rem);
   }
   .icon-div{
     font-size: 1.3rem;
     margin:2.5rem 1rem 0rem 1rem;
     gap:1rem;
     max-width:100%;
   }
}