html{
scroll-behavior:smooth;
}

*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:'Roboto',sans-serif;
    letter-spacing:.7px;
}

body{
    margin:0;
    background:linear-gradient(120deg,#dfe6ee,#f5f7fa,#e6edf7);
    transition:background 0.4s,color 0.4s;
    background:linear-gradient(-45deg,#dfe6ee,#f5f7fa,#e6edf7,#eef2f7);
    background-size:400% 400%;
    animation:gradientMove 15s ease infinite;
}
@keyframes gradientMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}
html, body{
    margin:0;
    padding:0;
}

/* NAVBAR */

.navbar{
    position:sticky;
    top:0;
    z-index:1000;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:18px 40px;

    background:rgba(255,255,255,0.25);
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    border-bottom:1px solid rgba(255,255,255,0.5);
    box-shadow:0 8px 25px rgba(0,0,0,0.08);

        box-shadow:
    0 8px 30px rgba(0,0,0,0.08),
    0 0 15px rgba(59,108,255,0.15);
}

.nav-right{
    display:flex;
    align-items:center;
    gap:20px;
}

.logo{
    font-size:22px;
    font-weight:700;
    color:#111;
}

.nav-links{
    display:flex;
    gap:25px;
    list-style:none;
}

.nav-links a{
    position:relative;
    font-weight:500;
    text-decoration:none;
    color:#222;
    transition:0.25s;
}

.nav-links a::after{
    content:"";
    position:absolute;
    width:0;
    height:2px;
    left:0;
    bottom:-5px;
    background:#3b6cff;
    transition:0.3s;
}

.nav-links a:hover::after{
    width:100%;
}
    .nav-links a,
    .nav-links a:hover{
    text-decoration:none;
    }

/* HERO */

.hero{
    animation:fadeIn 1s ease forwards;
    min-height:45vh;

    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;

    padding:120px 20px 80px 20px;

    width:100%;
    
    background:linear-gradient(135deg,#eef2f7,#f8fafc);
    position:relative;
    overflow:hidden;
}

@keyframes fadeIn{
    from{
    opacity:0;
    transform:translateY(20px);
    }
    to{
    opacity:1;
    transform:translateY(0);
    }
}

.hero h1{
    font-size:58px;
    font-weight:700;

    background:linear-gradient(90deg,#3b6cff,#6f9cff);
    -webkit-background-clip:text;
    color:transparent;
    text-shadow:
0 0 10px rgba(59,108,255,0.3),
0 0 20px rgba(59,108,255,0.2);
}

.hero p{
    font-size:20px;
    color:#666;
    margin-bottom:30px;
}

.hero-buttons{
    display:flex;
    gap:15px;
    justify-content:center;
}
    .hero a,
    .hero a:hover{
    text-decoration:none;
    }
/* BUTTONS */

.btn{
    padding:12px 26px;
    background:#3b6cff;
    color:white;
    border-radius:10px;
    font-weight:500;
    text-decoration:none;
    transition:all .25s ease;
}

.btn:hover{
    transform:translateY(-3px);
    box-shadow:
    0 0 10px #3b6cff,
    0 0 25px #3b6cff,
    0 0 40px rgba(59,108,255,0.6);
}

.btn-outline{
    padding:12px 26px;
    border:2px solid #3b6cff;
    color:#3b6cff;
    border-radius:10px;
    font-weight:500;
    text-decoration:none;
    transition:all .25s ease;
}

.btn-outline:hover{
    background:#3b6cff;
    color:white;
    transform:translateY(-3px);
    box-shadow:
    0 0 10px #3b6cff,
    0 0 25px #3b6cff,
    0 0 40px rgba(59,108,255,0.6);
}

/* PAGE LAYOUT */

.page-wrapper{
    display:flex;
    max-width:1100px;
    width:95%;
    margin:auto;
    padding:40px;
    gap:40px;

    background:white;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    align-items:flex-start;
    margin-bottom:25px;
}

.side1{
    width:60%;
    }

    .side2{
    width:46%;
}

.wrapper{
    margin-bottom:15px;
}

/* TEXT */

h1{
        font-size:26px;
        margin-bottom:12px;
        border-bottom:2px solid #eee;
        padding-bottom:6px;
        font-weight:600;
}


h2{
    font-size:16px;
}

.side1 h2{
    font-size:18px;
    margin-top:8px;
}

p{
    line-height:1.7;
    font-size:14px;
    color:#444;
}

li{
    list-style:none;
}

/* PROFILE */

.profile-box{
    text-align:center;
    margin-top:10px;
}

.profile-pic{
    width:160px;
    height:160px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:12px;
    border:4px solid white;

box-shadow:
    0 10px 25px rgba(0,0,0,0.15),
    0 0 15px rgba(59,108,255,0.35);
    animation:float 4s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-8px);}
100%{transform:translateY(0);}
}

.profile-name{
    font-size:20px;
    font-weight:600;
    margin-top:5px;
}

.profile-role{
    font-size:14px;
    color:#666;
    margin-bottom:8px;
}

.social-links a{
    margin:0 6px;
    color:#3b6cff;
    font-size:13px;
}

/* LINKS */

a{
    color:#2c2a2b;
    text-decoration:none;
    font-weight:500;
}

a:hover{
    text-decoration:underline;
}

/* CARDS */

.card-1,
.card-2{
    background:#f1f1f1;
    padding:12px;
    border-radius:8px;
    margin-bottom:12px;
    transition:transform .25s ease, box-shadow .25s ease;
    transform-style:preserve-3d;
}

.card-1:hover,
.card-2:hover{
    transform:translateY(-6px) scale(1.02);
    box-shadow:
    0 20px 40px rgba(0,0,0,0.12),
    0 0 20px rgba(59,108,255,0.25);
}

.card-2:hover{
box-shadow:
    0 5px 15px rgba(0,0,0,0.1),
    0 0 15px rgba(59,108,255,0.35);
}

/* TYPING TEXT */

#typing{
    color:#3b6cff;
    font-weight:500;
    font-size:18px;
}

