/* Import Font for Professional Look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

/* Apply Global Styles */
html {
    font-size: 16px;
    scroll-behavior: smooth; /* Enables smooth scrolling */
}


body {
    margin: 0;
    font-family: 'Inter', sans-serif;
    background: #1E1E1E;
    color: #ffffff;
    padding-top: 10vh;
    overflow-x: hidden;
}

/* Header Styles */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #111;
    padding: 1vh 3vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    height: 10vh;
}

/* Logo */
.logo img {
    height: 18vh;
    width: auto;
    display: block;
}

/* Navigation Styling */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2vw;
    padding: 0;
    margin: 0;
}

nav ul li {
    margin: 0;
    padding: 0 1vw;
}

/* Glowing effect on hover */
nav ul li a {
    position: relative;
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    white-space: nowrap;
    transition: all 0.3s ease-in-out;
}

/* Glow effect when hovered */
nav ul li a:hover {
    color: #ffffff; /* Keep text white */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 
                 0 0 20px rgba(255, 255, 255, 0.6), 
                 0 0 30px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.background-video { pointer-events: none; /* Disables all interaction with the video */ user-select: none; /* Prevents text selection or dragging */ } 


/* Custom Scrollbar - Webkit Browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
    width: 6px; /* Slightly wider for better visibility */
}

/* Track (Background of Scrollbar) */
::-webkit-scrollbar-track {
    background: transparent; /* Fully blends into background */
}

/* Handle (The Scrollbar itself) */
::-webkit-scrollbar-thumb {
    background: #333; /* Darker shade for subtle visibility */
    border-radius: 20px; /* More rounded */
    transition: background 0.3s ease-in-out;
}

/* Handle on Hover */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* Slightly lighter for hover effect */
}

/* Custom Scrollbar for Firefox */
* {
    scrollbar-width: thin; /* Makes scrollbar thin */
    scrollbar-color: #333 transparent; /* Handle color, transparent track */
}


.no-click {
    pointer-events: none; /* Disables all click interactions */
    user-select: none; /* Prevents users from selecting the image */
    -webkit-user-drag: none; /* Prevents dragging in WebKit-based browsers (Chrome, Safari) */
}




/* Unified Quote Section for All Sections */
.skillsquote-section, .insightquote-section, .Experiencequote-section, .projectsquote-section, 
.resumequote-section, .credentialsquote-section, .contactquote-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 12vh;
    width: 100%;
    overflow: hidden;
    text-align: center;
    z-index: 2;
    margin-bottom: -10px;
}

/* Unified Quote Container - Ensuring Insight Quote is Consistent */
.skillsquote-container, .insightquote-container, .Experiencequote-container, .projectsquote-container, 
.resumequote-container, .credentialsquote-container, .contactquote-container {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    font-style: italic;
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6), 0 0 15px rgba(255, 255, 255, 0.4);
    margin-bottom: 0px;
    flex-direction: row; /* Prevents stacking */
    justify-content: center;
    width: 100%;
}

/* Left & Right Parts for Cohesion */
.quote-left, .quote-right,
.insight-left, .insight-right, /* Fixing Insight Quote */
.Experience-left, .Experience-right,
.projects-left, .projects-right,
.resume-left, .resume-right,
.credentials-left, .credentials-right,
.contact-left, .contact-right {
    display: inline-block;
    opacity: 1; /* Ensure visibility */
    text-align: center;
    width: auto;
    max-width: 100%;
}

/* Glowing Effect - Same Across All */
@keyframes glowEffect {
    0% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }
    50% { text-shadow: 0 0 18px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 0.6); }
    100% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }
}

.quote-left, .quote-right,
.insight-left, .insight-right, /* Fixing Insight Quote */
.Experience-left, .Experience-right,
.projects-left, .projects-right,
.resume-left, .resume-right,
.credentials-left, .credentials-right,
.contact-left, .contact-right {
    animation: glowEffect 1.2s infinite alternate;
}

/* Middle Spacer - Ensuring Insight Quote Aligns */
.quote-middle, .insight-middle, .Experience-middle, .projects-middle, 
.resume-middle, .credentials-middle, .contact-middle {
    transition: width 0.3s ease-out;
    display: block;
    width: auto;
    max-width: 90vw;
    font-size: inherit; /* Ensure it matches */
}

/* 🔹 General Glowing Effect (For All Quote Sections Including Insight Quote) */
@keyframes universalQuoteGlow {
    0% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }
    50% { text-shadow: 0 0 18px rgba(255, 255, 255, 0.8); }
    100% { text-shadow: 0 0 8px rgba(255, 255, 255, 0.4); }
}

