@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Poppins,sans-serif;

}


body{

min-height:100vh;
background:
linear-gradient(135deg,#020617,#07182e);

color:white;
overflow-x:hidden;

}



/* Loading */


.loader{

position:fixed;
width:100%;
height:100vh;
background:#020617;

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

z-index:999;

}


.loader-logo{

font-size:70px;
font-weight:700;

color:#00bfff;

text-shadow:

0 0 10px #00bfff,
0 0 40px #00bfff;

animation:pulse 2s infinite;

}



@keyframes pulse{

50%{

opacity:.5;

}

}



/* Glow */


.glow{

position:absolute;
border-radius:50%;
filter:blur(150px);

}


.glow-one{

width:400px;
height:400px;
background:#009dff;

top:-100px;
left:-100px;

}


.glow-two{

width:300px;
height:300px;
background:#0066ff;

right:-100px;
bottom:100px;

}




/* Header */


header{

width:90%;
margin:auto;

padding:30px 0;

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

}


.logo{

font-size:22px;
letter-spacing:5px;

color:white;

}


.logo span{

color:#00bfff;

text-shadow:

0 0 15px #00bfff;

}



nav a{

color:white;
text-decoration:none;

margin-left:25px;

transition:.3s;

}



nav a:hover{

color:#00bfff;

}





/* Hero */


.hero{

height:80vh;

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

text-align:center;

}



.hero-content h1{

font-size:55px;

}



.hero-content span{

color:#00bfff;

text-shadow:

0 0 20px #00bfff;

}



.hero-content p{

margin:25px 0;

color:#b8c7dc;

font-size:18px;

}



button{

padding:15px 35px;

border:none;

border-radius:30px;

background:#00bfff;

color:white;

font-size:16px;

cursor:pointer;

box-shadow:

0 0 25px #00bfff;

transition:.3s;

}



button:hover{

transform:translateY(-5px);

}



@media(max-width:768px){


header{

flex-direction:column;

gap:25px;

}


nav a{

margin:10px;

}


.hero-content h1{

font-size:35px;

}


}

/* PROFILE SECTION */


.profile{

width:90%;
margin:100px auto;

display:flex;

justify-content:center;

align-items:center;

gap:70px;

flex-wrap:wrap;

}



/* IMAGE */


.profile-image{

perspective:1000px;

}


.image-frame{

width:320px;

height:400px;

padding:10px;

border-radius:30px;

background:

linear-gradient(
135deg,
#00bfff,
#004cff
);


box-shadow:

0 0 40px #00bfff;


transform-style:preserve-3d;

transition:.5s;

}



.image-frame:hover{

transform:

rotateY(15deg)
rotateX(10deg)
scale(1.05);

}



.image-frame img{


width:100%;

height:100%;

object-fit:cover;

border-radius:25px;

background:#111827;

}




/* INFORMATION */


.profile-info{

max-width:550px;

}



.profile-info h2{

font-size:40px;

}



.profile-info span{

color:#00bfff;

text-shadow:

0 0 20px #00bfff;

}



.profile-info p{

margin-top:20px;

color:#b8c7dc;

line-height:1.8;

}




/* GLASS CARD */


.info-card{


margin-top:35px;

display:grid;

gap:15px;


}



.info-card div{


background:

rgba(255,255,255,.06);


border:

1px solid rgba(255,255,255,.1);


backdrop-filter:

blur(20px);


padding:20px;

border-radius:20px;


transition:.3s;


}



.info-card div:hover{


transform:translateX(10px);

box-shadow:

0 0 25px #00bfff55;


}



.info-card h3{

color:#00bfff;

}




@media(max-width:768px){


.image-frame{

width:260px;

height:330px;

}


.profile-info h2{

font-size:30px;

}


}

/* SKILLS */


.skills,
.certificate{

width:90%;

margin:120px auto;

}



.skills h2,
.certificate h2{

text-align:center;

font-size:35px;

margin-bottom:50px;

color:#00bfff;

text-shadow:

0 0 20px #00bfff;

}




.skill-container{

display:grid;

gap:25px;

}



.skill-card{


background:

rgba(255,255,255,.05);


backdrop-filter:

blur(20px);


padding:25px;

border-radius:20px;


border:

1px solid rgba(255,255,255,.1);


}



.skill-title{

display:flex;

justify-content:space-between;

margin-bottom:15px;

}




.bar{


height:12px;

background:#111827;

border-radius:20px;

overflow:hidden;


}



.progress{

height:100%;

background:

linear-gradient(
90deg,
#00bfff,
#005eff
);


border-radius:20px;


animation:

loading 2s ease;


}



.html{

width:100%;

}


.css{

width:100%;

}


.bs{

width:100%;

}

.js{

width:50%;

}


.python{

width:80%;

}

.django{

width:70%;

}



@keyframes loading{


from{

width:0;

}


}





/* TABLE */


table{


width:100%;

border-collapse:collapse;


overflow:hidden;

border-radius:20px;


}



th{


background:#008cff;

padding:18px;


}



td{


padding:18px;

text-align:center;


background:

rgba(255,255,255,.05);


border-bottom:

1px solid rgba(255,255,255,.1);


}



tr:hover td{


background:

rgba(0,191,255,.15);


}


/* PROJECTS */


.projects,
.timeline{

width:90%;

margin:120px auto;

}



.projects h2,
.timeline h2{

text-align:center;

font-size:35px;

color:#00bfff;

margin-bottom:50px;

text-shadow:

0 0 20px #00bfff;

}




.project-container{


display:grid;

grid-template-columns:

repeat(auto-fit,minmax(280px,1fr));


gap:30px;


}




.project-card{


background:

rgba(255,255,255,.06);


backdrop-filter:

blur(20px);


border-radius:25px;


padding:35px;


border:

1px solid rgba(255,255,255,.1);


transition:.5s;


text-align:center;


}



.project-card:hover{


transform:

translateY(-15px)
rotateX(8deg);


box-shadow:

0 0 40px #00bfff55;


}



.project-icon{


width:70px;

height:70px;

margin:auto;

display:flex;

align-items:center;

justify-content:center;


border-radius:50%;


background:#00bfff;


font-size:25px;


margin-bottom:25px;


}



.project-card h3{

margin-bottom:15px;

}


.project-card p{

color:#b8c7dc;

line-height:1.7;

}




.project-card a{


display:inline-block;

margin-top:20px;

padding:10px 25px;

border-radius:20px;

background:#008cff;

color:white;

text-decoration:none;


}




/* TIMELINE */


.timeline-box{


border-left:

3px solid #00bfff;


padding-left:40px;


}



.timeline-item{


background:

rgba(255,255,255,.06);


backdrop-filter:

blur(20px);


padding:25px;


margin-bottom:30px;


border-radius:20px;


position:relative;


}



.timeline-item span{


color:#00bfff;

font-weight:bold;


}



.timeline-item::before{


content:"";


position:absolute;


left:-52px;


top:30px;


width:20px;

height:20px;


background:#00bfff;


border-radius:50%;


box-shadow:

0 0 20px #00bfff;


}

/* SOCIAL */


.social-section{


width:90%;

margin:120px auto;

text-align:center;


}



.social-section h2{


font-size:35px;

color:#00bfff;


margin-bottom:40px;


text-shadow:

0 0 20px #00bfff;


}



.social-container{


display:flex;

justify-content:center;

flex-wrap:wrap;

gap:25px;


}



.social-card{


padding:18px 40px;


background:

rgba(255,255,255,.06);


backdrop-filter:

blur(20px);


border-radius:30px;


border:

1px solid rgba(255,255,255,.1);


color:white;


text-decoration:none;


transition:.4s;


}



.social-card:hover{


background:#00bfff;


box-shadow:

0 0 30px #00bfff;


transform:

translateY(-8px);


}





/* FOOTER */


footer{


margin-top:100px;


padding:50px 20px;


text-align:center;


background:

rgba(255,255,255,.05);


backdrop-filter:

blur(25px);


border-top:

1px solid rgba(255,255,255,.1);


}



footer h3{


font-size:30px;


color:#00bfff;


text-shadow:

0 0 20px #00bfff;


}



footer p{

color:#b8c7dc;

margin:15px;

}




/* MOUSE GLOW */


.cursor-glow{


position:fixed;


width:150px;

height:150px;


background:#00bfff;


border-radius:50%;


filter:blur(80px);


pointer-events:none;


transform:translate(-50%,-50%);


z-index:-1;


}


/* ================================
   LANGUAGE SWITCHER
================================ */

.language-switcher {
    display: flex;
    align-items: center;
}

#languageBtn {
    display: flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;

    border: 1px solid rgba(0, 191, 255, 0.4);
    border-radius: 30px;

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

    color: #ffffff;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 0 10px rgba(0, 191, 255, 0.15);

    transition: 0.35s ease;
}

