@font-face {
    font-family: 'estedad';
    src: url('../fonts/woff2/Estedad-Regular.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    transition: 0.4s;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
button {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}



section, div, p, a, b, h1, h2, h3, h4, h5, h6, span, label, input, button, textarea, li, ul {
    font-family: "Dana"
}

a {
    text-decoration: none !important;
}

body {
    line-height: 1.8;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}

.index {
    display: none;
}

.width-web {
    width: 1400px;
    margin: auto;
    max-width: 100%;
}

body {
    background-color: #f1f1f1;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: #ffc107 #f1f1f1;
}

    body::-webkit-scrollbar {
        width: 5px;
    }

    body::-webkit-scrollbar-thumb {
        background-color: #ffc107;
        border-radius: 4px;
    }

    body::-webkit-scrollbar-track {
        background-color: #f1f1f1;
        border-radius: 4px;
    }

@media screen and (min-width:360px) and (max-width:767px) {
    p {
        font-size: 14px;
    }
}

:root {
    --black: #000000;
    --yellow: #ffc107;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(180deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
        border-top-color: var(--grey);
    }

    50% {
        transform: rotate(180deg);
        border-top-color: var(--blue);
    }

    100% {
        transform: rotate(360deg);
        border-top-color: var(--grey);
    }
}

* {
    box-sizing: border-box;
}

body {
    background: #f9f9f9;
    padding-bottom: 100px;
}

.loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
}

    .loader.hidden {
        display: none;
    }

    .loader div {
        border-radius: 50%;
        padding: 8px;
        border: 2px solid transparent;
        animation: rotate linear 3.5s infinite;
        border-top-color: var(--black);
        border-left-color: var(--yellow);
        animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
        animation-duration: 3s;
    }

div:hover {
    animation-play-state: paused;
}

.loader,
.loader * {
    will-change: transform;
}

.logo {
    display: none;
}

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

header {
    width: 100%;
    height: 100px;
    z-index: 99999;
    position: fixed;
    background-color: #373737 !important;
    top: 0;
}

.logo {
    width: 80px;
    height: 80px;
    margin-top: 10px;
    float: right;
}

    .logo img {
        width: 100%;
    }

.them-name {
    font-size: 18px;
    margin-top: 35px;
    float: right;
    margin-right: -15px;
}

    .them-name a {
        text-decoration: none;
        color: #fff;
    }

