@media (max-width: 430px){

    header section#intro {

    }

    section#intro section {
        position: relative;
        top: 10%;
    }

    section#intro a {
        display: block;
    }

    .col-xss-12 {
        width: 100%;
    }
}

@media (max-width: 767px){

    .row {
        text-align: center;
    }

    .heading-line {
        margin: 10px auto 25px auto;
    }

}

/* ---------- Timeline: single column on phones & tablets ---------- */
@media (max-width: 991px) {
    .timeline::before {
        left: 30px;
        margin-left: -2px;
    }
    .timeline .icon {
        left: 30px;
        margin-left: -25px;
    }
    #experience .content,
    #experience .content.left,
    #experience .content.right {
        float: none;
        width: auto;
        margin-left: 72px;
        margin-right: 0;
    }
    #experience .content.left::before,
    #experience .content.right::before {
        left: auto;
        right: 100%;
        top: 18px;
        border-width: 12px;
        border-color: transparent #222 transparent transparent;
    }
}

/* ---------- Portfolio stays LTR & left-aligned on small screens ---------- */
@media (max-width: 767px) {
    #portfolio .row {
        text-align: left;
    }
    #portfolio figcaption,
    #portfolio .item-content,
    #portfolio .item-header {
        text-align: left;
    }
    #portfolio nav ul {
        padding-left: 0;
    }
}

/* ---------- Tablet: two portfolio cards per row ---------- */
@media (min-width: 768px) and (max-width: 991px) {
    #portfolio .portfolio-item {
        width: 50%;
    }
}