/*=========================================================
HARISH JUSTIN RAJ KUMAR
Human Resources Portfolio
style.css
==========================================================*/

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

/*=========================================================
ROOT VARIABLES
==========================================================*/

:root{

--primary:#2ecc71;
--secondary:#27ae60;
--dark:#050816;
--light:#ffffff;
--glass:rgba(255,255,255,.12);
--glass2:rgba(255,255,255,.18);
--shadow:0 10px 35px rgba(0,0,0,.45);
--radius:20px;
--transition:.4s ease;

}

/*=========================================================
RESET
==========================================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
font-family:'Poppins',sans-serif;
}

html{
scroll-behavior:smooth;
}

body{

background:#050816;
overflow-x:hidden;
color:white;

}

/*=========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#09111f;
}

::-webkit-scrollbar-thumb{

background:linear-gradient(
180deg,
#2ecc71,
#02401b);

border-radius:50px;

}

::-webkit-scrollbar-thumb:hover{

background:#2ecc71;

}

/*=========================================================
BACKGROUND VIDEO
==========================================================*/

#bg-video{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

object-fit:cover;

z-index:-3;

}

.overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:rgba(0,0,0,.72);

backdrop-filter:blur(2px);

z-index:-2;

}

/*=========================================================
GENERAL SECTION
==========================================================*/

section{

padding:110px 10%;

position:relative;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:42px;

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

color:white;

position:relative;

display:inline-block;

}

.section-title h2::after{

content:"";

position:absolute;

bottom:-12px;

left:50%;

transform:translateX(-50%);

width:80px;

height:4px;

background:#2ecc71;

border-radius:20px;

}

.section-title p{

color:#d0d0d0;

font-size:18px;

}

/*=========================================================
BUTTONS
==========================================================*/

.btn{

display:inline-block;

padding:15px 38px;

background:linear-gradient(
135deg,
#2ecc71,
#58d68d);

border-radius:50px;

text-decoration:none;

font-weight:600;

color:white;

transition:.4s;

box-shadow:0 15px 30px rgba(0,212,255,.3);

}

.btn:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(0,212,255,.45);

}

.btn2{

display:inline-block;

padding:15px 38px;

margin-left:18px;

border:2px solid white;

border-radius:50px;

text-decoration:none;

color:white;

transition:.4s;

font-weight:600;

}

.btn2:hover{

background:#2ecc71;

color:#111;

}

/*=========================================================
GLASS CARD
==========================================================*/

.glass-card{

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

border:1px solid rgba(255,255,255,.15);

backdrop-filter:blur(14px);

padding:35px;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,.4);

transition:.4s;

}

.glass-card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.12);

}

/*=========================================================
NAVIGATION
==========================================================*/

header{

position:fixed;

width:100%;

top:0;

left:0;

z-index:999;

padding:20px 8%;

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

backdrop-filter:blur(18px);

border-bottom:1px solid rgba(255,255,255,.08);

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

}

.logo{

font-size:28px;

font-weight:700;

color:white;

}

.logo i{

color:#2ecc71;

margin-right:10px;

}

nav ul{

display:flex;

list-style:none;

gap:30px;

}

nav ul li a{

text-decoration:none;

color:white;

font-weight:500;

transition:.4s;

position:relative;

}

nav ul li a::after{

content:"";

position:absolute;

bottom:-7px;

left:0;

width:0;

height:2px;

background:#2ecc71;

transition:.4s;

}

nav ul li a:hover{

color:#2ecc71;

}

nav ul li a:hover::after{

width:100%;

}

/*=========================================================
HERO SECTION
==========================================================*/

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:space-between;

gap:60px;

}

.hero-content{

max-width:650px;

animation:fadeLeft 1.2s ease;

}

.hero h4{

font-size:28px;

font-weight:400;

color:#2ecc71;

margin-bottom:10px;

}

.hero h1{

font-size:68px;

font-weight:800;

line-height:1.15;

margin-bottom:18px;

}

.hero h2{

font-size:34px;

font-weight:600;

margin-bottom:25px;

color:#c8d8ff;

}

.hero p{

font-size:20px;

line-height:1.9;

margin-bottom:35px;

color:#dddddd;

}

.hero-buttons{

margin-top:30px;

}

.hero-image{

display:flex;

justify-content:center;

align-items:center;

animation:fadeRight 1.2s ease;

}

.hero-image img{

width:380px;

height:380px;

border-radius:50%;

object-fit:cover;

border:6px solid rgba(255,255,255,.15);

box-shadow:

0 0 25px rgba(0,212,255,.4),

0 0 60px rgba(46,204,113,.25);

transition:.5s;

}

.hero-image img:hover{

transform:scale(1.05);

box-shadow:

0 0 40px rgba(0,212,255,.6),

0 0 80px rgba(0,212,255,.4);

}

