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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --pale-violet-red: #DC7684;
    --burly-wood: #E4CA99;
    --light-steel-blue: #EAF2F4;
    --steel-blue: #2D7F9D;
    --light-steel-blue-2: #A4C9D7;
    --white: #ffffff;
    --dark-text: #2c3e50;
    --light-text: #f8f9fa;
}

body {
    font-family: "Montserrat", sans-serif;
    background: linear-gradient(135deg, var(--light-steel-blue) 0%, var(--light-steel-blue-2) 100%);
    color: var(--dark-text);
    scroll-behavior: smooth;
    line-height: 1.6;
}

p {
    color: var(--dark-text);
}

/* ================= ANIMATIONS ================= */
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(44, 127, 157, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(44, 127, 157, 0); } 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(44, 127, 157, 0); } }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } }
@keyframes slideInFromLeft { 0% { opacity: 0; transform: translateX(-100px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes slideInFromRight { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blink { 50% { border-color: transparent; } }
@keyframes gradientFlow { 0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ================= LINKS & TRANSITIONS ================= */
a, .btn { transition: all 0.3s ease-in-out; }
a { color: var(--steel-blue); text-decoration: none; position: relative; }
a::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: var(--steel-blue); transition: width 0.3s ease-in-out; }
a:hover::after { width: 100%; }
a:hover { color: var(--pale-violet-red); }

/* ================= NAVBAR ================= */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 10vh;
    padding: 0 5rem;
    background: rgba(234, 242, 244, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    position: fixed;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
}
nav.scrolled { height: 8vh; box-shadow: 0 4px 30px rgba(0,0,0,0.15); }

.logo { font-size: 2rem; font-weight: 700; color: var(--steel-blue); cursor: default; animation: slideInFromLeft 0.8s ease-out; }
.nav-links { display: flex; gap: 2.5rem; list-style: none; font-size: 1.1rem; font-weight: 500; }
.nav-links li a { position: relative; padding: 0.5rem 0; color: var(--steel-blue); }
.nav-links li a::before { content: ''; position: absolute; width: 0; height: 2px; bottom: 0; left: 0; background-color: var(--steel-blue); transition: width 0.3s ease; }
.nav-links li a:hover::before { width: 100%; }

/* ================= HAMBURGER MENU ================= */
#hamburger-nav { display: none; }
.hamburger-menu { display: inline-block; cursor: pointer; }
.hamburger-icon { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 24px; transition: transform 0.3s ease; }
.hamburger-icon span { width: 100%; height: 3px; background-color: var(--steel-blue); border-radius: 5px; transition: all 0.3s ease-in-out; transform-origin: left; }
.hamburger-icon.open span:first-child { transform: rotate(45deg) translate(5px, -3px); background-color: var(--pale-violet-red); }
.hamburger-icon.open span:nth-child(2) { opacity: 0; }
.hamburger-icon.open span:last-child { transform: rotate(-45deg) translate(5px, 3px); background-color: var(--pale-violet-red); }

.menu-links { position: absolute; top: 100%; right: 0; background-color: rgba(234,242,244,0.98); width: 100%; overflow: hidden; max-height: 0; transition: max-height 0.5s ease-in-out; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
.menu-links.open { max-height: 300px; }
.menu-links li { list-style: none; }
.menu-links a { display: block; padding: 1.2rem; text-align: center; color: var(--steel-blue); font-weight: 500; transition: all 0.3s ease; }
.menu-links a:hover { background-color: rgba(220,118,132,0.1); color: var(--pale-violet-red); }

/* ================= SECTIONS ================= */
section { padding: 8rem 10rem; min-height: fit-content; opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
section.visible { opacity: 1; transform: translateY(0); }
.section-container { display: flex; gap: 4rem; align-items: center; flex-wrap: wrap; }

/* ================= PROFILE ================= */
#profile { display: flex; justify-content: center; align-items: center; gap: 8rem; height: 100vh; padding: 0 10rem; animation: fadeIn 1s ease-out forwards; flex-wrap: wrap; }
.section__pic-container { width: 400px; height: 400px; border-radius: 50%; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.15); animation: float 6s ease-in-out infinite; transition: all 0.3s ease; border: 3px solid var(--steel-blue); }
.section__pic-container:hover { transform: scale(1.03); box-shadow: 0 15px 40px rgba(0,0,0,0.2); }
.section__text { display: flex; flex-direction: column; justify-content: center; text-align: left; flex:1; }
.section__text p { font-weight: 500; color: var(--dark-text); }
.section__text__p1 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--steel-blue); }
.section__text__p2 { font-size: 1.75rem; margin-bottom: 2rem; color: var(--pale-violet-red); overflow: hidden; border-right: 3px solid var(--pale-violet-red); white-space: nowrap; animation: typing 3.5s steps(40,end), blink 0.75s step-end infinite; }
.title { font-size: 3.5rem; font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg,var(--steel-blue) 0%,var(--pale-violet-red)100%); -webkit-background-clip: text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; animation: slideInFromRight 0.8s ease-out; }
.section__pic-container img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.section__pic-container:hover img { transform: scale(1.1); }

/* ================= SOCIAL ICONS ================= */
#socials-container { display: flex; justify-content: flex-start; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.icon { height: 2.5rem; width: 2.5rem; cursor: pointer; border-radius: 50%; padding: 0.5rem; background: var(--white); box-shadow:0 4px 10px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.icon:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.2); background: var(--steel-blue); }

/* ================= BUTTONS ================= */
.btn-container { display: flex; justify-content: flex-start; gap: 1.5rem; margin-top: 2rem; flex-wrap: wrap; }
.btn { padding:1rem 2rem; border-radius:50px; font-weight:600; cursor:pointer; transition: all 0.3s ease; position: relative; overflow: hidden; z-index:1; display:flex; align-items:center; gap:0.5rem; }
.btn::before { content:''; position:absolute; top:0; left:0; width:0%; height:100%; background:var(--steel-blue); transition: all 0.3s ease; z-index:-1; }
.btn:hover::before { width:100%; }
.btn-color-1 { border:2px solid var(--steel-blue); background: var(--steel-blue); color: var(--white); }
.btn-color-2 { border:2px solid var(--steel-blue); background: transparent; color: var(--steel-blue); }
.btn-color-2:hover { color: var(--white); }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }

/* ================= ABOUT ================= */
#about { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding:8rem 10rem; background: rgba(255,255,255,0.7); border-radius:2rem; margin:5rem 10rem; box-shadow:0 10px 30px rgba(0,0,0,0.1); backdrop-filter: blur(10px); }
.about-containers, .about-details-container { display: flex; gap: 2rem; flex:1; flex-wrap: wrap; }
.about-pic { border-radius:2rem; max-width:400px; height:auto; box-shadow:0 10px 30px rgba(0,0,0,0.15); transition: all 0.3s ease; border:2px solid var(--steel-blue); }
.about-pic:hover { transform: scale(1.02); box-shadow:0 15px 40px rgba(0,0,0,0.2); }
.about-text p { font-size:1.1rem; line-height:1.8; text-align: justify; }

/* ================= EXPERIENCE ================= */
#experience { display:flex; flex-direction: column; align-items:center; text-align:center; padding:8rem 5rem; }
.experience-sub-title { font-weight:600; font-size:1.75rem; color:var(--steel-blue); margin-bottom:2rem; position:relative; display:inline-block; }
.experience-sub-title::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:50px; height:3px; background:var(--steel-blue); border-radius:2px; }
.article-container { display:flex; flex-wrap: wrap; gap:2rem; justify-content:center; }
article { display:flex; align-items:center; gap:1rem; min-width:200px; background:rgba(255,255,255,0.9); padding:1rem 1.5rem; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.08); transition: all 0.3s ease; border:1px solid rgba(45,127,157,0.2); flex-wrap: wrap; justify-content:center; text-align:center; }
article:hover { transform: translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15); background: rgba(164,201,215,0.2); }

