body {
color:#333;
font-family:'Roboto',sans-serif;
margin:0;
padding:0;
box-sizing:border-box
}

.section {
display:none;
padding:2em
}

.section.active {
display:block
}

@media (max-width: 767px) {
.navbar-brand {
font-size:1.5rem
}

.nav-link {
font-size:1rem
}

#hello{
    flex-direction: column;
}

.image-container {
display:none
}
}

#brand {
font-size:2em;
text-transform:uppercase;
background:linear-gradient(to right,#4a90e2,#50e3c2);
background-size:200% auto;
color:#fff;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
animation:clip 1.5s linear infinite
}

@keyframes clip {
to {
background-position:200% center
}
}

.nav-list {
padding:0;
display:flex
}

.nav-list li {
list-style:none;
padding:10px 20px
}

.nav-list li a {
color:#333;
text-decoration:none;
font-size:14px;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
position:relative
}

.nav-list li a:before {
content:"";
background-color:#4a90e2;
width:10px;
height:5px;
position:absolute;
top:100%;
left:0;
transition:.7s
}

.nav-list li a:hover:before {
width:50%;
left:50%
}

.nav-list li a:after {
content:"";
background-color:#50e3c2;
width:10px;
height:5px;
position:absolute;
top:-7px;
left:100%;
transition:.7s
}

.nav-list li a:hover:after {
width:50%;
left:0
}

.btn-download {
text-decoration:none;
text-align:center;
line-height:50px;
font-size:1rem;
cursor:pointer;
border:none;
background-color:#4a90e2;
color:#fff;
border-radius:5px;
display:block;
width:200px;
height:50px;
transition:background-color .3s ease
}

.btn-download:hover {
background-color:#357abd
}

.navbar-custom {
background-color:#ffffffb3;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
}

#hello,#about {
margin:3.5rem 0
}

#hello img,#about img {
border-radius:8px;
transition:transform 0.3s,box-shadow .3s;
animation:float 6s infinite ease-in-out
}

#hello img:hover,#about img:hover {
transform:scale(1.05);
box-shadow:0 4px 8px #0003
}

.skills-icons {
align-items:center;
display:flex;
flex-wrap:wrap;
gap:1rem;
justify-content:center
}

.skill-icons {
max-width:auto;
height:auto
}

.animate__animated.animate__fadeIn {
animation-duration:2s
}

@keyframes float {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-10px)
}
}

.typing-animation {
overflow:hidden;
border-right:.15em solid #4a90e2;
white-space:nowrap;
margin:0 auto;
letter-spacing:.15em;
animation:typing 3.5s steps(40,end),blink-caret .75s step-end infinite
}

@keyframes typing {
    from {
    width:0
    }

    to {
    width:100%
    }
}

@keyframes blink-caret {
    from,to {
    border-color:transparent
    }

    50% {
    border-color:#4a90e2
    }
}
.portfolio-section {
padding:4rem 0;
background:#f9f9f9
}

.portfolio-section h2 {
font-size:2.5rem;
font-weight:700;
margin-bottom:2rem;
color:#333;
text-align:center
}

.portfolio-section p {
font-size:1.1rem;
color:#555;
text-align:center;
margin-bottom:4rem
}

.portfolio-cards {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:1.5rem
}

.portfolio-card {
max-width:20rem;
border:none;
border-radius:8px;
box-shadow:0 4px 8px #0000001a;
transition:transform 0.3s,box-shadow .3s;
background:#fff;
cursor:pointer;
overflow:hidden;
position:relative
}

.portfolio-card:hover {
transform:translateY(-10px);
box-shadow:0 6px 12px #0003
}

.portfolio-card img {
width:100%;
height:auto;
transition:transform .3s
}

.portfolio-card:hover img {
transform:scale(1.05)
}

.portfolio-card-body {
padding:1.5rem;
text-align:center
}

.portfolio-card h5 {
font-size:1.25rem;
font-weight:600;
margin-bottom:1rem;
color:#333
}

.portfolio-card p {
font-size:1rem;
color:#666;
margin-bottom:1.5rem
}

.portfolio-card a {
font-size:1rem;
font-weight:500;
color:#4a90e2;
text-decoration:none;
transition:color .3s
}

.portfolio-card a:hover {
color:#333
}

.tech-badges {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:.5rem;
margin-top:1rem
}

.tech-badge {
background:#e0e0e0;
border-radius:12px;
padding:.5rem 1rem;
font-size:.9rem;
color:#333;
font-weight:500;
transition:background .3s
}

.tech-badge:hover {
background:#4a90e2;
color:#fff
}

.futuristic-card {
background:linear-gradient(135deg,#fff,#f0f0f0);
border:2px solid #4a90e2;
border-radius:20px;
transition:transform 0.3s,box-shadow .3s;
position:relative;
overflow:hidden;
z-index:0;
cursor:pointer
}

.futuristic-card:before {
content:'';
position:absolute;
top:0;
left:-50%;
width:200%;
height:100%;
background:linear-gradient(120deg,transparent,#007bff33,transparent);
transition:all .7s;
transform:skewX(-30deg);
z-index:-1
}

.futuristic-card:hover {
transform:scale(1.05);
box-shadow:0 0 20px #007bff66
}

.futuristic-card:hover:before {
transform:skewX(-30deg) translateX(50%)
}

.card-title {
color:#4a90e2;
font-size:1.5em;
font-weight:700
}

.card-text {
color:#555;
font-size:1.1em
}

.experience-description {
display:none;
margin-top:10px;
color:#4a90e2;
font-size:1em
}

.contact-section {
text-align:center;
margin:4rem 0;
padding:2rem;
background:#f9f9f9
}

.contact-section h2 {
margin-bottom:2rem;
font-size:2.5rem;
font-weight:700;
color:#333;
animation:fadeInDown 1s
}

.contact-cards {
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:1.5rem
}

.contact-card {
max-width:25rem;
border:1px solid #ddd;
border-radius:8px;
box-shadow:0 4px 8px #0000001a;
transition:transform 0.3s,box-shadow .3s;
background:#fff;
padding:1.5rem
}

.contact-card:hover {
transform:translateY(-10px);
box-shadow:0 6px 12px #0003
}

.contact-card i {
font-size:2rem;
margin-bottom:1rem;
color:#4a90e2
}

.contact-card h6 {
margin:0;
font-size:1.25rem;
font-weight:600
}

.contact-card a {
color:#4a90e2;
text-decoration:none;
transition:color .3s
}

.contact-card a:hover {
color:#333
}

.contact-info {
display:flex;
flex-direction:column;
align-items:center
}

footer {
background:#f9f9f9;
padding:1rem 0;
text-align:center;
font-size:.9rem;
color:#555
}