/* ----------------------------------------------------------------------------------------
* Author        : NASIMHEZAR
* Template Name : GARNO - HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* STYLE PERSIAN
----------------------------------------------------------------------------------------
01. Global Variables
02. responsive css
03. Header css
04. footer css
05.scroll css
06.accordion page css
07.index page old css
08.employer  page css
09. specialties page css
10. detailes specialties page css
11. list project page css
12. contact-us page css
13. location project page css
14. qualification page css
15. board of direction page css
16. goals and visions page css
17. profile page css
18. detailes project page css
19. history company page css
20. org-chart page css
21. responsive mobile css
*/
/************************************/
/*** 	   01. Global Variables		  ***/
/************************************/
@import url('../fonts/farhang/Webfonts/fontiran.css');

:root {
    --font-base: 1rem;
    /* پایه فونت (16px) */
    --space-base: 1rem;
    /* پایه فاصله‌ها */
    --img-size-base: 50px;
    /* اندازه پیش‌فرض تصاویر */
    --height-input: clamp(18px, 1.3vw, 100px);

    --color-text: #0f0e0e;
    --white-color: #ffffff;
    --color-bg-light: #f0f0f0;
    --color-border-input: #6a6262;
    --black-color: #212121;
    /* رنگ اصلی تیره */
    --body-padding: 0px;
    --text-gray: rgb(156 156 156);
    --text-black: #000000;
    --font-color: #000000;
    --space-main: 50px;
    --space-mainn: 2rem;
    --default-font: "FarhangDot1", sans-serif;
    --default-font-number: "Farhang2FaNum", sans-serif;
    --a: 3vw;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;

}

body {
    margin: var(--a);
    /*background-color: #c0a2a2;*/
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 2 * var(--a));
    font-family: var(--default-font);
    direction: rtl;
    color: var(--color-text);
    overflow: hidden;
    -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";
}


.container-main {
    flex: 1;
    display: flex;
    flex-direction: row;
    /*background-color: var(--white-color);*/

}

.container-main,
.main-content,
header,
footer {
    width: 100%;

}

main {
    flex: 1;

}

a {
    text-decoration: none;
    color: var(--color-text);
}

p {
    margin-top: 0;
    margin-bottom: 0;
}

/* خط مرکزی صفحه فقط برای تست */
/*.center-guide {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 50%;*/
/*    width: 1px;*/
/*    height: 100vh;*/
/*    background-color: blue;*/
/*    z-index: 9999;*/
/*    pointer-events: none;*/

/*}*/

/*footer {*/
/*    background-color: white;*/
/*}*/

/************************************/
/*** 	   02. responsive css		  ***/
/************************************/
.logo-responsive {
    display: none;
}

.circle-language-responsive {
    display: none;
}

.menu-responsive {
    display: none;
}

/*bootstrapt styles*/

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0rem;
}

ol,
ul {
    padding-right: 0rem;
}

.sidebar {
    flex: 0 0 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

}

.sidebar img {
    width: var(--img-size-base);
    z-index: 100;
}


/* menu */

.site-header {
    display: flex;
    align-items: start;
    justify-content: space-between;
    height: 8%;

}

.mobile-header-top {
    display: none;
}

.text-menu {
    display: none;
}

.menu-header {
    display: none;
}


.container-logo {
    display: block;
    flex: 1;
    display: flex;
    justify-content: flex-start;
    /*align-items: center;*/
    /*height: clamp(60px,5vw,200px);*/
    position: relative;

}


.container-logo img {
    display: block;
    height: 120px;
    /*position: absolute;*/
    z-index: 10;
    height: clamp(40px, 6vw, 300px);
    top: 0;
    /*transform: scale(1.5);*/
}



.logo {
    height: 50px;
    width: auto;

}

.breadcrumb-item{
font-size: clamp(14px, 1.3vw, 58px);
}

.breadcrumb-item a {
    font-weight: 500;
    font-size: clamp(14px, 1.3vw, 58px);
}

.breadcrumb-item.active {
    font-weight: 900;
    color: var(--black-color);
    font-size: clamp(14px, 1.3vw, 58px);
}

.breadcrumb-item+.breadcrumb-item::before {
    font-weight: 200;
    float: right;
    padding-left: 0px;
    color: var(--black-color);
    content: var(--bs-breadcrumb-divider, "/");
    font-size: clamp(14px, 1.3vw, 58px);
}

.breadcrumb-item+.breadcrumb-item {
    padding-right: 0px;
}

.container-menu {
    /*all: unset;*/
    margin-right: var(--a);
    flex: 1;
}

/*.menu > li > a{*/
/*    all:unset;*/
/*}*/

.menu>li>a:hover {
    color: var(--black-color);
}

.menu {
    display: flex;
    justify-content: space-around;
    list-style: none;
    gap: 2rem;
    margin: 0;
    padding: 0;
}

.menu li {
    all: unset;
    position: relative;
}

.menu li a {
    all: unset;
    text-decoration: none;
    color: var(--font-color);
    font-weight: 300;
    padding: 0.5rem 0;
    font-size: clamp(10px, 1.1vw, 60px);
    white-space: nowrap;
}

.menu-footer {
    display: none;
}


.menu li.has-submenu {
    position: relative;
}

.submenu {
    position: absolute;
    top: 100%;
    left: 50%;
    background-color: white;
    box-shadow:
        /* سایه راست */
        1px 0 1px rgba(0, 0, 0, 0.1),
        /* سایه پایین */
        0 1px 1px rgba(0, 0, 0, 0.1);
    list-style: none;
    margin: 0;
    padding: 0.5rem 0;
    min-width: clamp(90px, 7vw, 500px);
    display: none;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;

}

.submenu::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: clamp(3px, 0.3vw, 30px);
    background-image: linear-gradient(to right, #d33636, #d33636);
    animation: borderFill 1s ease forwards;
}

@keyframes borderFill {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.line-vr-hover {
    position: relative;
    display: inline-block;
    width: 2px;
    height: 15px;
    vertical-align: middle;
    opacity: 0;
}

.line-vr-hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    transform: scaleX(0.5);
    transform-origin: left center;
}

.line-vr {
    position: relative;
    display: inline-block;
    width: 2px;
    height: 15px;
    vertical-align: middle;
}

.line-vr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    transform: scaleX(0.5);
    transform-origin: left center;
}

.hover-link:hover .line-vr-hover {
    opacity: 1;
}

.hover-link:hover .line-vr {
    opacity: 0;
}

.submenu li {
    /*all: unset;*/
    display: flex;
    padding: 0;
    height: auto;
    justify-content: center;
    align-content: center;
    gap: 10px;
    margin: 2px 0;
}

.submenu li a {
    /*all: unset;*/
    color: #515151;
    font-size: clamp(8px, 0.7vw, 42px);
    padding: 0;
}


/*نمایش زیرمنو هنگام hover */
.menu li.has-submenu:hover>.submenu {
    display: block;
}

.submenu li:hover {
    background-color: #ebebeb;

}

.submenu li a:hover {
    color: var(--text-black);
    font-weight: 500;
}

/************************************/
/*** 	   04. footer css		  ***/
/************************************/
/* فوتر */


.hidden-responsive {
    display: block;
    /*background-color: aliceblue;*/

}

.footer-contact {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: end;
    color: var(--black-color);
}

.footer-right {
    width: 15%;
}

.footer-left {
    width: 15%;
}


.footer-icons {
    display: flex;
    height: clamp(15px, 1.4vw, 80px);
    justify-content: space-around;
}

.footer-center {
    display: flex;
    flex-direction: column;
    position: relative;

}

.container-language {
    /*width: clamp(15px, 7vw, 34px);*/
    /*height: clamp(15px, 7vw, 34px);*/
    width: clamp(25px, 2.3vw, 120px);
    height: clamp(25px, 2.3vw, 120px);
    border-radius: 50%;
    border: 1px solid #8080803d;
    /*background-color: var(--white-color);*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--black-color);
    font-size: 10px;
    cursor: pointer;
    overflow: hidden;
}

.container-language p {
    margin: 1px 0;
    line-height: 1.1;
}

.farsi {
    font-weight: 100;
    font-size: clamp(7px, 0.7vw, 42px);
}

.english {
    font-size: clamp(7px, 0.6vw, 32px);
}


#listLanguage a.active {
    font-weight: 900;
}

.english a.active {
    font-size: clamp(6px, 0.55vw, 32px);
}

.footer-center .container-language {
    border: 1px solid #00000033;
    color: var(--black-color);
    margin-inline: auto;

    /*margin-bottom:clamp(5px, 0.8vw, 10px);*/
}

.add_hover_top_persian {
    animation: hoverTextTopPersian 0.3s linear forwards;
}

.add_hover_top_english {
    animation: hoverTextTopEnglish 0.4s linear forwards;
}

.add_hover_top_english a {
    animation: hoverTextTopEnglish 0.4s linear forwards;

}

.add_hover_bottom_top_persian {
    animation: hoverTextBottomTopPersian 0.4s linear forwards;

}

.end_hover_top_bottom_persian {
    animation: EndHoverTextTopBottomPersian 0.3s linear forwards;

}

.end_hover_top_bottom_english {
    animation: EndHoverTextTopBottomEnglish 0.3s linear forwards;

}

.end_hover_top_persian {
    animation: EndHoverTopPersian 0.7s linear forwards;

}



@keyframes hoverTextTopPersian {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(-60%);
        opacity: 0;
    }

}

@keyframes hoverTextTopEnglish {
    from {
        transform: translateY(0%);
    }

    to {
        transform: translateY(28%);

    }
}

@keyframes hoverTextBottomTopPersian {
    from {
        transform: translateY(20%);
        opacity: 0;
    }

    to {
        transform: translateY(-2%);
        opacity: 1;


    }

}

