/* standard screen size laptop */


@media (max-width: 1024px) {

    main .hero .content_container .text .top {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }

    main .hero .content_container .text .top::before {
        font: var(--fw-regular) var(--fs400) var(--font-logo);
    }

    main .hero .content_container .text h1 .old_price {
        font-size: var(--fs600);
    }

    main .hero .content_container .text .bottom {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }

    main .hero .content_container .text .bottom svg {
        width: 350px;
        top: 0%;
        left: 25%;
    }
    
    main .hero .content_container .hero_image img {
        max-width: 800px;
        margin-top: 2rem;
    }

    main .hero .content_container .hero_overflow p {
        font: var(--fw-strong) var(--fs150) var(--font-body);      
    }

    main .about .content_container .text_container .heading {
        flex: 1 1 20%;
    }

    main .about .content_container .text_container .text {
        flex: 1 1 70%;
    }


    main .services .content_container .text_box .row {
        margin-bottom: 2rem;
    }

    main .services .content_container .text_box .row .box {
        flex: 45%;
    }

    main .services .content_container .text_box .row .box_image {
        display: none;
    }

    .pricing .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }

    .pricing .content_container .heading_container .head_text p #break {
        display: none;
    }

    .portfolio .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs850) var(--font-heading);
    }

    .portfolio .content_container .portfolio_container .box .text,
    .portfolio .content_container .portfolio_container .box .box_image {
        flex: 100%;
    }

    .portfolio .content_container .portfolio_container .box .box_image img {
        border-radius: 1rem 1rem 0 0;
    }

    .portfolio .content_container .portfolio_container .box .text {
        border-radius: 0 0 1rem 1rem;
    }


    .cta .content_container .text_container .head h1 {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }
}




/* large screen size tablet */


@media (max-width: 805px) {

    main .hero .content_container {
        /* padding-top: 5rem; */
    }

    main .hero .content_container .text .top {
        font: var(--fw-bold) var(--fs750) var(--font-heading);
    }

    main .hero .content_container .text .top::before {
        font: var(--fw-regular) var(--fs300) var(--font-logo);
    }

    main .hero .content_container .text h1 .old_price {
        font-size: var(--fs500);
    }

    main .hero .content_container .text .bottom {
        font: var(--fw-bold) var(--fs750) var(--font-heading);
    }

    main .hero .content_container .text .bottom svg {
        width: 280px;
    }

    main .hero .content_container .hero_image img {
        margin-top: 3.5rem;
    }

    main .hero .content_container .hero_overflow p {
        bottom: -5%;
    }

    


    main .about .content_container .text_container .heading,
    main .about .content_container .text_container .text {
        flex: 1 1 100%;
    }

    main .about .content_container .text_container .text p {
        font: var(--fw-bold) var(--fs350) var(--font-body);
    }

    main .about .content_container .text_container .business_catgeory ul li {
        font: var(--fw-regular) var(--fs100) var(--font-body);
    }




    main .services .content_container .heading {
        text-align: center;
    }

    main .services .content_container .heading .head {
        flex: 1 1 100%;
    }

    main .services .content_container .heading .text {
        flex: 1 1 100%;
    }

    main .services .content_container .heading .head h1 {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }

    main .services .content_container .heading .text p {
        font: var(--fw-strong) var(--fs150) var(--font-body);
        margin-bottom: 2rem;
    }

    main .services .content_container .text_box .row .box_heading h3 {
        font: var(--fw-bold) var(--fs250) var(--font-body);
    }




    .process .content_container .heading_container {
        text-align: center;
    }

    .process .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }

    .process .content_container .heading_container .head_text p {
        font: var(--fw-bold) var(--fs150) var(--font-body);
    }

    .process .content_container .text_container .box {
        flex: 100%;
    }

    .pricing .content_container .text_container .row .box {
        flex: 100%;
    }

    .portfolio .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }

    .cta .content_container .text_container .head h1 {
        font: var(--fw-bold) var(--fs750) var(--font-heading);
    }
}




/* standard screen size tablet */