/* Skills Section */
.skills-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* center all cards horizontally */
    gap: 2rem;              /* spacing between skill cards */
    margin-top: 2rem;
}

.skill-card {
    flex: 0 1 250px; /* flexible width with minimum 250px */
    background-color: #f9f9f9;
    border-radius: 15px;
    padding: 1.5rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.skill-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.skill-title {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: #222;
}

.skill-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.skill-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 1rem;
    color: #333;
}

.skill-item .icon {
    width: 18px;
    height: 18px;
}

/* Responsive */
@media screen and (max-width: 768px) {
    .skill-card {
        flex: 0 1 45%; /* two per row on tablet */
    }
}

@media screen and (max-width: 480px) {
    .skill-card {
        flex: 0 1 90%; /* full width on mobile */
    }
}

/* ================= PROJECTS ================= */
#projects { display:flex; flex-direction: column; align-items:center; padding:8rem 5rem; background: rgba(255,255,255,0.7); border-radius:2rem; margin:5rem 10rem; box-shadow:0 10px 30px rgba(0,0,0,0.1); backdrop-filter: blur(10px); flex-wrap: wrap; }
.project-card { transition: all 0.3s ease; overflow:hidden; background:rgba(255,255,255,0.9); border:1px solid rgba(45,127,157,0.3); width: 100%; max-width: 450px; margin:1rem 0; }
.project-card:hover { transform: translateY(-10px) scale(1.02); box-shadow:0 20px 40px rgba(0,0,0,0.2); }
.project-video-container { width:100%; height:250px; overflow:hidden; border-radius:1rem 1rem 0 0; position:relative; }
.project-video { width:100%; height:100%; object-fit:cover; transition: transform 0.5s ease; }
.project-card:hover .project-video { transform: scale(1.1); }
.play-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.3); display:flex; justify-content:center; align-items:center; opacity:0; transition:opacity 0.3s ease; }
.project-video-container:hover .play-overlay { opacity:1; }
.play-overlay i { font-size:3rem; color:white; }
.project-title { margin:1rem 0; color:var(--steel-blue); font-size:1.5rem; font-weight:600; }
.project-description { color: var(--dark-text); margin-bottom:1.5rem; font-size:1rem; line-height:1.6; padding:0 1rem; }