@keyframes hoverTextBottomEnglish {
    from {
        transform: translateY(-70%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes EndHoverTextTopBottomPersian {
    from {
        transform: translateY(10%);
    }

    to {
        transform: translateY(0%);
    }
}

@keyframes EndHoverTextTopBottomEnglish {
    from {
        transform: translateY(-125%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes EndHoverTopPersian {
    from {
        transform: translateY(-60%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.footer-center .center-text {
    position: relative;
    top: 0.8vw;
    height: auto;
    display: flex;
    justify-content: center;

}

.center-text-child {
    position: absolute;
    display: inline-block;
}

.footer-center .center-text p {
    font-size: clamp(8px, 0.8vw, 58px);
    font-weight: 100;
    /*position: absolute;*/
    /*top: 0;*/
    margin-inline: auto;
    width: max-content;
    display: flex;
    justify-self: center;
    padding-inline: 2px;
}


.footer-center .center-text a {
    font-size: clamp(8px, 0.8vw, 58px);
    font-weight: 500;
    padding-right: clamp(0.1rem, 0.2vw, 12rem);
}

.center-text p {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* پرده‌ها حالت اولیه بسته */
.curtain {
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #fff;
    opacity: 0;
    /* ← قبل از ورود ماوس مخفی */
    pointer-events: none;
    transition: opacity 0.25s linear;
    /* محو/ظاهر شدن نرم */
}

.curtain.visible {
    opacity: 1;
}

.curtain-left {
    right: 0;
    opacity: 0;
}

.curtain-right {
    left: 0;
    opacity: 0;
}

/* انیمیشن باز شدن */
.center-text.animate p {
    opacity: 1;

}

.curtain-left.with-border {
    border-left: 1px solid #000;
}

.curtain-right.with-border {
    border-right: 1px solid #000;
}

.center-text.animate .curtain-left {
    border-left: 1px solid #000;
    animation: curtainOpenLeft 1.5s forwards;
}

.center-text.animate .curtain-right {
    border-right: 1px solid #000;
    animation: curtainOpenRight 1.5s forwards;
}

/* انیمیشن بسته شدن */
.center-text.closing p {
    opacity: 0;
}

.center-text.closing .curtain-left {
    border-left: 1px solid #000;
    animation: curtainCloseLeft 1.5s forwards;
}

.center-text.closing .curtain-right {
    border-right: 1px solid #000;
    animation: curtainCloseRight 1.5s forwards;
}

@keyframes curtainOpenLeft {
    0% {
        width: 50%;
    }

    100% {
        width: 0;
    }
}

@keyframes curtainOpenRight {
    0% {
        width: 50%;
    }

    100% {
        width: 0;
    }
}

@keyframes curtainCloseLeft {
    0% {
        width: 0;
    }

    100% {
        width: 50%;
    }
}


@keyframes curtainCloseRight {
    0% {
        width: 0;
    }

    100% {
        width: 50%;
    }
}

.custom-tooltip {
    font-size: clamp(8px, 0.8vw, 52px);
    font-weight: 100;
    position: absolute;
}

.custom-tooltip a {
    font-weight: 600;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-text {
    visibility: hidden;
    width: max-content;
    background-color: var(--white-color);
    color: var(--text-black);
    text-align: center;
    /* border-radius: 6px; */
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* opacity: 0; */
    /* transition: opacity 0.3s; */
    border-right: clamp(3px, 0.3vw, 30px) solid #d33636;
    box-shadow:
        /* سایه چپ */
        -2px 0 5px rgba(187, 187, 187, 0.2),
        /* سایه پایین */
        0 2px 5px rgba(187, 187, 187, 0.2),
        /* سایه بالا */
        0 -2px 5px rgba(187, 187, 187, 0.2);

    opacity: 0;
    transition: opacity 0.3s;
}


.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


.tooltip-container .tooltip-text {
    bottom: auto;
    top: 110%;
    right: 0;
    margin-left: 0;
}

.address-1,
.address-2 {
    position: relative;
}




.image-wrapper {
    position: relative;
    display: inline-block;
    text-align: center;
}

.image-wrapper img {
    display: block;
    height: 100%;
}

.caption {
    /*display: none; */
    position: absolute;
    bottom: -160%;
    left: 50%;
    transform: translateX(-50%);
    color: var(--text-black);
    font-size: clamp(7px, 0.6vw, 58px);
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    animation: endTextHover .4s ease forwards;
}



@keyframes textHover {
    0% {
        opacity: 0;
        bottom: -160%;
    }

    100% {
        opacity: 1;
        bottom: -100%;

    }
}

@keyframes endTextHover {
    0% {
        opacity: 1;
        bottom: -100%;

    }

    100% {
        opacity: 0;
        bottom: -160%;
    }
}


.image-wrapper:hover .caption {
    animation: textHover .4s ease forwards;
}



/************************************/
/*** 	   05. scroll css		  ***/
/************************************/
::-webkit-scrollbar {
    width: clamp(2px, 0.2vw, 30px);
    height: 0.2vw;
}

::-webkit-scrollbar-track {
    background-color: var(--color-bg-light);
    border-radius: 10em;
}

::-webkit-scrollbar-thumb {
    background-color: var(--color-text);
    border-radius: 10em;
}

.item-scroll-slider {
    overflow-y: hidden;
    overflow-x: scroll;

}

.item-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/*.item-scroll-employer {*/
/*    overflow-y: auto;*/
/*    overflow-x: hidden;*/
/*    height: 75%;*/
/*    scrollbar-width: none;*/
/*    -ms-overflow-style: none;*/
/*}*/
.item-scroll-employer {
    height: 75%;
    overflow-y: auto;
    overflow-x: hidden;
    direction: ltr;

}

.special-scroll-accordion {
    overflow-y: auto;
    overflow-x: hidden;
    height: 63%;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.item-scroll-hidden {
    overflow-y: hidden;
    overflow-x: hidden;
    height: 76vh;
}



.item-scroll-container {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    max-height: 100%;
    min-height: 200px;
    /* حداقل ارتفاع */
}

.item-scroll-goals {
    overflow-y: auto;
    overflow-x: hidden;
    height: 70vh;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.item-scroll-history {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.item-scroll-quality {
    overflow-y: auto;
    overflow-x: hidden;
    height: 75vh;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.loh-scroll-center::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.item-scroll-special {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
}

/************************************/
/*** 	   06. accordion page css		  ***/
/************************************/
.accordion-flush {
    direction: rtl !important;
}

.accordion-flush>.accordion-item:first-child {
    border-top: 1px solid #dee2e6;
    border-bottom: 0px solid #dee2e6;
}

.accordion-flush>.accordion-item {
    border-top: 0px solid #dee2e6;
    border-bottom: 0px solid #dee2e6;
}

.accordion-flush>.accordion-item:last-child {
    border-top: 0px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.accordion-item.project {
    border-bottom: 0px solid #dee2e6;
    font-weight: 200;
}

.accordion-button {
    display: block !important;
}

/*.accordion-item span {*/
/*    font-size: clamp(14px, 3vw, 14px);*/

/*}*/


.accordion-item span {
    font-size: clamp(9px, 0.7vw, 62px);
    font-weight: 200;
}

.accordion-button .title-row {
    display: flex;
     gap:clamp(15px, 1vw, 350px);
    font-family: var(--default-font);
    -moz-font-feature-settings: "ss03";
    -webkit-font-feature-settings: "ss03";
    font-feature-settings: "ss03";

}

.accordion-button .title-row-children {
    display: flex;
      gap:clamp(15px, 1vw, 350px);
}

.col-year {
    /*text-align: right;*/
   justify-self: flex-start;
}

.col-title {
    text-align: justify;
    justify-self: flex-start;
    flex: 1;
}

.col-province {
    /*text-align: left;*/
    justify-self: flex-end;
}

.col-other {
       text-align: left;
    justify-self: flex-end;
    flex: 0.2;
}



/* مخفی کردن هر دو ستون */
.accordion-button .title-row:has(.col-other:empty):has(.col-province:empty) .col-other,
.accordion-button .title-row:has(.col-other:empty):has(.col-province:empty) .col-province {
    display: none;
}

/* ستون خالی را کلاً پنهان کن */
.accordion-button .title-row:has(.col-other:empty) .col-other {
    display: none;
}

.project .accordion-button {
    padding-top: clamp(0.1rem, 0.3vw, 5rem);
    padding-bottom: clamp(0.1rem, 0.3vw, 5rem);
    padding-left: 0;
    padding-right: 0;

}

/* حذف فلش آکاردئون */
#accordionFlushExample .accordion-button::after {
    display: none;
}

/* حذف پس‌زمینه و افکت هاور */
#accordionFlushExample .accordion-button {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

/* متن bold هنگام باز بودن */
#accordionFlushExample .accordion-button:not(.collapsed) {
    font-weight: bold;
}

#accordionFlushExample .accordion-button:not(.collapsed) span {
    font-weight: bold;
}

/* اطمینان از شفاف بودن هنگام باز بودن */
#accordionFlushExample .accordion-button:not(.collapsed):hover {
    background-color: transparent;
    box-shadow: none;
}


.accordion-button:not(.collapsed) {
    color: var(--color-text);
    background-color: var(--white-color);
    box-shadow: var(--white-color);
}

.accordion-button:not(.collapsed) span {

    font-weight: bold;
}

.accordion-button:focus {
    box-shadow: var(--white-color);
    background-color: var(--white-color);
}

.tag-label {
    color: rgb(81, 81, 81);
    font-size: clamp(8px, 0.7vw, 52px);
    font-weight: 100;
    border-radius: 3rem;
    margin-top: 1%;
    margin-left: 1%;
    background-color: var(--color-bg-light);
    padding: clamp(0.1rem, 0.2vw, 5rem) clamp(0.3rem, 0.6vw, 8rem);
}

.tag-label:hover {
    background-color: #3f3e3e80;
    /* رنگ هاور */
    color: #fff;

}

.filter-date {
    max-width: 100%;
    height: 100%;
    display: block;
}


.filter-date hr {
    text-align: center;
    /*margin-right: 1.5rem;*/
    opacity: 1;
}


.filter-date span {
    /*padding-left: .5rem;*/
    /*transform: translate(50%, -50%);*/
    /*right: 0;*/
    /*top: 0;*/
    /*position: absolute;*/
    /*--bs-text-opacity: 1;*/
    /*color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;*/
    font-size: clamp(8px, 0.7vw, 52px);
    font-weight: bold;
}


.position-relative.highlight-year hr {
    border-color: red !important;
}

hr {
    margin: 0.5rem 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
}

.w-1 {
    width: 0.5rem !important;
}

.w-2 {
    width: 0.6rem !important;
}

.arrow-parent {
    text-align: center !important;
    padding-right: clamp(3px, 1.1vw, 68px);
}

.children-employer .accordion-button .bi-chevron-down::before {
    transform: rotate(90deg) !important;
    transition: transform 0.2s ease !important;
}

.children-employer .accordion-button:not(.collapsed) .bi-chevron-down::before {
    transform: rotate(0deg) !important;
}


/************************************/
/*** 	   contact-us-modal		  ***/
/************************************/
@media screen and (min-width:1200px) {

    .modal-xl {
        --bs-modal-width: clamp(1140px, 80vw, 5000px);
    }

    .modal .form-control {
        padding: clamp(2px, 0.4vw, 80px);
        padding-inline: clamp(5px, 0.7vw, 100px);
        height: clamp(30px, 2vw, 300px);
    }


}

/************************************/
/*** 	   07. index page old css		  ***/
/************************************/
.content-main-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

}

.logo-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logo-main img {
    width: calc(var(--img-size-base)*3);
    /* یا سایز مناسب */
    height: auto;
    /* حفظ نسبت تصویر */
    max-width: 100%;
}

.page-layout-gride {
    display: flex;
    justify-content: flex-start;
    /* آیتم‌ها سمت چپ شروع شوند */
    gap: 1rem;
    margin-top: 65vh;
    flex-wrap: wrap;
    max-width: 100%;
    padding-left: 60px;
    /* به جای margin-left ثابت */
    margin-left: auto;
    margin-right: auto;
}


.container-main-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 10px;
    flex: 1;
    min-width: 130px;
    white-space: nowrap;


}

.container-main-link a {
    background-color: var(--color-bg-light);
    text-decoration: none;
    color: inherit;
    font-weight: 200;
    width: 100%;
    font-size: clamp(10px, 3vw, 12px);
    color: #888;
    border-radius: 18px;
    text-align: center;
    padding: 0.1rem 1.2rem;

}

.container-main-link a:hover {
    background-color: #6a6262;
    color: var(--white-color);
}

/************************************/
/*** 	   08. employer page css		  ***/
/************************************/

.content-main {
    padding-bottom: clamp(8px, 0.8vw, 50px);
    margin-left: clamp(0.5rem, 3vw, 12rem);
    height: 100%;
}

input[type="search"]::-webkit-search-cancel-button {
    display: none;
    /* یا -webkit-appearance: none; و سپس پنهان کردن */
}

/* برای فایرفاکس هم به همین شکل */
input[type="search"]::-moz-search-cancel-button {
    display: none;
}

.search-cancel-icon {
    background-color: rgb(240, 240, 240);
    /* color: rgb(166, 165, 165); */
    display: block;
    /* overflow: hidden; */
    height: 100%;
    color: #919090;
    font-size: clamp(10px, 1.3vw, 168px);
}

.height-row {
    height: 100%;
}

.height-col {
    height: 100%;
}

.pr {
    padding-right: clamp(0.5rem, 1.5vw, 12rem);
}

.pl {
    padding-left: clamp(0.5rem, 3.5vw, 12rem);
}

/*.height-element-form {*/
/*    height: clamp(0.5rem, 2vw, 12rem);*/
/*}*/
.height-element-form {
    height: var(--height-input);
}

.input-group-text {
    padding-top: 0;
    padding-bottom: 0;
    padding-right: clamp(2px, 0.8vw, 50px);
    padding-left: clamp(2px, 0.5vw, 50px);
}

/*.input-group-text i {*/
/*    padding-top: 5px;*/
/*}*/

.input-group-text i {
    color: #919090;
    font-size: clamp(10px, 0.7vw, 168px);
    padding-top: clamp(2px, 0.4vw, 168px);
}

.height-input-search {
    background-color: var(--color-bg-light);
    border: none;
}

/*#search {*/
/*    font-size: clamp(0.5rem, 1vw, 12rem);*/
/*    font-weight: 100;*/
/*    padding-inline: clamp(0.1rem, 0.7vw, 5rem);*/

/*}*/



.form-control:focus {
    box-shadow: none;
    border-color: var(--color-border-input);
    background-color: var(--color-bg-light);
}

#search-results {
    aspect-ratio: 16/7;
    overflow-y: auto;
    background-color: #fff;
    border: none;
    box-shadow: 1px 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
    padding: clamp(0.5rem, 1vw, 8rem) 0;
    /* مخفی کردن اسکرول برای همه مرورگرها */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE & Edge */
    max-height: 400px;
}

#search-results::-webkit-scrollbar {
    width: 0;
    height: 0;
}

#search-results .result-title {
    font-size: clamp(0.5rem, 1vw, 12rem);
    font-weight: 300;
    color: rgb(81, 81, 81);
    padding-right: clamp(0.1rem, 1vw, 8rem);
    padding-bottom: clamp(0.1rem, 0.5vw, 8rem);
    margin-bottom: clamp(0.1rem, 0.8vw, 8rem);
    border-bottom: 1px solid #f0f0f0;
}

#search-results .result-item {
    padding-right: clamp(0.1rem, 1vw, 8rem);

    padding-bottom: clamp(0.1rem, 0.8vw, 8rem);
    cursor: pointer;
    font-size: clamp(8px, 0.7vw, 42px);
    color: rgb(81, 81, 81);
    white-space: normal;
    /* اجازه شکست خط */
    word-break: break-word;
    /* متن طولانی را می‌شکند */
}

#search-results .result-item:hover {
    background-color: #f8f9fa;
}

.not-result-search {
    font-size: clamp(8px, 0.7vw, 42px);
    padding-right: clamp(0.1rem, 1vw, 8rem);
    color: rgb(81, 81, 81);
}

.box-search {
    width: inherit;
    z-index: 10;
    display: none;
    top: 100%;
    left: 0;
    overflow-y: auto;
}

.img-width {
    width: clamp(5%, 4vw, 100%);
    height: clamp(5%, 4vw, 100%);

}

.img-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: clamp(0.5rem, 1.5vw, 12rem);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: clip;
    /* جلوگیری از اسکرول افقی در هر شرایط */
}

.container-img {
    background-color: var(--color-bg-light);
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.container-img a {
    display: flex;
    align-items: center;
    justify-content: center;

    /* فاصله داخلی دلخواه */
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

.container-img a img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    /* لوگو نسبت خودش حفظ شود */
}

.img-gray-hover {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(60%);
    transition: filter 0.3s ease;
}

.img-gray-hover:hover {
    filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%);
}

.box-img-logo {
    aspect-ratio: 16/3;
    margin-top: clamp(0.5rem, 1.5vw, 12rem);
    margin-bottom: clamp(0.5rem, 1.5vw, 12rem);
}

.box-logo {
    min-height: 80%;
    height: 100%;
    width: 20%;
}

.box-title-logo {
    min-height: 80%;
    height: 100%;
    width: 80%;
    padding-right: clamp(0.5rem, 1vw, 12rem);
    padding-left: clamp(0.5rem, 1vw, 12rem);
    background-color: var(--color-bg-light);
}

.box-title-logo h3 {
    font-size: clamp(0.5rem, 1.5vw, 12rem);
    font-weight: bold;
    margin: 0;
}



.img-card {
    height: 100%;
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

}

.img-width-logo {
    width: 70%;
    height: 70%;
}

.img-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    transition: filter 0.3s ease;
    filter: brightness(0) invert(1);
    /* سفید شدن لوگو مشکی */
}

.space-main {
    padding-left: calc(var(--space-main)/2);
}

.space-main-form {
    padding-left: calc(var(--space-main)/2);
}

.img-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* عکس رو کامل داخل باکس پر میکنه و نسبتش حفظ میشه */
    object-position: center;
    /* مرکز عکس نمایش داده میشه */
    display: block;
}

.nav-link.active img {
    filter: grayscale(0);
    transform: scale(1.1);
    transition: 0.3s;
}

.nav-link {
    background: transparent !important;
    /* پس‌زمینه شفاف */
    border: none !important;
    /* حذف border */
    /* حذف فاصله اضافی */
}

.nav-link.active {
    background: transparent !important;
    /* فعال هم شفاف بمونه */
    border: none !important;
    box-shadow: none !important;
}

.img-grid-detailes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(0.1rem, 1.5vw, 8rem);
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    overflow-x: clip;
    padding-top: clamp(0.1rem, 0.5vw, 12rem);
    padding-bottom: clamp(0.1rem, 1vw, 8rem);
    /* جلوگیری از اسکرول افقی در هر شرایط */
}

.container-img-detailes {
    background-color: var(--color-bg-light);
    aspect-ratio: 1.5/1;
    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

#scrollDiv {
    height: 99%;
    overflow-y: auto;
    overflow-x: hidden;

}

.content-main form {
    width: stretch;
    margin-right: clamp(24px, 7.2vw, 300px);
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 0;
}

.detailes-logo-employ {
    height: 100%;
    padding-right: clamp(20px, 4.9vw, 168px);
    overflow: hidden;
    padding-bottom: clamp(5px, 1vw, 50px);
}

.detailes-logo-employ .box-img-logo {
    padding-right: clamp(20px, 3.3vw, 168px);
}

.item-scroll-employer {
    padding-right: clamp(20px, 3.3vw, 168px);
    padding-left: clamp(5px, 0.2vw, 168px);
}

.children-employer {
    height: 100%;
    width: 100%;
    padding-right: 0;
}

.padding-next-height {
    padding-left: 0;
}

/************************************/
/*** 	   09. speciales page css		  ***/
/************************************/
.content-main-specials {
    margin-left: clamp(0.1rem, 2vw, 12rem);
    padding-top: clamp(0.1rem, 1vw, 12rem);
    padding-bottom: clamp(0.1rem, 0.5vw, 12rem);
    padding-left: clamp(0.1rem, 3vw, 12rem);
    padding-right: clamp(0.1rem, 5.3vw, 18rem);



}

.img-gride-specials {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-auto-rows: 30%;
    /* عدد پیشنهادی */
    gap: clamp(0.1rem, 1.5vw, 12rem);
}

.container-img-special-6,
.container-img-special-3 {
    background-color: var(--color-bg-light);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.container-img-special-14 {
    grid-column: span 14;

}

.container-img-special-7 {
    grid-column: span 7;

}

.container-img-special-6 {
    grid-column: span 6;
}

.container-img-special-3 {
    grid-column: span 3;
}

.box-img-special {
    height: 80%;
    overflow: hidden;
}

.box-img-special img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.box-title-special {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.1rem, 1vw, 12rem);
    padding: clamp(0.1rem, 0.5vw, 12rem);
    background-color: var(--color-bg-light);
}

.title-text {
    flex: 1 1 auto;
    min-width: 0;
    /* خیلی مهم */
}

.title-text p {
    font-size: clamp(0.5rem, 1vw, 12rem);
    font-weight: 300;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* تک‌خط */
}


.location-special {
    background-color: var(--white-color);
    width: clamp(1%, 2vw, 100%);
    height: clamp(1%, 2vw, 100%);
    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;


}

.location-special i {
    font-size: clamp(0.5rem, 1vw, 12rem);
    font-weight: 100;
    padding-top: clamp(0.1rem, 0.5vw, 12rem);
}


/************************************/
/*** 	   10. detailes speciales page css		  ***/
/************************************/
.content-main-detailes {
    height: 100%;
}

.p-right {
    padding-right: clamp(0.1rem, 2.5vw, 12rem);
    height: inherit;
    width: 92.7%;
    overflow: hidden;
}

.form-width {
    /*aspect-ratio: 16/0.7;*/
    max-height: 5%;
    min-height: clamp(1px, 1.8vw, 800px)
}

.form-width-tab {
    /*aspect-ratio: 16/0.7;*/
    height: 96%;
    overflow: hidden;
}

.img-gride-specials-detailes {
    display: grid;
    grid-template-columns: repeat(15, 1fr);
    grid-auto-rows: 10%;
    gap: clamp(0.1rem, 1.5vw, 12rem);
}

.container-img-special-14,
.container-img-special-7 {
    background-color: var(--color-bg-light);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.container-img-special-14 {
    grid-column: span 14;

}

.container-img-special-7 {
    grid-column: span 7;

}

.layout-detailes-14 {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: clamp(0.1rem, 3vw, 12rem);
    height: 100%;
    overflow: hidden;
}

.item-detales-8 {
    grid-column: span 8;
    height: 100%;
    overflow: hidden;

    /*padding-left: var(--space-main);*/
}

.item-detales-6 {
    grid-column: span 6;
}

.box-title-detailes {
    height: 100%;
    background-color: var(--color-bg-light);
    padding-top: clamp(0.1rem, 1vw, 12rem);
    padding-bottom: clamp(0.1rem, 1vw, 12rem);
    padding-right: clamp(0.1rem, 1vw, 12rem);
    padding-left: clamp(0.1rem, 1vw, 12rem);
}

.box-title-detailes h3 {
    font-size: clamp(0.5rem, 1.5vw, 12rem);
    font-weight: bold;
}

.box-title-detailes span {
    font-size: clamp(0.5rem, 1.2vw, 12rem);
    font-weight: 300;
}

.box-title-detailes p {
    font-size: clamp(0.5rem, 1vw, 12rem);
    font-weight: 300;
    margin: 0;
}

/* قاب عکس */
.img-card-special {
    width: 100%;
    /* عرض ثابت */
    height: 100%;
    /* پر کنه کل ارتفاع ستون */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    overflow: hidden;
}

.img-card-special img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* عکس کراپ بشه */
    display: block;
}

.gride-box-detailes {
    /*aspect-ratio: 16/2;*/
    display: grid;
    grid-template-columns: repeat(14, 1fr);
    gap: 0;
    margin-top: clamp(0.5rem, 1.5vw, 12rem);
    margin-bottom: clamp(0.5rem, 1.5vw, 12rem);
    max-height: 10%;
    min-height: clamp(1px, 8vw, 800px);
}

.gride-img {
    grid-column: span 3;
    background-color: #c0a2a2;
}

.gride-text {
    grid-column: span 11;
    background-color: #c0a2a2;
}

.special-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 30%;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
}

