/*
Theme Name: Webtinus
Theme URI: http://webtinus.com
Author: webtinus
Author URI: http://webtinus.com
Version: 1.0.0 
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: Webtinus 
 
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*---------------- Base Site --------------*/
/* 100 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 100;
    src: url("fonts/Kalameh/_eot/Thin.eot") format("eot"),
        url("fonts/Kalameh/_Woff/Thin.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/Thin.woff2") format("woff2");
}

/* 200 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 200;
    src: url("fonts/Kalameh/_eot/ExtraLight.eot") format("eot"),
        url("fonts/Kalameh/_Woff/ExtraLight.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/ExtraLight.woff2") format("woff2");
}

/* 300 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 300;
    src: url("fonts/Kalameh/_eot/Light.eot") format("eot"),
        url("fonts/Kalameh/_Woff/Light.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/Light.woff2") format("woff2");
}

/* 400 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 400;
    src: url("fonts/Kalameh/_eot/Regular.eot") format("eot"),
        url("fonts/Kalameh/_Woff/Regular.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/Regular.woff2") format("woff2");
}

/* 500 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 500;
    src: url("fonts/Kalameh/_eot/Medium.eot") format("eot"),
        url("fonts/Kalameh/_Woff/Medium.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/Medium.woff2") format("woff2");
}

/* 600 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 600;
    src: url("fonts/Kalameh/_eot/SemiBold.eot") format("eot"),
        url("fonts/Kalameh/_Woff/SemiBold.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/SemiBold.woff2") format("woff2");
}

/* 700 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 700;
    src: url("fonts/Kalameh/_eot/Bold.eot") format("eot"),
        url("fonts/Kalameh/_Woff/Bold.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/Bold.woff2") format("woff2");
}

/* 800 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 800;
    src: url("fonts/Kalameh/_eot/ExtraBold.eot") format("eot"),
        url("fonts/Kalameh/_Woff/ExtraBold.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/ExtraBold.woff2") format("woff2");
}

/* 900 */
@font-face {
    font-display: swap;
    font-family: "Kalameh";
    font-weight: 900;
    src: url("fonts/Kalameh/_eot/Black.eot") format("eot"),
        url("fonts/Kalameh/_Woff/Black.woff") format("woff"),
        url("fonts/Kalameh/_Woff2/Black.woff2") format("woff2");
}

/* Animation */

.wait-animation {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.show-to-left {
    transform: translateX(-40px);
}

.show-to-right {
    transform: translateX(40px);
}

.show-to-top {
    transform: translateY(-40px);
}

.show-to-bottom {
    transform: translateY(40px);
}

.act-animation {
    opacity: 1;
    transform: translate(0, 0);
}



body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Kalameh" !important;
    background: var(--color-background);
}

ul {
    list-style: none;
}

:root {
    --primary-color: #FF8C00;
    --primary-color-70: #ff8c00bc;
    --primary-color-50: #ff8c007d;
    --primary-color-20: #ff8c0027;
    --primary-color-darker: #e77f00;
    --secondary-color: #3B3B39;

    --color-background: #fbfbfb;

    --gray-color: #f3f3f3;
    --gray-color2: #696a6a;
    --gray-color-888: #888888;
    --gray-color-d9: #D9D9D9;
    --gray-color-eb: #ebebeb;
    --white-color-20: #ffffff42;

    --black-color-20: #00000042;
    --black-color-10: #0000000e;
    --black-color-60: #000000ab;
    --black-color: #000000;

    --rounded-5: 5px;
    --rounded-10: 10px;
    --rounded-15: 15px;
    --rounded-20: 20px;
    --rounded-30: 30px;
    --rounded-40: 40px;
    --rounded-full: 100%;

    --shadow-1: 0px 5px 10px 0px #00000010;
    --shadow-2: 0px 5px 10px 0px #00000020;
    --shadow-inner-2: inset 0px 5px 10px 0px #00000020;
    --shadow-center-inner-2: inset 0px 0px 10px 0px #00000020;
}

.btn-site {
    cursor: pointer;
    position: relative;
    display: inline-block;
    font-weight: 400;
    border-radius: var(--rounded-15);
}

* {
    transition: 0.3s;
}

.btn-site-large {
    padding: 10px 30px 13px 30px;
    font-size: 18px;
}

.btn-site-medium {
    padding: 7px 25px 10px 25px;
    font-size: 17px;
}

.btn-site-small {
    padding: 4px 20px 6px 20px;
    font-size: 15px;
}

.btn-site-primary {
    background: var(--primary-color);
    color: #fff;
}

.btn-site-secondary:hover {
    background: var(--primary-color);
    color: #fff;
}

.btn-site-secondary {
    background: var(--secondary-color);
    color: #fff;
}

.btn-site-full-rounded {
    border-radius: var(--rounded-40);
}

.btn-site-primary:hover {
    background: var(--primary-color-darker);
}

.btn-site-light {
    color: var(--gray-color2);
    border-color: var(--gray-color2);
}

.btn-site-light:hover {
    background: #fff;
    color: var(--secondary-color);
}

.btn-site-line {
    background: transparent;
    border: 1px solid;
}

a {
    text-decoration: none;
}

::placeholder {
    color: #fff;
    opacity: 1;
}

.color-gray {
    color: var(--gray-color-888) !important;
}

