/* tablet horizontal */

@media screen and (min-width: 768px) and (max-width: 960px){
    .memu-bar-header,.hide-on-mobile{
        display: none !important;
    }
    .container.grid-container {
        max-width: 100% !important;
    }
    .menu-item-759 {
        display: none !important;
    }
    .w-80-center{
        width: 90%;
        margin: auto;
    }
    .w-70-center{
        width: 80%;
        margin: auto;
    }
    article.hide-on-pc{}

    .font-12px {
        font-size: clamp(8px, 0.8vw, 12px);
    }

    .font-14px {
        font-size: clamp(8px, 0.8vw, 14px);
    }

    .font-16px {
        font-size: 16px;
    }

    .font-18px {
        font-size: clamp(14px, 1vw, 18px);
    }

    .font-20px {
        font-size: clamp(17px, 1.1vw, 20px);
    }

    .font-24px {
        font-size: clamp(18px, 1.2vw, 24px) !important;
    }

    .font-28px {
        font-size: clamp(19px, 1.35vw, 28px);
    }

    .font-32px {
        font-size: clamp(20px, 1.6vw, 32px);
    }

    .font-33px {
        font-size: clamp(26px, 1.5vw, 33px);
    }

    .font-36px {
        font-size: clamp(28px, 1.65vw, 36px);
    }

    .font-40px {
        font-size: clamp(30px, 1.9vw, 40px);
        line-height: 0.8;
    }

    .font-44px {
        font-size: clamp(24px, 2.3vw, 46px);
        line-height: 1.2;
    }

    .font-48px {
        font-size: clamp(27px, 1.9vw, 48px);
    }

    .font-54px {
        font-size: 31px;
        line-height: 1;
    }

    .font-64px {
        font-size: 64px;
        line-height: 1;
    }

    .font-72px {
        font-size: clamp(56px, 3.8vw, 72px);
    }

    .font-84px {
        font-size: clamp(65px, 4vw, 84px);
    }

    .font-96px {
        font-size: clamp(30px, 5vw, 35px);
    }

    .font-114px {
        font-size: clamp(47px, 6.5vw, 114px);
        line-height: 1;
    }

    .font-200px {
        font-size: 200px;
        line-height: 1;
    }

    .f-14px {
        font-size: clamp(8px, 0.8vw, 14px) !important;
    }

    /* !menu!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */
    .button-hamburger,
    .button-hamburger:hover {
        background: none;
        border: none;
        padding: 0;
    }

    .sidebar-page {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        transform: translateY(-100%);
        transition: all 0.7s;
        max-width: 100%;
        width: 100%;
        background:#3a3a3a54;
        z-index: 100;
        min-height: 100%;

        .inner_menu{
            padding: 0 0 10%;
            background: #FFFFFF;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            max-width: 100%;
            width: 100%;
            gap: 2rem;
            min-height: 100vh;


            .logo_nav img{
                width: 81px;
            }
        }
    }

    .show-sidebar {
        transform: translateX(0);
        transition: transform 1s;
    }

    .nav{
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-width: 100% !important;
        width: 100%;
        padding: 10px 5%;
        background-color: #fff;
        box-shadow: 0px 4px 4px rgb(0 0 0 / 25%);

        .mobile-logo{
            img{
                max-width: 19px;
            }
        }

    }
    .site-content{
        padding: 0 !important;
    }
    .container{
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .entry-content:not(:first-child), .entry-summary:not(:first-child), .page-content:not(:first-child){
        margin-top: 1em;
    }
    .mobile-icons.d-flex {
        gap: 1em;
        align-items: center;
    }
    .close-bt button img {
        width: 80%;
    }
    .close-bt {
    position: absolute;
    top: 0;
    right: 0;

        button {
            background: transparent;
        }
    }

    .main-menu.menu_main_position {
        width: 100%;

        ul#menu-menu-main-1 {
            margin: 0;
            padding-left: 0;
            list-style: none;


            &>li {
                /* border-bottom: 1px solid;
                border-image-source: linear-gradient(90deg, rgba(145, 145, 145, 0) 0%, #919191 50%, rgba(145, 145, 145, 0) 100%);
                border-image-slice: 1; */
                padding: 1rem 0;
                text-align: left;

                a {
                    color: var(--color-main);
                    font-weight: 400;
                    font-size: 20px;
                    transition: all 0.5s ease-in-out;
                    padding: 1rem 2rem;
                    position: relative;
                }
            }

            &>li.current-menu-item {

                &>a {
                    color: var(--color-main);
                    transition: all 0.5s ease-in-out;
                }
            }
        }
    }

    .main-menu .sub-menu {
        position: static;
        /* ✅ ยกเลิก absolute */
        padding-left: 20px;
        list-style: none;
        margin: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.5s ease-in-out;
        background: #f5f5f5;

        li {
            padding: 8px 0 8px 0%;
            text-align: left;

            

            a {
                color: #fff;
                font-weight: 700 !important;
                font-size: 20px !important;
                display: inline;

                &::after{
                    content: '' !important;
                }
            }
            
        }

        .sub-menu{
            max-height: 100% !important;
            padding-left: 0px;

            li{
                padding: 0px 0 0px 0%;

                a{
                    font-weight: 400 !important;
                    font-size: 12px !important;
                }
            }
        }
    }

    .main-menu .submenu-open>.sub-menu {
        max-height: 1000px;
    }

    .main-menu .menu-item-has-children a::after {
        content: url(./assets/icon/down.svg);
        width: 20px;
        /* float: right; */
        position: absolute;
        top: 50%;
        right: 0;
        transform: translate(-50%, -50%);
        padding-right: 10px;
    }

    .nav_items {
        margin: 2rem 0;
        padding: 0 1rem 0 10%;

        .nav_grid {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: 10px;

            img {
                filter: brightness(0.5);
            }
        }
    }

    .line_header{
        max-width: 140px;
    }

    .nav_footer {
        margin: 0 10%;
        border-top: 1px solid #fff;
        padding: 1rem 0 3rem;
    }

    /* !menu!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! */


        /* !!!!!!!!!!    home !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
    /* *start main_banner*/

    .main_banner{
        position: relative;
    }

    .main_banner_pagination {
        z-index: 10 !important;
        bottom: 10% !important;
    }

    /* *end banner_main*/

     /* *start sub_title*/

    section.sub_title{
        padding: 2.5rem;
        background: var(--color-main);

        .sub_title_div{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 1.5rem;
        }
        .sub_title_text{
            flex-grow: 1;
            
            h2{
                margin-bottom: 1.5rem;
            }
        }
    }

    /* *end sub_title*/

    /* *start service*/
    
    section.service{
        background: linear-gradient(180deg, #E0D8D4 -36.29%, #FFFFFF 93.32%);
        padding: 4rem 0;
    }
    .service_grid{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        justify-items: center;
        gap: 10px;
        margin: 2rem 0 3rem;

        .service_card{
            display: block;
            position: relative;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                max-width: 300px;
            }

            .service_card_text{
                position: absolute;
                right: 0;
                left: 0;
                bottom: 0.5rem;
                display: flex;
                justify-content: center;
            }
        }
    }
    .bt_link{
        padding: 0.6rem 1.2rem;
        border-radius: 20px;
        background: #D2C9C4;
        box-shadow: -3px -11px 2.4px -5px #8D8D8D0F inset;
        transition: all 0.5s ease-in-out;
    }
    .bt_link:hover{
        background: #B6A59D;
        transition: all 0.5s ease-in-out;
    }
    .award{
        padding: 4rem 0 2rem;
        position: relative;

        .award_section{
            margin: 3rem 0 ;
        }

        .swiper-review.swiper{
            margin: auto !important;

            img{
                aspect-ratio: 4/3;
                max-width: 320px;
                object-fit: cover;
            }
        }
    }

    .mini_banner{
        position: relative;

        .banner_link{
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            bottom: 0;
            padding: 0px 0 3px;
            display: flex;
            justify-content: center;
            gap: 0.3rem;
            align-items: flex-end;

            a.bt_banner{
                display: block;
                padding: 0rem 0.9rem;
                border-radius: 20px;
                background: #fff;
                transition: all 0.5s ease-in-out;

                    span{
                        color: #293C43;
                        transition: all 0.5s ease-in-out;
                        font-size: 6.9px !important;
                        line-height: 0.1 !important;
                    }

                &:hover{
                    background: #293C43;
                    transition: all 0.5s ease-in-out;

                    span{
                        color: #fff;
                        transition: all 0.5s ease-in-out;
                    }
                }
            }

            a.bt_banner.dark{
                background: #293C43;
                transition: all 0.5s ease-in-out;

                    span{
                        color: #fff;
                        transition: all 0.5s ease-in-out;
                    }

                &:hover{
                    background: #fff;
                    transition: all 0.5s ease-in-out;

                    span{
                        color: #293C43;
                        transition: all 0.5s ease-in-out;
                    }
                }
            }
        }
    }

    .social_link{
        padding: 2rem 0 0;

        .social_link_grid{
            display: grid;
            grid-template-columns: repeat(2,1fr);
            gap: 1rem;
            margin: 2rem 0;
            padding: 0 10%;

            a{
                display: block;
            }
        }
    }

    /* *end service*/

    /* *start google_review*/

    section.google_review{
        padding: 6rem 0;
        background: url(./assets/banner/google_bg.png) no-repeat center / cover;

        .w-80-center{
            position: relative;
        }

        .google_review_float{
            position: absolute;
            top: -6rem;
            left: 0;

            img{
                max-width: 80px;
            }
        }

        .google_review_swiper_card{
            position: relative;
            background: #B6A69E;
            border-radius: 10px;
            padding-top: 5px;
            box-shadow: 0px 4px 4px 0px #0000002E;

            .inner_card{
                border-radius: 5px;
                background: #fff;
                padding: 120px 2rem 2rem;
                position: relative;
                min-height: 450px;

                .g_icon{
                    position: absolute;
                    top: 40px;
                    left: 40px;
                }
                .inner_card_profile{
                    position: absolute;
                    top:   0%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                
                    img{
                        border-radius: 50%;
                        border: 5px solid white;
                        aspect-ratio: 1 / 1;
                        max-width: 150px;
                        object-fit: cover;
                        
                    }
                }
                center{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    gap: 1rem;
                }
            }
        }
    }
    .star_grid{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        gap: 5px;
        justify-content: center;
        align-items: center;
        width: 60%;
    }

    .swiper-google_review_swiper{
        padding-top: 7rem !important;
    }

    /* *end google_review*/

    /* *start customer_review*/

    section.customer_review{
        padding: 4rem 0;
        background: #F9F8F6;
        position: relative;
    }
    .customer_review_section{
        margin: 3rem 0;
        position: relative;
    }

    .customer-pagination{
        bottom: -30px !important;
        z-index: 100;
    }

    /* *end customer_review*/

    /* *start gallery*/
    
    .gallery_grid_area{
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat( 2, 1fr);
        grid-template-areas: 
            "img1 img1 img2 img3 "
            "img1 img1 img2 img4 ";
		max-height: 500px ;
    }
    .grid-item {
        width: 100%;
        object-fit: cover;
        object-position: center;
        height: 100% !important;
    }
    .grid-item:nth-child(1) { 
		grid-area: img1;
		max-height: 500px;
	}
    .grid-item:nth-child(2) { 
		grid-area: img2;
		max-height: 500px;
	}
    .grid-item:nth-child(3) { 
		grid-area: img3;
		max-height: 240px;
	}
    .grid-item:nth-child(4) { 
		grid-area: img4;
		max-height: 240px;
	}

    
    /* *end gallery*/

    /* *start tiktok*/

    section.tiktok{
        padding: 4rem 0;
        background: linear-gradient(360deg, #E0D8D4 0.02%, #FFFFFF 82.75%);
    }
    .tt{
        margin: 3rem 0;
    }

    /* *end tiktok*/

    /* *start social_banner*/

    section.social_banner{
        display: grid;
        grid-template-columns: 1fr;

        .social_banner_img img{
            width: 100%;
            object-fit: cover;
        }

        .social_banner_text{
            padding: 2rem 5%;
            background: #293c43;
            display: flex;
            flex-direction: column;
            gap: 2rem;
            text-align: center;
        }
    }
    .social_banner_grid{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        justify-content: center;
        justify-items: center;
        margin-top: 1.5rem;
        padding: 0 15%;

        .social_banner_link{
            display: flex;
            gap: 5px;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            background: linear-gradient(180deg, #EBEBEB 0%, #FFFFFF 40.28%, #FFFFFF 100%);
            box-shadow: 0px 2.38px 2.38px 0px #00000040;
            padding: 8px 8px;
            width: fit-content;

            img:nth-child(2){
                display: none;
            }
        }
    }

    /* *end social_banner*/
    
    /* !!!!!!!!!!    home !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

         /* !!!!!!!!!!    footer !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

    /* *start */
    .footer-main{
        background: #B3A69E;
        padding: 4rem 0;
    }
    .logo-footer{
        display: grid;
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .logo_t{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .logo-footer > div > img{
        max-width: 330px;
    }
    .nav_footer {
        width: 100%;
        
        ul{
            margin-bottom: 0;
            margin-left: 0;
            padding: 0;
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        a{
            font-weight: 400;
            color: #fff;
        }
    }
    .footer_info{
        display: flex;
        flex-direction: column;
        gap: 1rem;
        justify-content: space-between;
    }
    .social_nav{
        display: flex;
        gap: 12px;
    }
    .copy-right{
        padding: 1rem 0;
    }

    /* *end */

    /* !!!!!!!!!!    footer !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

    /* !about ----------------------------------------------------------------------------------*/
    
    /* *start about*/

    section.about{
        background: linear-gradient(180.95deg, #E0D8D4 -6.06%, #FFFFFF 92.61%);
    }
    .about_top{
        background: url(./assets/banner/about_banner_bg.png) no-repeat bottom / cover ;
        padding: 4rem 0;

        .about_top_grid{
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            justify-items: center;

            .about_top_d{
                display: flex;
                flex-direction: column;
                gap: 1.5rem;
            }
        }
    }
    .about_profile_grid{
        display: grid;
        grid-template-columns: 1fr;
        gap: 3rem;
        align-items: center;
        margin: 3rem 0;

        .about_detail{
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .about_bt{
                display: flex;
                justify-content: center;
            }
        }
    }

    .about_more_grid{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 2rem;
        margin: 2rem 0 4rem;
    }
    .about_more_grid_ul ul{
        padding-left: 0;
        margin: 0;

    }

    .about_team_grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1rem;
        margin: 2rem 0 4rem;
    }
    .about_team_card{
        border-radius: 10px;
        background: #565860;

        img{
            border-radius: 10px 10px 0 0;
            aspect-ratio: 3 / 3;
            object-fit: cover;
        }

        .about_team_card_bottom{
            padding: 1rem 1.2rem;
            border-radius: 0 0 10px 10px;
        }
    }

    .mini_banner img{
        width: 100%;
        object-fit: cover;
    }

    /* *end about*/

    /* *end about*/


    /* *start branch*/

    section.branch{
        background: linear-gradient(0deg, #E0D8D4 -40%, #FFFFFF 93.02%);
        padding: 2rem 0;
    }
    .about_department{
        margin: 2rem 0 2rem;
    }

    div.about_department_grid{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1rem;
        margin: 2rem 0 2rem;
        align-items: start;
        padding: 0 5%;
    }
    .about_department_card{
        display: flex;
        flex-direction: column;
        gap: 2rem;
        justify-content: center;
    }
    .about_branch_grid{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 1rem;
        margin: 3rem 0;
        

        .about_branch_card{
            background: #F7F7F7;
            border-radius: 10px;
            box-shadow: 0px 4px 23.7px 0px #00000040;

            img{
                width: 100%;
                border-radius: 10px 10px 0 0;
                aspect-ratio: 16 / 9;
                object-fit: cover;
            }

            .branch_detail{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                gap: 1rem;
                padding: 1rem 1rem;
                border-radius: 0 0 10px 10px;
            }


            .branch_detail_info{
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            .branch_detail_grid{
                display: grid;
                grid-template-columns: 10% 1fr; 
                gap: 10px;
            }
        }
    }

    /* *end branch*/

    /* !about----------------------------------------------------------------------------------*/

    /* !!!!!!!!!!    service !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

    /* *our-product-list */

    section.our-product-list{
        padding: 3rem 0;
    }
    .d-grid.grid-2{
        grid-template-columns: 1fr;
        gap: 2rem;
        align-items: center;
    }

    /* *our-product-list */

    /* *sub-banner-service */

    .d-grid.sub-banner-service{
        grid-template-columns: 1fr;
        background-image: url(./assets/pc/banner/sub-banner-service.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    div.sub-main-title-service {
        padding: 3rem 5% 3rem 5%;
        flex-direction: column;
        gap: 1rem;
        justify-content: space-between;
        height: 100%;
    }
    p.main-text-1 {
        font-size: 20px;
    }
    p.main-text-2 {
        font-size: 30px;
        line-height: 20px;
    }
    p.main-text-3 {
        font-size: 39px;
        margin-top: 2rem;
    }
    

    /* *sub-banner-service */

    /* !!!!!!!!!!    service !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

    /* !category ----------------------------------------------------------------------------------*/

    /* *start category_grid*/

    .cat_tem{
        background: #F9F8F6;
        padding: 2rem 0;
    }

    section.category_post{
        padding: 2rem 0;
    }
    .category_post_grid{
        display: grid;
        grid-template-columns: repeat(1,1fr);
        gap: 1.5rem;

        a{
            display: block;
        }
    }

    /* *end category_grid*/

    /* *start slide_cat*/

    section.slide_cat{
        padding: 2rem 0;
        position: relative;

        .swiper-review{
            margin: 2rem 0;
        }
    }

    /* *end slide_cat*/


    
    /* !END-category ----------------------------------------------------------------------------------*/

    /* !review ----------------------------------------------------------------------------------*/

    /* *start review_title*/
    section.review_title{
        padding: 4rem 0;
        background: #F9F8F6;

        .review_title_header{
            display: flex;
            flex-direction: column;
            gap: 1rem;
            justify-content: center;
        }
        .review_title_main{
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 10px;
            align-items: center;

            .line{
                border-bottom: 1px solid #B5A59D;
                position: relative;
            }
        }
    }

    .tags_review{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        justify-content: center;
        margin: 2rem 0 2rem;
        position: relative;
    }
    .tags_review_bt{
        padding: 0.3rem 1.5rem;
        border-radius: 20px;
        background: #FFFFFF;
        transition: all 0.5s ease-in-out;
        cursor: pointer;

        p{
            color: var(--color-text-dark);
            transition: all 0.5s ease-in-out;
        }
    }
    .tags_review_bt.active{
        background: var(--color-text-dark);
        transition: all 0.5s ease-in-out;

        p{
            color: #FFFFFF;
            transition: all 0.5s ease-in-out;
        }
    }

    .review_grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1rem;
        margin: 2rem 0 2rem;
        padding: 0 10%;
    }

    .loading {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        height: 50px;
        display: flex;
        align-items: center;
    }

    .obj {
        width: 6px;
        height: 0px;
        background: var(--color-main);
        margin: 0 3px;
        border-radius: 10px;
        animation: loading 1.2s infinite;
    }

    .obj:nth-child(2){
        animation-delay: 0.15s;
    }
    .obj:nth-child(3){
        animation-delay: 0.3s;
    }
    .obj:nth-child(4){
        animation-delay: 0.45s;
    }
    .obj:nth-child(5){
        animation-delay: 0.6s;
    }
    .obj:nth-child(6){
        animation-delay: 0.75s;
    }
    .obj:nth-child(7){
        animation-delay: 0.9s;
    }
    .obj:nth-child(8){
        animation-delay: 1.05s;
    }

    @keyframes loading {
        0% {
            height: 0;
        }
        50% {
            height: 50px;
        }
        100% {
            height: 0;
        }
    }

    /* *end review_title*/

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    
    /* !END-review ----------------------------------------------------------------------------------*/

    /* !article ----------------------------------------------------------------------------------*/

    /* *start article_blog*/
    section.article_blog{
        padding: 2rem 0;
        background: #F9F8F6;
    }
    .article_blog_grid{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 1.5rem;
        margin: 2rem 0 2rem;
    }
    .article_blog_card{
        border-radius: 10px;
        box-shadow: 0px -3px 17.1px 0px #0000001F;

        > a{
            display: block;
        }

        img{
            aspect-ratio: 1 / 1;
            object-fit: cover;
            width: 100%;
            border-radius: 10px 10px 0 0;
        }

        .article_blog_card_detail{
            padding: 2rem 1.5rem;
            display: flex;
            gap: 1.5rem;
            flex-direction: column;
            justify-content: space-between;
            border-radius: 10px 10px 0 0;

            .info{
                display: flex;
                flex-direction: column;
                gap: 1rem;

                p:nth-child(2){
                    text-align: left;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 2; /* number of lines to show */
                            line-clamp: 2; 
                    -webkit-box-orient: vertical;
                }  

                p:nth-child(3){
                    text-align: left;
                    overflow: hidden;
                    display: -webkit-box;
                    -webkit-line-clamp: 4; /* number of lines to show */
                            line-clamp: 4; 
                    -webkit-box-orient: vertical;
                }  
            }
        }
    }

    /* *end article_blog*/


    /* !END-article ----------------------------------------------------------------------------------*/

    /* !contact ----------------------------------------------------------------------------------*/

    /* *start contact*/
    section.contact{
        padding: 4rem 0;
    }
    .contact_form_info{
        background: #121213;
        padding: 2rem 2rem;
        display: flex;
        flex-direction: column;
        justify-self: flex-start;
        justify-content: space-between;
        gap: 2rem;

        > img{
            max-width: 311px;
            margin-bottom: 2rem;
        }
        
        div.contact_form_grid{
            display: grid;
            grid-template-columns: 30px 1fr;
            gap: 12px;
            margin-bottom: 6px;
        }
    }

    .contact-form.d-grid {
        box-shadow: 6px 12px 37.2px 0px #00000024;
        margin: 2rem 0;
        display: flex !important;
        flex-direction: column-reverse;
    }
    .contact-detail.d-flex{
        flex-direction: column;
        gap: 1rem;
        border-radius: 10px;
        
    }
    .contact_form_info{
        background: #2D393F;
        border-radius: 0px 0px 10px 10px;

        img{
            max-width: 200px;
        }
    }

    .contact-form-detail{
        background: #FFFFFF;
        padding: 2rem 2rem;
        border-radius: 10px 10px 0 0 !important;
    }
    h4.contact-text{
        font-size: 2.2rem;
    }
    .d-flex.icons-contact {
        gap: 1rem;
        align-items: flex-start;
    }

    .contact_title{
        padding: 0 0 5rem;

        .contact_text{
            margin-top: 1.5rem;
        }
    }


    /* ?form */

        div.wpforms-container-full .wpforms-form textarea.wpforms-field-large {
            height: 100px !important;
        }
        label.wpforms-field-label {
            font-size: 1.1rem !important;
            font-weight: 400 !important;
            color: #393939 !important;
            display: flex !important;
            justify-content: space-between;
        }
        div.wpforms-container-full .wpforms-form .wpforms-one-half{
            width: 100% !important;
            margin-left: 0 !important;
        }
        input#wpforms-553-field_0, 
        input#wpforms-553-field_3, 
        input#wpforms-553-field_1, 
        textarea#wpforms-553-field_2,
        input#wpforms-553-field_5 {
            background-color: #fff;
            border: 1px solid transparent;
            border-bottom: 1px solid #C8C8C8;
            
            &::placeholder{
                font-weight: 200 !important;
            }
        }
        button.form-bt {
            background: var(--color-main) !important;
            color: #fff !important;
            padding: 1rem 3rem !important;
            font-weight: 300;
            border-radius: 35px !important;
        }
        .wpforms-submit-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

    /* ?form */


    /* *end contact*/

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    /* *start */


    /* *end */

    
    /* !END-contact ----------------------------------------------------------------------------------*/

    /* !single-post ----------------------------------------------------------------------------------*/
    
    .post_title{
        padding: 4rem 0;
        background: #F9F8F6 !important;
    }
    .single-post,.single_post,.content-area{
        background: #F9F8F6 !important;
    }
    .service_grid.single_post{
        grid-template-columns: repeat(2,1fr);
        padding: 0 10%;
    }
    

    /* !single-post ----------------------------------------------------------------------------------*/


    /* !single-our-work----------------------------------------------------------------------------------*/

    .bg_service{
        background: #F9F8F6 !important;
        padding: 2rem 0;
    }
    .service_title,.post_thumbnail{
        padding: 0 0 2rem;
    }

    .customer_review.single_service{
        padding: 2rem 0 0;
        background: #ffffff
    }
    .service.single_service{
        padding: 0 0 2rem;
        background: #ffffff;
    }



    /* !END-single-our-work ----------------------------------------------------------------------------------*/

    /* !Error_page ------------------------------------------------------------------------------------*/

    .error_page{
        padding: 2rem 0;
        display: flex;
        justify-content: center;
    }



    /* !End--Error_page ------------------------------------------------------------------------------------*/
}