.special-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.gatter-xy {
    --bs-gutter-y: clamp(0.1rem, 1vw, 12rem);
    --bs-gutter-x: clamp(0.1rem, 1vw, 12rem);
    padding-left: clamp(0.1rem, 0.6vw, 12rem);
    margin-top: clamp(0.1rem, 0.2vw, 12rem);
}

.space-between-employer {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: clamp(0.1rem, 1.5vw, 12rem);
}

.space-between-img {
    justify-content: space-around;
    padding-top: clamp(0.1rem, 1vw, 12em);
}

.space-between-img .col {
    width: clamp(90px,8vw,450px);;
}

/************************************/
/*** 	   11. list-projects page css		  ***/
/************************************/
.content-main-projects {
    /*margin-right: var(--space-main);*/
    /*margin-left: var(--space-main);*/
    padding-bottom: 10px;
}

.content-main-projects .padding-desktop {

    padding-right: 0;
    padding-left: calc(var(--space-main)/3.5);
    /*padding-bottom: calc(var(--space-main)/6);*/
    padding-top: calc(var(--space-main)/7);
    margin: 0;

}

.projects-list-container {

    padding-right: clamp(2rem, 2.1vw, 4rem);
}


.grid-32-layout {
    display: grid;
    grid-template-columns: repeat(32, 1fr);
    /* gap: 2px; */

}

.grid-32-layout {

    /*padding-left: calc(var(--space-main)*2);*/
    padding-left: 1.2rem;
    margin-bottom: clamp(1.5rem, 1vw, 3rem);
}

.grid-32-layout .item-32-col {
    grid-column: span 32;
}

.grid-32-layout .item-16-col {
    grid-column: span 16;
}

.grid-32-layout .item-8-col {
    grid-column: span 8;
}


.select2-container--default .select2-selection--single {
    /* border-color: var(--color-border-input); */
    border-radius: var(--bs-border-radius-pill) !important;
    --bs-bg-opacity: 1;
    background-color: var(--color-bg-light) !important;
    height: var(--height-input) !important;
    border: none !important;
    font-size: clamp(14px, 3vw, 14px) !important;
    text-align: right !important;
    color: var(--color-text) !important;

}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    all: unset;
    /*color: #444;*/
    /* line-height: 50%; */
    font-size: clamp(6px, 0.7vw, 30px);
}

.select2-container .select2-selection--single .select2-selection__rendered {
    display: block;
    padding-right: 8px;
    padding-left: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* حالت انتخاب شده یا هاور */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-bg-light);
    border: none;
    color: var(--color-text) !important;
}

/* وسط چین کردن گزینه‌ها */
.select2-container--default .select2-results__option {
    text-align: center !important;

}

/* ظاهر کلی dropdown */
.select2-container--default .select2-dropdown {
    font-size: clamp(9px, 0.7vw, 52px) !important;
    padding-top: 5px !important;
    background-color: var(--white-color);
    border: none;
    border-radius: 0;
    box-shadow:
        /* سایه راست */
        1px 0 1px rgba(0, 0, 0, 0.1),
        /* سایه پایین */
        0 1px 1px rgba(0, 0, 0, 0.1);

}

.select2-container--default .select2-dropdown::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: clamp(3px, 0.3vw, 30px);
    background-image: linear-gradient(to right, #d33636, #d33636);
    animation: borderFill 1s ease forwards;
    z-index: 1;
}

.select2-container--default .select2-results>.select2-results__options {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}


.select2-container--default .select2-selection--single .select2-selection__arrow b {
    opacity: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 3px !important;
    width: 30px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    left: 5px;
    background-image: url(../icons/chevron-down.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: var(--color-bg-light) !important;
}




.h-100 {
    width: 13.5%;
    aspect-ratio: 1.5 / 1;
    padding-left: 1.5%;
    padding-bottom: 1.5%;
}

.grid-36-layout {

    display: grid;
    /* grid-template-columns: repeat(36, 1fr); */
    /* gap: 2px; */
    /* width: 100%; */
    padding-left: 1.2rem;
    max-height:80%;

}

.item-33-col {
    grid-column: span 33;
}

.grid-40-layout {

    padding-left: 0;

}

.select2-container--default .select2-selection--single {
    display: flex;
    align-items: center;
    padding-top: 3px !important;
    justify-content: end;
}

/************************************/
/*** 	   12. contact-us page css		  ***/
/************************************/

.content-main-contact {
    padding-top: clamp(0.1rem, 0.7rem, 18rem);
    margin-left: clamp(0.1rem, 2.5vw, 18rem);
    margin-right: clamp(0.1rem, 4.5vw, 18rem);
    height: 100%;
    overflow: hidden;
}

.row-height {
    height: 100%;
}

.col-width-right {
    width: 49%;
    height: 96%;
    overflow: hidden;
}

.col-width-left {
    width: 51%;
    height: 96%;
}

.left-column {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.1rem, 1.5vw, 18rem);
    padding-right: clamp(0.1rem, 0.5vw, 18rem);
    padding-left: clamp(0.1rem, 1.5vw, 18rem);
}

.right-column {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(0.1rem, 1.5vw, 18rem);
    padding-left: clamp(0.1rem, 0.5vw, 18rem);
    max-height: clamp(1px, 18vw, 1000px);

    height: 100%;

}

.container-img-contact {
    background-color: var(--color-bg-light);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-bottom: clamp(0.1rem, 1.1vw, 12rem);
    min-height: clamp(1px, 16vw, 1000px);
}

.box-img-contact {
    height: 80%;
    overflow: hidden;
    /*max-height: clamp(1px, 8vw, 1000px);*/
}

.box-img-contact img {
    width: 100%;
    height: 100%;
    object-fit: cover;

}


.box-title-contact {

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(0.1rem, 1vw, 12rem);

    padding-top: clamp(0.1rem, 1vw, 12rem);
    padding-bottom: clamp(0.1rem, 0.5vw, 12rem);
    padding-left: clamp(0.1rem, 1vw, 12rem);
    padding-right: clamp(0.1rem, 1.5vw, 12rem);
    background-color: var(--color-bg-light);
}

.box-title-contact h4 {
    font-size: clamp(8px, 1vw, 50px);
    font-weight: 800;
    color: var(--color-text);
}

.title-text-contact {
    flex: 1 1 auto;
    min-width: 0;
    /* خیلی مهم */
}

.title-text-contact h4 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* تک‌خط */
}

.location-contact {
    font-size: clamp(8px, 0.8vw, 50px);
    font-weight: 100;
    background-color: var(--white-color);
    width: clamp(1px, 1.5vw, 100px);
    height: clamp(1px, 1.5vw, 100px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding-inline: clamp(0.1rem, 0.5vw, 12rem);
    padding-top: clamp(0.1rem, 0.3rem, 12rem);
    padding-bottom: clamp(0.1rem, 0.2rem, 12rem);
    flex-shrink: 0;
}

.location-contact i::before {
    vertical-align: middle !important;
}

.box-address-contact {
    font-size: clamp(8px, 0.8vw, 50px);
    font-weight: 200;
    color: var(--color-text);
    padding-left: clamp(0.1rem, 1.8vw, 12rem);
    padding-right: clamp(0.1rem, 1.5vw, 12rem);

}

/*.modal {*/
/*    height: 100%;*/
/*    margin-top: clamp(0.1rem, 7vw, 25rem);*/
/*}*/

/*.modal-content {*/
/*    height: 100%;*/
/*    padding-inline: clamp(0.1rem, 3.5vw, 18rem);*/

/*}*/

/*.modal-header {*/
/*    height: 10%;*/
/*    border-bottom: 2px Dotted #ccc;*/
/*    padding-top: clamp(0.1rem, 2.5vw, 18rem);*/
/*    padding-bottom: clamp(0.1rem, 2vw, 18rem);*/
/*}*/

/*.modal-dialog {*/
/*   height: 100%;*/
/*    max-height: 70%;*/
/*    margin-bottom: 0;*/
/*    margin-top: 0;*/
/*    max-width: 85%;*/
/*}*/

/*.invalid-feedback {*/
/*    font-size:clamp(8px,1vw,150px);*/
/*    font-weight:100;*/
/*    text-align: left;*/
/*}*/

/*.modal .breadcrumb-item+.breadcrumb-item::before {*/
/*    content: var(--bs-breadcrumb-divider, "|");*/
/*    padding-left: clamp(0.1rem, 0.3vw, 12rem);*/
/*}*/

/*.modal .breadcrumb-item {*/
/*    font-size: clamp(0.1rem, 1.5vw, 18rem);*/
/*    font-weight: 500;*/
/*    padding-left: clamp(0.1rem, 0.3vw, 12rem);*/
/*}*/

/*.modal .breadcrumb-item.active {*/
/*    font-weight: 900 !important;*/
/*}*/

/*.modal-body {*/
/*    height: 80%;*/
/*    padding-top: clamp(0.1rem, 1vw, 18rem);*/
/*}*/


/*.modal .btn-close {*/
/*    --bs-btn-close-bg: none;*/
/*    background-color: #dcd7d7 !important;*/
/*padding-bottom: clamp(0.1rem, 0.5vw, 12rem);*/
/*    opacity: 1;*/
/*}*/
/*.height-modal-row{*/
/*    height:80%;*/
/*}*/
/*.height-modal-grid{*/
/*    height:8%;*/
/*}*/
/*.modal label {*/
/*    font-size: clamp(0.1rem, 1vw, 12rem);*/
/*    font-weight: 100;*/
/*    color: var(--color-text);*/
/*}*/

/*.text-size {*/
/*    font-size: clamp(0.1rem, 0.9vw, 12rem);*/
/*    font-weight: 100;*/
/*    color: var(--color-text);*/
/*}*/

/*.modal .form-control {*/
/*    font-size: clamp(0.1rem, 1vw, 12rem);*/
/*    font-weight: 100;*/
/*    color: var(--color-text);*/
/*     height: clamp(1px, 2.5vw, 150px);*/
/*line-height: 2;*/
/*}*/
/*.input-modal{*/
/*    height:22%;*/
/*    max-height:fit-content;*/
/*    padding-bottom: clamp(3rem, 1vw, 12rem);*/
/*}*/
/*.padding-one {*/
/*    padding-left: clamp(0.1rem, 2vw, 12rem);*/
/*    height: 100%;*/
/*}*/

/*.padding-two {*/
/*    padding-right: clamp(0.1rem, 2vw, 12rem);*/
/*    height: 100%;*/
/*}*/
/*.padding-col-one{*/
/*    padding-top: 0;*/
/*    padding-bottom:0;*/
/*    padding-right: 0;*/
/*    padding-left: clamp(0.1rem, 0.5vw, 12rem);*/
/*}*/
/*.padding-col-two{*/
/*    padding-top: 0;*/
/*    padding-bottom:0;*/
/*    padding-left: 0;*/
/*    padding-right: clamp(0.1rem, 0.5vw, 12rem);*/
/*}*/




.modal {
    height: 100%;
    width: 100%;
    padding-left: 0px;
}

.modal-lg,
.modal-xl {
    --bs-modal-width: clamp(300px, 80vw, 5000px);
}

.modal .breadcrumb-item+.breadcrumb-item::before {
    content: var(--bs-breadcrumb-divider, "|");
    padding-left: clamp(1px, 0.3vw, 50px);
    padding-right: clamp(1px, 0.3vw, 50px);
}

.modal .breadcrumb-item a {
    font-weight: 500;
    font-size: clamp(14px, 1.3vw, 168px);
}

.modal .breadcrumb-item.active {
    font-size: clamp(14px, 1.3vw, 168px);
}

.modal-header {
    border-bottom: 2px Dotted #ccc;
}

.modal .btn-close {
    width: clamp(14px, 0.7vw, 50px) !important;
    height: clamp(14px, 0.7vw, 50px) !important;
    padding: clamp(2px, 0.8vw, 50px);
    display: flex;
    justify-content: center;
    align-items: center;
    --bs-btn-close-bg: none;
    background-color: #dcd7d7 !important;
    opacity: 1;
    margin-left: 0 !important;

}

.modal .btn-close i {
    font-size: clamp(14px, 1vw, 168px);
    padding-top: clamp(5px, 0.5vw, 50px);
}

.modal-dialog {
    /* min-height: 600px; */
    /* height: inherit; */
    height: 100%;
    /* max-height: 600px; */
    /*width: inherit;*/
    margin-top: 0;
    margin-bottom: 0;

}



.modal-content {
    /* min-height: 66%; */
    /* max-height: 800px; */
    /* min-width: 1000px; */
    height: max-content;
    max-height: max-content !important;
    padding: clamp(10px, 2.5vw, 168px);
}

.modal-header {
    padding-top: 0;
    padding-bottom: clamp(10px, 1vw, 100px);

}

.height-modal-row {
    --bs-gutter-x: 0;
    padding-top: clamp(2px, 1vw, 100px);
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
}

.padding-one {
    padding-right: 0;
    padding-bottom: clamp(14px, 1vw, 168px);
    padding-left: clamp(10px, 1.25vw, 168px);
}

.col-form-label {
    /*font-size: clamp(14px, 1vw, 48px);*/
    font-size: clamp(14px, 1vw, 168px);
}

.modal .form-control {
    padding: clamp(2px, 0.4vw, 12px);
    padding-inline: clamp(5px, 0.7vw, 168px);
    font-size: clamp(14px, 1vw, 168px);
    font-weight: 100;
}

.input-modal {
    padding-bottom: clamp(10px, 0.8vw, 100px);
}

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

.text-size {
    font-size: clamp(10px, 0.9vw, 168px);

}

.padding-two {
    padding-left: 0;
    padding-bottom: clamp(14px, 1vw, 168px);
    padding-right: clamp(10px, 1.25vw, 168px);
}

.explain-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.message-text {
    flex-shrink: 0;
}

.explain-container textarea {
    flex: 1;
}

.invalid-feedback {
    font-size: clamp(14px, 1vw, 50px);
    font-weight: 100;
    text-align: left;
}

.padding-col-one {
    padding-right: 0;
    padding-left: clamp(10px, 1vw, 168px);

}

.padding-col-two {
    padding-left: 0;
    padding-right: clamp(10px, 1vw, 168px);
}
















.button-upload {
    position: relative;
    display: inline-block;
    width: 100%;
}

.upload-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(0.1rem, 1vw, 12rem);
    /* فاصله بین label و preview */
}