/*---------------- Header --------------*/

.home .main-header {
    background: var(--gray-color);
    border-radius: var(--rounded-30) var(--rounded-30) 0 0;
}

.search-icon {
    border: 1px solid;
}

.main-header {
    background: var(--primary-color);
    border-radius: var(--rounded-30);
    padding: 20px 40px;
    margin-top: 20px;
}

.header-logo {
    width: 100px;
}

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

.menu-header {
    margin: 0 70px 0 auto;
}

.menu-header ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 40px;
    list-style: none;
}

.home .menu-header ul li a {
    color: var(--gray-color2);
}

.menu-header ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 17px;
}

.menu-header ul li.current-menu-item a {
    font-weight: 500;
}

.info-header {
    display: flex;
    gap: 40px;
    margin-left: 40px;
}

.info-header-item-upper {
    display: flex;
}

.home .info-header-item {
    color: var(--gray-color2);
}

.home .info-header-item svg path {
    fill: var(--gray-color2);
}

.info-header-item {
    color: #fff;
    font-size: 17px;
    font-weight: 300;
}

.info-header-item-upper-svg {
    display: flex;
    align-items: center;
    margin-right: 8px;
}

.info-header-item-upper-text {
    font-weight: 600;
}

.home .search-icon-toggle {
    background: var(--gray-color);
}

.home .search-icon-toggle svg path {
    fill: var(--gray-color2);
}

.home .search-icon-toggle:hover {
    background: var(--black-color-10);
}

.search-icon-toggle {
    background: var(--primary-color);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-full);
    cursor: pointer;
    transition: 0.3s;
}

.search-icon-toggle:hover {
    background: var(--primary-color-darker);
}

.home #searchform_header {
    background: var(--black-color-20);
    border: 1px solid var(--black-color);
}

#searchform_header {
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    position: absolute;
    left: 140px;
    background: var(--primary-color-70);
    border: 1px solid var(--white-color-20);
    backdrop-filter: blur(3px);
    width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--rounded-15);
    display: flex;
}

#searchform_header.active {
    opacity: 1;
    visibility: visible;
    padding: 10px;
    width: 400px;
    max-width: 100%;
}

.heading_search_box {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    outline: none;
    padding-right: 20px;
}

.breadcrumbs-container {
    padding-right: 50px;
}

.breadcrumbs-container .breadcrumbs {
    margin: 0;
    padding: 7px 15px;
    background: var(--gray-color-eb);
    border-radius: 0px 0px var(--rounded-20) var(--rounded-20);
}

.breadcrumbs-container .breadcrumbs a,
.breadcrumbs-container .breadcrumbs span {
    color: var(--gray-color-888);
    font-size: 14px;
    display: flex;
    gap: 10px;
}

.header-message {
    margin: 0 30px 0px auto;
    font-size: 14px;
    color: var(--gray-color-888);
    position: relative;
    padding-right: 20px;
    display: flex;
    align-items: center;
}

.header-message span {
    position: relative;
    background: var(--primary-color-20);
    width: 11px;
    height: 11px;
    border-radius: var(--rounded-full);
    display: inline-block;
    margin-left: 10px;
}

.header-message span:before {
    position: absolute;
    content: '';
    background: var(--primary-color);
    width: 4px;
    height: 4px;
    border-radius: var(--rounded-full);
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

.sub-menu-header {
    padding-left: 50px;
}

.sub-menu-header ul {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
}

.sub-menu-header ul a {
    font-size: 15px;
    color: var(--gray-color2);
}

/*---------------- Pages Heading --------------*/

.pages-heading {
    background: var(--gray-color-eb);
    border-radius: var(--rounded-20);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 50px 0px;
}

.pages-heading h1 {
    color: var(--gray-color2);
    font-weight: 700;
}

.pages-heading p {
    font-size: 18px;
    margin: 10px 0 0;
    color: var(--gray-color-888);
}

/*---------------- Projects Archive --------------*/

.project-item {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.project-item img {
    border-radius: var(--rounded-20);
    width: 100%;
    height: auto;
}

.project-content p,
.project-content h2 {
    text-shadow: 0px 0 10px BLACK;
}


.project-content {
    padding: 20px;
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(transparent, var(--black-color-10));
    gap: 20px;
    color: #fff;
    width: 100%;
}

.project-content-details p {
    margin: 0;
    padding: 0 20px 4px 0;
    position: relative;
    border-bottom: 2px solid #fff;
    display: inline-block;
}

.project-content-details p:after {
    position: absolute;
    content: '';
    right: 0;
    width: 6px;
    height: 6px;
    background: #ffffff;
    border-radius: var(--rounded-full);
    top: 50%;
    transform: translateY(-50%);
}

.project-content-details h2 {
    margin: 10px auto;
    font-size: 23px;
    font-weight: 600;
}

.wp-pagenavi {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px 0 30px;
}


.wp-pagenavi span,
.wp-pagenavi a {
    color: var(--gray-color-888);
    font-weight: 400 !important;
    font-size: 20px;
    width: 37px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--gray-color-888) !important;
    border-radius: var(--rounded-15);
    margin: 0 4px !important;
    transition: 0.3s;
}

.wp-pagenavi span.current,
.wp-pagenavi a:hover {
    color: #fff;
    border: 1px solid var(--primary-color) !important;
    border-radius: var(--rounded-15);
    margin: 0 4px !important;
    background: var(--primary-color);
}

.wp-pagenavi .last,
.wp-pagenavi .first,
.wp-pagenavi .pages {
    display: none !important;
}

/* Footer */


.image-wrapper img {
    border-radius: var(--rounded-30);
    width: 100%;
    height: auto;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--rounded-30);
    display: flex;
    justify-content: space-around;
}

