@media(max-width:767px){
   

    html{
        padding: 0;
    }
    /*box*/

    .box{
        background-color: #d6e8f7;
        /*:#ADD8E6;*/
        /*padding-top: 2px;
        padding-bottom: 15px;*/
        padding: 2px 20px 15px;
        margin-top: 10px;
        text-align: center;
       
    }

   .box p{
        text-align:justify;
    }

    .box h3{
        text-transform: uppercase;
    }

    .box button{
        margin: 0 auto;
        background-color:#6558f5;
        padding: 5px 40px;
        color:white;
        border-radius: 5px;
       
    }

    /*section box*/
    

    .portifolio{
        width: 100%;
        justify-content: space-between;
       
    }

    .testimonials article h3{
        text-align: center;
        text-transform: uppercase;
    }

    .testimonials article img{
        margin: 0 auto;
        display: block;
        width: 100%;
    }

    article a{
      float: right;
      margin-right: 10px;
      margin-top: 20px;
      text-decoration:none;
      font-size: 20px;
      
    }

    .testimonials p{
        margin: 0 auto;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 50px;
    }

    /*------------depoimento-------------*/

    article blockquote,
    .comments p{

        background-color: #e3e8ec;
        width: 100%;
        margin: 0  auto;
        text-align: justify;
        padding: 5px 5px 15px;
    }

    .comments p{

       text-align: right;
        
    }

    .testimonials{
        width: 100%;
        margin: 0  auto;
    }
    .comments{
        width: 95%;
    }

    /*-----------BANNER--------------*/

    .banner{
        background-image:url(/img/surf.png);
        background-size: cover;
        background-repeat: no-repeat;
        text-align: center;
        background-color: rgba(0, 0, 0, 0.5);
        margin: 0 auto;
        padding: 15px 19px;
        margin-bottom: 20px;

    }

    /*------NAV----------*/ 

    nav{
        
        height: 25px;
        width: 25px;
        background-size: cover;
        
        
    }

    header nav{
        background-image: url(/img/barra-de-menu.png);
    }

    header{
        background-color:#e3e8ec;
        border-bottom:3px solid #ccd3dc;
        border-top: 3px solid #ccd3dc;
        display:flex;
        align-items:center;
        justify-content:space-between;
        
        
    }

    nav ul{
        display:none;
    }

    header{
         /* Espaçamento interno nas direções: superior, direita, inferior, esquerda */
        padding: 5px 7px 5px 20px;
    }

    header h1{
        font-size:20px;
        
    }

    body .nav:last-child{
        display: none;
    }

    footer{
        display:none;
    }



}

/*------TABLETTTT-------*/

@media (min-width:768px) and (max-width:1023px){

    .banner{
        background-image:url(/img/surf.png);
        background-size: cover;
        background-repeat: no-repeat;
        text-align: left;
        margin: 0 auto;
        /* Espaçamento interno nas direções: superior, direita, inferior, esquerda */
        padding: 70px 220px 70px 80px;
    }

    .banner h1{
        font-size: 50px;
    }

    .subtitle{
        font-size: 18px;
    }


    /* -------BOX------*/

    .box button{
        margin: 0 auto;
        background-color:#6558f5;
        padding: 5px 45px;
        color:white;
        border-radius: 5px;
        margin-top: 10px;
       
    }


    .portfolio .box:last-child button{
        margin: 0 auto;
        background-color:#6558f5;
        padding: 5px 200px;
        color:white;
        border-radius: 5px;
        margin-top: 45px;
        
       
    }

    .box:last-child{
    /* Espaçamento interno nas direções: superior, direita, inferior, esquerda */

    padding-left: 60px;
    padding-right: 60px;

        
    }

        
    
    
    .box{
        display:inline-block;
        flex-basis: 300px;
        flex-grow: 1;
        background-color: #d6e8f7;
         /* Espaçamento interno nas direções: superior, direita, inferior, esquerda */
         height: 180px;
        padding: 5px 30px 18px 30px ;
        text-align: justify;
        
    }

    .portfolio{
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
        
    }
    
    /*--------DEPOIMENTO----------*/

    .testimonials article:first-child{
        display: grid;
        grid-template-columns: 200px 250px;
        column-gap: 20px;
        
     
    }

    .testimonials article:first-child h3{
        grid-column: span 2 / span 2;
       
        margin:0;
        
    }

    .testimonials article:first-child img{
        grid-column: span 1 / span 1;
        max-width: 100%;
        
        
    }

    .testimonials article:first-child p{
        grid-column: span 1 / span 1;
        text-align: left;
        margin: 0;
        
    }

    .comments{
        display: grid;
        grid-template-columns: auto;
       
        
    }
    .comments blockquote{
        background-color: #e3e8ec;
        /* Espaçamento interno nas direções: superior, direita, inferior, esquerda */
        text-align: justify;
        padding: 15px;
        margin:0;
    }

    .testimonials{
        display: flex;
        align-items: center;
        max-width: 100%;
        align-items: stretch;
        
    }

    .testimonials h3{
        font-size: 25px;
    }



    /*------nav footer-----*/

    main nav:last-child ul{
        list-style-type: none;
        justify-content: end;
        gap:20px;
        display:flex;
        margin-top: 4px;
        margin-bottom: 4px;
        
    }

    main nav:last-child a{
        text-decoration: none;
        color: black;
        
    }

    main nav:last-child {
        background-color:#e3e8ec;
        border: 3px solid #ccd3dc;
        padding-right: 40px;
        

        
    }

    /*---------NAV DE CIMA----------*/

    header{
        background-color:#e3e8ec; 
        display: flex;
        align-items: center;
        border: 3px solid #ccd3dc;
        margin-bottom: 20px;
        margin-top: 10px;
        /* padding-left: 10px; */
        width: 100%;
        justify-content: space-between;
        
    }

    header nav a{
        text-decoration: none;
        color: black;
        
    }

    header nav ul{
        list-style-type: none;
        justify-content: last baseline;
        display: flex;
        gap:5px;
    
    }

    header h1{
        font-size: 20px;
    }

    body{
        margin: 0;
    }

    main{
        margin:8px;
    }

    

    footer{
        display: none;
        
    }


}