.upload-label {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
    font-size: clamp(14px, 1vw, 168px);
    font-weight: 100;
    width: auto;
    min-width: 80px;
    /* قبلاً 180px بود */
    text-align: center;
    background: #b6b2b2;
    color: #050505;
    cursor: pointer;
    padding-inline: clamp(0.1rem, 1.5vw, 12rem);
    height: clamp(30px, 2.2vw, 120px);
    white-space: nowrap;
}



.upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.upload-preview {
    flex: 1;
    height: clamp(30px, 2.2vw, 120px);
    /* ارتفاع کادر */
    display: flex;
    /*font-size: clamp(0.1rem, 1vw, 12rem);*/
    font-weight: 100;
    color: var(--color-text);
    /* فعال کردن flex */
    justify-content: center;
    align-items: center;
    border: var(--bs-border-width) solid var(--bs-border-color);
    overflow: hidden;
    white-space: nowrap;
    /* جلوگیری از شکستن نام فایل */
    text-overflow: ellipsis;
    /* اضافه بودن متن با … نمایش داده شود */

    padding-inline: clamp(5px, 0.7vw, 20px);
    font-size: clamp(14px, 1vw, 48px);
}

.btn:hover {
    background-color: var(--color-bg-light);
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: var(--color-bg-light);
}

.submit-stor-form {
    font-size: clamp(8px, 1vw, 168px);
    !important;
    font-weight: 100 !important;
    color: var(--color-text) !important;
    height: 100% !important;
}



/************************************/
/*** 	   13. location projects page css		  ***/
/************************************/
#map {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;

}

.tag-label-map {
    border-radius: var(--bs-border-radius-pill);
    --bs-bg-opacity: 1;
    background-color: #fff;
    --bs-text-opacity: 1;
    color: black;
    padding-right: 0.3rem;
    padding-left: 0.3rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    border-radius: 3rem;
    margin-top: 1%;
    margin-right: 1%;
    font-family: var(--default-font);
}

.tag-label-map:hover {
    background-color: #908e8e80;
    /* رنگ هاور */
    color: #fff;

}

p {
    font-family: var(--default-font);
}

.dropdown-wrapper::after{
content: "\F285"; 
font-family: "bootstrap-icons";
 display: flex;
align-self: center;
font-size: clamp(6px, 0.7vw, 64px);
color: #848484;
position: absolute;
top: 52%;
left: clamp(6px, 0.7vw, 64px);
transform: translateY(-50%) rotate(90deg);

}
.projects-location-container {
 height:inherit;  
 width: clamp(20px, 3.8vw, 124px) ;
  margin-right: 0.3rem;
}
/************************************/
/*** 	   14. qualification page css		  ***/
/************************************/
.content-main-qualify {
    /*margin-right: var(--space-main);*/
    /*margin-left: var(--space-main);*/
    height: 100%;
}

.layout-gride-qualify {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 20px;
}

.item-qualfy-6 {
    grid-column: 6 span;
}

.item-qualfy-5 {
    grid-column: 5 span;
}

.item-qualfy-4 {
    grid-column: 5 span;
    padding-left: 8%;
}




.container-toggle-order {
    height: 85%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}


.qualification-filter-date {
    height: 40%;
    width: min-content;
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
    align-items: self-end;
}

.qualification-toggle-order {
    display: flex;
    flex-direction: column;
    height: 11%;
    align-items: center;
    width: min-content;
}

.qualification-toggle-order a {
    direction: ltr;
    font-size: clamp(8px, 0.8vw, 62px);
    font-weight: 200;
}

.qualification-line span {

    font-size: clamp(8px, 0.7vw, 52px);
    font-weight: bold;
}


.qualification-line {
    height: 4%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: end;
}

.order-icon {
    font-size: clamp(12px, 0.8vw, 62px);
    transform: rotate(180deg);
    font-weight: 100;
    color: #535353;
}




.accordion-item.qualification {
    /*border-bottom: 1px solid #393f45;*/
    /*border-top: 1px solid #393f45;*/
}

.qualification .accordion-button {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    padding-left: 0;
    padding-right: 0;
}

#accordionFlush {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 70vh;
}

#accordionFlush .accordion-item {
    /*border-top: solid 1px black;*/
    border-bottom: solid 1px #dee2e6;
}

/* حذف فلش آکاردئون */
#accordionFlush .accordion-button::after {
    display: none;
}

/* حذف پس‌زمینه و افکت هاور */
#accordionFlush .accordion-button {
    background-color: transparent;
    color: inherit;
    box-shadow: none;
}

/* متن bold هنگام باز بودن */
#accordionFlush .accordion-button:not(.collapsed) {
    font-weight: 500;
}

/* اطمینان از شفاف بودن هنگام باز بودن */
#accordionFlush .accordion-button:not(.collapsed):hover {
    background-color: transparent;
    box-shadow: none;
}

/* کانتینر اسکرول مرکز - ادغام شده */
.loh-scroll-center {
    overflow-y: auto;
    overflow-x: hidden;
    height: 75vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    position: relative;
    padding: 20px 0;
    /*width: 100%;*/
}

.loh-scroll-center::-webkit-scrollbar {
    display: none;
}

/* ایجاد فضای خالی در ابتدا و انتها برای اسکرول بهتر */
.loh-scroll-center::before,
.loh-scroll-center::after {
    content: '';
    display: block;
    height: 41%;
    flex-shrink: 0;
}

/* هر آیتم تصویر */
.loh-scroll-center .col {
    flex-shrink: 0;
    transition: all 0.3s ease;
    /*padding: 10px 0;*/
    /*width: 100%;*/
}

/* کانتینر تصویر */
.img-container {
    width: 100%;
    max-width: clamp(40px, 5vw, 320px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* خود تصویر */
.img-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* استایل برای تصویر فعال */
.img-hover {
    transform: scale(1.3);
    z-index: 10;
    position: relative;
}

/* کانتینر تصاویر بزرگ - ادغام شده */
.loh-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 75vh;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 3rem;
    position: relative;
    padding: 20px 0;
}

.loh-scroll::-webkit-scrollbar {
    display: none;
}

.loh-scroll .col {
    transition: all 0.3s ease;
}

/* کانتینر تک تصویر */
.image-container-loh {
    width: 100%;
    max-width: 600px;
    height: 70vh;
    margin: auto auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #fff;
    padding: 10px;
}

.image-container-loh img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
    box-shadow: 0px 0px 7px 0px grey;
}

/* --- استایل‌های CSS برای افکت overlap --- */

/* برای ستون‌های اصلی که اسکرول می‌شوند */
.loh-scroll-center .col {
    margin: 0 0;
    position: relative;
    /* برای اینکه z-index کار کند */
    transition: transform .35s ease, z-index .35s ease;
    /* انیمیشن نرم برای تغییر اندازه و لایه */
    cursor: pointer;
    /* نشان دادن اینکه قابل کلیک است */
}

/* استایل خود عکس‌ها درون div.col */
.img-container img {
    /* اگر از کلاس‌های متفاوتی برای عکس‌ها استفاده می‌کنید */
    width: 100%;
    height: auto;
    object-fit: cover;
    /* حفظ نسبت ابعاد و پر کردن فضا */
    transition: inherit;
    /* ارث‌بری انیمیشن از والد */
    display: block;
    /* جلوگیری از ایجاد فضای اضافی زیر عکس */
}

/* استایل برای آیتم فعال (وسط صفحه) */
.col.active {
    transform: scale(1.28);
    /* بزرگتر شدن */
    z-index: 20;
    /* بالاترین لایه */
}

/* استایل برای آیتم‌های نزدیک به آیتم فعال */
.col.near {
    transform: scale(1.10);
    /* کمی بزرگتر شدن */
    z-index: 10;
    /* لایه میانی */
}


/* استایل برای عکس فعال شده از طریق کلیک روی آکاردئون */
.col.img-hover {
    outline-offset: 3px;
    transform: scale(1.28);
    /* مطابق با active */
    z-index: 20;
    /* مطابق با active */
}



/************************************/
/***    15.board-of directors css/about-us      ***/
/************************************/
.content-main-board {
    margin-left: var(--space-main);
    margin-right: var(--space-main);
}

.layout-grade-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
    height: 74vh;

}

.layout-right {
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding-top: 35px;
    padding-left: var(--space-main);
    padding-bottom: 35px;
    /* background-color: #c0a2a2; */
    height: 74vh;
    overflow-y: auto;

}

.layout-left {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    /*padding-top: 35px;*/
    padding-left: var(--space-main);
    /*padding-bottom: 35px;*/
    height: 100%;
    /* background-color: #c0a2a2; */
}

.layout-left .tab-pane {
    display: none;
}

.layout-left .tab-pane.fade.position-relative.active.show {
    display: block;
}

.item-board {
    background-color: var(--color-bg-light);
    /*display: flex;*/
    /*flex: 1;*/
    min-height: 0;
    overflow: hidden;
    /*height: calc(33.333% - 14px);*/
}

.item-board .main-box {
    width: 100%;
    display: flex;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    height: 100%;
}

.item-board a {
    width: 100%;
    display: flex;
    text-decoration: none;
    color: inherit;
    min-width: 0;
    height: 100%;
}

/* عکس مربعی - قابل کوچک شدن */
.img-card-board {
    width: 30%;
    height: 100%;
    /*min-width: 100px;*/
    /* حداقل عرض */
    flex-shrink: 1;
    /* اجازه کوچک شدن میده */
    overflow: hidden;
    /*min-width:100px;*/
}



.img-card-board img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}

.box-detailes-board {
    flex: 1;
    padding: calc(var(--space-main)/4);
    background-color: var(--color-bg-light);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    height: 100%;
}

.box-detailes-board h5 {
    font-size: clamp(6px, 0.8vw, 62px);
    color: #333;
    font-weight: bold;
    line-height: 1.3;
}

.box-detailes-board p {
    font-weight: 200;
    font-size: clamp(6px, 0.8vw, 62px);
    line-height: 1.4;
    word-wrap: break-word;
}

.text-board {
    text-align: justify;
    font-weight: 200;
    font-size: clamp(14px, 1.05vw, 62px);
    margin-bottom: 0;
    --bs-text-opacity: 1;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity)) !important;
}

.text-board-titel {
    font-size: clamp(18px, 1.5vw, 82px);
    font-weight: 600;
}

/*.show-peykan {*/
/*    width: 0.6vw;*/
/*    height: 1.2vw;*/
/*    background-image: url(../image/img/wite-peykan.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 0;*/
/*    transform: translateY(-50%);*/
/*}*/

/*.show-peykan-black {*/
/*    width: 0.6vw;*/
/*    height: 1.2vw;*/
/*    background-image: url(../image/img/black-peykan2.svg);*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    position: absolute;*/
/*    top: 50%;*/
/*    left: 0;*/
/*    z-index:10;*/
/*transform: translateY(-50%);*/
/*}*/

.board .nav-link.active::after {
    content: "";
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}


/*لایهٔ سفید (روی لایهٔ تیره) - کمی کوچکتر و به سمت داخل تر */
.board .nav-link.active::after {

    border-top: 0.6vw solid transparent;
    border-bottom: 0.6vw solid transparent;
    border-left: 0.6vw solid #fff;
    z-index: 11;

}


