/* LARGE SCREEN SIZE - TABLETS  */


@media (max-width: 1160px) {

    main header .menu_block {
        display: block;
    }

    main header nav {
        display: none;
    }
    
    main .pricing .content_container .content_image img,
    main .about .content_container .content_image img {
        width: 90%;
    }

    main .team .content_container .content_card .flex_card .card_info ,
    main .team .content_container .content_card .flex_card:hover .card_info {
       width: 240px;
    }

    main .team .content_container .content_card .flex_card .card_info span {
        font-size: var(--fs100);
    }
    main .team .content_container .content_card .flex_card .card_info h4 {
       font-size: var(--fs100);
    }

}



/* MID SCREEN SIZE - TABLETS  */



@media (max-width: 900px) {

    main .services .content_container .content_card .row .flex_card {
        flex: 1 1 40%;
    } 

    main .team .content_container .content_card .flex_card .card_info ,
    main .team .content_container .content_card .flex_card:hover .card_info {
       width: 190px;
    }
    
    main .team .content_container .content_card .flex_card .card_info span {
        font-size: var(--fs10);
    }
    main .team .content_container .content_card .flex_card .card_info h4 {
       letter-spacing: 0.05rem;
       font-size: var(--fs10);
    }

    main .pricing .content_container .content_image {
        flex: 1 1 30%;
    }

    main .pricing .content_container .content_text {
        flex: 1 1 40%;
    }



}



/* SMALL SCREEN SIZE - TABLETS  */



@media (max-width: 750px) {

    main .team .content_container .content_card .flex_card {
        flex: 1 1 40%;
    }

    main .team .content_container .content_card .flex_card:last-child {
        display: none;
    }

    main .team .content_container .content_card .flex_card .card_info ,
    main .team .content_container .content_card .flex_card:hover .card_info {
       width: 260px;
    }

    main .pricing .content_container .content_image img {
        display: none;
    }

    main .pricing .content_container .content_text {
        flex: 1 1 100%;
    }

    main .reviews .content_container .content_wrapper .flex_card {
        flex: 1 1 100%;
        max-width: 750px;
    }


    footer .content_container .footer_cols .col {
        flex: 100%;
        max-width: 750px;
    }

}



/* LARGE SCREEN SIZE - PHONES */



@media (max-width: 600px) {
    main header .mobile_nav {
        width: 100%;
    }

    main section .content_container .section_heading h1 {
        font-size: var(--fs350);
    }

    main .hero {
        background-image: linear-gradient(#00000090, #00000090 ), url(../images/hero/hero-mobile.webp);
    }

    main .hero .content_container .content_wrapper .content_heading h1 {
        font-size: var(--fs400);
        text-align: center;
    }

    main .hero .content_container .content_wrapper .content_heading h1 span {
        display: block;
    }

    main .hero .content_container .content_wrapper .content_text p {
        font-size: var(--fs50);
    }

    main .about .content_container .content_image,
    main .about .content_container .content_text {
        flex: 100%;
    }

    main .about .content_container .content_image img {
        /* max-width: 350px; */
        display: none;
    }


    main .services .content_container .content_card .row .flex_card {
        flex-basis: 100%;
    }

    main .team .content_container .content_card .flex_card {
        flex: 100%;
        margin-bottom: 3rem;
    }

    main .team .content_container .content_card .flex_card .card_info,
    main .team .content_container .content_card .flex_card:hover .card_info {
        width: 320px;
        transition: .5s ease-in-out;
    }

    main .team .content_container .content_card .flex_card .card_info h4 {
        font-size: var(--fs200);
    }
    

    main .pricing .content_container {
        flex: 100%;
    }

    main .pricing .content_container .content_image,
    main .pricing .content_container .content_text {
        flex: 100%;
    }

    main .pricing .content_container .content_image img {
        /* max-width: 400px; */
        display: none;
    }

    main .gallery .content_container .content_image .grid_gallery .row .box {
        width: 350px;
    }

    main .gallery .content_container .content_image .grid_gallery .one .img_one,
    main .gallery .content_container .content_image .grid_gallery .one .img_two,
    main .gallery .content_container .content_image .grid_gallery .two .img_one,
    main .gallery .content_container .content_image .grid_gallery .two .img_two {
        flex: 100%;
    }

    main .reviews .content_container .content_wrapper .flex_card {
        flex: 100%;
    }

}



/* MID SCREEN SIZE - PHONES  */




@media (max-width: 400px) {

    /* Font Sizing */

    main section .content_container .section_heading h1,
    main .hero .content_container .content_wrapper .content_heading h1 {
        font-size: var(--fs400);
    }

    main .hero .content_container .content_wrapper .content_text p,
    main .about .content_container .content_text .section_text p,
    main .pricing .content_container .content_text .section_accordion ul li .content ul li span 
    {
       font-size: var(--fs50);
    }

    main .hero .content_container .cta_btn a {
        font-size: var(--fs200);
    }

    main .pricing .content_container .content_text .section_accordion ul li label {
        font-size: var(--fs100);
    }

    main .gallery .content_container .content_image .grid_gallery .row .box {
        width: 300px;
    }

    main .team .content_container .content_card .flex_card .card_info,
    main .team .content_container .content_card .flex_card:hover .card_info {
        width: 290px;
    }

    main .team .content_container .content_card .flex_card .card_info span {
        font-size: var(--fs50);
    }

    main .team .content_container .content_card .flex_card .card_info h4 {
        font-size: var(--fs150);
    }

}



/* SMALL SCREEN SIZE - PHONES  */



@media (max-width: 350px) {
    
    main .team .content_container .content_card .flex_card .card_info,
    main .team .content_container .content_card .flex_card:hover .card_info {
        width: 230px;
    }

    main .team .content_container .content_card .flex_card .card_info h4 {
        font-size: var(--fs50);
    }

    main .gallery .content_container .content_image .grid_gallery .row .box {
        width: 250px;
    }
}