/* 🔹 Apply to All Quotes (INCLUDING Insight Quote) */
.skillsquote-section .quote-left, .skillsquote-section .quote-right,
.insightquote-section .insight-left, .insightquote-section .insight-right, /* Fixing Insight Quote */
.Experiencequote-section .Experience-left, .Experiencequote-section .Experience-right,
.resumequote-section .resume-left, .resumequote-section .resume-right,
.credentialsquote-section .credentials-left, .credentialsquote-section .credentials-right,
.contactquote-section .contact-left, .contactquote-section .contact-right {
    animation: universalQuoteGlow 1.2s infinite alternate;
}

/* Footer */
footer {
    text-align: center;
    padding: 3vh;
    background: #111;
    width: 100%;
    position: relative;
    bottom: 0;
}

/* 📌 Mobile Quotes Now Behave Exactly Like on Laptops */
@media (max-width: 1024px) {
    .skillsquote-container, .insightquote-container, .Experiencequote-container, 
    .projectsquote-container, .resumequote-container, .credentialsquote-container, 
    .contactquote-container {
        font-size: clamp(2.8vw, 3vw, 3.5vw); /* Matches laptop proportions */
        text-align: center;
        flex-direction: row;
        padding: 2px 5px;
        word-wrap: break-word;
        line-height: 1.2;
        margin-bottom: 5px;
        max-width: 95vw;
        white-space: normal;
        justify-content: center;
        display: flex;
    }
}

/* 📌 Small Screens (Phones) */
@media (max-width: 640px) {
    .skillsquote-container, .insightquote-container, .Experiencequote-container, 
    .projectsquote-container, .resumequote-container, .credentialsquote-container, 
    .contactquote-container {
        font-size: clamp(2.6vw, 3vw, 3.4vw);
        padding: 2px 5px;
        margin-bottom: 5px;
        max-width: 95vw;
        flex-direction: row;
    }
}

/* 📌 Extra Small Screens (Phones Below 475px) */
@media (max-width: 475px) {
    .skillsquote-container, .insightquote-container, .Experiencequote-container, 
    .projectsquote-container, .resumequote-container, .credentialsquote-container, 
    .contactquote-container {
        font-size: clamp(2.5vw, 2.8vw, 3.2vw);
        padding: 2px 5px;
        margin-bottom: 5px;
        max-width: 92vw;
        flex-direction: row;
    }
}





/* ✅ Hide Header on Mobile */
@media (max-width: 1024px) {
    header {
        display: none; /* Removes the main header bar for mobile */
        background: #1E1E1E !important; /* Matches the mobile menu */
    }

    body {
        margin: 0;
        font-family: 'Inter', sans-serif;
        color: #ffffff;
        padding-top: 10vh;
        overflow-x: hidden;
    }
}



/* ✅ Hide Header on Mobile (Now for Screens Below 1024px) */
@media (max-width: 1024px) {
    header {
        display: none; /* Removes the main header bar for mobile */
        background: #1E1E1E !important; /* Matches the mobile menu */
    }

    body {
        margin: 0;
        font-family: 'Inter', sans-serif;
        color: #ffffff;
        padding-top: 10vh;
        overflow-x: hidden;
    }
}

/* ✅ Show Desktop Navigation Only on Larger Screens (1025px and above) */
@media (min-width: 1025px) {
    .desktop-nav {
        display: flex; /* Ensures it stays visible */
    }

    .mobile-menu,
    .hamburger {
        display: none !important; /* Fully hides the mobile elements */
    }
}

/* ✅ Mobile Navigation (Hamburger Menu Now Applies Below 1024px) */
@media (max-width: 1024px) {
    /* 🍔 Hamburger Button (Only on Mobile) */
    .hamburger {
        position: fixed;
        top: 2vh;
        right: 5vw;
        font-size: 2rem;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        z-index: 1100;
        display: block; /* Ensures it's visible on mobile */
    }

    /* 📌 Mobile Menu (Small Sidebar) */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -60%; /* Initially Hidden */
        width: 60vw; /* Sidebar Width */
        height: 100vh;
        background: #111;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        gap: 2rem;
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        box-shadow: -3px 0 10px rgba(0, 0, 0, 0.5);
        padding-bottom: 2rem;
         padding-top: 7vh; /* Moves all elements down */
    }

    /* ✅ Show Menu When Active */
    .mobile-menu.active {
        right: 0; /* Slide in */
    }

    /* 📌 Navigation Links */
    .mobile-menu ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 1.2rem;
        text-align: center;
        padding: 0;

    }

    .mobile-menu ul li {
        font-size: 1.2rem;
        font-weight: 600;
    }

    .mobile-menu ul li a {
        text-decoration: none;
        color: white;
        transition: color 0.2s;
    }

    .mobile-menu ul li a:hover {
        color: #ccc;
    }

    /* 🔹 Mobile Menu Logo at Bottom */
    .mobile-menu-logo {
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        margin-top: -20px;
    }

    .mobile-menu-logo img {
        width: 110px;
        height: auto;
        filter: brightness(0) invert(1);
        opacity: 0.9;
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    .mobile-menu-logo img:hover {
        opacity: 1;
        transform: scale(1.05);
    }

    /* 🔲 Click Outside to Close Menu */
    .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 900;
    }

    .menu-overlay.active {
        display: block;
    }
}