footer .dynamic-title {
    background-color: var(--color-background);
    padding: 0 15px 12px 15px;
    border-radius: 0 0 var(--rounded-30) var(--rounded-30);
    text-align: center;
    white-space: nowrap;
    position: absolute;
    left: 55px;
    top: 0;
    width: 90px;
}

.dynamic-title h1 {
    margin: 0;
    font-size: 18px;
}

footer .dynamic-title::before,
footer .dynamic-title::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    background: url(images/corner-outward.svg) no-repeat;
    background-size: cover;
}

.dynamic-title::before {
    right: 1px;
    transform: translate(100%, 0);
    top: -1px;
}

.dynamic-title::after {
    left: 0px;
    transform: translate(-100%, 0) rotateY(180deg);
    top: -1px;
}

.des-footer {
    width: 30%;
    text-align: justify;
    display: flex;
    flex-flow: column;
    gap: 10px;
    width: 35%;
    text-align: justify;
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 30px 40px;
    background: url(images/bg-footer.png) no-repeat;
    background-size: cover;
    border-radius: var(--rounded-30);
    color: #fff;
}

.des-footer h2 {
    font-weight: 700;
    font-size: 35px;
}

.des-footer p {
    font-size: 15px;
    line-height: 25px;
}

.copyright {
    font-size: 13px;
}

.access-footer {
    width: 65%;
    padding-right: 30px;
}

.access-footer-info {
    background: var(--gray-color);
    padding: 25px 40px;
    border-radius: var(--rounded-30);
    text-align: left;
    margin-top: 30px;
    position: relative;
    gap: 100px;
}

.info-footer-item-upper-text {
    font-size: 25px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 20px;
}

.info-footer-item-down {
    font-size: 19px;
    color: var(--gray-color2);
}

.access-footer-menus {
    padding: 0 180px 0 30px;
}

.footer-menu ul {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 35px;
}

.footer-menu ul a {
    color: var(--gray-color-888);
    transition: 0.3s;
}

.footer-menu ul a:hover {
    color: var(--primary-color);
}

.go-to-up {
    position: absolute;
    width: 50px;
    height: 50px;
    background: linear-gradient(var(--primary-color), var(--primary-color-darker));
    top: 0;
    transform: translateY(-100%);
    right: 60px;
    border-radius: var(--rounded-40) var(--rounded-40) 0 0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: end;
}

/* Archive */
.post-item-article {
    padding: 10px;
    background: #fff;
    border: 1px solid var(--gray-color);
    border-radius: var(--rounded-20);
}

.post-item img {
    border-radius: var(--rounded-10);
}

.post-item-content h2 {
    margin-bottom: 15px;
    line-height: 20px;
}

.post-item-content h2 a {
    font-size: 19px;
    color: var(--gray-color2);
}

.post-item-content p {
    margin: 0;
    text-align: justify;
    font-size: 15px;
    line-height: 26px;
    color: var(--gray-color-888);
}

.post-item-content {
    padding: 0 17px;
}

.list-post .post-item:nth-child(3) .post-item-article,
.list-post .post-item:nth-child(4) .post-item-article,
.list-post .post-item:nth-child(7) .post-item-article,
.list-post .post-item:nth-child(8) .post-item-article,
.list-post .post-item:nth-child(11) .post-item-article,
.list-post .post-item:nth-child(12) .post-item-article {
    flex-flow: row-reverse;
}

.news-home .list-post .post-item:nth-child(n) .post-item-article {
    flex-flow: row;
}

.news-home .list-post .post-item:nth-child(2) .post-item-article {
    transform: translateX(60px);
}

.post-article-item .post-article-item-icon {
    width: 40px;
    background: var(--primary-color);
    height: 30px;
    border-radius: var(--rounded-40);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
}

.post-article-item-icon {
    width: 16px;
}

