@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: normal;
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Vazir';
    font-style: normal;
    font-weight: bold;
    src: url('../fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
    font-display: swap;
}

@charset "UTF-8";


/*start header css*/
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}
.nav-tabs .nav-item {
    display: block;
}
.nav-tabs .nav-item .nav-link {
    width: 100%;
    color: #000;
}
.nav-link {
    color: #000;
}
.tab-content {
    display: flex;
}
.nav-tabs {
    flex-direction: column;
    width: 150px;
}
.dropdown-menu {
    width: 1000px;
    right: -100%;
    border-radius: 15px;
    border: none;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background-color: #fff;
    color: #3f497f;
}
.dropdown-menu a {
    color: #595959;
    font-size: 15px;
}
.dropdown-menu-low {
    width: 500px;
    right: -100%;
}
/* استایل برای 12 لینک در 3 ردیف 4 تایی */
.tab-pane .row {
    display: flex;
    flex-wrap: wrap;
}
.tab-pane .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
}
/* افکت fade-in */
.tab-pane {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.tab-pane.show {
    opacity: 1;
}
.tab-pane .row a:hover {
    text-decoration: none;
    color: #3f497f;
    transition: all 0.5s ease;
    margin-right: 5px;
}
.tab-pane .row a::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    position: relative;
    background-color: #f7c04a;
    border-radius: 500px;
    margin-left: 5px;
    margin-top: -5px;
}
.nav-tab-title a {
    font-weight: bold !important;
    font-size: 15px;
    border-color: #f7c04a !important;
    color: #111 !important;
    text-decoration: none;
}
.nav-tab-title a::before {
    content: "";
    width: 12px;
    height: 5px;
    background-color: #f7c04a;
    border-radius: 500px;
    display: inline-block;
    position: relative;
    margin-left: 5px;
}
.row .list-link-on-tab {
    text-decoration: none;
    color: rgb(59, 59, 59);
    font-weight: 400;
    transition: all 0.5s ease;
    margin-right: 0px;
}
.row .list-link-on-tab:hover {
    text-decoration: none;
    color: #f7c04a;
    transition: all 0.5s ease;
    margin-right: 5px;
}
.row .list-link-on-tab::before {
    content: "";
    width: 6px;
    height: 6px;
    display: inline-block;
    position: relative;
    background-color: #3f497f;
    border-radius: 500px;
    margin-left: 5px;
    margin-top: -5px;
}
.Request-cabinet-maker {
    font-size: 15px;
    font-weight: 500;
    fill: #3f497f;
    color: #3f497f;
    background-color: #f7c04a;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #f7c04a;
    border-radius: 25px;
    padding: 10px 15px;
    text-decoration: none;
}
@media screen and (min-width: 992px) {
    .menu-burger {
        display: none !important;
    }
}
@media screen and (max-width: 992px) {
    .Request-cabinet-maker{
        font-size: 11px;
    }
}
@media screen and (max-width: 990px) {
    .header-box .nav-menu {
        display: none !important;
    }
}
/*end header css*/
/*satrt off canvas*/
.off-canvas-menu {
    height: 100vh;
    background-color: #ffffffd3 !important;
    border-radius: 15px 0px 0px 15px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    /* برای سازگاری بیشتر با مرورگرهای مختلف */
    -webkit-backdrop-filter: blur(8px) !important; /* برای Safari و Chrome */
    backdrop-filter: blur(8px) !important; /* برای Firefox و دیگر مرورگرها */
}

.off-canvas-menu .nav-link {
    background-color: #fcfcfc;
    padding-right: 10px;
    padding-left: 10px;
    margin-bottom: 5px;
    border-radius: 5px;
}

.nav-link[aria-expanded="true"] .icon-style {
    transform: rotate(180deg);
}


.instagram-link {
    font-size: 16px;
    font-weight: 500;
    fill: #3f497f;
    color: #3f497f;
    background-color: #fff;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #3f497f;
    border-radius: 25px;
    padding: 10px 15px;
    text-decoration: none;
}

