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

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

/* ============================= */
/* COLOR SYSTEM (GLOBAL COLORS) */
/* ============================= */

:root {

    /* Primary Brand Color */
    --primary: #e84d8a;

    /* Darker Hover Version */
    --primary-dark: #c73a72;

    /* Glow Effect */
    --primary-glow: rgba(232, 77, 138, 0.45);


    /* Gradient Colors */
    --primary-gradient-1: #ff4da6;
    --primary-gradient-2: #e84d8a;

    /* Backgrounds */
    --bg-primary: #05060a;
    --bg-secondary: #0d0e13;

    /* SOFT PRIMARY BACKGROUND */
    --primary-soft: rgba(232, 77, 138, 0.15);

    /* Text */
    --text-primary: #ffffff;
    --text-secondary: #9ca3af;

    /* Borders */
    --border-soft: rgba(232, 77, 138, 0.25);

    /* NAVBAR GLASS BACKGROUND */
    --navbar-bg: rgba(5, 6, 10, 0.6);

    /* LOADER EMPTY BAR */
    --loader-empty: #1a1d25;

    /* BUTTON HOVER GRADIENT */
    --primary-hover-1: #f43f94;
    --primary-hover-2: #d9467c;

    /* BUTTON ACTIVE SHADOW */
    --press-shadow: rgba(0, 0, 0, 0.35);

    /* HERO IMAGE ACCENT */
    --hero-border: #e84d8a;

    --hero-glow: rgba(232, 77, 138, 0.45);

}

/* ============================= */
/* GLOBAL STYLES */
/* ============================= */

body {

    font-family: Arial, Helvetica, sans-serif;

    background: var(--bg-primary);

    color: var(--text-primary);

}

/* ============================= */
/* LOADER SCREEN */
/* ============================= */

#loader {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100vh;

    background: var(--bg-primary);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 9999;

    transition:
        opacity 0.5s ease,
        visibility 0.5s ease;

}


/* Hide loader */

#loader.hide {

    opacity: 0;

    visibility: hidden;

}


/* Content */

.loader-content {

    text-align: center;

}


/* Logo */

.loader-logo {

    font-size: 2rem;

    margin-bottom: 1.5rem;

}


/* Progress Bar */

.loader-bar {

    width: 200px;

    height: 4px;

    background: var(--loader-empty);

    border-radius: 999px;

    overflow: hidden;

    margin: auto;

}


/* Animated progress */

.loader-progress {

    height: 100%;

    width: 0%;

    background: linear-gradient(to right,
            var(--primary-gradient-1),
            var(--primary-gradient-2));

    animation:
        loaderFill 1.5s ease forwards;

}


@keyframes loaderFill {

    from {
        width: 0%;
    }

    to {
        width: 100%;
    }

}


/* Text */

.loader-text {

    margin-top: 1rem;

    font-size: 0.85rem;

    color: var(--text-secondary);

}

/* ============================= */
/* GLOBAL REVEAL ANIMATION */
/* ============================= */

.reveal {

    opacity: 0;

    transform: translateY(40px);

    transition:
        opacity 0.6s ease,
        transform 0.6s ease;

}

.reveal.show {

    opacity: 1;

    transform: translateY(0);

}

/* STAGGER */

.reveal:nth-child(1) {
    transition-delay: 0.1s;
}

.reveal:nth-child(2) {
    transition-delay: 0.25s;
}

.reveal:nth-child(3) {
    transition-delay: 0.4s;
}

.reveal:nth-child(4) {
    transition-delay: 0.55s;
}

.reveal:nth-child(5) {
    transition-delay: 0.7s;
}

.reveal:nth-child(6) {
    transition-delay: 0.85s;
}

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

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 100;

    background: var(--navbar-bg);

    backdrop-filter: blur(8px);

}