.center-guide-board {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 100%;
    background-color: var(--color-text);
    pointer-events: none;
    /*z-index: 10;*/
}

/* مثلث روی خط */
.center-guide-board::before,
.center-guide-board::after {
    content: "";
    position: absolute;
    left: 0;
    transform: translateY(-50%);
}

.center-guide-board::before {
    top: var(--arrow-top, 50%);
    border-top: 0.6vw solid transparent;
    border-bottom: 0.6vw solid transparent;
    border-left: 0.6vw solid #353535;
    z-index: 1;
}

.center-guide-board::after {
    top: var(--arrow-top, 50%);
    border-top: 0.55vw solid transparent;
    border-bottom: 0.55vw solid transparent;
    border-left: 0.5vw solid #fff;
    z-index: 2;
}

.padding-left-board {
    padding-left: 0;
}

.blockquote-footer::before {
    content: "";
}

/************************************/
/*** 	   16. goals-and-visions page css		  ***/
/************************************/

.content-main-goal {
    height: 100%;
    /*padding-top: calc(var(--space-main)/2);*/
    /*margin-left: var(--space-main);*/
    /* padding-bottom:  calc(var(--space-main)/2); */
    /*margin-right: calc(var(--space-main)/2);*/

}

.layout-gride-goal {
    height: inherit;
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: 20px;
}

.item-goal-10 {
    grid-column: 10 span;
    padding-top: var(--space-main);
    /* padding-bottom: var(--space-main); */
    overflow-y: auto;
}

.item-goal-6 {
    grid-column: 6 span;
    /* background-color: #c0a2a2; */
    overflow-y: auto;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    height: inherit;
}


/* خط دقیقاً در راستای wrapper */
.timeline-wrapper {
    position: relative;
    height: inherit;
    display: flex;
}


.timeline {
    height: 55%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: center;
    z-index: 10;
}


/* خط عمودی اتوماتیک */
.timeline-line {
    position: absolute;
    right: clamp(4px, 0.4vw, 35px);
    ;
    width: clamp(0.5px, 0.09vw, 4px);
    background: #bfbfbf;
    z-index: 1;
}

/* آیتم‌ها */
.timeline-item {
    display: flex;
    z-index: 10;
}

/* دایره */
.timeline-item .dot {
    /* position: absolute; */
    /* right: 0; */
    /* top: 50%; */
    display: flex;
    align-self: end;
    transform: translateY(-50%);
    width: clamp(5px, 0.5vw, 25px);
    height: clamp(5px, 0.5vw, 25px);
    border-radius: 50%;
    border: 1px solid #474646;
    background: white;
    z-index: 3;
}

/* دایره فعال */
.timeline-item.active .dot {
    background: #000;
    border-color: #000;
}


/* متن */
.timeline-item a {
    font-size: clamp(8px, 0.94vw, 62px);
    font-weight: 200;
    margin-right: 25px;
    color: #000;
    text-decoration: none;
    display: inline-block;
}

.timeline-item.active a {
    font-weight: 600 !important
}

.text-goal p {
    text-align: justify;
    font-weight: 200;
    font-size: clamp(14px, 1.05vw, 62px);
    margin-bottom: 0;
    color: var(--color-text) !important;
}

.section-title {
    font-size: clamp(18px, 1.5vw, 82px);
    font-weight: 600;
    color: var(--color-text);
}

.dash-list {
    list-style-type: none;
    /* حذف شماره و نقطه پیش‌فرض */
    counter-reset: item;
    /* راه‌اندازی شمارنده */
    direction: rtl;
    padding-right: 0;
}

.dash-list li {
    counter-increment: item;
    /* افزایش شمارنده */
    position: relative;

}

.dash-list li::before {
    content: counter(item) " -";
    /* شماره + خط فاصله */
    padding-left: 5px;

}

ul.goals-list {
    list-style-type: disc;
}

/************************************/
/*** 	   17. profile page css		  ***/
/************************************/
.content-main-profile {
    margin-right: clamp(0.1rem, 6vw, 18rem);
    height: 100%;
    overflow: hidden;

}

.layout-profile {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    gap: clamp(0.1rem, 1vw, 12rem);
    height: 100%;
    overflow: hidden;
}

.gride-profile-right {
    grid-column: span 6;
    height: 100%;
    overflow: hidden;

}

.gride-profile-left {
    grid-column: span 10;
    height: 100%;
    overflow: hidden;
    padding-right: clamp(0.1rem, 6vw, 12rem);
}


.image-container-profile {
    width: 100%;
    max-width: fit-content;
    height: 95%;
    margin: auto auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: clamp(0.1rem, 2vw, 12rem);
    padding-bottom: clamp(0.1rem, 1.5vw, 12rem);


}

.image-container-profile img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;

}

.gride-profile-right h4 {
    font-size: clamp(1px, 1.5vw, 50px);
    font-weight: bold;
    padding-top: clamp(0.1rem, 1.5vw, 12rem);
    margin: 0;
    /*height: fit-content;*/
}

.font-size-p {
    font-size: clamp(12px, 0.9vw, 48px);
    font-weight: 300;
    color: #0f0e0e;
}

.font-size-p-title {
    font-size: clamp(1px, 1.5vw, 50px);
    font-weight: 100;
    padding-top: clamp(0.1rem, 0.5vw, 12rem);
    padding-bottom: clamp(0.1rem, 0.5vw, 12rem);
}

.title-span {
    flex: 3;
    text-align: justify;
    padding-top: clamp(0.1rem, 2vw, 12rem);
    padding-bottom: clamp(0.1rem, 2vw, 12rem);
    margin: 0;

}

.profile-title-main {
    height: clamp(1%, 5vw, 100%);
}

.profile-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    height: 85%;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.profile-scroll::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari */
}

.gride-acardeon {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    padding-top: clamp(0.1rem, 1vw, 12rem);
}

.gride-acardeon-right {
    grid-column: span 7;
    padding-left: clamp(0.1rem, 1vw, 12rem);
}

.gride-acardeon-left {
    grid-column: span 1;
    text-align: left;
}

.gride-acardeon-left a {
    margin-top: clamp(0.1rem, 1vw, 12rem);
}

.profile-scroll .accordion-item span {
    font-size: clamp(1px, 0.8vw, 50px);
    font-weight: 300;
    color: #0f0e0e;
}

/************************************/
/*** 	   18. detailes project page css		  ***/
/************************************/
.content-detailes-project {
    height: 100%;
    display: flex;
    overflow: hidden;
}

.layout-detailes-project {
    width: 97%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    padding-top: calc(var(--space-main)/1.5);
    gap: 20px;
    height: auto;
}

.gride-project-right {
    grid-column: span 4;
    height: 100%;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;

}

.gride-project-left {
    grid-column: span 8;
    padding-right: calc(var(--space-main)/2);
    padding-left: var(--space-main);
    height: 100%;
    display: flex;
    flex-direction: column;


}

.detailes-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    padding-right: 8%;
    direction: ltr;
}

.detailes-scroll p {
    direction: rtl;
}


.gride-project-right h2 {
    font-size: clamp(18px, 1.5vw, 58px);
    font-weight: bold;
    text-align: justify;
    flex-shrink: 0;
    padding-right: 8%;
}

.gride-project-right p {
    font-size: clamp(12px, 0.9vw, 48px);
    font-weight: 300;
    text-align: justify;
    line-height: 1.5rem;
}

.box-carosel {
    background-color: var(--color-bg-light);
    position: relative;
    height: 95%;
}

.box-tag {
    display: flex;
    justify-content: flex-end;
    height: auto;
}

.carousel {
    height: 100%;

}



.slider-btn-project {
    width: 20px;
    height: 20px;
    border: 1px solid white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 10px;
    padding: 4px;
    text-align: center;
    color: rgb(125, 124, 124);
    font-size: 0.8em;
    background-color: #fff;


}



.carousel-control-next,
.carousel-control-prev {
    width: 10%;
}

.carousel-indicators {
    /*top: 100%;*/
    padding-top: calc(var(--space-main)*0.8);
}

.carousel-indicators [data-bs-target] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: rgb(125, 124, 124);
    ;

}


:root {
    --box-height: 400px;
    --box-bg-color: #ebebeb;
    --transition-speed: 0.3s;
}

.slider {
    position: relative;
    width: 100%;
    height: var(--box-height);
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--box-bg-color);
}

.landscape {
    flex-direction: column;
    height: 600px;

}

.portrait {
    height: 600px;

}

.pro-image-item {
    display: none;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.pro-image-item.active {
    display: flex;
}

/* تصویر پایه */
.project-image {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    transition: all var(--transition-speed) ease;
    background-color: var(--box-bg-color);
}

.landscape .befor {
    /*height: 18%;*/
    width: 100% background-color: aliceblue;
}

.landscape .after {
    /*height: 18%;*/
    width: 100% background-color: aliceblue;
}


.portrait .befor {
    height: auto;
    width: 10%;
    background-color: aliceblue;
}

.portrait .after {
    height: auto;
    width: 10%;
    background-color: aliceblue;
}

.portrait .pro-image-item {
    background-image: none;
}

.portrait .pro-image-item img {
    display: block;

}

.slider-navigation {
    position: absolute;
    width: 95%;
    display: flex;
    justify-content: space-between;
}

.slider-navigation button {
    border-radius: 50%;
    height: clamp(20px, 1.5vw, 60px);
    width: clamp(20px, 1.5vw, 60px);
    border: 0px;
    background-color: #ffffff;
    display: flex;
    justify-content: center;


}

.slider-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1px;
    z-index: 10;
    background-color: white;
    padding-inline: clamp(2px, 0.3vw, 10px);
    border: 20%;
    border-radius: 50px;
    height: clamp(8px, 0.8vw, 15px);
    align-items: center;
    /* width: clamp(40px, 5vw, 90px); */
    justify-content: space-around;
}

.dot {
    width: clamp(3px, 0.3vw, 10px);
    height: clamp(3px, 0.3vw, 10px);
    background-color: #c1c1c1;
    border-radius: 50%;
    cursor: pointer;
    /*transition: all 0.3s ease;*/
    position: relative;
    display: inline-block;
    margin: 0 clamp(2px, 0.2vw, 10px);
}



.dot.active-dot {
    background-color: transparent;
    width: clamp(6px, 0.4vw, 15px);
    height: clamp(6px, 0.4vw, 15px);
    border: 1px solid #acacac;
    /* box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    margin: 0;

}

.dot.active-dot::before {
    content: '';
    display: block;
    width: clamp(2px, 0.2vw, 10px);
    height: clamp(2px, 0.2vw, 10px);
    background-color: #acacac;
    border-radius: 50%;
    position: absolute;
    z-index: -1;
}

/************************************/
/*** 	   19. history-company page css		  ***/
/************************************/

.filter-date-history {
    max-width: 100%;
    height: 100%;
    display: block;
}

.filter-date-history-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
    justify-content: center;
    position: absolute;
    right: -30%;

}

.filter-date .w-3 {
    margin-right: 2.1rem;
}

.filter-date-history .w-3 {
    /*margin-right: 2.1rem;*/
}

.filter-date-history hr {
    text-align: center;
    /*margin-right: 1.5rem;*/
    opacity: 1;
}

.filter-date-history span {
    /*padding-top: 10px;*/
    /*padding-left: 5px;*/
    /*padding-right: 10px;*/
    /*transform: translate(50%, -50%);*/
    /*right: 0;*/
    /*top: 0;*/
    /*position: absolute;*/
    /*color: var(--color-text) !important;*/
    font-size: clamp(8px, 0.7vw, 52px);
    font-weight: bold;
    /*line-height: 2;*/

}

.filter-date-history {
    /*margin-top: calc(var(--space-main)*2);*/

}

/* ردیف سال */
/* ردیف هر سال */
.filter-date-history .year {
    height: 18px;
    position: relative;
    display: flex;
    /* مهم */
    align-items: center;
    /* وسط‌چین عمودی */
}

/* خط سمت چپ */
.filter-date-history .year hr {
    margin: 0;
    padding: 0;
    border: none;
    border-top: 2px solid #000;
    display: block;
}

/* فقط عرض خط‌ها */
.w-3 {
    width: clamp(8px, 0.5vw, 32px) !important;
    color: #a8a7a7;
}

.w-4 {
    width: clamp(10px, 1.2vw, 62px) !important;
    color: var(--color-text);
    display: flex;
    order: 1;
    margin-right: 0.3rem;
}


.year-row {
    height: 1.8%;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: end;
}

/* فقط برای متن‌های طولانی */
.text-span {
    position: absolute;
    right: 0;
    width: 100%;
    font-size: clamp(8px, 0.94vw, 62px);
    line-height: 1.2;
    text-align: right;
    z-index: 1;
    padding: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 200;
}

.container-content-history {
    height: 100%;
}


.content-main-history {
    margin-left: var(--space-main);
    height: 100%;
    /**/
}

.layout-history-company {
    display: grid;
    grid-template-columns: repeat(12, 1fr);


}

.gride-history-right {
    grid-column: span 4;
    /* background-color: #c0a2a2; */
}

.gride-history-left {
    grid-column: span 8;

}



.box-content-history {
    padding-top: var(--space-main);
    padding-bottom: var(--space-main);
    padding-right: var(--space-main);
    padding-left: calc(var(--space-main));

}

.box-content-history h3 {
    font-size: clamp(18px, 1.5vw, 82px);
    font-weight: 600;
}

.box-content-history p {
    font-size: clamp(14px, 1.05vw, 62px);
    font-weight: 200;
    text-align: justify;
    /*line-height: 1.5rem;*/

}

.box-title-date {
    /* background-color: aquamarine; */
    /*margin-top: calc(var(--space-main)*3.3);*/
    height: 100%;

}

.box-title-date-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;

}

/************************************/
/*** 	   20.  org-char page css	  ***/
/************************************/
.content-main-org {
    margin-left: var(--space-main);
    width: 100%;
    height: 73vh;
    overflow: hidden;
    background-color: #f5f5f5;
}

.content-main-org img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media screen and (max-width:1800px) {
    .landscape {
        height: 400px;

    }

    .portrait {
        height: 400px;

    }
}


.org-chart-wrap {
    overflow: auto;
    height: 100%;
    position: relative;
     margin-left: clamp(0.1rem, 2vw, 18rem);
    margin-right: clamp(0.1rem, 1.5vw, 18rem);
}
.org-chart2 {
    display: grid;
    grid-template-columns: auto;
     position: relative;
    top: 0;
    right: 0;
    overflow: visible;  
    height: 100%; 
} 
.org-chart2 .ul {
    position: relative;
    margin: 0;
    height: 100%;
}
.horizantal{
   display: flex;
    flex-direction: row;
    padding-left: clamp(12.5px, 0.625vw, 33.33px);
} 
.vertical{
   display: flex;
    flex-direction: column;
    gap:clamp(15px,1vw,70px); /* 1/4 node_width*/
}
.org-chart2 .li {
       position: relative;
    display: flex;
    align-items: center;
    list-style-type: none; 
 
}
.container-node {
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-row: 2 / 3;
}