.post-article-items {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.post-article-item {
    display: flex;
    gap: 10px;
    align-items: center;
}

.post-article-item span {
    font-size: 14px;
    color: var(--gray-color2);
    position: relative;
    z-index: 1;
    padding: 5px 0px 5px 10px;
}

.post-article-item span:after {
    position: absolute;
    content: '';
    background: var(--gray-color);
    width: 130%;
    height: 100%;
    left: 0;
    z-index: -1;
    border-radius: var(--rounded-40);
    top: 1px;
}

/* Archive team */

.image-team {
    position: relative;
    border-radius: var(--rounded-20);
    overflow: hidden;
}

.image-team img {
    width: 100%;
    height: auto;
}

.image-team span {
    position: absolute;
    right: 0;
    left: 0;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
    bottom: 0;
    padding: 15px 0;
    color: #fff;
    font-size: 19px;
    font-weight: 500;
    background: linear-gradient(transparent, var(--black-color-60));
}

.team-item.team-large h2 {
    margin: 15px 0;
    text-align: center;
    font-size: 23px;
    font-weight: 600;
    color: var(--secondary-color);
}

.team-item.team-large p {
    margin: 0;
    text-align: center;
    font-size: 17px;
    color: var(--gray-color2);
}

.post-item.team-item.team-large:nth-child(2) {
    margin-top: 80px;
}

.site-heading {
    font-size: 40px;
    color: var(--primary-color);
    font-weight: 700;
}

.site-heading h2 {
    font-size: 30px;
    margin: 10px 0 0px;
    color: var(--secondary-color);
    font-weight: 700;
}

.site-heading p {
    font-size: 25px;
    margin: 0;
    color: var(--primary-color);
    font-weight: 400;
}

.team-item.team-small h2 {
    margin: 15px 10px;
    text-align: right;
    font-size: 21px;
    font-weight: 400;
    color: var(--gray-color2);
}

/* FAQ */

#panel_faq .accordion-item {
    width: 100%;
    padding: 15px 25px;
    background: var(--gray-color);
    border: 1px solid var(--black-color-10);
    border-radius: var(--rounded-30);
    margin-bottom: 10px;
}

#panel_faq .accordion-item-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#panel_faq .accordion-item-heading {
    cursor: pointer;
}

#panel_faq .collapsed .arrow-faq {
    background: var(--gray-color-d9);
    transform: rotate(225deg);
}

#panel_faq .arrow-faq {
    width: 40px;
    height: 40px;
    background: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    transform: rotate(135deg);
    border-radius: var(--rounded-full);
}

#panel_faq .arrow-faq svg path {
    fill: #fff;
}

#panel_faq .accordion-item-heading h2 {
    margin: 0 30px 0 auto;
    font-size: 19px;
    font-weight: 500;
    transition: 0.3s;
    color: var(--primary-color);
}

#panel_faq .accordion-item-heading.collapsed h2 {
    color: var(--secondary-color);
}

#panel_faq .accordion-item-heading span {
    font-size: 40px;
    font-weight: 700;
    margin-right: 20px;
    transition: 0.3s;
    color: var(--primary-color);
}

#panel_faq .accordion-item-heading.collapsed span {
    color: var(--gray-color-d9);
}

#panel_faq .accordion-collapse p {
    padding: 20px;
    margin: 0;
    line-height: 30px;
    color: var(--gray-color-888);
}

/* 404 */

.page-404 {
    background: linear-gradient(123deg, #333333, #1A1A1A);
    display: flex;
    height: 100vh;
    position: relative;
    align-items: center;
    justify-content: end;
}

.page-404:after {
    position: absolute;
    right: 0;
    bottom: 0;
    content: '';
    background: url(images/bg_404.png) no-repeat;
    width: 100%;
    height: 100%;
    background-position: right bottom;
}

.error404 body {
    display: flex;
}

.page-404-content {
    position: relative;
    z-index: 3;
}

.page-404-content {
    color: var(--gray-color-888);
    padding-left: 200px;
}

.page-404-content h1 {
    margin: 0 0 20px;
    color: #fff;
}

.page-404-content h1 span {
    color: var(--primary-color);
}

.page-404-content p {
    margin-bottom: 30px;
    font-size: 20px;
}

.page-404-content p.des-404 {
    margin: 50px 0 0;
    font-size: 15px;
}

/* single post */


/* Single - POST */
.content-single {
    gap: 40px;
    margin: 50px 0 0;
}

.product-type-simple {
    background: #fff;
    padding: 10px !important;
    border: 1px solid var(--light-color-2);
    border-radius: var(--rounded-20);
    transition: 0.3s;
    transform: translateY(0);
}

.product-type-simple:hover {
    transform: translateY(-10px);
}

.product-type-simple .wp-block-woocommerce-product-image {
    border-radius: var(--rounded-15);
}

.product-type-simple .has-text-align-center {
    text-align: right;
}

.product-type-simple .has-text-align-center a {
    color: var(--secondary-color) !important;
    font-weight: 500 !important;
    text-align: right;
    font-size: 17px;
}

.product-type-simple .woocommerce-Price-amount {
    font-size: 20px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 20px;
    display: block;
}

.product-type-simple .wp-block-button.wc-block-components-product-button .wc-block-components-product-button__button {
    display: inline-block !important;
    width: 100% !important;
}

.wp-block-woocommerce-product-collection {
    margin: 70px 0;
}

.socials-share-article {
    display: flex;
    flex-direction: column;
    align-items: end;
    gap: 1.2rem;
    top: 50px;
}

.socials-share-article a:hover {
    background-color: var(--primary-color);
    color: var(--primary-color);
    border-color: transparent;
}

.socials-share-article a svg path {
    fill: var(--secondary-color);
}

.socials-share-article a:hover svg path {
    fill: #fff;
}

.socials-share-article a svg {
    width: 25px;
    height: 25px;
    transition: 0.3s;
}

.socials-share-article a svg {
    transition: 0.3s;
}

.socials-share-article a {
    cursor: pointer;
    font-size: 2.3rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff;
    transition: 0.3s;
    flex: 0 0 auto;
}

.landing-head-content h1 {
    text-align: right;
    color: #fff;
}

.main-content h2 {
    font-weight: 600;
    font-size: 22px;
    color: var(--secondary-color);
}

.main-content h3 {
    font-weight: 500;
    font-size: 18px;
    color: var(--secondary-color);
}

.main-content h4 {
    font-weight: 400;
    font-size: 18px;
    color: var(--secondary-color);
}

.main-content a:link {
    color: var(--primary-color);
    font-weight: 500;
}

.main-content p {
    font-weight: 300;
    font-size: 18px;
    color: var(--secondary-color);
    line-height: 35px;
    text-align: justify;
}

.toc {
    top: 50px;
    background: #fff;
    border-radius: var(--rounded-30);
    overflow: hidden;
    padding: 15px;
    border: 1px solid var(--black-color-10);
    height: 90vh;
}

.toc ul {
    height: 79vh;
    overflow-y: scroll;
    display: inline-block;
}

.toc ul::-webkit-scrollbar {
    display: none;
}

.content-single {
    font-size: 22px;
}

.toc svg {
    width: 30px;
    height: 30px;
    transition: 0.3s;
    opacity: 1;
}

.main-content {
    text-align: justify;
    font-size: 17px;
    width: 100%;
}

.toc ul {
    list-style: none;
    padding: 10px 30px;
    line-height: 30px;
    margin-bottom: 20px;
    position: relative;
    min-height: 400px;
    overflow-y: scroll;
    font-size: 15px;
}

.toc h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 12px;
    background: var(--gray-color-eb);
    margin: 0;
    border-radius: var(--rounded-20);
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color);
}

