/* --Tablets and ipads-portrqit */

@media screen and (max-width: 768px){
        [aria-controls="navbarDropdown"]{
            display: block;
    
        }
    
        [aria-expanded="false"] ~ ul{
            display: none;
        }
    
        [aria-expanded="true"] ~ ul{
            display: block;
            position: absolute;
            right: 0;
            top: var(--size-50);
            background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7));
            width: 100%;
            text-align: right;
            box-shadow: 0px 0px 20px rgba(52, 49, 75, 0.1);
        }
    
        [aria-expanded="true"] ~ ul li a{
            color: var(--font-color-dark);
            margin-right: var(--size-20);
        }

        /*
        BRAND BUBBLES
        */
        .google_icon_wrapper{   
            width: var(--size-50);
            right: 80%;
            top: 60%;
        }
    
        .atl_icon_wrapper{
            right: 50%;
            top: 65%;
        }
        
        .asana_icon_wrapper{
            right: 20%;
            top: 60%;
        }
        
        .paypal_icon_wrapper{
            right: 80%;
            top: 75%;
            padding: 15px;
        }
        
        
        .weave_icon_wrapper{
            right: 25%;
            top: 75%;
        }
        
        .google-a_icon_wrapper{
            width: var(--size-50);
            right: 50%;
            top: 80%;
        }
        
        .calendar_icon_wrapper{
            right: 10%;
            top: 85%;
        }

        section.benefit{
            margin-top: 300px;
        }

        /*
        */

        .content_container{
            text-align: center;
            margin: 0;
            width: 100%;
        }

        .content_links{
            justify-content: center;
        }

        section.why-me{
            text-align: center;
        }


        .testimonials,
        .perspectives{
            flex-direction: column;
        }

        .profile{
            width: 400px;
            margin: auto;
        }

        .review{
            margin-top: 550px;
            text-align: center;
            display: flex;
            margin-left: 0;
        }
        
        .review,
        .features,
        .hire .page{
            flex-direction: column;
            align-items: center;
        }

        .section_title{
            text-align: center;
        }



        .banner_wrapper{
            max-width: 100%;
        }

        .price_card{
            max-width: 100%;
            text-align: center;
        }
 
        .feature_grid,
        .page .hire_us,
        form{
            max-width:initial
        }

        .hire_us{
            max-width: 100%;
            flex-direction: row;
        }

        .hire_right{
            max-width: 50%;
            margin-left: auto;
        }

        .hire_left{
            max-width: 50%;
        }

        .hire_left h2{
            text-align: left;
        }

        .footer_top{
            align-items: flex-start;
        }
        
       

}

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


    /*
    */
    .line_graphic hr.line{
        display: none;
    }

    .line_graphic{
        flex-direction: column;
        margin: 0 auto;
    }

    .line_graphic_container{
        flex-direction: row;
    }

    .line_graphic_container span.bullet{
        margin-right: var(--size-20);
    }

    .headings_container{
        flex-direction: column;
        left: 0;
        margin-left: 50px;
    }

    .profile{
        width: 300px;
    }

    .review{
        margin-top: 400px;
    }

    .hire_us{
        flex-direction: column;
        align-items: center;
    }
    
    .hire_left,
    .hire_right{
        max-width: 100%;
        text-align: center;
        margin: initial;
    }

    .hire_us h2{
        text-align: center;
    }
    
    .hire_us hr{
        width: 100%;
    }

    .footer_top{
        align-items: center;
        flex-direction: column;
    }

    .footer_grid{
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        margin-bottom: 20px;
    }

    .footer_col{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer_bottom-upper{
        flex-direction: column;
        align-items: center;
    }
}