/*detail info*/


.desc-title{
    display: block;
}

.mobile-title{
    display: none;
}


.col-form-left{
    display: flex
;
    flex-direction: column;
    /* align-items: end; */
    justify-content: space-between;
}
.empty-warning{
    font-size: 13px;
    color: #ffffff;
    background: #fd095c;
    max-width: fit-content;
    border-radius: 20px;
    padding: 0.2rem 1rem;
}

.comment-rectangle{
    background: #8BC34A;
    border-radius: 20px;
    padding: 5px 14px;
    color: #fff;
    width: max-content;
}
.col-detail-content{
    position: relative;
}


.banner-shape{
    position: absolute;
    bottom: -5%;
    right: -16%;
    z-index: -1;
    transform: translate(-66%, -73%);
    transition: 1.5s;
    opacity: 0;
}

.banner-shape.loaded{
    transform: translate(0);
    transition: 1.5s;
    opacity: 1;
}


.banner-extra1{
    position: inherit;
    bottom: 11%;
    right: 45%;
    transform: translate(-91%, -81%);
    transition: 1s;
    opacity: 0;
}

.banner-extra1.loaded{
    transform: translate(0);
    transition: 1s;
    opacity: 1;
}

.banner-extra2{
    position: inherit;
    bottom: 40%;
    left: 61%;
    transform: translate(45%, 45%);
    transition: 1.4s;
    opacity: 0;
}

.banner-extra2.loaded{
    transform: translate(0);
    transition: 1.4s;
    opacity: 1;
}


.banner-extra3{
    position: inherit;
    top: -30%;
    left: -0%;
    transform: translate(45%, 45%);
    transition: 1.4s;
    opacity: 0;
}

.banner-extra3.loaded{
    transform: translate(0);
    transition: 1.4s;
    opacity: 1;
}




.detail-info{
    padding-block: 80px;
}

.detail-info .container-fluid{
    padding-inline: 100px;
}

.detail-info{
    /*padding-left: 110px;*/
}


.detail-title{
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.detail-title::before {
    position: absolute;
    content: '';
    width: 70px;
    height: 2px;
    background-color: var(--title-color);
    bottom: 10px;
}

.detail-title h1{
    font-size: 30px;
    font-weight: 500;
    font-family: 'kalame_bold';
    color: var(--title-color);
}

.detail-extra{
    padding-block: 15px;
    border-top: 1px solid #9F9F9F;
    border-bottom: 1px solid #9F9F9F;
    margin-bottom: 30px;
}

.detail-like{
    display: flex;
    align-items: center;
    gap: 5px;
}

.detail-text h4{
    font-size: 20px;
    font-weight: 600;
    color: var(--title-color);
}

.detail-text p{
    text-align: justify;
}

.detail-text *{
    font-size: 15px !important;
    line-height: 30px !important;
    text-align: justify !important;
    font-family: 'kalame_light' !important;
}

.detail-row{
    /*align-items: center;*/
}
.gallery-detail{

    padding-block: 80px;
}
/*gallery*/


.mainswiper .swiper-slide {
    width: 100%;
    height: 600px;
}


.mainswiper .main-gallery-slide {
    width: 100%;
    height: 100%;
    /* border: 1px solid #d9d9d9; */
    padding: 6px;
}

.mainswiper .main-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.thumbswiper .swiper-slide {
    cursor: pointer;
    filter: grayscale(1);
    opacity: 0.8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbswiper .swiper-slide.swiper-slide-thumb-active {
    cursor: pointer;
    filter: grayscale(0);
    opacity: 1;
}

.thumbswiper .swiper-slide .thumb-gallery-slide {
    width: 90px;
    height: 90px;
    object-fit: contain;
    /* border: 1px solid #d9d9d9; */
}

.thumbswiper .swiper-slide .thumb-gallery-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.mainswiper .swiper-slide {
    width: 100%;
    height: 632px;
}


/*gallery*/


/*detail info*/





/*detail form*/

.form-contact-us {
    box-shadow: 0 0 20px 0px #e5e5e5;
    width: 100%;
    margin-block: 40px;
    top: unset;
}

.form-row{
    margin: 0;
    width: 100%;
}

/*detail form*/




/*comment*/

.whole-comments{
    display: flex;
    flex-direction: column;
    padding-top: 40px;
}

.each-comment{
    display: flex;
    flex-direction: column;
    padding-block: 20px;
    border-bottom: 2px solid #F0DBC4;
    margin-bottom: 40px;
}

.each-comment:last-child{
    border-bottom: unset;
}

.comment-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #C1C1C1;
}

.comment-writer span{
    font-size: 14px;
    color: var(--text-color);
}

.comment-date span{
    font-size: 15px;
    color: var(--text-color);
}

.comment-body{
    padding-block: 10px;
}


.comment-body p{
    font-size: 15px;
}

.form-detail{
    position: relative;
}




/*comment*/




/*our projects*/

.our-projects{
    padding-block: 90px;
}

.our-projects .title-row{
    margin-bottom: 40px;
}

.our-projects .container-fluid-title{

    padding-inline: 100px;
}

.all-projects{
    width: 100%;
}

.each-project{
    width: 100%;
    height: 400px;
}

.each-project img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 40px;
}