.toc h2 svg path {
    fill: var(--secondary-color);
}

.content-single .toc ul li {
    position: relative;
    line-height: 20px;
    padding: 13px 0;
}

.content-single ul li,
.content-single ol li {
    padding: 2px 0;
    font-weight: 200;
}

.toc ul li:before {
    right: -14px;
    top: 20px;
    position: absolute;
    content: "";
    border-right: 2px var(--gray-color-d9) dashed;
    height: 100%;
    margin-bottom: revert-layer;
    z-index: 1;
}

.toc ul li:last-child:before {
    display: none;
}

.content-single .toc ul li.active:after {
    height: 15px;
    top: 50%;
    background: var(--primary-color);
    transform: translate(100%, -50%);
}

.content-single .toc ul li:after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    right: -9px;
    top: 50%;
    background: var(--primary-color);
    transform: translate(100%, -50%);
    border-radius: 50px;
    transition: 0.3s;
    z-index: 2;
}

.content-single ul li.active a,
.content-single ul li a:hover {
    color: var(--primary-color);
    font-weight: 500;
}

.content-single ul li a {
    color: var(--secondary-color);
    font-weight: 400;
}

.toc ul::-webkit-scrollbar {
    display: none;
}

.wp-block-columns {
    border: 1px solid var(--light-color-2);
    background: #fff;
    border-radius: var(--rounded-30);
    padding: 15px;
    margin: 50px 0;
}

.wp-block-columns img {
    width: 200px;
    border-radius: var(--rounded-20);
}

.wp-block-image {
    margin: 0;
}

.wp-block-columns a {
    color: var(--secondary-color);
    transition: 0.3s;
}

.wp-block-columns a:hover {
    color: var(--primary-color);
}

.main-content blockquote {
    background: var(--primary-color);
    padding: 20px 30px;
    border-radius: var(--rounded-20);
    margin: 50px 0;
}

.main-content blockquote p {
    margin: 0;
    color: #fff;
    font-weight: 300;
    padding-right: 50px;
    position: relative;
}

.main-content blockquote p a {
    color: #fff !important;
    font-weight: 500;
    border-bottom: dashed 2px;
}

.main-content blockquote p::before {
    display: inline-block;
    content: url(images/link.svg);
    margin-left: 20px;
    width: 38px;
    height: 37px;
    position: absolute;
    right: 0;
    margin-top: 5px;
}

.navigation-post-content {
    background: #fff;
    padding: 5px 5px 5px 15px;
    border-radius: var(--rounded-20);
    border: 1px solid var(--light-color-2);
    color: var(--secondary-color);
    font-weight: 600;
    transition: 0.3s;
}

.navigation-post-content h3 {
    color: var(--secondary-color);
    font-size: 17px;
    font-weight: 600;
    margin: 0;
    transition: 0.3s;
    line-height: 25px;
}

.navigation-post-content img {
    width: 70px;
    height: auto;
    border-radius: var(--rounded-15);
    margin-left: 20px;
}

.main-content img {
    max-width: 100%;
}

.navigation-post {
    flex: 1;
}

.content-single-navigation {
    margin-top: 100px;
    gap: 20px;
}

.navigation-post-arrow {
    background: #fff;
    border-radius: var(--rounded-20);
    color: var(--secondary-color);
    font-weight: 600;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: normal;
    width: 0;
    opacity: 0;
    margin-left: 0;
}

.navigation-post:hover .navigation-post-arrow {
    margin-left: 10px;
    opacity: 1;
    width: 55px;
    background: var(--primary-color);
    color: #fff;
}

.navigation-post:hover .navigation-post-arrow svg path {
    fill: #fff;
}