.container-node .line-connect{
    border: 0;
    min-width: clamp(15px, 1vw, 70px);/* 1/4 node_width*/  
    width: stretch;
    border-top: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
}
.container-node .line-connect-right{
    border: 0;
    min-width: clamp(15px, 1vw, 70px); /* 1/4 node_width*/  
    /*width: stretch;*/
    border-top: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
}
.line-connect-vertical{
    border: 0;
    height: stretch;
    border-right: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
    padding-left: clamp(15px, 1vw, 70px); /* 1/4 node_width*/ 
}  
.line-connect.no-line {
    display: none;
}
.line-connect-right.no-line {
    display: none;
}
.node{
    border: none;
    display: flex;
    background: #f0f0f0;
    position: relative;
    height:clamp(39px, 2.8vw,178px);    /* 5/5 node_width_member*/  
}
.node_width_member{
       min-width: clamp(216px, 15.5vw, 980px);/* node-width*3+line-connect*2 */
       width: clamp(216px, 15.5vw, 980px);
}
.node_width{
     min-width: clamp(61px, 4.5vw, 280px);
     width: clamp(61px, 4.5vw, 280px);
}

.border_right_node{
    border-right:clamp(5px, 0.4vw, 25px) solid black; /* 1/11 node_width*/
}
.not_border_right_node{
    border-right:none;
}
.node-image {
    height: inherit;
}
.node-image img {
    width: inherit;
    height: inherit;
    object-fit: cover;
    display: block;
}
.node-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding:clamp(6px,0.4vw,44px); 
}
.node-content h3 {
    font-size: clamp(8px, 0.7vw, 100px);
    font-weight: bold;
}
.node-content p {
    font-size: clamp(8px, 0.7vw, 100px);
    font-weight: 100;
    line-height:1;
}
.node-content h3,
.node-content p {
    margin: 0;
}
.children-container {
    position: relative;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
} 
.children-container .top-child .vertical{
    flex-direction: column-reverse;
}

.horizantal::before {
    content: '';
    position: absolute;
     right: 0;
    border-right: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
    height: stretch; 
}
.vertical::before {
    content: '';
    position: absolute;
    right: 0;
    border-right: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
    height: stretch; 
}
.vertical.hide-line::before {
    display: none !important;
} 
.horizantal.hide-line::before {  
    display: none !important;
} 
.top-child {
    grid-row: 1 / 2;
    align-self: end;
}
.bottom-child {
    grid-row: 3 / 4;
    align-self: start;
}
.main-child .vertical::before {
     top: var(--line-top, clamp(19.5px, 1.4vw, 89px));
    bottom: var(--line-bottom, clamp(19.5px, 1.4vw, 89px));
}
.top-child .vertical::before {
    top: var(--line-top, clamp(19.5px, 1.4vw, 89px));
    bottom: 0;
}

.bottom-child .vertical::before {
    top:0;
    bottom: var(--line-bottom, clamp(19.5px, 1.4vw, 89px)); 
}

.top-child .horizantal::before {
    top: var(--line-top, clamp(19.5px, 1.4vw, 89px));
    bottom:0;
}
.bottom-child .horizantal::before {
    top:0;
    bottom:var(--line-bottom, clamp(19.5px, 1.4vw, 89px));
}  

.padding-child-top:first-child{
    padding-bottom: clamp(15px, 1vw, 70px);
}

.padding-child-bottom:first-child{
    padding-top: clamp(15px, 1vw, 70px);
}

.horizantal-padding{
    padding-right: clamp(19.5px, 1.4vw, 89px);
    padding-left: clamp(19.5px, 1.4vw, 89px);
}
.horizantal-padding-no-image{
   padding-right: clamp(30.5px, 2.25vw, 140px);
    /*padding-left: clamp(30.5px, 2.25vw, 140px);*/
}
.vertical-padding{
    padding-right: clamp(34.5px, 2.4vw, 159px);
    /*padding-left: clamp(34.5px, 2.4vw, 159px);*/
}
.vertical-padding-no-image{
    padding-right:clamp(39px, 2.4vw, 178px);/* 2* horizantal-padding*/
}

.ul.horizantal .li:last-child {
    flex-direction: row !important; 
}
.main-child-one{
    padding-bottom: clamp(12.5px, 0.625vw, 33.33px);
}
.main-child-one > .ul > .li > .children-container > .container-node > .line-connect-right {
    display: none !important;
}

/************************************/
/*** 	   21. responsive page css	mobile	  ***/
/************************************/