.nav-container {

    width: 100%;

    padding: 1.2rem 3rem;

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.nav-right {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}

/* LOGO */

.logo {

    font-size: 1.2rem;

    font-weight: bold;

}

.logo-primary {
    color: var(--primary);
}

.logo-accent {
    color: #f59e0b;
}

/* NAV LINKS */

.nav-links {

    display: flex;

    gap: clamp(1rem, 2vw, 2rem);


}

.nav-links a {

    text-decoration: none;

    color: var(--text-secondary);

    font-size: clamp(0.85rem, 1vw, 1rem);

    transition: 0.2s;

}

.nav-links a:hover {

    color: var(--text-primary)
}

/* RESUME BUTTON */

.resume-btn {

    text-decoration: none;

    display: inline-block;

    background: linear-gradient(to right,
            var(--primary-gradient-1),
            var(--primary-gradient-2));

    border: none;

    cursor: pointer;

    color: var(--text-primary);

    padding: 0.5rem 1.2rem;

    border-radius: 0.5rem;

    font-size: 0.9rem;

}

/* MOBILE RESUME */

.mobile-resume-btn {

    display: none;

    text-decoration: none;

    padding: 0.6rem 1rem;

    border-radius: 0.5rem;

    font-size: 0.9rem;

    text-align: center;

    background: linear-gradient(to right,
            var(--primary-gradient-1),
            var(--primary-gradient-2));

    color: white !important;

    margin-top: 0.5rem;

}

/* SHARED GRADIENT BUTTON STYLE */

.gradient-btn {

    background: linear-gradient(to right,
            var(--primary-gradient-1),
            var(--primary-gradient-2));

    color: var(--text-primary);

    border: none;

    border-radius: 0.5rem;

    cursor: pointer;

    transition:
        background 0.25s ease,
        transform 0.08s ease,
        box-shadow 0.15s ease;

}

/* HOVER — slightly darker gradient */
.gradient-btn:hover {

    background: linear-gradient(to right,
            var(--primary-hover-1),
            var(--primary-hover-2));

}

/* On CLICK) */
.gradient-btn:active {

    transform: scale(0.97);

    box-shadow:
        inset 0 2px 6px var(--press-shadow);

}

/* HAMBURGER ICON (default hidden on desktop) */

.menu-toggle {

    display: none;

    flex-direction: column;

    justify-content: space-between;

    width: 26px;

    height: 18px;

    font-size: 1.4rem;

    cursor: pointer;

}

/* hamburger lines */

.menu-toggle span {

    display: block;

    height: 3px;

    width: 100%;

    background: white;

    border-radius: 2px;

    transition: 0.3s ease;

}

/* ACTIVE STATE, ANIMATION — TURN INTO X*/

.menu-toggle.active span:nth-child(1) {

    transform:
        rotate(45deg) translate(5px, 5px);

}

.menu-toggle.active span:nth-child(2) {

    opacity: 0;

}

.menu-toggle.active span:nth-child(3) {

    transform:
        rotate(-45deg) translate(5px, -5px);

}

/* NAVBAR MOBILE */

@media (max-width:768px) {

    /* Hide nav links initially */

    .nav-links {

        display: none;

        position: absolute;

        top: 70px;

        right: 2rem;

        background: var(--navbar-bg);

        flex-direction: column;

        padding: 1rem 1.5rem;

        border: 1px solid #1f2937;

        border-radius: 0.6rem;

        gap: 1rem;

        min-width: 160px;

    }

    /* SHOW MENU WHEN ACTIVE */
    .nav-links.active {

        display: flex;

        background: rgba(5, 6, 10, 0.92);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

    }

    /* Hide resume button on mobile */
    .resume-btn {

        display: none;

    }

    .mobile-resume-btn {

        display: block;

    }

    /* Show hamburger */
    .menu-toggle {

        display: flex;

    }

}

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

.hero {

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    justify-content: center;

    position: relative;

}

.hero-container {

    width: min(92vw, 85rem);
    /* wider than other sections */

    margin: auto;

    padding-top: 5rem;

    display: grid;

    grid-template-columns: 1fr 380px;

    align-items: center;

    gap: 4rem;

}

/* HERO RIGHT */

.hero-right {

    display: flex;

    justify-content: center;

}

/* HERO IMAGE */

.hero-image {

    width: 340px;

    border-radius: 50%;

    border: 2px solid var(--hero-border);

    box-shadow:
        0 0 40px var(--hero-glow);

}

/* TITLE */

.hero-title {

    font-size:
        clamp(2.5rem, 6vw, 4.5rem);

    font-weight: bold;

    margin-bottom: 1rem;

}

.highlight {

    color: var(--primary);

}

/* ROLE */

.hero-role {

    font-size:
        clamp(1.2rem, 2vw, 1.8rem);

    margin-bottom: 1.5rem;

}

/* TEXT */

.hero-text {

    color: var(--text-secondary);

    max-width: 38rem;

    line-height: 1.6;

    margin-bottom: 2rem;

}

/* BUTTONS */

.hero-buttons {

    display: flex;

    gap: 1rem;

    margin-bottom: 2rem;

    flex-wrap: wrap;

}

.btn {

    text-decoration: none;

    padding: 0.8rem 1.4rem;

    border-radius: 0.5rem;

    font-size: 0.9rem;

}



.secondary-btn {

    border: 1px solid #374151;

    color: var(--text-primary);

}

.secondary-btn:hover {

    border: 1px solid var(--hero-border);

}

/* SOCIAL ICONS */

.social-icons {

    display: flex;

    gap: 1.5rem;

    color: var(--text-secondary);

    font-size: 1.1rem;

}

.social-icons a {

    color: var(--text-secondary);

    font-size: 1.1rem;

    transition: 0.2s;

    text-decoration: none;

}

.social-icons a:hover {

    color: var(--primary);

    transform: translateY(-2px);

}

/* SCROLL DOWN Arrow*/

.scroll-down {

    position: absolute;

    bottom: 2rem;

    left: 50%;

    transform: translateX(-50%);

    color: var(--text-secondary);

    font-size: 1.2rem;

    animation:
        bounceDown 1.6s ease-in-out infinite;

}

@keyframes bounceDown {

    0% {
        transform: translate(-50%, 0);
    }

    50% {
        transform: translate(-50%, 10px);
    }

    100% {
        transform: translate(-50%, 0);
    }

}

/* blinking cursor */

.cursor {

    display: inline-block;

    margin-left: 2px;

    animation: blink 1s infinite;

    position: relative;
    top: -2px;

}

@keyframes blink {

    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }

}