.navigation-post:hover .navigation-post-content {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.navigation-post:hover .navigation-post-content h3 {
    color: #fff;
}

.navigation-post-arrow svg path {
    fill: var(--secondary-color);
}

.navigation-post-arrow svg {
    height: 17px;
}

.next-post svg {
    transform: rotate(180deg);
}

.next-post:hover .navigation-post-arrow {
    margin-right: 10px;
}

.image-wrapper img {
    border-radius: var(--rounded-30);
    width: 100%;
    height: auto;
}

.image-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: var(--rounded-30);
    display: flex;
    justify-content: space-around;
}

.dynamic-title {
    background-color: var(--color-background);
    padding: 25px 52px;
    border-radius: 0 0 var(--rounded-40) var(--rounded-40);
    text-align: center;
    white-space: nowrap;
    position: absolute;
}

.dynamic-title h1 {
    margin: 0;
    font-size: 18px;
}

.dynamic-title::before,
.dynamic-title::after {
    content: '';
    position: absolute;
    top: -20px;
    width: 40px;
    height: 40px;
    background: url('images/corner-outward.svg') no-repeat;
}

.dynamic-title::before {
    right: 1px;
    transform: translate(100%, 0);
    top: -1px;
}

.dynamic-title::after {
    left: 1px;
    transform: translate(-100%, 0) rotateY(180deg);
    top: -1px;
}

.content-single.project-content-single h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--secondary-color);
    margin-bottom: 20px;
}

/* About */

.about-content img {
    width: 100%;
    height: auto;
}

.about-content ul {
    list-style: inherit;
}

.info-footer-item {
    border: 1px solid var(--gray-color);
}

.about-page .socials-share-article {
    flex-direction: row;
}

.quick-access {
    background: var(--secondary-color);
    padding: 10px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    border-radius: var(--rounded-30);
    color: #fff;
}

.time-working {
    margin: 0 50px 0 auto;
}

.time-working p {
    margin: 0;
    font-size: 21px;
    color: var(--gray-color2);
    font-weight: 400;
}

.time-working strong {
    font-size: 28px;
    color: var(--secondary-color);
    font-weight: 700;
}
.page-template-default .main-content img {
	width: 100%;
}
.quick-access-content p {
    margin: 0;
    font-size: 21px;
    color: #fff;
    font-weight: 400;
}

.quick-access-content strong {
    font-size: 28px;
    color: #fff;
    font-weight: 700;
}

/* Project */


.custom-slider-container {
    display: flex;
    height: 500px;
    width: 100%;
    margin: 80px 0;
    gap: 40px;
    align-items: stretch;
}

.custom-main-slider {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-30);
    overflow: hidden;
}

.custom-main-slider img {
    width: auto;
    height: 100%;
}

.custom-main-slider img {
    width: 100%;
    height: auto;
    border-radius: var(--rounded-30);
}

.custom-nav-slider {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    height: 100%;
}

.custom-nav-list-wrapper {
    height: 100%;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.custom-nav-list {
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    will-change: transform;
    gap: 20px;
    border-radius: var(--rounded-20);
    overflow: hidden;
}

.custom-nav-list img {
    border-radius: var(--rounded-20);
}

.custom-nav-item {
    height: 150px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.custom-nav-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.custom-nav-btn {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--rounded-full);
    background: var(--secondary-color);
    border: none;
    cursor: pointer;
    position: absolute;
    z-index: 5;
    transition: 0.3s;
}

.custom-nav-btn:hover {
    background: var(--primary-color);
}

.custom-nav-btn.top-arrow {
    top: 0;
    transform: translateY(-50%);
}

.custom-nav-btn.down-arrow {
    bottom: 0;
    transform: translateY(50%);
}

.custom-nav-list-wrapper:before,
.custom-nav-list-wrapper:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 200px;
    z-index: 2;
    right: 0;
    pointer-events: none;
}