@media (max-width: 645px) {

    main .hero .content_container {
        /* padding-top: 8.5rem; */
    }

    main .hero .content_container .text .top {
        font: var(--fw-bold) var(--fs650) var(--font-heading);
    }

    main .hero .content_container .text .top::before {
        font: var(--fw-regular) var(--fs250) var(--font-logo);
    }

    main .hero .content_container .text h1 .old_price {
        font-size: var(--fs400);
    }

    main .hero .content_container .text .bottom {
        font: var(--fw-bold) var(--fs600) var(--font-heading);
    }

    main .hero .content_container .text .bottom svg {
        width: 220px;
    }

    .pricing .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs700) var(--font-heading);
    }

    .portfolio .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs750) var(--font-heading);
    }

    .cta .content_container .text_container .head h1 {
        font: var(--fw-bold) var(--fs600) var(--font-heading);
    }
}



/* large screen size mobile */


@media (max-width: 520px) {
    
    main section .content_container {
        margin: 10% 0;
    }
    
    main .hero .content_container .text .top {
        font: var(--fw-bold) var(--fs750) var(--font-heading);
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    main .hero .content_container .text .top::before {
        font: var(--fw-regular) var(--fs300) var(--font-logo);
    }
    
    main .hero .content_container .text h1 .old_price {
        font-size: var(--fs400);
    }

    main .hero .content_container .text .top .new_price {
        width: 100%;
        margin-top: -1rem;
    }

    main .hero .content_container .text .bottom {
        font: var(--fw-bold) var(--fs550) var(--font-heading);
    }

    main .hero .content_container .text .top svg {
        display: none;
    }

    main .hero .content_container .text .bottom svg {
        width: 0;
    }

    main .hero .content_container .text .bottom .break {
        display: none;
    }





    main .about .content_container .text_container .text p {
        font: var(--fw-bold) var(--fs250) var(--font-body);
    }



    main .services .content_container .text_box .row .box {
        flex: 100%;
    }

    main .services .content_container .text_box .row .box {
        flex: 100%;
    }




    .process .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs700) var(--font-heading);
    }

    .pricing .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs600) var(--font-heading);
    }

    .pricing .content_container .heading_container .head_text p {
        font: var(--fw-bold) var(--fs150) var(--font-body);
    }

    .portfolio .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs600) var(--font-heading);
    }

    .cta .content_container .text_container {
        padding: 3rem;
    }

    .cta .content_container .text_container .head h1 {
        font: var(--fw-bold) var(--fs650) var(--font-heading);
    }

}


/* standard screen size mobile */


@media (max-width: 400px) {
    

    main .hero .content_container .text .top {
        font: var(--fw-bold) var(--fs800) var(--font-heading);
    }


    main .hero .content_container .text .top::before {
        font: var(--fw-regular) var(--fs250) var(--font-logo);
    }

    main .hero .content_container .text h1 .old_price {
        font-size: var(--fs350);
    }

    main .hero .content_container .text .bottom {
        font: var(--fw-bold) var(--fs500) var(--font-heading);
    }


    .process .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs600) var(--font-heading);
    }

    .pricing .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs500) var(--font-heading);
    }

    .portfolio .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs450) var(--font-heading);
    }

    .cta .content_container .text_container .head h1 {
        /* font: var(--fw-bold) var(--fs400) var(--font-heading); */
    }

}



/* small screen size mobile */

@media (max-width: 320px) {



    main .hero .content_container .text .top {
        font: var(--fw-bold) var(--fs750) var(--font-heading);
    }

    main .hero .content_container .text .top::before {
        font: var(--fw-regular) var(--fs200) var(--font-logo);
    }

    main .hero .content_container .text h1 .old_price {
        font-size: var(--fs300);
    }

    main .hero .content_container .text .bottom {
        font: var(--fw-bold) var(--fs400) var(--font-heading);
    }

    

    main .about .content_container .text_container .text p {
        font: var(--fw-bold) var(--fs150) var(--font-body);
    }



    main .services .content_container .heading .head h1 {
        font: var(--fw-bold) var(--fs700) var(--font-heading);
    }

    main .services .content_container .text_box .row .box_heading h3 {
        font: var(--fw-bold) var(--fs200) var(--font-body);
    }

    main .services .content_container .text_box .row .box_text p {
        font: var(--fw-strong) var(--fs100) var(--font-body);
    }


    .process .content_container .heading_container .head h1 {
        font: var(--fw-bold) var(--fs500) var(--font-heading);
    }



    .cta .content_container .text_container .head h1 {
        font: var(--fw-bold) var(--fs500) var(--font-heading);
    }

}