.btnsearch {
    width: 45px;
    height: 45px;
    margin-top: 25px;
    margin-left: 20px;
    float: left;
    background: url("../img/search.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 40px;
}

.full-search {
    display: none;
    width: 100%;
    height: 100%;
    background: #000;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
    opacity: 0.8;
    text-align: center;
    transform: translateX(0%);
}

.closesearch {
    width: 60px;
    height: 60px;
    display: block;
    line-height: 60px;
    top: 65px;
    position: absolute;
    right: 40px;
    border-radius: 5px;
    font-size: 3.8em;
    background: url("assets/img/icons8-close.svg");
    background-repeat: no-repeat;
    background-position: center;
}

.search-form {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 100%;
    position: fixed;
}

    .search-form input {
        outline: none;
        width: 88%;
        line-height: 3;
        text-align: center;
        font-size: 25px;
        background: transparent;
        border: none;
        color: #fff;
    }

.main-menu {
    float: right;
    margin: 25px 100px 0px 0px;
}

    .main-menu > ul > li {
        float: right;
        margin-left: 40px;
        position: relative;
    }

    .main-menu ul li a {
        color: #fff;
        font-size: 18px;
        padding: 10px 15px;
        text-decoration: none;
        display: block;
    }

        .main-menu ul li a:hover {
            color: #ffc107;
            transition: 0.5s;
        }

    .main-menu ul li ul {
        width: 200px;
        height: auto;
        background-color: #ffc107;
        border-radius: 5px;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.5s ease;
        text-align: center;
        color: #fff;
    }

.hidden {
    margin-left: -60px;
}

.header-background > .main-menu ul li ul a {
    font-size: 18px;
}

.main-menu ul li ul a:hover {
    color: #fff;
    font-size: 20px;
}

.main-menu ul li:hover ul {
    visibility: visible;
    opacity: 1;
}

.main-menu ul li ul li a {
    font-size: 15px;
    line-height: 25px;
}

.main-menu ul {
    list-style: none;
}

.slideshow-container {
    position: relative;
}

body header {
    position: fixed;
    height: 100px;
    z-index: 99;
    top: 0;
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

    body header.slider-hover {
        background-color: #373737 !important;
    }

.header-fixed {
    background-color: #cdcdcd !important;
}

.slider-text {
    position: absolute;
    width: 52%;
    top: 25%;
    right: 5%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: slideIn 2s ease forwards;
    color: #ffc107;
    font-size: 38px;
    text-align: right;
}

.txt-slider {
    width: 100%;
    top: 75px;
    font-weight: 200;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: slideIn 2s ease forwards;
    color: #f5f5f5;
    font-size: 18px;
    right: 5px;
    text-align: justify;
    direction: rtl;
}

@keyframes slideIn {
    0% {
        opacity: 0;
        transform: translateX(-50%);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/*slider*/
.swiper {
    width: 100%;
    height: 800px;
    margin: auto;
    max-width: 100%;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

    .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: brightness(0.5);
    }

.swiper-button-next:after,
.swiper-button-prev:after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size);
    text-transform: none !important;
    letter-spacing: 0;
    font-variant: initial;
    line-height: 1;
    color: #ffc107;
}

.btn-show-slider {
    width: 30%;
    height: 50px;
    background-color: #ffc107;
    text-align: center;
    margin-left: auto;
    border-radius: 50px;
    font-size: 16px;
    text-align: center;
    direction: rtl;
    color: #ffffff;
    padding: 10px 30px 10px 30px;
}

/*about us*/
.homepage {
    width: 80%;
    margin-top: 150px;
    height: auto;
    margin-bottom: 60px;
}

.head-h {
    margin-bottom: 20px;
    font-size: 38px;
    float: right;
    font-weight: 800;
    color: #373737;
    z-index: 1;
    position: relative;
    user-select: none;
    text-align: right;
    direction: rtl;
}

.head-h {
    color: #373737;
}

.day .head-h {
    color: #f1f1f1;
}

.night .head-h {
    color: #f1f1f1;
}

.about-left {
    width: 48%;
    height: auto;
    float: left;
    margin-top: 100px;
}

.about-right {
    width: 48%;
    height: auto;
    float: right;
    font-size: 16px;
    font-weight: 500;
    color: #958C8C;
    text-align: justify;
    direction: rtl;
    margin-right: 0px;
    line-height: 2;
}

.about-text {
    display: inline-block;
    width: 550px;
    font-size: 16px;
    color: #626262;
    float: right;
    margin-top: -25px;
    margin-right: 20px;
    font-weight: 400;
}

.img-about img {
    width: 100%;
    border-radius: 10px;
}

.img-about {
    position: relative;
}

    .img-about::after {
        content: "";
        background: #ffc107;
        border-radius: 12px;
        display: block;
        width: 98%;
        position: absolute;
        right: -14px;
        bottom: -4px;
        height: 95%;
        z-index: -1;
    }

/*Our Services*/
:root {
    --background-dark: #2d3548;
    --text-light: rgba(255, 255, 255, 0.6);
    --text-lighter: rgba(255, 255, 255, 0.9);
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 32px;
    --spacing-xxl: 64px;
    --width-container: 1200px;
}

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

.hero-section {
    width: 80%;
    display: flex;
    flex-direction: column;
    height: auto;
    margin-top: 60px;
    margin-bottom: 60px;
}

.title-card-grid {
    font-size: 38px;
    color: #373737;
    float: right;
    margin-bottom: 20px;
    z-index: 1;
    user-select: none;
    text-align: right;
    direction: rtl;
    font-weight: 800;
}

.image-card-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: var(--spacing-l);
    grid-row-gap: var(--spacing-l);
    width: 100%;
    margin: 0 auto;
}

@media screen and (min-width: 360px) and (max-width:767px) {
    .image-card-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 960px) {
    .image-card-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.image-card {
    list-style: none;
    position: relative;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

    .image-card:before {
        content: '';
        display: block;
        padding-bottom: 150%;
        width: 100%;
    }

.card__background {
    background-size: cover;
    background-position: center;
    border-radius: var(--spacing-l);
    bottom: 0;
    filter: brightness(0.75) saturate(1.2) contrast(0.85);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    transform-origin: center;
    trsnsform: scale(1) translateZ(0);
    transition: filter 200ms linear, transform 200ms linear;
}

.image-card:hover .card__background {
    transform: scale(1.05) translateZ(0);
}

.image-card-grid:hover > .image-card:not(:hover) .card__background {
    filter: brightness(0.5) saturate(0) contrast(1.2) blur(2px);
}

.card__category:hover .card__heading {
    transform: scale(1.05) translateZ(0);
}

.image-card-grid:hover > .image-card:not(:hover) .card__heading {
    filter: brightness(0.5) saturate(0) contrast(1.2) blur(2px);
}

.card__heading:hover .card__category {
    transform: scale(1.05) translateZ(0);
}

.image-card-grid:hover > .image-card:not(:hover) .card__category {
    filter: brightness(0.5) saturate(0) contrast(1.2) blur(2px);
}

.card__content {
    left: 0px;
    width: 100%;
    padding: var(--spacing-l);
    position: absolute;
    top: 0;
}

.card__category {
    color: var(--text-light);
    font-size: 24px;
    margin-bottom: var(--spacing-s);
    text-transform: uppercase;
    color: #ffc107;
    text-align: right;
    direction: rtl;
    font-weight: 800;
}

.card__heading {
    color: var(--text-lighter);
    font-size: 16px;
    line-height: 2;
    color: #ffc107;
    text-align: right;
    direction: rtl;
}

.title-card-grid {
    color: #373737;
}

.day .title-card-grid {
    color: #f1f1f1;
}

.night .title-card-grid {
    color: #f1f1f1;
}

/*Team Members*/
* {
    box-sizing: border-box;
}

.team-member {
    width: 80%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 60px;
    margin-bottom: 60px;
}

.txt-container {
    width: 100%;
    font-size: 38px;
    color: #373737;
    margin-bottom: 20px;
    user-select: none;
    float: right;
    text-align: right;
    font-weight: 800;
}

.container-wrapper {
    display: flex;
    justify-content: center;
}

.container {
    display: inline-block;
    width: 20%;
    position: relative;
    vertical-align: top;
    margin: 30px;
}

.image {
    display: block;
    border-radius: 10px;
    width: 100%;
    height: auto;
}

.overlay {
    position: absolute;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    color: #ffc107;
    width: 100%;
    transition: .5s ease;
    opacity: 0;
    font-size: 16px;
    padding: 10px;
    text-align: center;
    transition: opacity 2s ease;
    border-radius: 0px 0px 10px 10px;
    z-index: 1;
    user-select: none;
}

.container:hover .overlay {
    opacity: 1;
}

.container:hover {
    border-radius: 10px;
}

    .container:hover img {
        border: 1px solid #ffc107;
    }

    .container:hover .overlay {
        opacity: 1;
    }

.txt-container {
    color: #373737;
}

.day .txt-container {
    color: #f1f1f1;
}

.night .txt-container {
    color: #f1f1f1;
}

/*Counter*/
.counter {
    width: 80%;
    height: auto;
    margin-top: 60px;
    margin-bottom: 60px;
}

.txt-counter {
    font-size: 38px;
    font-weight: bold;
    z-index: 1;
    position: relative;
    float: right;
    text-align: right;
    color: #373737;
    user-select: none;
    margin-bottom: 20px;
}

.txt-counter {
    color: #373737;
}

.day .txt-counter {
    color: #f1f1f1;
}

.night .txt-counter {
    color: #f1f1f1;
}

@keyframes rainbowAnimation {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.employee-counter span {
    font-size: 36px;
    font-weight: bold;
    z-index: 1;
    position: relative;
    user-select: none;
}

.employee-counter div {
    width: 118%;
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
    z-index: 1;
    position: relative;
    user-select: none;
}

.employee-counter-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 0px;
}

.employee-counter {
    width: 200px;
    height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    color: #ffffff;
    position: relative;
    overflow: hidden;
    background-color: #ffc107;
    border-radius: 18px
}

@keyframes count-up {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

button {
    /*position: fixed;*/
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
}

    button:hover {
        transform: scale(1.1);
    }

svg {
    width: 24px;
    height: 24px;
    fill: #8853eb;
}

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.employee-counter-container {
    width: 100%;
    height: 200px;
    border-radius: 10px;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-left: auto;
    margin-right: auto;
}

.employee-counter {
    position: relative;
    width: 100%;
    height: 175px;
    padding: 0px;
    margin-left: 5px;
    margin-right: 5px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@keyframes rainbowAnimation {
    0% {
        background-position: 50% 0%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.employee-line {
    width: 20px;
    height: 100px;
    border-radius: 20px;
    background-color: #ffc107;
}

@keyframes count-up {
    0% {
        opacity: 0;
        transform: translateY(100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

button {
    /*position: fixed;*/
    bottom: 5px;
    right: 0px;
    padding: 10px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.3s;
    z-index: 999;
}

    button:hover {
        transform: scale(1.1);
    }

svg {
    width: 35px;
    height: 35px;
    fill: #8853eb;
}

@keyframes bounce {

    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

.icon-counter-about {
    max-width: 50px;
}

    .icon-counter-about img {
        width: 50px;
        height: 50px;
    }

.icon-counter-about {
    max-width: 50px;
}

    .icon-counter-about img {
        width: 50px;
        height: 50px;
    }

.icon-counter-about-dark {
    display: none;
    max-width: 50px;
}

body.day .icon-counter-about {
    display: block;
}

body.night .icon-counter-about-dark {
    display: block;
}

@media screen and (max-width:1024px) {
    .item-counter-about {
        margin-left: 10px;
        margin-right: 10px;
    }
}

@media screen and (min-width:360px) and (max-width:767px) {
    .counters-page-about {
        flex-direction: column;
        height: 800px;
        margin-top: 0px;
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .item-counter-about {
        width: 100%;
        text-align: center;
    }

        .item-counter-about div {
            height: 40px;
            top: 0px;
            font-size: 18px;
        }

        .item-counter-about span {
            font-size: 25px;
            top: 0px;
        }
}

/*comment-index*/
.title-comment {
    font-size: 38px;
    text-transform: uppercase;
    color: #373737;
    text-align: right;
    direction: rtl;
    font-weight: 800;
    margin-bottom: 20px;
}

.title-comment {
    color: #373737;
}

.day .title-comment {
    color: #f1f1f1;
}

.night .title-comment {
    color: #f1f1f1;
}

.slider-comment {
    top: 50px;
}

.slide-container {
    width: 80%;
    position: relative;
    height: auto;
    margin-bottom: 100px;
}

.slide-content {
    overflow: hidden;
    border-radius: 25px;
}

section {
    margin-top: 20px;
    margin-bottom: -50px;
}

.card {
    border-radius: 25px;
    background-color: #FFF;
}

.image-content,
.card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
}

.image-content {
    position: relative;
    row-gap: 5px;
    padding: 25px 0;
}

.overlay-comment {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #ffc107;
    border-radius: 25px 25px 0 25px;
}

    .overlay-comment::before,
    .overlay-comment::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        background-color: #ffc107;
    }

    .overlay-comment::after {
        border-radius: 0 25px 0 0;
        background-color: #FFF;
    }

.card-image-comment {
    position: relative;
    height: 150px;
    width: 150px;
    border-radius: 50%;
    background: #FFF;
    padding: 3px;
}

.card img {
    filter: brightness(1);
}

.card-image-comment .card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffc107;
}

.name-comment-index {
    font-size: 24px;
    font-weight: bold;
    color: #000;
}

.description {
    font-size: 14px;
    color: #958C8C;
    text-align: justify;
    height: auto;
    margin-top: 10px;
}

    .description p {
        font-family: Shabnam, sans-serif;
    }

.button-comment {
    height: 50px;
    border: none;
    font-size: 16px;
    color: #FFF;
    padding: 8px 16px;
    background-color: #ffc107;
    border-radius: 50px;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: 20px;
    padding: 10px 30px 10px 30px;
}

    .button-comment:hover {
        background: #ffc107;
    }

.swiper-navBtn {
    color: #ffc107;
    transition: color 0.3s ease;
}

    .swiper-navBtn:hover {
        color: #ffc107;
    }

.btn-navBtn::before,
.btn-navBtn::after {
    font-size: 35px;
}

.comment-button-next {
    right: 0;
}

.comment-button-prev {
    left: 0;
}

.swiper-pagination-bullet {
    background-color: #ffc107;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #ffc107;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic,
.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    display: none;
}

@media screen and (max-width: 768px) {
    .swiper-navBtn {
        display: none;
    }
}

/*project-index*/
* {
    margin: 0;
    box-sizing: border-box;
}

.title-project-index {
    color: #373737;
    text-align: right;
    font-size: 38px;
    direction: rtl;
    font-weight: 800;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.title-project-index {
    color: #373737;
}

.day .title-project-index {
    color: #f1f1f1;
}

.night .title-project-index {
    color: #f1f1f1;
}

.container-project {
    max-width: 100%;
    height: auto;
    margin: auto;
}

.row-project-index {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    direction: rtl;
}

    .row-project-index img {
        max-width: 100%;
        height: 350px;
        vertical-align: middle;
        border-radius: 10px;
    }

.gallery-project {
    width: 80%;
    display: block;
    min-height: auto;
    margin-bottom: 50px;
    margin-top: 50px;
}

.gallery-item-inner .txt-project {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gallery-item-inner:hover .txt-project {
    opacity: 1;
}

.gallery-project .gallery-item {
    position: relative;
    width: calc(100% / 3);
    padding: 15px;
}

    .gallery-project .gallery-item .gallery-item-inner {
        position: relative;
    }

    .gallery-project .gallery-item .txt-project {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 10px;
        box-sizing: border-box;
        color: white;
        font-size: 18px;
    }

    .gallery-project .gallery-item:hover .txt-project {
        display: flex;
    }

.gallery-project .gallery-item-inner img {
    width: 100%;
    border: 3px solid #ffe391;
    transition: filter 0.5s;
}

.gallery-project .gallery-item .txt-project {
    display: none;
    position: absolute;
    top: 0;
    left: -10px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    font-size: 24px;
    opacity: 0;
    transition: opacity 5s;
}

.gallery-project .gallery-item:hover .gallery-item-inner img {
    filter: brightness(0.5) saturate(0) contrast(1.2) blur(2px);
}

.gallery-project .gallery-item:hover .txt-project {
    display: flex;
    animation: fadeIn 0.5s forwards;
}

.gallery-item-inner .text-project {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.gallery-item-inner:hover .text-project {
    opacity: 1;
}

.gallery-project .gallery-item .text-project {
    display: none;
    position: absolute;
    top: 40px;
    left: -10px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 10px;
    box-sizing: border-box;
    color: white;
    font-size: 16px;
}

.gallery-project .gallery-item:hover .text-project {
    display: flex;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gallery-project .gallery-filter {
    width: 100%;
    text-align: center;
    margin-bottom: 40px;
}

    .gallery-project .gallery-filter .filter-item {
        color: #958C8C;
        font-size: 16px;
        border: 2px solid #ffc107;
        text-transform: uppercase;
        display: inline-block;
        border-radius: 20px;
        margin-right: 8px;
        cursor: pointer;
        padding: 8px 20px 8px 20px;
        line-height: 1.2;
        transition: all 0.3s ease;
    }

        .gallery-project .gallery-filter .filter-item.active {
            color: rgb(255, 255, 255);
            border-color: #ffc107;
            background: #ffc107;
        }

.gallery-project .gallery-item {
    width: calc(100% / 3);
    padding: 15px;
}

.gallery-project .gallery-item-inner img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border: 3px solid #ffe391;
}

.gallery-project .gallery-item.show {
    animation: fadeIn 0.5s ease;
}

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

    100% {
        opacity: 1;
    }
}

.gallery-project .gallery-item.hide {
    display: none;
}

@media(max-width: 491px) {
    .gallery .gallery-item {
        width: 50%;
    }
}

@media(max-width: 467px) {
    .gallery .gallery-item {
        width: 100%;
    }

    .gallery .gallery-filter .filter-item {
        margin-bottom: 10px;
    }
}

.gallery-project .gallery-item {
    width: calc(100% / 3);
    padding: 20px;
}

.gallery-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.gallery-item-inner:hover img {
    filter: brightness(0.5) saturate(0) contrast(1.2) blur(2px);
    transition: filter 0.5s ease;
}

/*weblog*/
a {
    -webkit-transition: color 110ms ease-in-out;
    -moz-transition: color 110ms ease-in-out;
    -o-transition: color 110ms ease-in-out;
    transition: color 110ms ease-in-out;
    text-decoration: none;
    color: #000;
}

.my-blog {
    margin-top: 100px;
    width: 80%;
    padding: 0px;
    margin-bottom: 0px;
}

.my-blog-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
}

.content-heading {
    width: 100%;
    font-size: 38px;
    text-transform: uppercase;
    color: #373737;
    position: relative;
    letter-spacing: 0.7px;
    font-weight: 800;
    text-align: right;
    direction: rtl;
    margin-bottom: 20px;
    padding: 0px;
}

.content-heading {
    color: #373737;
}

.day .content-heading {
    color: #f1f1f1;
}

.night .content-heading {
    color: #f1f1f1;
}

.my-blog-header p {
    font-size: 1.6rem;
    line-height: 2;
    font-weight: 300;
}

.my-blog-grid {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    margin: 0 auto 3em;
    -webkit-justify-content: center;
    justify-content: center;
    position: relative;
}

.my-blog-card {
    /*width: 33.3%;*/
    margin: 1em;
    background: white;
    -webkit-transition: 0.6s ease;
    -o-transition: 0.6s ease;
    transition: 0.6s ease;
    border-radius: 10px;
    border: 1px solid orange;
}

    .my-blog-card:hover {
        -webkit-transform: translateY(-5px);
        -ms-transform: translateY(-5px);
        transform: translateY(-5px);
        -webkit-box-shadow: 0 18px 35px rgba(50, 50, 90, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
        box-shadow: 0 18px 35px rgba(50, 50, 90, 0.1), 0 8px 15px rgba(0, 0, 0, 0.07);
    }

    .my-blog-card img {
        display: block;
        width: 100%;
        border-radius: 10px;
    }

.my-blog-text {
    position: relative;
    padding: 1.5rem;
    background-color: #fff;
    border-radius: 10px;
}

    .my-blog-text:before {
        position: absolute;
        content: "";
        z-index: 2;
        bottom: 99%;
        left: 0;
        width: 100%;
        height: 90px;
        background-image: -webkit-linear-gradient(top, transparent 0%, #ffffff 100%);
        background-image: linear-gradient(to bottom, transparent 0%, #ffffff 100%);
    }

.my-blog-card h3 {
    text-transform: uppercase;
    color: #ffc107;
    text-align: center;
    font-size: 24px;
    line-height: 2;
}

    .my-blog-card h3:hover::after {
        width: 80px;
    }

.animate-text {
    font-weight: 300;
    font-size: 16px;
    line-height: 2;
    color: #958C8C;
    text-align: justify;
    direction: rtl;
    overflow: hidden;
    position: relative;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

    .animate-text::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 2em;
    }

.btn-show {
    width: 50%;
    height: 50px;
    border: none;
    background-color: #ffc107;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50px;
    margin-bottom: 25px;
    /* padding: 8px 16px; */
}

    .btn-show a {
        position: relative;
        color: #ffffff;
        font-size: 16px;
        text-align: center;
        width: 100%;
        display: flex;
        height: 100%;
        align-items: center;
        vertical-align: middle;
        justify-content: center;
    }

.my-blog-card:hover span {
    transform: translateY(0px);
    opacity: 1;
}

@media only screen and (max-width: 996px) {
    .my-blog-grid {
        flex-flow: wrap;
    }

    .my-blog-card {
        width: 57vh;
    }
}

@media only screen and (max-width: 750px) {
    .my-blog-card {
        width: 100%;
    }
}

@media only screen and (max-width: 500px) {
    .content-heading {
        font-size: 2.5rem;
    }

    .my-blog {
        padding: 1rem 1rem 0rem 1rem;
        width: 80%;
    }

    .my-blog-card {
        margin: 1rem 0;
    }
}

/*news-index*/
.news-index {
    width: 80%;
    margin-top: 100px;
}

.blog-card {
    position: relative;
    height: 370px;
    width: 100%;
    margin: auto;
    border-radius: 25px;
    background: white;
    direction: rtl;
    margin-bottom: 100px;
}

.inner-part {
    position: absolute;
    display: flex;
    height: 360px;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
}

#imgTap:checked ~ .inner-part {
    padding: 0;
    transition: .1s ease-in;
}

.inner-part .img {
    height: 250px;
    width: 30%;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 20px;
}

#imgTap:checked ~ .inner-part .img {
    height: 370px;
    width: 850px;
    z-index: 99;
    margin-top: 10px;
    transition: .3s .2s ease-in;
}

.img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    cursor: pointer;
    opacity: 0;
    transition: .6s;
}

#tap-1:checked ~ .inner-part .img-1,
#tap-2:checked ~ .inner-part .img-2,
#tap-3:checked ~ .inner-part .img-3 {
    opacity: 1;
    transition-delay: .2s;
}

.content {
    padding: 0 30px 0 0px;
    width: 530px;
    margin-left: 50px;
    opacity: 0;
    transition: .6s;
}

#imgTap:checked ~ .inner-part .content {
    display: none;
}

#tap-1:checked ~ .inner-part .content-1,
#tap-2:checked ~ .inner-part .content-2,
#tap-3:checked ~ .inner-part .content-3 {
    width: 60%;
    opacity: 1;
    margin-left: 0px;
    z-index: 100;
    transition-delay: .3s;
    margin-right: 30px;
}

.content span {
    display: block;
    color: #000;
    margin-bottom: 15px;
    font-size: 22px;
    font-weight: 500
}

.content .title {
    font-size: 30px;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
}

.content .text {
    color: #cdcdcd;
    font-size: 19px;
    margin-bottom: 30px;
    line-height: 1.5em;
    text-align: justify;
}

.content button {
    display: inline-flex;
    padding: 15px 20px;
    border: none;
    font-size: 16px;
    text-transform: uppercase;
    color: #fff0e6;
    font-weight: 600;
    letter-spacing: 1px;
    border-radius: 50px;
    cursor: pointer;
    outline: none;
    border: 1px solid #ffc107;
    background: #ffc107;
}

    .content button:hover {
        background: #ffc107;
    }

.sliders {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 12;
}

#imgTap:checked ~ .sliders {
    display: none;
}

.sliders .tap {
    position: relative;
    height: 10px;
    width: 50px;
    background: #d9d9d9;
    border-radius: 5px;
    display: inline-flex;
    margin: 0 3px;
    cursor: pointer;
}

    .sliders .tap:hover {
        background: #cccccc;
    }

    .sliders .tap:before {
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        height: 100%;
        width: -100%;
        background: #ffc107;
        border-radius: 10px;
        transform: scaleX(0);
        transition: transform .6s;
        transform-origin: left;
    }

input[type="radio"],
input[type="checkbox"] {
    display: none;
}

#tap-1:checked ~ .sliders .tap-1:before,
#tap-2:checked ~ .sliders .tap-2:before,
#tap-3:checked ~ .sliders .tap-3:before {
    transform: scaleX(1);
    width: 100%;
}

.content .text {
    color: #4e4a67;
    font-size: 19px;
    margin-bottom: 30px;
    line-height: 1.5em;
    text-align: justify;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/*footer*/
.footer {
    width: 100%;
    height: auto;
    color: #fff;
    align-items: center;
    position: relative;
}

.back-footer img {
    position: absolute;
    width: 100%;
    height: 100%;
    filter: brightness(0.3);
    object-fit: cover;
}

.footer-column {
    width: 33%;
    height: auto;
    float: right;
    position: relative;
    margin-top: 80px;
    text-align: right;
    margin-bottom: 70px;
}

.footer-logo {
    width: 100px;
}

.logo-footer {
    width: 100px;
    float: right;
    padding-right: 10px;
    padding-top: 10px;
}

.them-name-footer {
    font-size: 18px;
    margin-top: -65px;
    margin-right: 70px;
}

    .them-name-footer a {
        text-decoration: none;
        color: #ffffff;
    }

.txtfooter {
    font-weight: 400;
    font-size: 16px;
    line-height: 2;
    color: #fff;
    text-align: justify;
    direction: rtl;
    width: 81%;
    float: right;
}

.social-media-footer {
    margin-right: 90px;
    margin-top: 45px;
    float: right;
}

    .social-media-footer ul {
        position: absolute;
        transform: translate(-50%, -50%);
        display: flex;
        list-style: none;
    }

        .social-media-footer ul li .fab {
            font-size: 30px;
            line-height: 60px;
        }

        .social-media-footer ul li a {
            position: relative;
            display: flex;
            width: 40px;
            height: 40px;
            text-align: center;
            margin-right: 10px;
        }

            .social-media-footer ul li a:hover {
                transform: scale(1.1);
                transition: 1.5s;
            }

            .social-media-footer ul li a i {
                font-size: 30px;
                transition: 0.3s;
            }

            .social-media-footer ul li a i {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
            }

            .social-media-footer ul li a img {
                width: 25px;
            }

.txt-h-footer {
    font-weight: 800;
    font-size: 24px;
    text-align: justify;
    color: #fff;
    float: right;
    width: 100%;
    text-align: right;
    margin-bottom: 20px;
}

.txt-center-footer {
    margin-top: 20px;
    font-size: 16px;
    color: #fff;
    text-align: right;
    direction: rtl;
}

    .txt-center-footer a {
        text-decoration: none;
        color: #fff;
        padding-top: 8px;
    }

.txt-right-footer {
    margin-top: 15px;
    font-weight: bold;
    font-size: 16px;
    color: #fff;
}

    .txt-right-footer a {
        text-decoration: none;
        color: #fff;
    }

.icon-phone {
    width: 39px;
    height: 39px;
    display: inline-block;
    text-align: center;
    float: right;
    margin-left: 10px;
}

    .icon-phone img {
        width: 30px;
    }

.icon-gmail {
    width: 39px;
    height: 39px;
    margin-left: 10px;
    text-align: center;
    display: inline-block;
    float: right;
}

    .icon-gmail img {
        width: 30px;
    }

.icon-location {
    width: 39px;
    height: 39px;
    margin-left: 10px;
    display: inline-block;
    text-align: center;
    float: right;
}

    .icon-location img {
        width: 30px;
    }

.icon-clock {
    width: 39px;
    height: 39px;
    margin-left: 10px;
    display: inline-block;
    text-align: center;
    float: right;
}

    .icon-clock img {
        width: 30px;
    }

.double-dote {
    display: inline-block;
    color: #ffc107;
    font-size: 20px;
    margin-left: 2px;
    margin-right: 2px;
}

/*scrool*/
.scroll-btn svg {
    fill: #ffc107;
    border-radius: 50px;
    background-color: #000;
}

.scroll-top-btn {
    width: 40px;
    height: 40px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none;
    background-position: right;
    border-radius: 50px;
    border: 1px solid #ffe391;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/*img-page:about,project,...*/
.head-page-img {
    margin-bottom: 50px;
    width: 100%;
}

.img-head-about {
    width: 100%;
    height: 400px;
    filter: brightness(0.4);
    position: relative;
    object-fit: cover;
}

.NamePage {
    position: relative;
    color: #ffc107;
    font-size: 38px;
    margin-right: 0px;
    margin-top: -270px;
    text-align: right;
    float: right;
    font-weight: 800;
}

.breadcrumb {
    position: relative;
    color: #ffc107;
    font-size: 24px;
    margin-right: 0px;
    margin-top: -190px;
    text-align: right;
    float: right;
    font-weight: 200;
}

.txt-link:hover {
    color: #fff;
    transition: 1s;
}

/*page-about*/
.txt-page-about {
    width: 80%;
    height: auto;
    border-radius: 10px;
    margin-top: 100px;
}

.p-right {
    width: 600px;
    float: right;
    margin-top: -15px;
    text-align: justify;
    direction: rtl;
}

.p-about {
    font-size: 38px;
    margin-top: 5px;
    margin-left: 20px;
    color: #373737;
    margin-right: 15px;
    text-align: right;
    direction: rtl;
    font-weight: 800;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.p-about {
    color: #373737;
}

.day .p-about {
    color: #373737;
}

.night .p-about {
    color: #f1f1f1;
}

.img-left {
    width: 50%;
    float: left;
    margin-top: 50px;
}

.img-head-page-about {
    width: 100%;
    height: 414px;
    float: left;
    border-radius: 10px;
}

.img-left img {
    width: 100%;
    border-radius: 10px;
}

.img-left {
    position: relative;
}

    .img-left::after {
        content: "";
        background: #ffc107;
        border-radius: 12px;
        display: block;
        width: 98%;
        position: absolute;
        right: -14px;
        bottom: -15px;
        height: 98%;
        z-index: -1;
    }

.txt-about {
    width: 45%;
    font-size: 16px;
    color: #958C8C;
    margin-right: 20px;
    margin-top: 20px;
    text-align: justify;
    float: right;
    direction: rtl;
    line-height: 2;
    font-weight: 400;
}

.counter-about {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-right: 20px;
    float: right;
    width: 22%;
}

.vertical-line {
    width: 1px;
    height: 100px;
    background-color: #ffc107;
}

.item-counter {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffc107;
    overflow: hidden;
    text-align: center;
}

    .item-counter span {
        font-size: 32px;
        font-weight: bold;
        color: #ffc107;
    }

    .item-counter div {
        color: #ffc107;
        font-size: 20px;
    }

.team-page-about {
    height: auto;
    width: 80%;
    margin-bottom: 100px;
    margin-top: 100px;
}

@import url("../css2");

body {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    height: 100vh;
}

.txt-person {
    width: 100%;
    font-size: 38px;
    margin-bottom: 20px;
    user-select: none;
    float: right;
    text-align: right;
    margin-right: 40px;
    font-weight: 800;
}

.txt-person {
    color: #373737;
}

.night .txt-person {
    color: #f1f1f1;
}

.person {
    width: 24%;
    align-items: center;
    display: inline-flex;
    flex-direction: column;
}

.item {
    border-radius: 50%;
    height: 312px;
    -webkit-tap-highlight-color: transparent;
    transform: scale(0.48);
    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
    width: 400px;
}

    .item:after {
        background-color: #ffc107;
        content: "";
        height: 10px;
        position: absolute;
        top: 390px;
        width: 100%;
    }

    .item:hover {
        transform: scale(0.54);
    }

.item-inner {
    clip-path: path("M 390,400 C 390,504.9341 304.9341,590 200,590 95.065898,590 10,504.9341 10,400 V 10 H 200 390 Z");
    position: relative;
    transform-origin: 50%;
    top: -200px;
}

.circle {
    background-color: #ffc107;
    border-radius: 50%;
    cursor: pointer;
    height: 380px;
    left: 10px;
    pointer-events: none;
    position: absolute;
    top: 210px;
    width: 380px;
}

.img {
    pointer-events: none;
    position: relative;
    transform: translateY(20px) scale(1.15);
    transform-origin: 50% bottom;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.item:hover .img {
    transform: translateY(0) scale(1.2);
}

.img1 {
    left: 10px;
    top: 164px;
    width: 400px;
    height: 430px;
}

.img2 {
    left: 10px;
    top: 220px;
    width: 360px;
    height: 430px;
    zoom: -50px;
}

.divider {
    background-color: #ffc107;
    height: 1px;
    width: 160px;
}

.name {
    color: #ffc107;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

.title {
    color: #ffc107;
    font-size: 20px;
    margin-top: 4px;
}

/*page-project*/
.my-project {
    width: 80%;
    margin-bottom: 150px;
}

.title-project {
    color: #373737;
    text-align: center;
    font-size: 38px;
    margin-bottom: 25px;
    font-weight: 800;
}

.title-project {
    color: #373737;
}

.day .title-project {
    color: #f1f1f1;
}

.night .title-project {
    color: #373737;
}

.p-filter-project {
    color: #373737;
    font-size: 16px;
    margin-left: 10px;
    margin-right: 10px;
}

#gallery {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    width: 100%;
    text-align: right;
    direction: rtl;
}

#gallery-filter {
    display: flex;
    top: 20px;
    width: 35%;
    justify-content: center;
    align-items: center;
    padding: 15px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
    direction: rtl;
}

#gallery figure {
    position: relative;
    margin: 15px;
    width: 300px;
    height: 300px;
    transition: 0.2s;
    text-align: center;
    margin-bottom: 20px;
    width: calc(90% / 4);
}

    #gallery figure.cub {
        width: calc(100% / 3);
    }

    #gallery figure.on-grass {
        width: calc(100% / 3);
    }

    #gallery figure.diminish {
        display: none;
    }

    #gallery figure img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    #gallery figure:hover img {
        opacity: 0.9;
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }

html,
button,
input,
select,
textarea {
    color: #bbb;
    border-radius: 15px;
}

#gallety-filter label {
    color: #333;
    font-size: 1.2rem;
    margin-right: 10px;
}

#categories {
    padding: 0px 0px 0px 25px;
    border-radius: 5px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

    #categories:hover {
        background-color: #e0e0e0;
    }

    #categories:focus {
        outline: none;
    }