/* HERO MOBILE */

@media (max-width:768px) {

    .hero-container {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .hero-right {

        margin-top: 2rem;

    }

    .hero-image {

        width: 220px;

    }

}

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

.about {

    background: var(--bg-secondary);

    padding: 6rem 0;

}

.about-container {

    width: min(90vw, 75rem);

    margin: auto;

}

.about-header {

    text-align: center;

    margin-bottom: 4rem;

}

.about-tag {

    font-size: 0.8rem;

    padding: 0.3rem 0.8rem;

    border: 1px solid #374151;

    border-radius: 999px;

    color: var(--text-secondary);

}

.about-header h2 {

    font-size:
        clamp(2rem, 4vw, 2.8rem);

    margin-top: 1rem;

}

.underline {

    width: 3rem;

    height: 3px;

    background: var(--primary);

    margin: 0.8rem auto 0;

}

.about-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3rem;

}

.about-left h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.about-left p {

    color: var(--text-secondary);

    line-height: 1.7;

    margin-bottom: 1rem;

}

.about-right {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}

/* ABOUT CARD */

.about-card {

    background: var(--bg-primary);

    border: 1px solid #1f2937;

    padding: 1.5rem;

    border-radius: 0.6rem;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    gap: 1rem;

    transition: 0.3s ease;

}

.about-card:hover {

    border-color: var(--primary);

    box-shadow:
        0 0 14px var(--primary-glow);

    transform: translateY(-5px);

}

/* TEXT WRAP */
.about-text h4 {
    margin: 0;
    line-height: 1.2;
}

.about-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* ICON */

.about-icon {

    width: 46px;

    height: 46px;

    flex: 0 0 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-soft);

    border-radius: 50%;

    font-size: 1.1rem;

    color: var(--primary);

    transition: 0.3s ease;

}

.about-card:hover .about-icon {

    background: var(--primary);

    color: white;

}

/* ABOUT MOBILE */

@media (max-width:768px) {

    .about-content {

        grid-template-columns: 1fr;

    }

}

/* ============================= */
/* SKILLS SECTION PAGE */
/* ============================= */

.skills {

    background: var(--bg-primary);

    padding: 6rem 0;

}