#languageBtn:hover {
    transform: translateY(-3px);

    border-color: #00bfff;

    background: rgba(0, 191, 255, 0.18);

    box-shadow:
        0 0 15px rgba(0, 191, 255, 0.4),
        0 0 35px rgba(0, 191, 255, 0.15);
}

.lang-icon {
    font-size: 17px;
}

#languageText {
    color: #00bfff;
}


/* ==========================================
   LANGUAGE TRANSITION
========================================== */

body {
    transition:
        direction 0s,
        opacity .3s ease,
        transform .3s ease;
}

body.language-changing {
    opacity: 0;
    transform: scale(.99);
}



/* ==========================================
   RTL
========================================== */

html[dir="rtl"] body {

    text-align: right;

}


html[dir="rtl"] .header {

    direction: rtl;

}


html[dir="rtl"] .navigation {

    direction: rtl;

}


html[dir="rtl"] .profile {

    direction: rtl;

}


html[dir="rtl"] .profile-info {

    text-align: right;

}


html[dir="rtl"] .skill-title {

    direction: rtl;

}


html[dir="rtl"] .timeline-box {

    border-left: none;

    border-right:
        3px solid #00bfff;

    padding-left: 0;

    padding-right: 40px;

}


html[dir="rtl"] .timeline-item::before {

    left: auto;

    right: -52px;

}