.txt-pic {
    font-size: 20px;
}

#gallery figure:hover img {
    filter: brightness(0.5) saturate(0) contrast(1.2) blur(2px);
    transition: filter 0.5s ease;
}

#gallery figure:not(:hover) img {
    transform: scale(1.05) translateZ(0);
    transition: filter 0.5s ease;
}

#gallery figure .txt-pic {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    z-index: 1;
    opacity: 0;
    transition: opacity 1s;
}

#gallery figure:hover .txt-pic {
    opacity: 1;
}

/*page-team*/
.page-team {
    width: 80%;
    height: auto;
    margin-top: 100px;
}

.img-page-team {
    width: 30%;
    float: right;
}

    .img-page-team img {
        width: 300px;
        height: 360px;
        margin-top: 20px;
        border-radius: 10px;
        border: 10px solid #ffc107;
        float: right;
    }

.name-team-member {
    width: 66%;
    float: right;
    margin-right: 50px;
    margin-top: 20px;
    color: #ffc107;
    font-size: 38px;
    text-align: right;
}

.duty-one {
    font-weight: 400;
    font-size: 24px;
    color: #958C8C;
}

.duty {
    width: 66%;
    float: right;
    margin-right: 50px;
    margin-top: 20px;
    color: #958C8C;
    font-size: 38px;
    font-weight: 222;
    text-align: right;
    direction: rtl;
}

.duty-dote1 {
    display: inline-block;
    color: #ffc107;
    font-size: 32px;
    margin-left: 45px;
    margin-right: 30px;
    font-weight: 400;
}

.duty-dote2 {
    display: inline-block;
    color: #ffc107;
    font-size: 32px;
    margin-left: 47px;
    margin-right: 30px;
    font-weight: 400;
}

.duty-dote3 {
    display: inline-block;
    color: #ffc107;
    font-size: 32px;
    margin-left: 46px;
    margin-right: 32px;
    font-weight: 400;
}

.Response-duty-dote {
    display: inline-block;
    font-size: 20px;
    color: #958C8C;
}

.txt-duty {
    width: 100%;
    margin-top: 30px;
    font-size: 16px;
    font-weight: 400;
    color: #958C8C;
    text-align: justify;
    direction: rtl;
    float: right;
    line-height: 2;
}

.line-team {
    width: 85%;
    height: 2px;
    background-color: #ffc107;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
}

.icon-team {
    width: 30%;
    display: flex;
    float: right;
    margin-top: 20px;
    margin-right: -145px;
}

.icon-team-instagram {
    width: 40px;
    height: 40px;
    border: 1px solid #ffc107;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    margin-right: 10px;
    background-color: #fafafa;
}

    .icon-team-instagram img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    .icon-team-instagram:hover {
        transition: 1s;
        background-color: #ffc107;
    }

.icon-team-telegram {
    width: 40px;
    height: 40px;
    border: 1px solid #ffc107;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    background-color: #fafafa;
}

    .icon-team-telegram img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    .icon-team-telegram:hover {
        transition: 1s;
        background-color: #ffc107;
    }

.icon-team-facebook {
    width: 40px;
    height: 40px;
    border: 1px solid #ffc107;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    background-color: #fafafa;
}

    .icon-team-facebook img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    .icon-team-facebook:hover {
        transition: 1s;
        background-color: #ffc107;
    }

.icon-team-twitter {
    width: 40px;
    height: 40px;
    border: 1px solid #ffc107;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;
}

    .icon-team-twitter img {
        display: block;
        max-width: 100%;
        max-height: 100%;
    }

    .icon-team-twitter:hover {
        transition: 1s;
        background-color: #ffc107;
    }

.biography {
    margin-top: 50px;
    width: 80%;
    height: auto;
}

.biography-left {
    width: 45%;
    height: 330px;
    float: left;
    margin-top: 57px;
}

.headear-biography {
    margin-right: 0px;
    margin-top: 20px;
    color: #ffc107;
    font-size: 38px;
    text-align: right;
    direction: rtl;
    margin-bottom: 20px;
}

.txt-left-biography {
    margin-left: 20px;
    margin-right: 0px;
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
    color: #958C8C;
    text-align: justify;
    direction: rtl;
    line-height: 2;
    letter-spacing: -1px;
}

.biography-right {
    width: 50%;
    height: auto;
    float: right;
}

.guidelines {
    width: 80%;
    height: auto;
    margin-bottom: 100px;
}

.header-guidelines {
    margin-right: 0px;
    color: #ffc107;
    font-size: 38px;
    direction: rtl;
}

.txt-guidelines {
    margin-top: 20px;
    font-size: 16px;
    font-weight: 400;
    color: #958C8C;
    text-align: justify;
    direction: rtl;
    line-height: 2;
    height: auto;
}

.skill {
    max-width: 550px;
    width: 100%;
    background: #ffc107;
    margin-top: 20px;
    padding: 10px 20px;
    border-radius: 7px;
}

    .skill .skill-box {
        width: 100%;
        margin: 25px 0;
    }

.skill-box .txt-skill {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: right;
    direction: rtl;
}

.skill-box .skill-bar {
    height: 8px;
    width: 100%;
    border-radius: 6px;
    margin-top: 6px;
    background: #fff;
    text-align: right;
    direction: rtl;
}

.skill-bar .skill-per {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 6px;
    background: #000;
    animation: progress 0.4s ease-in-out forwards;
    opacity: 0;
}

.skill-per.css {
    width: 70%;
    animation-delay: 0.1s;
}

.skill-per.javascript {
    width: 50%;
    animation-delay: 0.2s;
}

.skill-per.nodejs {
    width: 30%;
    animation-delay: 0.3s;
}

@keyframes progress {
    0% {
        width: 0;
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

.tooltip::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -2px;
    height: 10px;
    width: 10px;
    z-index: -1;
    background-color: #fff;
    transform: translateX(-50%) rotate(45deg);
}

.skill .skill-per {
    animation: progress 5s linear forwards;
}

.skill-per .tooltip {
    position: absolute;
    left: -14px;
    top: -28px;
    font-size: 11px;
    font-weight: 500;
    color: #000;
    padding: 2px 6px;
    border-radius: 3px;
    background: #fff;
    z-index: 1;
    text-align: right;
    direction: rtl;
    transition: transform 0.3s ease;
    transform: translateX(0);
}

/*page-post*/
.page-single {
    width: 80%;
    height: auto;
}

.right-page-single {
    width: 73%;
    height: auto;
    float: right;
    border-radius: 10px;
    margin-bottom: 100px;
}

.left-page-single {
    width: 25%;
    height: auto;
    margin-top: 20px;
    float: left;
}

.short-decs {
    width: 100%;
    line-height: 2 !important;
    margin-left: 20px;
}

.short-decs {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    font-size: 16px;
    margin-left: 20px;
    margin-top: 0px;
    text-align: justify;
}

.pages-content p {
    color: #958C8C;
    margin-top: 5px;
    text-align: justify;
    direction: rtl;
    line-height: 2;
}

.sidebar-related-post {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
    margin-top: 0px;
    padding: 20px;
    border: 2px solid #ffc107;
}

.last-post-title {
    font-size: 18px;
    font-weight: bold;
    color: #ffc107;
    border-bottom: 1px solid #e2e2e2;
    display: block;
    padding-bottom: 10px;
    text-align: right;
    direction: rtl;
}

.title-post {
    display: inline-block;
    vertical-align: middle;
    color: #958C8C;
    margin-top: 15px;
    width: 68%;
    line-height: 2;
    margin-left: 10px;
    text-align: right;
    direction: rtl;
    font-size: 14px;
    transition: all 0.3s ease;
    font-weight: 400;
}

.item-post {
    direction: rtl;
}

.sidebar-related-post img {
    margin-top: 20px;
    vertical-align: middle;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    margin-left: 10px;
}

.head-page-single img {
    width: 400px;
    height: auto;
    margin-left: 20px;
    border-radius: 10px;
    float: left;
    width: 50%;
}

.title-single {
    width: 45%;
    float: left;
    font-size: 22px;
    font-weight: bold;
    color: #F5C3C3;
    margin-left: 20px;
    margin-top: 20px;
}

.title-post:hover {
    color: #ffc107;
    transform: scale(1.05);
}

.pages-content {
    float: right;
    width: 100%;
    padding: 50px;
    border-radius: 10px;
    border: 2px solid #ffc107;
}

.thumbnail-image {
    float: right;
    width: 50%;
}

    .thumbnail-image img {
        border-radius: 10px;
        max-width: 100%;
    }

.specification-post {
    float: left;
    width: calc(50% - 20px);
    margin-left: -20px;
}

.post-title {
    font-size: 22px;
    font-weight: bold;
    color: #ffc107;
    margin-left: 18px;
    direction: rtl;
    text-align: right;
    margin-right: -20px;
}

.meta-info {
    margin-top: 15px;
    text-align: right;
    direction: rtl;
    margin-right: -20px;
}

    .meta-info span {
        margin-left: 20px;
        color: #ffc107;
        font-size: 14px;
    }

.inner-content {
    border-top: 2px solid #ffe391;
    margin-top: 295px;
    font-size: 16px;
    color: #000000;
    margin-left: 20px;
    text-align: justify;
    margin-left: 0px;
    line-height: 2;
    padding-top: 5px;
}

.author-name::before {
    content: "";
    background: url(../img/author.svg);
    background-repeat: no-repeat;
    display: inline-block;
    width: 25px;
    height: 25px;
    vertical-align: bottom;
    margin-left: 10px;
}

.publish-date::before {
    content: "";
    background: url(../img/date.svg);
    display: inline-block;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    vertical-align: bottom;
    margin-left: 10px;
}

.comment::before {
    content: "";
    background: url(../img/comment.svg);
    display: inline-block;
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    vertical-align: bottom;
    margin-left: 10px;
}

.comment::before,
.publish-date::before,
.author-name::before {
    filter: invert(38%) sepia(100%) saturate(700%) hue-rotate(10deg) brightness(125%) contrast(103%) hue-rotate(0deg) grayscale(0) sepia(0) saturate(100%) brightness(100%) contrast(90%);
    margin-right: 5px;
}

.txt-comment-services {
    font-size: 28px;
    text-transform: uppercase;
    text-align: right;
    direction: rtl;
    font-weight: 800;
    margin-bottom: 20px;
    color: #373737;
}

    .txt-comment-services::after {
        color: #f1f1f1;
    }

.day .txt-comment-services {
    color: #f1f1f1;
}

.night .txt-comment-services {
    color: #373737;
}

.card-services {
    border-radius: 25px;
    background-color: #FFF;
}

.image-content-services,
.card-content-services {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 14px;
    width: 70%;
}

.image-content-services {
    position: relative;
    row-gap: 5px;
    padding: 25px 0;
    width: 100%;
}

.card-services img {
    filter: brightness(1);
}

.button-comment-services {
    height: 50px;
    border: none;
    font-size: 16px;
    color: #ffc107;
    position: relative;
    background-color: #fff;
    border-radius: 50px;
    margin: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    margin-top: 20px;
    padding: 10px 30px 10px 30px;
}

.image-comment-services {
    position: absolute;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: #FFF;
    padding: 3px;
    left: 85%;
    transform: translateX(0%);
}

.card-services img {
    filter: brightness(1);
}

.image-comment-services .card-img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffc107;
}