/*=========================================================
ANIMATIONS
==========================================================*/

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-80px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(80px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}

.hero-image{

animation:float 4s ease-in-out infinite;

}

/*==============================
CAREER OBJECTIVE
===============================*/

.career{

padding:100px 8%;

}

.career-card{

max-width:1000px;

margin:auto;

padding:40px;

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

border-radius:20px;

text-align:center;

line-height:1.9;

font-size:18px;

color:#ececec;

transition:.4s;

}

.career-card:hover{

transform:translateY(-8px);

box-shadow:0 15px 35px rgba(46,204,113,.25);

}
/*=========================================================
ABOUT SECTION
=========================================================*/

#about{

padding-top:120px;

}

.about-container{

display:flex;

justify-content:space-between;

align-items:center;

gap:70px;

flex-wrap:wrap;

}

.about-image{

flex:1;

display:flex;

justify-content:center;

}

.about-image img{

width:360px;

height:360px;

border-radius:25px;

object-fit:cover;

border:3px solid rgba(255,255,255,.15);

box-shadow:var(--shadow);

transition:var(--transition);

}

.about-image img:hover{

transform:scale(1.04);

box-shadow:

0 0 30px rgba(46,204,113,.35);

}

.about-content{

flex:2;

}

.about-content p{

font-size:18px;

line-height:1.9;

margin-bottom:22px;

color:#dddddd;

text-align:justify;

}

/*=========================================================
CAREER OBJECTIVE
=========================================================*/

#objective{

padding-top:60px;

}

#objective .glass-card{

max-width:1100px;

margin:auto;

text-align:center;

}

#objective p{

font-size:19px;

line-height:2;

color:#ececec;

}

/*=========================================================
EDUCATION
=========================================================*/

#education{

padding-top:100px;

}

.timeline{

position:relative;

max-width:1000px;

margin:auto;

}

.timeline::before{

content:"";

position:absolute;

left:50%;

top:0;

transform:translateX(-50%);

width:4px;

height:100%;

background:linear-gradient(

180deg,

#2ecc71,

#27ae60);

border-radius:30px;

}

.timeline-box{

width:44%;

padding:28px;

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

backdrop-filter:blur(15px);

border-radius:20px;

border:1px solid rgba(255,255,255,.12);

box-shadow:var(--shadow);

margin-bottom:50px;

position:relative;

transition:.4s;

}

.timeline-box:hover{

transform:translateY(-10px);

background:rgba(255,255,255,.12);

}

.timeline-box:nth-child(odd){

left:0;

}

.timeline-box:nth-child(even){

left:56%;

}

.timeline-box::before{

content:"";

position:absolute;

top:35px;

width:22px;

height:22px;

border-radius:50%;

background:#2ecc71;

box-shadow:

0 0 12px #2ecc71,

0 0 24px #2ecc71;

}

.timeline-box:nth-child(odd)::before{

right:-50px;

}

.timeline-box:nth-child(even)::before{

left:-50px;

}

.timeline-box h3{

font-size:24px;

margin-bottom:12px;

font-weight:700;

color:#ffffff;

}

.timeline-box h4{

font-size:18px;

margin-bottom:15px;

color:#2ecc71;

font-weight:600;

}

.timeline-box p{

font-size:17px;

line-height:1.8;

color:#dddddd;

margin-bottom:8px;

}

/*=========================================================
COMMON CARD DESIGN
=========================================================*/

.card{

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

padding:30px;

border-radius:25px;

backdrop-filter:blur(15px);

border:1px solid rgba(255,255,255,.12);

transition:.4s;

}

.card:hover{

transform:translateY(-8px);

background:rgba(255,255,255,.12);

}

/*=========================================================
SECTION SPACING
=========================================================*/

#about,
#objective,
#education{

margin-bottom:60px;

}

/*=========================================================
TEXT HIGHLIGHT
=========================================================*/

.highlight{

color:#2ecc71;

font-weight:700;

}

/*=========================================================
SUBTITLE
=========================================================*/

.subtitle{

font-size:18px;

color:#c9c9c9;

margin-top:10px;

margin-bottom:30px;

}

/*=========================================================
SMOOTH IMAGE EFFECT
=========================================================*/

img{

transition:.5s;

}

img:hover{

filter:brightness(108%);

}

/*=========================================================
FADE ANIMATION
=========================================================*/

.fade-up{

opacity:0;

transform:translateY(50px);

transition:1s;

}

.fade-up.show{

opacity:1;

transform:translateY(0);

}

/*=========================================================
SMALL DEVICES (Education)
=========================================================*/