html[dir="rtl"] .info-card {

    direction: rtl;

}


html[dir="rtl"] .table-wrapper {

    direction: rtl;

}


html[dir="rtl"] table {

    direction: rtl;

}



/* ==========================================
   LANGUAGE BUTTON
========================================== */

.language-btn {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 9px;

    min-width: 105px;

    padding: 11px 18px;

    border: 1px solid
        rgba(0, 191, 255, .45);

    border-radius: 30px;

    background:
        rgba(0, 191, 255, .08);

    backdrop-filter:
        blur(18px);

    color: #fff;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    box-shadow:
        0 0 15px
        rgba(0, 191, 255, .15);

    transition:
        .35s ease;

}


.language-btn:hover {

    transform:
        translateY(-3px);

    border-color:
        #00bfff;

    background:
        rgba(0, 191, 255, .18);

    box-shadow:
        0 0 20px
        rgba(0, 191, 255, .45);

}


.language-globe {

    font-size: 17px;

}



/* ==========================================
   LOADING
========================================== */

.loader {

    transition:
        opacity .5s ease,
        visibility .5s ease;

}


.loader-hidden {

    opacity: 0;

    visibility: hidden;

}



/* ==========================================
   RESPONSIVE LANGUAGE BUTTON
========================================== */

@media (max-width: 768px) {

    .header {

        gap: 18px;

    }


    .language-btn {

        min-width: 95px;

        padding:
            9px 14px;

        font-size: 13px;

    }

}

/* ===== Real contact form (backend-wired) ===== */
.cf-form{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.cf-row{display:flex;gap:16px;flex-wrap:wrap}
.cf-row input{flex:1;min-width:200px}
.cf-form input,.cf-form textarea{
  background:rgba(255,255,255,.06);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  padding:14px 18px;
  color:#fff;
  font-family:inherit;
  font-size:14px;
  outline:none;
  transition:.3s;
}
.cf-form input:focus,.cf-form textarea:focus{border-color:#00bfff;box-shadow:0 0 0 3px rgba(0,191,255,.15)}
.cf-form textarea{resize:vertical}
.cf-form button{
  align-self:center;
  padding:14px 46px;
  border:none;
  border-radius:30px;
  background:#00bfff;
  color:#04121c;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:.3s;
}
.cf-form button:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,191,255,.35)}
.cf-form button[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.cf-status{text-align:center;font-size:13px;min-height:18px}
.cf-status.ok{color:#4ade80}
.cf-status.err{color:#f87171}