/*RESPONSIVE DESIGN*/
/*large phones*/
@media(max-width:414px){
    *{
        box-sizing: border-box;
        margin-left: 0px;
        margin-right: 0px;
    }
    body{
        overflow-x:hidden;
        margin-left: 0;
        margin-right: 0;
    }
    .nav-bar{
        display:flex;
        flex-direction: column;
        line-height: 1px;
        font-size: 10px;
    }
    #brand{
        display:flex;
        gap:20px;
        position:relative;
        right:5px;
    }
    #brand-name{
        position:relative;
        top:5px;
    }
    #brand-name h2{
        position:relative;
        right: 15px;
    }
    #nav-button{
        position:relative;
        left:230px;
        bottom:50px;
        font-size:9px;
    }
    #nav-links{
        position:relative;
        justify-content: center;
    }
    #grow-business{
        position:relative;
        font-size: 11px;
        top:20px;
        right:70px;
    }
    #p{
        position:relative;
        top: 25px;
        right: 70px;
        width:200%;
    }
    /*hero-section*/
    #hero-section{
        display:flex;
        flex-wrap: wrap;
    }
    .photo #profilephoto{
        position:relative;
        height:200px;
        width:250px;
        left:15px;
    }
    .photo #happyclients{
        position:absolute;
        height:49px;
        width:100px;
        opacity:100%;
        right:10px;
        top:250px;
    }
    .photo #overall{
        position:absolute;
        left:10px;
        height:49px;
        width:100px;
    }
    .hero-content h1{
        width:400px;
        padding-right: 69px;
        line-height: 1.3;
    }
    #hero{
        line-height: 1.2;
        position:relative;
        right:70px;
        width:300%;
    }
    #hero-contentp{
        position:relative;
        left:2px;
    }
    #Get-Started{
        position:relative;
        right:70px;
        padding:10px 40px;
        display:flex;
    }
    #Explore-Services{
        position:relative;
        right:70px;
        padding:10px 40px;
    }
    .hero-footerimg{
        display:flex;
        position:relative;
        top:50px;
        right:60px;
    }
    .hero-footerp{
        width:100px;
    }
    /*trusted section*/
    .trusted-company{
        font-size: 10px;
        flex-wrap: wrap;
        gap: 20px;
        padding-right:90px;
    }
    /*services section*/
    .our-services{
        display:grid;
        grid-template-columns: repeat(1,1fr);
    }
    /*experience section*/
    .experience{
        display:flex;
        flex-direction: column;
        gap:0px;
        width: 90%;
        position:relative;
        right:15px;
    }
    /*pricing section*/
    .pricing-plans{
        display:grid;
        grid-template-columns: repeat(1,1fr);
    }
    .basic-plan,.premium-plan{
        position:relative;
        bottom:10px;
    }
    /*contact section*/
    .contact-user{                             
        display:grid;
        grid-template-columns: repeat(1,1fr);
    }
    .contact-information{
        padding:5px 10px;
        width:300px;
    }
    .userInput-information{
        width:300px;
        position:relative;
    }
    .inputs{
        padding:5px 15px;
        gap:10px;
        display:grid;
        gap:0px;
    }
    .user-name input{
        position:relative;
        padding:5px 1px;
    }
    .user-email input{
        position:relative;
        padding:5px 1px;
        margin-right: 30px;
    }
    .textarea textarea{
        width:225px;
        height:50px;
    }
    .textarea button{
        position:relative;
        padding:px;
        margin-bottom: 20px;
    }
    /*footer section*/
    .footer-section{
        display:flex;
        flex-wrap:wrap;
        padding-bottom: 70px ;
    }
    .footer-right p{
        width:300px;
    }
}
@media(max-width:360px){
    /*nav-bar section*/
    #nav-button{
        position:relative;
        left: 207px;
        font-size:8px;
    }
    /*hero section*/
    #Get-Started{
        position:relative;
        right:85px;
        padding:8px 38px;
    }
    #Explore-Services{
        position:relative;
        right:92px;
        padding:8px 38px;
    }
    .hero-content h1{
        font-size: 20px;
        display: inline;
        position: relative;
        right:90px
    }
    #foryou{
        position:relative;
        right:60px;
    }
    #business{
        position:relative;
        right:55px;
    }
    #grow-business{
        position:relative;
        right:90px;
        top:15px;
    }
    #p{
        position:relative;
        right:85px;
    }
}