@media(max-width:900px){

.timeline::before{

left:20px;

}

.timeline-box{

width:calc(100% - 60px);

left:60px !important;

}

.timeline-box::before{

left:-50px !important;

}

.about-container{

flex-direction:column;

text-align:center;

}

.about-content p{

text-align:left;

}

.about-image img{

width:280px;

height:280px;

}

}

/*=========================================================
PROFESSIONAL SKILLS
=========================================================*/

#skills{

padding-top:100px;

}

.skills-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:35px;

margin-top:60px;

}

.skill-card{

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

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(18px);

border-radius:25px;

padding:40px 30px;

text-align:center;

transition:.45s;

box-shadow:0 12px 35px rgba(0,0,0,.35);

cursor:pointer;

overflow:hidden;

position:relative;

}

.skill-card::before{

content:"";

position:absolute;

top:-100%;

left:-100%;

width:220%;

height:220%;

background:linear-gradient(
135deg,
transparent,
rgba(0,212,255,.18),
transparent);

transform:rotate(25deg);

transition:.8s;

}

.skill-card:hover::before{

top:-30%;

left:-30%;

}

.skill-card:hover{

transform:translateY(-12px);

box-shadow:

0 15px 40px rgba(46,204,113,.25);

border-color:#2ecc71;

}

.skill-card i{

font-size:55px;

margin-bottom:25px;

color:#2ecc71;

transition:.4s;

}

.skill-card:hover i{

transform:scale(1.2) rotate(5deg);

color:white;

}

.skill-card h3{

font-size:24px;

margin-bottom:15px;

font-weight:700;

}

.skill-card p{

font-size:17px;

line-height:1.8;

color:#d7d7d7;

}

/*=========================================================
TECHNICAL SKILLS
=========================================================*/

#technical-skills{

padding-top:90px;

}

.tech-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(170px,1fr));

gap:25px;

margin-top:60px;

}

.tech-grid .glass-card{

display:flex;

justify-content:center;

align-items:center;

height:95px;

font-size:18px;

font-weight:600;

color:white;

transition:.35s;

cursor:pointer;

}

.tech-grid .glass-card:hover{

background:linear-gradient(
135deg,
#2ecc71,
#27ae60);

transform:translateY(-8px) scale(1.05);

}

/*=========================================================
SECTION HEADINGS
=========================================================*/

#skills h2,
#technical-skills h2{

letter-spacing:1px;

}

/*=========================================================
SKILL CARD ICON GLOW
=========================================================*/

.skill-card i{

text-shadow:

0 0 15px rgba(0,212,255,.45);

}

/*=========================================================
CARD TITLE
=========================================================*/

.skill-card h3{

color:white;

}

/*=========================================================
GRID ANIMATION
=========================================================*/

.skill-card{

animation:fadeCard .8s ease;

}

@keyframes fadeCard{

from{

opacity:0;

transform:translateY(45px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================================================
TECH SKILL BADGE EFFECT
=========================================================*/

.tech-grid .glass-card{

position:relative;

overflow:hidden;

}

.tech-grid .glass-card::after{

content:"";

position:absolute;

top:0;

left:-120%;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.7s;

}

.tech-grid .glass-card:hover::after{

left:120%;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:900px){

.skills-container{

grid-template-columns:1fr;

}

.tech-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.tech-grid{

grid-template-columns:1fr;

}

.skill-card{

padding:30px 20px;

}

.skill-card h3{

font-size:21px;

}

.skill-card p{

font-size:16px;

}

}

/*=========================================================
INTERNSHIP SECTION
=========================================================*/

#internship{

padding-top:100px;

}

.internship-card{

max-width:1100px;

margin:auto;

padding:45px;

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

border:1px solid rgba(255,255,255,.12);

border-radius:25px;

backdrop-filter:blur(18px);

box-shadow:0 15px 40px rgba(0,0,0,.35);

transition:.4s;

}

.internship-card:hover{

transform:translateY(-10px);

border-color:#2ecc71;

box-shadow:
0 20px 45px rgba(46,204,113,.25);

}

.internship-card h2{

font-size:34px;

color:#2ecc71;

margin-bottom:10px;

}

.internship-card h4{

font-size:22px;

margin-bottom:20px;

color:white;

font-weight:600;

}

.internship-card p{

font-size:18px;

line-height:2;

margin-bottom:18px;

color:#dddddd;

}

/*==============================
INTERNSHIP CONTAINER
===============================*/

.internship-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

gap:35px;

margin-top:50px;

}

.internship-year{

display:inline-block;

padding:8px 18px;

background:rgba(46,204,113,.18);

color:#7CFC98;

border-radius:25px;

font-weight:600;

margin-bottom:20px;

font-size:15px;

letter-spacing:.5px;

}

/*=========================================================
KEY LEARNING
=========================================================*/

#learning{

padding-top:100px;

}

#learning .skills-container{

margin-top:50px;

}