.name-comment-services {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    position: relative;
    left: 33%;
    transform: translateX(-50%);
    top: 25px;
}

.card-services {
    margin-bottom: 75px;
}

.overlay-comment-services {
    position: absolute;
    left: 0;
    top: 0;
    height: 120%;
    width: 100%;
    background-color: #ffc107;
    border-radius: 25px 25px 0 25px;
}

    .overlay-comment-services::before,
    .overlay-comment-services::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: -40px;
        height: 40px;
        width: 40px;
        background-color: #ffc107;
    }

    .overlay-comment-services::after {
        border-radius: 0 25px 0 0;
        background-color: #f1f1f1;
    }

    .overlay-comment-services::after {
        background-color: #f1f1f1;
    }

.day .overlay-comment-services::after {
    background-color: #1f1f1f;
}

.night .overlay-comment-services::after {
    background-color: #f1f1f1;
}

/*flexbox-post*/
.flexbox {
    margin-bottom: 100px;
    min-height: 700px;
}

.flexbox-post {
    position: relative;
    width: 100%;
    min-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 20px;
    margin-top: 50px;
}

.form-post {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    z-index: 1000;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.contact-form-post {
    background-color: #ffc107;
    position: relative;
    width: 200%;
}

.circle {
    border-radius: 50%;
    background: linear-gradient(135deg, transparent 20%, #ffe391);
    position: absolute;
}

    .circle.one {
        width: 130px;
        height: 130px;
        top: 130px;
        right: -40px;
    }

    .circle.two {
        width: 80px;
        height: 80px;
        top: 10px;
        right: 30px;
    }

.contact-form-post::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: #ffc107;
    transform: rotate(45deg);
    top: 50px;
    left: -13px;
}

form {
    padding: 2.3rem 2.2rem;
    z-index: 10;
    overflow: hidden;
    position: relative;
}

.title-flexbox-post {
    color: #fff;
    font-weight: 500;
    font-size: 24px;
    line-height: 2;
    margin-bottom: 0.7rem;
    text-align: right;
}

.input-flexbox-post {
    position: relative;
    margin: 1rem 0;
}

.input {
    width: 100%;
    outline: none;
    border: 2px solid #ffe391;
    background: none;
    padding: 0.6rem 1.2rem;
    color: #fff;
    font-weight: 0.95rem;
    letter-spacing: 0.5px;
    border-radius: 25px;
    transition: 0.3s;
    font-size: 0.95rem;
    text-align: right;
}

textarea.input {
    padding: 0.8rem, 1.2rem;
    min-height: 150px;
    border-radius: 22px;
    resize: none;
    overflow-y: auto;
    border: 2px solid #7FDFD4;
}

.input-flexbox-post label {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 0 0.4rem;
    color: #fafafa;
    font-size: 16px;
    font-weight: 400;
    pointer-events: none;
    z-index: 1000;
    transition: 0.5s;
    text-align: right;
}

.input-flexbox-post textarea label {
    top: 1rem;
    transform: translateY(0);
}

.input-flexbox-post span {
    position: absolute;
    top: 0;
    right: 25px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    padding: 0 0.4rem;
    color: transparent;
    pointer-events: none;
    z-index: 500;
}

    .input-flexbox-post span:before,
    .input-flexbox-post span:after {
        content: "";
        position: absolute;
        width: 50%;
        opacity: 0;
        transition: 0.3s;
        height: 5px;
        background-color: #ffc107;
        top: 50%;
        transform: translateY(-50%);
    }

    .input-flexbox-post span:before {
        left: 50%;
    }

    .input-flexbox-post span:after {
        right: 50%;
    }

.input-flexbox-post.focus label {
    top: 0;
    transform: translateY(-50%);
    left: 25px;
    font-size: 0.8rem;
}

.input-flexbox-post.focus span:before,
.input-flexbox-post.focus span:after {
    width: 50%;
    opacity: 1;
}

.contact-form-post::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: #ffc107;
    transform: rotate(45deg);
    top: 50px;
    left: -13px;
}

.input-flexbox-post label::before,
.input-flexbox-post label::after {
    content: none;
}

@media (max-width: 850px) {
    .form-post {
        grid-template-columns: 1fr;
    }

    .contact-form-post::before {
        top: -13px;
        left: initial;
        right: 70px;
    }

    .square {
        transform: translate(140%, 43%);
        height: 350px;
    }

    .text {
        margin: 1rem 0 1.5rem 0;
    }
}

@media (max-width:480px) {

    .square,
    .big-circle {
        display: none;
    }

    .title-flexbox-post {
        font-size: 1.15rem;
    }

    .input {
        padding: 0.54rem 1.2rem;
    }

    .btn {
        padding: 0.45rem 1.2rem;
    }
}

/*comment*/
.comment-flexbox {
    width: 100%;
    height: auto;
    border-radius: 10px;
    margin-top: 50px;
    margin-bottom: -20px;
}

.comment-flexbox-item {
    width: 100%;
    height: auto;
    background-color: #ffc107;
    margin-bottom: 20px;
    padding: 20px 50px 50px 50px;
    border-radius: 10px;
}

.pic-person {
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-left: 20px;
    margin-top: 0px;
    float: right;
}

    .pic-person img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        border: 2px solid #f1f1f1;
        object-fit: cover;
    }

.date-comment {
    position: relative;
    margin-top: 25px;
    font-size: 18px;
    color: #fff;
    float: left;
    margin-left: 30px;
}

    .date-comment::before {
        position: absolute;
        content: "";
        background: url(../img/date.svg);
        display: inline-block;
        background-repeat: no-repeat;
        width: 25px;
        height: 25px;
        vertical-align: bottom;
        margin-left: -38px;
        margin-top: 0px;
    }

    .date-comment::before {
        filter: invert(100%) sepia(100%) saturate(100%) hue-rotate(10deg) brightness(100%) contrast(100%) hue-rotate(0deg) grayscale(0) sepia(0) saturate(100%) brightness(100%) contrast(90%);
    }

.txt-comment p {
    color: #fff;
    text-align: justify;
    direction: rtl;
    line-height: 2;
    padding-top: 80px;
    font-size: 16px;
}

.name-item-comment {
    color: #fff;
    font-size: 24px;
    display: inline-flex;
    float: right;
    top: 15px;
    position: relative;
}

.contact-post {
    width: 100%;
    height: 540px;
    border-radius: 10px;
    margin-top: 20px;
    border: 2px solid #ffc107;
}

    .contact-post img {
        width: 90%;
        height: 500px;
        margin-top: 20px;
        margin-left: 20px;
        border-radius: 10px;
        filter: brightness(0.5);
    }

.p-contact {
    position: relative;
    color: #ffc107;
    margin-top: -480px;
    font-size: 24px;
    direction: rtl;
    text-align: center;
}

.num-contact {
    position: relative;
    color: #ffc107;
    font-size: 22px;
    font-weight: 300;
    text-align: center;
    top: 10px;
}

.email-contact {
    position: relative;
    color: #ffc107;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    top: 20px;
}

/*page-contact*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.flexbox {
    position: relative;
    width: 80%;
    min-height: 800px;
    padding: 2rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.form {
    width: 100%;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 20px 1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-left: auto;
    margin-right: auto;
}

.contact-form {
    background-color: #ffc107;
    position: relative;
    float: left;
}

.circle {
    border-radius: 50%;
    background: linear-gradient(135deg, transparent 20%, #ffe391);
    position: absolute;
}

    .circle.one {
        width: 130px;
        height: 130px;
        top: 130px;
        right: -40px;
    }

    .circle.two {
        width: 80px;
        height: 80px;
        top: 10px;
        right: 30px;
    }

.contact-form::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    background-color: #ffc107;
    transform: rotate(45deg);
    top: 50px;
    left: -13px;
}

form {
    padding: 2.3rem 2.2rem;
    z-index: 10;
    overflow: hidden;
    position: relative;
}

.title-flexbox {
    color: #fff;
    font-size: 28px;
    line-height: 2;
    margin-bottom: 0.7rem;
    text-align: right;
}

.input-flexbox {
    position: relative;
    margin: 1rem 0;
}

.input {
    width: 100%;
    outline: none;
    border: 2px solid #fff;
    background: none;
    padding: 0.6rem 1.2rem;
    color: #fff;
    font-weight: 0.95rem;
    letter-spacing: 0.5px;
    border-radius: 25px;
    transition: 0.3s;
    font-size: 16px;
    text-align: right;
}

textarea.input {
    padding: 0.8rem, 1.2rem;
    min-height: 150px;
    border-radius: 22px;
    resize: none;
    overflow-y: auto;
    border-color: #fff;
    text-align: right;
}

.input-flexbox label {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    padding: 0 0.4rem;
    color: #fafafa;
    font-size: 0.9rem;
    font-weight: 400;
    pointer-events: none;
    z-index: 1000;
    transition: 0.5s;
    text-align: right;
}

.input-flexbox textarea label {
    top: 1rem;
    transform: translateY(0);
}

.btn {
    padding: 1rem 1.5rem;
    background-color: #ffc107;
    border: 2px solid #fff;
    font-size: 16px;
    color: #fff;
    line-height: 0;
    border-radius: 25px;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    margin: 0;
    float: right;
}

.input-flexbox span {
    position: absolute;
    top: 0;
    right: 15px;
    transform: translateY(-50%);
    font-size: 0.8rem;
    padding: 0 0.4rem;
    color: transparent;
    pointer-events: none;
    z-index: 500;
}

    .input-flexbox span:before,
    .input-flexbox span:after {
        content: "";
        position: absolute;
        width: 50%;
        opacity: 0;
        transition: 0.3s;
        height: 5px;
        background-color: #ffc107;
        top: 50%;
        transform: translateY(-50%);
    }

    .input-flexbox span:before {
        left: 50%;
    }

    .input-flexbox span:after {
        right: 50%;
    }

.input-flexbox.focus label {
    top: 0;
    transform: translateY(-50%);
    left: 25px;
    font-size: 0.8rem;
}

.input-flexbox.focus span:before,
.input-flexbox.focus span:after {
    width: 50%;
    opacity: 1;
}

.input-flexbox label::before,
.input-flexbox label::after {
    content: none;
}

.contact-info {
    padding: 2.3rem 2.2rem;
    position: relative;
    float: right;
}

    .contact-info .title-flexbox {
        color: #ffc107;
    }

.text {
    color: #958C8C;
    margin: 1.5rem 0 2rem 0;
    text-align: right;
    line-height: 2;
    font-size: 16px;
    direction: rtl;
}

.information {
    display: flex;
    color: #958C8C;
    margin: 0.7rem 0;
    align-items: center;
    font-size: 16px;
    direction: rtl;
}

.icon {
    width: 28px;
    margin-right: 0.7rem;
}

.information img {
    margin-right: 0.7rem;
    width: 30px;
    margin-left: 10px;
}

.social-media {
    padding: 2rem 0 0 0;
    float: right;
    margin-right: 10px;
}

    .social-media h3 {
        color: #ffc107;
        margin-left: 22px;
        font-size: 24px;
        direction: rtl;
    }

.social-icon {
    display: flex;
    margin-top: 0.5rem;
}

.social-icons a {
    width: 35px;
    height: 35px;
    border-radius: 5px;
    background: linear-gradient(45deg, #ffe391, #ffe391);
    color: #fff;
    text-align: center;
    line-height: 35px;
    margin-right: 0.5rem;
    transition: 0.3s;
    margin-left: 5px;
}

    .social-icons a:hover {
        transform: scale(1.05);
    }

.social-media-contact {
    margin-right: 80px;
    margin-top: 40px;
    float: right;
}

.social-media ul li a:hover {
    background-color: #ffc107;
}

.contact-info::before {
    content: "";
    position: absolute;
    width: 110px;
    height: 100px;
    border: 22px solid #ffc107;
    border-radius: 50%;
    bottom: -77px;
    right: 50px;
    opacity: 0.3;
}

.big-circle {
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffe391;
    bottom: 47%;
    right: 49%;
    transform: translate(-30%, 0%);
    top: 5px;
}

    .big-circle::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        background-color: #fafafa;
        border-radius: 50%;
        top: calc(50% - 180px);
        left: calc(50% - 180px);
    }

@media (max-width: 850px) {
    .form {
        grid-template-columns: 1fr;
    }

    .contact-info::before {
        bottom: initial;
        top: -75px;
        right: 65px;
        transform: scale(0.95);
    }

    .contact-form::before {
        top: -13px;
        left: initial;
        right: 70px;
    }

    .square {
        transform: translate(140%, 43%);
        height: 350px;
    }

    .big-circle {
        bottom: 75%;
        transform: scale(0.9) translate(-40%, 30%);
        right: 50%;
    }

    .text {
        margin: 1rem 0 1.5rem 0;
    }

    .social-media {
        padding: 1.5rem 0 0 0;
    }
}

@media (max-width:480px) {
    .contact-info::before {
        display: none;
    }

    .square,
    .big-circle {
        display: none;
    }

    form,
    .contact-info {
        padding: 1.7rem 1.6rem;
    }

    .text,
    .information,
    .social-media p {
        font-size: 0.8rem;
    }

    .title-flexbox {
        font-size: 1.15rem;
    }

    .social-icons a {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .icon {
        width: 23px;
    }

    .input {
        padding: 0.54rem 1.2rem;
    }
}

/*map*/
.google-map {
    width: 200%;
    height: 400px;
    flex: 50%;
    margin-top: 2px;
    border-radius: 10px;
    position: relative;
}

    .google-map iframe {
        width: 100%;
        height: 400px;
        filter: grayscale(1);
    }