.skills-container {

    width: min(90vw, 75rem);

    margin: auto;

}


/* ============================= */
/* HEADER */
/* ============================= */

.skills-header {

    text-align: center;

    margin-bottom: 3rem;


}

.skills-header h2 {

    font-size: clamp(2rem, 4vw, 2.8rem);

    margin-top: 0.5rem;

}

.skills-tag {

    display: inline-block;

    padding: 0.3rem 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    font-size: 0.8rem;

    color: #bbb;

}


/* ============================= */
/* SKILLS GRID */
/* ============================= */

.skills-grid {

    display: grid;

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

    gap: 1.5rem;

    align-items: start;

}


/* ============================= */
/* SKILL CARD */
/* ============================= */

.skill-card {

    background: var(--bg-primary);

    border: 1px solid #1f2937;

    border-radius: 0.6rem;

    min-height: 12rem;

    overflow: hidden;

    cursor: pointer;

    transition: 0.3s;

}

.skill-card:hover {

    border-color: var(--primary);

}


/* ============================= */
/* CARD HEADER */
/* ============================= */

.skill-header {

    padding: 1.8rem 1.5rem;

    min-height: 8.5rem;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

}

.skill-header h3 {

    margin-bottom: 0.4rem;

    font-size: 1.1rem;

}

.skill-header p {

    font-size: 0.85rem;

    color: var(--text-secondary);

}


/* ============================= */
/* PREVIEW PILLS */
/* ============================= */

.skill-preview {

    display: flex;

    flex-wrap: wrap;

    gap: 0.4rem;

    margin-top: 0.8rem;

    opacity: 1;

    transition: opacity 0.25s ease;

}

/* Hide preview when expanded */

.skill-card.active .skill-preview {

    opacity: 0;

    pointer-events: none;

}

/* Delay returning when collapsing */

.skill-card:not(.active) .skill-preview {

    transition-delay: 0.35s;

}


/* ============================= */
/* EXPANDABLE CONTENT */
/* ============================= */

.skill-content {

    max-height: 0;

    overflow: hidden;

    padding: 0 1.5rem;

    opacity: 0;

    transition:

        max-height 0.4s ease,

        opacity 0.25s ease;

}

.skill-card.active .skill-content {

    max-height: 500px;

    padding-bottom: 1.5rem;

    opacity: 1;

}

/* ============================= */
/* SKILL ITEMS */
/* ============================= */

.skill-item {

    margin-top: 1rem;

}

.skill-item span {

    font-size: 0.9rem;

}


/* ============================= */
/* PROGRESS BAR */
/* ============================= */

.bar {

    height: 6px;

    background: var(--loader-empty);

    border-radius: 999px;

    margin-top: 0.3rem;

    overflow: hidden;

}

.progress {

    height: 100%;

    background: linear-gradient(to right,
            var(--primary-gradient-1),
            var(--primary-gradient-2));

    border-radius: 999px;

}


/* ============================= */
/* PILL STYLE */
/* ============================= */

.pill {

    padding: 0.25rem 0.6rem;

    font-size: 0.7rem;

    border-radius: 999px;

    background: #1f2937;

    color: #d1d5db;

    border: 1px solid #374151;

    white-space: nowrap;

}

/* +more pill */

.pill.more {

    background: #111827;

    color: #9ca3af;

}


/* ============================= */
/* DESCRIPTION */
/* ============================= */

.skills-description {

    display: block;

    max-width: 42rem;

    margin-left: auto;

    margin-right: auto;

    margin-top: 3rem;

    text-align: center;

    color: #9ca3af;

    line-height: 1.7;

    font-size: clamp(0.95rem,
            1.2vw,
            1.1rem);

}

/* ============================= */
/* PROJECTS SECTION PAGE */
/* ============================= */

.projects {

    background: var(--bg-secondary);

    padding: 6rem 0;

}

.projects-container {

    width: min(90vw, 85rem);

    margin: auto;

}

/* HEADER */

.projects-header {

    text-align: center;

    margin-bottom: 4rem;

}

.projects-tag {

    display: inline-block;

    padding: 0.3rem 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    font-size: 0.8rem;

    color: #bbb;

    margin-bottom: 0.8rem;

}