@media (min-width:1024px){


    body{
        background-color: #002434;
        
    }

    main{
        background-color: white;
        padding-left:20px;
        padding-top: 20px;
        padding-right: 20px;        
    }
    .banner{
        background-image: url(/img/surf.png);
        background-size: cover;
        background-repeat: no-repeat;
        margin: 0 auto;
        color:white;
         /* Espaçamento interno nas direções: superior, direita, inferior, esquerda */
        padding: 60px 1000px 200px 60px;
        
    }

    .banner h1{
        text-transform: uppercase;
        font-size: 60px;
        margin-bottom: 8px;
    }

    .subtitle{
        font-size: 20px;
    }

    /*---------divs---------*/

    .box{
        
        display: inline-block;
        border: 1px solid red;
        background-color: #0076aa;
        color: white;
        /* Espaçamento interno nas direções: superior, direita, inferior, esquerda */
        padding: 0px 20px 10px 20px;
        height: 300px;
        width: 30%;
        
    }

    .box p{

        font-size: 15px;
    }

    .box h3{
        font-size: 30px;
         text-transform: uppercase;
    }
    .box button{
        background-color: #00a3e1;
        color: white;
        font-size: 15px;
        padding: 10px;
        border-radius: 6px;
        position: absolute;
        bottom: 0;
        margin-bottom: 15px;
    }

    .portfolio{
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
        position: relative;
        
    }

    /*----------articles----*/

    .testimonials article:first-child{
        display: grid;
        grid-template-columns: 498px 350px;
        column-gap: 10px;
        position: relative;
        
    }

    .testimonials article:first-child h3{
        grid-column: span 2 / span 2;
    }

    .testimonials article:first-child img{
        grid-column: span 1 / span 1;
        width: 100%;
        max-width: 100%;
        
    }

    .testimonials article:first-child p{
        grid-column: span 1 / span 1;
        text-align: left;
        margin: 0;
        
    }

    .testimonials h3{
        font-size: 25px;
         text-transform: uppercase;
        
    }

    .comments{
        display: grid;
        grid-template-columns: auto;
    }

    .comments blockquote{
        background-color: #d5f0ff;
        margin: 0;
        padding: 20px;

    }

    .testimonials{
        display: flex;
        align-items: center;
        max-width: 100%;
        align-items: stretch;
        grid-column-gap: 150px;
        
    }

    .testimonials article:first-child p a{
        text-decoration: none;
        font-size: 20px;
        position: absolute;
        bottom: 0;
    }


    /*------nav footer-----*/

    main nav:last-child ul{
        list-style-type: none;
        gap:20px;
        display:flex;
        margin-top: 4px;
        margin-bottom: 4px;
        justify-content: space-between;
    }

    main nav:last-child a{
        text-decoration: none;
        color: black;
        margin: 0;
        
    }

    main nav:last-child {
        background-color:#d5f0ff;
        border: 3px solid #ccd3dc;
        padding-right: 250px;
        padding-left: 250px;
        margin-top: 20px;
        
        
    }

    /*-------footer------*/

    footer p{
        color: white;
        margin-left:30px;
    }


    /**-----nav de cima-----*/

    header{
    
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        margin-top: 10px;
        padding-left: 40px;
        padding-right: 40px;
        /* padding-left: 10px; */
        
        justify-content: space-between;
        
    }

    header nav a{
        text-decoration: none;
        color: white;
        
    }

    header nav ul{
        list-style-type: none;
        justify-content: space-between;
        display: flex;
        gap: 70px;
    
    }

    header h1{
        font-size: 40px;
        color:white;
        text-transform: uppercase;
    }

    header h1 strong{
        color:#0098d2;
    }

    header nav{
        display: flex;
        
    }

    

 

   





}