@media screen and (max-width:767px) {
    :root {
        --img-size-base: 35px;
        --color-text: #0f0e0e;
        --color-menu: #c4c3c3;
        --a: 4vw;

    }

    * {
        box-sizing: border-box;

        max-width: 100vw;
    }

    .container-main,
    .main-content,
    header,
    footer {
        width: 100%;
        box-sizing: border-box;
        overflow-x: clip;
    }

    .hidden-responsive {
        display: none;
    }

    .container-main {
        overflow: hidden;
    }


    /*menu*/
    .container-logo {
        display: none;
    }

    /* Header Styles */
    .site-header {
        all: unset;
        position: relative;
        z-index: 1000;
        color: var(--black-color);
        /*padding: 10px 15px;*/
    }

    /* Mobile Header */

    .mobile-header-top {
        display: block;
    }

    .mobile-header-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding-bottom: clamp(15px, 2.5vw, 20px);
    }

    .mobile-header-container .container-logo {
        height: clamp(25px, 4vw, 40px);
        display: block;
    }

    .mobile-header-container .container-logo img {
        all: unset;
        height: 100%;
    }

    .text-menu {
        display: flex;
        justify-content: space-between;
        gap: 5px;
        padding-bottom: 15px;
    }

    .text-menu>hr {
        /*height: 1px;*/
        border: block;
        color: var(--text-black);
        width: stretch;
        align-self: center;
        opacity: 0.3;
    }

    .text-menu>p {
        color: var(--text-black);
        font-size: clamp(14px, 1.3vw, 58px);
        font-weight: 900;
    }

    .px-3 {
        height: 20px;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }


    nav .breadcrumb {
        display: ruby-text;
    }

    .header-left-mobile,
    .header-right-mobile {
        display: flex;
        align-items: center;
        gap: 15px;
        /* فاصله بین آیکون‌ها */
    }

    .header-right-mobile .container-language {
        color: var(--white-color);
        border: 1px solid #8080803d;
    }

    .header-left-mobile>.container-language>p {
        color: var(--white-color);
    }



    .container-language {
        /*width: clamp(15px, 7vw, 34px);*/
        /*height: clamp(15px, 7vw, 34px);*/
        width: clamp(25px, 2.3vw, 120px);
        height: clamp(25px, 2.3vw, 120px);
        border-radius: 50%;
        border: 1px solid #8080803d;
        /*background-color: var(--white-color);*/
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: var(--black-color);
        font-size: 10px;
        cursor: pointer;
    }

    .header-left-mobile>.container-language {
        border: 1px solid #ffffffb0;
    }

    .container-language p {
        margin: 1px 0;
        line-height: 1.1;
    }

    .farsi {
        font-weight: 900;
        font-size: clamp(7px, 0.7vw, 42px);
    }

    .english {
        font-size: clamp(7px, 0.6vw, 32px);
    }

    .container-logo {
        /*height: 35px;*/
        width: auto;
    }

    .logo-mobile {
        height: 100%;
        width: auto;
    }

    .hamburger-menu {
        background: none;
        border: none;
        color: var(--black-color);
        font-size: clamp(10px, 5vw, 24px);
        cursor: pointer;
        /*padding: 5px;*/
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }



    /* Navigation Menu (Mobile) */
    .container-menu {
        display: none;
        position: fixed;
        right: -100%;
        top: 0;
        width: 100%;
        /*max-width: 350px;*/
        height: 100vh;
        background-color: var(--white-color);
        color: var(--white-color);
        flex-direction: column;
        transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        padding: 20px;
        overflow-y: auto;
        box-shadow: -4px 0 10px rgba(0, 0, 0, 0.2);
        margin-right: 0rem;

    }

    .container-menu.active {
        display: flex;
        right: 0;
    }

    .menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        /*margin-bottom: 25px;*/
        /*padding-bottom: 15px;*/
        border-bottom: 1px solid var(--secondary-color);
        padding-bottom: clamp(10px, 2vw, 16px);

    }

    .logo-mobile-nav {
        height: clamp(25px, 4vw, 40px);
    }

    .logo-mobile-nav img {
        height: 100%;

    }

    .close-menu-btn {
        background: none;
        border: none;
        color: var(--white-color);
        /*font-size: 30px; */
        cursor: pointer;
        /*padding: 5px;*/
        line-height: 1;
        width: clamp(15px, 7vw, 30px);
        height: clamp(15px, 7vw, 30px);
        border-radius: 50%;
        background-color: #424040;
        display: flex;
        /* justify-content: center; */
        align-items: center;
    }

    .menu {
        all: unset;
        display: flex;
        flex-direction: column;
        gap: 15px;
        flex-grow: 1;
    }

    /*.menu li{*/
    /*    all:unset;*/
    /*}*/

    /*.menu li a:focus,*/
    /*.menu li a:active {*/
    /*    color: #000 !important;*/
    /*}*/

    .submenu li a:focus {
        color: #000000d6 !important;
    }

    .menu>li>a {
        /*all:unset;*/
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 4px 0px;
        font-size: clamp(16px, 5vw, 27px);
        font-weight: 800;
        position: relative;
        color: var(--text-gray);
        /*padding-bottom: 8px;*/
    }

    .menu>li>a:hover {
        color: var(--text-black);
    }

    .menu-footer {
        display: flex;
        height: clamp(20px, 5vw, 40px);
        width: 55%;
        margin: auto;
        justify-content: space-between;
        /*margin-bottom: var(--body-padding);*/
        margin-bottom: calc(var(--body-padding) + 1rem);
    }

    .menu-footer a img {
        height: 100%;
    }

    .menu li.has-submenu {
        all: unset;
    }

    .menu li.has-submenu:hover>.submenu {
        display: flex;
    }

    .submenu li {
        all: unset;
        justify-content: right;

    }

    .submenu li a {
        /*all:unset;*/
        /*padding: 10px 0; */
        font-size: 15px;
        color: var(--text-black);
        font-weight: 300;
        opacity: 0.8;
    }

    .submenu li:hover {
        all: unset;
    }

    .submenu li a:hover {
        all: unset;
    }

    /* Submenu Styles (Mobile with Animation) */
    .submenu {
        all: unset;
        display: none;
        display: flex;
        flex-direction: column;
        list-style: none;
        /*padding-right: 20px; */
        /*margin-top: 10px;*/
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        /*transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease; */
    }

    .submenu::before {
        display: none;
    }

    .line-vr-hover {
        display: none;
    }

    .line-vr {
        display: none;
    }

    Arrow Icon for Submenus .has-submenu>a::after {
        font-family: 'bootstrap-icons';
        font-weight: normal;
        font-size: 14px;
        margin-left: 10px;
        transition: transform 0.3s ease;
        line-height: 1;
        color: var(--text-gray);
    }


    .has-submenu.open>a {
        padding-bottom: 8px;
    }

    /* Logic for opening submenus */
    .has-submenu.open>.submenu {
        max-height: 500px;
        opacity: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    /* Media Queries */
    /* Mobile Styles are default */
    .desktop-header-container {
        display: none;
    }

    .list-icon-svg {
        display: inline-block;
        width: 7px;
        height: 7px;
        margin-left: 8px;
        background-image: url(../image/img/flsh.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        /* mask-image: url('path/to/your-icon.svg'); */
        /* mask-repeat: no-repeat; */
        /* mask-size: contain; */
        /* mask-position: center; */
        /* background-color: #007BFF; */
    }

    /* end-menu*/


    /* employer */
    .content-main {
        margin-inline: clamp(0.5rem, 5vw, 12rem);
    }

    .height-row {
        height: 5%;
    }

    .height-col {
        height: 3%;
    }

    .search-cancel-icon {
        font-size: clamp(17px, 3.2vw, 168px);
    }

    .input-group-text {
        padding-left: clamp(5px, 0.5vw, 50px);
    }

    .input-group-text i {
        font-size: clamp(10px, 1.5vw, 168px);
        padding-top: clamp(3px, 0.4vw, 168px);
        padding-left: clamp(3px, 0.4vw, 16px);   
        }

    /*#search {*/
    /*    font-size: clamp(3px, 2.5vw, 50px);*/
    /*    font-weight: 100;*/
    /*    padding-inline: clamp(3px, 3vw, 100px);*/
    /*}*/

    /*.input-group-text i {*/
    /*    font-size: clamp(3px, 2.5vw, 50px);*/
    /*    padding-inline: clamp(1px, 1.8vw, 100px);*/
    /*}*/

    #scrollDiv {
        margin-top: clamp(3px, 4vw, 50px);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    #mobile-tabs-container {
        height: 99%;
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: clamp(3px, 4vw, 50px);
        padding-bottom: clamp(10px, 3vw, 50px);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .img-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(70px, 1fr));
        gap: clamp(5px, 5vw, 100px);
        overflow-x: hidden;
        /* مانع بیرون زدن */
    }

    .logo-row {
        margin-bottom: clamp(5px, 5vw, 100px);
    }

    .img-width {
        width: clamp(5px, 9vw, 300px);
        height: clamp(5px, 9vw, 300px);
    }

    .margin-responsive {
        margin-top: 5px;
    }

    .space-main-form {
        padding-left: 0;
    }

    .box-title-logo {
        width: 100%;
        padding-top: clamp(1px, 2vw, 50px);
        padding-bottom: clamp(1px, 2vw, 50px);

    }

    .box-title-logo h3 {
        font-size: clamp(5px, 3vw, 50px);
        font-weight: bold;
        margin: 0;
        text-align: center;
    }

    .logo-details {
        height: 100%;
        margin-top: clamp(15px, 4vw, 24px);
    }

    .img-grid-detailes {
        gap: clamp(0.1rem, 3vw, 8rem);
        padding-inline: clamp(0.1rem, 10vw, 12rem);
    }

    /*.tag-label {*/
    /*    font-size: clamp(1px, 1.5vw, 50px);*/
    /*    padding: clamp(1px, 0.5vw, 300px) clamp(0.1px, 1.5vw, 300px);*/
    /*}*/
    .tag-label {
        font-size: clamp(8px, 1.2vw, 58px);
        padding: clamp(1px, 0.5vw, 300px) clamp(0.1px, 1.5vw, 300px);
    }

    .hover-black {
        background-color: #000;

    }

    .hover-black img {
        filter: brightness(0) invert(1);
    }

    .hover-black:hover img {
        filter: brightness(0) invert(1);
    }


    .logo-row {
        position: relative;

    }

    .box-title-logo {
        border-top: 2px solid #000;
    }

    .card-overlay {
        aspect-ratio: 1/1.4;
    }

    .accordion-flush>.accordion-item:first-child {
        border-top: 1px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
    }

    .accordion-flush>.accordion-item {
        border-top: 0px solid #dee2e6;
        border-bottom: 0px solid #dee2e6;
    }

    .accordion-flush>.accordion-item:last-child {
        border-top: 0px solid #dee2e6;
        border-bottom: 1px solid #dee2e6;
    }

    .accordion-item.project {
        border-bottom: 1px solid #dee2e6;
        font-weight: 200;
    }

    .padding-next-height {
        padding-left: clamp(8px, 4.2vw, 50px);
    }

    .content-main form {
        margin-left: clamp(5px, 0.9vw, 50px);
        margin-right: clamp(24px, 5vw, 50px);
    }

    /* special*/

    .item-scroll-special {
        height: 95%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .content-main-specials {
        margin-left: 0;
        padding-top: clamp(0.1rem, 0.5vw, 12rem);
        padding-bottom: clamp(0.1rem, 0.5vw, 12rem);
        padding-inline: clamp(0.1rem, 5vw, 12rem);
    }

    .img-gride-specials {
        grid-template-columns: repeat(14, 1fr);
        padding-inline: 2rem;
        gap: clamp(5px, 5vw, 200px);
        grid-auto-rows: 25%;
    }

    .img-gride-specials {
        grid-template-columns: repeat(14, 1fr);
        padding-inline: 2rem;
        gap: clamp(5px, 5vw, 200px);
        grid-auto-rows: 25%;
    }

    .img-gride-specials-detailes {
        gap: clamp(5px, 5vw, 200px);
    }

    .item-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }


    .container-img-special-6 {
        grid-column: span 14;
    }

    .container-img-special-3 {
        grid-column: span 7;
    }

    .box-title-special {
        padding-inline: clamp(1px, 2vw, 100px);
        padding-top: clamp(1px, 2vw, 100px);
        padding-bottom: clamp(1px, 2vw, 100px);
    }

    .title-text p {
        font-size: clamp(1px, 3vw, 50px);
        font-weight: 300;
        /* تک‌خط */
    }


    .location-special {
        background-color: var(--white-color);
        width: clamp(1%, 4vw, 100%);
        height: clamp(1%, 4vw, 100%);


    }

    .location-special i {
        font-size: clamp(1px, 3vw, 50px);
        font-weight: 100;
        padding-top: clamp(0.1rem, 1.5vw, 12rem);
    }

    .content-main-specials .padding-desktop {
        padding: 0;

    }

    .item-scroll {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .p-right {
        width: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .form-width {
        max-height: 9%;
        min-height: clamp(1px, 4.5vw, 800px);
    }

    .box-title-detailes h3 {
        margin: 0;
        padding-top: clamp(0.1rem, 0.5vw, 8rem);
        font-size: clamp(1px, 4vw, 100px);
    }

    .box-title-detailes span {
        display: block;
        font-size: clamp(1px, 3vw, 100px);
    }

    .gride-box-detailes {
        min-height: clamp(1px, 12vw, 800px);
    }

    .special-scroll-accordion {
        height: auto;
        /*padding-top: clamp(1px, 1vw, 100px);*/
        padding-bottom: clamp(1px, 1vw, 100px);
    }

    .space-between-img .col {
        width: 70%;
    }

    .item-detales-8 {
        overflow: visible;
    }

    .h-100 {
        width: 30%;
        aspect-ratio: 1.5 / 1;
        padding-left: 1.5%;
        padding-bottom: 1.5%;

    }

    .grid-32-layout {

        padding-left: 0;

    }

    .item-33-col {
        grid-column: span 36;
    }

    .content-main-projects {
        padding-bottom: 0;

    }

    .content-main-projects .padding-desktop {

        padding-right: 0;
        padding-left: calc(var(--space-main)/6);
        padding-bottom: calc(var(--space-main)/6);
        padding-top: calc(var(--space-main)/6);
        margin: 0;
    }

    .projects-list-container {

        padding-right: 0;
    }


    /* contact-ue */
    .content-main-contact {
        overflow-y: auto;
        overflow-x: hidden;
        height: 95%;
        margin-inline: clamp(1px, 5vw, 200px);
        padding-top: 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .row-height {
        height: auto;
    }

    .col-margin {
        margin-bottom: clamp(1px, 5vw, 200px);
    }


    .left-column {
        /*grid-auto-rows: 25vh;*/
        /* 25% از ارتفاع صفحه */
        gap: clamp(1px, 5vw, 150px);
        padding-left: 0;
    }

    .right-column {
        /*grid-auto-rows: 25vh;*/
        /* 25% از ارتفاع صفحه */
        gap: clamp(1px, 5vw, 150px);
        padding-left: 0;
        max-height: fit-content;

    }

    .container-img-contact {
        max-height: clamp(1px, 100vw, 1000px);
        padding-bottom: clamp(0.1rem, 1.8vw, 12rem);
    }

    .col-width-right {
        width: 100%;
        height: 100%;
    }

    .col-width-left {
        width: 100%;
        height: 100%;
    }

    .box-img-contact {
        height: 60%;
        max-height: clamp(1px, 20vw, 1000px);
    }


    .box-title-contact {
        gap: clamp(0.1rem, 1.5vw, 12rem);
        padding-top: clamp(0.1rem, 2vw, 12rem);
        padding-left: clamp(0.1rem, 1.5vw, 12rem);
        padding-right: clamp(0.1rem, 2vw, 12rem);
        padding-bottom: clamp(0.1rem, 2.5vw, 12rem);
    }

    .box-title-contact h4 {
        font-size: clamp(1px, 2.5vw, 50px);
    }

    .location-contact {
        font-size: clamp(1px, 1.5vw, 50px);
        width: clamp(1px, 3vw, 100px);
        height: clamp(1px, 3vw, 100px);
    }

    .box-address-contact {
        font-size: clamp(1px, 2vw, 50px);
        padding-left: clamp(0.1rem, 2.8vw, 12rem);
        padding-right: clamp(0.1rem, 2.2vw, 12rem);
    }

    /*.modal {*/
    /*    height: 100%;*/
    /*    margin-top: clamp(8px, 10vw, 400px);*/
    /*}*/
    /*.modal-dialog {*/
    /*    max-height: 82%;*/
    /*    max-width: 75%;*/
    /*}*/
    /*.padding-one{*/
    /*    padding-inline:clamp(5px, 1vw, 150px);*/
    /*    height:60%;*/
    /*}*/
    /*.padding-two {*/
    /*      padding-inline:clamp(5px, 1vw, 150px);*/
    /*       padding-top:clamp(0.1rem, 1.5vw, 12rem);*/
    /*    height:40%;*/
    /*}*/
    /*.modal-content {*/
    /*    padding-inline: clamp(8px, 5vw, 150px);*/
    /*    padding-bottom:clamp(0.1rem, 4vw, 12rem);*/
    /*}*/
    /*.modal .form-control {*/
    /*    font-size: clamp(8px, 1.5vw, 150px);*/
    /*    height: clamp(8px, 4.5vw, 150px);*/
    /*}*/
    /*.height-modal-row{*/
    /*    height:90%;*/
    /*}*/
    /*.height-modal-grid{*/
    /*     padding-top:clamp(0.1rem, 0.9vw, 12rem);*/
    /*     margin-top:clamp(0.1rem, 4vw, 12rem);*/
    /*    height:8%;*/
    /*}*/
    /*.input-modal-height .col-12{*/
    /*    height:50%;*/
    /*}*/
    /*.modal .message-text{*/
    /*     padding-top:clamp(0.1rem, 4vw, 12rem);*/
    /*}*/
    /*.submit-stor-form {*/
    /*    height:80% !important;*/
    /*}*/
    /*.input-modal{*/
    /*    padding-bottom:0;*/
    /*    height:20%;*/
    /*}*/
    /*.input-modal-height{*/
    /*    height:40%;*/
    /*}*/



    .modal-dialog {
        var(--bs-modal-width): clamp(300px, 80vw, 1200px);
    }


    .upload-label {
        font-size: clamp(8px, 1.5vw, 150px);
        min-width: 50px;
        height: clamp(20px, 4vw, 168px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    .upload-preview {
        font-size: clamp(8px, 1.5vw, 150px);
        height: clamp(20px, 4vw, 168px);
    }

    .modal label {
        font-size: clamp(8px, 1.5vw, 150px);
        padding-bottom: 0;
        /*padding-top:clamp(0.1rem, 2vw, 12rem);*/
    }

    .modal .input-modal-height label {
        padding-top: clamp(0.1rem, 1.5vw, 12rem);
    }

    .text-size {
        font-size: clamp(8px, 1vw, 150px);
        padding-bottom: clamp(0.1rem, 0.9vw, 12rem);
        ;
    }

    .modal-content {
        padding: clamp(10px, 4vw, 168px);
        padding-top: clamp(10px, 2vw, 168px);
        height: 95%;
        overflow: auto;
        margin-top: clamp(1px, 1vw, 50px);
        margin-bottom: clamp(1px, 1vw, 50px);
    }

    .padding-one {
        padding-left: 0;
        padding-bottom: clamp(8px, 1vw, 168px);
    }

    .col-form-label {
        padding-top: 0;
    }

    .input-modal-height {
        padding-bottom: 0;
    }

    .padding-col-one {
        padding-left: 0;
        padding-bottom: clamp(8px, 1vw, 50px);
    }

    .padding-col-two {
        padding-right: 0;
    }

    .padding-bottom-upload {
        padding-bottom: 0;
    }

    .form-label {
        padding-top: 0;
    }

    .padding-two {
        padding-right: 0;
    }

    .message-text {
        padding-bottom: 0;
    }

    #message_text {
        min-height: 200px;
    }

    .invalid-feedback {
        font-size: clamp(10px, 1vw, 50px);
    }

    .modal .form-control {
        font-size: clamp(10px, 1vw, 50px);
    }

    .modal .btn-close {
        margin-left: clamp(5px, 1vw, 50px);
    }

    /* end contact-us */

    .page-layout-gride {
        max-width: 600px;
        gap: 0.8rem;
        padding-left: 0px;
    }

    .container-main-link {
        flex: 0 0 calc(50% - 0.8rem);
        /* دو ستون */
        min-width: 100px;
        /* عرض کمی بیشتر برای موبایل */
    }

    .container-main-link a {
        font-size: clamp(12px, 3vw, 14px);
        padding: 0.4rem 1rem;
    }

    /*qualification*/

    .layout-gride-qualify {
        gap: 0px;
    }

    .item-qualfy-6 {
        grid-column: 16 span;
        display: flex;
        justify-content: center;

    }

    .item-qualfy-5 {
        grid-column: 16 span;

    }

    .item-qualfy-4 {
        grid-column: 16 span;
        padding-left: 0px;
    }

    /* نسخه افقی برای موبایل */
    .qualifications-scroll {
        padding-bottom: 3rem !important;
    }

    .qualifications-scroll-child {
        overflow-y: auto;
    }


    .loh-scroll {
        /* height: 270px; */
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        /*width: fit-content;*/
        height: 290px;
        padding: 0;
        max-width: 70%;
    }



    .loh-scroll .col {
        flex-shrink: 0;
        min-width: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: start;
        height: 100%;
        max-width: 100%;

    }

    .loh-scroll-center {
        flex-direction: row;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0px;
        height: 200px;
        box-sizing: border-box;
        gap: 15px;
        margin-inline: 10%;
        margin-top: 5px;
        margin-bottom: 5px;

    }

    .loh-scroll-center .col {

        width: calc(20% - 12px);
        box-sizing: border-box;
        flex: 0 0 auto;
    }

    .img-container {
        all: unset;
        /*width: 100%;*/
        /*max-width: 80px;*/
        /*display: flex;*/
        /*align-items: center;*/
        /*justify-content: center;*/
        /*margin: 0 auto;*/
        /*position: relative;*/
        /*transition: transform 0.3s ease, filter 0.3s ease;*/
    }


    .img-container img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }



    #accordionFlush {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* تغییر از center به flex-start */
        min-height: auto;
        /* حذف min-height ثابت */
        height: auto;
        max-height: 50vh;
        /* حداکثر ارتفاع */
        overflow-y: auto;

    }

    .image-container-loh {
        width: auto;
        object-fit: cover;
        max-width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        scroll-snap-align: start;
        height: 100%;
    }

    .item-scroll-quality {
        overflow-y: auto;
        overflow-x: hidden;
        height: auto;
        /* ارتفاع خودکار */
        scrollbar-width: none;
        /* Firefox */
        /*-ms-overflow-style: none;*/
        max-height: 195px;
        margin-inline: 8%;
    }


    .accordion-item span {
        font-size: clamp(8px, 1.2vw, 58px);
    }

    /* flex quaity*/
    /*.layout-gride-qualify{*/
    /*display: flex;*/
    /*flex-direction: column;*/
    /*height: 100%;*/
    /*justify-content: space-evenly;*/
    /*}*/

    /*.item-scroll-quality {*/
    /*    overflow-y: auto;*/
    /*    overflow-x: hidden;*/
    /* height: auto; */
    /*    scrollbar-width: none;*/
    /*    -ms-overflow-style: none;*/
    /*    margin-inline: 8%;*/
    /*    max-height: 26%;*/
    /* display: flex; */
    /*    justify-content: center;*/
    /*    order: 1;*/
    /*}*/

    /*.item-qualfy-4 {*/
    /*    grid-column: 16 span;*/
    /*    padding-left: 0px;*/
    /*    height: stretch;*/
    /*    max-height: 20%;*/
    /* margin-top: 2%; */
    /* margin-bottom: 2%; */
    /*}*/

    /*    .loh-scroll-center {*/
    /*     margin-inline: 10%;*/
    /*     height: 100%;*/
    /*    }*/

    /*.item-qualfy-6 {*/
    /*    grid-column: 16 span;*/
    /*    display: flex;*/
    /*    justify-content: center;*/
    /*    max-height: 58%;*/
    /*    min-height: 50%;*/
    /*}*/

    /*    .loh-scroll {*/
    /* height: 270px; */
    /*    display: flex;*/
    /*    overflow-x: auto;*/
    /*    scroll-snap-type: x mandatory;*/
    /*    -webkit-overflow-scrolling: touch;*/
    /* width: fit-content; */
    /*    height: 100%;*/
    /*    padding: 0;*/
    /*    max-width: 70%;*/
    /*}*/

    /*end*/




    .bi .bi-caret-left-fill {
        display: none;
    }

    .content-main-goal {
        margin-left: calc(var(--space-main)/2);
        margin-right: calc(var(--space-main)/2);
    }

    .layout-gride-goal {
        display: block;
    }

    .item-goal-10 {
        grid-column: 15 span;
        padding: 0;
    }

    .item-goal-6 {
        grid-column: 0 span;
        display: none;

    }

    .timeline-wrapper {
        display: none;
    }

    .box-title-detailes p {
        display: none;
    }

    .accordion-button .title-row:has(.col-other:empty) {
        grid-template-columns:
            minmax(2rem, 2%)
            /* year */
            minmax(0, 1fr)
            /* title */
            minmax(3rem, 15%);
        /* province */
    }

    .content-main-detailes {
        margin-right: clamp(1px, 4vw, 100px);
        margin-left: clamp(1px, 4vw, 100px);
    }

    .content-main-detailes .padding-desktop {
        padding: 0;
    }

    .layout-detailes-14 {
        overflow-y: auto;
        overflow-x: hidden;
        height: 95%;
        scrollbar-width: none;
        -ms-overflow-style: none;

    }

    .#search-results .result-item {
        font-size: clamp(1px, 2vw, 42px);
    }

    .#search-results .result-title {
        font-size: clamp(1px, 2.5vw, 42px);
    }

    .item-detales-8 {
        grid-column: span 14;
        padding-left: 0;
    }

    .item-detales-6 {
        grid-column: span 14;
    }

    .special-scroll {
        overflow: visible;
        height: fit-content;
        /* IE 10+ */
    }

    .content-main-detailes .item-scroll {
        overflow: visible;
        height: fit-content;
    }

    .content-main-detailes .img-gride-specials {
        grid-template-columns: repeat(16, 1fr);
    }

    .container-img-special-14 {
        grid-column: span 16;
    }

    .container-img-special-7 {
        grid-column: span 8;

    }



    .gride-project-right {
        grid-column: span 12;

    }

    .gride-project-left {
        grid-column: span 12;
        padding-right: 0;
        padding-left: 0;


    }


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

    }

    .detailes-saidbar {
        width: 0%;
        display: none;
    }

    .layout-detailes-project {
        width: 100%;
        padding: 3%;
    }

    .detailes-scroll {
        direction: rtl;
        padding-left: 2%;
        padding-right: 0;
    }

    .gride-project-right h2 {
        padding-left: 2%;
        padding-right: 0;

    }

    .landscape {
        flex-direction: column;
        height: 250px;

    }

    .portrait {
        height: 250px;

    }


    .gride-history-right {
        grid-column: span 0;
        /* background-color: #c0a2a2; */
    }

    .gride-history-left {
        grid-column: span 12;

    }

    .container-content-history {
        height: 90%;
    }

    .content-main-history {
        margin-left: 0;
    }

    .box-content-history {
        padding-top: 0;
        padding-bottom: var(--space-main);
        padding-right: calc(var(--space-main)/2);
        padding-left: calc(var(--space-main)/2);

    }

    .box-content-history p {
        font-weight: 100;

    }

    .box-title-date {

        display: none;
    }

    .content-main-board {
        margin-left: calc(var(--space-main)/2);
        margin-right: calc(var(--space-main)/2);
    }

    .layout-grade-board {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 35px;
        height: 74vh;
        overflow-y: auto;
        overflow-x: hidden;


    }

    .box-detailes-board h5 {
        font-size: clamp(10px, 2vw, 62px);
        color: #333;
        font-weight: bold;
        line-height: 1.3;
    }

    .box-detailes-board p {
        font-weight: 100;
        font-size: clamp(10px, 2vw, 62px);
        line-height: 1.4;
        word-wrap: break-word;
    }

    .text-board {
        font-weight: 100;
    }

    /*.layout-board {*/
    /*    grid-column: span 12;*/
    /*    padding-left: var(--space-main);*/


    /*}*/

    /*.layout-board .item-board {*/
    /*    margin-right: 0;*/
    /*    margin-top: calc(var(--space-main)/2);*/
    /*    margin-left: 0;*/
    /*    margin-bottom: 0;*/
    /*}*/

    .layout-left {
        display: none;
    }

    .layout-left {
        display: none;

    }

    .center-guide-board {
        display: none;
    }


    .img-card-board {
        width: 30%;
        height: auto;
        max-height: 200px;
        min-height: 20px;
        min-width: 100px;
        flex-shrink: 0;
    }



    .manager-details {
        position: relative;
        /*padding-left: var(--space-main);*/

        /* پدر برای خط و مثلث */
    }

    .manager-details h3 {
        padding-top: calc(var(--space-main)/2);
    }

    .line-board-horiz {
        position: relative;
    }

    .line-board-horiz-one {
        position: relative;


    }

    .item-board.active .line-board-horiz-one::after {
        content: "";
        position: absolute;
        left: 86%;
        transform: translateX(-86%);
        width: 0;
        height: 0;
        display: block;
    }


    .item-board.active .line-board-horiz-one::after {
        display: block;
        top: -1.7vw;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
        border-bottom: 2vw solid #fff;
        z-index: 10;
    }

    .manager-details .line-board-horiz::before,
    .manager-details .line-board-horiz::after {
        content: "";
        position: absolute;
        left: 86%;
        transform: translateX(-86%);
        width: 0;
        height: 0;
        display: block;
    }


    .manager-details .line-board-horiz::before {
        display: block;
        top: -1.9vw;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
        border-bottom: 2vw solid #576169;
        z-index: 10;
    }

    .manager-details .line-board-horiz::after {
        display: block;
        top: -1.7vw;
        border-left: 2vw solid transparent;
        border-right: 2vw solid transparent;
        border-bottom: 2vw solid #fff;
        z-index: 10;
    }

    .manager-card {
        position: relative;
        /* برای قرارگیری مثلث پایین */

    }


    .img-card-board {
        position: relative;
    }

    /*profile*/
    .content-main-profile {
        margin-inline: clamp(0.1rem, 2vw, 12rem);
        overflow-y: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .profile-title-main {
        height: fit-content;
    }

    .profile-scroll {
        height: auto;
        padding-bottom: clamp(0.1rem, 2vw, 12rem);
        ;
    }

    .gride-profile-right {
        grid-column: span 16;
        padding-left: 0;

    }

    .gride-profile-left {
        grid-column: span 16;
        padding-right: 0;
        padding-left: 0;


    }

    .gride-profile-right h4 {
        font-size: clamp(1px, 4vw, 50px);
        font-weight: bold;
        padding-top: 0;
        margin: 0;
    }

    .image-container-profile {
        width: 100%;
        max-width: 800px;
        height: 25vh;
        margin: auto auto;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        padding-top: calc(var(--space-main)/4);
        padding-bottom: calc(var(--space-main)/4);

    }

    .font-size-p {
        font-size: clamp(1px, 3vw, 100px);
    }

    .title-span {
        padding-top: clamp(0.1rem, 4vw, 18rem);
        padding-bottom: clamp(0.1rem, 4vw, 18rem);
    }

    .font-size-p-title {
        font-size: clamp(1px, 5vw, 100px);
        padding-top: clamp(0.1rem, 1vw, 18rem);
        padding-bottom: clamp(0.1rem, 1vw, 18rem);
    }

    .layout-profile {
        height: max-content;
        overflow: visible;
    }

    .gride-profile-right {
        height: auto;
    }

    .gride-profile-left {
        height: auto;
    }

    .profile-scroll .accordion-item span {
        font-size: clamp(1px, 2.5vw, 50px);
    }

    /* end profile*/


/* org-chart */
.org-chart-wrap {
    margin-left:0;
    margin-right:0;
}

.horizantal {
        display: flex;
        width: 210px;
        flex-wrap: wrap;
    row-gap: clamp(12.5px, 0.625vw, 33.33px);
    padding-left: clamp(12.5px, 0.625vw, 33.33px);
}
.node_width_member{
      min-width: clamp(175px, 8vw, 466px);
    width: clamp(175px, 8vw, 466px);
}
.node_width{
     min-width: clamp(50px, 2.5vw, 133.33px);/* 1/3 node_width_member*/
     width: clamp(50px, 2.5vw, 133.33px);/* 1/3 node_width_member*/
}
.vertical{
   display: flex;
    flex-direction: column;
    gap:clamp(12.5px, 0.625vw, 33.33px); /* 1/4 node_width*/
}
.horizantal>.li>.children-container{
    width:stretch;
}
.container-node{
    position:relative;
}
.container-node .line-connect{
    border: 0;
    min-width: clamp(12.5px, 0.625vw, 33.33px);/* 1/4 node_width*/  
    width: stretch;
    border-top: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
}
.container-node .line-connect-right{
    border: 0;
    min-width:clamp(12.5px, 0.625vw, 33.33px); /* 1/4 node_width*/  
    /*width: stretch;*/
    border-top: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
}
.padding-child-top:first-child {
    padding-bottom: clamp(12.5px, 0.625vw, 33.33px);
}
.padding-child-bottom:first-child{
    padding-top: clamp(12.5px, 0.625vw, 33.33px);
}
.border_right_node{
    border-right:clamp(5px, 0.25vw, 3.33px) solid black; /* 1/10 node_width*/
}
.main-child .vertical::before {
    top: var(--line-top, clamp(19px, 1.35vw, 66.66px));
    bottom: var(--line-bottom, clamp(19px, 1.35vw, 66.66px));
}
.top-child .vertical::before {
    top: var(--line-top,clamp(19px, 1.35vw, 66.66px));
    bottom:0;
}

.bottom-child .vertical::before {
    top:0;
    bottom:var(--line-bottom, clamp(19px, 1.35vw, 66.66px));
}

.top-child .horizantal::before {
    top: var(--line-top,clamp(19px, 1.35vw, 66.66px));
    bottom:0;
}
.bottom-child .horizantal::before {
    top:0;
    bottom: var(--line-bottom,clamp(19px, 1.35vw, 66.66px));
} 

.horizantal .li .children-container .container-node::after{
   content: '';
        position: absolute;
        right: clamp(25px, 1.25vw, 66.66px);
        border-right: clamp(2px, 0.1vw, 10px) solid #b6b4b4;
        /* min-height: clamp(32px, 3.125vw, 166.66px); */
       height: var(--gap, 80px);
        top: 100%;
       
    
}
.horizantal .li .children-container .container-node.hideline::after{
    display:none;
}

/*.horizantal .li::after{*/
/*         content: '';*/
/*        position: absolute;*/
/*        border-bottom: clamp(2px, 0.1vw, 10px) solid #b6b4b4;*/
/*        width: 100%;*/
/*        top: clamp(71px, 4vw, 300px);*/
/*        left: clamp(23.5px, 1.35vw, 66.66px);*/
/*    }*/
    .horizantal .li.to-node-4::after{
         width: 210%;
    }
    .horizantal .li.to-node-5::after{
         width: 100%;
    }
    .horizantal .li.not-to-node::after{ 
        display:none;
    }
.horizantal .li.hideline-after::after{
    display:none;
}
.container-node.draw-l::before{
    content:'';
    position:absolute;

    left:clamp(25px,1.25vw,66.66px);
    top:100%;

    width:var(--l-width);
    height:var(--l-height);

    border-left:clamp(2px,0.1vw,10px)
        solid #b6b4b4;

    border-bottom:clamp(2px,0.1vw,10px)
        solid #b6b4b4;
}
/* end org-chart */

}