#learning .skill-card{

min-height:280px;

}

#learning .skill-card h3{

margin-top:15px;

margin-bottom:15px;

font-size:24px;

}

#learning .skill-card p{

line-height:1.8;

}

/*=========================================================
PROJECTS
=========================================================*/

#projects{

padding-top:100px;

}

.project-card{

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

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(18px);

padding:40px;

border-radius:25px;

margin-bottom:35px;

transition:.4s;

box-shadow:0 10px 30px rgba(0,0,0,.35);

position:relative;

overflow:hidden;

}

.project-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:5px;

height:100%;

background:#2ecc71;

}

.project-card:hover{

transform:translateY(-8px);

border-color:#2ecc71;

box-shadow:

0 18px 40px rgba(46,204,113,.25);

}

.project-card h3{

font-size:28px;

margin-bottom:18px;

color:white;

}

.project-card p{

font-size:18px;

line-height:1.9;

color:#d7d7d7;

}

/*=========================================================
INTERNSHIP HIGHLIGHT
=========================================================*/

.internship-card h2::after{

content:"";

display:block;

width:80px;

height:4px;

background:#2ecc71;

margin-top:12px;

border-radius:20px;

}

/*=========================================================
PROJECT ANIMATION
=========================================================*/

.project-card{

animation:projectFade 1s ease;

}

@keyframes projectFade{

from{

opacity:0;

transform:translateY(60px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*=========================================================
LEARNING ICONS
=========================================================*/

#learning .skill-card i{

font-size:60px;

margin-bottom:20px;

}

/*=========================================================
INTERNSHIP GLOW
=========================================================*/

.internship-card{

position:relative;

overflow:hidden;

}

.internship-card::after{

content:"";

position:absolute;

width:250px;

height:250px;

background:rgba(0,212,255,.12);

filter:blur(90px);

right:-80px;

top:-80px;

border-radius:50%;

pointer-events:none;

}

/*=========================================================
PROJECT SPACING
=========================================================*/

.project-card:last-child{

margin-bottom:0;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:900px){

.internship-card{

padding:30px;

}

.internship-card h2{

font-size:28px;

}

.project-card{

padding:30px;

}

.project-card h3{

font-size:24px;

}

.project-card p{

font-size:17px;

}

}

@media(max-width:600px){

.internship-card{

padding:25px;

}

.internship-card h2{

font-size:24px;

}

.internship-card h4{

font-size:18px;

}

.internship-card p{

font-size:16px;

}

.project-card h3{

font-size:21px;

}

}
/*=========================================================
INDUSTRIAL VISITS
=========================================================*/

#industrial-visits{

padding-top:100px;

}

#industrial-visits .timeline{

max-width:1100px;

margin:auto;

}

#industrial-visits .timeline-box{

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

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(15px);

transition:.4s;

}

#industrial-visits .timeline-box:hover{

transform:translateY(-10px);

border-color:#2ecc71;

box-shadow:
0 15px 40px rgba(46,204,113,.25);

}

#industrial-visits .timeline-box h3{

font-size:25px;

margin-bottom:15px;

color:#2ecc71;

}

#industrial-visits .timeline-box p{

font-size:17px;

line-height:1.8;

color:#d8d8d8;

}

/*=========================================================
PROFESSIONAL HIGHLIGHTS
=========================================================*/

#stats{

padding-top:100px;

}

.stats-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:35px;

margin-top:60px;

}

.stat-box{

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

border:1px solid rgba(255,255,255,.12);

border-radius:25px;

padding:40px 20px;

text-align:center;

backdrop-filter:blur(18px);

transition:.4s;

box-shadow:0 12px 35px rgba(0,0,0,.35);

position:relative;

overflow:hidden;

}

.stat-box:hover{

transform:translateY(-12px);

border-color:#2ecc71;

box-shadow:

0 18px 45px rgba(46,204,113,.25);

}

.stat-box::before{

content:"";

position:absolute;

top:-120%;

left:-120%;

width:250%;

height:250%;

background:linear-gradient(
135deg,
transparent,
rgba(0,212,255,.18),
transparent);

transform:rotate(30deg);

transition:.8s;

}

.stat-box:hover::before{

top:-20%;

left:-20%;

}

.stat-box h1{

font-size:55px;

font-weight:800;

color:#2ecc71;

margin-bottom:15px;

text-shadow:

0 0 15px rgba(0,212,255,.45);

}

.stat-box p{

font-size:18px;

font-weight:500;

color:white;

}

/*=========================================================
COUNTER ANIMATION READY
=========================================================*/

.counter{

display:inline-block;

}

/*=========================================================
STAT ICONS (OPTIONAL)
=========================================================*/

.stat-box i{

font-size:42px;

margin-bottom:20px;

color:#2ecc71;

}

