/*==================================================
1200px
==================================================*/

@media (max-width:1200px){

    .container{
        width:92%;
    }

    .hero h1{
        font-size:58px;
    }

    .hero p{
        width:100%;
    }

    .mega-container{
        grid-template-columns:repeat(3,1fr);
    }

    .logo img{
        width: 100px;
    }

    .logo span{
        font-size:1.1rem;
    }

}


/*==================================================
992px
==================================================*/

@media (max-width:992px){

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

    .header-container{
        padding:15px 25px;
    }

    header nav ul{
        gap:18px;
    }

    /*========== HERO ==========*/

    .hero{
        height:80vh;
    }

    .hero h1{
        font-size:48px;
    }

    /*========== DEVELOPERS ==========*/

    .developers-slider{
        width:100%;
        gap:20px;
    }

    .developer-card{
        display:flex;
        flex-direction:column;
        width:100%;
    }

    .developer-image{
        width:100%;
        height:350px;
        overflow:hidden;
    }

    .developer-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .developer-info{
        width:100%;
        padding:40px;
    }

}


/*==================================================
768px
==================================================*/

@media (max-width:768px){

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

    header nav{
        display:none;
    }

    .header-contact{
        display:none;
    }

    .menu-toggle{
        display:flex;
    }

    /*========== HERO ==========*/

    .hero{
        height:auto;
        padding:120px 0 70px;
    }

    .hero h1{
        font-size:40px;
    }

    .hero p{
        font-size:17px;
    }

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

    .btn{
        width:100%;
        text-align:center;
    }

    /*========== DEVELOPERS ==========*/

    .developers{
        padding:70px 0;
    }

    .developers-slider{

        width:100%;

        display:flex;

        align-items:center;

        justify-content:center;

        gap:12px;

    }

    /*========== FLECHAS ==========*/

    .slider-btn{

        display:flex;

        justify-content:center;

        align-items:center;

        width:45px;

        height:45px;

        font-size:18px;

        flex-shrink:0;

    }

    .developer-card{
        display:flex;
        flex-direction:column;
        padding:0;
        overflow:hidden;
        border-radius:22px;
    }

    .developer-image{
        width:100%;
        height:260px;
    }

    .developer-image img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .developer-info{
        width:100%;
        padding:30px;
    }

    .developer-info h3{
        font-size:36px;
        margin-bottom:20px;
    }

    .developer-info p{
        font-size:18px;
        line-height:1.8;
    }

}


/*==================================================
480px
==================================================*/

@media (max-width:480px){

    /*========== HERO ==========*/

    .hero h1{
        font-size:34px;
    }

    /*========== TITLES ==========*/

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

    /*========== DEVELOPERS ==========*/

    .developer-image{
        height:220px;
    }

    .developer-info{
        padding:25px;
    }

    .developer-info h3{
        font-size:30px;
    }

    .slider-btn{

    width:38px;

    height:38px;

    font-size:16px;

}

}

@media(max-width:992px){

    .projects-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .banks{

        padding:50px 0;

    }

    .banks-title h2{

        font-size:1.7rem;

    }

    .banks-track{

        gap:40px;

    }

    .banks-track img{

        height:35px;

    }

}

/*==========================================================
BUSCADOR RESPONSIVE
==========================================================*/

@media(max-width:900px){

    .search-results-section{

        width:90%;

        padding:45px 30px;

    }

    .search-results-grid{

        grid-template-columns:

            repeat(2,1fr);

    }

}


@media(max-width:600px){

    .search-results-section{

        width:92%;

        padding:40px 20px;

        margin-top:35px;

        border-radius:15px;

    }

    .search-results-header h3{

        font-size:1.6rem;

    }

    .search-results-header p{

        font-size:.9rem;

        line-height:1.7;

    }

    .search-results-grid{

        grid-template-columns:1fr;

        gap:15px;

    }

    .search-result-card{

        min-height:auto;

        padding:25px;

    }

    .search-result-info h4{

        font-size:1.3rem;

    }

}