@media (min-width: 767px) and (max-width: 1000px) {
    .left-column {
        /*grid-auto-rows: 20vh;*/
        /* 25% از ارتفاع صفحه */
        gap: clamp(1px, 3vw, 150px);
        /*padding-left: 0;*/
    }

    .right-column {
        /*grid-auto-rows: 20vh;*/
        /* 25% از ارتفاع صفحه */
        gap: clamp(1px, 3vw, 150px);
        padding-left: 0;

    }

    .container-img-contact {
        padding-bottom: clamp(0.1rem, 1.8vw, 12rem);
    }

    .box-img-contact {
        height: 100%;
        min-height: 60%;
    }

    /*.modal-dialog {*/
    /*        max-height: 55%;*/

    /*}*/
}

@media (max-width: 576px) {
    .modal-dialog {
        margin-right: clamp(40px, 12.5vw, 80px) !important;
        margin-left: clamp(40px, 12.5vw, 80px) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* employear*/
    .img-grid {
        grid-template-columns: repeat(5, 1fr);

    }

    .tag-label {
        font-size: clamp(8px, 2vw, 12px);
        padding: clamp(1px, 0.7vw, 300px) clamp(0.1px, 2vw, 300px);
        /*line-height: 2;*/
    }


    /* end employear*/
    /* special*/
    .img-gride-specials {
        grid-auto-rows: 25%;
    }

    /* end special*/

    .container-img-special-6 {
        grid-column: span 14;
    }



    .main-grid-layout {
        display: grid;
        grid-template-columns: 1fr;
        gap: 35px;
        direction: rtl;
        overflow: visible;
        height: auto;

    }

    .left-column {
        display: grid;
        /*grid-template-columns: 1fr;*/
        /*grid-auto-rows: 34vh;*/
        /* 25% از ارتفاع صفحه */
        overflow-y: auto;
        height: auto;
        padding-left: 0;

    }

    .right-column {
        display: grid;
        grid-template-columns: 1fr;
        /*grid-auto-rows: 34vh;*/
        /* 25% از ارتفاع صفحه */
        /*gap: 20px;*/

    }

    .grid-32-layout .item-16-col {
        grid-column: span 32;
    }

    .grid-32-layout .item-8-col {
        grid-column: span 32;
    }

    .accordion-item span {
        font-size: clamp(8px, 2vw, 12px);

    }

    /*.loh-scroll {*/
    /*    display: flex;*/
    /*    flex-direction: row;*/
    /*    height: 25vh;*/
    /*    overflow-x: auto;*/
    /*    overflow-y: hidden;*/
    /*    gap: 1rem;*/
    /*    scroll-snap-type: x mandatory;*/
    /*    -webkit-overflow-scrolling: touch;*/
    /*}*/

    /*.image-container-loh {*/
    /*    width: 100%;*/
    /*    height: 25vh;*/
    /* کاهش ارتفاع */
    /*    margin: auto;*/
    /*}*/

    /*.loh-scroll {*/
    /*    height: 30vh;*/
    /*}*/

    .loh-scroll-center {
        flex-direction: row;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0px;
        height: 150px;
        box-sizing: border-box;
        gap: 15px;
        margin-inline: 10%;
        margin-top: 5px;
        margin-bottom: 5px;
    }


    /*.detailes-scroll {*/
    /*    overflow-y: auto;*/
    /*    overflow-x: hidden;*/
    /*    height: 18vh;*/
    /*    scrollbar-width: none;*/
    /* Firefox */
    /*    -ms-overflow-style: none;*/
    /* IE 10+ */
    /*}*/



}

@media (max-width: 450px) {
    .container-img-special-14 {
        grid-column: span 16;
    }

    .container-img-special-7 {
        grid-column: span 8;

    }

    .gride-profile-right {
        grid-column: span 16;

    }

    /* special*/
    .img-gride-specials {
        grid-auto-rows: 22%;
    }

    /* end special*/

}

@media(max-width : 350px) {

    .loh-scroll-center {
        flex-direction: row;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 0px;
        height: 100px;
        box-sizing: border-box;
        gap: 15px;
        margin-inline: 10%;
        margin-top: 5px;
        margin-bottom: 5px;

    }
}