/*contact-page*/
.contact-page {
    width: 80%;
    height: 500px;
    margin-top: -200px;
    background-color: #8853eb;
}

/*day & night*/
body {
    transition: background 0.4s ease;
    background: #f1f1f1;
}

    body.day {
        background: #1f1f1f;
    }

.dayNight {
    cursor: pointer;
    float: left;
    margin-left: 25px;
    margin-top: 29px;
}

    .dayNight input {
        display: none;
    }

        .dayNight input + div {
            border-radius: 50%;
            width: 36px;
            height: 36px;
            position: relative;
            box-shadow: inset 10px -10px 0 0 #fff;
            transform: scale(1) rotate(5deg);
            transition: box-shadow 0.5s ease 0s, transform 0.4s ease 0.1s;
        }

            .dayNight input + div::before {
                content: "";
                width: inherit;
                height: inherit;
                border-radius: inherit;
                position: absolute;
                left: 0;
                top: 0;
                transition: background 0.3s ease;
            }

            .dayNight input + div::after {
                content: "";
                width: 8px;
                height: 8px;
                border-radius: 50%;
                margin: -4px 0 0 -4px;
                position: absolute;
                top: 50%;
                left: 50%;
                box-shadow: 0 -23px 0 #eb6656, 0 23px 0 #eb6656, 23px 0 0 #eb6656, -23px 0 0 #eb6656, 15px 15px 0 #eb6656, -15px 15px 0 #eb6656, 15px -15px 0 #eb6656, -15px -15px 0 #eb6656;
                transform: scale(0);
                transition: all 0.3s ease;
            }

        .dayNight input:checked + div {
            box-shadow: inset 32px -32px 0 0 #fff;
            transform: scale(0.5) rotate(0deg);
            transition: transform 0.3s ease 0.1s, box-shadow 0.2s ease 0s;
        }

            .dayNight input:checked + div::before {
                background: #eb6656;
                transition: background 0.3s ease 0.1s;
            }

            .dayNight input:checked + div::after {
                transform: scale(1.5);
                transition: transform 0.5s ease 0.15s;
            }

body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    body .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
    }

        body .dribbble img {
            display: block;
            height: 28px;
        }

.big-circle::after {
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background-color: #f1f1f1;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.4s ease;
}

.day .big-circle::after {
    background-color: #1f1f1f;
}

.night .big-circle::after {
    background-color: #1f1f1f;
}

/**/
.social-media-contact ul {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
}

    .social-media-contact ul li {
        list-style: none;
    }

        .social-media-contact ul li .fab {
            font-size: 30px;
            line-height: 60px;
            transition: .3s;
            color: #000;
        }

            .social-media-contact ul li .fab:hover {
                color: #fff;
            }

        .social-media-contact ul li a {
            position: relative;
            display: flex;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #fff;
            text-align: center;
            transition: 0.6s;
            box-shadow: 0 5px 4px rgba(0, 0, 0, .5);
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

            .social-media-contact ul li a:hover {
                transform: translate(0, -10%);
            }

        .social-media-contact ul li:nth-child(1) a:hover {
            background-color: #ffc107;
        }

        .social-media-contact ul li:nth-child(2) a:hover {
            background-color: #ffc107;
        }

        .social-media-contact ul li:nth-child(3) a:hover {
            background-color: #ffc107;
        }

        .social-media-contact ul li:nth-child(4) a:hover {
            background-color: #ffc107;
        }

        .social-media-contact ul li a i {
            font-size: 30px;
            transition: 0.3s;
            color: #000;
        }

        .social-media-contact ul li a i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
        }

        .social-media-contact ul li a img {
            width: 25px;
        }

/*page404*/
@import url('../css-2');
@import url('../css-3');

.header-page {
    background-color: #0000000a !important;
}

    .header-page .main-menu ul li a {
        color: #373737 !important;
    }

.day .header-page .main-menu ul li a {
    color: #f1f1f1 !important;
}

.night .header-page .main-menu ul li a {
    color: #373737 !important;
}

.header-page .main-menu ul li a:hover {
    color: #ffc107 !important;
    transition: 0.2s;
}

.header-page .them-name a {
    color: #373737;
}

.day .header-page .them-name a {
    color: #f1f1f1 !important;
}

.night .header-page .them-name a {
    color: #373737 !important;
}

.header-page .btnsearch {
    filter: invert(23%) sepia(88%) saturate(1083%) hue-rotate(340deg) brightness(0%) contrast(43%);
}

.day .header-page .btnsearch {
    filter: invert(23%) sepia(88%) saturate(0%) hue-rotate(340deg) brightness(100%) contrast(100%);
}

.night .header-page .btnsearch {
    filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(43%);
}

.header-page .btnsearch img {
    filter: brightness(0) invert(1) hue-rotate(60deg);
}

.header-page .dayNight input + div {
    box-shadow: inset 16px -16px 0 0 #373737;
}

.header-page > .main-menu ul li ul {
    background-color: #373737;
}

    .header-page > .main-menu ul li ul a {
        color: #ffffff !important;
        font-size: 18px;
    }

        .header-page > .main-menu ul li ul a:hover {
            font-size: 20px;
            color: #fff !important;
        }

.header-page .dayNight input + div {
    box-shadow: inset 10px -10px 0 0 #373737;
}

.header-page .hamburger-menu {
    filter: invert(23%) sepia(88%) saturate(0%) hue-rotate(340deg) brightness(100%) contrast(100%) !important;
}

.day .header-page .hamburger-menu {
    filter: invert(77%) sepia(38%) saturate(0%) hue-rotate(340deg) brightness(100%) contrast(100%) !important;
}

.night .header-page .hamburger-menu {
    filter: invert(23%) sepia(88%) saturate(0%) hue-rotate(340deg) brightness(100%) contrast(100%) !important;
}

/**/
.page-404 {
    margin-top: -900px;
}

.error-container {
    text-align: center;
    font-size: 106px;
    font-weight: 800;
    margin-top: 200px;
}

    .error-container > span {
        display: inline-block;
        position: relative;
    }

        .error-container > span.four {
            width: 136px;
            height: 43px;
            border-radius: 999px;
            background: linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%), linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%), linear-gradient(to right, #d89ca4, #e27b7e);
        }

            .error-container > span.four:before,
            .error-container > span.four:after {
                content: '';
                display: block;
                position: absolute;
                border-radius: 999px;
            }

            .error-container > span.four:before {
                width: 43px;
                height: 156px;
                left: 60px;
                bottom: -43px;
                background: linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%), linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%), linear-gradient(to top, #99749D, #B895AB, #CC9AA6, #D7969E, #e76952);
            }

            .error-container > span.four:after {
                width: 137px;
                height: 43px;
                transform: rotate(-49.5deg);
                left: -18px;
                bottom: 36px;
                background: linear-gradient(to right, #99749D, #B895AB, #CC9AA6, #D7969E, #E0787F);
            }

        .error-container > span.zero {
            vertical-align: text-top;
            width: 156px;
            height: 156px;
            border-radius: 999px;
            background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%), linear-gradient(to top right, #99749D, #99749D, #B895AB, #CC9AA6, #D7969E, #ED8687, #ED8687);
            overflow: hidden;
            animation: bgshadow 5s infinite;
        }

            .error-container > span.zero:before {
                content: '';
                display: block;
                position: absolute;
                transform: rotate(45deg);
                width: 90px;
                height: 90px;
                background-color: transparent;
                left: 0px;
                bottom: 0px;
                background: linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%), linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%);
            }

            .error-container > span.zero:after {
                content: '';
                display: block;
                position: absolute;
                border-radius: 999px;
                width: 70px;
                height: 70px;
                left: 43px;
                bottom: 43px;
                background: #1f1f1f;
                box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1);
            }

            .error-container > span.zero:after {
                transition: background 0.4s ease;
                background: #f1f1f1;
            }

.day .error-container > span.zero:after {
    background-color: #1f1f1f;
}

.screen-reader-text {
    position: absolute;
    top: -9999em;
    left: -9999em;
}

@keyframes bgshadow {
    0% {
        box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4);
    }

    45% {
        box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    }

    55% {
        box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
    }

    100% {
        box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4);
    }
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
button,
input,
select,
textarea {
    color: #373737;
    font-size: 18px;
}

.txt-page404 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color: #ffc107;
    font-size: 38px;
    font-weight: 800;
    margin-top: 25px;
    direction: rtl;
}

a.more-link {
    text-transform: uppercase;
    font-size: 13px;
    background-color: #e76952;
    padding: 10px 15px;
    border-radius: 0;
    color: #fff;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
    text-decoration: none;
    margin-top: 50px;
    letter-spacing: 1px;
}

.btn-page404 {
    height: 50px;
    border: none;
    font-size: 16px;
    color: #FFF;
    padding: 8px 16px;
    background-color: #ffc107;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 10px 30px 10px 30px;
    position: relative;
    top: -30px;
}

/**/
/* responsive */
/*
360  ~
600  ~
768  ~
1024 ~
*/
/* for desktop 1024px*/
@media screen and (min-width:1024px) and (max-width:1599px) {

    /*haeder*/
    .swiper {
        max-width: 100%;
    }

    .main-menu ul li a {
        color: #ffffff;
        font-size: 20px;
        padding: 8px 0px;
        display: block;
        text-decoration: none;
    }

    .main-menu ul li ul {
        width: 150px;
        text-align: center;
    }

    .slider-text {
        font-size: 38px;
        width: 70%;
    }

    .txt-slider {
        font-size: 18px;
        font-weight: 500;
        top: 80px;
        width: 100%;
    }

    .logo {
        width: 80px;
        margin-right: 30px;
    }

    /*about us*/
    .homepage {
        height: auto;
        width: 80%;
        margin-bottom: 50px;
    }

    .head-h {
        margin-top: -51px;
        float: right;
        font-weight: 700px;
    }

    .about-left {
        width: 50%;
        height: 100%;
        float: left;
        margin-top: 80px;
    }

    .about-right {
        width: 45%;
        height: auto;
        float: right;
        font-size: 16px;
        font-weight: 500;
        text-align: justify;
    }

    .img-about img {
        width: 100%;
        height: 100%;
        margin-top: -35px;
    }

    .line {
        margin-top: 0px;
    }

    /*our services*/
    .hero-section {
        width: 80%;
        height: auto;
        min-height: 300px;
        margin-bottom: 50px;
    }

    .title-card-grid {
        width: 100%;
        margin-left: 0px;
    }

    .card__category {
        font-size: 20px;
    }

    .card__heading {
        font-size: 14px;
    }

    /*team member*/
    .team-member {
        width: 80%;
        height: 550px;
        margin-bottom: 50px;
    }

    .txt-container {
        width: 100%;
        margin-left: 5px;
        margin-bottom: 0px;
    }

    .container {
        width: 20.68%;
        margin: 2%;
    }

    .overlay {
        font-size: 14px;
    }

    /*project*/
    .gallery-project {
        width: 80%;
    }

        .gallery-project .gallery-item-inner img {
            width: 100%;
            height: 220px;
        }

        .gallery-project .gallery-filter .filter-item {
            font-size: 14px;
        }

        .gallery-project .gallery-item .txt-project {
            font-size: 20px;
        }

        .gallery-project .gallery-item .text-project {
            font-size: 14px;
        }

    /*comment*/
    .slide-container {
        margin-bottom: 100px;
        width: 80%;
    }

    .slider-comment {
        top: 50px;
    }

    .button-comment {
        height: 45px;
        font-size: 14px;
    }

    /*weblog*/
    .my-blog {
        margin-top: 50px;
        width: 80%;
    }

    .my-blog-card img {
        height: 200px;
    }

    .btn-show {
        height: 45px;
    }

        .btn-show a {
            font-size: 13px;
            top: -3px;
        }

    /*contact-index*/
    .page {
        width: 80%;
    }

    .txt-scroll-index {
        width: 100%;
    }

    /*footer*/
    .txt-h-footer {
        font-size: 17px;
    }

    .footer-column {
        margin-right: 33px;
        margin-left: 0px;
        width: 29%;
    }

    .back-footer img {
        width: 100%;
        height: 100%;
    }

    .footer-logo {
        margin-top: 0px;
        width: 100px;
    }

    .them-name-footer {
        font-size: 17px;
        font-weight: 700;
        margin-top: -62px;
        margin-left: 70px;
    }

    .txtfooter {
        font-size: 14px;
        margin-top: 0px;
    }

    .txt-center-footer {
        font-size: 14px;
        width: 100%;
    }

    .txt-right-footer {
        font-size: 14px;
    }

    .double-dote {
        font-size: 18px;
    }

    .icon-phone {
        width: 40px;
        height: 40px;
    }

    .icon-clock {
        width: 40px;
        height: 40px;
    }

    .icon-gmail {
        width: 40px;
        height: 40px;
    }

    .icon-location {
        width: 40px;
        height: 40px;
    }

    /*page-project*/
    .head-page-img {
        width: 100%;
        height: 300px;
    }

    .img-head-about {
        object-fit: cover;
        height: 100%;
        width: 100%;
    }

    .NamePage {
        margin-right: 60px;
        margin-top: -200px;
        font-size: 32px;
    }

    .breadcrumb {
        margin-right: 60px;
        margin-top: -140px;
    }

    #gallery figure {
        position: relative;
        margin: 15px;
        width: 300px;
        height: 300px;
        transition: 0.2s;
        text-align: center;
        margin-bottom: 20px;
        width: 29%;
    }

    #gallery-filter label {
        color: #333;
        font-size: 12px;
        margin-right: 10px;
    }

    #gallery-filter {
        width: 70%;
    }

    /*page-about*/
    .gallery-item-inner img {
        height: 225px;
    }

    .txt-page-about {
        height: auto;
        margin-top: 50px;
    }

    .img-left {
        width: 50%;
        margin-left: 0px;
        margin-top: 0px;
    }

        .img-left img {
            width: 100%;
            height: 100%;
            margin-top: 0px;
        }

    .txt-about {
        margin-right: 0;
        margin-left: 0;
        width: 46%;
        font-size: 16px;
    }

    .page-about-counter {
        width: 80%;
        margin-top: 0px;
        height: auto;
        margin-bottom: 50px;
    }

    .img-head-page-about {
        margin-right: 0;
    }

    .counter-about {
        margin-left: 0;
        margin-right: 0px;
        width: 35%;
    }

    .counters-page-about {
        width: 100%;
        height: 200px;
        border-radius: 10px;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        gap: 20px;
    }

    .item-counter-about {
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
    }

        .item-counter-about span {
            font-size: 25px;
            height: 50px;
            top: -40px;
        }

        .item-counter-about div {
            width: 100%;
            text-align: center;
            font-size: 15px;
            margin-top: 0px;
            white-space: nowrap;
            top: 10px;
        }

    .item-counter-about {
        margin-left: 5px;
        margin-right: 5px;
    }

    .txt-person {
        width: 100%;
        margin-right: 20px;
    }

    .person {
        width: 18%;
        margin-left: 50px;
    }

    .name {
        font-size: 20px;
    }

    .title {
        font-size: 14px;
    }

    .p-about {
        margin-left: 0px;
    }

    .team-page-about {
        height: auto;
        margin-left: 0px;
        width: 80%;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    /*page-contact*/
    .flexbox {
        min-height: 650px;
    }

    .form {
        max-width: 700px;
    }

    .big-circle {
        width: 440px;
        height: 440px;
        right: 40%;
        top: 3%;
    }

    .input {
        border: 1px solid #fafafa;
    }

    .social-media p {
        margin-left: -2px;
    }

    .social-media-contact {
        margin-left: 80px;
    }

    .title-flexbox {
        font-size: 24px;
    }

    /*page-posts*/
    .contact-post {
        width: 100%;
        height: 320px;
        margin-left: 0px;
    }

        .contact-post img {
            width: 88%;
            margin-bottom: 20px;
            height: 300px;
            margin-top: 10px;
            margin-left: 12px;
        }

    .p-contact {
        margin-top: -300px;
        margin-left: 0px;
        font-size: 18px;
    }

    .num-contact {
        margin-top: 0px;
        margin-left: 0px;
        font-size: 16px;
    }

    .email-contact {
        margin-top: 0px;
        margin-left: 0px;
        font-size: 14px;
        font-weight: 400;
    }

    .last-post-title {
        font-size: 15px;
        text-align: right;
        direction: rtl;
    }

    .sidebar-related-post img {
        width: 50px;
        height: 50px;
        margin-left: 0px;
    }

    .sidebar-related-post {
        max-width: 100%;
        margin-left: 0px;
    }

    aside {
        width: 100%;
    }

    .left-page-single {
        width: 25%;
    }

    .right-page-single {
        width: 73%;
    }

    .pages-content {
        width: 100%;
        padding: 30px;
    }

        .pages-content p {
            width: 100%;
            line-height: 2;
            margin-left: 0px;
            font-size: 14px;
        }

    .title-post {
        width: 62%;
        font-size: 12px;
        text-align: right;
        direction: rtl;
        margin-left: 0px;
        margin-right: 0px;
        letter-spacing: -0.7px;
    }

    .post-title {
        font-size: 15px;
        text-align: right;
        direction: rtl;
    }

    .short-decs {
        width: 100%;
        font-size: 12px;
    }

    .thumbnail-image {
        width: 50%;
        height: 100%;
    }

        .thumbnail-image img {
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }

    .inner-content {
        margin-top: 50%;
    }

    .meta-info {
        font-size: 10px;
    }

        .meta-info span {
            margin-left: 7px;
            font-size: 10px;
        }

    .specification-post {
        padding-right: 0px;
    }

    .pic-person {
        width: 80px;
        height: 80px;
    }

        .pic-person img {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 1px solid #000;
            margin-top: -5px;
            object-fit: cover;
        }

    .date-comment {
        margin-top: 30px;
        font-size: 1rem;
    }

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

    .line-comment {
        margin-top: 0px;
    }

    .comment-flexbox {
        height: auto;
        width: 100%;
    }

    .pic-person {
        margin-top: 0px;
    }

    .image-comment-services {
        left: 78%;
    }

    .name-comment-services {
        left: 26%;
    }

    /*page-team*/
    .page-team {
        margin-left: 0px;
        height: auto;
    }

    .img-page-team img {
        width: 250px;
        height: 310px;
    }

    .icon-team {
        margin-right: 20px;
        width: 23%;
    }

    .name-team-member {
        width: 60%;
        margin-left: 30px;
        margin-top: 20px;
        font-size: 28px;
    }

    .Response-duty-dote {
        font-size: 18px;
    }

    .duty {
        width: 63%;
        font-size: 18px;
    }

    .duty-one {
        font-size: 18px;
    }

    .txt-duty {
        width: 100%;
        font-size: 16px;
    }

    .skill {
        margin-top: 40px;
    }

    .biography {
        margin-top: 0px;
    }

    .headear-biography {
        font-size: 38px;
        margin-right: 0px;
    }

    .txt-left-biography {
        margin-left: 65px;
        margin-right: 0px;
        font-size: 16px;
    }

    .biography-left {
        width: 50%;
    }

    .biography-right {
        margin-right: 0px;
    }

    .guidelines {
        margin-top: 30px;
    }

    .header-guidelines {
        margin-right: 0px;
        font-size: 38px;
    }

    .txt-guidelines {
        width: 100%;
        font-size: 16px;
        margin-left: 0px;
    }

    .icon-team-instagram {
        background-color: #dcdcdc;
    }

        .icon-team-instagram:hover {
            background-color: #eb6753;
        }

    .icon-team-telegram {
        background-color: #dcdcdc;
    }

        .icon-team-telegram:hover {
            background-color: #eb6753;
        }

    .icon-team-facebook {
        background-color: #dcdcdc;
    }

        .icon-team-facebook:hover {
            background-color: #eb6753;
        }

    .icon-team-twitter {
        background-color: #dcdcdc;
    }

        .icon-team-twitter:hover {
            background-color: #eb6753;
        }

    html,
    button,
    input,
    select,
    textarea {
        font-size: 18px;
    }
}