.projects-row{
    margin-bottom: 20px;
}

.project-reverse-row{
    justify-content: flex-end;
    position: relative;
}

.container-pro{
    padding-inline: 20px;
}


.project-shape{
    position: absolute;
    left: -21%;
    top: -25%;
    z-index: -1;
    transform: translate(-66%, -73%);
    transition: 1.5s;
    opacity: 0;
}

.project-shape.loaded{
    transform: translate(0);
    transition: 1.5s;
    opacity: 1;
}


.project-extra1 {
    position: inherit;
    top: 11%;
    left: 18%;
    transition: 1.2s;
    opacity: 0;
    transform: translate(137%, 118%);
}

.project-extra1.loaded{
    transition: 1.2s;
    opacity: 1;
    transform: translate(0);
}


.project-extra2{
    position: inherit;
    top: 28%;
    left: 21%;
    transform: translate(-29%, -5%);
    transition: 1.4s;
    opacity: 0;
}

.project-extra2.loaded{
    transition: 1.4s;
    opacity: 1;
    transform: translate(0);
}

.each-project {
    width: 100%;
    height: 360px;
}

.each-project img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 40px;
}


/*our projects*/



























/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/


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




    .mainswiper .swiper-slide {
        width: 100%;
        height: 529px;
    }

    .thumbswiper .swiper-slide .thumb-gallery-slide {
        width: 95px;
        height: 95px;
    }

    .banner-shape svg {
        width: 1317px;
        height: 1136px;
    }

    .banner-extra1 svg{
        width: 247px;
        height: 213px;
    }

    .banner-extra2 svg{
        width: 247px;
        height: 213px;
    }

    .banner-extra3 svg{
        width: 1267px;
        height: 999px;
    }

}

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

    .mainswiper .swiper-slide {
        height: 454px;
    }



}

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

    .our-projects .container-fluid-title {
        padding-inline: 22px;
    }

    .detail-title h1 {
        font-size: 25px;
    }

    .our-projects {
        padding-block: 20px 46px;
    }

    .online-appointment {
        padding-block: 2px 60px;
    }

    .mobile-title{
        display: block;
    }

    .desc-title{
        display: none;
    }

    .mainswiper .swiper-slide {
        align-items: center;
        justify-content: center;
        display: flex;
    }

    .mainswiper .main-gallery-slide {
        width: 450px;
        height: 450px;
        padding: 6px;
    }

    .thumbswiper{
        width: 450px;
    }

    .detail-info {
        padding-block: 80px 20px;
    }

    .our-projects {
        padding-block: 17px 90px;
    }

}

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

    .project-shape{
        display: none;
    }

    .banner-shape svg {
        width: 1065px;
        height: 924px;
    }

    .banner-extra1 svg {
        width: 185px;
        height: 146px;
    }

    .banner-extra2 svg {
        width: 195px;
        height: 178px;
    }

    .banner-extra3 svg {
        width: 956px;
        height: 770px;
    }

    .form-contact-us {
        padding: 43px 17px;
    }

    .detail-title h1 {
        font-size: 22px;
    }

    .detail-title::before {
        width: 55px;
    }

}

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

    .detail-title h1 {
        font-size: 21px;
    }


    .mainswiper .main-gallery-slide {
        width: 400px;
        height: 400px;
    }

    .mainswiper .main-gallery-slide img {
        object-fit: cover;
    }

    .thumbswiper {
        width: 400px;
    }

    .each-project {
        height: 206px;
    }

}

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

    .banner-shape svg {
        width: 867px;
        height: 764px;
    }

    .banner-extra1 svg {
        width: 90px;
        height: 102px;
    }

    .banner-extra2 svg {
        width: 138px;
        height: 121px;
    }

    .banner-extra3 svg {
        width: 771px;
        height: 629px;
    }

    .detail-title::before {
        width: 48px;
    }

    .detail-title h1{
        font-size: 18px;
    }

    .mainswiper .main-gallery-slide {
        width: 315px;
        height: 315px;
    }

    .mainswiper .swiper-slide {
        height: 331px;
    }

    .thumbswiper {
        width: 300px;
    }

    .thumbswiper .swiper-slide .thumb-gallery-slide {
        width: 86px;
        height: 86px;
    }

}

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

}

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

}





/*responsive*/
/*responsive*/
/*responsive*/
/*responsive*/