/*end off canvas*/
/*footer start */
footer {
    padding-top: 105px;
}
.main-footer {
    font-family: "Ravi";
    background-color: #3f497f;
    font-size: 14px;
    font-weight: 400;
    color: white;
    border-radius: 25px 25px 0px 0px;
}
.main-footer .footer-logo {
    margin-top: -95px;
}
.main-footer .footer-logo img {
    background-color: white;
    border-radius: 15px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    padding: 15px;
    margin-bottom: 10px;
}
.main-footer .footer-title {
    color: #fff;
    font-family: "ravi";
    font-size: 19px;
    line-height: 1.8em;
}
/* ستون اول */
.main-footer .dm-footer ul li {
    list-style-type: none;
    padding: 5px 0px;
    margin: 0;
}
.main-footer .dm-footer ul li img {
    padding-left: 0px;
    width: 22px;
}
.main-footer .dm-footer ul li a {
    text-decoration: none;
    color: white;
    line-height: 2em;
    padding-left: 3px;
    transition: all 0.4s ease;
}
.main-footer .dm-footer ul li a:hover {
    color: #f7c04a;
    padding-right: 3px;
    padding-left: 0px;
    transition: all 0.4s ease;
}
/* ستون دوم */
.main-footer .second-column .about-us {
    font-size: 15px;
    line-height: 1.8em;
}
/* ستون سوم */
.main-footer .icon-box {
    /* border-width: 1px 0px 0px 0px;
    border-color: #ffffff44;
    border-style: solid; */
    padding: 10px 0px;
}
.main-footer .icon-box img {
    width: 60px;
}
.main-footer .icon-box a {
    color: #fff;
    text-decoration: none;
}
.main-footer .icon-box a:hover {
    color: #f7c04a;
}
.main-footer .icon-box-title {
    font-size: 16px !important;
}
/* فاصله خطه های بین ستون ها */
.main-footer .vertical-line {
    width: 1px;
    height: auto;
    background-color: #ffffff2e;
    margin: 0 15px;
    padding: 0px;
}
/* عرض سفارشی ستونها */
.main-footer .first-column,
.main-footer .second-column,
.main-footer .third-column {
    width: 31%;
}
.main-footer .container-wide {
    max-width: 1455px;
}
@media screen and (max-width: 992px) {
    .main-footer .first-column,
    .main-footer .second-column,
    .main-footer .third-column {
        width: 100%;
    }
    .main-footer .vertical-line {
        width: 100%;
        height: 3px;
        background-color: #ffffff2e;
        margin: 15px 0px;
        padding: 0px;
    }
}

.main-footer ul a:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='15' height='15'%3E%3Cpath d='m11.865,18.159c.188.202.178.518-.024.707-.096.09-.219.135-.341.135-.133,0-.267-.053-.365-.159l-4.142-4.429c-.636-.635-.993-1.497-.993-2.412s.357-1.777,1.004-2.424l4.13-4.417c.189-.203.505-.213.707-.024.202.188.212.505.024.707l-4.142,4.429c-.471.471-.723,1.081-.723,1.729s.252,1.258.711,1.717l4.154,4.441Zm.315-6.159l5.687-6.161c.188-.203.175-.52-.028-.707-.202-.188-.52-.174-.707.028l-6,6.5c-.177.192-.177.487,0,.679l6,6.5c.098.106.232.161.367.161.122,0,.243-.044.339-.133.203-.187.215-.503.028-.707l-5.687-6.161Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
}

/*footer end*/

/*single post start */
.content p{
    text-align: justify;
}
.content img{
    max-width: 100%;
    margin: auto;
    display: block;
}
/*single post end*/


.page-header {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    z-index: 5;
}

.main-footer {
    font-size: 14px;
    font-weight: 400;
    color: white;
    border-radius: 25px 25px 0px 0px;
}

.main-footer a {
    color: white;
    text-decoration: none;
}


.main-footer ul li a:hover {
    color: var(--bs-primary);
    padding-right: 3px;
    padding-left: 0;
    transition: all 0.4s ease;
}
.blog-post img{
    width: 100%;
    padding: 10px 0 20px 0;
    height: auto;
}
.blog-post p{
    text-align: justify;
}

.carousel-item img{
    height: 280px;
    max-height: 280px;
    min-height: 280px;
    object-fit: cover;
    width: 100%;

}
.contractor-side-bar {
    background-color: #3f497f;
    border-radius: 15px;
    top: 40px;
}

.contractor .first-column {
    background-color: #3f497f;
    border-radius: 15px;
    top: 40px;
}

.cover {
    position: absolute;
    display: block;
    width: 80%;
    right: 10%;
    z-index: 1;
}

.expert-name {
    font-size: 25px;
    color: #fff;
    text-align: center;
    line-height: 1.8em;
}

.expert-rating {
    color: #fff;
    text-align: center;
    font-size: 15px;
    fill: #f7c04a;
}

.Feature {
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    border-color: #ffffff65 !important;
}

.job-title {
    color: #fff;
    text-align: center;
    font-size: 13px;
    text-align: right;

}

.job-title .jobs {
    background-color: #ffffff4b;
    padding: 2px 10px;
    border-radius: 50px;
}

.tel-cta {
    border-radius: 15px;
    font-weight: bold;
    background-color: #f7c04a;
    color: #3f497f;
    fill: #3f497f;
    text-decoration: none;
    padding: 15px 25px;
    text-align: center;
    display: block;
    margin-bottom: -41px;
    margin-top: 15px;
}

/* ستون دوم */
.second-column {
    top: 27px;
}

.dm-strength ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    fill: #00a049;
    color: #00a049;
}


.dm-weakness ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    fill: #a00020;
    color: #a00020;
}

.dm-box2 {
    background-color: #fff8ea;
    border-radius: 15px;
    box-shadow: 0px 12px 24px -3px #11111115;
    overflow: hidden;
    fill: #3f497f;
}

.icon-box {
    border: solid 1px #3f497f;
    border-radius: 500px;
    background-color: #002f9409;
}