/*=========================================================
SECTION DIVIDER
=========================================================*/

#industrial-visits,
#stats{

margin-bottom:40px;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:900px){

.stats-container{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:650px){

.stats-container{

grid-template-columns:1fr;

}

.stat-box{

padding:35px 20px;

}

.stat-box h1{

font-size:42px;

}

.stat-box p{

font-size:17px;

}

#industrial-visits .timeline-box h3{

font-size:22px;

}

#industrial-visits .timeline-box p{

font-size:16px;

}

}

/*=========================================================
ACHIEVEMENTS
=========================================================*/

#achievements{

padding-top:100px;

}

.achievement-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:35px;

margin-top:60px;

}

.achievement-card{

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

border:1px solid rgba(255,255,255,.12);

border-radius:25px;

padding:40px 30px;

text-align:center;

backdrop-filter:blur(18px);

transition:.4s;

box-shadow:0 12px 35px rgba(0,0,0,.35);

position:relative;

overflow:hidden;

}

.achievement-card:hover{

transform:translateY(-12px);

border-color:#2ecc71;

box-shadow:

0 18px 45px rgba(46,204,113,.25);

}

.achievement-card i{

font-size:58px;

color:#2ecc71;

margin-bottom:22px;

transition:.4s;

}

.achievement-card:hover i{

transform:scale(1.15);

color:white;

}

.achievement-card h3{

font-size:24px;

margin-bottom:18px;

color:white;

}

.achievement-card p{

font-size:17px;

line-height:1.8;

color:#d7d7d7;

}

/*=========================================================
CERTIFICATES
=========================================================*/

#certificates{

padding-top:100px;

}

.certificate-card{

    width:350px;
    min-height:430px;

    background:rgba(255,255,255,.08);
    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:20px;
    align-items:center;.video-background{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:-2;
    overflow:hidden;
}

.video-background video{
    width:100%;
    height:100%;
    object-fit:cover;
}
    padding:25px;

    text-align:center;

    transition:.4s;

}

.certificate-card:hover{

    transform:translateY(-10px);

}

.certificate-card{

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

border-radius:25px;

overflow:hidden;

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(18px);

transition:.4s;

box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.certificate-card:hover{

transform:translateY(-12px);

border-color:#2ecc71;

}

.certificate-card img{

width:100%;

height:230px;

object-fit:cover;

transition:.5s;

}

.certificate-card:hover img{

transform:scale(1.08);

}

.certificate-card h3{

text-align:center;

margin:25px 15px;

font-size:24px;

}

.certificate-card .btn{

display:block;

width:85%;

margin:0 auto 30px;

text-align:center;

}

/*=========================================================
DOWNLOAD SECTION
=========================================================*/

#downloads{

padding-top:100px;

}

.download-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:35px;

margin-top:60px;

}

.download-card{

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

border:1px solid rgba(255,255,255,.12);

border-radius:25px;

padding:40px 30px;

text-align:center;

transition:.4s;

backdrop-filter:blur(18px);

box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.download-card:hover{

transform:translateY(-10px);

border-color:#2ecc71;

}

.download-card i{

font-size:60px;

color:#2ecc71;

margin-bottom:20px;

}

.download-card h3{

font-size:25px;

margin-bottom:15px;

}

.download-card p{

font-size:17px;

line-height:1.8;

color:#d8d8d8;

margin-bottom:25px;

}

/*=========================================================
SOFTWARE
=========================================================*/

#software{

padding-top:100px;

}

.software-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(180px,1fr));

gap:25px;

margin-top:60px;

}

.software-grid .glass-card{

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

padding:30px;

height:170px;

cursor:pointer;

transition:.4s;

}

.software-grid .glass-card:hover{

background:linear-gradient(
135deg,
#2ecc71,
#27ae60);

transform:translateY(-10px);

}

.software-grid i{

font-size:45px;

margin-bottom:20px;

color:#2ecc71;

transition:.4s;

}

.software-grid .glass-card:hover i{

color:white;

transform:scale(1.2);

}

.software-grid h3{

font-size:18px;

text-align:center;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:900px){

.achievement-grid,
.certificate-grid,
.download-grid{

grid-template-columns:1fr;

}

.software-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:600px){

.software-grid{

grid-template-columns:1fr;

}

.certificate-card img{

height:200px;

}

}
/*=========================================================
PHOTO GALLERY
=========================================================*/

#gallery{

padding-top:100px;

}

.gallery-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:60px;

}

.gallery-item{

overflow:hidden;

border-radius:25px;

border:1px solid rgba(255,255,255,.12);

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

backdrop-filter:blur(15px);

box-shadow:0 10px 30px rgba(0,0,0,.35);

transition:.4s;

}