@media screen and (min-width: 1024px) {
    .exit-button {
        display: none !important;
    }
}

/*for tablet 768px*/
@media screen and (min-width:768px) and (max-width:1023px) {

    /*haeder*/
    body header {
        height: 80px;
    }

    .swiper {
        height: 600px;
    }

    .swiper-slide img {
        height: 100%;
    }

    .main-menu ul li a {
        color: #ffffff;
        font-size: 18px;
        padding: 8px 0px;
        display: block;
        text-decoration: none;
    }

        .main-menu ul li a img {
            display: none;
        }

    .main-menu {
        margin: 16px 50px 0px 0px;
        position: relative;
    }

        .main-menu > ul > li {
            margin-left: 20px;
        }

    .slider-text {
        font-size: 32px;
        width: 70%;
    }

    .txt-slider {
        font-size: 16px;
        font-weight: 500;
        width: 100%;
        overflow: hidden;
        position: relative;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        top: 10px;
    }

    .btn-show-slider {
        top: 30px;
        font-size: 14px;
        position: relative;
    }

    .them-name {
        font-size: 18px;
        margin-top: 24px;
        margin-right: -15px;
    }

    .logo {
        width: 70px;
        height: 70px;
        margin-right: 15px;
        margin-top: 4px;
    }

        .logo img {
            width: 100%;
            height: 100%;
        }

    .menu {
        margin-left: 190px;
        font-size: 18px;
    }

    .openmenu {
        margin-top: 0px;
    }

    .exit-button {
        display: none;
    }

    .swiper-button-next,
    .swiper-button-prev {
        transform: scale(0.7);
        margin-right: -10px;
        margin-left: -10px;
    }

    .header-page > .dayNight input + div {
        box-shadow: inset 8px -8px 0 0 #373737;
    }

    .header-page > .hamburger-menu {
        filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(30%);
    }

        .header-page > .hamburger-menu svg {
            filter: brightness(0) invert(1) hue-rotate(60deg);
        }

    .day .header-page > .hamburger-menu {
        filter: invert(70%) sepia(0%) saturate(100%) hue-rotate(100deg) brightness(100%) contrast(111%);
    }

    .night .header-page > .hamburger-menu {
        filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(43%);
    }

    .dayNight {
        margin-top: 20px;
    }

    .btnsearch {
        margin-top: 15px;
    }

    /*about us*/
    .homepage {
        width: 80%;
        height: 850px;
        margin-bottom: 0px;
        margin-top: 100px;
    }

    .head-h {
        font-size: 32px;
        margin-bottom: 0px;
    }

    .about-left {
        width: 100%;
        height: auto;
        float: right;
        margin-right: 0px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .about-right {
        width: 100%;
        height: auto;
        font-size: 16px;
        margin-top: -30px;
        margin-bottom: -500px;
    }

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

    .line {
        margin-top: 50px;
    }

    /*our services*/
    .hero-section {
        width: 80%;
        margin-top: 50px;
        height: auto;
    }

    .title-card-grid {
        width: 100%;
        font-size: 32px;
        text-align: right;
    }

    .card__heading {
        font-size: 18px;
    }

    .card__category {
        font-size: 24px;
    }

    .image-card {
        list-style: none;
        position: relative;
        width: 80%;
        margin-left: 50px;
        margin-left: 35px;
    }

    .image-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /*team member*/
    .team-member {
        width: 80%;
    }

    .txt-container {
        width: 100%;
        font-size: 32px;
        margin-left: 5px;
        margin-bottom: 40px;
    }

    .container {
        width: 45.71%;
        margin: 2%;
    }

    .overlay {
        font-size: 16px;
        opacity: 1;
        bottom: -1px;
    }

    /*counter*/
    .counter {
        height: 250px;
    }

    .txt-counter {
        font-size: 35px;
    }

    .employee-counter span {
        font-size: 25px;
    }

    .employee-counter div {
        font-size: 12px;
    }

    .employee-counter {
        margin-left: 5px;
        margin-right: 5px;
    }

    /*project*/
    .gallery-project {
        width: 80%;
    }

    .title-project-index {
        font-size: 32px;
    }

    .gallery-project .gallery-item {
        width: calc(100% / 2);
        padding: 20px;
    }

        .gallery-project .gallery-item .txt-project {
            font-size: 20px;
            opacity: 1;
        }

    .gallery-item-inner .text-project {
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    .gallery-project .gallery-item .text-project {
        font-size: 16px;
    }

    .gallery-item-inner:not(:hover) img {
        filter: brightness(0.75) saturate(1.2) contrast(0.85);
        height: 300px;
    }

    /*comment*/
    .title-comment {
        font-size: 32px;
    }

    .button-comment {
        font-size: 14px;
        height: 40px;
    }

    /*weblog*/
    .my-blog {
        width: 80%;
        margin-bottom: 50px;
    }

    .content-heading {
        font-size: 32px;
    }

    .my-blog-card img {
        height: 200px;
    }

    .btn-show {
        height: 40px;
    }

        .btn-show a {
            top: 2px;
            font-size: 14px;
        }

    /*news-index*/
    .news-index {
        margin-top: 50px;
    }

    .blog-card {
        height: 300px;
    }

    .inner-part .img {
        width: 35%;
        height: 200px;
    }

    .inner-part {
        height: 300px;
    }

    .content span {
        font-size: 18px;
    }

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

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

    .sliders .tap {
        width: 40px;
    }

    #tap-1:checked ~ .inner-part .content-1,
    #tap-2:checked ~ .inner-part .content-2,
    #tap-3:checked ~ .inner-part .content-3 {
        margin-right: 20px;
    }

    .sliders {
        left: 30%;
    }

    /*footer*/
    .txt-h-footer {
        font-size: 16px;
    }

    .footer-column {
        width: 31%;
        margin-right: 15px;
    }

    .back-footer img {
        width: 100%;
        height: 100%;
    }

    .footer-logo {
        position: relative;
        top: 0px;
        width: 90px;
        margin-top: 0px;
    }

    .them-name-footer {
        font-size: 16px;
        font-weight: 700;
        margin-top: -62px;
        margin-left: 70px;
    }

    .social-media-footer ul li a {
        width: 33px;
        height: 33px;
    }

        .social-media-footer ul li a img {
            width: 20px;
        }

    .txtfooter {
        font-size: 12px;
        text-align: justify;
        margin-left: 35px;
        margin-top: 0px;
    }

    .txt-center-footer {
        font-size: 10px;
        width: 100%;
        direction: rtl;
    }

    .txt-right-footer {
        font-size: 14px;
    }

    .double-dote {
        font-size: 18px;
    }

    .icon-phone {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-phone img {
            width: 30px;
        }

    .icon-clock {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-clock img {
            width: 30px;
        }

    .icon-gmail {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-gmail img {
            width: 30px;
        }

    .icon-location {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-location img {
            width: 30px;
        }

    /*page-project*/
    .NamePage {
        font-size: 32px;
        margin-right: 60px;
        margin-top: -160px;
    }

    .breadcrumb {
        font-size: 20px;
        margin-right: 60px;
        margin-top: -100px;
    }

    .title-project {
        font-size: 32px;
    }

    #gallery figure {
        position: relative;
        margin: 15px;
        width: 300px;
        height: 300px;
        transition: 0.2s;
        text-align: center;
        margin-bottom: 20px;
        width: 45%;
    }

    #gallery-filter label {
        color: #333;
        font-size: 12px;
        margin-right: 10px;
    }

    #gallery-filter {
        width: 70%;
    }

    #gallery figure .txt-pic {
        opacity: 1;
        color: #ffc107;
        text-shadow: 1px 1px #000;
    }

    #gallery figure img {
        filter: brightness(0.75) saturate(1.2) contrast(0.85);
        transition: filter 200ms linear, transform 200ms linear;
    }

    /*page-about*/
    .gallery-project .gallery-filter .filter-item {
        border: 1px solid #e96853;
    }

    .gallery-item-inner img {
        height: 225px;
    }

    .img-left {
        width: 50%;
        margin-left: 0px;
    }

    .p-right {
        width: 45%;
    }

    .img-left img {
        width: 100%;
        height: 100%;
        margin-top: 0px;
    }

    .txt-about {
        margin-right: 0;
        margin-left: 0;
        width: 100%;
        font-size: 16px;
    }

    .txt-page-about {
        margin-top: 0px;
        height: auto;
    }

    .img-head-page-about {
        margin-right: 0;
    }

    .counter-about {
        margin-left: 78px;
        width: 34%;
        float: left;
        text-align: right;
        direction: rtl;
        top: 115px;
        position: relative;
    }

    .counters-page-about {
        width: 100%;
        height: auto;
        border-radius: 10px;
        display: inline-flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        gap: 20px;
    }

    .item-counter-about {
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
    }

        .item-counter-about span {
            font-size: 25px;
            top: 0px;
        }

        .item-counter-about div {
            font-size: 12px;
            width: 110%;
        }

    .item-counter-about {
        margin-left: 0px;
        margin-right: 0px;
        height: auto;
        padding: 10px;
    }

    .item-counter div {
        font-size: 15px;
    }

    .employee-counter {
        margin-left: 0px;
        margin-right: 0px;
        height: auto;
        padding: 10px;
    }

    .txt-person {
        width: 100%;
        font-size: 32px;
        margin-right: 0px;
    }

    .person {
        align-items: center;
        display: inline-flex;
        flex-direction: column;
        width: 40%;
        margin-left: 35px;
    }

    .p-about {
        margin-right: 0px;
        font-size: 32px;
        margin-top: 0px;
        position: relative;
        top: 115px;
    }

    .page-about-counter {
        width: 80%;
        height: auto;
        margin-top: 30px;
    }

    .team-page-about {
        height: auto;
        width: 80%;
        margin-top: 50px;
        margin-bottom: 50px;
        margin-left: 0px;
    }

    .name {
        margin-top: 0px;
        font-size: 24px;
    }

    .title {
        font-size: 18px;
    }

    /*page-contact*/
    .flexbox {
        min-height: 650px;
        width: 80%;
    }

    .form {
        max-width: 700px;
    }

    .big-circle {
        display: none;
    }

    .input {
        border: 1px solid #fafafa;
    }

    .title-flexbox {
        font-size: 24px;
    }

    .social-media {
        margin-left: 0px;
    }

        .social-media p {
            margin-left: 0px;
            font-size: 16px;
            text-align: right;
            direction: rtl;
        }

    .social-media-contact {
        margin-left: 101px;
        margin-top: 30px;
    }

    .google-map {
        width: 100%;
        height: 400px;
        flex: 50%;
        margin-top: 50px;
        border-radius: 10px;
        position: relative;
    }

        .google-map iframe {
            width: 100%;
            height: 400px;
        }

    /*page-posts*/
    .img-head-about {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    .head-page-img {
        width: 100%;
        height: 250px;
    }

    .contact-post {
        width: 100%;
        height: 400px;
        margin-left: 0px;
    }

        .contact-post img {
            width: 50%;
            margin-bottom: 20px;
            height: 340px;
            margin-top: 30px;
            margin-left: 30px;
        }

    .p-contact {
        margin-top: -350px;
        margin-left: 330px;
        font-size: 24px;
    }

    .num-contact {
        margin-top: 0px;
        margin-left: 330px;
        font-size: 22px;
    }

    .email-contact {
        margin-top: 0px;
        margin-left: 340px;
        font-size: 20px;
        font-weight: 400;
    }

    .last-post-title {
        font-size: 20px;
    }

    .sidebar-related-post img {
        width: 20%;
        height: 100%;
        margin-left: 0px;
    }

    .sidebar-related-post {
        max-width: 100%;
        margin-left: 0px;
    }

    aside {
        width: 100%;
    }

    .left-page-single {
        width: 100%;
        height: auto;
        margin-bottom: 100px;
    }

    .right-page-single {
        width: 100%;
    }

    .pages-content {
        width: 100%;
        padding: 30px;
    }

        .pages-content p {
            width: 100%;
            line-height: 2;
            margin-left: 0px;
            font-size: 16px;
        }

    .input-flexbox-post {
        width: 100%;
    }

    .title-post {
        width: 75%;
        margin-left: 5px;
        margin-right: 10px;
        font-size: 18px;
        text-align: right;
        direction: rtl;
        margin-top: 45px;
    }

    .post-title {
        font-size: 18px;
        text-align: left;
        margin-left: 0px;
        letter-spacing: -1.35px;
        text-align: right;
        margin-right: 0px;
    }

    .short-decs {
        width: 100%;
        font-size: 12px;
        -webkit-line-clamp: 5;
    }

    .thumbnail-image {
        width: 50%;
        height: 100%;
    }

        .thumbnail-image img {
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }

    .inner-content {
        margin-top: 240px;
    }

    .meta-info {
        font-size: 10px;
    }

        .meta-info span {
            margin-left: 7px;
            font-size: 10px;
        }

    .title-flexbox-post {
        text-align: right;
        direction: rtl;
    }

    .specification-post {
        padding-right: 0px;
        margin-left: 0px;
    }

    .pic-person img {
        width: 50px;
        border-radius: 50%;
        border: 1px solid #000;
        margin-top: -5px;
    }

    .date-comment {
        margin-top: 22px;
        font-size: 1rem;
    }

    .txt-comment {
        font-size: 16px;
        margin-top: 0px;
    }

    .line-comment {
        margin-top: 0px;
    }

    .item-comment {
        height: auto;
    }

    .comment-flexbox {
        height: auto;
        width: 100%;
        margin-left: 0px;
    }

    .pic-person {
        margin-top: 5px;
        width: 70px;
        height: 70px;
    }

        .pic-person img {
            width: 70px;
            height: 70px;
            object-fit: cover;
        }

    .contact-form-post {
        width: 100%;
    }

    .image-comment-services {
        height: 90px;
        width: 90px;
        left: 80%;
        transform: translateX(0%);
    }

    .name-comment-services {
        left: 28%;
        transform: translateX(-50%);
        top: 20px;
    }

    /*page-team*/
    .page-team {
        margin-left: 0px;
        height: auto;
    }

    .img-page-team {
        width: 45%;
    }

        .img-page-team img {
            width: 100%;
        }

    .icon-team {
        margin-top: -110px;
        float: right;
        margin-right: 20px;
    }

    .name-team-member {
        width: 46%;
        margin-right: 50px;
        margin-top: 20px;
        font-size: 24px;
    }

    .Response-duty-dote {
        font-size: 16px;
        margin-left: -10px;
    }

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

    .duty {
        width: 44%;
        margin-left: 15px;
        font-size: 15px;
        text-align: right;
        direction: rtl;
    }

    .duty-dote1 {
        margin-left: 68px;
        margin-right: 71px;
    }

    .duty-dote2 {
        margin-left: 68px;
    }

    .duty-dote3 {
        margin-left: 69px;
        margin-right: 54px;
    }

    .txt-duty {
        width: 100%;
        font-size: 16px;
    }

    .line-team {
        margin-top: 30px;
    }

    .skill {
        margin-top: 95px;
    }

    .biography {
        margin-top: 0px;
    }

    .headear-biography {
        font-size: 32px;
        margin-left: 60px;
    }

    .txt-left-biography {
        margin-left: 65px;
        margin-right: 0px;
        font-size: 16px;
    }

    .biography-left {
        width: 50%;
        margin-top: 0px;
    }

    .biography-right {
        margin-right: 0px;
    }

    .guidelines {
        height: auto;
    }

    .header-guidelines {
        margin-top: 50px;
        margin-right: 0px;
        font-size: 32px;
    }

    .txt-guidelines {
        width: 100%;
        font-size: 16px;
        margin-left: -5px;
    }

    .icon-team-instagram {
        background-color: #dcdcdc;
    }

        .icon-team-instagram:hover {
            background-color: #eb6753;
        }

    .icon-team-telegram {
        background-color: #dcdcdc;
    }

        .icon-team-telegram:hover {
            background-color: #eb6753;
        }

    .icon-team-facebook {
        background-color: #dcdcdc;
    }

        .icon-team-facebook:hover {
            background-color: #eb6753;
        }

    .icon-team-twitter {
        background-color: #dcdcdc;
    }

        .icon-team-twitter:hover {
            background-color: #eb6753;
        }

    /*page 404*/
    .txt-page404 {
        font-size: 32px;
    }
}

@media screen and (max-width:768px) {
    .them-name {
        font-size: 18px;
        margin-top: 25px;
        margin-right: -85px;
    }

    .responsive-menu {
        display: none;
        top: 0;
        right: 0;
        z-index: 999;
        margin: 0;
        height: 100%;
        width: 50%;
        overflow: auto;
    }

    .main-menu > ul > li {
        float: none;
    }

    .hamburger-menu {
        position: fixed;
        left: 15px;
        background: url(../img/menu.svg);
        background-size: 32px;
        background-repeat: no-repeat;
        background-position: center;
        width: 50px;
        height: 50px;
        float: none;
        z-index: 999;
        filter: brightness(0) invert(1);
        top: 15px;
    }

    .main-menu {
        display: none;
        margin: -63px -175px 24px 0px;
        float: left;
        backdrop-filter: blur(100px) brightness(70%);
        width: 250px;
        height: 350px;
        text-align: center;
        padding-top: 80px;
        z-index: 99999;
        border-radius: 0px 0px 10px 0px;
        background-color: rgba(0,0,0,0.85);
    }

        .main-menu::after {
            content: url(../img/arrow.svg);
            float: right;
            margin-top: -34px;
            margin-right: 250px;
        }

        .main-menu ul li ul {
            background-color: transparent;
            backdrop-filter: blur(50px) brightness(130%);
            box-shadow: 0 0 0px transparent;
        }

    .btnsearch {
        margin-left: 75px;
        margin-top: 15px;
    }

    .openmenu {
        display: block;
        position: absolute;
        margin-top: 0px;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999;
    }

    .exit-button {
        display: none;
        margin-top: -50px;
        filter: brightness(0) invert(1);
        position: relative;
        text-align: left;
        left: 30px;
        margin-left: 0px;
    }

    .dayNight {
        margin-top: 20px;
    }

    .hidden {
        display: none;
        margin-left: 0px;
    }

    .main-menu ul li ul {
        background: linear-gradient(180deg, #44403b, #616966);
        backdrop-filter: blur(100px) brightness(100%);
        box-shadow: 0 0 0px transparent;
        width: 100%;
        top: 50px;
    }

    .main-menu > ul > li {
        margin-left: 0px;
        margin-top: 20px;
    }

    .main-menu::after {
        float: left;
        left: 290px;
        position: relative;
    }

    button {
        bottom: 15px;
    }
}

/*for mobile 360px*/
@media screen and (min-width:360px) and (max-width:767px) {

    /*haeder*/
    body {
        overflow-x: hidden;
        overflow-y: scroll;
    }

        body header {
            height: 60px;
        }

            body header.slider-hover {
                background-color: #373737 !important;
                margin-right: 4px;
                margin-left: 0px;
            }

    header {
        height: 75px;
        width: 100%;
    }

    .hamburger-menu {
        filter: brightness(0) invert(1);
        margin-top: 0px;
        margin-left: 0px;
        width: 25px;
        max-height: 25px;
        background-size: 23px;
    }

    .header-page > .hamburger-menu {
        filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(30%);
    }

        .header-page > .hamburger-menu svg {
            filter: brightness(0) invert(1) hue-rotate(60deg);
        }

    .day .header-page > .hamburger-menu {
        filter: invert(70%) sepia(0%) saturate(100%) hue-rotate(100deg) brightness(100%) contrast(111%);
    }

    .night .header-page > .hamburger-menu {
        filter: invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(43%);
    }

    .swiper {
        width: 104%;
        height: 300px;
        margin-left: -7px;
        margin-right: -7px;
    }

    .swiper-slide img {
        height: 100%;
    }

    .swiper-button-next,
    .swiper-button-prev {
        transform: scale(0.5);
    }

    .slider-text {
        font-size: 20px;
        width: 68%;
        margin-left: 15px;
        right: 10%;
    }

    .txt-slider {
        font-size: 13px;
        font-weight: 500;
        top: 10px;
        overflow: hidden;
        position: relative;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    .menu {
        margin-left: 190px;
        font-size: 18px;
    }

    .dayNight {
        margin-top: 15px;
        margin-left: 0px;
    }

        .dayNight input + div {
            width: 25px;
            height: 25px;
            margin-top: 0px;
        }

    .header-page > .dayNight input + div {
        box-shadow: inset 8px -8px 0 0 #373737;
    }

    .logo {
        margin-right: 5px;
        margin-top: 5px;
        width: 50px;
        height: 50px;
    }

        .logo img {
            width: 100%;
        }

    .them-name {
        font-size: 14px;
        margin-top: 20px;
        margin-right: -80px;
    }

    .btnsearch {
        margin-left: 40px;
        margin-top: 5px;
        margin-right: 0px;
        background-size: 30px;
    }

    .exit-button {
        display: none;
        margin-top: -60px;
        filter: brightness(0) invert(1);
        position: relative;
        text-align: left;
        left: 18px;
        margin-left: 0px;
    }

    .openmenu {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999;
    }

    .hidden {
        display: none;
        margin-left: 0px;
    }

    .main-menu ul li ul {
        background: linear-gradient(180deg, #44403b, #616966);
        backdrop-filter: blur(100px) brightness(100%);
        box-shadow: 0 0 0px transparent;
        width: 100%;
        top: 50px;
    }

    .main-menu > ul > li {
        margin-left: 0px;
    }

    .main-menu::after {
        float: left;
        left: 90px;
        position: relative;
    }

    button {
        bottom: 15px;
    }

    .btn-show-slider {
        font-size: 12px;
        padding: 7px 12px 7px 12px;
        position: relative;
        top: 20px;
    }

    /*about us*/
    .homepage {
        width: 80%;
        height: auto;
        margin-bottom: 30px;
    }

    .head-h {
        font-size: 28px;
        margin-bottom: 0px;
        margin-top: -75px;
    }

    .about-left {
        width: 100%;
        height: auto;
        float: right;
        margin-right: 0px;
        margin-top: 0px;
        margin-bottom: 5px;
    }

    .about-right {
        width: 100%;
        height: auto;
        font-size: 14px;
        margin-bottom: 0px;
        margin-right: 0px;
        margin-top: 15px;
    }

        .about-right p {
            padding: 0 5px;
        }

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

    .line {
        margin-top: 50px;
    }

    /*our services*/
    .hero-section {
        width: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        margin-top: 30px;
        margin-bottom: 30px;
        height: auto;
    }

    .title-card-grid {
        width: 100%;
        font-size: 28px;
        margin-bottom: 35px;
        margin-top: 0px;
        direction: rtl;
    }

    .card__content {
        left: 0px;
        width: 100%;
    }

    .card__heading {
        font-size: 14px;
    }

    .card__category {
        font-size: 20px;
    }

    .image-card {
        list-style: none;
        position: relative;
        width: 90%;
        height: 300px;
    }

    /*team member*/
    .team-member {
        width: 80%;
        margin-top: 30px;
        margin-bottom: 30px;
        height: auto;
    }

    .txt-container {
        width: 100%;
        font-size: 28px;
        margin-bottom: 30px;
        margin-top: 0px;
    }

    .container {
        width: 45%;
        margin: 2%;
    }

        .container a img {
            filter: brightness(0.75);
        }

    .overlay {
        flex: 1;
        left: calc((100% - 0%) / 2);
        transform: translateX(-50%)translateY(15%);
        font-size: 13px;
        text-shadow: 1px 1px 2px rgb(0, 0, 0);
        width: calc(100% - 12%);
        background-color: transparent;
    }

    .container img {
        border: 2px solid #ffc107;
    }

    .container .overlay {
        opacity: 1;
    }

    /*counter*/
    .counter {
        height: auto;
    }

    .txt-counter {
        font-size: 28px;
    }

    .employee-counter span {
        font-size: 25px;
    }

    .employee-counter div {
        font-size: 12px;
    }

    .employee-counter-container {
        flex-direction: column;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 0px;
    }

    .employee-counter {
        margin-left: 5px;
        margin-right: 5px;
        height: 150px;
        width: 80%;
    }

    .employee-line {
        display: none;
    }

    /*project*/
    .gallery-project {
        width: 80%;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .container-project {
        max-width: 100%;
    }

    .row-project-index {
        height: auto;
        margin-bottom: 0px;
    }

    .NamePage {
        font-size: 27px;
        margin-right: 30px;
        margin-top: -115px;
    }

    .breadcrumb {
        font-size: 16px;
        margin-right: 30px;
        margin-top: -70px;
    }

    .title-project-index {
        font-size: 28px;
    }

    .gallery-project .gallery-filter .filter-item {
        font-size: 14px;
        margin-top: 5px;
    }

    .gallery-item-inner:not(:hover) img {
        filter: brightness(0.5);
    }

    .gallery-project .gallery-item {
        width: 100%;
    }

    .gallery-project .gallery-item-inner img {
        height: 300px;
        object-fit: cover;
    }

    .gallery-item-inner img {
        height: 225px;
    }

    .gallery-project .gallery-item .txt-project {
        font-size: 20px;
        opacity: 1;
    }

    .gallery-item-inner .text-project {
        opacity: 1;
        transition: opacity 0.5s ease;
    }

    .gallery-project .gallery-item .text-project {
        font-size: 15px;
    }

    /*slider-comment*/
    .title-comment {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .slider-comment {
        top: 0px;
        margin-top: 30px;
        margin-bottom: 30px;
        width: 80%;
    }

    .name-comment-index {
        font-size: 20px;
    }

    .description p {
        font-size: 14px;
    }

    .button-comment {
        height: 37px;
        font-size: 14px;
        padding: 5px 12px 7px 12px;
    }

    /*weblog*/
    .my-blog {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .content-heading {
        font-size: 28px;
    }

    .my-blog-card h3 {
        font-size: 20px;
    }

    .animate-text {
        font-size: 14px;
    }

    .my-blog-grid {
        margin: 0px;
    }

    .my-blog-card img {
        height: 200px;
    }

    .btn-show {
        width: 45%;
        height: 37px;
        font-size: 12px;
        /* padding: 4px 12px 7px 12px; */
    }

        .btn-show a {
            top: 2px;
            font-size: 14px;
        }

    /*news index*/
    .inner-part {
        flex-direction: column;
        height: auto;
    }

        .inner-part .img {
            order: -1;
            margin-bottom: 10px;
            width: 90%;
            height: 150px;
            margin-top: 25px;
        }

    .content {
        width: 100%;
        margin-left: 0;
        padding: 0px;
        margin-top: 20px;
    }

    #tap-1:checked ~ .inner-part .content-1,
    #tap-2:checked ~ .inner-part .content-2,
    #tap-3:checked ~ .inner-part .content-3 {
        width: 100%;
        opacity: 1;
        margin-left: 0px;
        z-index: 100;
        transition-delay: .3s;
        margin-right: 0px;
    }

    .blog-card {
        height: 480px;
        margin-bottom: 0px;
    }

    .sliders .tap {
        width: 30px;
    }

    /*footer*/
    .footer {
        height: auto;
        width: 100%;
    }

    .txt-h-footer {
        font-size: 20px;
        margin-left: 0px;
    }

    .back-footer {
        padding-top: 70px;
    }

        .back-footer img {
            width: 100%;
            height: 100%;
            content: url("/assets/web/img/img46.jpg");
        }

    .footer-column {
        margin-left: 35px;
        width: 87%;
        margin-top: 80px;
        height: auto;
        float: right;
        position: relative;
        margin-right: 20px;
        margin-bottom: 0px;
    }

    .footer-logo {
        width: 80px;
        margin-top: -40px;
        margin-left: -25px;
    }

        .footer-logo img {
            width: 100%;
        }

    .them-name-footer {
        font-size: 16px;
        font-weight: 700;
        margin-top: -65px;
        margin-left: 55px;
    }

    .txtfooter {
        font-size: 14px;
        width: 100%;
        text-align: justify;
        margin-left: 30px;
        margin-left: 0px;
    }

    .social-media-footer {
        margin-right: 75px;
    }

        .social-media-footer ul li a {
            width: 33px;
            height: 33px;
        }

            .social-media-footer ul li a img {
                width: 20px;
            }

    .txt-center-footer {
        font-size: 14px;
        width: 100%;
        list-style: none;
        direction: rtl;
    }

        .txt-center-footer a {
            padding-top: 6.5px;
        }

    .icon-phone img {
        width: 30px;
        align-items: center;
        text-align: center;
        padding: 0.5px;
    }

    .txt-right-footer {
        font-size: 14px;
    }

    .double-dote {
        font-size: 18px;
    }

    .icon-phone {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-phone img {
            width: 30px;
        }

    .icon-clock {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-clock img {
            width: 30px;
        }

    .icon-gmail {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-gmail img {
            width: 30px;
        }

    .icon-location {
        width: 35px;
        height: 35px;
        text-align: center;
        align-items: center;
        justify-content: center;
    }

        .icon-location img {
            width: 30px;
        }

    /*img-head-posts*/
    .img-head-about {
        height: 175px;
        width: 100%;
        object-fit: cover;
    }

    .head-page-img {
        width: 100%;
        height: 175px;
        margin-top: 0px;
    }

    .NamePage {
        font-size: 20px;
        margin-right: 30px;
        margin-top: -120px;
    }

    .breadcrumb {
        font-size: 14px;
        margin-right: 30px;
        margin-top: -90px;
    }

    /*page-project*/
    .row-project {
        height: auto;
        margin-bottom: 0px;
    }

    .title-project {
        font-size: 28px;
    }

    #gallery figure {
        position: relative;
        margin: 15px;
        width: 300px;
        height: 300px;
        transition: 0.2s;
        text-align: center;
        margin-bottom: 20px;
        width: 100%;
    }

    #gallery-filter label {
        color: #333;
        font-size: 12px;
        margin-right: 5px;
    }

    #gallery-filter {
        margin-left: -20px;
        margin-right: 21px;
        width: 114%;
        border-radius: 10px;
    }

    #gallery figure .txt-pic {
        opacity: 1;
        color: #ffc107;
        font-size: 18px;
    }

    #gallery figure img {
        filter: brightness(0.5) saturate(1.2) contrast(0.85);
        transition: filter 200ms linear, transform 200ms linear;
    }

    html,
    button,
    input,
    select,
    textarea {
        color: #bbb;
        font-size: 16px;
    }

    /*page-about*/
    .p-about {
        margin-left: 0px;
        font-size: 28px;
        margin-bottom: 0px;
    }

    .img-left {
        width: 100%;
        margin-top: 50px;
    }

        .img-left img {
            width: 100%;
            height: 100%;
            margin-top: 0px;
        }

    .txt-about {
        margin-right: 0;
        margin-left: 0;
        width: 100%;
        font-size: 14px;
        line-height: 1.8;
    }

    .img-head-page-about {
        margin-right: 0;
    }

    .txt-page-about {
        height: auto;
        margin-top: 0px;
    }

    .counter-about {
        width: 100%;
        margin-top: 20px;
        margin-right: 0px;
    }

    .item-counter span {
        font-size: 24px;
    }

    .item-counter div {
        font-size: 16px;
    }

    .counters-page-about {
        flex-direction: column;
        height: auto;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 20px;
    }

    .item-counter-about {
        width: 100%;
        margin-left: 20px;
        margin-right: 20px;
    }

        .item-counter-about span p {
            font-size: 25px;
            top: 10px;
            z-index: 30;
            margin-top: -45px;
        }

        .item-counter-about div p {
            font-size: 18px;
            width: 100%;
            top: 10px;
        }

    .item-counter-about {
        margin-left: 5px;
        margin-right: 5px;
    }

    .employee-line {
        display: none;
    }

    .page-about-counter {
        height: auto;
        margin-bottom: 0px;
        margin-top: 20px;
    }

    .team-page-about {
        height: auto;
        margin-top: 0px;
        margin-bottom: 0px;
    }

    .txt-person {
        width: 100%;
        font-size: 28px;
        margin-right: 20px;
        margin-top: 50px;
    }

    .person {
        width: 100%;
        margin-left: 0px;
        margin-top: -50px;
    }

    .name {
        font-size: 24px;
        margin-top: 0px;
    }

    .title {
        font-size: 18px;
    }

    .page-about-counter {
        width: 80%;
        height: auto;
        margin-top: 0px;
    }

    .icon-counter-about {
        width: 40px;
    }

        .icon-counter-about img {
            width: 35px;
            height: 35px;
        }

    body.night .icon-counter-about-dark {
        display: block;
        max-width: 35px;
    }

    /*page-contact*/
    .flexbox {
        min-height: 650px;
        width: 90%;
    }

    .form {
        width: 100%;
    }

    .title-flexbox {
        font-size: 24px;
    }

    .big-circle {
        display: none;
    }

    .input {
        border: 1px solid #fafafa;
    }

    .input-flexbox label {
        font-size: 12px;
    }

    textarea.input {
        border: 1px solid #fff;
    }

    .text,
    .information,
    .social-media p {
        font-size: 14px;
    }

    .btn {
        font-size: 14px;
    }

    .social-media {
        margin-left: 0px;
    }

        .social-media h3 {
            font-size: 18px;
        }

    .social-media-contact {
        margin-left: 101px;
        margin-top: 30px;
        margin-right: 65px;
    }

        .social-media-contact ul li {
            list-style: none;
            margin-right: 5px;
            width: 30px;
        }

            .social-media-contact ul li a {
                width: 30px;
                height: 30px;
            }

                .social-media-contact ul li a img {
                    width: 20px;
                }

    .contact-form::before {
        display: none;
    }

    .contact-form {
        margin-top: 0px;
        width: 100%;
    }

    .information img {
        padding-left: 10px;
    }

    .google-map {
        width: 100%;
        height: 400px;
        flex: 50%;
        margin-top: 50px;
        border-radius: 10px;
        position: relative;
        background-color: #ffc107;
    }

        .google-map iframe {
            width: 100%;
            height: 400px;
            padding: 0px;
        }

    /*page-posts*/
    .contact-post {
        width: 100%;
        height: 340px;
        margin-left: 0px;
        padding-left: 20px;
        padding-right: 20px
    }

        .contact-post img {
            width: 100%;
            margin-bottom: 20px;
            height: 300px;
            margin-top: 20px;
            margin-left: 0px;
            filter: brightness(0.5);
            object-fit: cover;
        }

    .comment::before,
    .publish-date::before,
    .author-name::before {
        margin-right: 0px;
    }

    .last-post-title {
        font-size: 20px;
    }

    .sidebar-related-post img {
        width: 25%;
        height: 50px;
        margin-left: 0px;
    }

    .sidebar-related-post {
        max-width: 100%;
        margin-left: 0px;
    }

    aside {
        width: 100%;
        height: auto;
    }

    .left-page-single {
        width: 100%;
        height: auto;
        margin-bottom: 0px;
    }

    .right-page-single {
        width: 100%;
        height: auto;
        margin-bottom: 75px;
    }

    .pages-content {
        width: 100%;
        padding: 30px;
    }

        .pages-content p {
            width: 100%;
            line-height: 2;
            margin-left: 0px;
            font-size: 14px;
        }

    .input-flexbox-post {
        width: 100%;
    }

    .title-post {
        width: 65%;
        margin-right: 10px;
        text-align: right;
        direction: rtl;
        font-size: 12px;
    }

    .title-flexbox-post {
        font-size: 20px;
    }

    .post-title {
        font-size: 18px;
        width: 100%;
        margin-top: 5px;
        direction: rtl;
        text-align: right;
        margin-left: 0px;
    }

    .short-decs {
        width: 100%;
        font-size: 12px;
    }

    .thumbnail-image {
        width: 100%;
        height: 100%;
    }

        .thumbnail-image img {
            border-radius: 10px;
            width: 100%;
            height: 100%;
        }

    .inner-content {
        margin-top: 440px;
        font-size: 14px;
    }

    .meta-info {
        font-size: 7px;
        text-align: right;
        direction: rtl;
        margin-right: 0px;
    }

        .meta-info span {
            margin-left: 0px;
            font-size: 9px;
            margin-right: 0px;
        }

    .input-flexbox-post label {
        font-size: 12px;
    }

    .specification-post {
        padding-right: 0px;
        width: 100%;
        margin-left: 0px;
    }

    .contact-form-post {
        background-color: #ffc107;
        position: relative;
        width: 100%;
    }

    .flexbox-post {
        padding: 0rem;
    }

    .pic-person img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1px solid #000;
        object-fit: cover;
    }

    .date-comment {
        margin-top: -55px;
        font-size: 14px;
    }

    .txt-comment {
        font-size: 14px;
        margin-top: 10px;
    }

        .txt-comment p {
            padding-top: 110px;
        }

    .line-comment {
        margin-top: 0px;
    }

    .comment-flexbox {
        height: auto;
        width: 100%;
        margin-left: 0px;
    }

    .comment-flexbox-item {
        width: 100%;
        height: auto;
        background-color: #ffc107;
        margin-bottom: 20px;
        padding: 0px 20px 20px 20px;
        border-radius: 10px;
    }

    .pic-person {
        width: 50px;
        height: 50px;
        margin-top: 45px;
        margin-right: 5px;
    }

    .name-item-comment {
        font-size: 20px;
        margin-top: 38px;
        margin-right: 0px;
    }

    .left-page-single {
        margin-top: 0px;
    }

    .p-contact {
        margin-left: 0px;
        margin-top: -300px;
        font-size: 24px;
    }

    .num-contact {
        margin-left: 0px;
        margin-top: 0px;
        font-size: 22px;
    }

    .email-contact {
        margin-left: 0px;
        margin-top: 0px;
        font-size: 20px;
    }

    .image-comment-services {
        position: absolute;
        height: 75px;
        width: 75px;
        left: 60%;
        transform: translateX(0%);
        top: 20px;
    }

    .name-comment-services {
        font-size: 20px;
        left: 5%;
        transform: translateX(-50%);
        top: 15px;
    }

    .card-services {
        margin-bottom: 120px;
    }

    /*page-team*/
    .page-team {
        margin-left: 0px;
        margin-top: 0px;
        height: auto;
    }

    .img-page-team {
        width: 100%;
    }

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

    .icon-team {
        margin-top: 20px;
        width: 65%;
        margin-right: 13px;
    }

    .name-team-member {
        width: 100%;
        margin-left: 0px;
        margin-top: 20px;
        font-size: 24px;
        margin-right: 0px;
    }

    .Response-duty-dote {
        font-size: 16px;
        margin-left: -24px;
    }

    .duty {
        width: 100%;
        margin-left: 0px;
        font-size: 13px;
        text-align: right;
        direction: rtl;
        margin-right: 0px;
    }

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

    .duty-dote1 {
        margin-left: 50px;
        margin-right: 66px;
    }

    .duty-dote2 {
        margin-left: 50px;
    }

    .duty-dote3 {
        margin-left: 50px;
        margin-right: 52px;
    }

    .txt-duty {
        width: 100%;
        font-size: 16px;
    }

    .line-team {
        margin-top: 50px;
    }

    .skill {
        margin-top: 20px;
        margin-left: 0px;
    }

    .biography {
        margin-top: 0px;
        height: auto;
    }

    .headear-biography {
        font-size: 24px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .txt-left-biography {
        margin-left: 0px;
        margin-right: 0px;
        font-size: 16px;
    }

    .biography-left {
        width: 100%;
        margin-left: 0px;
        margin-top: 0px;
    }

    .biography-right {
        margin-right: 0px;
        width: 100%;
    }

    .header-guidelines {
        margin-top: 20px;
        margin-left: 0px;
        font-size: 24px;
        margin-right: 0px;
    }

    .guidelines {
        margin-top: 0px;
        height: auto;
        margin-bottom: 50px;
    }

    .txt-guidelines {
        width: 100%;
        font-size: 16px;
        margin-left: 0px;
    }

    .icon-team-instagram {
        background-color: #dcdcdc;
    }

        .icon-team-instagram:hover {
            background-color: #ffc107;
        }

    .icon-team-telegram {
        background-color: #dcdcdc;
    }

        .icon-team-telegram:hover {
            background-color: #ffc107;
        }

    .icon-team-facebook {
        background-color: #dcdcdc;
    }

        .icon-team-facebook:hover {
            background-color: #ffc107;
        }

    .icon-team-twitter {
        background-color: #dcdcdc;
    }

        .icon-team-twitter:hover {
            background-color: #ffc107;
        }

    /*page 404*/
    .txt-page404 {
        font-size: 28px;
        margin-top: 25px;
        margin-bottom: 25px;
    }

    .error-container {
        text-align: center;
        font-size: 90px;
        font-weight: 800;
        margin-top: 100px;
        width: 70%;
        height: auto;
    }

        .error-container > span.zero {
            margin-bottom: 20px;
        }
}

.farsi {
    color: #FF4500;
}