.custom-nav-list-wrapper:after {
    background: linear-gradient(#fff, transparent);
    top: 0;
}

.custom-nav-list-wrapper:before {
    background: linear-gradient(0deg, #fff, transparent);
    bottom: 0;
}

/* customers */

.customer-items {
    position: relative;
    gap: 20px;
    padding: 30px;
}

.customer-items:after {
    position: absolute;
    content: '';
    width: 0%;
    height: 50%;
    background: var(--primary-color);
    border-radius: var(--rounded-30);
    z-index: -1;
    right: -30px;
    bottom: 0;
    transition: 0.3s;
    opacity: 0;
}

.customer-items.act-animation:after {
    opacity: 1;
    width: 130%;
}

.customer-home {
    overflow: hidden;
}

.customer-item {
    background: var(--gray-color-eb);
    border-radius: var(--rounded-30);
    overflow: hidden;
    width: 180px;
    box-shadow: var(--shadow-2);
}

.customer-item img {
    width: 100%;
    height: auto;
}

.extra-des-customer {
    margin: 10px 0;
    font-size: 13px;
    color: var(--gray-color2);
}

/* honour */

.honour-home {
    background: url(images/bg-honour.png) no-repeat;
    background-size: 100%;
    background-position: center top;
    padding: 130px 0 0;
}


.site-heading-simple {
    margin: 0;
    color: #fff;
    text-align: center;
}

.site-heading-simple h2 {
    font-size: 35px;
    font-weight: 700;
    margin: 0;
}

.site-heading-simple p {
    margin-bottom: 10px;
    font-size: 24px;
}

.honour-items {
    gap: 25px;
}

.honour-item {
    width: 190px;
    display: flex;
    flex-flow: column;
    align-items: center;
    background: #fff;
    padding: 25px;
    border-radius: var(--rounded-30);
    box-shadow: var(--shadow-2);
}

.honour-item span {
    font-size: 35px;
    font-weight: 800;
    color: var(--primary-color);
}

.honour-item:nth-child(2),
.honour-item:nth-child(3) {
    transform: translateY(30px);
}

.honour-item p {
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    color: var(--gray-color2);
}

/* service */

.site-heading svg {
    width: 30px;
}

p.service-home-des {
    font-size: 16px;
    text-align: justify;
    width: 450px;
    color: var(--gray-color2);
    line-height: 30px;
}

.service-item {
    background: #ffffffbd;
    border: 1px solid var(--gray-color-d9);
    padding: 25px;
    border-radius: var(--rounded-30);
    backdrop-filter: blur(20px);
}

.service-item-heading {
    display: flex;
    gap: 20px;
    align-items: center;
}

.service-item-icon {
    background: var(--primary-color);
    padding: 8px 15px;
    border-radius: var(--rounded-40);
}

.service-item-title {
    font-size: 19px;
    font-weight: 600;
    color: var(--secondary-color);
}

.service-item-des {
    text-align: justify;
    margin-top: 20px;
    font-size: 14px;
    color: var(--gray-color2);
    line-height: 25px;
}

.service-items {
    position: relative;
}

.service-items:after {
    position: absolute;
    content: '';
    width: 100%;
    height: 200px;
    background: var(--primary-color);
    border-radius: var(--rounded-30);
    z-index: -1;
    right: 0;
    top: 50%;
    transform: translate(-30%, -50%);
    transition: 0.3s;
    opacity: 0;
}

.service-items.act-animation:after {
    opacity: 1;
    width: 130%;
}


.service-home {
    overflow: hidden;
}

.home .search-icon-toggle svg line,
.home .search-icon-toggle svg circle {
    stroke: #7D7E80;
}

/* Home - Project */

.project-btn {
    display: flex;
    gap: 20px;
    align-items: center;
}

.project-btn p {
    font-size: 16px;
    color: var(--gray-color-888);
}

.project-content-link svg {
    width: 12px;
    height: 12px;
}

.project-content-link {
    width: 40px;
    height: 40px;
    border: 2px solid #fff;
    border-radius: var(--rounded-full);
    display: flex;
    justify-content: center;
    align-items: center;
}

.crs-container {
    overflow: hidden;
    direction: ltr;
    width: 65%;
}

.crs-track {
    display: flex;
    transition: transform 0.5s ease;
}

.crs-item {
    direction: rtl;
    width: 300px;
    height: 400px;
    margin-left: 16px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

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

.crs-controls {
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding: 0 15px;
}

.crs-controls:after {
    position: absolute;
    content: '';
    background: var(--gray-color-d9);
    width: 74%;
    height: 2px;
    right: 0;
    left: 0;
    margin: 0 auto;
    z-index: -1;

}

.crs-buttons {
    display: flex;
    gap: 8px;
}

.crs-buttons button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background-color: #ddd;
    cursor: pointer;
}

.crs-counter {
    font-size: 18px;
    color: var(--gray-color-888);
    font-weight: 400;
}

.crs-counter #crsCurrent {
    font-size: 30px;
    font-weight: 700;
    color: var(--primary-color);
}

.crs-buttons button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--gray-color-888);
    display: flex;
    justify-content: center;
    align-items: center;
}

.crs-buttons button:hover {
    background: var(--secondary-color);
}

.crs-buttons button svg {
    width: 12px;
    height: 12px;
}

#crsNext svg {
    transform: rotate(180deg);
}

.crs-buttons button svg path {
    fill: var(--secondary-color);
}

.crs-buttons button:hover svg path {
    fill: #fff;
}

/* Home - Welcome */

.welcome-slide {
    width: 100%;
    border-radius: 0 0 var(--rounded-30) var(--rounded-30);
    background-size: 100% !important;
    background-position: top !important;
}

.welcome-home .crs-item {
    height: 200px;
    display: flex;
    flex-flow: column;
}

.welcome-home .crs-container {
    overflow: hidden;
    direction: ltr;
    width: 50%;
}

.welcome-home .site-heading {
    padding: 80px 50px 0 50px;
    margin-bottom: 10px;
}

.welcome-home .site-heading h2 {
    font-size: 50px;
    line-height: normal;
    background-image: linear-gradient(45deg, var(--primary-color-50), var(--primary-color));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
    margin: 0;
}

.crs-container {
    padding-bottom: 60px;
}

.about-home-des p {
    font-size: 17px;
    padding: 15px;
    text-align: justify;
    line-height: 31px;
    color: var(--gray-color-888);
}

.about-home-img {
    width: 100%;
    height: auto;
}

.my-8 {
    margin: 130px 0;
}

/* Comment */

/* ساختار کلی */
.custom-comment-wrapper {
    max-width: 100%;
    margin: 0 auto;
}

/* فرم دیدگاه */
.custom-comment-form {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: var(--rounded-20);
    padding: 50px;
    margin-bottom: 2rem;
}

