@font-face {
    font-family: "Vazir";
    src: url("/cache/fonts/1.woff2") format("woff2");
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("/cache/fonts/2.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("/cache/fonts/3.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("/cache/fonts/4.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("/cache/fonts/5.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Vazir";
    src: url("/cache/fonts/6.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
}

body {
    font-family: 'Vazir', sans-serif !important;
}

a {
    text-decoration: none;
}

* {
    list-style: none;
    padding: unset;
    margin: unset;
    position: relative;
    box-sizing: border-box;
    outline: unset;
    direction: rtl;
    font-family: 'Vazir', sans-serif !important;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    background: rgba(255, 255, 255, .9);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    z-index: 100;
}

.middle {
    width: 1000px;
    margin: 0 auto;
}

.input {
    float: right;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .1);
    border-radius: 10px;
    height: 46px;
}

.input input {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 90%;
    border: unset;
    background: unset;
    padding: 10px;
    z-index: 2;
    text-align: right;
    direction: rtl;
    font-size: 14px;
}

.middle.logo-middle {
    height: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 42%;
    margin-top: 20px;
}

.middle.logo-middle img {
    width: 100%;
}

ul.header-social-box {
    float: left;
    width: 40%;
}

.input.header-search-box {
    width: 31%;
    margin-top: 20px;
}

ul.header-social-box a {
    float: left;
    font-size: 32px;
    color: black;
    opacity: .7;
    margin-right: 15px;
    margin-top: 22px;
    transition: .4s;
    font-size: 0px;
}

ul.header-social-box a:hover {
    opacity: 1;
    color: #f3ad28;
}

input,
button {
    font-family: 'Vazir';
}

.input p {
    position: absolute;
    transition: .4s;
    right: 10px;
    top: 9px;
    font-size: 16px;
    opacity: .6;
}

.active.input p {
    top: 2px;
    font-size: 12px;
    opacity: 1;
    color: #f3ad28;
}

.input i {
    position: absolute;
    left: 0;
    font-size: 22px;
    left: 10px;
    top: 5px;
}

.input.active input {
    padding-top: 20px;
}

nav.best-links {
    float: left;
    width: 100%;
    background: rgba(0, 0, 0, .1);
    height: 50px;
    margin-top: 90px;
}

nav.best-links li {
    float: right;
    width: 25%;
    padding-top: 3px;
    display: inline-block;
    text-align: center;
}

nav.best-links li i {
    font-size: 22px;
    color: black;
    margin-top: 4px;
    margin-left: 10px;
    display: inline-block;
    float: right;
}

nav.best-links li a {
    font-size: 19px;
    font-weight: 400;
    color: black;
    display: inline-block;
    float: right;
    margin: 4px;
}

section.front-slider {
    float: left;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
}

section.front-slider items img {
    width: 100%;
    aspect-ratio: 16/6;
    position: absolute;
    opacity: .3;
}

section.front-slider item h3 {
    color: #fff;
    float: right;
    width: 100%;
    font-size: 36px;
    font-weight: bolder;
    margin-top: 100px;
    margin-bottom: 20px;
}

section.front-slider item {
    background: black;
    width: 100%;
    float: right;
    \: 100%;
}

section.front-slider item h3 a {
    color: #fff;
}

section.front-slider item h3:before {
    content: "";
    background: linear-gradient(260.54deg, #F3AD28 -2.94%, #fff 229.8%);
    width: 10px;
    float: right;
    height: 44px;
    border-radius: 100px;
    margin-top: 8px;
    margin-left: 14px;
}

section.front-slider item p {
    float: right;
    font-size: 24px;
    color: #fff;
    font-weight: 200;
    text-align: justify;
    line-height: 2;
    font-size: 44px;
    min-width: 51%;
    background: rgba(0,0,0,.7);
    margin-top: 20px;
}

section.front-slider item .middle a:nth-child(3) {
    float: right;
    width: 22%;
    background: linear-gradient(261.2deg, #F3AD28 -15.71%, #fff 146.06%);
    margin-top: 30px;
    height: 50px;
    border-radius: 10px;
    text-align: right;
    font-size: 22px;
    padding-top: 4px;
    font-weight: bold;
    color: #000;
    text-shadow: 0px 3px rgb(0 0 0 / 20%);
    padding: 4px 14px;
    transition: .4s;
    box-shadow: 0px 10px 20px -10px;
}

section.contact-section {
    float: left;
    width: 100%;
    background: linear-gradient(268.5deg, #D9D9D9 -8.18%, rgba(217, 217, 217, 0) 104.17%);
    box-shadow: 0px 28px 29px -18px rgba(0, 0, 0, 0.15);
    height: 80px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

section.contact-section h4 {
    font-size: 24px;
    margin-top: 7px;
}

section.our-servise {
    float: left;
    width: 100%;
    margin-top: 50px;
}

section.contact-section a {
    background: linear-gradient(261.2deg, #F3AD28 -15.71%, #fff 146.06%);
    float: left;
    height: 50px;
    border-radius: 10px;
    text-align: right;
    font-size: 22px;
    padding-top: 4px;
    font-weight: bold;
    color: #000;
    text-shadow: 0px 3px rgb(0 0 0 / 30%);
    padding: 7px 14px;
    transition: .4s;
    box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, .1);
    text-align: center;
    width: 100%;
    margin-top: 5px;
}

section.contact-section h2 {
    position: absolute;
    left: 0;
    top: 10px;
    width: 20%;
}

.page-title-box {
    float: left;
    width: 100%;
    display: inline;
    text-align: center;
    height: 45px;
}

.page-title-box p {
    text-align: center;
    font-size: 28px;
    font-weight: 500;
    display: contents;
    float: right;
    width: 100%;
}

.page-title-box i {
    width: 30px;
    height: 5px;
    background: #f3ad28;
    display: inline-block;
    margin: 4px 10px;
}

.all-servise {
    float: left;
    width: 100%;
    margin-top: 5%;
}

.as {
    float: right;
    width: 50%;
    margin-bottom: 5%;
}

.as-number-box {
    float: right;
    width: 16%;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background: linear-gradient(267.2deg, #E7E7E7 -28.26%, rgba(255, 255, 255, 0) 118.8%), #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 31px 24px -18px rgba(0, 0, 0, 0.15);
    margin-right: 3%;
    margin-top: 7%;
}

.as-number-box p {
    text-align: center;
    font-size: 55px;
    font-weight: bold;
    position: absolute;
    width: 100%;
    top: -2px;
    color: gray;
    transition: .3s;
}

.as-content {
    float: left;
    width: 78%;
    background: linear-gradient(267.2deg, #E7E7E7 -28.26%, rgba(255, 255, 255, 0) 118.8%), #FFFFFF;
    box-shadow: 0px 31px 24px -18px rgba(0, 0, 0, 0.15);
    border-radius: 5px;
    padding: 4% 5%;
    border: 1px solid rgba(0, 0, 0, .1);
    min-height: 150px;
}

.as-content h3 {
    font-size: 22px;
    background: linear-gradient(260.54deg, #727272 -2.94%, rgba(68, 68, 68, 0) 229.8%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    transition: .3s;
}

.as-content p {
    text-align: justify;
}

.as-content h3:after {
    content: "";
    width: 30px;
    height: 6px;
    float: left;
    background: #C9C9C9;
    border-radius: 100px;
    margin-top: 12px;
    transition: .4s;
}

.as:nth-child(1) .as-number-box,
.as:nth-child(3) .as-number-box {
    margin-right: unset;
}

.as.active h3 {
    background: linear-gradient(260.54deg, #F3AD28 -2.94%, #fff 229.8%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.as.active .as-number-box p {
    color: #f3ad28;
}

.as.active .as-content h3:after {
    background: linear-gradient(87.81deg, #F3AD28 -49.33%, rgba(243, 173, 40, 0) 168.43%);
}

.servise-slider {
    float: right;
    width: 100%;
    margin-top: 5%;
}

.servise-slider .x-item {
    float: right;
    width: 270px;
    background: linear-gradient(219.34deg, rgba(243, 173, 40, 0.25) -7.6%, rgba(255, 214, 136, 0) 140.76%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 19px 17px -15px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    padding: 3% 5%;
}

.servise-slider img {
    float: right;
    width: 100%;
    border-radius: 10px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

.servise-slider a {
    text-align: center;
}

.servise-slider a {
    color: red;
    width: 100%;
    float: right;
    text-align: center;
    margin: 10px 0;
    font-weight: bolder;
    color: #000;
    font-size: 30px;
}

section.front-slider img {
    float: right;
    width: 100%;
    opacity: 0.8;
    object-fit: cover;
    margin-top: -200px;
    z-index: 1;
    height: 100%;
}

.front-slider .owl-nav {
    position: absolute;
    top: 35%;
    width: 80%;
    height: 0;
    left: 10%;
}

.front-slider .owl-nav button {
    font-size: 80px !important;
    background: rgb(0 0 0 / 20%) !important;
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    height: 80px;
    z-index: 99;
    backdrop-filter: blur(10px);
    border: 2px solid #f3ad28 !important;
    border-radius: 10px;
    color: #f3ad28 !important;
}

.front-slider .owl-nav button:last-child {
    left: 0;
    right: unset;
}

.front-slider .owl-nav button span {
    margin-top: -25px;
    float: right;
    width: 100%;
    text-align: center;
}

.front-slider .owl-dots {
    position: absolute;
    bottom: 0;
    background: rgb(0 0 0 / 20%);
    width: 20%;
    left: 40%;
    height: 50px;
    border-radius: 10px 10px 0 0;
    backdrop-filter: blur(10px);
}

.front-slider .owl-dots button {
    float: right;
    width: 20px;
    aspect-ratio: 1/1;
    background: #858585;
    margin: 15px;
    border-radius: 50%;
    transition: .4s;
    transform: scale(.5);
}

.front-slider .owl-dots button.active {
    background: #f3ad28;
    box-shadow: 0px 0px 10px 1px #f3ad28;
    transform: scale(1);
}

section.last-works {
    float: left;
    width: 100%;
    margin-top: 2%;
}

.active-work {
    float: right;
    width: 100%;
    background: #282828;
    overflow: hidden;
    border-radius: 10px;
    margin-top: 5%;
    box-shadow: 0px 35px 15px -22px rgba(0, 0, 0, 0.15);
}

.active-work img,
.active-work video {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.aw-data {
    float: right;
    color: #fff;
    padding: 2% 4% 5%;
}

.aw-data h3 {
    float: right;
    width: 100%;
    font-size: 28px;
    margin-bottom: 3%;
}

.aw-date-box {
    position: absolute;
    left: 4.1%;
    width: auto;
    font-size: 24px;
    top: 30px;
}

.aw-date-box i {
    float: left;
}

.aw-date-box p {
    float: left;
    margin-left: 10px;
}

p.work-test {
    float: right;
    width: 100%;
    text-align: justify;
    font-size: 22px;
    font-weight: 100;
    line-height: 2;
}

.other-works {
    float: right;
    width: 100%;
}

.ow-item {
    float: right;
    width: 22%;
    overflow: hidden;
    margin-left: 4%;
    border-radius: 10px;
    aspect-ratio: 1/1;
    margin-top: 4%;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0px 35px 15px -22px rgba(0, 0, 0, 0.15);
    background: #000;
    cursor: pointer;
}

.ow-item img {
    float: left;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .5;
    position: relative;
    z-index: 9;
}

.ow-item i {
    position: absolute;
    color: red;
    z-index: 2;
    text-align: center;
    width: 100%;
    font-size: 70px;
    color: #fff;
    top: 29%;
}

.ow-other-items {
    float: left;
    width: 22%;
    aspect-ratio: 1/1;
    margin-top: 4%;
    overflow: hidden;
    border-radius: 10px;
    background: #000;
}

.ow-other-items img {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    filter: blur(27px);
    opacity: .5;
}

.ow-other-items strong {
    float: left;
    z-index: 2;
    color: #fff;
    font-size: 63px;
    width: 100%;
    text-align: center;
    margin-top: 20%;
}

.ow-other-items p {
    z-index: 2;
    color: #fff;
    text-align: center;
    font-size: 22px;
}

section.map {
    float: right;
    width: 100%;
    margin-top: 4%;
}

.map-title {
    float: right;
    width: 100%;
}

.r-map {
    float: right;
    width: 50%;
}

.r-map:before {
    content: "";
    width: 10px;
    height: 62px;
    background: linear-gradient(260.54deg, #F3AD28 -2.94%, #fff 229.8%);
    float: right;
    border-radius: 100px;
    margin-left: 10px;
}

.r-map h3 {
    font-size: 22px;
}

.l-map {
    float: left;
    width: 50%;
}

.l-map i {
    float: left;
    font-size: 40px;
    opacity: .5;
    transform: scale(.8);
}

.l-map p {
    float: left;
    font-size: 32px;
    font-weight: bold;
    margin: 6px;
    background: linear-gradient(95.12deg, #000000 -29.26%, rgba(0, 0, 0, 0) 170.24%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

section.map img {
    float: left;
    width: 100%;
    border-radius: 10px;
    margin-top: 4%;
    box-shadow: 0px 16px 16px -11px rgba(0, 0, 0, 0.15);
}

main.last-blog {
    float: left;
    width: 100%;
    margin-top: 3%;
}

.last-blogs {
    float: left;
    width: 100%;
    margin-top: 3%;
}

.last-blogs article {
    float: right;
    width: 48%;
    background: red;
    border-radius: 10px;
    margin-bottom: 4%;
    overflow: hidden;
    max-height: 200px;
    padding: 1.8% 2%;
    background: linear-gradient(265.79deg, #D9D9D9 -47.34%, rgba(217, 217, 217, 0) 120.26%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0px 35px 20px -30px rgba(0, 0, 0, 0.15);
}

.last-blogs article:nth-child(odd) {
    margin-left: 4%;
}

.lb-content {
    float: right;
    width: 68%;
}

.lb-content a {
    float: right;
    width: 100%;
    color: #000;
}

.lb-content p:nth-child(2) {
    float: right;
    width: 100%;
    text-align: justify;
    font-size: 14px;
}

.lb-content a:before {
    float: right;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f3ad28;
    content: "";
    margin: 15px 0 0 10px;
}

.lb-data {
    float: right;
    width: 100%;
    margin-top: 6px;
}

.lb-data div {
    float: right;
    width: 50%;
}

.lb-data i {
    float: right;
}

.lb-data p {
    float: right;
    width: unset !important;
    margin-right: 6px;
    margin-top: 2px;
}

.last-blogs img {
    float: left;
    width: 29%;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10px;
}

section.why {
    float: right;
    width: 100%;
    background: linear-gradient(0deg, rgb(61 61 61 / 20%), #fff);
    padding-top: 3%;
    margin-bottom: -3%;
}

.quest-p {
    float: right;
    font-size: 38px;
    font-weight: 900;
    background: linear-gradient(238deg, #000000 16.32%, #fff 169.64%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    text-shadow: 0px 9px 8px rgba(0, 0, 0, 0.25);
    height: 83px;
    min-width: 1px;
}

section.why .middle {
    width: 700px;
}

p.answ-p {
    float: right;
    width: 100%;
    margin-top: 4%;
    font-size: 22px;
    text-align: justify;
    opacity: .8;
}

.quest-p:after {
    content: "";
    float: right;
    width: 50%;
    background: red;
    height: 10px;
    margin-top: 15px;
    border-radius: 100px;
    background: linear-gradient(190.11deg, #F3AD28 -1.52%, rgba(243, 173, 40, 0) 110.86%), rgba(255, 255, 255, 0.5);
}

.why-data {
    float: right;
    width: 100%;
    margin-top: 4%;
    margin-bottom: 6%;
}

.why-data div {
    float: right;
    width: 50%;
}

.why-data div div {
    width: 30%;
    aspect-ratio: 1/1;
    background: rgb(0 173 75 / 20%);
    border-radius: 50%;
    margin-left: 20px;
}

.why-data i {
    float: right;
    font-size: 52px;
    width: 100%;
    text-align: center;
    margin-top: 20px;
    margin-bottom: unset;
    color: #00AD4B;
}

.why-data div h4 {
    font-size: 46px;
    font-weight: 900;
}

.why-data p {
    font-size: 32px;
    font-weight: 200;
    margin-top: -24px;
}

.why-data div:nth-child(2) div {
    background: rgb(243 173 40 / 20%);
}

.why-data div:nth-child(2) div i {
    color: rgb(243 173 40 / 100%);
}

.map-title.for-connection {
    font-size: 20px;
}

.map-title.for-connection h3 {
    font-size: 32px;
}

.map-title.for-connection .r-map:before {
    height: 88px;
}

.connection-box {
    float: right;
    width: 100%;
}

.connection-box div {
    border: 2px dashed #006C2F;
    height: 64px;
    width: 48%;
    margin-bottom: 4%;
    border-radius: 10px;
    padding: 2%;
    float: right;
    cursor: pointer;
    transition: .4s;
}

.map-title.for-connection .r-map {
    width: 100%;
    margin-bottom: 4%;
}

.connection-box div i {
    float: left;
    font-size: 26px;
}

.connection-box div:nth-child(odd) {
    margin-left: 4%;
}

.connection-box div a {
    float: right;
    font-size: 22px;
    font-weight: 500;
}

.director.cb-insta {
    border-color: #c10000;
}

.director.cb-insta i,
.director.cb-insta a {
    color: #c10000;
}

.director.cb-wa a,
.director.cb-wa i {
    color: #006C2F;
}

.director.cb-phone {
    border-color: #ab7819;
}

.director.cb-phone i,
.director.cb-phone a {
    color: #ab7819;
}

.director.cb-email {
    border-color: #407bff;
}

.director.cb-email a,
.director.cb-email i {
    color: #407bff;
}

footer {
    float: left;
    width: 100%;
    background: #141414;
    height: 425px;
    overflow: hidden;
    border-top: 5px solid #f3ad28;
    margin-top: 2%;
}

.rows {
    float: left;
    width: 100%;
    height: 100%;
    padding: 0 5%;
}

.r {
    float: right;
    width: 25%;
    padding: 3%;
    overflow: hidden;
    position: relative;
    height: 100%;
}

.r:nth-child(2) {
    width: 50%;
}

.web-name {
    float: right;
    width: 100%;
}

.web-name a:last-child {
    float: right;
    color: #fff;
    font-weight: bold;
    font-size: 28px;
    margin: -5px 10px 0 0;
}

.web-name img {
    float: right;
    width: 200px;
}

.social-box {
    position: absolute;
    bottom: 5%;
    font-size: 18px;
}

.logo-barge img {
    width: 10px;
}

.social-box p {
    float: right;
    color: #fff;
    margin-left: 10px;
}

.social-box a {
    color: #fff;
    float: right;
    font-size: 0px;
    margin-top: -2px;
    margin-left: 16px;
}

nav.r ul {
    float: right;
    width: 100%;
}

nav.r h3 {
    color: #fff;
    float: right;
}

nav.r h3::before {
    content: "";
    float: right;
    width: 11px;
    height: 11px;
    background: #f3ad28;
    border-radius: 50%;
    margin: 7px 2px 0 11px;
}

nav.r li a {
    float: right;
    width: 100%;
    color: #fff;
    font-size: 18px;
    margin-top: -4px;
}

nav.r li {
    list-style: circle;
    direction: rtl;
    float: right;
    width: 100%;
    margin: 10px 23px;
    font-weight: 100;
    transition: .4s;
    color: #fff;
    list-style-position: 13px 0;
}

nav.r li:hover {
    font-weight: 700;
}

.wa-c {
    color: #fff;
    float: right;
    width: 100%;
}

.wa-c a {
    float: right;
    background: #001806;
    padding: 6px 10px;
    margin-top: 10px;
    border-radius: 10px;
    border: 2px solid #00ff00;
    color: #00ff00;
}

.wa-c a i {
    float: right;
    margin: 1px 0 0 8px;
}

.wa-c * {
    transition: .4s;
}

.wa-c a:hover {
    background: #00ff00;
    color: #000;
}

.barge {
    position: absolute;
    bottom: 5%;
    width: 100%;
}

.logo-barge {
    float: right;
    width: 24px;
    position: relative;
}

.logo-barge img {
    width: 100%;
    position: relative;
}

.logo-barge area {
    width: 100%;
    aspect-ratio: 1/1;
    background: #b8b8b8;
    position: absolute;
    top: 13px;
    border-radius: 50%;
    animation: brg 2s linear infinite;
}

.barge a {
    float: right;
    color: #fff;
    margin: -4px 15px;
    font-size: 22px;
}

.barge p {
    float: right;
    width: 80%;
    margin-right: 15px;
    font-size: 13px;
    color: #fff;
    opacity: .6;
}

@keyframes brg {
    0% {
        transform: scale(0);
        opacity: 1
    }
    60% {
        transform: scale(1.1);
        opacity: 1;
    }
    100% {
        transform: scale(1.7);
        opacity: 0
    }
}

.social-box a i {
    font-size: 22px;
}

main.blog-main {
    float: left;
    width: 68%;
}

section.blog {
    float: left;
    width: 100%;
    margin-top: 50px;
}

.blog .a-blog {
    width: 100%;
    margin-left: unset;
    height: auto;
}

aside.blog-menu {
    float: right;
    width: 30%;
}

aside.blog-menu ul {
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0px 26px 15px -25px rgb(0 0 0 / 25%);
    border-radius: 10px;
    background: #fff;
    margin-bottom: 15px;
    float: right;
    width: 100%;
    padding-bottom: 4%;
}

aside.blog-menu ul h3 {
    padding: 5%;
    float: right;
}

aside.blog-menu ul h3::before {
    content: "";
    background: #f3ad28;
    width: 12px;
    height: 12px;
    float: right;
    border-radius: 50%;
    margin: 8px 0 0px 8px;
}

aside.blog-menu ul li a {
    width: 100%;
    color: #000;
}

aside.blog-menu ul li {
    list-style: circle;
    float: left;
    width: 100%;
    list-style-position: inside;
    padding: 6px 6% 8px 6%;
    border-bottom: 1px solid rgba(0, 0, 0, 0);
    transition: .4s;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

aside.blog-menu ul li:hover {
    font-weight: 900;
    list-style: disc;
    list-style-position: inside;
}

aside.blog-menu ul p {
    font-size: 12px;
    opacity: .7;
}

.blog .wa-c * {
    color: #000;
    float: right;
    width: 100%;
}

.wa-c h3::before {
    display: none;
}

.blog .wa-c p {
    font-size: 16px;
    padding: 0 5%;
}

.blog .wa-c a i,
.blog .wa-c a {
    color: #fff !important;
    width: auto;
}

.blog .wa-c a {
    margin-right: 5%;
}

.blog .wa-c h3 {
    padding-bottom: 6px;
}

aside.blog-menu ul:nth-child(2) {
    background: #bbffbd;
}

.a-blog ul {
    float: left;
    width: 65%;
    margin-top: 10px;
    opacity: .5;
}

.a-blog ul li {
    float: right;
    margin-left: 20px;
}

.a-blog ul li * {
    float: right;
    padding: unset;
    margin: unset;
    text-align: unset;
    width: unset;
}

.a-blog ul li i {
    float: right;
    margin-left: 3px;
}

button.more-blog {
    float: left;
    width: 30%;
    background: rgb(243 173 40 / 20%);
    border: 2px solid #f3ad28;
    border-radius: 10px;
    padding: 2% 4%;
    cursor: pointer;
    transition: .4s;
    font-size: 18px;
    font-weight: bold;
    color: #f3ad28;
    margin-left: 35%;
    margin-top: 20px;
}

section.location-box {
    float: left;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    height: 50px;
    box-shadow: 0px 2px 39px -20px rgba(0, 0, 0, .3);
}

.location-text {
    float: right;
    background: rgb(243 173 40 / 20%);
    height: 50px;
    width: auto;
}

.location-text i {
    color: #f3ad28;
    float: right;
    font-size: 24px;
    margin: 7px;
}

.location-text p {
    float: right;
    margin: 12px 0 0 12px;
    color: #f3ad28;
    font-weight: 900;
}

section.location-box li a {
    float: right;
    color: #000;
    transition: .4s;
}

section.location-box li {
    float: right;
    height: 50px;
    border-left: 2px solid rgba(0, 0, 0, .1);
    padding: 11px;
    transition: .4s;
}

section.location-box li:hover {
    background: #f3ad28;
}

section.location-box li:hover a {
    color: #fff;
}

.a-blog {
    float: right;
    width: 49%;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0px 26px 15px -25px rgb(0 0 0 / 25%);
    height: 200px;
    border-radius: 10px;
    margin-bottom: 2%;
    background: #fff;
    transition: .4s;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

.a-blog img {
    width: 30%;
    height: 100%;
    object-fit: cover;
    float: right;
}

.a-blog:nth-child(odd) {
    margin-left: 2%;
}

.customers-slider .c-stage {
    height: 268px;
}

.a-blog h2 a,
.a-blog p {
    float: left;
    width: 65%;
}

.a-blog a {
    margin-top: 3%;
    color: #000;
}

.a-blog p {
    padding-left: 5%;
    text-align: justify;
    margin-top: 1%;
}

.blog-holder {
    float: left;
    width: 100%;
    margin-top: 40px;
}

.a-blog:hover {
    border-color: #000;
    transform: translate(0px, -10px);
}

.more-blogs {
    float: left;
    width: 100%;
    background: #5d175c30;
    border: 2px solid #5d175c;
    border-radius: 10px;
    padding: 2% 4%;
    cursor: pointer;
    transition: .4s;
}

.middle.nim {
    width: 500px;
}

.more-blogs * {
    float: right;
    transition: .4s;
}

.more-blogs p {
    float: right;
    font-size: 22px;
    margin-left: 10px;
    margin-top: 2px;
}

.more-blogs a {
    color: #5d175c;
}

.more-blogs i {
    float: left;
    font-size: 25px;
    color: #5d175c;
}

.more-blogs:hover * {
    color: #fff;
}

.more-blogs:hover {
    background: #5d175c;
}

aside.blog-menu ul li:last-child {
    border: unset;
}

::-webkit-scrollbar {
    width: 10px;
}


/* Track */

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, .7);
}


/* Handle */

::-webkit-scrollbar-thumb {
    background: rgb(244 174 43);
    border-radius: 100px;
    opacity: .5;
}

.top-message a {
    float: right;
    width: 51%;
    color: #4caf50;
}

.top-message p {
    float: right;
    width: 80%;
}

.top-message i {
    float: left;
    height: 100%;
    margin: unset;
    font-size: 22px;
    position: absolute;
    left: 4%;
    top: 20px;
    cursor: pointer;
}

.message-line {
    float: left;
    width: 100%;
}

button.add-image-in-chat {
    position: relative;
}

button.add-image-in-chat.load {
    opacity: .5;
}

button.add-image-in-chat input {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

.chatbox.active {
    left: 20px;
}

main.blog-main.sin {
    float: left;
}

.img-box {
    float: left;
    width: 100%;
    position: relative;
    height: auto;
}

.img-box img {
    width: 100%;
    height: auto;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.sin ul.blog-details {
    position: absolute;
    z-index: 2;
    right: 20px;
    top: 20px;
    float: right;
    width: 100%;
}

ul.blog-details li {
    float: right;
    background: #fff;
    border-radius: 100px;
    margin-left: 20px;
    padding: 10px 15px 6px 15px;
    border: 1px solid rgba(0, 0, 0, .1);
}

ul.blog-details li * {
    float: right;
    margin-left: 6px;
}

ul.blog-details li p {
    margin: unset;
    font-weight: bold;
}

h1.single-title {
    float: right;
    width: 100%;
    background: rgba(0, 0, 0, .1);
    margin-top: -9px;
    padding: 4%;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.single-content {
    float: right;
    width: 100%;
    background: #fff;
    border: 1px solid rgb(0, 0, 0, .2);
    border-radius: 10px;
}

h1.single-title a {
    color: #000;
}

.cats-single-box {
    float: right;
    width: 100%;
    padding: 2% 4%;
    background: rgba(0, 0, 0, .04);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.single-html-content {
    float: right;
    width: 100%;
    padding: 4%;
    text-align: justify;
}

.single-html-content a {
    color: #0749df;
    font-weight: bold;
}

.single-html-content h2 {
    float: right;
    width: 100%;
    margin: 13px 0;
}

.cats-single-box p {
    float: right;
    width: 100%;
    margin-bottom: 10px;
}

.cats-single-box li a {
    float: right;
    color: #f3ad28;
    margin-left: 15px;
    border: 1px solid #f3ad28;
    padding: 10px;
    border-radius: 10px;
    background: rgb(243 173 40 / 20%);
    font-weight: bold;
}

.share-box {
    float: right;
    width: 100%;
    padding: 0 4% 4% 4%;
    box-shadow: 0px 26px 15px -25px rgb(0 0 0 / 25%);
}

.share-box p {
    float: right;
    margin-left: 10px;
}

.share-box a,
.share-box button {
    float: right;
    margin-left: 10px;
    font-size: 24px;
    background: unset;
    border: unset;
    color: #404040;
    margin-top: -6px;
    transition: .3s;
    cursor: pointer;
}

.share-box a:hover,
.share-box button:hover {
    transform: scale(1.1);
}

.cm-box {
    float: right;
    width: 100%;
    margin-top: 20px;
}

.comments-layerr {
    float: left;
    width: 100%;
}

.a-cm {
    float: right;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 10px;
    margin-bottom: 20px;
    padding: 4%;
    background: #fff;
    box-shadow: 0px 26px 15px -25px rgb(0 0 0 / 25%);
}

.a-cm h3 {
    float: right;
    margin-left: 14px;
}

.a-cm button {
    background: #f3ad28;
    border: unset;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 10px;
    color: #fff;
}

.replays {
    float: left;
    width: 100%;
    margin-top: 20px;
}

.replays .a-cm {
    background: rgb(243 173 41 / 20%);
}

.a-cm i {
    opacity: .7;
    font-size: 14px;
}

.comment-sender-box {
    float: right;
    width: 100%;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 10px;
    margin-top: 10px;
    padding: 3% 3% 4% 3%;
    background: #fff;
    box-shadow: 0px 26px 15px -25px rgb(0 0 0 / 25%);
}

.inputs-cm p {
    float: right;
    width: 100%;
    font-weight: bold;
    margin-bottom: 10px;
}

input.cm-tel {
    float: left;
    width: 100%;
    margin-bottom: 14px;
}

input.cm-name {
    width: 49%;
    margin-left: 2%;
}

button.send-cm {
    width: 49%;
}

.inputs-cm button,
.inputs-cm input {
    float: right;
    height: 40px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, .2);
    padding: 0 3%;
    background: rgba(0, 0, 0, 0.05);
}

button.send-cm {
    background: #f3ad28;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
}

.inputs-cm h5 {
    float: right;
    width: auto;
    background: #fdf1ff;
    padding: 10px 15px;
    border-radius: 10px;
    border: 1px solid #9c27b0;
    margin-bottom: 20px;
    display: none;
}

.inputs-cm h5 i {
    float: left;
    margin-right: 10px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: -4px;
    color: #9c27b0;
}

.inputs-cm.rep h5 {
    display: block;
}

.comment-sender-box .center-titles-box {
    margin-top: 0px;
    margin-bottom: 10px;
}

aside.r-as {
    float: right;
    width: 30%;
}

.relate-posts {
    float: right;
    width: 100%;
}

.relate-posts .a-blog {
    width: 100%;
    margin-left: unset;
    font-size: 12px;
    height: auto;
    padding-bottom: 20px;
}

aside.r-as .center-titles-box {
    margin: unset;
    text-align: right;
    margin-bottom: 10px;
}

aside.r-as .center-titles-box p:first-child {
    font-size: 24px;
    margin-bottom: -12px;
}

.relate-posts .a-blog img {
    width: 100%;
}

.relate-posts .a-blog h2 a,
.relate-posts .a-blog p {
    width: 100%;
    padding: 0 5%;
}

.r-as ul.blog-details {
    width: 100%;
    padding: 1% 5%;
}

.r-as ul.blog-details * {
    padding: unset;
    float: right;
    width: auto;
}

.header-search-box {
    float: right;
    margin: 27px 0;
    font-size: 22px;
    font-weight: 400;
    width: 50%;
    margin-bottom: unset !important;
}

.header-search-box i {
    float: right;
}

.header-search-box a {
    float: right;
    direction: ltr;
    margin: 0 5px;
    color: #000;
    font-family: 'Vazir';
}

.single-html-content img {
    float: right;
    width: 100%;
    border-radius: 10px;
    margin: 10px 0;
}

.cs-content-box {
    float: right;
}

.ow-item h3,
.ow-item p,
.ow-item text {
    display: none;
}

.org .ow-item {
    margin: 2%;
    width: 21%;
}

.single-content.page-type {
    padding: 5%;
}

ol {
    float: right;
    width: 50%;
}

ul.header-social-box a i {
    font-size: 32px;
}

a.Sd {
    font-size: 0;
}

a.Sd i {
    font-size: 23px;
}
.social-box a img {
    width: 72px;
    margin-top: 2px;
}
.single-content.page-type a {direction: ltr;text-align: left;float: left;}
iframe {
    width: 100%;
}

button.open-chat {
    width: 100px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    aspect-ratio: 1/1;
    font-size: 34px;
    border: unset;
    border-radius: 50%;
    background: linear-gradient(44.55deg, #f3ad28 67.01%, rgba(93, 23, 92, 0) 96.95%);
    color: #f3ad28;
    border: 1px solid #d5d5d5;
    transition: .3s;
    cursor: pointer;
    z-index: 999999;
    animation: 2s od linear infinite;
    font-size: 0;
}

button.open-chat i {
    margin-top: 12px;
    float: left;
    width: 100%;
    font-size: 39px;
}

button.open-chat:hover {
    transform: scale(1.2);
}

main.middle.main-contact a {
    color: #0041d3;
}

.connect-new {
    position: fixed;
    bottom: 160px;
    width: 300px;
    right: -500px;
    transition: .4s;
}

.connect-new a {
    float: right;
    width: 100%;
    background: #ffffff;
    margin-bottom: 10px;
    font-size: 28px;
    color: #2196f3;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid #407bff;
}

.connect-new a i {
    float: left;
}

.connect-new a:last-child {
    border: 1px solid #00852E;
    color: #00852E;
}

.active.connect-new {
    right: 15px;
}

.single-content.page-type a {
    direction: ltr;
    float: left;
    text-align: right;
}

.connect-new a:nth-child(2) {
    color: #ff8e40;
    border: 1px solid #ff8e40;
}

.connect-new a:last-child * {
    color: #00852E !important;
}

.connect-new a h2 {
    display: none;
}

.connect-new a:first-child h2 {
    float: right;
    width: 100%;
    font-size: 22px;
}

.connect-new a:first-child:hover p {
    display: none;
}

.connect-new a:first-child:hover h2 {
    display: block;
}

.connect-new a h2 {
    float: right;
    width: auto !important;
    direction: ltr;
    margin: 5px 0 0 0;
}
section.front-slider h1 {
    color: #fff;
    width: 100%;
    text-align: right;
    z-index: 2;
    float: right;
    background: rgba(0,0,0,.6);
    width: auto;
}

section.front-slider h1 a {
    color: #fff;
    font-size: 2.4em;
    text-shadow: 1px 7px 8px black;
    font-weight: bolder;
    float: right;
    width: 100%;
}

section.front-slider h1:after {
    background: linear-gradient(261.2deg, #F3AD28 -15.71%, #fff 146.06%);
    width: 14%;
    height: 20px;
    float: left;
    margin: 0 43%;
    border-radius: 100px;
    margin-top: 15px;
}
item .middle {
    position: absolute;
    right: 5%;
    top: 40%;
    width: 100%;
    z-index: 2;
    transform: translateY(-50%);
}
.single-html-content * {
    direction: rtl !important;
}
/* 122 */

@media screen and (max-width: 999px) {
    .middle {
        width: 100% !important;
    }
    header {
        padding: 0 3%;
    }
    section.front-slider item h3 {
        width: 70%;
        margin-right: 15%;
        margin-top: 52px;
    }
    section.front-slider item p {
        width: 70%;
        margin-right: 15%;
    }
    section.front-slider item .middle a:nth-child(3) {
        margin-right: 15%;
        margin-top: 25px;
        margin-bottom: 80px;
    }
    .front-slider .owl-nav {
        width: 94%;
        left: 3%;
    }
    .as {
        width: 100%;
    }
    .all-servise {
        padding: 3%;
    }
    .as-number-box {
        margin: unset;
        margin-top: 14px;
    }
    .as-number-box p {
        font-size: 65px;
        margin-top: 15px;
    }
    section.last-works {
        padding: 3%;
    }
    .map-title {
        width: 96%;
        margin-right: 3%;
    }
    section.map img {
        padding: 3%;
    }
    .last-blogs {
        padding: 3%;
    }
    .last-blogs article {}
    .last-blogs article {
        width: 100%;
        height: auto;
        min-height: unset;
        min-height: auto;
        height: auto;
    }
    section.why {
        padding: 0 3%;
    }
}

@media screen and (max-width: 920px) {
    .middle {
        width: 100% !important;
    }
    header {
        background-position-y: 0;
    }
    .customers-slider button {
        display: none;
    }
    .fix-header nav {
        float: right;
        margin-right: 3%;
    }
    .fix-header li {
        margin-left: 35px;
    }
    .middle.header-texts h2 {
        width: 30%;
        margin-left: 35%;
    }
    .interview {
        width: 92%;
        margin: 4%;
    }
    .price-x {
        width: 92%;
        margin: 0 4%;
    }
    .a-line-px {
        height: 80px;
        padding-top: 14px;
    }
    .inps-p {
        margin-bottom: 30px;
    }
    .final-px {
        padding: 29px 4%;
    }
    .r {
        WIDTH: 100% !important;
        HEIGHT: AUTO;
        overflow: visible;
    }
    footer {
        HEIGHT: auto;
        position: inherit;
        width: 100%;
        padding-bottom: 5pc;
    }
    .social-box {
        position: relative;
        margin-top: 19px;
        float: right;
    }
    .barge {
        position: relative;
        float: left;
        margin-top: 20px;
        width: 33%;
    }
    .wa-c {
        width: 50%;
    }
    .customers-slider {
        padding-right: 4%;
        margin-top: 10px;
    }
    ul.whys-o {
        padding: 0 4%;
        margin-top: 0;
    }
    .li-c-b p {
        font-size: 14px;
    }
    ul.whys-o li img {
        margin-top: 32px;
    }
    .blog-holder {
        padding: 0 4%;
        margin-bottom: 20px;
    }
    .a-blog h2 a,
    .a-blog p {
        font-size: 19px;
    }
    .a-blog p {
        font-size: 13px;
    }
    .a-blog ul {
        position: absolute;
        bottom: 0;
        width: 79%;
        right: 35%;
    }
    ul.blog-details li {
        padding: unset;
        background: unset;
        border: unset;
    }
    .center-titles-box {
        margin-bottom: 0;
    }
}


/* 666 */

@media screen and (max-width: 650px) {
        .connect-new {
        bottom: 70px;
        font-size: 18px !important;
        width: 200px;
    }
    .connect-new a {
        font-size: 20px;
    }
        button.open-chat {
        color: #fff;
        width: 50px;
        height: 50px;
        font-size: 23px;
        bottom: 10px;
        right: 10px;
    }
    button.open-chat i {
        margin-top: 8px;
        font-size: 24px;
    }
    .lb-content {}

.lb-content a {
    font-size: 18px;
    margin-top: -1px;
}
.lb-content a:before {
    margin-top:10px
}

ol {
    width: 100%;
}

.web-name a:last-child {
    float: left;
    margin: 20px 0;
}

.social-box p {
}


    ul.header-social-box a i {
    font-size: 19px;
}

.owl-carousel .owl-item img {
}

section.front-slider item {
    min-height: 300px;
}
    .connect-new {
        bottom: 70px;
        font-size: 18px !important;
        width: 200px;
    }
    .connect-new a {
        font-size: 20px;
    }
    section.last-projects li::after {
        width: 83%;
        top: 5%;
        left: 8%;
    }
    .fix-header {
        height: 60px !important;
    }
    .fix-header img {
        width: 6%;
        margin: -11px 10px;
        margin-right: 0;
    }
    .fix-header li {
        font-size: 9px;
        margin-top: 16px;
    }
    .fix-header li i {
        font-size: 14px;
    }
    .middle.header-texts {
        margin-top: 75px;
        font-size: 14px;
    }
    .middle.header-texts h1 {
        font-size: 33px;
    }
    .middle.header-texts h2 {
        width: 50%;
        margin-left: 25%;
        transform: scale(.9);
        border: 1px solid;
        animation: chsh 1s infinite;
        background: #5d175c;
    }
    header {
        height: 500px;
    }
    button.open-chat {
        color: #fff;
        width: 50px;
        height: 50px;
        font-size: 23px;
        bottom: 10px;
        right: 10px;
    }
    button.open-chat i {
        margin-top: 8px;
        font-size: 24px;
    }
    .center-titles-box p:first-child {
        font-size: 22px;
    }
    .center-titles-box p:last-child {
        font-size: 16px;
    }
    .center-titles-box {
        margin: 25px 0;
    }
    section.last-projects li:nth-child(4) {
        display: none;
    }
    section.last-projects li {
        width: 33%;
        overflow: hidden;
    }
    section.last-projects h3 {
        width: 50%;
        margin-left: 25%;
        margin-top: 25px;
    }
    .best-blogs {
        width: 92%;
        margin: 0 4%;
    }
    .why-glass-balcony {
        width: 92%;
        margin: 0 4%;
    }
    .why-glass-balcony img {
        margin: 24px;
    }
    .why-glass-balcony p {
        width: 58%;
        font-size: 14px;
    }
    .why-glass-balcony h2 a {
        margin-top: 23px;
    }
    .chatbox {
        width: 100%;
        height: 100%;
        left: -100% !important;
        bottom: 0;
        border: unset;
        border-radius: unset;
    }
    .chatbox.active {
        left: 0 !important;
    }
    .item.csld img {
        width: 58px;
    }
    .head-of-man p:nth-child(2) {
        font-size: 18px;
        margin-right: 10px;
    }
    .head-of-man p:nth-child(3) {
        margin-right: 8px;
        font-size: 11px;
    }
    p.cs {
        font-size: 13px;
    }
    section.location-box {
        margin-bottom: 20px;
        height: auto;
    }
    ul.whys-o li {
        width: 100%;
        margin-right: unset !important;
        margin-left: unset;
        height: auto;
        padding-bottom: 5%;
        margin-bottom: 30px;
    }
    ul.whys-o li:nth-child(even) img {
        float: right;
        margin-left: 4%;
    }
    ul.whys-o li:nth-child(even) {
        background: linear-gradient(-270.25deg, rgba(0, 0, 0, 0.07) 0.22%, rgba(0, 0, 0, 0) 82.86%);
    }
    ul.whys-o li img {
        margin-top: 5px;
    }
    .tel-box p {
        font-size: 18px;
        margin-top: 11px;
    }
    button.send-form {
        font-size: 14px;
    }
    .send-image-in-form p {
        font-size: 16px;
    }
    .send-image-in-form i {
        margin: unset;
    }
    .inter-content p {
        font-size: 14px;
    }
    .price-x {
        margin-bottom: 30px;
    }
    .a-blog img {
        float: right;
        width: 100%;
        height: auto;
        aspect-ratio: 10/8;
    }
    .a-blog {
        height: 400px;
    }
    .a-blog h2 a,
    .a-blog p {
        width: 100%;
        padding: 0 5%;
    }
    ul.blog-details {
        width: 100%;
        right: 10px;
        bottom: 5px;
    }
    aside.blog-menu {
        width: 92%;
        margin: 4%;
    }
    main.blog-main.sin {
        width: 92%;
        margin: 0 4%;
    }
    section.blog {
        margin: unset;
        overflow-x: hidden;
    }
    section.location-box li a {
        font-size: 12px;
    }
    .location-text i {
        font-size: 18px;
    }
    .location-text p {
        font-size: 12px;
    }
    .location-text {
        height: auto;
    }
    section.location-box li {
        height: auto;
    }
    .best-blogs {
        display: none;
    }
    

item .middle {
    top: 50%;
    right: 0;
    transform: translateY(-100%);
}
}


/* 444 */

@media screen and (max-width: 500px) {
    .sin ul.blog-details li {
    padding: 4px;
    background: #fff;
}
    .why-data div h4 {
    font-size: 28px;
    margin-bottom: 7px;
    margin-top: 6px;
}

.why-data p {
    font-size: 20px;
}

.why-data i {
    margin-top: 15px;
}
    section.front-slider img {
    margin-top: -22px;
}

section.front-slider h1 {
}

section.front-slider h1 a {
    font-size: 1em;
}

section.front-slider h1:after {
    height: 12px;
    margin-top: 8px;
}
    .slide-mf button {
        transform: scale(.35);
        top: 27%;
    }
    .slide-mf {
        margin-top: -8px;
        padding: 0 3%;
    }
    main.blog-main {
        width: 92%;
        margin: 0 4%;
    }
    button.more-blog {
        width: 100%;
        margin: unset;
        margin-top: 10px;
    }
    section.last-projects li p {
        font-size: 14px !important;
    }
    .item.csld {
        width: 60%;
    }
    .more-blogs {
        float: right;
        width: 92%;
        margin: 4%;
    }
    .fix-header.active {
        right: 0;
    }
    .middle.nim {
        width: 100%;
    }
    nav.r ul {
        width: 100%;
        margin-bottom: 20px;
    }
    .r {
        padding: 4%;
        margin-right: 0;
    }
    .wa-c {
        width: 100%;
    }
    .barge {
        width: 100%;
    }
    .fix-header li {
        font-size: 9px;
        margin-left: 18px;
    }
    .middle.header-texts p {
        width: 90%;
        margin-left: 5%;
        margin-bottom: 0;
        line-height: 26px;
    }
    header {
        height: auto;
        padding-bottom: 30px;
    }
    .middle.header-texts h1 {
        font-size: 24px;
        margin-bottom: 0;
    }
    .center-titles-box p:last-child {
        font-size: 12px;
    }
    button.cc {
        font-size: 18px;
        padding: 6px 10px;
        margin-left: 5px;
    }
    .inter-content {
        width: 100%;
    }
    .inter-form {
        width: 100%;
        margin-top: 20px;
    }
    button.send-form {
        width: 49%;
    }
    .send-image-in-form {
        width: 49%;
    }
    .send-image-in-form i {
        margin-top: 28px;
    }
    .inter-content h3 {
        margin: 10px 0;
    }
    .price-x {
        padding-bottom: 100px;
    }
    .a-blog p {
        font-size: 11px;
    }
    .a-blog a {
        font-size: 16px !important;
    }
    .a-blog {
        height: 440px !important;
        width: 100% !important;
    }
    .why-glass-balcony img {
        width: 21%;
    }
    .why-glass-balcony p {
        font-size: 11px;
    }
    .why-glass-balcony h2 a {
        font-size: 18px;
        margin-bottom: 0;
    }
    a.more-gb {
        font-size: 16px;
    }
    a.more-gb i {
        margin: -7px 0px 0px -8px;
        font-size: 30px;
    }
    .li-c-b p {
        font-size: 12px;
    }
    ul.blog-details li p {
        font-size: 9px;
    }
    ul.blog-details li i {
        font-size: 9px;
    }
    .why-glass-balcony {
        height: 239px;
    }
    .masonry {
        margin-top: 20px;
    }
    .center-cats-items {
        margin-top: 0;
    }
    main.middle.main-contact p {
        padding: 0 21px;
    }
    main.middle.main-contact h2 {
        padding: unset;
        margin: 16px 0;
    }
    main.middle.main-contact img {
        width: 100%;
        padding: 5%;
        margin: unset;
    }
    main.middle.main-contact video {
        width: 100%;
        padding: 5%;
        margin: unset;
    }
    .more-gb {
        transform: scale(.6);
        left: -3%;
    }
}


/*666  */

@media screen and (max-width: 650px) {
    .ow-item i {
        font-size: 27px;
    }
    .ow-other-items strong {
        font-size: 22px;
    }
    .ow-other-items p {
        font-size: 12px;
    }
    .l-map i {
        font-size: 30px;
    }
    .l-map p {
        font-size: 20px;
        margin-top: 8px;
        margin-left: -1px;
    }
    .r-map {}
    .r-map h3 {
        font-size: 18px;
    }
    .r-map p {
        font-size: 12px;
    }
    .r-map:before {
        height: 48px;
    }
    .why-data p {
        font-size: 22px;
    }
    .why-data i {
        font-size: 31px;
    }
    .why-data div div {
        width: 40%;
        margin-left: 11px;
    }
    .why-data div h4 {
        font-size: 36px;
    }
    .connection-box div {
        margin: unset;
        width: 100%;
        margin-bottom: 20px;
    }
    section.contact-section h4 {
        font-size: 20px;
        margin-top: 11px;
    }
    section.contact-section p {
        font-size: 13px;
    }
    section.contact-section a {
        width: auto;
        font-size: 14px;
        height: 38px;
        margin-top: 10px;
    }
    section.contact-section {
        padding: 0 3%;
    }
    body {}
    section {
        overflow-x: hidden;
    }
    section.contact-section h2 {
        width: auto;
    }
    .page-title-box p {
        font-size: 20px;
    }
    .page-title-box i {
        width: 20px;
        height: 3px;
    }
    .as-number-box p {
        font-size: 26px;
    }
    .as-content h3 {
        font-size: 20px;
    }
    .as-content p {
        font-size: 13px;
    }
    .as-content {
        min-height: unset;
    }
    .servise-slider .x-item {
        width: 160px;
    }
    .servise-slider a {
        font-size: 18px;
    }
    .aw-data h3 {
        font-size: 20px;
    }
    .aw-date-box {
        top: 16px;
        font-size: 14px;
    }
    p.work-test {
        font-size: 12px;
    }
    .header-search-box {
        font-size: 12px;
        margin: 20px 0;
    }
    .header-search-box i {
        margin-inline-start: unset;
        font-size: 12px  !important;
    }
    .header-search-box a {
        margin-right: 0px;
    }
    ul.header-social-box a {
        margin: 19px 4px 0;
    }
    .middle.logo-middle {
        padding: 0 36% !important;
        z-index: 2;
        margin-top: 14px;
    }
    nav.best-links {
        margin-top: 62px;
        height: 38px;
    }
    nav.best-links li i,
    nav.best-links li a {
        font-size: 13px;
        margin: 6px 5px 0 0;
    }
    nav.best-links li {
        float: right;
        min-width: 10%;
        max-width: 25%;
        text-align: center;
        display: inline-block;
    }
    nav.best-links li a {
        margin-top: 6px;
    }
    section.front-slider item h3 {
        font-size: 24px;
        width: 100%;
        padding: 4% 4%;
        float: right;
        margin: unset;
    }
    section.front-slider item h3:before {
        height: 30px;
    }
    section.front-slider item p {
        font-size: 14px;
        margin: unset;
        width: 100%;
        padding: 1% 4%;
    }
    .front-slider .owl-nav {
        display: none;
    }
    .front-slider .owl-dots {
        width: 40%;
        left: 30%;
        height: 30px;
    }
    section.front-slider item .middle a:nth-child(3) {
        margin: 10px 3% 46px;
    }
    .front-slider .owl-dots button {
        width: 12px;
        margin: 10px;
    }
    .connect-new {
        bottom: 70px;
        font-size: 18px !important;
        width: 200px;
    }
    .connect-new a {
        font-size: 20px;
    }
    section.last-projects li::after {
        width: 83%;
        top: 5%;
        left: 8%;
    }
    .fix-header {
        height: 60px !important;
    }
    .fix-header img {
        width: 6%;
        margin: -11px 10px;
        margin-right: 0;
    }
    .fix-header li {
        font-size: 9px;
        margin-top: 16px;
    }
    .fix-header li i {
        font-size: 14px;
    }
    .middle.header-texts {
        margin-top: 75px;
        font-size: 14px;
    }
    .middle.header-texts h1 {
        font-size: 33px;
    }
    .middle.header-texts h2 {
        width: 50%;
        margin-left: 25%;
        transform: scale(.9);
        border: 1px solid;
        animation: chsh 1s infinite;
        background: #5d175c;
    }
    header {}
    button.open-chat {
        color: #fff;
        width: 50px;
        height: 50px;
        font-size: 23px;
        bottom: 10px;
        right: 10px;
    }
    button.open-chat i {
        margin-top: 8px;
        font-size: 24px;
    }
    .center-titles-box p:first-child {
        font-size: 22px;
    }
    .center-titles-box p:last-child {
        font-size: 16px;
    }
    .center-titles-box {
        margin: 25px 0;
    }
    section.last-projects li:nth-child(4) {
        display: none;
    }
    section.last-projects li {
        width: 33%;
        overflow: hidden;
    }
    section.last-projects h3 {
        width: 50%;
        margin-left: 25%;
        margin-top: 25px;
    }
    .best-blogs {
        width: 92%;
        margin: 0 4%;
    }
    .why-glass-balcony {
        width: 92%;
        margin: 0 4%;
    }
    .why-glass-balcony img {
        margin: 24px;
    }
    .why-glass-balcony p {
        width: 58%;
        font-size: 14px;
    }
    .why-glass-balcony h2 a {
        margin-top: 23px;
    }
    .chatbox {
        width: 100%;
        height: 100%;
        left: -100% !important;
        bottom: 0;
        border: unset;
        border-radius: unset;
    }
    .chatbox.active {
        left: 0 !important;
    }
    .item.csld img {
        width: 58px;
    }
    .head-of-man p:nth-child(2) {
        font-size: 18px;
        margin-right: 10px;
    }
    .head-of-man p:nth-child(3) {
        margin-right: 8px;
        font-size: 11px;
    }
    p.cs {
        font-size: 13px;
    }
    section.location-box {
        margin-bottom: 20px;
        height: auto;
    }
    ul.whys-o li {
        width: 100%;
        margin-right: unset !important;
        margin-left: unset;
        height: auto;
        padding-bottom: 5%;
        margin-bottom: 30px;
    }
    ul.whys-o li:nth-child(even) img {
        float: right;
        margin-left: 4%;
    }
    ul.whys-o li:nth-child(even) {
        background: linear-gradient(-270.25deg, rgba(0, 0, 0, 0.07) 0.22%, rgba(0, 0, 0, 0) 82.86%);
    }
    ul.whys-o li img {
        margin-top: 5px;
    }
    .tel-box p {
        font-size: 18px;
        margin-top: 11px;
    }
    button.send-form {
        font-size: 14px;
    }
    .send-image-in-form p {
        font-size: 16px;
    }
    .send-image-in-form i {
        margin: unset;
    }
    .inter-content p {
        font-size: 14px;
    }
    .price-x {
        margin-bottom: 30px;
    }
    .a-blog img {
        float: right;
        width: 100%;
        height: auto;
        aspect-ratio: 10/8;
    }
    .a-blog {
        height: 400px;
    }
    .a-blog h2 a,
    .a-blog p {
        width: 100%;
        padding: 0 5%;
    }
    ul.blog-details {
        width: 100%;
        right: 10px;
        bottom: 5px;
    }
    aside.blog-menu {
        width: 92%;
        margin: 4%;
    }
    main.blog-main.sin {
        width: 92%;
        margin: 0 4%;
    }
    section.blog {
        margin: unset;
        overflow-x: hidden;
    }
    section.location-box li a {
        font-size: 12px;
    }
    .location-text i {
        font-size: 18px;
    }
    .location-text p {
        font-size: 12px;
    }
    .location-text {
        height: auto;
    }
    section.location-box li {
        height: auto;
    }
    .best-blogs {
        display: none;
    }
}


/* 444 */

@media screen and (max-width: 500px) {
    .slide-mf button {
        transform: scale(.35);
        top: 27%;
    }
    .slide-mf {
        margin-top: -8px;
        padding: 0 3%;
    }
    main.blog-main {
        width: 92%;
        margin: 0 4%;
    }
    button.more-blog {
        width: 100%;
        margin: unset;
        margin-top: 10px;
    }
    section.last-projects li p {
        font-size: 14px !important;
    }
    .item.csld {
        width: 60%;
    }
    .more-blogs {
        float: right;
        width: 92%;
        margin: 4%;
    }
    .fix-header.active {
        right: 0;
    }
    .middle.nim {
        width: 100%;
    }
    nav.r ul {
        width: 100%;
        margin-bottom: 20px;
    }
    .r {
        padding: 4%;
        margin-right: 0;
    }
    .wa-c {
        width: 100%;
    }
    .barge {
        width: 100%;
    }
    .fix-header li {
        font-size: 9px;
        margin-left: 18px;
    }
    .middle.header-texts p {
        width: 90%;
        margin-left: 5%;
        margin-bottom: 0;
        line-height: 26px;
    }
    header {
        height: auto;
        padding-bottom: 4%;
    }
    .middle.header-texts h1 {
        font-size: 24px;
        margin-bottom: 0;
    }
    .center-titles-box p:last-child {
        font-size: 12px;
    }
    button.cc {
        font-size: 18px;
        padding: 6px 10px;
        margin-left: 5px;
    }
    .inter-content {
        width: 100%;
    }
    .inter-form {
        width: 100%;
        margin-top: 20px;
    }
    button.send-form {
        width: 49%;
    }
    .send-image-in-form {
        width: 49%;
    }
    .send-image-in-form i {
        margin-top: 28px;
    }
    .inter-content h3 {
        margin: 10px 0;
    }
    .price-x {
        padding-bottom: 100px;
    }
    .a-blog p {
        font-size: 11px;
    }
    .a-blog a {
        font-size: 16px !important;
    }
    .a-blog {
        height: 440px !important;
        width: 100% !important;
    }
    .why-glass-balcony img {
        width: 21%;
    }
    .why-glass-balcony p {
        font-size: 11px;
    }
    .why-glass-balcony h2 a {
        font-size: 18px;
        margin-bottom: 0;
    }
    a.more-gb {
        font-size: 16px;
    }
    a.more-gb i {
        margin: -7px 0px 0px -8px;
        font-size: 30px;
    }
    .li-c-b p {
        font-size: 12px;
    }
    ul.blog-details li p {
        font-size: 9px;
    }
    ul.blog-details li i {
        font-size: 9px;
    }
    .why-glass-balcony {
        height: 239px;
    }
    .masonry {
        margin-top: 20px;
    }
    .center-cats-items {
        margin-top: 0;
    }
    main.middle.main-contact p {
        padding: 0 21px;
    }
    main.middle.main-contact h2 {
        padding: unset;
        margin: 16px 0;
    }
    main.middle.main-contact img {
        width: 100%;
        padding: 5%;
        margin: unset;
    }
    main.middle.main-contact video {
        width: 100%;
        padding: 5%;
        margin: unset;
    }
    .more-gb {
        transform: scale(.6);
        left: -3%;
    }
}


/* 399 */

@media screen and (max-width: 400px) {
    .why-data div h4 {
    font-size: 28px;
    margin: 3px 0 0;
}

.why-data p {
    font-size: 18px;
    margin-top: -10px;
}

p.answ-p {
    font-size: 16px;
}

.quest-p {
    font-size: 28px;
    margin-bottom: -11px;
}
    .middle.header-texts h2 {
        font-size: 15px;
    }
    .fix-header li i {
        font-size: 12px;
    }
    .fix-header nav {
        position: absolute;
        top: 2px;
    }
    section.last-projects li p:nth-child(2) {
        font-size: 17px;
    }
    a.more-gb {
        bottom: -3px;
    }
}