.gallery-item:hover{

transform:translateY(-8px);

border-color:#2ecc71;

box-shadow:0 18px 40px rgba(46,204,113,.25);

}

.gallery-item img{

width:100%;

height:260px;

object-fit:cover;

transition:.6s;

display:block;

}

.gallery-item:hover img{

transform:scale(1.08);

}

/*=========================================================
CONTACT
=========================================================*/

#contact{

padding-top:100px;

}

.contact-container{

display:grid;

grid-template-columns:1fr 1.2fr;

gap:50px;

align-items:start;

margin-top:60px;

}

.contact-info{

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

padding:40px;

border-radius:25px;

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(18px);

box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.contact-info h3{

font-size:28px;

margin-bottom:30px;

color:#2ecc71;

}

.contact-item{

display:flex;

align-items:center;

margin-bottom:25px;

gap:18px;

}

.contact-item i{

width:50px;

height:50px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

background:#2ecc71;

color:#08111d;

font-size:20px;

font-weight:bold;

}

.contact-item span{

font-size:17px;

color:#e6e6e6;

line-height:1.6;

}

/*=========================================================
SOCIAL ICONS
=========================================================*/

.social-links{

display:flex;

gap:18px;

margin-top:35px;

}

.social-links a{

width:55px;

height:55px;

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

text-decoration:none;

background:rgba(255,255,255,.12);

color:white;

font-size:22px;

transition:.4s;

}

.social-links a:hover{

background:#2ecc71;

color:#08111d;

transform:translateY(-6px);

}

/*=========================================================
CONTACT FORM
=========================================================*/

.contact-form{

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

padding:40px;

border-radius:25px;

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(18px);

box-shadow:0 12px 35px rgba(0,0,0,.35);

}

.contact-form form{

display:flex;

flex-direction:column;

gap:20px;

}

.contact-form input,
.contact-form textarea{

width:100%;

padding:18px 20px;

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

border:1px solid rgba(255,255,255,.15);

border-radius:15px;

color:white;

font-size:16px;

outline:none;

transition:.3s;

}

.contact-form textarea{

resize:vertical;

min-height:180px;

}

.contact-form input:focus,
.contact-form textarea:focus{

border-color:#2ecc71;

box-shadow:0 0 15px rgba(46,204,113,.25);

}

.contact-form input::placeholder,
.contact-form textarea::placeholder{

color:#bfbfbf;

}

/*=========================================================
FOOTER
=========================================================*/

footer{

padding:70px 10% 35px;

margin-top:100px;

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

backdrop-filter:blur(18px);

border-top:1px solid rgba(255,255,255,.12);

text-align:center;

}

.footer-content h2{

font-size:32px;

margin-bottom:15px;

color:white;

}

.footer-content p{

font-size:17px;

line-height:2;

color:#d5d5d5;

}

.footer-icons{

display:flex;

justify-content:center;

gap:20px;

margin:35px 0;

}

.footer-icons a{

width:55px;

height:55px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:rgba(255,255,255,.10);

color:white;

font-size:22px;

transition:.4s;

text-decoration:none;

}

.footer-icons a:hover{

background:#2ecc71;

color:#08111d;

transform:translateY(-6px);

}

footer hr{

margin:30px auto;

width:80%;

border:none;

border-top:1px solid rgba(255,255,255,.12);

}

/*=========================================================
BACK TO TOP BUTTON
=========================================================*/

#topBtn{

position:fixed;

right:30px;

bottom:30px;

width:60px;

height:60px;

border:none;

border-radius:50%;

background:#2ecc71;

color:#08111d;

font-size:24px;

cursor:pointer;

display:none;

z-index:999;

box-shadow:0 10px 30px rgba(46,204,113,.35);

transition:.4s;

}

#topBtn:hover{

transform:translateY(-6px);

background:white;

}

/*=========================================================
RESPONSIVE
=========================================================*/

@media(max-width:992px){

.contact-container{

grid-template-columns:1fr;

}

.contact-info,
.contact-form{

padding:30px;

}

}

@media(max-width:768px){

.gallery-grid{

grid-template-columns:1fr;

}

.social-links,
.footer-icons{

justify-content:center;

flex-wrap:wrap;

}

.contact-item{

align-items:flex-start;

}

.contact-item span{

font-size:16px;

}

}

@media(max-width:480px){

.contact-info h3{

font-size:24px;

}

.footer-content h2{

font-size:26px;

}

#topBtn{

width:50px;

height:50px;

font-size:20px;

right:20px;

bottom:20px;

}

}
/*=========================================================
FINAL RESPONSIVE IMPROVEMENTS
=========================================================*/

html{

scroll-padding-top:90px;

}

body{

line-height:1.6;

}

/*=========================================================
SECTION ANIMATION
=========================================================*/

.reveal{

opacity:0;

transform:translateY(60px);

transition:all .9s ease;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}

