* {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
                font-family: "Lato", sans-serif;
                
            }

            html {
                scroll-behavior: smooth;
            }

            .uxby {
                margin-right: 2rem;
                color: #fff;
            }

            .uxby span {
                color: #ff5f1f;
            }

            body {
                background-color: #111111;
                height: 100vh;
            }


            .flex {
                display: flex;
            }

            h2.titulo {
            text-transform: uppercase;
                color: #fff;
                font-size: 30px ;
                font-weight: 700 bolder;
                text-align: center;
                padding-top: 100px;
                

            }

           

            .sobre .txt-sobre .btn-s button:hover {
                border: 2px solid #ff5f1f;
                box-shadow: none;
                transform: scale(1.05);
            }

            button:hover, form .btn-enviar input:hover {
            
                box-shadow: 0px 0px 8px #ff5f1f;
                color: #fff;
                transition: .2s;
                
            }

            /* nav */

            /* .logo img {
                width: 65px;
                height: 65px;
                border-radius: 5px;
            } */


            header > .interface {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: #111111;
                width: 100%;
                height: 90px;
                padding:  0 4rem;
                border-bottom: 1px solid #f1f1f1;

            }




            .menu-desktop ul li {
                font-size: larger;
                font-weight: bold;
                
            }




            header a { 
                color: #fdfdfd;
                text-decoration: none;
                display: inline-block;
                font-size: 20px;
            }

            header a:hover{
                color: #ff5f1f;
                transform: scale(1.05);
                transition: .2s;
            } 

            header nav ul {
                list-style-type: none;
            }

            header nav.menu-desktop ul li {
                display: inline-block;
                padding: 0 40px;
            }

            .btn-contato button {
                padding: 15px 40px;
                font-size: 20px;
                font-weight: 700;
                background-color: #000;
                color: #fff;
                border: 0;
                border-radius: 30px;
                cursor: pointer;

            }
            .btn-contato button:hover {
               border: 2px solid #ff5f1f;
               color: #fff;
               box-shadow: none;
            }

            /* header menu mobile */
            .btn-abrir {
                font-size: 40px;
               margin: 0 -40px;
               color: #fff;
            }

           

            .menu-mobile {
                background-color:#000000;
                height: 100vh;
               position: fixed;
                top: 0;
                right: 0;
                z-index: 999999;
                width: 0%;
                overflow: hidden;
                transition: .4s;
            }            

            .btn-abrir{
             display: none;
             }


            .menu-mobile.open-menu{
                width: 65%;
            }

            .menu-mobile.open-menu ~  .overlay-mobile{
                display: block;
            }


             .menu-mobile .btn-fechar {
                padding: 20px 7%;
             }

            .menu-mobile .btn-fechar i {
                color: #ff5f1f;
                font-size: 30px;
                
            }

            .menu-mobile nav ul {
                text-align:right ;
            }

        .menu-mobile nav ul li a {
            color: #fff;
            font-size: 20px;
            font-weight: 400;
            padding: 20px 8%;
            display: block;
        }

        .menu-mobile nav ul li a:hover{
            background-color: #ff5f1f;
            color: #000;
        }

        .overlay-mobile {
            background-color: #00000091;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 888888;
            display: none;
            
        }

            /* topo do site */

            section .top-site {
                padding: 40px 4%;
            }

            .top-site .flex {
                align-items: center;
                justify-content: center;
                gap: 90px;
            }

            .flex .img1 {
            width: 100%;
            height: 300;
            margin: 200px 50px;
            text-align: right;
            border: none;
            border-radius: 40%;
            }

            .flex .txt-top{
            
                padding: 0 8%;
                padding-top: 40px;
                
            }

            

            .flex .txt-top h1 {
                text-transform: uppercase;
                font-size: 30px;
                font-weight: 700 bolder;
                color: #f2f2f2;
                margin: 20px 0;
            }

            .flex .txt-top h1 span {
                color: #ff5f1f;
                
            }

            .top-site .txt-top p {
                font-size: 20px;
                line-height: 40px;
                margin: 40px 0;
                justify-content: space-between;
                color: #f2f2f2;
                margin-top: 5px;
            }

            .top-site .txt-top p span {
                font-weight: bolder;
                
            }

            /* .top-site .img1 img{
                position: relative;
                animation: flutuar 2s ease-in-out infinite alternate; 
            } */

            /* @keyframes : efeitos animados no css */

            @keyframes flutuar {
                0%{ 
                    top: 0 ;
                }
                100%{
                    top: 30px;
                }
            }

            /* especialidades */
            section .especialidades {
                padding: 80px 4%; 
               
              
                
            }

            .especialidades h2 {
               padding-top: -15px;
            }

         section .especialidades .flex {
           padding: 70px;
            
           }

            .especialidades .especialidades-box {
            color: #fff;
            padding: 60px;
            grid-column: auto;
            text-align: center;
            justify-content:space-around;
            margin: auto;
            margin-top: 8rem;
            width: 100%;
            max-width: 350px;
            max-height: 400px;
            height: 100%;
            border-radius: 20px;
            transition: 0.2s;
            
            
            /* grid-template-columns: repeat(auto-fill, 450px); */
            }


            .especialidades .especialidades-box:hover {
                transform: scale(1.05);
                border: 1px solid #ff5f1f;
              
            }

            h2 span {
                color: #ff5f1f;
            }


            .especialidades .especialidades-box i { 
                color: #fff;
                font-size: 80px;
            

            }



            .especialidades .especialidades-box h3 {
                color: #fff;
                font-size: 25px;
                margin: 25px 0;

            
            }

            .especialidades .especialidades-box p {
                font-size: 20px;
                justify-items: center;
                text-align: center;
            }

            /* sobre mim */
            section.sobre {
                padding: 180px 4%;
            }

            section.sobre .flex{
                align-items: center;
                gap: 40px;
            }

            .txt-sobre h2 {
                color: #fff;
                text-transform: uppercase;
                font-size: 30px;
                line-height: 40px;
                margin-bottom: 40px;
            }

            .txt-sobre h2 span {
                display: block;
            }

            .txt-sobre p {
                color: #fff;
                font-size: 30px;
                margin: 20px 0;
            text-align: justify;
            }

            .sobre .txt-sobre .btn-s button {
            width: 70px;
            height: 70px;
            border-radius: 30px;
            border: none;
            font-size: 25px;
            text-align: center;
            background-color: #000;
            margin-top: 40px;
            cursor: pointer;
            color: #fff;
            transition: .2s;
            box-shadow: none;
          
            
           
            }

           .flex  .btn-s {
                text-align: right;
               
               
            }

             

            /* portifolio */

            section.portifolio {
                padding: 50px 4%;;
                
            }

            section.portifolio .flex {
            justify-content: space-around;
            padding-top: 100px;
            gap: 70px;
            }

            .img-port {
            
                width: 100%;
                max-width: 460px;
                margin: 0 auto;
                height: 560px;
                background-color: #ff5f1f;
                background-size: cover;
                border-radius: 40px;
                cursor: pointer;
                background-position: 100% 0%;
                transition: 30s;
                position: relative;
            }

            .img-port:hover {
                background-position: 100% 100%;
            }

            .img-port2 {
                
                width: 100%;
                max-width: 700px;
                margin: 0 auto;
                height: 560px;
                background-color: #ff5f1f;
                background-size: cover;
                border-radius: 40px;
                cursor: pointer;
                background-position: 100% 0%;
                transition: 10s;
                position: relative;
            
            }

            .img-port2:hover {
                background-position: 100% 100%;
            }

            .img-port3 {
                width: 100%;
                max-width:460px;
                 margin: 0 auto;
                height: 560px;
                background-color: #ff5f1f;
                background-size: cover;
                border-radius: 40px;
                cursor: pointer;
                background-position: 100% 0%;
                transition: 8s;
                position: relative;
            
            }

            .img-port3:hover {
                background-position: 100% 100%;
            }

            .overlay{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #000000d6;
                border-radius: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: 700;
                color: #fff;
                opacity: 0;
                transition: .7s;
            }

            .overlay:hover{
                opacity: 1;
            }

            .overlay2{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: #000000d6;
                border-radius: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                font-size: 25px;
                font-weight: 700;
                color: #fff;
                opacity: 0;
                transition: .7s;
            
            }

            .overlay2:hover{
                opacity: 1;
            }

            /* form */

            section.formulario {
                padding: 80px 4%;
                
            }

            form{
                max-width: 500px;
                margin: 0 auto;
                display: flex;
                justify-content: center;
                flex-direction: column;
                gap: 15px;
                margin-top: 30px;
            }

            form input, form textarea {
                width: 100%;
                background-color: #3030309d;
                border: 0;
                outline: 0;
                padding: 25px 20px;
                border-radius: 20px;
            font-size: 20px;
                
            }

            form textarea{
                resize: none;
                max-height: 100px;
                font-size: 20px;
            }

            form .btn-enviar{
                margin-top: 20px;
                text-align: center;
            }

            form .btn-enviar input {
                width: 180px;
                background-color: #ff5f1f;
                color: #000000;
                font-weight: 800;
                cursor: pointer;
            transition: .3s;
            font-size: 18px;
            }

            .input-t{
                position: relative;
            
                font-size: 20px;
                
                
            }

            .input-t label {
                position: absolute;
                left: 0;
                bottom: 25px;
                margin-left: 20px;
            color: #ffffff60;
                
            }

            .input-tA{
                position: relative;
            
                font-size: 20px;
            }

            .input-tA label{
                position: absolute;
                left: 0;
                bottom: 30px;
                margin-left: 15px;
            }

            form .input-t .ipt:focus ~ label,
            form .input-t .ipt:valid ~ label{
                transform: translateY(-25px);
                font-size: 15px;
                transition: .3s;
            color: #000;
            font-weight: 400;
            }

            /* footer */

            footer{
                padding: 25px 6%;
                border-top: 1px solid #f2f2f2ab;
                color: #fff;

            }

            footer h2 {
                padding-top:20px ;
            }

            footer .flex{
                
                justify-content: space-between;
         
            }



            footer .line-footer {
                padding: 20px 0;
            }

            footer .line-footer p {
                color: #fff;
                padding-top: 20px;
                font-size: 18px;
                
                
                
            }

            footer .line-footer p i {
            font-size: 22px;
            margin-top: 20px;
            color: #ff5f1f;
            
            }

            footer .line-footer p a {
                color: #fff;
                 align-items: center;
                
            }




            .logo-footer img{
                width: 65px;
                height: 65px;
                border-radius: 5px;
                 margin-top: 20px;
               
                
            }

           



   
             
    



        @media screen and (max-width:1040px) {


             .flex  .btn-s {
                text-align: center;
               
               
            }
        
        
            /* classes gerais */
            .flex {
                flex-direction: column-reverse;
               
                
            }

           
            
            .flex .txt-top {
                flex-direction: column;
            }

            .btn-abrir{
             display: block;
             }

            
            h2.titulo {
            font-size: 34px;
            margin-top: 70px;
            text-align: center;
            line-height: 40px;
        
             }

            /* media cabeçalho */
            .menu-desktop, .btn-contato{
                display: none;
                
            }

            /* topo do site */

            section .top-site {
            padding: 20px 8%;
            }

            .top-site .txt-top h1 {
            margin-top: -400px;
            font-size: 30px;
            }
        

            .top-site .txt-top p {
            font-size: 22px;
            margin-top: 12px;
            
            }

            .top-site .img1 img {
                width: 100%;
                margin-top: -90px;
                
                
            }

            .top-site .flex {
            align-items: center;
            justify-content: center;
            gap: 40px;
            }

            /* especialidades */
            section .especialidades  {
                padding: 60px 8%;
            
                
            }
             .especialidades h2 {
                font-size: 30px;
                
            }

            .especialidades h2 span {
                flex-wrap: wrap;
            }

            .especialidades .flex {
            flex-direction: column;
            }

            .especialidades .especialidades-box {
            
            width: 300px;
            max-width: 300px;
            height:100%;
            max-height: auto;
            
           }
            

            .especialidades .especialidades-box h3 {
            font-size: 25px;
            }

            .especialidades .especialidades-box p {
            font-size: 22px;
            
            }

            /* sobre mim */
            section.sobre {
            padding: 80px 8%;
            }

            .txt-sobre h2 {
            font-size: 30px;
            text-align: center;
            line-height: 30px;
            
            
            }

          
            
            .txt-sobre p {
            font-size: 22px;
            margin: 20px 0;
            
            }
            
           
        

            .img-sobre img {
                width: 100%;
            }

            /* portifolio */


            .portifolio h2 {
                font-size: 30px;
            }

            section .portifolio {
                padding: 80px 8%;
                 
            }

             section.portifolio .flex {
            gap: 60px;
            flex-direction: column;

            }


            .img-port {
            
                width: 100%;
                max-width: 460px;
                 margin: 0 auto;

            }


             .img-port2 {
                
                width: 100%;
                max-width:460px;
                height: 560px;
                margin: 0 auto;
                }


                .img-port3 {
                width: 100%;
                max-width:460px;
                margin: 0 auto;

                }

                /* footer */
                footer .flex{
                    flex-direction: column;
               
                
                }

                  
               .logo-footer img {
                text-align: center;
               }
                
                 footer .line-f  {
                  text-align: center;
                 }

                }