/* ================= CONTACT ================= */
#contact { display:flex; flex-direction: column; align-items:center; gap:3rem; padding:8rem 5rem; text-align:center; }
.contact-info-upper-container { display:flex; justify-content:center; gap:3rem; flex-wrap:wrap; }
.contact-info-container { display:flex; align-items:center; gap:1rem; flex-direction: column; justify-content: center; background: rgba(255,255,255,0.9); padding:1.5rem 2rem; border-radius:1.5rem; box-shadow:0 5px 15px rgba(0,0,0,0.08); transition:all 0.3s ease; border:1px solid rgba(45,127,157,0.3); text-align:center; }
.contact-info-container:hover { transform:translateY(-5px); box-shadow:0 10px 25px rgba(0,0,0,0.15); background: rgba(164,201,215,0.2); }
.contact-info-container p { font-size:1.1rem; color: var(--dark-text); }
.contact-icon { height:2rem; width:2rem; }

/* ================= FOOTER ================= */
footer { padding:3rem; background: linear-gradient(135deg,var(--steel-blue)0%,#1c5c75 100%); color: var(--white); text-align:center; border-top:1px solid rgba(255,255,255,0.3); }
.nav-links-container { margin-bottom:2rem; }
.footer-list-items { display:inline-flex; align-items:center; justify-content:center; height:50px; width:50px; margin:0.5rem; border-radius:50%; background-color: rgba(255,255,255,0.2); transition: all 0.3s ease; }
.footer-list-items:hover { background-color: rgba(255,255,255,0.3); transform:translateY(-3px); }
.footer-links { text-decoration:none; color: var(--white); font-size:1.5rem; }
footer p { color: var(--white); margin-top:1rem; }

/* ================= ARROW ================= */
.arrow { position: fixed; bottom: 2rem; right: 2rem; height:3rem; width:3rem; background: var(--steel-blue); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 15px rgba(0,0,0,0.2); transition: all 0.3s ease; z-index:999; animation:pulse 2s infinite; }
.arrow:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 8px 25px rgba(0,0,0,0.3); }

/* ================= LOADER ================= */
#loader { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#EAF2F4,#E4CA99,#A4C9D7,#2D7F9D); background-size:400% 400%; animation:gradientFlow 12s ease infinite; z-index:9999; overflow:hidden; transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out; }
#loader.fade-out { opacity:0; visibility:hidden; pointer-events:none; }

/* ===== PROFILE CIRCLE ===== */
#profileCircle { position:absolute; width:150px; height:150px; border-radius:50%; overflow:hidden; z-index:3; left:50%; top:50%; transform: translate(-50%,-50%) scale(1); transition: transform 1.5s ease-in-out; box-shadow:0 0 25px rgba(220,118,132,0.8); }
#profileCircle.focus { transform: translate(-50%,-50%) scale(6); }
#profileCircle img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ================= MEDIA QUERIES ================= */
@media screen and (max-width: 1400px) {
    section { padding:6rem 4rem; }
    #profile { height:83vh; margin-bottom:6rem; }
    #about,#projects { margin:4rem 6rem; }
}

@media screen and (max-width: 1200px) {
    #desktop-nav { display:none; }
    #hamburger-nav { display:flex; }
    section { margin:0 5%; padding:4rem 2rem; }
    .section__pic-container { width:275px; height:275px; margin:0 auto 2rem; }
    .title { font-size:2.5rem; }
}

@media screen and (max-width: 600px) {
    section { padding:2rem 1rem; }
    #profile { flex-direction:column; height:auto; gap:3rem; }
    .section__text { text-align:center; }
    .btn-container, #socials-container { justify-content:center; }
    .section__pic-container { width:80%; height:auto; }
    .section__text__p2 { font-size:1.5rem; animation:none; border-right:none; white-space:normal; }
    .title { font-size:2rem; }
    .btn { width:90%; margin:0.5rem auto; }
}
/* ================= MOBILE RESPONSIVE ENHANCEMENTS ================= */

/* Large Tablets (900px - 1199px) */
@media screen and (max-width: 1199px) {
    nav {
        padding: 0 3rem;
    }
    
    section {
        padding: 7rem 5rem;
    }
    
    #profile {
        gap: 6rem;
        padding: 0 5rem;
    }
    
    .section__pic-container {
        width: 350px;
        height: 350px;
    }
    
    #about, #projects {
        margin: 4rem 7rem;
        padding: 7rem 5rem;
    }
    
    .about-pic {
        max-width: 380px;
    }
    
    .project-card {
        max-width: 420px;
    }
    
    .contact-info-upper-container {
        gap: 2.5rem;
    }
}

