/*==============================================================
    JEFF ISAAC PORTFOLIO
    RESPONSIVE DESIGN SYSTEM
    Version : 1.0
==============================================================*/
/*==============================================================
    BREAKPOINTS
==============================================================

1400px  → Large Desktop
1200px  → Desktop
992px   → Laptop
768px   → Tablet
576px   → Mobile
400px   → Small Mobile
==============================================================*/
/*==============================================================
    LARGE DESKTOP
==============================================================*/
@media (max-width:1400px){
    :root{
        --container:1200px;
    }
    h1{
        font-size:64px;
    }
    h2{
        font-size:46px;
    }
}
/*==============================================================
    DESKTOP
==============================================================*/
@media (max-width:1200px){
    :root{
        --container:1140px;
    }
    section{
        padding:90px 0;
    }
    .section-title{
        font-size:44px;
    }
    .hero-title{
        font-size:58px;
    }
    .hero-description{
        max-width:550px;
    }
}
/*==============================================================
    LAPTOP
==============================================================*/
@media (max-width:992px){
    section{
        padding:80px 0;
    }
    .navbar{
        padding:15px 0;
    }
    .navbar-collapse{
        background:#111;
        border:1px solid var(--border);
        border-radius:12px;
        margin-top:20px;
        padding:25px;
    }
    .navbar-nav{
        gap:10px;
    }
    .navbar-nav .nav-link{
        padding:12px 0;
    }
    .btn-hire{
        width:100%;
        margin-top:20px;
    }
    .hero-title{
        font-size:50px;
    }
    .hero-content{
        text-align:center;
    }
    .hero-buttons{
        justify-content:center;
    }
    .hero-image{
        margin-top:50px;
        text-align:center;
    }
    .stats-card{
        margin-bottom:30px;
    }
    .project-card{
        margin-bottom:30px;
    }
    .footer{
        text-align:center;
    }
    .footer-brand{
        justify-content:center;
    }
    .social-links{
        justify-content:center;
    }
}
/*==============================================================
    TABLET
==============================================================*/
@media (max-width:768px){
    section{
        padding:70px 0;
    }
    h1{
        font-size:46px;
    }
    h2{
        font-size:38px;
    }
    h3{
        font-size:30px;
    }
    .section-title{
        font-size:38px;
    }
    .hero-title{
        font-size:42px;
    }
    .hero-subtitle{
        font-size:16px;
    }
    .hero-buttons{
        flex-direction:column;
        gap:15px;
    }
    .hero-buttons .btn{
        width:100%;
    }
    .card-custom{
        padding:28px;
    }
    .section-header{
        text-align:center;
    }
    .timeline{
        padding-left:20px;
    }
    .timeline::before{
        left:8px;
    }
    .timeline-item{
        padding-left:30px;
    }
    .timeline-item::before{
        left:-2px;
    }
    .floating-whatsapp{
        width:55px;
        height:55px;
        font-size:24px;
    }
    .back-to-top{
        width:50px;
        height:50px;
    }
}
/*==============================================================
    MOBILE
==============================================================*/
@media (max-width:576px){
    body{
        font-size:15px;
    }
    section{
        padding:60px 0;
    }
    h1{
        font-size:38px;
    }
    h2{
        font-size:32px;
    }
    h3{
        font-size:26px;
    }
    .section-title{
        font-size:30px;
    }
    .section-description{
        font-size:15px;
    }
    .hero-title{
        font-size:34px;
        line-height:1.2;
    }
    .hero-description{
        font-size:15px;
    }
    .btn{
        width:100%;
        justify-content:center;
    }
    .card-custom{
        padding:22px;
    }
    .footer{
        padding:70px 0 30px;
    }
    .footer-title{
        margin-top:20px;
    }
    .footer-bottom{
        flex-direction:column;
        text-align:center;
    }
    .floating-whatsapp{
        right:18px;
        bottom:20px;
    }
    .back-to-top{
        right:18px;
        bottom:90px;
    }
}
/*==============================================================
    SMALL MOBILE
==============================================================*/
@media (max-width:400px){
    h1{
        font-size:32px;
    }
    h2{
        font-size:28px;
    }
    .hero-title{
        font-size:28px;
    }
    .section-title{
        font-size:26px;
    }
    .navbar-brand{
        font-size:16px;
    }
    .brand-icon{
        width:36px;
        height:36px;
        font-size:13px;
    }
    .card-custom{
        padding:18px;
    }
    .btn{
        padding:13px 20px;
        font-size:14px;
    }
}