.projects-header h2 {

    font-size: clamp(2rem, 4vw, 2.8rem);

}

/* ============================= */
/* PROJECT SLIDER */
/* ============================= */

.projects-slider {

    position: relative;

    height: 380px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    touch-action: none;

}

/* PROJECT CARD BASE */

.project-card {

    position: absolute;

    width: 260px;

    text-decoration: none;

    color: inherit;

    border-radius: 1rem;

    overflow: hidden;

    transition: 0.4s ease;

}

.project-card img {

    width: 100%;

    height: auto;

    display: block;

    border-radius: 1rem;

}

.project-card h3 {

    text-align: center;

    margin-top: 0.8rem;

    font-size: 1rem;

    color: white;

}

/* POSITION STATES */

.pos-1 {

    transform: translateX(-520px) scale(0.65);

    opacity: 0.3;

    z-index: 1;

}

.pos-2 {

    transform: translateX(-300px) scale(0.82);

    opacity: 0.6;

    z-index: 2;

}

.pos-3 {

    transform: translateX(0) scale(1.12);

    opacity: 1;

    z-index: 5;

    width: 300px;

    cursor: pointer;

}

.pos-4 {

    transform: translateX(300px) scale(0.82);

    opacity: 0.6;

    z-index: 2;

}

.pos-5 {

    transform: translateX(520px) scale(0.65);

    opacity: 0.3;

    z-index: 1;

}

/* ============================= */
/* JOURNEY SECTION PAGE */
/* ============================= */

.journey {

    background: var(--bg-primary);

    padding: 6rem 0;

}

.journey-container {

    width: min(90vw, 75rem);

    margin: auto;

}

/* HEADER */

.journey-header {

    text-align: center;

    margin-bottom: 4rem;

}

.journey-tag {

    display: inline-block;

    padding: 0.3rem 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    font-size: 0.8rem;

    color: #bbb;

    margin-bottom: 0.8rem;

}

.journey-header h2 {

    font-size: clamp(2rem, 4vw, 2.8rem);

}

/* ============================= */
/* MOBILE PROJECT ARROWS */
/* ============================= */

.project-mobile-nav {

    display: none;

    justify-content: center;

    gap: 2rem;

    margin-top: 1.5rem;

}


/* Arrow buttons */

.proj-arrow {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    border: 1px solid #374151;

    background: #05060a;

    color: #9ca3af;

    font-size: 1rem;

    cursor: pointer;

    transition: 0.25s ease;

    display: flex;
    align-items: center;
    justify-content: center;

}


/* Hover */

.proj-arrow:hover {

    color: white;

    border-color: #7c3aed;

    background: rgba(124, 58, 237, 0.15);

    transform: translateY(-2px);

}


/* Show ONLY on mobile */

@media (max-width: 768px) {

    .project-mobile-nav {

        display: flex;

    }

}

/* ============================= */
/* TIMELINE BASE*/
/* ============================= */

.timeline {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 2.8rem;

}

/* Vertical line */

.timeline::before {

    content: "";

    position: absolute;

    left: 190px;

    top: 0;

    width: 2px;

    height: 100%;

    background: linear-gradient(to bottom,
            transparent,
            var(--primary),
            transparent);

    opacity: 0.6;

}

/* ============================= */
/* TIMELINE ITEM */
/* ============================= */

.timeline-item {

    display: grid;

    grid-template-columns: 300px 1fr;

    column-gap: 80px;

    position: relative;

}

/* YEAR */

.timeline-year {

    color: var(--text-secondary);

    font-size: 0.9rem;

    white-space: nowrap;

    padding-top: 28px;

}

/* DOT */

.timeline-item::before {

    content: "";

    position: absolute;

    left: 183px;

    top: 26px;

    width: 16px;

    height: 16px;

    background: var(--primary);

    border-radius: 50%;

    box-shadow: 0 0 0 4px var(--bg-primary);

}

/* CONTENT BOX */

.timeline-content {

    background: var(--bg-primary);

    border: 1px solid #1f2937;

    padding: 1.4rem 1.6rem;

    border-radius: 0.6rem;

    max-width: 740px;

    transition: 0.3s ease;

}

/* TITLE */