/* Tablets (768px - 899px) */
@media screen and (max-width: 899px) {
    nav {
        padding: 0 2.5rem;
    }
    
    section {
        padding: 6rem 4rem;
    }
    
    #profile {
        gap: 5rem;
        padding: 0 4rem;
    }
    
    .section__pic-container {
        width: 320px;
        height: 320px;
    }
    
    .title {
        font-size: 3.2rem;
    }
    
    .section__text__p1 {
        font-size: 1.4rem;
    }
    
    .section__text__p2 {
        font-size: 1.6rem;
    }
    
    #about, #projects {
        margin: 4rem 5rem;
        padding: 6rem 4rem;
    }
    
    .about-pic {
        max-width: 350px;
    }
    
    .project-card {
        max-width: 400px;
    }
    
    .btn {
        padding: 0.9rem 1.8rem;
    }
    
    .contact-info-upper-container {
        gap: 2rem;
    }
    
    .contact-info-container {
        padding: 1.3rem 1.8rem;
    }
}

/* Large Mobile (600px - 767px) - Enhanced version of your existing 600px breakpoint */
@media screen and (max-width: 767px) {
    nav {
        padding: 0 2rem;
        height: 9vh;
    }
    
    .logo {
        font-size: 1.8rem;
    }
    
    section {
        padding: 5rem 3rem;
    }
    
    #profile {
        gap: 4rem;
        padding: 0 3rem;
        height: auto;
        min-height: 100vh;
    }
    
    .section__pic-container {
        width: 280px;
        height: 280px;
        margin: 0 auto 1.5rem;
    }
    
    .title {
        font-size: 2.8rem;
        line-height: 1.2;
        margin-bottom: 0.8rem;
    }
    
    .section__text__p1 {
        font-size: 1.3rem;
        margin-bottom: 0.4rem;
    }
    
    .section__text__p2 {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    #about, #projects {
        margin: 3rem 4%;
        padding: 5rem 3rem;
        border-radius: 1.8rem;
    }
    
    .about-pic {
        max-width: 320px;
        margin: 0 auto 1.5rem;
    }
    
    .about-text p {
        font-size: 1.05rem;
        line-height: 1.7;
        text-align: justify;
    }
    
    .project-card {
        max-width: 380px;
        margin: 1.2rem 0;
        border-radius: 1.5rem;
    }
    
    .project-video-container {
        height: 220px;
        border-radius: 1.5rem 1.5rem 0 0;
    }
    
    .project-title {
        font-size: 1.4rem;
        margin: 1.2rem 1rem 0.8rem;
    }
    
    .project-description {
        font-size: 0.95rem;
        margin: 0 1rem 1.5rem;
        line-height: 1.6;
    }
    
    .skills-container {
        gap: 1.5rem;
    }
    
    .skill-card {
        flex: 0 1 calc(50% - 1rem);
        padding: 1.3rem;
        border-radius: 1.2rem;
    }
    
    .btn-container {
        justify-content: center;
        gap: 1.2rem;
    }
    
    .btn {
        padding: 0.9rem 1.8rem;
        font-size: 1rem;
        width: auto;
        margin: 0;
    }
    
    #socials-container {
        justify-content: center;
        gap: 1.2rem;
    }
    
    .contact-info-upper-container {
        gap: 1.8rem;
    }
    
    .contact-info-container {
        padding: 1.2rem 1.7rem;
    }
    
    footer {
        padding: 2.5rem;
    }
    
    .arrow {
        bottom: 1.8rem;
        right: 1.8rem;
        height: 2.8rem;
        width: 2.8rem;
    }
}