/*=========================================================
ACTIVE RGBA(46,204,113,.35)IGATION LINK
=========================================================*/

 ul li a.active{

color:#2ecc71;

}

nav ul li a.active::after{

width:100%;

}

/*=========================================================
STICKY NAVBAR
=========================================================*/

header.sticky{

background:rgba(5,8,22,.92);

backdrop-filter:blur(18px);

box-shadow:0 8px 30px rgba(0,0,0,.35);

transition:.35s;

}

/*=========================================================
IMAGE LOADING EFFECT
=========================================================*/

img{

display:block;

max-width:100%;

height:auto;

}

/*=========================================================
INPUT AUTO FILL FIX
=========================================================*/

input:-webkit-autofill,
textarea:-webkit-autofill{

-webkit-box-shadow:0 0 0px 1000px rgba(255,255,255,.08) inset;

-webkit-text-fill-color:white;

}

/*=========================================================
TEXT SELECTION
=========================================================*/

::selection{

background:#2ecc71;

color:white;

}

/*=========================================================
UTILITY CLASSES
=========================================================*/

.text-center{

text-align:center;

}

.mt-1{

margin-top:10px;

}

.mt-2{

margin-top:20px;

}

.mt-3{

margin-top:30px;

}

.mt-4{

margin-top:40px;

}

.mb-1{

margin-bottom:10px;

}

.mb-2{

margin-bottom:20px;

}

.mb-3{

margin-bottom:30px;

}

.mb-4{

margin-bottom:40px;

}

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

body.loaded{

animation:pageFade .8s ease;

}

@keyframes pageFade{

from{

opacity:0;

}

to{

opacity:1;

}

}

/*=========================================================
BUTTON RIPPLE HOVER
=========================================================*/

.btn{

position:relative;

overflow:hidden;

}

.btn::before{

content:"";

position:absolute;

top:50%;

left:50%;

width:0;

height:0;

border-radius:50%;

background:rgba(255,255,255,.25);

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

transition:.5s;

}

.btn:hover::before{

width:300px;

height:300px;

}

/*=========================================================
CARD BORDER GLOW
=========================================================*/

.skill-card,
.project-card,
.achievement-card,
.download-card,
.internship-card,
.certificate-card,
.stat-box{

position:relative;

}

.skill-card::after,
.project-card::after,
.achievement-card::after,
.download-card::after,
.stat-box::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:0;

height:3px;

background:#2ecc71;

transition:.4s;

}

.skill-card:hover::after,
.project-card:hover::after,
.achievement-card:hover::after,
.download-card:hover::after,
.stat-box:hover::after{

width:100%;

}

/*=========================================================
MOBILE MENU BUTTON
=========================================================*/

.menu-toggle{

display:none;

font-size:30px;

color:white;

cursor:pointer;

}

/*=========================================================
TABLET
=========================================================*/

@media(max-width:992px){

.hero{

flex-direction:column-reverse;

text-align:center;

padding-top:140px;

}

.hero-content{

max-width:100%;

}

.hero h1{

font-size:52px;

}

.hero h2{

font-size:28px;

}

.hero-image img{

width:320px;

height:320px;

}

nav ul{

gap:18px;

}

section{

padding:90px 8%;

}

}

/*=========================================================
MOBILE
=========================================================*/

@media(max-width:768px){

.menu-toggle{

display:block;

}

nav{

position:relative;

}

nav ul{

position:absolute;

top:80px;

right:0;

width:250px;

background:rgba(5,8,22,.97);

backdrop-filter:blur(20px);

border-radius:15px;

padding:25px;

display:flex;

flex-direction:column;

gap:20px;

transform:translateX(120%);

transition:.4s;

}

nav ul.show{

transform:translateX(0);

}

.hero h1{

font-size:40px;

}

.hero h2{

font-size:23px;

}

.hero h4{

font-size:20px;

}

.hero p{

font-size:17px;

}

.hero-image img{

width:260px;

height:260px;

}

.btn,
.btn2{

display:block;

margin:15px auto;

width:220px;

text-align:center;

}

.section-title h2{

font-size:34px;

}

.section-title p{

font-size:16px;

}

}

/*=========================================================
SMALL MOBILE
=========================================================*/

@media(max-width:480px){

.hero{

padding-top:120px;

}

.hero h1{

font-size:32px;

}

.hero-image img{

width:220px;

height:220px;

}

.logo{

font-size:22px;

}

section{

padding:80px 6%;

}

.timeline-box{

padding:22px;

}

.skill-card,
.download-card,
.achievement-card{

padding:25px;

}

}

/*=========================================================
SMOOTH ICON ANIMATION
=========================================================*/

i{

transition:.35s;

}

/*=========================================================
FLOATING EFFECT
=========================================================*/