/* 🚀 Hide Hamburger on Larger Screens (Now Above 1024px) */
@media (min-width: 1025px) {
    .hamburger, .mobile-menu, .menu-overlay {
        display: none !important; /* Ensures NO mobile elements on desktops */
    }
}


/* Responsive Footer Adjustments */
@media (max-width: 1024px) {
    footer {
        max-width: 90%; /* Adjusts width for mobile consistency */
        margin: 0 auto;
    }
}

@media (max-width: 475px) {
    footer {
        max-width: 90%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) {
    .background-video {
        display: none !important;

    }
}


/* ✅ Apply fixes ONLY for 1440px screens */
@media (min-width: 1440px) and (max-width: 2560px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ✅ Set a Maximum Width for Content */
    .container, .main-content {
        max-width: 1440px; /* Adjust to 1440p */
        margin: 0 auto;
        width: 100%;
    }

    /* ✅ Ensure Sections Fit within the Viewport */
    section {
        width: 100%;
        max-width: 1440px; /* Adjust to 1440p */
        margin: 0 auto;
        overflow: hidden;
    }

    /* ✅ Fix Background Overflow */
    .background-video-container, .background-image-container {
        width: 100%;
        max-width: 1440px; /* Prevents extending beyond viewport */
        overflow: hidden;
        margin: 0 auto;
        background: #1E1E1E; /* Ensure background blends */
    }


        .contacttitle-section {
            text-align: center; /* Forces title to center */
            width: 100%; /* Ensures full width */
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .contacttitle-section h2 {
            text-align: center; /* Ensures text is centered */
            margin: 0 auto; /* Centers it within flex container */
        }
        
        

    }


/* ✅ Apply fixes ONLY for 2560px screens */
@media (min-width: 2560px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* ✅ Set a Maximum Width for Content */
    .container, .main-content {
        max-width: 2560px; /* Adjust to 2560p */
        margin: 0 auto;
        width: 100%;
    }

    /* ✅ Ensure Sections Fit within the Viewport */
    section {
        width: 100%;
        max-width: 2560px; /* Adjust to 2560p */
        margin: 0 auto;
        overflow: hidden;
    }

    /* ✅ Fix Background Overflow */
    .background-video-container, .background-image-container {
        width: 100%;
        max-width: 2560px; /* Prevents extending beyond viewport */
        overflow: hidden;
        margin: 0 auto;
        background: #1E1E1E; /* Ensure background blends */
    }
}

/* ✅ Apply fixes ONLY for 2560px screens */
@media (min-width: 2560px) {
    /* ✅ Scale Global Font Sizes */
    html {
        font-size: 22px; /* Increased for better readability */
    }

    body {
        padding-top: 12vh; /* Slightly more spacing for header */
    }

    /* ✅ Scale Header */
    header {
        height: 10vh; /* Reduced from 12vh */
        padding: 1vh 2.5vw; /* Slightly less padding */
    }

    /* ✅ Scale Logo */
    .logo img {
        height: 20vh; /* Reduced from 24vh */
    }

    /* ✅ Scale Navigation Links */
    nav ul {
        gap: 2.5vw; /* Slightly reduced spacing */
    }

    nav ul li a {
        font-size: 1.2rem; /* Slightly smaller font size */
    }

    /* ✅ Scale Section Titles */
    .skillsquote-container,
    .insightquote-container,
    .Experiencequote-container,
    .projectsquote-container,
    .resumequote-container,
    .credentialsquote-container,
    .contactquote-container {
        font-size: 3rem; /* Larger title size */
    }

    /* ✅ Scale Contact Title Section */
    .contacttitle-section h2 {
        font-size: 3.5rem; /* Increased font size */
    }

    /* ✅ Scale Scrollbar */
    ::-webkit-scrollbar {
        width: 10px; /* Thicker scrollbar for 4K */
    }

    ::-webkit-scrollbar-thumb {
        border-radius: 25px;
        background: #555; /* More contrast */
    }

    /* ✅ Scale Quotes */
    .quote-left,
    .quote-right,
    .insight-left,
    .insight-right,
    .Experience-left,
    .Experience-right,
    .projects-left,
    .projects-right,
    .resume-left,
    .resume-right,
    .credentials-left,
    .credentials-right,
    .contact-left,
    .contact-right {
        font-size: 3rem;
    }

    /* ✅ Scale Footer */
    footer {
        padding: 5vh;
        font-size: 1.6rem;
    }

    /* ✅ Scale Background Containers */
    .background-video-container,
    .background-image-container {
        max-width: 2560px;
    }

    /* ✅ Scale Mobile Menu */
    .mobile-menu {
        width: 50vw; /* Slightly wider for 4K */
    }

    .hamburger {
        font-size: 3rem; /* Bigger hamburger menu */
    }

    .menu-overlay.active {
        background: rgba(0, 0, 0, 0.6); /* Darker overlay for visibility */
    }
}





/* ✅ Fix for Microsoft Lumia 550 (640x360 resolution) */
@media (max-width: 640px) and (max-height: 360px) {
    
    /* Adjust Mobile Menu */
    .mobile-menu {
        height: 100vh; /* Ensures full height */
        width: 70vw; /* Adjust width to avoid cutting content */
        padding-top: 5vh; /* Space at the top */
        overflow-y: auto; /* Allow scrolling if needed */
    }

    /* Adjust Hamburger Button */
    .hamburger {
        top: 3vh; /* Moves it lower to ensure visibility */
        right: 5vw; /* Ensures it's not cut off */
        font-size: 1.8rem; /* Slightly smaller */
    }

    /* Adjust Menu Items */
    .mobile-menu ul {
        gap: 1rem; /* Reduce spacing between items */
    }

    .mobile-menu ul li {
        font-size: 1rem; /* Slightly reduce font size */
    }

    /* Fix Logo Placement */
    .mobile-menu-logo {
        text-align: center;
    }

    .mobile-menu-logo img {
        width: 90px; /* Smaller logo for small screen */
        height: auto;
    }

    .mobile-menu-logo {
        margin-top: 50px;  /* Moves the logo further down */
        margin-bottom: 60px; /* Ensures proper spacing */
    }

    /* Adjust Contact Button for More Spacing */
    .mobile-menu ul li:last-child {
        margin-bottom: 40px; /* Pushes Contact button up slightly */
    }
}

/* 🎯 Ensure Logo is Visible When Phones Are in Landscape Mode */
@media screen and (max-height: 450px) and (orientation: landscape) {
    .mobile-menu {
        height: 100vh; /* Ensures full height */
        width: 65vw; /* Adjust width to avoid content cut-off */
        padding-top: 5vh; /* Space at the top */
        overflow-y: auto; /* Enable scrolling */
    }

    /* 📌 Adjust Hamburger Button */
    .hamburger {
        top: 3vh; /* Moves it lower for visibility */
        right: 5vw; /* Ensures it's not cut off */
        font-size: 2rem; /* Maintain readability */
    }

    /* 📌 Adjust Menu Items */
    .mobile-menu ul {
        gap: 1rem; /* Reduce spacing between items */
    }

    .mobile-menu ul li {
        font-size: 1rem; /* Reduce font size slightly */
    }

    /* 📌 Fix Logo Placement */
    .mobile-menu-logo {
        text-align: center;
        margin-top: 20px; /* Pushes it further down */
        margin-bottom: 80px; /* Ensures spacing */
    }

    .mobile-menu-logo img {
        width: 90px; /* Smaller logo for landscape mode */
        height: auto;
    }

    /* 📌 Adjust Contact Button for More Spacing */
    .mobile-menu ul li:last-child {
        margin-bottom: 50px; /* Pushes Contact button up slightly */
    }
}



/* Adjust Header & Footer for 1024px - 1440px */
@media (min-width: 1024px) and (max-width: 1440px) {
    /* Header */
    header {
        height: 10.5vh; /* Reduced from 10vh */
        padding: 0.8vh 2vw; /* Adjusted for balance */
    }

    /* Logo */
    .logo img {
        height: 18vh; /* Reduced from 18vh */
    }

    /* Navigation */
    nav ul {
        gap: 1.5vw; /* Slightly reduced */
    }

    nav ul li a {
        font-size: 0.9rem; /* Slightly smaller */
    }

    /* Footer */
    footer {
        padding: 2vh; /* Reduced from 3vh */
    }
}

/* Remove extra margins and overflow issues */
@media (min-width: 1024px) and (max-width: 1440px) {
    html, body {
        margin: 0;
        padding-top: 5vh;
        width: 100%;
        overflow-x: hidden; /* Ensures no horizontal scrolling */
    }

    /* Ensure all sections are properly aligned */
    .container, .main-content, .welcome-section, .about-section {
        max-width: 100vw;
        margin: 0 auto; /* Centers everything properly */
        padding: 0;
        overflow: hidden; /* Prevents extra spacing */
    }

    /* Fix header width */
    header {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }

    /* Fix footer width */
    footer {
        width: 100%;
        max-width: 100vw;
        overflow: hidden;
    }
}