/* Medium Mobile (480px - 599px) */
@media screen and (max-width: 599px) {
    nav {
        padding: 0 1.5rem;
        height: 8vh;
    }
    
    .logo {
        font-size: 1.6rem;
    }
    
    section {
        padding: 4rem 2rem;
    }
    
    #profile {
        gap: 3rem;
        padding: 0 2rem;
    }
    
    .section__pic-container {
        width: 250px;
        height: 250px;
    }
    
    .title {
        font-size: 2.5rem;
    }
    
    .section__text__p1 {
        font-size: 1.2rem;
    }
    
    .section__text__p2 {
        font-size: 1.4rem;
    }
    
    #about, #projects {
        margin: 3rem 2rem;
        padding: 4rem 2.5rem;
        border-radius: 1.5rem;
    }
    
    .about-pic {
        max-width: 280px;
    }
    
    .about-text p {
        font-size: 1rem;
        line-height: 1.7;
    }
    
    .project-card {
        max-width: 100%;
        border-radius: 1.2rem;
    }
    
    .project-video-container {
        height: 200px;
        border-radius: 1.2rem 1.2rem 0 0;
    }
    
    .project-title {
        font-size: 1.3rem;
    }
    
    .project-description {
        font-size: 0.9rem;
    }
    
    .skill-card {
        flex: 0 1 100%;
        padding: 1.2rem;
        border-radius: 1rem;
    }
    
    .skill-title {
        font-size: 1.2rem;
    }
    
    .skill-item {
        font-size: 0.95rem;
    }
    
    .btn-container {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .btn {
        width: 100%;
        max-width: 280px;
        margin: 0.3rem 0;
        justify-content: center;
    }
    
    .contact-info-upper-container {
        gap: 1.5rem;
    }
    
    .contact-info-container {
        padding: 1.1rem 1.5rem;
    }
    
    footer {
        padding: 2rem 1.5rem;
    }
    
    .arrow {
        bottom: 1.5rem;
        right: 1.5rem;
        height: 2.6rem;
        width: 2.6rem;
    }
}