#typing::after{
    content:"|";
    margin-left:3px;
    animation:blink 1s infinite;
}

@keyframes blink{
    0%{opacity:1;}
    50%{opacity:0;}
    100%{opacity:1;}
}

/* MOBILE */

@media only screen and (max-width:900px){

.page-wrapper{
    flex-direction:column;
    padding:20px;
    width:95%;
}

.side1,
.side2{
    width:100%;
}

.navbar{
    padding:15px 20px;
}

.hero h1{
    font-size:38px;
}

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

}

/* Menu Bar for mobile */

/* MOBILE NAVBAR */
.menu-toggle{
    display:none;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.menu-toggle span{
    width:26px;
    height:3px;
    background:#111;
    border-radius:3px;
    transition:0.35s;
}

/* animation when menu open */

.menu-toggle.active span:nth-child(1){
    transform:rotate(45deg) translate(5px,5px);
}

.menu-toggle.active span:nth-child(2){
    opacity:0;
}

.menu-toggle.active span:nth-child(3){
    transform:rotate(-45deg) translate(6px,-6px);
}

@media (max-width:900px){

.menu-toggle{
    display:flex;
    flex-direction:column;
    gap:5px;
    cursor:pointer;
}

.nav-links{
    position:absolute;
    top: 69px;
    left:0;
    width:100%;
    background:white;

    flex-direction:column;
    align-items:center;

max-height:0;
    overflow:hidden;
    transition:max-height 0.35s ease;
}

.nav-links.active{
    max-height:400px;
    padding:20px 0;
}

.nav-links{
    flex-direction:column;
    gap:18px;
}

.nav-links li{
    margin:8px 0;
}

}

/* DARK MODE */
/* THEME TOGGLE BUTTON */

#theme-toggle{
    display:flex;
    align-items:center;
    justify-content:center;

    width:38px;
    height:38px;

    border-radius:50%;
    border:none;

    background:linear-gradient(145deg,#f0f0f0,#dcdcdc);
    box-shadow:
    0 4px 10px rgba(0,0,0,0.15),
    inset 0 1px 2px rgba(255,255,255,0.5);

font-size:16px;
    cursor:pointer;
    transition:all 0.3s ease;
}

#theme-toggle:hover{
    transform:scale(1.1);
    box-shadow:
    0 6px 18px rgba(0,0,0,0.25),
    0 0 10px rgba(59,108,255,0.3);
}

body.dark #theme-toggle{
    background:linear-gradient(145deg,#1e293b,#0f172a);
    color:#e2e8f0;
    box-shadow:
    0 4px 15px rgba(0,0,0,0.5),
    0 0 10px rgba(96,165,250,0.4);
}

body.dark{
    background:#0f172a;
    color:#e2e8f0;
}

body.dark .navbar{
    background:rgba(15,23,42,0.7);
    border-bottom:1px solid rgba(255,255,255,0.1);
}