.payment-method {
    color: #3f497f;
    border: solid 1px #3f497f;
    padding: 12px 20px 12px 20px;
    border-radius: 15px;
    fill: #3f497f;
    transition: all ease 0.5s;
}

.payment-method:hover {
    color: #fff;
    fill: #fff;
    background-color: #3f497f;
    border: solid 1px #3f497f;
    padding: 12px 20px 12px 20px;
    border-radius: 15px;
    transition: all ease 0.5s;
}

/* نمونه کارهای متخصص */
.dm-models {
    border-radius: 15px;
    box-shadow: 0px 12px 24px -3px #11111115;
}

.models-title {
    font-size: 17px;
    font-weight: bold;
    text-align: center;
}

.dm-models img {
    border-radius: 15px;
}


.expert {
    border-radius: 15px;
    background-color: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    text-decoration: none;
    color: #111;
}
.expert-img {
    background-color: #dcdcdc;
    border-radius: 500px;
    overflow: hidden;
    height: 133px;
    width: 133px;
}
.expert-name {
    font-size: 13px;
    font-weight: bold;
    padding: 0px 0px 2px 0px;
}
.rating {
    font-size: 15px;
    font-weight: bold;
    color: #111;
    padding: 2px 0px;
    fill: #008000;
}
.rating span {
    font-size: 10px;
    font-weight: normal;
}
.location {
    font-size: 10px;
    font-weight: normal;
    color: #4b4b4b;
    fill: #bababa;
}
.line {
    background-color: #acacac;
    width: 1px;
}
.sample-work {
    font-size: 12px;
    font-weight: normal;
}

.get-price {
    font-size: 12px;
    font-weight: normal;
    background-color: #fff;
    border-radius: 10px;
    color: #3f497f;
    border: 1px solid #3f497f;
}

.get-price:hover {
    background-color: #3f497f;
    color: #fff;
    transition: all ease 0.5s;
}

#contractor-image figure{
    overflow: hidden;
    height: 120px;
}
/*start off canvas*/
@media screen and (max-width: 992px){
    #HmaisakhtOffCanvas {
        flex-wrap: nowrap !important;
        overflow-y: scroll !important;
        justify-content: flex-start !important;
    }
}
/*end off canvas*/
/* start breadcrumb style */
.breadcrumbs{
    font-size:14px !important;
    padding-bottom:8px
}
.breadcrumbs a{
    color: #212529 !important;
    text-decoration: none;
}
.breadcrumbs span{
    color: #212529 !important;
}
.breadcrumbs .list-inline-item{
    padding:0px 0px 0px 5px !important;
    margin:0px !important
}
/* end breadcrumb style */
.color-hami{
    background: #f7c04a;
}
@media screen and (max-width: 992px) {
    .hamiconfooter {
        display: block !important;
        width: 100% !important;
    }
}

.special {
    background-color: #f7c04a;
    font-weight: bold;
    border-radius: 500px;
    color: #3f497f;
    font-size: 15px;
    position: absolute;
    top: 0px;
    right: -10px;
    transform: rotate(45deg);
    padding: 0 16px;
}



.portfolio-first-column {
    background-color: #002e94;
    border-radius: 15px;
    top: 40px;
}

.portfolio-name {
    font-size: 25px;
    color: #fff;
    text-align: center;
    line-height: 1.8em;
    padding: 0 10px;
}

.expert-rating {
    color: #fff;
    text-align: center;
    font-size: 15px;
    fill: #f7c04a;
}

.Feature {
    color: #ffffff;
    text-align: center;
    font-size: 13px;
    border-color: #ffffff65 !important;
}

.expert-name-title {
    color: #fff;
    text-align: center;
    font-size: 13px;
}

.expert-name-title .expert-name {
    background-color: #ffffff4b;
    padding: 2px 10px;
    border-radius: 50px;
    width: 100%;
}

.tel-cta {
    border-radius: 15px;
    font-weight: bold;
    background-color: #f7c04a;
    color: #3f497f;
    fill: #3f497f;
    text-decoration: none;
    padding: 15px 25px;
    text-align: center;
    display: block;
    margin-bottom: -20px;
    margin-top: 15px;
}

/* ستون دوم */
.portfolio-second-column {
    top: 27px;
}

.dm-box {
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0px 12px 24px -3px #11111115;
    overflow: hidden;
}

.title {
    font-weight: bold;
    font-size: 20px;
}

.dm-box .title::before {
    content: "";
    display: inline-block;
    width: 27px;
    height: 13px;
    border-radius: 50px 0px 0px 50px;
    background-color: #f7c04a;
    font-weight: bold;
    font-size: 20px;
    margin-left: 5px;
    margin-right: -30px;
}

/* عکس ها و گالری */
.portfolio-gallery div {
    height: 300px;
    display: block;
    overflow: hidden;
    border-radius: 15px;
    padding-bottom: calc(var(--bs-gutter-x) * 0.5);
    padding-top: calc(var(--bs-gutter-x) * 0.5);
}

@media screen and (max-width: 600px) {
    .portfolio-gallery div {
        height: 200px;
    }
}

.portfolio-gallery a img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}