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

.min-vh-75 {
    min-height: 75vh;
}



/* Blob-shaped profile image */
.profile-img {
    width: 350px;
    height: 350px;
    object-fit: cover;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    transition: 0.5s;
}

.profile-img:hover { border-radius: 50%; }

/* Project hover effect */
.project-card {
    transition: transform .3s ease, box-shadow .3s ease;
}
.project-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.2)!important;
}

/* Navbar small shadow */
.navbar-shadow {
    box-shadow: 0 2px 15px rgba(0,0,0,0.05);
}

/* Responsive hero */
@media (max-width: 991px) {
    .reverse-on-mobile { flex-direction: column-reverse; }
    .profile-img {
        width: 250px;
        height: 250px;
        margin-bottom: 25px;
    }
}

/* ========================================================= */
/* TIMELINE                                                   */
/* ========================================================= */
.timeline-step {
    padding: 20px;
    border-left: 3px solid var(--bs-primary);
    margin-left: 20px;
    margin-bottom: 20px;
}
.timeline-step h5 { margin-bottom: 5px; }

/* ========================================================= */
/* THEME SWITCH                                               */
/* ========================================================= */
.theme-switch {
    width: 60px;
    height: 30px;
    background-color: #d1d5db;
    border-radius: 50px;
    position: relative;
    transition: .3s;
}
.switch-handle {
    width: 24px;
    height: 24px;
    background:white;
    border-radius: 50%;
    position: absolute;
    top:3px; left:3px;
    display:flex; align-items:center; justify-content:center;
    transition: .3s;
}
.switch-handle i {
    color: #f59e0b;
    font-size: 14px;
}

/* Dark mode overrides */
[data-bs-theme="dark"] .theme-switch {
    background-color:#6366f1;
}
[data-bs-theme="dark"] .switch-handle {
    transform: translateX(30px);
}
[data-bs-theme="dark"] .switch-handle i {
    color:#6366f1;
}

/* ========================================================= */
/* PIXEL ART AVATAR                                          */
/* ========================================================= */
.avatar-generator {
    width: 300px;      /* smaller size */
    height: 300px;
    border-radius: 50%;    /* perfectly round */
    object-fit: cover;
    background: white;     /* clean border background */
    padding: 10px;         /* gives a “profile photo frame” look */
    border: 3px solid #e5e7eb;  /* subtle border */
    transition: transform 0.3s ease;
}

.avatar-generator:hover {
    transform: scale(1.05);
}

/* ========================================================= */
/* TECH PATH TIMELINE (FIXED & ALIGNED)                      */
/* ========================================================= */

.tech-timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
}

/* 1. The Central Vertical Line */
.timeline-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Keeps line centered */
    top: 0;
    bottom: 0;
    width: 4px;
    background: rgba(13, 110, 253, 0.2);
    border-radius: 4px;
    z-index: 0;
}

/* 2. The Row Wrapper */
.timeline-row {
    display: flex;
    justify-content: center; /* Centering content */
    align-items: center;
    position: relative;
    width: 100%;
    margin-bottom: 60px; /* Space between steps */
}

/* 3. The Central Icon (Dot) - FIXED POSITIONING */
.timeline-dot {
    width: 56px;
    height: 56px;
    background: white;
    border: 4px solid var(--bs-primary);
    border-radius: 50%;
    
    /* ABSOLUTE CENTER TRICK */
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-primary);
    font-size: 1.2rem;
    box-shadow: 0 0 0 5px rgba(13, 110, 253, 0.1);
    transition: all 0.3s ease;
}

/* Hover Effect - Only Scale, No Move */
.timeline-row:hover .timeline-dot {
    transform: scale(1.15); /* Just grow slightly */
    box-shadow: 0 0 0 10px rgba(13, 110, 253, 0.2);
    background: var(--bs-primary);
    color: white;
    cursor: default;
}

/* 4. The Content Wrapper */
.timeline-content {
    width: 45%; 
    position: relative;
    z-index: 5;
}

.content-left { margin-right: auto; text-align: right; }
.content-right { margin-left: auto; text-align: left; }

/* 5. The Card Design */
.tech-card {
    background: white;
    padding: 25px;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    position: relative;
    transition: transform 0.3s ease;
}

.tech-card:hover {
    transform: translateY(-5px);
    border-color: var(--bs-primary);
}

/* 6. The Connector Arm */
.tech-card::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 55px; /* Length of the arm */
    height: 4px;
    background-color: #e9ecef;
    transform: translateY(-50%);
    transition: background-color 0.3s;
    z-index: -1;
}

.content-left .tech-card::before { right: -55px; }
.content-right .tech-card::before { left: -55px; }

.timeline-row:hover .tech-card::before {
    background-color: var(--bs-primary);
}

/* Mobile Fixes */
@media (max-width: 768px) {
    .timeline-line { left: 30px; transform: none; }
    .timeline-dot { left: 30px; margin: 0; right: auto; } /* Reset centering */
    .timeline-content { width: 100%; padding-left: 80px; }
    .content-left, .content-right { text-align: left; margin: 0; }
    .tech-card::before { display: none; }
}

/* Dark Mode */
[data-bs-theme="dark"] .tech-card { background: #212529; border-color: #374151; }
[data-bs-theme="dark"] .timeline-dot { background: #0d1117; }
[data-bs-theme="dark"] .timeline-line { background: #374151; }