/* =====================================
        TABLET
===================================== */

@media (max-width:992px){

    /* Navbar */

    .navbar{
        padding:15px 0;
    }

    .navbar-collapse{
        background:#0C1427;
        padding:20px;
        margin-top:20px;
        border-radius:18px;
    }

    .nav-link{
        margin:12px 0;
        text-align:center;
    }

    /* Hero */

    #home{
        min-height:auto;
        padding:110px 0 70px;
        text-align:center;
    }

    #home .container{
        max-width:720px;
    }

    .hero-photo{
        position:relative;
        width:100%;
        max-width:420px;
        height:500px;
        margin:40px auto 0;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        border-radius:24px;
        background-size:cover;
        background-position:center;
        opacity:1;
        -webkit-mask-image:none;
        mask-image:none;
    }

    #home::before{
        background:rgba(5,11,24,.85);
    }

    #home::after{
        display:none;
    }

    .welcome{
        justify-content:center;
    }

    .welcome::after{
        display:none;
    }

    #home h1{
        font-size:56px;
        line-height:1;
        margin-bottom:15px;
    }

    #home h3{
        font-size:32px;
        margin-bottom:18px;
    }

    .hero-text{
        max-width:650px;
        margin:0 auto 30px;
        font-size:17px;
        line-height:1.8;
    }

    .hero-buttons{
        display:flex;
        justify-content:center;
        gap:15px;
        flex-wrap:wrap;
    }

    .hero-buttons .btn{
        min-width:190px;
        padding:14px 30px;
    }

    /* Sections */

    section{
        padding:90px 0;
    }

    /* About */

    #about img{
        margin-bottom:35px;
    }

    /* Skills */

    .skills-wrapper{
        grid-template-columns:repeat(2,1fr);
    }

    .skill-box{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.05);
    }

    .skill-box:nth-child(3),
    .skill-box:nth-child(4){
        border-bottom:none;
    }

}

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

@media (max-width:768px){

    html,
    body{
        overflow-x:hidden;
    }

    .container{
        padding:0 20px;
    }

    /* Navbar */

    .navbar{
        padding:15px 0;
    }

    .navbar-brand{
        font-size:24px;
    }

    .navbar-collapse{
        background:#101827;
        padding:18px;
        margin-top:15px;
        border-radius:18px;
    }

    .nav-link{
        margin:10px 0;
        text-align:center;
    }

    /* Hero */

    #home{
        min-height:auto;
        padding:90px 0 60px;
        text-align:center;
    }

    #home .row{
        flex-direction:column-reverse;
        align-items:center;
    }

    .hero-photo{
        position:relative;
        left:auto;
        right:auto;
        top:auto;
        bottom:auto;
        width:100%;
        max-width:320px;
        height:400px;
        margin:0 auto 35px;
        border-radius:22px;
        background-size:cover;
        background-position:center;
        opacity:1;
        -webkit-mask-image:none;
        mask-image:none;
    }

    #home::before{
        background:rgba(5,11,24,.85);
    }

    #home::after{
        display:none;
    }

    .welcome{
        font-size:12px;
        letter-spacing:2px;
        margin-bottom:10px;
        justify-content:center;
    }

    .welcome::after{
        display:none;
    }

    #home h1{
        font-size:46px;
        line-height:1;
        margin-bottom:12px;
    }

    #home h3{
        font-size:28px;
        margin-bottom:18px;
    }

    .hero-text{
        max-width:100%;
        font-size:16px;
        line-height:1.8;
        margin:0 auto 30px;
    }

    .hero-buttons{
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:15px;
    }

    .hero-buttons .btn{
        width:220px;
        padding:14px;
        font-size:15px;
    }

    /* Skills */

    #skills{
        margin-top:20px;
    }

    .skills-wrapper{
        grid-template-columns:1fr;
    }

    .skill-box{
        padding:25px;
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.06);
    }

    .skill-box:last-child{
        border-bottom:none;
    }

    /* Sections */

    section{
        padding:70px 0;
    }

    .section-title{
        margin-bottom:45px;
    }

    .section-title h2{
        font-size:34px;
    }

    .section-title p{
        font-size:16px;
    }

    /* About */

    #about{
        text-align:center;
    }

    #about img{
        margin-bottom:30px;
    }

    #about h2{
        font-size:34px;
    }

    #about h3{
        font-size:32px;
    }

    .about-highlights{
        grid-template-columns:1fr;
    }

    /* Projects */

    .project-card{
        margin-bottom:25px;
    }

    .project-card img{
        height:220px;
    }

}

/* =====================================
        SMALL PHONES
===================================== */

@media (max-width:576px){

    .navbar-brand{
        font-size:22px;
    }

    #home{
        padding-top:80px;
    }

    .hero-photo{
        max-width:280px;
        height:350px;
    }

    #home h1{
        font-size:38px;
    }

    #home h3{
        font-size:24px;
    }

    .hero-text{
        font-size:15px;
    }

    .hero-buttons .btn{
        width:100%;
        max-width:220px;
    }

    .section-title{
        margin-bottom:40px;
    }

    .section-title h2{
        font-size:30px;
    }

    #about h2{
        font-size:30px;
    }

    #about h3{
        font-size:28px;
    }

    .project-card img{
        height:200px;
    }

}

/* =====================================
        VERY SMALL PHONES
===================================== */

@media (max-width:400px){

    #home h1{
        font-size:32px;
    }

    #home h3{
        font-size:22px;
    }

    .hero-photo{
        max-width:240px;
        height:300px;
    }

    .hero-text{
        font-size:14px;
    }

    .section-title h2{
        font-size:28px;
    }

}

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

@media (max-width:992px){

    .skills-wrapper{
        grid-template-columns:repeat(2,1fr);
    }

    .skill-box{
        border-right:none;
        border-bottom:1px solid rgba(255,255,255,.05);
    }

}

@media (max-width:576px){

    .skills-wrapper{
        grid-template-columns:1fr;
    }

    .skill-box{
        padding:25px;
    }

}