/* ستون‌بندی فرم */
.comment-form-columns {
    display: flex;
    flex-flow: row-reverse;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.comment-inputs {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.comment-textarea {
    flex: 1;
}

/* لیبل‌های شناور */
.floating-input,
.floating-textarea {
    position: relative;
}

.floating-input input,
.floating-textarea textarea {
    width: 100%;
    padding: 1rem 0.8rem;
    border: 1px solid var(--gray-color-d9);
    border-radius: var(--rounded-15);
    font-size: 14px;
    background-color: #fff;
    outline: none;
}

.floating-input label,
.floating-textarea label {
    position: absolute;
    top: -13px;
    right: 1rem;
    background: white;
    padding: 0 10px;
    font-weight: 600;
    font-size: 16px;
    color: var(--secondary-color);
}

.floating-textarea textarea {
    height: 200px;
}

.comment-submit-btn {
    width: 100%;
}

/* دکمه ارسال */
.comment-submit-btn {
    background-color: #ff9100;
    color: white;
    padding: 0.7rem 2rem;
    font-size: 15px;
    border: none;
    border-radius: var(--rounded-10);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.comment-submit-btn:hover {
    background-color: #ffa733;
}

/* لیست نظرات */
.custom-comment-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* هر دیدگاه */
.custom-comment-item {
    border: 1px solid #eee;
    border-radius: var(--rounded-15);
    padding: 1.5rem;
    background-color: #fff;
    margin-bottom: 10px;
}

.comment-reply-btn a {
    display: none;
    font-size: 18px;
    font-weight: 500;
    color: var(--secondary-color);
    padding: 5px 15px 9px 15px;
    border: 1px solid var(--secondary-color);
    border-radius: var(--rounded-10);
}

.comment-reply-btn a:hover {
    color: #fff;
    padding: 5px 15px 9px 15px;
    border: 1px solid var(--secondary-color);
    background: var(--secondary-color);
    border-radius: var(--rounded-10);
}

.comment-reply-btn a:hover svg path {
    fill: #fff;
}

.comment-reply-btn svg {
    margin-right: 10px;
    width: 18px;
}

/* بالای دیدگاه */
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* دکمه پاسخ */
.comment-reply-btn button {
    background-color: #f3f3f3;
    border: none;
    padding: 0.4rem 1.2rem;
    font-size: 14px;
    border-radius: var(--rounded-10);
    cursor: pointer;
    transition: background 0.3s ease;
}

.comment-reply-btn button:hover {
    background-color: #e0e0e0;
}

/* اطلاعات کاربر */
.comment-user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.contact-forms label {
    width: 100%;
    display: inline-block;
}

.user-avatar img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.user-name {
    font-weight: bold;
    font-size: 14px;
}

.comment-date {
    font-size: 12px;
    color: #888;
}

/* متن دیدگاه */
.comment-body-text {
    margin-top: 1rem;
    font-size: 14px;
    color: #333;
    line-height: 1.8;
}

/* Contact */

.wpcf7 form .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1rem;
}

.wpcf7 form .form-col {
    flex: 1 1 30%;
}

.wpcf7 form textarea {
    width: 100%;
    min-height: 200px;
    resize: vertical;
}

.wpcf7 form input,
.wpcf7 form textarea {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: var(--rounded-20);
    width: 100%;
    font-family: inherit;
}

.wpcf7 form .form-submit {
    margin-top: 20px;
    text-align: left;
}

.wpcf7 form .form-submit input[type="submit"] {
    background-color: #ffa500;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: inline-block;
    width: fit-content;
}

.wpcf7 form .form-submit input[type="submit"]:hover {
    background-color: #e69500;
}

.wpcf7-spinner {
    display: none;
}


/* Contact */

.contact-info-image img {
    width: 100%;
    height: auto;
}

.contact-info-des p strong {
    font-size: 30px;
    font-weight: 700;
    color: var(--secondary-color);
}

.contact-info-des p {
    font-size: 17px;
    color: var(--gray-color-888);
}

.contact-info .info-footer-item {
    display: flex;
    margin: 10px 0;
    color: var(--gray-color-888);
    font-size: 20px;
    align-items: center;
    border: none;
    gap: 20px;
}

.contact-info .info-footer-item p {
    margin: 0;
}

.contact-info .info-footer-item p strong {
    color: var(--primary-color);
    margin: 0;
}

.contact-info .info-footer-item .post-article-item-icon {
    width: 40px;
    background: var(--primary-color);
    height: 30px;
    border-radius: var(--rounded-40);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 3;
}
.main-content ul {padding: 0 20px 0 0;margin: 0;}

.main-content ul li {
    margin: 8px 0;
    font-weight: 200;
    color: #777;
}




































/*---------------- Responsive --------------*/
/* xl 1200px  -  lg 992px  -  md 768px  -  sm 576px  -  xs <576px */
/*---------------- xl --------------*/
@media only screen and (min-width: 1200px) {}

@media only screen and (max-width: 1200px) {}

@media only screen and (max-width: 1300px) {}

/*---------------- xl --------------*/
@media only screen and (max-width: 1400px) {}

/*---------------- lg --------------*/
@media only screen and (max-width: 1200px) {}

/*---------------- md --------------*/
@media only screen and (max-width: 992px) {}

/*---------------- sm --------------*/
@media only screen and (max-width: 768px) {}

/*---------------- xs --------------*/
@media only screen and (max-width: 576px) {}