body.dark .hero{
    background:linear-gradient(135deg,#0f172a,#1e293b);
}

body.dark .page-wrapper{
    background:#1e293b;
    box-shadow:0 10px 25px rgba(0,0,0,0.4);
}

body.dark p{
    color:#cbd5f5;
}

body.dark h1{
    color:#e2e8f0;
    border-bottom:2px solid #334155;
}

body.dark .card-1,
body.dark .card-2{
    background:#0f172a;
}

body.dark a{
    color:#60a5fa;
}

body.dark .logo{
    color:#e2e8f0;
}

/* SCROLL REVEAL ANIMATION */

.fade-in{
    opacity:0;
    transform:translateY(40px);
    transition:all 0.8s ease;
}

.fade-in.show{
    opacity:1;
    transform:translateY(0);
}

/* PAGE TRANSITION */

/* PAGE TRANSITIONS */

body{
    opacity:1;
    transform:translateY(0);
    transition:opacity 0.35s ease, transform 0.35s ease;
}

body.fade-out{
    opacity:0;
    transform:translateY(30px);
}

/* page enters smoothly */
body.fade-in{
    opacity:0;
    transform:translateY(-30px);
    animation:pageIn 0.35s forwards;
}

@keyframes pageIn{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* INTRO LOADER */

#intro-loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100vh;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#0f172a;
    z-index:9999;

    transition:opacity 0.6s ease, visibility 0.6s ease;
}

.intro-text{
    font-size:42px;
    font-weight:700;
    color:white;
    letter-spacing:2px;

animation:introReveal 1.5s ease forwards;
}

@keyframes introReveal{
    0%{
        opacity:0;
        transform:translateY(40px);
    }
    100%{
        opacity:1;
        transform:translateY(0);
}
}

#intro-loader.hide{
    opacity:0;
    visibility:hidden;
}

/* MOUSE GLOW EFFECT */

.cursor-glow{
    position:fixed;
    width:320px;
    height:320px;
    background:radial-gradient(circle, rgba(59,108,255,0.35) 0%, rgba(59,108,255,0) 70%);
    pointer-events:none;
    border-radius:50%;
    transform:translate(-50%,-50%);
    z-index:9999;
    filter:blur(50px);
}


/* PARTICLE BACKGROUND */
#particles{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index: 0;
}






/* Contact Form */
.social-links{
display:flex;
gap:18px;
margin-top:10px;
}

.social-links a{
font-size:26px;
color:#3b6cff;
transition:all 0.3s ease;
}

.social-links a:hover{
color:white;
transform:translateY(-3px) scale(1.15);

text-shadow:
0 0 10px #3b6cff,
0 0 20px #3b6cff;
}

.social-links{
display:flex;
gap:18px;
margin-top:10px;
}

.icon{
position:relative;
font-size:26px;
color:#3b6cff;
transition:0.3s;
}

.icon:hover{
transform:translateY(-4px) scale(1.1);
color:white;

text-shadow:
0 0 10px #3b6cff,
0 0 20px #3b6cff;
}

.tooltip{
position:absolute;
bottom:35px;
left:50%;
transform:translateX(-50%);
background:#111827;
color:white;
padding:5px 10px;
border-radius:6px;
font-size:12px;

opacity:0;
pointer-events:none;
transition:0.25s;
white-space:nowrap;
}

.icon:hover .tooltip{
opacity:1;
bottom:45px;
}

.input-group{
position:relative;
margin-bottom:20px;
}


.input-group input,
.input-group textarea{
width:100%;
padding:14px 12px;
border:1px solid rgba(255,255,255,0.2);
border-radius:8px;
background:transparent;
color:inherit;
font-size:14px;
}

.input-group label{
position:absolute;
left:12px;
top:14px;
color:#6b7280;
font-size:14px;
pointer-events:none;
transition:0.25s ease;
}
body.dark .input-group label{
background:#1e293b;
color:#9ca3af;
}

/* move label up when typing */

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label{
top:-8px;
left:10px;
font-size:12px;
color:#3b82f6;
background:white;
padding:0 6px;
border-radius:4px;
}

body.dark .input-group input:focus + label,
body.dark .input-group input:not(:placeholder-shown) + label,
body.dark .input-group textarea:focus + label,
body.dark .input-group textarea:not(:placeholder-shown) + label{
background:#1e293b;
}

.success-message{
display:none;
margin-top:10px;
color:#22c55e;
font-weight:500;
}

.hidden{
display:none;
}



.contact-section{
max-width:1000px;
margin:100px auto;
padding:40px;

background:rgba(255,255,255,0.08);
backdrop-filter:blur(15px);

border-radius:14px;

box-shadow:
0 15px 40px rgba(0,0,0,0.35),
0 0 20px rgba(59,108,255,0.2);
}

.contact-container{
display:flex;
gap:40px;
margin-top:30px;
justify-content:space-between;
}

