/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/*---------------------------------------------------------------------- STYLE TO PHONE --------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 400px) {
    
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*------------------------------------------------------------------- REMOVE OS EFEITOS DE HOVER -------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

        section.about .about-text .tech-1 .tech-a:hover,
        section.about .about-text .tech-1 .tech-b:hover,
        section.about .about-text .tech-1 .tech-c:hover,
        section.about .about-text .tech-1 .tech-d:hover,
        section.about .about-text .tech-2 .tech-a:hover,
        section.about .about-text .tech-2 .tech-b:hover,
        section.about .about-text .tech-2 .tech-c:hover,
        section.about .about-text .tech-2 .tech-d:hover {
            opacity: 1; 
            transition: none; 
        }

        section.about .certification img:hover {
            opacity: 1; 
            transform: none; 
        }

        section.about .button-cta .btn-projects:hover {
            opacity: 1;
            transform: none; 
        }
        
        section.about .button-cta .btn-download:hover {
            opacity: 1;
            transform: none;
        }

    /*---------------------------------------------------------------------------------------------------------*/
    /*-------------------------------------------- ABOUT ------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------*/

        section.about {
            width: 400px; 
            max-width: 400px; 
            margin: 0 auto;
            padding: 20px; 
            box-sizing: border-box; 
        }

        section.about .flex .about-text {
            width: 100%; 
            text-align: left;
            justify-content: center;
            gap: 20px;
        }
        section.about .flex .about-text .title {
            width: 110%; 
            max-width: 500px;
            text-align: left;
            justify-content: center;
        }

        section.about .flex .about-text .title h2 {
            width: 100%; 
            max-width: 400px;
            font-size: 22px;
            line-height: 25px;
            text-align: justify;
            text-justify: inter-word;
            margin-top: 20px;
            margin-left: -20px;
        }

        section.about .flex .about-text .title p {
            width: 100%; 
            max-width: 400px;
            text-align: justify;
            text-justify: inter-word;
            line-height: 25px;
            font-size: 20px; 
            margin-left: -20px;
        }

        section.about .about-text .text-tech {
            width: 100%;
            gap: 50px;
        }
        
        section.about .about-text .text-tech h3 {
            padding: 2%;
            font-size: 18px;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-left: 80px;
            margin-top: 50px;
            margin-bottom: 60px;
        }

        section.about .about-text .text-cert {
            width: 100%;
        }

        section.about .about-text .text-cert h3 {
            padding: 2%;
            font-size: 18px;
            align-items: center;
            justify-content: center;
            color: #fff;
            margin-left: 80px;
            margin-top: -50px;
            margin-bottom: 20px;
        }

        section.about .flex .about-text .tech {
            width: 100%;
            max-width: 400px;
        }

        section.about .interface .flex .about-text .tech-1 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }
        
        section.about .interface .flex .about-text .tech-2 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 20px;
        }

        section.about .certification {
            width: 100%;
            max-width: 400px;
            display: flex;
            text-align: justify;
            text-justify: inter-word;
            gap: 10px;
            margin-left: 0px;
            margin-top: 0px;
        }
        
        section.about .certification img {
            width: 110px;
            height: 110px;
        }
        
        section.about .button-cta {
            display: flex;
            flex-direction: column; 
            padding: 0 100px;
            margin-top: 50px;
            margin-bottom: 20px;
            gap: 20px;
            align-items: center;
            justify-content: center;
        
        }
    
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 1 A STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        section.about .interface .flex .about-text .tech-1 .tech-a {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-1 .tech-a .background {
            position: relative;
            top: -80px;
            left: 80px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-1 .tech-a .frontend {
            position: relative;
            top: -45px;
            left: 85px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-1 .tech-a img{
            position: absolute;
            top: 48px;
            left: 103px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }

    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 1 B STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        section.about .interface .flex .about-text .tech-1 .tech-b {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-1 .tech-b .background {
            position: relative;
            top: -80px;
            left: 10px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-1 .tech-b .frontend {
            position: relative;
            top: -45px;
            left: 15px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-1 .tech-b img{
            position: absolute;
            top: 48px;
            left: 32px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }

    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 1 C STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        section.about .interface .flex .about-text .tech-1 .tech-c {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-1 .tech-c .background {
            position: relative;
            top: -80px;
            left: -60px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-1 .tech-c .frontend {
            position: relative;
            top: -45px;
            left: -55px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-1 .tech-c img{
            position: absolute;
            top: 48px;
            left: -36px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }

    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 1 D STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        section.about .interface .flex .about-text .tech-1 .tech-d {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-1 .tech-d .background {
            position: relative;
            top: -80px;
            left: -130px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-1 .tech-d .frontend {
            position: relative;
            top: -45px;
            left: -125px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-1 .tech-d img{
            position: absolute;
            top: 48px;
            left: -104px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }

    
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 2 A STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        section.about .interface .flex .about-text .tech-2 .tech-a {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-2 .tech-a .background {
            position: relative;
            top: -110px;
            left: 76px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-2 .tech-a .frontend {
            position: relative;
            top: -75px;
            left: 82px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-2 .tech-a img{
            position: absolute;
            top: 18px;
            left: 102px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }
    
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 2 B STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        
        section.about .interface .flex .about-text .tech-2 .tech-b {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-2 .tech-b .background {
            position: relative;
            top: -110px;
            left: 10px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-2 .tech-b .frontend {
            position: relative;
            top: -75px;
            left: 15px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-2 .tech-b img{
            position: absolute;
            top: 18px;
            left: 35px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }

      
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 2 C STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        
        section.about .interface .flex .about-text .tech-2 .tech-c {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-2 .tech-c .background {
            position: relative;
            top: -110px;
            left: -55px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-2 .tech-c .frontend {
            position: relative;
            top: -75px;
            left: -50px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-2 .tech-c img{
            position: absolute;
            top: 18px;
            left: -31px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }
    
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    /*----------------------------------------------------------------------   TECH 2 D STYLER  -----------------------------------------------------------------------------*/
    /*---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
    
        
        section.about .interface .flex .about-text .tech-2 .tech-d {
            position: relative; 
            width: 70px; 
            height: 70px; 
        }

        section.about .about-text .tech-2 .tech-d .background {
            position: relative;
            top: -110px;
            left: -125px;
            width: 100%;
            height: 100%;
            background: var(--primary-color-green-gradient);
            border-radius: 5px;
            z-index: 1;
        }
    
        section.about .about-text .tech-2 .tech-d .frontend {
            position: relative;
            top: -75px;
            left: -120px;
            width: 70px;
            height: 70px;
            background: var(--secundary-color-grey);
            border-radius: 5px;
            z-index: 2;
        }

        section.about .about-text .tech-2 .tech-d img{
            position: absolute;
            top: 18px;
            left: -102px;
            width: 50px;
            height: 50px;
            z-index: 3;
        }

}