.timeline-content h3 {

    font-size: 1.1rem;

    margin-bottom: 0.4rem;

}

/* SHORT TEXT */

.timeline-content p {

    color: var(--text-secondary);

    line-height: 1.6;

    font-size: 0.95rem;

}

.timeline-content:hover {

    border-color: var(--primary);

    box-shadow: 0 0 16px var(--primary-glow);

    transform: translateY(-2px);

}

/* ============================= */
/* MOBILE PROJECT SECTION*/
/* ============================= */

@media (max-width: 768px) {

    .timeline::before {

        left: 10px;

    }

    .timeline-item {

        grid-template-columns: 1fr;

        gap: 0.6rem;

    }

    .timeline-item::before {

        left: 2px;
        top: 6px;

    }

    .timeline-year {

        margin-left: 1.5rem;

        font-size: 0.85rem;

    }

    .timeline-content {

        margin-left: 1.5rem;

        max-width: 100%;

    }

}


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

.contact {

    background: var(--bg-secondary);

    padding: 6rem 0;

}

.contact-container {

    width: min(90vw, 75rem);

    margin: auto;

}

/* HEADER */

.contact-header {

    text-align: center;

    margin-bottom: 3rem;

}

.contact-tag {

    display: inline-block;

    padding: 0.3rem 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 999px;

    font-size: 0.8rem;

    color: #bbb;

}

.contact-header h2 {

    font-size: clamp(2rem, 4vw, 2.8rem);

}

/* GRID */

.contact-grid {

    display: grid;

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

    gap: 1.5rem;

}

/* CARD */

.contact-card {

    background: var(--bg-primary);

    border: 1px solid #1f2937;

    padding: 1.6rem;

    border-radius: 0.6rem;

    display: flex;

    align-items: center;

    gap: 1rem;

    transition: 0.3s ease;

}

.email-card {

    text-decoration: none;

    color: inherit;

    cursor: pointer;

}

.contact-card:hover {

    border-color: var(--primary);

    box-shadow: 0 0 14px var(--primary-glow);

    transform: translateY(-5px);

}

.contact-card:hover .contact-icon {

    background: var(--primary);

    color: var(--text-primary);

}

/* ICON */

.contact-icon {

    width: 46px;

    height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--primary-soft);

    border-radius: 50%;

    font-size: 1.1rem;

    color: var(--primary);

    transition: 0.3s ease;

}

/* FOLLOW */

.follow-card {

    grid-column: span 2;

    justify-content: center;

    text-align: center;

}

.follow-subtext {

    color: var(--text-secondary);

    font-size: 0.9rem;

    margin-top: 0.3rem;

    margin-bottom: 1rem;

}

/* TEXT */

.contact-info h3 {

    font-size: 1rem;

    margin-bottom: 0.3rem;

}

.contact-info p {

    color: var(--text-secondary);

    font-size: 0.9rem;

}

/* SOCIAL BUTTONS */

.social-row {

    display: flex;

    gap: 2rem;

    justify-content: center;

    margin-top: 0.8rem;

}

.social-btn {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid #374151;

    color: #9ca3af;

    text-decoration: none;

    transition: 0.25s ease;

}

.social-btn:hover {

    color: var(--text-primary);

    border-color: var(--primary);

    background: var(--border-soft);

    transform: translateY(-2px);

}

/* ============================= */
/* MOBILE CONTACT PAGE*/
/* ============================= */

@media (max-width: 768px) {

    .contact-grid {

        grid-template-columns: 1fr;

    }

    .follow-card {

        grid-column: span 1;

    }

}

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

.footer {

    background: var(--navbar-bg);

    border-top: 1px solid #1f2937;

    padding: 1.6rem 3rem;

    position: relative;

}

.footer-logo {

    position: absolute;

    left: 3rem;

    top: 50%;

    transform: translateY(-50%);

    font-weight: bold;

    font-size: 1.1rem;

}

.footer-copy {

    text-align: center;

    color: var(--text-secondary);

    font-size: 0.9rem;

}

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

@media (max-width: 768px) {

    .footer {

        padding: 1.6rem 1.5rem;

    }

    .footer-logo {

        position: static;

        transform: none;

        margin-bottom: 0.5rem;

        text-align: center;

    }

}