.contact-info{
width:40%;
text-align:left;
}

.contact-form{
width:60%;
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border-radius:8px;
border:1px solid #ccc;
font-size:14px;
}

.contact-form button{
padding:12px;
border:none;
background:#3b6cff;
color:white;
border-radius:8px;
cursor:pointer;
font-weight:500;
transition:0.25s ease;
}

.contact-form button:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(59,130,246,0.5); 
}


.contact-social a{
margin-right:12px;
color:#3b6cff;
font-weight:500;
}

.contact-form input:focus,
.contact-form textarea:focus{
outline:none;
border:1px solid #3b82f6;

box-shadow:
0 0 8px rgba(59,130,246,0.5),
0 0 18px rgba(59,130,246,0.2);
}

.contact-card{
transition:transform 0.2s ease;
transform-style:preserve-3d;
}

.side1 .social-links {
    display:flex;
    justify-content:center;
    gap:20px;
    margin-top:10px;
}







.whatsapp-float{
position:fixed;
bottom:25px;
right:25px;
width:55px;
height:55px;

background:#25D366;
color:white;

display:flex;
align-items:center;
justify-content:center;

font-size:28px;
border-radius:50%;

box-shadow:0 10px 25px rgba(0,0,0,0.25);
z-index:1000;

transition:all 0.3s ease;
}

.whatsapp-float:hover{
text-decoration: none;
transform:scale(1.1);
box-shadow:
0 0 10px #25D366,
0 0 25px #25D366;
}






/* footer */
.footer{
text-align:center;
margin-top:80px;
padding:25px;

border-top:1px solid rgba(255,255,255,0.1);
color:#9ca3af;
font-size:14px;
}

.footer-socials{
margin-top:10px;
}

.footer-socials a{
margin:0 10px;
font-size:20px;
color:#60a5fa;
transition:0.3s;
}

.footer-socials a:hover{
color:white;
transform:scale(1.2);

text-shadow:
0 0 10px #3b82f6,
0 0 20px #3b82f6;
}


/* Project Cards */

#projects{
padding:120px 10%;
text-align:center;
position:relative;
z-index:1;
}

#projects h2{
font-size:28px;
margin-bottom:10px;
}

.projects-container{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
gap:35px;
margin-top:60px;
max-width:1200px;
margin-left:auto;
margin-right:auto;
}

.project-card{
background:rgba(25,25,25,0.9);
border-radius:14px;
overflow:hidden;
transition:all 0.35s ease;

box-shadow:
0 10px 25px rgba(0,0,0,0.25);

display:flex;
flex-direction:column;
justify-content:space-between;
}

.project-card:hover{
transform:translateY(-12px) scale(1.02);

box-shadow:
0 25px 45px rgba(0,0,0,0.45),
0 0 20px rgba(59,108,255,0.3);
}

/* thumbnail */

.project-img{
width:100%;
height:190px;
object-fit:cover;
border-bottom:1px solid rgba(255,255,255,0.08);
}

/* content */

.project-card h3{
margin-top:18px;
font-size:20px;
color:white;
padding:0 20px;
}

.project-desc{
padding:10px 20px 5px 20px;
font-size:14px;
color:#cfcfcf;
line-height:1.6;
}

/* buttons */

.project-links{
display:flex;
justify-content:center;
gap:14px;
padding:20px;
}

.project-links a{
background:#3b6cff;
color:white;
padding:9px 18px;
border-radius:8px;
font-size:14px;
transition:all 0.25s ease;
text-decoration: none;
}

.project-links a:hover{
background:#5a85ff;
color: #0f172a;

transform:translateY(-2px);

box-shadow:
0 0 10px rgba(59,108,255,0.6),
0 0 20px rgba(59,108,255,0.4);
}
.project-image-wrapper{
position:relative;
overflow:hidden;
}

.project-img{
width:100%;
height:200px;
object-fit:cover;
display:block;
}

/* overlay */

.project-overlay{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;

background:rgba(0,0,0,0.65);

display:flex;
align-items:center;
justify-content:center;
gap:15px;

opacity:0;
transition:0.35s;
}

/* show overlay on hover */

.project-image-wrapper:hover .project-overlay{
opacity:1;
}

/* buttons */

.project-overlay a{
background:#3b6cff;
color:white;
padding:10px 18px;
border-radius:8px;
font-size:14px;
text-decoration:none;
transition:0.25s;
}

.project-overlay a:hover{
background:#5a85ff;

box-shadow:
0 0 10px rgba(59,108,255,0.6),
0 0 20px rgba(59,108,255,0.4);
}