/* Small Mobile (360px - 479px) */
@media screen and (max-width: 479px) {
    nav {
        padding: 0 1rem;
    }
    
    .logo {
        font-size: 1.5rem;
    }
    
    section {
        padding: 3.5rem 1.5rem;
    }
    
    #profile {
        gap: 2.5rem;
        padding: 0 1.5rem;
    }
    
    .section__pic-container {
        width: 220px;
        height: 220px;
    }
    
    .title {
        font-size: 2.2rem;
    }
    
    .section__text__p1 {
        font-size: 1.1rem;
    }
    
    .section__text__p2 {
        font-size: 1.3rem;
    }
    
    #about, #projects {
        margin: 2.5rem 1rem;
        padding: 3.5rem 2rem;
        border-radius: 1.2rem;
    }
    
    .about-pic {
        max-width: 250px;
    }
    
    .about-text p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .project-video-container {
        height: 180px;
    }
    
    .project-title {
        font-size: 1.2rem;
    }
    
    .project-description {
        font-size: 0.85rem;
    }
    
    .btn {
        padding: 0.8rem 1.5rem;
        font-size: 0.95rem;
    }
    
    .contact-info-container {
        padding: 1rem 1.2rem;
    }
    
    .contact-info-container p {
        font-size: 1rem;
    }
    
    footer {
        padding: 1.5rem 1rem;
    }
    
    .footer-list-items {
        height: 45px;
        width: 45px;
        margin: 0.4rem;
    }
    
    .footer-links {
        font-size: 1.3rem;
    }
    
    .arrow {
        bottom: 1.2rem;
        right: 1.2rem;
        height: 2.4rem;
        width: 2.4rem;
    }
}

/* Extra Small Mobile (under 360px) */
@media screen and (max-width: 359px) {
    section {
        padding: 3rem 1rem;
    }
    
    #profile {
        gap: 2rem;
        padding: 0 1rem;
    }
    
    .section__pic-container {
        width: 200px;
        height: 200px;
    }
    
    .title {
        font-size: 2rem;
    }
    
    .section__text__p1 {
        font-size: 1rem;
    }
    
    .section__text__p2 {
        font-size: 1.2rem;
    }
    
    #about, #projects {
        margin: 2rem 0.5rem;
        padding: 3rem 1.5rem;
    }
    
    .about-pic {
        max-width: 220px;
    }
    
    .about-text p {
        font-size: 0.9rem;
    }
    
    .project-video-container {
        height: 160px;
    }
    
    .btn {
        padding: 0.7rem 1.3rem;
        font-size: 0.9rem;
    }
    
    .contact-info-container {
        padding: 0.9rem 1rem;
    }
    
    .contact-info-container p {
        font-size: 0.95rem;
    }
}

/* Loader Mobile Adjustments */
@media screen and (max-width: 768px) {
    .loader-inner {
        width: 70px;
        height: 70px;
        border-width: 6px;
    }
    
    #profileCircle {
        width: 120px;
        height: 120px;
    }
}

@media screen and (max-width: 480px) {
    .loader-inner {
        width: 50px;
        height: 50px;
        border-width: 5px;
    }
    
    #profileCircle {
        width: 100px;
        height: 100px;
    }
    
    #profileCircle.focus {
        transform: translate(-50%, -50%) scale(8);
    }
}

/* Profile Animation Speed Adjustments */
@media screen and (max-width: 768px) {
    .section__pic-container {
        animation: float 4s ease-in-out infinite;
    }
}

@media screen and (max-width: 480px) {
    .section__pic-container {
        animation: float 3s ease-in-out infinite;
    }
}