*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Inter', sans-serif;
    background-color: #000000;
    color: #ffffff;
    overflow-x: hidden;
    scroll-behavior: smooth;
}
.navbar{
    position: sticky;
    top: 0;
}

.gradient-text {
    background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 300% 300%;
    animation: gradient 3s ease infinite;
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background: linear-gradient(45deg, #00ffff, #ff00ff);
    transition: width 0.3s ease;
}
.nav-link:hover::after {
    width: 100%;
}
.floating {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
    100% { transform: translateY(0px); }
}
.image{
    border: solid rgb(34 211 238 / var(--tw-border-opacity, 1));
}
.main-section{
    height: 100vh;
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 50%, #2d2d2d 100%);
}

.content{
    height: 80%;
}
.web{
    width: 55%;

}
.task{
    color: rgb(209 213 219 );
}
.web-site{
    color: rgb(156 163 175);
}
.name{
    font-size: 3em;
}
.text-writer{
    overflow: hidden; 
    white-space: nowrap; 
    border-right: 2px solid #00ffff;
    animation: typing 6s infinite;
    animation-fill-mode: forwards;
}
@keyframes typing {
    0%   { width: 0ch; }
    40%  { width: 24.5ch; } 
    60%  { width: 24.5ch; } 
    100% { width: 0ch; }  
}
.bg{
    transition: all 0.3s ease;
    background: rgb(8 145 178);
    filter: drop-shadow(0px 0px 15px rgba(0, 255, 255, 0.3));
}
.bg:hover{
    filter: drop-shadow(0px 0px 20px rgb(8 145 178) );
    transform: translateY(-2px);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.bg-cv:hover{
    background: rgb(49, 49, 49) !important;
}
.image-2:hover{
    transition-duration: 0.5s;
    transform: scale(1.03);
}
.sec-bg{
    background-color: rgb(0, 0, 0);
}
.color-1{
    color: rgb(34 211 238);
}
.color-2{
    color: rgb(192 132 252);
}
.color-3{
    color: rgb(244 114 182);
}
.color-4{
    color: rgb(74 222 128);
}
.third-bg{
    background-color: rgba(255, 255, 255, 0.05);
}
.content-bg-color{
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
.div-icon{
    height: 58px;
    width: 65px;
    background: rgb(8 145 178);

}
.line{
    background: linear-gradient(to right, #00cfff, #a64eff, #ff4ea6);
}
.div-mark{
    background: rgb(8 145 178);
}
.line-2{
    background: linear-gradient(to right, #b06cff, #ff4ea6, #ff4e4e);
}
.div-icon-2{
    background: rgb(147 51 234);
}
.content-bg-color:hover{
    transform: scale(1.03);
    transition-duration: 0.8s;
}
.div-icon-3{
    background-color: rgb(22 163 74 );
}
.line-3{
    background: linear-gradient(to right, #4ade80, #3b82f6, #a855f7);
}
@media screen and (max-width: 991px ) {
    .pic-div{
        width: 70% !important;
            overflow-x: hidden !important;
    }
}
.skill-card:hover{
    transform: scale(1.12);
    transition-duration: 0.5s;
}
input:focus {
    outline: none !important; 
    border-color: #00cfff !important;
    filter: drop-shadow(0px 0px 5px #00cfff) !important;
}
.bg-btn{
    background: rgb(0, 151, 167);
    filter: drop-shadow(0px 0px 5px #00cfff) !important;
}
textarea::placeholder{
    color: #646363 !important;
}
textarea:focus {
    outline: none !important; 
    border-color: #00cfff !important;
    filter: drop-shadow(0px 0px 5px #00cfff) !important;
}
.bg-btn:hover{
    filter: drop-shadow(0px 0px 15px #00cfff) !important;
}
.div-icon-email{
    height: 50px;
    width: 50px;
    background: rgb(8 145 178);
}
.div-icon-linked{
    height: 50px;
    width: 50px;
    background: rgb(147 51 234);
}
.div-icon-whats{
    height: 50px;
    width: 50px;
    background: rgb(22 163 74 );
}
.div-icon-what-link{
    height: 50px;
    width: 50px;
    background: rgb(22 163 74 );
}
.contact-link:hover{
    color: rgb(8 145 178) !important;
}
@media screen and (max-width: 768px ){
    .form{
        width: 95% !important;
    }
    .elabout{
        width: 100% !important;
        padding: 1em !important;
        text-align: center !important;
    }
    .kalam{
        width: 95% !important;
    }

}