.float{

animation:floating 4s ease-in-out infinite;

}

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-10px);

}

100%{

transform:translateY(0px);

}

}

/*=========================================================
END OF STYLE SHEET
=========================================================*/
/*=========================================
PROFESSIONAL EXPERIENCE
=========================================*/

.experience{

padding:100px 8%;

}

.experience-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(450px,1fr));

gap:35px;

margin-top:60px;

}

.experience-card{

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

border-radius:25px;

padding:35px;

transition:.4s;

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

}

.experience-card:hover{

transform:translateY(-12px);

border-color:#2ecc71;

box-shadow:0 15px 40px rgba(46,204,113,.35);

}

.experience-icon{

width:80px;

height:80px;

background:linear-gradient(135deg,#2ecc71,#27ae60);

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:32px;

color:#fff;

margin-bottom:25px;

}

.experience-content h3{

font-size:28px;

color:#fff;

margin-bottom:10px;

}

.duration{

display:inline-block;

margin-bottom:18px;

padding:8px 18px;

background:rgba(46,204,113,.18);

border-radius:30px;

color:#7CFC98;

font-weight:600;

}

.experience-content h4{

font-size:20px;

margin-bottom:20px;

color:#2ecc71;

}

.experience-content p{

line-height:1.8;

color:#d8d8d8;

margin-bottom:20px;

}

.experience-content ul{

padding-left:20px;

}

.experience-content ul li{

margin-bottom:12px;

color:#ececec;

line-height:1.7;

}

@media(max-width:768px){

.experience-container{

grid-template-columns:1fr;

}

}
/*==============================
WORK EXPERIENCE
==============================*/

.work{

padding:100px 8%;

}

.work-card{

max-width:700px;

margin:auto;

padding:35px;

border-radius:20px;

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

backdrop-filter:blur(18px);

text-align:center;

transition:.4s;

border:1px solid rgba(255,255,255,.12);

}

.work-card:hover{

transform:translateY(-10px);

border-color:#2ecc71;

}

.work-icon{

font-size:45px;

margin-bottom:20px;

color:#2ecc71;

}

.work-card h3{

margin-bottom:10px;

}

.work-card span{

display:inline-block;

margin:15px 0;

padding:8px 18px;

background:rgba(46,204,113,.2);

border-radius:30px;

}

/*==============================
WORK EXPERIENCE
==============================*/

.work{

padding:100px 8%;

}

.work-container{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(420px,1fr));

gap:35px;

margin-top:50px;

}

.work-card{

padding:35px;

border-radius:20px;

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

backdrop-filter:blur(18px);

border:1px solid rgba(255,255,255,.12);

transition:.4s;

}

.work-card:hover{

transform:translateY(-10px);

border-color:#2ecc71;

box-shadow:0 15px 35px rgba(46,204,113,.25);

}

.work-icon{

width:70px;

height:70px;

background:linear-gradient(135deg,#2ecc71,#27ae60);

border-radius:50%;

display:flex;

justify-content:center;

align-items:center;

font-size:28px;

color:#fff;

margin-bottom:20px;

}

.work-card h3{

color:#fff;

margin-bottom:8px;

}

.work-card h4{

color:#2ecc71;

margin-bottom:12px;

}

.work-card span{

display:inline-block;

padding:8px 18px;

border-radius:30px;

background:rgba(46,204,113,.18);

color:#7CFC98;

font-weight:600;

margin-bottom:20px;

}

.work-card p{

line-height:1.8;

margin-bottom:20px;

color:#e8e8e8;

}

.work-card ul{

padding-left:20px;

}

.work-card ul li{

margin-bottom:10px;

line-height:1.7;

color:#ececec;

}
/*==============================
VOLUNTEER
==============================*/

.volunteer{

padding:100px 8%;

}

.volunteer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:30px;

margin-top:50px;

}

.volunteer-card{

padding:30px;

border-radius:20px;

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

backdrop-filter:blur(18px);

transition:.4s;

border:1px solid rgba(255,255,255,.12);

}

.volunteer-card:hover{

transform:translateY(-10px);

border-color:#2ecc71;

}

.languages{

padding:100px 8%;

text-align:center;

}

.language-box{

display:flex;

justify-content:center;

gap:30px;

margin-top:40px;

flex-wrap:wrap;

}

.language-box div{

padding:18px 35px;

border-radius:40px;

background:rgba(46,204,113,.15);

font-weight:600;

}

.interests{

padding:100px 8%;

}

.interest-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

margin-top:40px;

}

.interest-grid div{

padding:25px;

border-radius:18px;

text-align:center;

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

backdrop-filter:blur(18px);

transition:.3s;

}

.interest-grid div:hover{

transform:translateY(-8px);

border:1px solid #2ecc71;

}