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

html {
    scroll-behavior: smooth;
}

:root {
    --bodycolor: #f5f5f5;
    --navcolor: #dfe6e9;
    --maingray: #7c7c7c;
    --black: #1b1b1b;
    --bodyblack: #1c213d;
    --white: #fff;
    --blue: #3071e7;
    --lightgreen: #40ef80;
    --green: #1ECDA1;
    --darkgreen: #135C4A;

    --fontcolor1: #282828;
    --fontcolor2: #676767;
    --fontcolor3: #a2a2a2;
    --shadowlight: #dddddd;
    --shadowdark: #b3b3b3;
    --theme1: #238750;
    --theme2: #31915c;
    --theme3: #3CB371;
    --theme4: #52de91;
    --themeshadow1: #1ECDA1;
    --themeshadow2: #65d5b9;
    --themeshadow3: #89dbc7;



    --admin-bg-1: #121212;
    --admin-bg-2: #1E1E1E;
    --admin-bg-3: #2A2A2A;
    --admin-text-1: #E0E0E0;
    --admin-text-2: #A0A0A0;
    --admin-text-3: #616161;
    --admin-theme-1: #28a745;
    --admin-theme-2: #218838;
    --admin-border-color: #3A3A3A;
}

#pages-banner {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 60%;
    height: 90vh;
    max-width: 800px;
    min-width: 200px;
    animation: open_img_load_web 2s ease-in-out;
    filter: drop-shadow(0 0 20px #135C4A90);

}

body {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bodycolor);
    position: relative;
    overflow-x: hidden;
}

body#home-body {
    * {
        cursor: none !important;
    }
}

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

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--theme4);
}





body#home-body::before,
body#home-body::after {
    content: '';
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(150px);
}

body#home-body::before {
    width: 400px;
    height: 400px;
    background-color: rgba(0, 123, 255, 0.2);
    top: -150px;
    left: -150px;

    display: none;
}

body#home-body::after {
    width: 500px;
    height: 500px;
    background-color: rgba(13, 202, 240, 0.15);
    bottom: -200px;
    right: -200px;
}





/* ------ Start navbar ------ */


.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
    transition: transform 0.1s ease-out;
}

.cursor-dot {
    width: 10px;
    height: 10px;
    background-color: var(--theme4);
}

.cursor-outline {
    width: 40px;
    height: 40px;
    border: 1px solid var(--theme4);
    background-color: #52de9115;

    transition-duration: 0.1s;
    border-radius: 50%;
    z-index: 9998;
}

.hero-section {
    position: relative;

    overflow: hidden;


}

.floating-shape {
    position: absolute;
    border-radius: 40%;

    transition: transform 0.8s ease-out;

    opacity: 0.5;
    z-index: -1;

}


.shape-1 {
    width: 250px;
    height: 250px;
    background: #e0f2f1;

    top: -70px;
    right: -70px;
}


.shape-2 {
    width: 150px;
    height: 150px;
    background: #b2dfdb;

    top: 400px;
    right: 5%;
    filter: blur(5px);

}


.shape-3 {
    width: 120px;
    height: 120px;
    background: #80cbc4;
    top: 150px;
    left: 40%;
    filter: blur(15px);
}

.shape-4 {
    width: 150px;
    height: 150px;
    background: #b2dfdb;
    top: 800px;
    left: 20%;
    filter: blur(5px);
}


.shape-5 {
    width: 250px;
    height: 250px;
    background: #e0f2f1;
    top: 1200px;
    left: -70px;
}

.shape-6 {
    width: 120px;
    height: 120px;
    background: #80cbc4;
    top: 1350px;
    left: 30%;
    filter: blur(15px);
}

.shape-7 {
    width: 150px;
    height: 150px;
    background: #b2dfdb;
    top: 1550px;
    right: 5%;
    filter: blur(5px);
}

.shape-8 {
    width: 120px;
    height: 120px;
    background: #80cbc4;
    top: 1950px;
    left: 20%;
    filter: blur(15px);
}

.shape-9 {
    width: 150px;
    height: 150px;
    background: #b2dfdb;
    top: 2150px;
    right: 15%;
    filter: blur(5px);
}

.shape-10 {
    width: 250px;
    height: 250px;
    background: #e0f2f1;
    top: 2250px;
    left: -70px;
}



/* .cursor-dot,
.cursor-follower {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
}

.cursor-dot {
    width: 10px;
    height: 10px;
    background-color: #007bff;
}

.cursor-follower {
    width: 40px;
    height: 40px;
    background-color: rgba(0, 123, 255, 0.2);
    border: 1px solid rgba(0, 123, 255, 0.3);
} */







.navbar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: transparent;
    z-index: 100;
    transition: .4s ease-in-out;
    position: relative;
    /* padding-top: 20px; */
    padding: 20px 30px 0 30px;
    /* position: sticky;
    top: 10px; */
}

.nav-back {
    width: 100%;
    max-width: 1280px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    border-radius: 100px;
    padding: 20px 30px;
    border: 1px solid var(--navcolor);
    box-shadow: 0px 8px 20px #00000015;
    position: relative;
    z-index: 1;
}

.glass-effect {
    /* --- The Magic Happens Here --- */
    background: rgba(255, 255, 255, 0.2);
    /* 1. A semi-transparent white background */
    backdrop-filter: blur(10px);
    /* 2. The blur effect on the background */
    -webkit-backdrop-filter: blur(10px);
    /* For Safari browser support */

    /* --- Optional but recommended extras --- */
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* 4. A subtle white border */
}

.nav-ul {
    display: flex;
    gap: 20px;
}

.nav-ul li {
    list-style: none;
    position: relative;
}

.nav-ul li::after {
    content: '';
    width: 0;
    height: 3px;
    border-radius: 100px;
    position: absolute;
    background: #1ecda1;
    background: var(--theme4);
    right: 0;
    top: 0;
    /* bottom: -12px; */
    transition: .3s;
}

.nav-ul li:hover::after {
    width: 100%;
    left: 0;
    right: auto;
}

.nav-ul li a {
    padding: 15px 5px;
    font-family: vazir-black;
    color: #575757;
    transition: .3s;
    font-weight: normal;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-ul li a:hover {
    color: #191919;
}

.nav-ul li a i {
    margin-top: 1px;
    transition: .3s;
    font-size: 19px;
}

.navbar-menu {
    position: absolute;
    right: -35px;
    top: 100%;
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    /* overflow: hidden; */
    padding-top: 8.5px;
}

.navbar-menu::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #135C4A;
    border-radius: 4px;
    transform: rotate(45deg);
    right: 50px;
    top: 2px;
    box-shadow: 0 0 10px #00000020;
}

.navbar-menu div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 270px;
    background: linear-gradient(250deg, var(--darkgreen), var(--lightgreen));
    transition: .3s;
    /* overflow: hidden; */
    border-radius: 20px;
    z-index: 1;
    margin: 0 10px 10px 10px;
    box-shadow: 3px 5px 10px #20c15b10;
}

.nav-ul li:hover .navbar-menu {
    transition: opacity .4s;
    display: flex;
    opacity: 1;
    visibility: visible;
}

/* 
.nav-ul li:hover a i {
    transform: rotate(180deg);
} */

.navbar-menu div a {
    width: 100%;
    transition: .3s;
    justify-content: flex-start;
    color: var(--white);
    font-size: 14px;
    font-family: vazir-light;
    padding: 16px 25px 16px 15px;
    background-color: #ffffff00;
    position: relative;
    /* backdrop-filter: blur(10px); */
}

.navbar-menu div a:hover {
    color: var(--white);
    box-shadow: 0 0 15px #20c15b10;
    background-color: #20c15b40;
    backdrop-filter: blur(10px);
    transform: scale(1.1);
    border-radius: 13px;
    width: 100%;
}


.nav-title {
    display: flex;
    align-items: center;
    font-family: lalezar;
    gap: 12px;
    margin-left: -3px;
}

.nav-title-back {
    color: #242424;
}

.navbar.navbar-sticky .nav-title i,
.navbar.navbar-sticky .nav-title span {
    color: var(--green);
    /* text-shadow: 0 0 10px var(--green); */
}

.nav-title div {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-title div:nth-child(1) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.nav-title div:nth-child(1) h1 {
    font-size: 25px;
    font-family: lalezar;
    width: 100%;
    text-align: left;
    line-height: 25px;
    /* margin-top: -10px; */
}

.nav-title div:nth-child(1) h1 span {
    color: var(--theme4);
    animation: title_nav_animation 4s ease-in-out infinite;
}

@keyframes title_nav_animation {

    0%,
    100% {
        color: var(--theme3);
    }

    50% {
        color: var(--theme4);
    }
}

.nav-title div:nth-child(1) h2 {
    font-size: 13px;
    opacity: .8;
    margin-top: -10px;
}

.nav-title .img-nav {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.nav-title .img-nav img {
    width: 100%;
    object-fit: cover;
    /* transform: scale(.9); */
}

.nav-order-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.nav-btn-right-a {
    width: 53px;
    height: 53px;
    border-radius: 50%;
    background-color: #3CB37120;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4d5f68;
    font-size: 17px;
}

.nav-btn-right-a-profile.nav-btn-right-a {
    /* background-color: var(--white); */
    overflow: hidden;

}

.nav-btn-right-a.nav-btn-right-a-cart {
    background-color: #4A6DFF15;
    color: #4A6DFF;
    /* border: 1px solid #4A6DFF20; */
    font-size: 19px;
    position: relative;
}

.nav-btn-right-a.nav-btn-right-a-cart span {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -6px;
    left: -6px;
    font-family: lalezar;
    color: #4A6DFF;
    background-color: #E5EAFF;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 3px 0 0px 0;
}

.nav-btn-right-a.nav-btn-right-a-cart div {
    width: 12px;
    height: 12px;
    position: absolute;
    top: 9px;
    left: -18px;
    background-color: #E5EAFF;
    border-radius: 100%;
}

.nav-btn-right-a.nav-btn-right-a-cart div.nav-btn-right-a-cart-div-2 {
    width: 5px;
    height: 5px;
    top: 17px;
    left: -5px;
}


.nav-btn-right-a img {
    width: 95%;
    height: 95%;
    object-fit: cover;
    border-radius: 100%;
}

.nav-order-btn-right-a {
    height: 53px;
    border-radius: 100px;
    /* background-color: #3CB37120; */
    background-color: var(--theme4);
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    /* color: var(--theme3); */
    color: var(--white);
    padding: 0 35px;
    font-size: 14px;
    font-family: vazir-black;
    transition: .3s;
}

.nav-order-btn-right-a:hover {
    background-color: var(--theme4);
    color: var(--white);
    box-shadow: 0 0 20px #52de9180;

    /* transform: scale(1.03); */
    i {
        transform: rotate(360deg);
        transition: .4s;
    }
}

.nav-order-btn-right-a span {
    word-spacing: -1px;
}

.nav-order-btn-right-a i {
    font-size: 17px;
    margin-top: -3px;
    transition: 0s;
}



.div-nav-ul-back {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* .nav-order-btn a i{
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    background-color: var(--white);
    width: 48px;
    height: 48px;
    border-radius: 3px 10px 10px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    transition: .4s;
    font-size: 19px;
    margin-top: .4px;
} */
/* .nav-order-btn a:hover i{
    width: 98%;
    right: 50%;
    transform: translate(50% ,-50%);
    border-radius: 10px;
} */
/* .navbar-sticky {
    height: 71px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(9px);
    position: fixed;
    padding-top: 16px;
    box-shadow: 0 0 10px #cccccc;
    padding: 0;
} */

/* start phone navbar */

#menu-navbar-icon {
    display: none;
}







.phone-nav {
    width: 100vw;
    position: fixed;
    bottom: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100;
    /* padding: 0 10px 10px 10px; */
}

.phone-nav-back {
    width: 100%;
    height: 75px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    backdrop-filter: blur(12px);
    box-shadow: 0 0px 10px #00000015;
    border-top: 1px solid #00000010;
}

.phone-nav-back ul {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    direction: rtl;
    padding: 0 10px;
}

.phone-nav-back ul li {
    list-style: none;
    width: 100%;
}

.phone-nav-back ul li a {
    color: #373737;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-family: lalezar;
    font-size: 14px;
    position: relative;
}

.phone-nav-back ul li a i {
    font-size: 19px;
    width: 30px;
    height: 20px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.phone-nav-back ul li a i.fa-plus {
    color: var(--white);
    width: 60px;
    height: 60px;
    border-radius: 40%;
    background-color: var(--theme4);
    box-shadow: 0 0 20px var(--theme4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -40px;
    font-size: 22px;
    margin-bottom: 2px;
}

.phone-nav-back ul li a img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}



#menu-navbar-icon {
    overflow: hidden;
    position: relative;
}

#menu-navbar-icon i {
    position: absolute;
    left: 50%;
}

#menu-navbar-icon i.fa-times {
    opacity: 0;
    transition: .5s;
    transform: translateY(-50px) translateX(-50%);
}

#menu-navbar-icon i.fa-bars {
    opacity: 1;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    transition: .5s;
}

.navbar.navbar-open-menu #menu-navbar-icon i.fa-times {
    opacity: 1;
    top: 51%;
    transform: translateY(-50%) translateX(-50%);
}

.navbar.navbar-open-menu #menu-navbar-icon i.fa-bars {
    opacity: 0;
    transform: translateY(50px) translateX(-50%);
}
















.nav-phone-back {
    width: 80%;
    height: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    background-color: var(--white);
    border-radius: 0 0 50px 50px;
    box-shadow: 0px 8px 20px #00000010;
    padding: 0 30px 0 30px;
    margin-top: -3px;
    margin-bottom: 10px;
    transition: .8s;
    overflow: hidden;
    /* border: 1px solid var(--bodycolor); */
}

.navbar.navbar-open-menu .nav-phone-back.nav-phone-back-div {
    height: 290px;
    padding: 25px 30px 20px 30px;
    border-color: var(--navcolor);
}

.nav-phone-back ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.nav-phone-back ul li {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;
}

.nav-phone-back ul li a {
    color: var(--fontcolor1);
    font-family: lalezar;
    font-size: 17px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* background-color: #00000010; */
    padding: 8px 0;
    gap: 10px;
}

.nav-phone-back ul li a i {
    margin-top: -3px;
    width: 20px;
    /* background: #00000015; */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--theme3);
}





.nav-phone-back.nav-phone-back-search {
    width: 80%;
    max-width: 600px;
    margin-top: -10px;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-phone-back.nav-phone-back-search span {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    /* background-color: #00000010; */
    color: var(--fontcolor2);
    font-size: 15px;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.navbar.navbar-open-search .nav-phone-back.nav-phone-back-search {
    height: 120px;
    padding: 20px 30px 30px 30px;
    border-color: var(--navcolor);
}

.nav-phone-back.nav-phone-back-search form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.nav-phone-back.nav-phone-back-search form input {
    width: 100%;
    font-family: vazir-light;
    font-size: 16px;
    color: var(--fontcolor2);
    border: 1px solid #00000010;
    padding: 15px 20px;
    border-radius: 18px;
    outline: none;
}

.nav-phone-back.nav-phone-back-search form button {
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    width: 47px;
    height: 47px;
    border-radius: 33%;
    color: #00caa2;
    background-color: #52de9120;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

#desktop-nav-order-btn-a {
    cursor: pointer;
}

#desktop-nav-order-btn-a i.fa-times {
    display: none;
}

.navbar.navbar-open-search #desktop-nav-order-btn-a i.fa-times {
    display: flex;
}

.navbar.navbar-open-search #desktop-nav-order-btn-a i.fa-search {
    display: none;
}






/* ---------------------------------- */
/* ------- START NOTIFICATION ------- */
.notif-section {
    pointer-events: none;
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(-150%);
    transition: .3s;
    background-color: #ffffff30;
    backdrop-filter: blur(10px);
    width: 95%;
    max-width: 400px;
    padding: 8px;
    border-radius: 20px;
    font-size: 15px;
    font-family: lalezar;
    color: var(--fontcolor1);
    line-height: 35px;
    z-index: 120;
    animation: notif-opacity 10s;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px #00000030;
}

.notif-section p {
    z-index: 1;
    text-align: center;
    background-color: #ffffff60;
    backdrop-filter: blur(10px);
    padding: 12px 15px;
    border-radius: 15px;
    width: 100%;
}

.notif-section-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #00000015;
    box-shadow: 0 0 15px #00000015;
    border-radius: 15px 0 0 15px;
    animation: notif-back 10s ease-in-out;
    z-index: -1;
}

@keyframes notif-back {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

@keyframes notif-opacity {
    0% {
        opacity: 1;
        visibility: visible;
    }

    10% {
        transform: translateX(-50%) translateY(15px);
    }

    95% {
        opacity: 1;
        transform: translateX(-50%) translateY(15px);
        visibility: visible;
    }

    100% {
        visibility: hidden;
        transform: translateX(-50%) translateY(15px);
        opacity: 0;
    }
}
















/* ----- Start Home -----  */



/* ------ Start Home ------ */
.home {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),url(../images/BackGround/city/wallpapsser8.jpg) no-repeat center; */
    background-size: cover;
    padding: 50px 20px 0 20px;
}

.home-back {
    width: 100%;
    max-width: 1280px;
    /* background: #0fbcf9; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.home-content {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;



    .home-trader {
        width: 100%;
        max-width: 450px;
        border-radius: 40px;
        box-shadow: 0 10px 15px #00000010;
        padding: 25px 25px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        background-color: var(--white);
        border: 1px solid #00000015;

        .home-trader-top {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 15px;
            width: 100%;
            border-bottom: 2px dashed #00000015;
            padding-bottom: 15px;

            .home-trader-top-btns {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 10px;

                button {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding: 20px 0;
                    font-family: lalezar;
                    font-size: 18px;
                    color: var(--theme4);
                    background-color: #52de9120;
                    border: none;
                    border-radius: 25px;
                    cursor: pointer;
                }

            }

            .home-trader-top-price {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 5px;

                p.home-trader-top-price-date {
                    font-family: vazir-light;
                    font-size: 13px;
                    color: var(--fontcolor2);
                }

                p.home-trader-top-price-p {
                    font-family: vazir-black;
                    font-size: 15px;
                    color: var(--fontcolor1);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;

                    span {
                        font-size: 10px;
                        color: var(--fontcolor3);
                    }

                }

            }

        }

        .home-trader-calculator {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            form {
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 10px;

                input[type=number] {
                    width: 100%;
                    font-size: 16px;
                    font-family: lalezar;
                    color: var(--fontcolor1);
                    border: 1px solid #00000010;
                    border-radius: 15px;
                    background-color: var(--white);
                    padding: 15px 20px;
                    outline: none;
                    text-align: center;
                }

                .home-trader-calculator-price {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;

                    p.calculator-price-number {
                        font-family: lalezar;
                        font-size: 25px;
                        color: var(--theme4);

                        span {
                            font-size: 15px;
                            color: var(--fontcolor2);
                            font-family: lalezar;
                        }

                    }

                    p.calculator-price-text {
                        font-size: 15px;
                        color: var(--fontcolor2);
                        font-family: vazir-light;
                    }

                }

                button {
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 5px;
                    border: none;
                    border-radius: 20px;
                    color: var(--white);
                    background: linear-gradient(130deg, var(--theme3), var(--theme4));
                    padding: 12px 0;
                    font-family: lalezar;
                    font-size: 22px;
                    cursor: pointer;
                    transition: .3s;

                    i {
                        font-size: 14px;
                        color: #ffffff90;
                    }

                }

            }


        }

    }

}

.home-img {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* margin-top: -7px; */
    /* animation: home-img-animated 2s infinite ease-in-out; */
}

@keyframes home-img-animated {

    0%,
    100% {
        margin-top: -7px;
    }

    50% {
        margin-top: 0;
    }
}

.home-img img {
    width: 100%;
}

.home-txt {
    /* padding: 60px 80px; */
    width: 100%;
    height: 100%;
    font-family: vazir-light;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* background-color: #3c40c6; */
    line-height: 30px;
    text-align: justify;
    font-size: 17px;
}

.home-txt h1 {
    color: #3d3d3d;
    font-family: vazir-black;
    font-size: 35px;
    word-spacing: -7px;
    font-weight: 800;
}

.home-txt h2 {
    font-family: vazir-black;
    font-size: 21px;
    margin-top: -7px;
    margin-bottom: 10px;
    color: #9da0f7;
    word-spacing: 3px;
}

.home-txt h3 {
    color: var(--white);
    margin-bottom: 15px;
}

.home-txt h3 span {
    color: var(--white);
    opacity: .8;
    font-size: 18px;
}

.home-txt p {
    font-size: 17px;
    text-align: justify;
    color: #5f5f5f;
    line-height: 30px;
    opacity: .9;
    margin-top: 20px;
}

.home-links {
    display: flex;
    align-items: center;
    /* gap: 40px; */
    margin-top: 20px;
}

.home-links a {
    /* background: linear-gradient(135deg, var(--primary),var(--green)); */
    /* animation: animated-gradient 3s linear infinite;
    background-size: 200% 200%; */
    background-color: transparent;
    border: none;
    border-radius: 12px;
    font-size: 25px;
    color: var(--theme4);
    font-family: vazir-black;
    cursor: pointer;
    z-index: 1;
    transition: .3s;
    border: 2px dashed #52de91;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    margin: 0 2px;
}

.home-links a:hover {
    background-color: #4A6DFF;
    color: var(--white);
    box-shadow: 0 0 20px #4A6DFF;
    border-radius: 17px;
}

.home-share-menu {
    position: relative;
    width: 150px;
    height: 75px;
    margin-right: -30px;
}

.share-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 15px;
    cursor: pointer;
    background-color: #d2d4ff60;
    backdrop-filter: blur(7px);
    font-size: 23px;
    font-weight: normal;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64a4e1;

}

.social-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64a4e1;
}

.social-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border-radius: 25px;
    cursor: pointer;
    background-color: #d2d4ff60;
    backdrop-filter: blur(7px);
    font-size: 20px;
    transition: all .3s ease-in-out 0ms;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6166f2;
}

.home-share-menu-active div {
    box-shadow: 0 0 20px #cacaca;
}

.home-share-menu-active div:nth-child(2) {
    top: 125%;
    left: 50%;
    transform: translate(-50%, 0%);
    transition: all .3s ease-in-out 200ms;
}

.home-share-menu-active div:nth-child(3) {
    top: 100%;
    left: 0%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out 100ms;
}

.home-share-menu-active div:nth-child(4) {
    top: 0%;
    left: 0%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out 0ms;
}

.home-share-menu i.fa-close {
    display: none;
}

.home-share-menu-active i.fa-share-alt {
    display: none;
}

.home-share-menu-active i.fa-close {
    display: block;
}




#home-banner {
    margin-top: 0px;
}

#home-banner .home-back {
    /* background: linear-gradient(130deg, #AEC3D120, #AEC3D140); */
    padding: 30px 10px;
    border-radius: 20px;
    margin-top: -70px;

}

#home-banner .home-back .home-content {
    gap: 100px;
    padding-right: 100px;
}

#home-banner .home-back .home-img {
    max-width: 300px;
}

#home-banner .home-back .home-img img {
    transform: scale(1.6);
}

#home-banner .home-back .home-txt {
    align-items: center;
}

#home-banner .home-back .home-txt h1 {
    font-family: lalezar;
    word-spacing: 0px;
    color: var(--fontcolor1);
    line-height: 70px;
    font-size: 50px;
    font-weight: normal;
    text-align: center;

    span {
        font-weight: bold;
        color: var(--theme3);
        text-shadow: 0 5px 0px #3CB37150;
    }

}

#home-banner .home-back .home-txt p {
    text-align: center;
}

#home-banner .home-back .home-txt h3 {
    font-family: vazir-black;
    word-spacing: -1px;
    color: var(--theme4);
}

#home-banner .home-back .home-links a {
    border-radius: 100px;
}







.phone-contact {
    position: fixed;
    z-index: 10;
    bottom: 10px;
    right: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    color: var(--white);
}

.phone-contact .share-btn {
    width: 65px;
    height: 65px;
    background-color: #6166f280;
    box-shadow: 0 0 13px 1px #7a7ef2;
    border-radius: 50%;
    color: var(--white);
    font-size: 30px;
}

.home-share-menu-phone div a {
    position: relative;
}

.home-share-menu-phone div a .share-menu-notif {
    position: absolute;
    top: -120%;
    right: 80%;
    width: 130px;
    height: auto;
    padding: 10px 12px;
    font-family: vazir-light;
    font-size: 16px;
    background-color: #353535;
    border-radius: 15px 15px 5px 15px;
    box-shadow: 0 0 10px #61616170;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    pointer-events: none;
}

.home-share-menu-phone div:hover .share-menu-notif {
    opacity: 1;
    visibility: visible;
}

.phone-contact-active div {
    box-shadow: 0 0 20px #cacaca;
}

.phone-contact-active div:nth-child(2) {
    background-color: #6166f280;
    top: -25%;
    box-shadow: 0 0 13px 1px #7a7ef2;
    left: 13%;
    /* transform: translate(-50%,0%); */
    transition: all .3s ease-in-out 150ms;
}

.phone-contact-active div:nth-child(3) {
    background-color: #6166f280;
    box-shadow: 0 0 13px 1px #7a7ef2;
    top: 60%;
    left: -5%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out 300ms;
}

.phone-contact-active div:nth-child(4) {
    background-color: #6166f280;
    box-shadow: 0 0 13px 1px #7a7ef2;
    top: -55%;
    left: 60%;
    /* transform: translate(100%,100%); */
    transition: all .3s ease-in-out 0ms;
}

.phone-contact-active div a i {
    color: var(--white);
}

.phone-contact-active i.fa-headphones-alt {
    display: none;
}

.phone-contact-active i.fa-close {
    font-size: 25px;
    display: block;
}










/* option-products */
.option-products {
    width: auto;
    max-width: 1100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 50px;
    z-index: 2;
    border-radius: 0px;
    background-color: transparent;
    box-shadow: none;
    padding: 0;
    /* display: none; */
}

.option-product-back {
    width: 100%;
    max-width: 1100px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.option-product {
    width: 100px;
    /* background-color: var(--mainwhite); */
    border-radius: 50%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    font-family: vazir-light;
    /* box-shadow: 0 0 10px #d0d0d0; */
    transition: box-shadow .3s;
    padding: 0px 0;
}

.option-product h2 {
    font-weight: vazir-light;
    font-weight: normal;
    font-size: 12px;
    color: var(--fontcolor2);
    pointer-events: none;
    margin-top: 10px;
    text-align: center;
}

.option-product p {
    font-size: 13px;
    text-align: center;
    color: #737373;
    pointer-events: none;
}

.option-product-icon {
    width: 60px;
    height: 60px;
    /* background-color: var(--mainwhite); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.option-product-icon img {
    /* height: 100%; */
    width: 100%;
    height: 100%;
    object-fit: cover;
}



#home-img-slider-svg {
    position: absolute;
    bottom: -100px;
    left: 40%;
}

.home-content-div {
    width: 100%;
    max-width: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-content-div-back {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: vazir-light;
}

.home-content-div-back h3 {
    font-size: 22px;
    color: var(--secondcolor);
}

.home-content-div-back h1 {
    font-size: 43px;
    font-family: vazir-extrabold;
    color: #2a2a2a;
    word-spacing: -5px;
    line-height: 60px;
}

.home-content-div-back p {
    font-size: 17px;
    line-height: 35px;
    text-align: justify;
    color: #626262;
}









/* --- home work --- */
.home-work-section {
    width: 90%;
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: 50px;
    margin-bottom: 50px;
    gap: 30px;
}

.home-work-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.home-work-title p {
    font-family: vazir-black;
    font-size: 18px;
    color: var(--secondcolor);
}

.home-work-title h2 {
    font-family: vazir-black;
    font-size: 60px;
    color: var(--fontcolor1);
    margin-top: -20px;
}

.home-works-back {
    width: 95%;
    max-width: 1000px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 35px;
}

.home-works-div {
    width: 49%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 35px;
}

.home-work {
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 25px;
    position: relative;
    transition: .3s;
}

.home-work:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 20px 1px #00000030;
}

.home-work a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.home-work span {
    position: absolute;
    width: 100%;
    height: .001px;
    bottom: 0;
    left: 0;
    box-shadow: 0 0 100px 100px #00000080;
    transition: .3s;
}

.home-work-texts {
    width: 100%;
    padding: 20px 30px;
    font-family: vazir-black;
    font-size: 18px;
    color: #e8e8e8;
}

.home-work-texts h3 {
    width: 100%;
    font-family: vazir-black;
    margin-top: 10px;
    line-height: 40px;
    font-size: 30px;
    color: var(--white);
}

.home-work-img {
    width: 100%;
    margin-bottom: -4px;
}

.home-work-img img {
    width: 100%;
    object-fit: cover;
}

.home-work-link-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    align-items: center;
    font-size: 17px;
    font-family: vazir-black;
    color: var(--white);
    gap: 10px;
    transition: .3s;
}

.home-work:hover span {
    box-shadow: 0 0 120px 80px #000000;
}

.home-work:hover .home-work-link-btn i {
    margin: 0px;
    padding: 15px;
}

.home-work-link-btn i {
    border: 2px solid var(--white);
    padding: 10px;
    margin: 5px;
    border-radius: 50%;
    transition: .3s;
}

.home-work-link {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    width: 100%;
    max-width: 1000px;
}

.home-work-link a {
    font-family: vazir-black;
    color: var(--secondcolor);
    background-color: transparent;
    border: 2px solid var(--secondcolor);
    border-radius: 1px 15px 15px 15px;
    padding: 12px 15px 10px 15px;
    transition: .3s;
}

.home-work-link a:hover {
    color: var(--white);
    background-color: var(--secondcolor);
    box-shadow: 0 0 20px 2px var(--secondcolor);
    /* transform: scale(1.1); */
}

#home-work1 {
    background-color: #32ADFF;
}

#home-work2 {
    background-color: #DE3F64;
}

#home-work3 {
    background-color: #6AC1B3;
}

#home-work4 {
    background-color: #EA563D;
}

#home-work5 {
    background-color: #397BB7;
}

#home-work6 {
    background-color: #FF859B;
}











.home-text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 50px 20px;
    margin: 100px 0;
    /* background-color: #00000010; */
}

.home-text-back {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 50px;
    /* background-color: #00000010; */
    text-align: center;
}

.home-text-back h1 {
    font-size: 80px;
    font-family: lalezar;
    color: var(--black);
    line-height: 80px;
}

.home-text-back h3 {
    font-size: 25px;
    font-family: vazir-black;
    color: var(--fontcolor1);
    letter-spacing: -1px;
}

.home-text-back p {
    font-size: 18px;
    font-family: lalezar;
    color: #6e8fa4;
}







/* ---------- SERVICE ---------- */

.service-home {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin: 0px 0 40px 0;
    /* background-color: #EAEDF0; */
    padding: 30px 0 50px 0;
}

.service-home-back {
    width: 96%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.home-title-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

#home-title-shape {
    width: 20px;
    height: 20px;
    border-radius: 35%;
    transform: rotate(45deg);
}

.service-home-title.home-title-div #home-title-shape {
    background: linear-gradient(130deg, var(--theme4), var(--theme3));
}

.home-title-div-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.home-title-div-text h1 {
    font-family: lalezar;
    font-size: 32px;
    color: var(--fontcolor1);
}

.home-title-div-text p {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor2);
}

.service-home-title.home-title-div a {
    font-family: vazir-black;
    font-size: 15px;
    margin-right: auto;
    margin-left: 20px;
    color: var(--fontcolor1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .3s;
}

.service-home-title.home-title-div a i {
    font-size: 25px;
    margin-top: -1px;
    border-radius: 100%;
    border: 4px solid var(--theme4);
    transition: .3s;
}

.service-home-title.home-title-div a:hover {
    gap: 15px;
}

.service-home-title.home-title-div a:hover i {
    padding: 5px;
    color: var(--fontcolor1);
}

.service-home-div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
    gap: 70px 15px;
    margin-top: 50px;
}

.service-div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    padding: 10px;
    border-radius: 15px;
    background-color: var(--white);
    box-shadow: 0 10px 15px #d4d5dd80;
}

.service-img {
    width: 97%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 15px;
    margin-top: -60px;
    margin-bottom: 20px;
    box-shadow: 0 10px 15px #d4d5dd80;
}

.service-img a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-img a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.service-img .service-img-discount {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    background: linear-gradient(65deg, #007ACC, #82BEE6);
    padding: 6px 10px 4px 10px;
    border-radius: 10px;
    font-family: lalezar;
    font-size: 14px;
    color: var(--white);

    background: var(--white);
    color: #007ACC;
    border: 1px solid var(--navcolor);
    /* box-shadow: 0 10px 15px #007ACC80; */
}

.service-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}

.service-content .service-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.service-content .service-text h1 {
    width: 100%;
    font-family: lalezar;
    font-size: 20px;
    transition: .3s;
}

.service-content .service-text h1 a {
    color: var(--fontcolor1);
    transition: .3s;
}

.service-content .service-text h1 a:hover {
    color: var(--blue);
}

.service-content .service-text p {
    width: 100%;
    font-family: vazir-light;
    font-size: 14px;
    transition: .3s;
    color: var(--fontcolor2);
    text-align: justify;
    max-height: 70px;
    overflow: hidden;
}

.class-service-home-icon~.service-content .service-text p {
    max-height: unset;
}

.service-content .service-text div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-content .service-text div h2 {
    font-family: vazir-black;
    font-size: 11px;
    color: var(--black);
    background: linear-gradient(130deg, var(--theme2), var(--theme3));
    box-shadow: 0 0 10px var(--theme3);
    padding: 7px 12px;
    border-radius: 100px;
}

.service-content .service-text div span {
    display: flex;
    align-items: center;
    justify-content: center;
    direction: ltr;
    gap: 3px;
}

.service-content .service-text div span h3 {
    font-family: vazir-black;
    font-size: 14px;
    color: #e7c508;
}

.service-content .service-text div span i {
    color: #e7c508;
    margin-top: -5px;
}

.service-content .service-price {
    width: 100%;
    height: 71px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px dashed var(--fontcolor3);
    margin-top: 15px;
    padding: 10px 0;
}

.service-content .service-price a {
    font-family: lalezar;
    font-size: 15px;
    padding: 10px 15px;
    border-radius: 15px;
    /* background: linear-gradient(130deg,var(--green),#1ECDA180); */
    background-color: #5c7cff;
    box-shadow: 0 7px 10px #5c7cff80;
    color: var(--white);
}

.service-price-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

.service-price-back h3 {
    font-family: vazir-light;
    font-size: 12px;
    color: var(--fontcolor3);
    text-decoration: line-through;
}

.service-price-back h2 {
    font-family: lalezar;
    font-size: 20px;
    color: #3f4264;
}

.service-price-back h2 span {
    font-size: 15px;
    color: #3f426470;
}






/* ---------- WEB MAP ---------- */

.home-text-top#home-map {
    margin-bottom: 40px;
    max-width: 100vw;
    overflow-x: hidden;
}

.home-text-top#home-map .home-title-div {
    width: auto;
}

.home-text-top#home-map .home-title-div .home-title-div-text {
    align-items: center;
    pointer-events: none;
}

.home-map-back {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.home-map-div {
    width: 95%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.home-map-all {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 50px;
}

.home-map-side {
    width: 100%;
    min-height: 130px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

#home-map-middle {
    width: 8px;
    height: 80px;
    background-color: var(--theme4);
    background: linear-gradient(to bottom, var(--theme3), var(--theme4));
    position: relative;
    border-radius: 100px;
}

#home-map-middle span {
    position: absolute;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: vazir-black;
    color: var(--white);
    background-color: var(--theme4);
    background: linear-gradient(130deg, var(--theme3), var(--theme4));
    left: 50%;
    transform: translateX(-50%);
    top: -40px;
    font-size: 12px;
    padding-top: 2px;
    pointer-events: none;
    box-shadow: 0 0 20px var(--theme4);
}

#home-map-middle span#home-map-middle-span-last {
    top: unset;
    bottom: -40px;
}

.home-map-side h2 {
    font-family: lalezar;
    font-size: 25px;
    color: var(--fontcolor1);
    line-height: 50px;
    pointer-events: none;
}

.home-map-side h3 {
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor2);
    line-height: 25px;
    pointer-events: none;
}

.home-map-side h3 span {
    font-family: lalezar;
    color: var(--theme1);
    font-size: 30px;
    margin-left: 10px;
    line-height: 0;
}

.home-map-right {
    align-items: flex-end;
}

.home-map-bottom-text {
    margin-top: 40px;
}

.home-map-bottom-text h2 {
    font-family: lalezar;
    font-size: 25px;
    color: var(--theme3);
    text-shadow: 0 4px 0px #3CB37150;
    pointer-events: none;
}

#home-map #home-title-shape {
    display: none;
}




/* --------- CHART --------- */

#home-chart-section {
    margin-top: -50px;
    margin-bottom: -50px;
}

.home-chart-div-back {
    width: 100%;
    max-width: 900px;
    height: 400px;
    margin: 0px 0 10px 0;
    background-color: var(--white);
    padding: 30px 30px;
    border-radius: 30px;
    border: 1px solid #00000015;
    display: flex;
    align-items: center;
    justify-content: center;
}












/* --------- SERVICE CLASS --------- */

#service-class {
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 50px;
}

#service-class .service-home-div {
    gap: 20px;
    margin-top: 0px;
}

.service-div {
    transition: .3s;
}

#service-class .service-div {
    box-shadow: unset;
}

.service-div:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 20px 5px #d4d5dd;
}

#service-class .service-div:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 20px 5px #d4d5dd;
}

#service-class .service-content {
    justify-content: space-between;
    height: 100%;
}

#service-class .service-price-link {
    width: 100%;
}

#service-class .service-price-link a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
}

.class-service-home-icon {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
}

.class-service-home-icon i {
    color: var(--blue);
    font-size: 30px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #3071e720;

}





/* ---------- CUSTOMER COMMENTS ---------- */

.home-comments {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    gap: 10px;
    /* background-color: #cfd5da; */
    /* background: linear-gradient(130deg,#d2d9dd,#EAEDF0); */
    /* box-shadow: 0 15px 20px #EAEDF0; */
    border-radius: 30px;
    margin-bottom: 40px;
}

.home-comments-back {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.home-comments .home-title-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#home-slider-comments.slider {
    position: relative;
    width: 100%;
    max-width: 900px;
    /* margin: auto; */
    overflow: hidden;
    border-radius: 20px;
}

#home-slider-comments .slides {
    display: flex;
    transition: transform 0.5s ease-in-out;
    pointer-events: none;
}

#home-slider-comments .slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 40px;
    /* background: #EAEDF0; */
    text-align: center;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 40px 20px 40px;
    direction: rtl;
}

#home-slider-comments .slide .home-comment {
    width: 100%;
    height: 100%;
    max-width: 900px;
    background-color: transparent;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 20px 30px;
    /* box-shadow: 0 10px 15px #00000010; */
}

.home-comment-title {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 15px;
}

.home-comment-img {
    width: 60px;
    height: 60px;
}

.home-comment-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.home-comment-title-text {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    gap: 0px;
}

.home-comment-title-text h1 {
    font-family: lalezar;
    font-size: 20px;
    color: var(--fontcolor1);
}

.home-comment-title-text h3 {
    font-family: vazir-black;
    font-size: 11px;
    color: gold;
}

.home-comment-content {
    width: 100%;
    text-align: justify;
    /* border-top: 1px dashed #00000030; */
    padding: 00px 10px 0 10px;
}

.home-comment-content p {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor2);
    line-height: 30px;
    background-color: var(--white);
    border-radius: 35px 5px 35px 35px;
    padding: 20px;
    margin-right: 20px;
    border: 1px solid #00000010;
}

#home-slider-comments button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--white);
    color: var(--fontcolor1);
    border: none;
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid #00000010;
    transition: .3s;
    width: 50px;
    height: 50px;
}

#home-slider-comments button:hover {
    transform: translateY(-50%) scale(1.1);
    color: var(--theme4);
}

#home-slider-comments .prev {
    left: 10px;
}

#home-slider-comments .next {
    right: 10px;
}

.home-comments-text {
    width: 100%;
    max-width: 600px;
}

.home-comments-text p {
    font-family: vazir-light;
    font-size: 16px;
    color: var(--fontcolor1);
    text-align: justify;
    line-height: 35px;
}




/* --------- HOME BLOG -------- */

.service-home#blog {
    background-color: transparent;
    margin-bottom: 0;
}

.service-home#blog .service-div {
    max-width: 350px;
    padding: 0;
    overflow: hidden;
}

.service-home#blog .service-div .service-img {
    margin: 0 0 0px 0;
    width: 100%;
    border-radius: 0;
}

.service-home#blog .service-div .service-img img {
    border-radius: 0;
    opacity: .5;
    transition: .3s;
}

.service-home#blog .service-div:hover .service-img img {
    opacity: 1;
}

.service-home#blog .service-home-back {
    gap: 0;
}

.service-home#blog .service-content {
    margin-top: -20px;
    z-index: 1;
    background-color: var(--white);
    border-radius: 0px;
    box-shadow: 0 -20px 50px 50px #ffffff;
    padding: 0 20px;
}

.service-home#blog .service-content .service-text h2 {
    background: transparent;
    box-shadow: unset;
    color: var(--fontcolor1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.service-home#blog .service-content .service-text h2 i {
    color: var(--theme4);
    font-size: 16px;
    padding-bottom: 2px;
}

.service-home#blog .service-content .service-text span {
    padding: 7px 12px;
    gap: 5px;
}

.service-home#blog .service-content .service-text span h3 {
    color: var(--fontcolor1);
}

.service-home#blog .service-content .service-text span i {
    color: var(--theme4);
}

.service-home#blog .service-price .service-price-link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-home#blog .service-price .service-price-link a {
    width: 100%;
    padding: 15px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #5C7CFF00;
    box-shadow: unset;
    color: var(--fontcolor1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 18px;
    transition: .3s;
}

.service-home#blog .service-price .service-price-link a i {
    padding-bottom: 2px;
}

.service-home#blog .service-price .service-price-link a:hover {
    /* background-color: var(--theme3); */
    color: var(--blue);
}





/* --- home-banner --- */

.home-banner {
    width: 95%;
    max-width: 1300px;
    /* padding: 20px 30px; */
    position: relative;
    border-radius: 30px;
    min-height: 350px;
    /* box-shadow: 0 0 20px #00000010; */
    border: 2px solid var(--white);
    margin-top: 20px;
    margin-bottom: 50px;
    overflow: hidden;
    background-color: #0D1A27;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-banner-hex {
    width: 100%;
    height: 100%;
    background: url(../images/background/Hexagon2.svg) repeat;
    background-size: 350px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* .home-banner:hover .home-banner-bg{
    top: unset;
    left: unset;
    transform: translate(-105%,-105%);
  } */
.home-banner-bg {
    position: absolute;
    /* top: 50%; */
    /* left: 50%; */
    transform: translate(-112%, -80%);
    height: 300px;
    width: 300px;
    background: linear-gradient(90deg, var(--theme4), #2ae9c9);
    /* background: #1A1A1A; */
    filter: blur(20px);
    z-index: 0;
    border-radius: 50%;
}

.home-banner-back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 20px; */
    z-index: 2;
    background-color: #ffffff20;
    backdrop-filter: blur(5px);
    padding: 12px 15px;
    border-radius: 30px;
    width: 100%;
    height: 350px;
}

.home-banner-back h2 {
    color: var(--theme2);
    font-family: lalezar;
    font-size: 40px;
}

.home-banner-back p {
    color: var(--theme2);
    font-family: vazir-black;
    font-size: 17px;
    position: relative;
}

#home-banner-back-span1 {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
    /* background-color: #ff0000; */
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: inset 0 0 15px var(--theme4);
    animation: home-banner-span1 1.1s infinite ease-out;
}

#home-banner-back-span2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    background-color: var(--theme4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

@keyframes home-banner-span1 {
    0% {
        width: 12px;
        height: 12px;
        right: -25px;
        box-shadow: inset 0 0 15px var(--theme4);
    }

    100% {
        width: 35px;
        height: 35px;
        right: -36px;
        box-shadow: inset 0 0 15px #ffffff00;
    }
}

.home-banner-back a {
    color: var(--theme1);
    font-family: lalezar;
    font-size: 18px;
    padding: 15px 50px;
    border-radius: 100px;
    background-color: #ffffff90;
    backdrop-filter: blur(50px);
    margin-top: 20px;
    animation: animated-gradient 3s linear infinite;
    background-size: 150% 150%;
    transition: .3s;
}

.home-banner-back a:hover {
    box-shadow: 0px 0px 50px var(--theme4);
    background: var(--theme4);
    color: var(--white);
}













/* ------ Start circle body ------ */
.circle-body-move {
    width: 70px;
    height: 70px;
    position: absolute;
    border-radius: 40%;
    opacity: 1;
    z-index: 0;
    transform: rotate(45deg);
    /* opacity: .5; */
    display: none;
}

#circle-id-1 {
    background: linear-gradient(130deg, var(--theme3), var(--theme4));
    width: 100px;
    height: 100px;
    top: 150px;
    left: 100px;
    box-shadow: 0 0 50px 3px #52de9180;
    filter: blur(4px);
}

#circle-id-2 {
    background: linear-gradient(130deg, var(--theme2), var(--theme2));
    width: 140px;
    height: 140px;
    filter: blur(40px);
    opacity: .7;
    top: 550px;
    left: 30vw;
    box-shadow: 0 0 50px 3px #31915c80;
}

#circle-id-3 {
    background: linear-gradient(130deg, var(--theme3), var(--theme2));
    width: 0px;
    height: 0px;
    top: 750px;
    right: 20vw;
    /* box-shadow: 0 0 150px 100px var(--theme2); */
    opacity: 0;
}

.circle-section-samples #circle-id-1 {
    top: 700px;
    z-index: -1;
    left: 20px;
    right: auto;
}

.circle-section-samples #circle-id-3 {
    top: 250px;
    z-index: -1;
    right: -50px;
    background: linear-gradient(130deg, var(--lightblue1), var(--blue));
    width: 130px;
    height: 130px;
    box-shadow: 0 0 70px 30px var(--lightblue1);
    z-index: -1;
}

.circle-section-samples #circle-id-2 {
    bottom: 500px;
    top: auto;
    z-index: -1;
    right: 20px;
}


































.work-sort-div {
    width: 95%;
    max-width: 640px;
    height: 80px;
    border-radius: 20px;
    box-shadow: 5px 10px 15px 2px var(--shadow);
    margin-bottom: 70px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 10px 5px;
    margin-top: 10px;
    position: relative;
    background-color: var(--navcolor);
}

.work-sort-btn {
    width: 200px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* background-color: #00000010; */
    border-radius: 20px;
    z-index: 2;
}

.work-sort-btn p {
    font-family: vazir-black;
    font-size: 18px;
    color: var(--fontcolor2);
    transition: .6s;
}

.work-sort-div-select-back {
    width: 100%;
    height: 100%;
    padding: 10px 13px;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: .5s;
}

.work-sort-div-select {
    position: relative;
    width: 200px;
    height: 60px;
    border-radius: 20px;
    background: linear-gradient(130deg, var(--green), var(--blue));
    animation: animated-gradient 3s linear infinite;
    background-size: 150% 150%;
    /* box-shadow: 3px 7px 10px var(--bodycolor); */
    z-index: 1;
    transition: .5s;
}

.work-sort-div-select-back.work-sort-all {
    padding: 0 300px 0 0;
    margin-left: 13px;
    justify-content: flex-start;
}

.work-sort-div-select-back.work-sort-web {
    justify-content: center;
    padding: 0 200px 0 200px;
}

.work-sort-div-select-back.work-sort-app {
    padding: 0 0 0 300px;
    margin-left: -13px;
    justify-content: flex-end;
}

.work-sort-div-select-back.work-sort-all~.sortAllWork p {
    color: var(--white);
}

.work-sort-div-select-back.work-sort-web~.sortWebWork p {
    color: var(--white);
}

.work-sort-div-select-back.work-sort-app~.sortAppWork p {
    color: var(--white);
}


.work-page-section .home-works-left {
    opacity: 0;
    visibility: hidden;
    left: -200px;
    display: none;
    transition: .5s;
}

.work-page-section .home-works-middle {
    opacity: 0;
    visibility: hidden;
    right: -200px;
    display: none;
    transition: .5s;
}

.work-page-section .home-works-left.show-work {
    opacity: 1;
    visibility: visible;
    left: 0;
    display: flex;
}

.work-page-section .home-works-middle.show-work {
    opacity: 1;
    visibility: visible;
    left: 0;
    display: flex;
}



/* ------ scroll link ------ */
.scroll-link {
    width: 75px;
    height: 170px;
    position: fixed;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 10;
}

.scroll-link div:nth-child(1) {
    height: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    padding: 20px 0;
}

.scroll-link div:nth-child(1) a {
    font-size: 14px;
    font-family: vazir-light;
    color: var(--black);
    transition: .3s;
}

.scroll-link div:nth-child(1) a:hover {
    color: var(--blue);
}

.scroll-link div:nth-child(2) {
    width: 3px;
    height: 170px;
    background: var(--black);
    border-radius: 100px;
    position: relative;
    opacity: .8;
}

.scroll-link div:nth-child(2) span {
    width: 13px;
    height: 13px;
    background-color: var(--blue);
    border-radius: 100%;
    position: absolute;
    margin-right: -5px;
    /* z-index: 100; */
}

.scroll-link div:nth-child(2) span:nth-child(1) {
    top: 24px;
}

.scroll-link div:nth-child(2) span:nth-child(2) {
    top: 60px;
}

.scroll-link div:nth-child(2) span:nth-child(3) {
    top: 96px;
}

.scroll-link div:nth-child(2) span:nth-child(4) {
    top: 132px;
}

.scroll-link-sticky div:nth-child(1) a {
    color: var(--black);
}





/* ------ Start skills ------ */
.skills {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 80px;
}

.skills-back {
    width: 95%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section-title {
    width: 100%;
    text-align: center;
    position: relative;
}

.section-title h1 {
    font-family: vazir-extrabold;
    font-size: 40px;
    color: var(--bodycolor);
    font-weight: 700;
    text-shadow: 0 0 5px #37dfb5,
        0 0 10px #37dfb5,
        0 0 20px #37dfb5,
        0 0 40px #37dfb5,
        0 0 80px #37dfb5,
        0 0 90px #37dfb5,
        0 0 100px #37dfb5,
        0 0 150px #37dfb5;


}





.skills-div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    margin-top: 50px;
}

.skill-container {
    height: 300px;
    cursor: pointer;
    position: relative;
}

#index-circle {
    z-index: -1;
}

.skills-div .skill {
    width: 100%;
    height: 100%;
    background: #ffffff00;
    backdrop-filter: blur(5px);
    border-radius: 150px 150px 20px 20px;
    box-shadow: 0px 10px 20px #00000030;
    animation: animated-gradient 12s linear infinite;
    background-size: 300% 300%;
    position: absolute;
    transition: box-shadow .3s;

}

.skills-div .skill:hover {
    box-shadow: 0px 20px 30px #00000050;
}

.skill-title {
    color: var(--green);
    font-family: vazir-black;
    text-align: center;
    padding-top: 10px;
    background-color: var(--green);
    width: 50%;
    min-width: 100px;
    margin: 0 auto;
    margin-top: -40px;
    margin-bottom: 40px;
    box-shadow: 0px 10px 30px 3px var(--green);
    border-radius: 20%;
    padding: 20px 10px;
}

.skill-title h2 {
    font-size: 20px;
    font-weight: normal;
    text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1),
        0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .7), 0 5px 10px rgba(0, 0, 0, .25), 0 10p 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
}

.skill-title i {
    font-size: 50px;
}

.skill-content {
    width: 100%;
    padding: 10px 25px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#skill-gap {
    gap: 20px;
    margin: 20px 0;
}

.skill-content div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    color: var(--black);
    opacity: .9;
}

.skill-content div p {
    font-family: vazir-light;
    font-size: 16px;
    width: 100%;
}

.skill-content div p span {
    margin-right: 10px;
    color: var(--green);
    text-shadow: 0 0 20px #1ECDA180;
    font-size: 25px;
    font-family: vazir-black;
}

.skill-content div p span span {
    margin-right: 5px;
    color: #00000090;
    font-size: 13px;
}

.skill-content div i {
    font-size: 20px;
    color: var(--green);
}

.skill {
    --x-pos: 0;
    --y-angle: calc(var(var(--x-pos))* 10deg);
    --y-pos: 0;
    --x-angle: calc(var(var(--y-pos))* 15deg);
    transform: perspective(200px) rotateY(var(--y-angle)) rotateX(var(--x-angle));
}

.skills-div .skill .skill-title {
    color: var(--white);
}

/* .skills-div .skill:hover .skill-content div {
    color: var(--white);
} */




/* ------ Start Services ------ */
.services {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 50px;
}

.services-back {
    width: 95%;
    max-width: 1250px;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.services-article {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /* flex-wrap: wrap; */
    gap: 30px;
}

.services-content {
    width: 50%;
    height: auto;
}

.services-img {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.services-img img {
    width: 100%;
    object-fit: contain;
    max-width: 450px;
}

.services-skill {
    height: auto;
    min-width: 420px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    display: none;
}

.services-skill .card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.services-skill .card p {
    font-size: 20px;
    font-weight: 600;
    font-family: sans-serif;
    color: var(--primary);
}

.service {
    padding: 15px 0px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.service .service-btn {
    width: 100%;
}

.service .service-btn button {
    width: 100%;
    border: none;
    background: linear-gradient(to top left, var(--green), var(--lightblue1));
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 17px 30px;
    border-radius: 10px;
    font-size: 20px;
    font-family: vazir-regular;
    color: var(--white);
}

.service-content-back {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0px;
    overflow: hidden;
    transition: 1s;

}

.service-content-back-open {
    transition: 1s;
    overflow: unset;
    height: 150px;
}

.service .service-content {
    margin-top: 20px;
    width: 90%;
    height: auto;
    background-color: var(--white);
    box-shadow: 5px 3px 10px #55555570;
    padding: 15px 20px;
    border-radius: 15px 15px 15px 15px;
    position: relative;
    overflow: hidden;
    overflow-y: auto;
}

.service .service-content::before {
    content: '';
    width: 15px;
    height: 15px;
    position: absolute;
    background: linear-gradient(to bottom right, var(--lightblue1), var(--lightblue1), var(--lightblue1), var(--lightblue1), var(--lightblue1), var(--lightblue1), var(--lightblue1), var(--white), var(--white), var(--white), var(--white), var(--white), var(--white), var(--white));
    top: -8px;
    right: 15px;
    transform: rotate(45deg);
    border-radius: 3px;
    /* box-shadow: 0 0 30px var(--white); */
}

.service .service-content p {
    font-family: vazir-light;
    font-size: 16px;
    color: #5a5a5a;
    text-align: justify;
}


/* ----- Start Portfolio ----- */

.portfolio {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.portfolio-back {
    width: 98%;
    max-width: 1020px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.cart-wrapper {
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
}

.cart-wrapper .cart {
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: 5px 3px 10px #9b9b9b;
    /* transition: transform .4s; */
}

.cart-wrapper .cart .cart-img-div {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.cart-wrapper .cart .cart-img-div img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: .4s;
}

.cart-wrapper .cart:hover .cart-img-div img {
    transform: scale(1.1);
}

.cart-wrapper .cart .cart-content {
    height: 120px;
    width: 100%;
    bottom: 0;
    padding: 5px 10px;
}

.cart-wrapper .cart .cart-content h3 {
    font-family: vazir-regular;
    font-size: 20px;
}

.cart-wrapper .cart .cart-content h3 span {
    color: var(--green);
}

.cart-wrapper .cart .cart-content p {
    font-size: 16px;
    font-family: vazir-light;
    color: #474747;
}

.cart-wrapper .cart .cart-content a {
    font-size: 16px;
    font-family: vazir-light;
    padding: 12px 13px;
    background: linear-gradient(to top left, var(--green), var(--primary));
    animation: animated-gradient 3s linear infinite;
    background-size: 150% 150%;
    color: var(--white);
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 0 15px 0 10px;
    cursor: pointer;
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    /* font-size: 18px; */
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    min-width: 230px;
}

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

.swiper-button-prev::after,
.swiper-button-next::after {
    display: none;
}

/*       baner       */
.baner {
    margin: 100px 0;
    width: 98%;
    max-width: 1100px;
    height: 220px;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 5px 7px 10px #bdbdbd;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.baner-content {
    font-family: vazir-light;
    padding: 0 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.baner-content h1 {
    font-family: vazir-black;
    font-weight: normal;
    font-size: 20px;
    /* margin: 0 0 20px 0; */
}

.baner-content h1 span {
    color: var(--green);
}

.baner-content p {
    font-size: 17px;
    color: #7c7c7c;
}

.baner-content a {
    font-size: 17px;
    /* border: 2px solid var(--green); */
    width: 140px;
    padding: 11px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: var(--white);
    margin: 15px 10px;
    background: linear-gradient(130deg, var(--lightblue1), var(--green));
    animation: animated-gradient 3s linear infinite;
    background-size: 150% 150%;
    transition: .3s;
}

.baner-content a:hover {
    transform: scale(1.07);
}

.baner-information {
    position: absolute;
    bottom: 0;
    right: 20px;
    display: flex;
    transform: translateY(50%);
    /* background: linear-gradient(to top left,var(--lightblue1),var(--primary)); */
    /* animation: animated-gradient 3s linear infinite; */
    /* background-size: 150% 150%; */
    border-radius: 10px;
    background-color: #ffffff70;
    backdrop-filter: blur(7px);
    color: #6166f2;
    box-shadow: 0 0 6px #aebdf1;
}

.baner-img {
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #1b1b1b; */
}

.baner-img img {
    width: 350px;
}

.baner-information div {
    padding: 5px 5px;
    font-family: vazir-light;
    display: flex;
    font-size: 15px;
    align-items: center;
    z-index: 2;
}

.baner-information div i {
    padding: 0 5px 5px 5px;
    color: var(--lightblue1);
}






.home-text-top {
    width: 95%;
    max-width: 1300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    margin: 0 0 100px 0;
}

.home-text-top#service {
    margin-top: 0px;
    margin-bottom: 20px;
}

.home-text-top#about {
    margin-top: 10px;
    margin-bottom: 40px;
}

#home-text-top-div {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
    padding: 0 20px;
}

#home-text-top-div img {
    width: 47%;
    max-width: 400px;
    min-width: 300px;
}

#home-text-top-div div {
    width: 47%;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 15px;
}

#home-text-top-div div p {
    font-family: vazir-light;
    color: #3b3b3b;
    line-height: 35px;
    text-align: justify;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#home-text-top-div div p span {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--green);
    color: var(--white);
    font-family: vazir-black;
    font-size: 15px;
    padding-top: 3px;
    box-shadow: 0 0 20px var(--green);
}












/* ---------------------------------------- */

/* -------- START ORDER PAGE ------- */
#order-section {
    min-height: 90vh;
    justify-content: flex-start;
}

.order-section-back {
    width: 93%;
    max-width: 1020px;
    min-height: 400px;
    background-color: var(--white);
    margin-top: 40px;
    border-radius: 20px;
    box-shadow: 0 0 20px 2px #00000025;
    overflow: hidden;
    margin-bottom: 100px;
}

#order-form {
    width: 100%;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    padding: 20px 25px;
    border-radius: 20px;
    margin-top: -20px;
    background-color: var(--white);
    z-index: 1;
}

.order-section-steps-back {
    min-height: 120px;
    background-color: var(--green);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
    z-index: 0;
    padding-bottom: 20px;
}

.order-section-steps-back h1 {
    font-family: vazir-extrabold;
    font-size: 29px;
    color: var(--white);
    text-shadow: 0 0 10px #86edd4;
    word-spacing: -2px;
}

.order-section-steps-back-div {
    width: 90%;
    height: 7px;
    background-color: rgb(133, 228, 205);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#order-step-span {
    width: 25%;
    height: 100%;
    border-radius: 10px;
    background-color: #fff;
    box-shadow: 0 0 10px #86edd4;
    transition: .6s;
}

#order-step-span.order-step-span-active-2 {
    width: 50%;
}

/* #order-step-span.order-step-span-active-3 {
    width: 50%;
} */

#order-step-span.order-step-span-active-4 {
    width: 75%;
}

#order-step-span.order-step-span-active-5 {
    width: 75%;
}

#order-step-span.order-step-span-active-6 {
    width: 90%;
}

#order-step-span.order-step-span-active-7 {
    width: 100%;
}


.order-btn-prew {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.order-btn-prew span {
    font-size: 12px;
    padding: 10px 12px;
    color: var(--green);
    background-color: #00000010;
    border-radius: 7px;
    cursor: pointer;
}

.order-form-title {
    position: relative;
}

.order-back-notif {
    position: absolute;
    width: 70px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    background-color: #4b4b4b;
    font-size: 15px;
    margin-top: 15px;
    left: 5px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: .3s;
}

.order-back-notif::before {
    content: '';
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    position: absolute;
    left: 10px;
    background-color: #4b4b4b;
    top: -5px;
    border-radius: 2px;
}

.order-btn-prew:hover .order-back-notif {
    opacity: 1;
    visibility: visible;
}

.order-form-title {
    font-size: 21px;
    font-family: vazir-black;
    color: #4adab6;
    /* margin: 10px 0 10px 0; */
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: -30px;
    margin-bottom: 10px;
}

.order-topic-div {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
}

.order-topic-div input {
    display: none;
}

.order-topic-div label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: var(--white);
    height: 100px;
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    cursor: pointer;
    font-family: vazir-light;
    font-size: 16px;
    color: #393939;
    transition: .2s;
}

.order-topic-div label i {
    font-size: 22px;
}

.order-topic-div label:hover {
    color: var(--green);
    border: 1px solid #86edd4;
}

.order-input-radio-back input:checked~label {
    color: var(--white);
    border: 1px solid #86edd4;
    background-color: #86edd4;
}

.order-text {
    width: 100%;
}

.order-text textarea {
    width: 100%;
    height: 230px;
    border: 1px solid #e3e3e3;
    border-radius: 15px;
    background-color: var(--white);
    font-family: vazir-light;
    font-size: 16px;
    outline: none;
    padding: 10px 15px;
    resize: none;
}

#order-text-website {
    height: 150px;
}



.order-options-back {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px 20%;
}

.order-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: vazir-light;
    font-size: 16px;
    color: #686868;
}

.order-option p {
    max-width: 70%;
}

.order-option-checkbox input {
    display: none;
}

.order-option-checkbox {
    width: 60px;
    height: 35px;
    overflow: hidden;
}

.order-option-checkbox #order-option-label {
    border-radius: 100px;
    width: 100%;
    height: 100%;
    background-color: var(--navcolor);
    display: flex;
    align-items: center;
    padding: 7px 5px;
    border: 1px solid #e2e2e2;
    cursor: pointer;
    z-index: -1;
}

.order-option-label-checked {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: crimson;
    color: var(--white);
    transition: .3s;
    margin-right: 23px;
    font-size: 15px;
    border: 2px solid var(--white);
}

.order-option-label-checked .fa-check {
    display: none;
}

.order-option-checkbox input[type="checkbox"]:checked~label .order-option-label-checked {
    background-color: #00caa2;
    margin-right: 0;
}

.order-option-checkbox input[type="checkbox"]:checked~label .order-option-label-checked .fa-check {
    display: block;
}

.order-option-checkbox input[type="checkbox"]:checked~label .order-option-label-checked .fa-times {
    display: none;
}

#order-div-6 {
    position: relative;
    padding-bottom: 60px;
}

.order-labels-divs-back {
    clip-path: circle(0% at 100% 0);
    transition: .4s;
    height: 0;
    overflow: hidden;
}

.order-div-active {
    height: auto;
    margin: 30px 0;
    overflow: visible;
    clip-path: circle(141.6% at 100% 0);
}


.order-btn-next {
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-btn-next span {
    font-family: vazir-black;
    font-size: 15px;
    background-color: var(--navcolor);
    padding: 20px 30px;
    cursor: pointer;
    border-radius: 15px;
    /* margin: 10px 15px; */
    color: #5f5f5f;
    transition: .3s;
    margin: 20px 0 0 0;
}

.order-btn-next span:hover {
    background-color: #00d6ab;
    /* border-radius: 15px; */
    color: #ffffff;
}



#order-btn-save {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
}

.order-btn-next button {
    font-family: vazir-black;
    font-size: 16px;
    background-color: var(--green);
    border: none;
    padding: 16px 45px;
    cursor: pointer;
    border-radius: 15px;
    /* margin: 10px 15px; */
    color: #ffffff;
    transition: .3s;
    margin: 20px 0;
}




.order-users-back {
    width: 100%;
    min-height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    overflow-y: auto;
    z-index: 101;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    margin-top: -20px;
}

.order-users-back-active {
    opacity: 1;
    margin-top: 0px;
    visibility: visible;
}

.order-users-back-close {
    width: 100%;
    min-height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
    background-color: #00000090;
    backdrop-filter: blur(6px);
    z-index: 0;
}

.order-users {
    z-index: 1;
    width: 95%;
    max-width: 450px;
    min-height: 400px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 10px;
    border-radius: 8px;
    position: relative;
    gap: 15px;
    padding-top: 40px;
}

.order-users-btn-close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #797979;
    font-size: 17px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.order-users-btn-close:hover {
    background-color: #dfdfdf;
}

.order-user {
    position: relative;
    width: 100%;
    padding: 0 15px;
}

.order-user label {
    position: absolute;
    top: 50%;
    right: 35px;
    transform: translateY(-50%);
    font-size: 15px;
    color: #545454;
    font-family: vazir-regular;
    background-color: var(--white);
    transition: .3s;
}

.order-user input {
    width: 100%;
    font-size: 16px;
    font-family: vazir-light;
    color: #545454;
    outline: none;
    border: 1px solid #e1e1e1;
    background-color: var(--white);
    padding: 12px 10px;
    border-radius: 12px;
    transition: padding .4s, box-shadow .3s;
}

.order-user input:focus {
    border-right: 5px solid var(--green);
    border-radius: 8px 5px 5px 8px;
    padding: 12px 15px;
    box-shadow: 0 0 10px #d5d5d5;
}

.order-user input:focus~label,
.order-user input:valid~label {
    font-size: 13px;
    top: 0%;
    right: 25px;
    transform: translateY(unset);
}

.order-user select {
    width: 100%;
    font-size: 16px;
    font-family: vazir-light;
    color: #545454;
    outline: none;
    border: 1px solid #e1e1e1;
    background-color: var(--white);
    padding: 12px 10px;
    border-radius: 12px;
    transition: padding .4s, box-shadow .3s;
    cursor: pointer;
    appearance: none;
}

.order-user #user_phone::-webkit-outer-spin-button,
.order-user #user_phone::-webkit-inner-spin-button {
    display: none;
}

/* {
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
  appearance: textfield;
} */



/* -------------------------------- */
/* ---------- USER LOGIN ---------- */

body.body.login-page-body{
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-section-user {
    width: 100%;
    /* min-height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 20px 30px 120px 30px; */

}

.login-user-back {
    width: 100%;
    max-width: 400px;
    height: auto;
    background-color: #ffffff70;
    backdrop-filter: blur(10px);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 10px 30px #00000010;
    z-index: 1;
}

.login-user-title,
.login-user-title a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.login-user-title a img {
    width: 100px;
    height: 100px;
    /* box-shadow: 0 0 20px var(--theme3); */
    border-radius: 50%;
    background-color: var(--white);
}

.login-user-title a h1 {
    font-family: lalezar;
    color: #505050;
    letter-spacing: 1px;
    /* text-shadow: 0 0 10px var(--green); */
}

/* .login-user-title a h1 span {
    color: var(--theme4);
} */

.login-user-back h2 {
    font-family: lalezar;
    font-size: 18px;
    color: var(--fontcolor2);
}

.login-user-back form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.login-user-back form div {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-user-back form div input {
    width: 95%;
    padding: 16px 50px 16px 20px;
    outline: none;
    border: none;
    font-family: vazir-light;
    color: #1b1b1b;
    border-radius: 12px;
    font-size: 14px;
    box-shadow: 0 10px 20px #00000010;
    margin: 6px 0;
    transition: .3s;
}

.login-user-back form div input:focus {
    box-shadow: 0 15px 20px #00000015;
}


.login-user-back form div input::-webkit-outer-spin-button,
.login-user-back form div input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.login-user-back form div input[type=number] {
    -moz-appearance: textfield;
}





.login-user-back form div label {
    position: absolute;
    right: 13px;
    width: 45px;
    height: 45px;
    top: 49%;
    transform: translateY(-50%);
    background-color: #4A6DFF60;
    background-color: transparent;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--green);
    font-size: 20px;
    cursor: pointer;
}

.login-user-back form a {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--blue);
    opacity: .8;
    transition: .3s;
}

.login-user-back form a i {
    font-size: 12px;
    margin-top: 2px;
}

.login-user-back form a:hover {
    opacity: 1;
}

.login-user-back form button {
    width: 95%;
    font-family: vazir-black;
    padding: 15px;
    font-size: 16px;
    color: var(--white);
    background-color: var(--green);
    border: none;
    border-radius: 15px;
    cursor: pointer;
    opacity: .8;
    transition: .3s;
    margin: 20px 0 0px 0;
    box-shadow: 0 10px 20px #1ECDA160;
}

.login-user-back form button:hover {
    opacity: 1;
    box-shadow: 0 15px 20px #1ECDA180;
}




.login-user-back form a#login-true-a-id {
    width: 95%;
    font-family: vazir-black;
    padding: 18px;
    font-size: 15px;
    color: var(--white);
    background-color: #4A6DFF;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    opacity: .8;
    transition: .3s;
    margin: 10px 0 0px 0;
    /* box-shadow: 0 10px 20px #4A6DFF60; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.login-user-back form a#login-true-a-id i {
    font-size: 16px;
    padding-bottom: 4px;
}

.login-user-back form a#login-true-a-id.login-true-a-exit-class {
    background-color: transparent;
    color: crimson;
    border: 1px solid #dc143c90;
    box-shadow: none;
    margin-top: 0px;
    padding: 16px;
}

.login-user-back form a#login-true-a-id.login-true-a-exit-class:hover {
    box-shadow: none;
}

.login-user-back form a#login-true-a-id:hover {
    opacity: 1;
    /* box-shadow: 0 15px 20px #4A6DFF80; */
}





.circle-login-design {
    position: absolute;
    background-color: var(--theme4);
    box-shadow: 0 0 30px var(--theme3);
    border-radius: 40%;
    opacity: .5;
    transition: .3s;
}

.circle-login-design:hover {
    opacity: .8;
    box-shadow: 0 0 50px 10px var(--theme4);
}

.circle-login-design#circle1 {
    top: 5vh;
    left: 30vw;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
}

.circle-login-design#circle2 {
    top: 30vh;
    right: 10vw;
    width: 200px;
    height: 200px;
    transform: rotate(20deg);
}

.circle-login-design#circle3 {
    bottom: 10vh;
    left: 10vw;
    width: 150px;
    height: 150px;
    transform: rotate(60deg);
}







/* ---------------------------------- */
/* ---------- PROFILE PAGE ---------- */

.profile-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin: 20px 0;
}

.profile-back {
    width: 95%;
    max-width: 1400px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    min-height: 90vh;
}

.profile-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
}

.profile-content-nav {
    width: 100%;
    border-radius: 30px;
    padding: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--white);
    border: 1px solid #00000010;
    position: relative;
}

.profile-content-nav-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.profile-content-nav-left.profile-content-nav-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.profile-content-nav-left-div a {
    width: 55px;
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1ECDA120;
    color: var(--green);
    border-radius: 30%;
    font-size: 18px;
    position: relative;
}

.profile-content-nav-left-div-back-pishroexchange a {
    width: 170px;
    border-radius: 50%;
    background-color: transparent;
    font-family: lalezar;
    font-size: 25px;
    color: var(--fontcolor1);
    gap: 5px;
    justify-content: flex-end;
}

.profile-content-nav-left-div-back-pishroexchange a span {
    color: var(--green);
}

.profile-content-nav-left-div a img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
}

.profile-content-nav-right ul {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-right: 0px;
}

.profile-content-nav-right ul li {
    list-style: none;
}

.profile-content-nav-right ul li a {
    font-family: lalezar;
    font-size: 16px;
    color: var(--fontcolor2);
    padding: 10px 10px;
    transition: .3s;
}

.profile-content-nav-right ul li a:hover {
    color: var(--green);
    /* text-shadow: 0 0px 20px #4a6dff70; */
}

.profile-content-nav-left-div a i.fa-close {
    display: none;
}

.profile-content-nav-left-div.profile-content-nav-left-div-menu {
    display: none;
}


.profile-menu {
    width: 100%;
    max-width: 300px;
    min-width: 300px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    transition: .3s;
}


.profile-menu-back {
    width: 100%;
    border-radius: 30px;
    background-color: var(--white);
    border: 1px solid #00000010;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 10px;
    z-index: 1;
}

.profile-menu#profile-websites-info-single-id {
    min-width: unset;
}

.profile-menu-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 7px 10px;
    border-bottom: 2px dashed var(--navcolor);
}

.profile-menu-title-img img {
    width: 55px;
    height: 55px;
    border-radius: 15px;
    background-color: transparent;
    object-fit: cover;
}

.profile-menu-title-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-menu-title-content div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.profile-menu-title-content div a {
    font-family: lalezar;
    font-size: 16px;
    color: var(--fontcolor1);
}

.profile-menu-title-content div a h2 {
    font-family: lalezar;
    font-size: 17px;
    color: var(--fontcolor1);
}

#profile-menu-title-content-edit a {
    font-size: 19px;
    color: var(--theme4);
    padding: 10px;
}

.profile-menu-title-content div a h3 {
    font-family: vazir-light;
    font-size: 13px;
    margin-top: 3px;
    color: var(--fontcolor2);
}


.profile-menu ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0px;
    padding-top: 0px;
}

.profile-menu ul li {
    width: 95%;
    list-style: none;
    /* border-bottom: 1px solid #00000015; */
}

.profile-menu ul li a.profile-menu-content-div-h2 {
    width: 95%;
    font-size: 16px;
    color: #484848;
    font-family: lalezar;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px 10px;
    cursor: pointer;
    margin: 0 auto;
    transition: .3s;
    gap: 7px;
    /* background-color: #00000005; */
    /* border-radius: 17px; */
    border-bottom: 1px solid #ff242410;
}

.profile-menu ul li a.profile-menu-content-div-h2.profile-menu-content-div-h2-exit-a {
    color: #dc143c99;
}

.profile-menu ul li a.profile-menu-content-div-h2 i.fa-angle-down {
    font-size: 13px;
    color: #8f8f8f;
    transition: .3s;
    margin-right: auto;
}

.profile-menu ul li a.profile-menu-content-div-h2 i:nth-child(1) {
    width: 20px;
}

.profile-menu ul li.profile-menu-content-div-open a.profile-menu-content-div-h2 {
    color: #4A6DFF;
    gap: 12px;
}

.profile-menu ul li.profile-menu-content-div-open a.profile-menu-content-div-h2 i.fa-angle-down {
    transform: rotate(180deg);
    color: #4A6DFF;
}

.profile-menu ul li a.profile-menu-content-div-h2:hover {
    color: #4A6DFF;
    gap: 12px;
}

.profile-menu ul li a.profile-menu-content-div-h2.profile-menu-content-div-h2-exit-a:hover {
    color: #dc143c;
}

.profile-menu ul li a.profile-menu-content-div-h2:hover i.fa-angle-down {
    color: #4A6DFF;
}


.profile-menu-content-div {
    display: none;

    width: 90%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background-color: transparent;
    margin: 0 auto;
    border-radius: 17px;
    margin-top: 10px;
}

.profile-menu-content-div a {
    width: 90%;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-family: lalezar;
    color: #4a6dff;
    color: var(--fontcolor2);
    background: transparent;
    background-color: #00000006;
    /* border: 1px solid #00000010; */
    /* box-shadow: 0 8px 15px #4A6DFF60; */
    font-size: 14px;
    border-radius: 15px;
    transition: .3s;
}

/* .profile-menu-content-div a:last-child{
    border: none;
} */
.profile-menu-content-div-open .profile-menu-content-div {
    display: flex;
}

.profile-menu-content-div a:hover {
    color: #4a6dff;
}
















.profile-content-div {
    width: 100%;
}

.profile-content-back {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    padding: 20px 30px;
    border-radius: 30px;
    background-color: var(--white);
    border: 1px solid #00000010;
}

.profile-content-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px dashed #00000020;
    padding-bottom: 15px;
}

.profile-content-title h1 {
    font-family: lalezar;
    font-size: 24px;
    color: #3e3e3e;
    color: var(--fontcolor1);
}

.profile-content-title p {
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor2);
}

.profile-content-body {
    width: 100%;
}

.profile-content-body-websites {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 0px 0;
}

.profile-content-body-websites-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    padding: 25px 30px;
    border-radius: 30px;
    border: 1px solid #00000010;
    /* border: 1px solid var(--navcolor); */
    position: relative;
    overflow: hidden;
    /* background: linear-gradient(to right, #4a6dff15,var(--white)); */
    /* box-shadow: 0px 8px 20px var(--theme3); */
}

#profile-websites-not-have-order {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
}

#profile-websites-not-have-order p {
    font-family: vazir-light;
    font-size: 16px;
    color: #333333;
}

#profile-websites-not-have-order a {
    font-family: lalezar;
    font-size: 16px;
    color: #4a6dff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#profile-websites-not-have-order a i {
    font-size: 14px;
}

.profile-body-websites-img {
    width: 150px;
    min-width: 150px;
    height: 150px;
    min-height: 150px;
    border-radius: 20px;
    overflow: hidden;
}

.profile-body-websites-img a {
    width: 100%;
    height: 100%;
}

.profile-body-websites-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-body-websites-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.profile-body-websites-content-div {
    width: 100%;
    max-width: 290px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.profile-body-websites-content-div h2 {
    font-family: lalezar;
    font-size: 24px;
}

.profile-body-websites-content-div h2 a {
    color: #444444;
}

.profile-body-websites-content-div-a-website {
    font-family: vazir-black;
    font-size: 13px;
    color: var(--blue);
    margin: 2px 0 5px 0;
}

.profile-body-websites-content-div h3 {
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor2);
}

.profile-body-websites-content-div h3 a {
    color: var(--fontcolor2);
    transition: .2s;
}

.profile-body-websites-content-div h3 a:hover {
    color: var(--blue);
}

.profile-body-websites-content-div h4 {
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 5px;
}

.profile-body-websites-content-div h4 span {
    color: #4a6dff;
    background-color: #4a6dff20;
    border: 1px solid #4a6dff40;
    width: 28px;
    height: 28px;
    border-radius: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-family: lalezar;
    padding: 1px 1px 0 0;
}

.profile-body-websites-content-end-div {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-body-websites-content-end-div a {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 40px 0 30px;
    color: #4a6dff;
    font-size: 20px;
    font-family: lalezar;
    gap: 10px;
    transition: .3s;
}

.profile-body-websites-content-end-div a i {
    font-size: 19px;
}

.profile-body-websites-content-end-div a:hover {
    gap: 15px;
}

.profile-body-websites-content-end-div-p {
    position: absolute;
    bottom: 10px;
    left: 20px;
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor2);
    display: flex;
    align-items: center;
    justify-content: center;
}








.profile-content-body-website-single {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.profile-content-body-website-single .profile-menu#profile-websites-info-single-id {
    padding: 0 0px;
    border: none;
    /* border-left: 1px solid #00000020; */
    border-radius: 0;
    max-width: 230px;
    position: sticky;
    top: 10px;
}

.profile-content-body-website-single .profile-menu#profile-websites-info-single-id ul {
    gap: 8px;
}

.profile-content-body-website-single .profile-menu#profile-websites-info-single-id ul li {
    width: 100%;
}

.profile-content-body-website-single .profile-menu#profile-websites-info-single-id ul li a {
    width: 100%;
    border: 1px solid #00000015;
    padding: 18px 20px;
    font-size: 15px;
    border-radius: 20px;
    background-color: #00000005;
    transition: 0;
}

.profile-content-body-website-single .profile-menu#profile-websites-info-single-id ul li a:hover {
    gap: 7px;
    background-color: #00000010;
    color: var(--fontcolor1);
}

.profile-content-body-website-single .profile-menu#profile-websites-info-single-id ul li a i.fa-angle-left {
    margin-right: auto;
    font-size: 11px;
}



.profile-content-body-website-single-back {
    width: 100%;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    border: 1px solid #00000010;
    border-radius: 25px;
}

.profile-websites-single-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 15px;
    border-bottom: 1px solid #00000010;
}

.profile-websites-single-title div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-websites-single-title div img {
    width: 60px;
    height: 60px;
    border-radius: 30%;
    border: 1px solid #00000015;
}

.profile-websites-single-title div h2 {
    font-family: lalezar;
    font-size: 20px;
    color: #3F4264;
    pointer-events: none;
}

.profile-websites-single-title div a {
    width: 55px;
    height: 55px;
    border-radius: 30%;
    color: #4a6dff;
    background-color: #4a6dff00;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}


.profile-websites-single-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.profile-websites-single-content-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* gap: 10px; */
    padding: 15px;
}

.profile-websites-single-content-info div {
    width: 100%;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #00000009;
}

.profile-websites-single-content-info div h3 {
    font-family: vazir-light;
    font-weight: normal;
    font-size: 14px;
    color: #4d4d4d;
}

.profile-websites-single-content-info div p {
    font-family: vazir-black;
    font-size: 13px;
    color: #5a5a5a;
}

.profile-websites-single-content-info div a {
    font-family: vazir-black;
    font-size: 14px;
    color: #4d89f9;
}

#profile-websites-single-info-p-tariff {
    color: #4a6dff;
    background-color: #4a6dff20;
    border: 1px solid #00000005;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

#profile-websites-single-info-p-is-on {
    color: #16cea0;
    background-color: #3dc09f20;
    border: 1px solid #00000005;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

#profile-websites-single-info-p-is-off {
    color: crimson;
    background-color: #dc143c15;
    border: 1px solid #00000005;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

#profile-websites-single-info-p-text-info {
    max-width: 350px;
    padding: 15px 0;
    text-align: justify;
    cursor: default;
    line-height: 25px;
    font-family: vazir-light;
}

#profile-websites-single-info-p-color span {
    width: 40px;
    height: 40px;
    border-radius: 35%;
    display: flex;
    border: 1px solid #00000005;
}



.profile-websites-single-content form {
    width: 100%;
}

#profile-websites-edit-color-back {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

#profile-websites-edit-color-back div input {
    display: none;
}

#profile-websites-edit-color-back div label {
    cursor: pointer;
}

#profile-websites-edit-color-back div label #profile-websites-single-info-p-color span {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--white);
    transition: .2s;
    border: 2px solid transparent;
}

#profile-websites-single-content-info .profile-websites-edit-color-back div {
    width: auto;
    justify-content: flex-end;
}

#profile-websites-edit-color-back div label #profile-websites-single-info-p-color span i {
    opacity: 0;
    transition: .2s;
}

#profile-websites-edit-color-back div input:checked~label #profile-websites-single-info-p-color span {
    border: 2px solid var(--white);
}

#profile-websites-edit-color-back div input:checked~label #profile-websites-single-info-p-color span i {
    opacity: 1;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit {
    padding: 0 15px;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit div {
    min-height: 60px;
    position: relative;
}

.profile-websites-edit-input-text {
    width: 100%;
    max-width: 350px;
    padding: 13px 20px;
    border-radius: 17px;
    color: var(--fontcolor1);
    font-size: 15px;
    font-family: vazir-light;
    border: 1px solid #00000015;
    outline: none;
    margin: 10px 0;
    transition: .3s;
}

.profile-websites-edit-input-text:hover,
.profile-websites-edit-input-text:focus {
    border: 1px solid #4a6dff90;
}

#profile-websites-single-input-p-info-link p {
    position: absolute;
    left: 20px;
    direction: ltr;
}

#profile-websites-single-input-p-info-link input {
    direction: ltr;
    padding-left: 102px;
    color: var(--blue);
    font-family: vazir-black;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit #profile-websites-edit-color-back {
    border: none;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit #profile-websites-edit-color-back div {
    border: none;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit div textarea {
    width: 100%;
    max-width: 350px;
    min-height: 200px;
    max-height: 400px;
    border: 1px solid #00000015;
    border-radius: 20px;
    font-family: vazir-light;
    font-size: 14px;
    line-height: 25px;
    color: var(--fontcolor2);
    padding: 12px 20px;
    text-align: justify;
    outline: none;
    margin: 10px 0;
    resize: vertical;
    transition: .3s;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit div textarea:hover,
.profile-websites-single-content-info.profile-websites-single-content-info-edit div textarea:focus {
    border: 1px solid #4a6dff90;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit div textarea::-webkit-scrollbar {
    width: 5px;
    height: 7px;
}

.profile-websites-single-content-info.profile-websites-single-content-info-edit div textarea::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--theme3);
}





input#profile-input-img[type=file] {
    width: 350px;
    /* line-height: 200px; */
    max-width: 100%;
    color: var(--fontcolor2);
    padding: 5px;
    background: #fff;
    border: 2px dashed var(--fontcolor3);
    display: flex;
    align-items: center;
    border-radius: 15px;
    justify-content: center;
    /* padding: 0 25%; */
    margin: 10px 0;
    cursor: pointer;
}

input#profile-input-img[type=file]::file-selector-button {
    margin: 0 -35px 0 0;
    border: none;
    transform: translateY(-60px) translateX(-121px);
    background: transparent;
    padding: 10px 20px;
    border-radius: 10px;
    color: var(--fontcolor2);
    cursor: pointer;
    font-family: vazir-black;
    font-size: 22px;
    cursor: pointer;
}

input#profile-input-img::before {
    content: 'Drop files here or';
    white-space: pre;
    display: block;
    direction: ltr;
    background: transparent;
    /* border: 2px dashed var(--fontcolor3); */
    width: 100%;
    height: 150px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 25px;
    font-family: vazir-black;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--fontcolor2);
    transition: 0.3s;
}



.profile-websites-single-content-form-btn {
    width: 100%;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-websites-single-content-form-btn button {
    width: 100%;
    max-width: 300px;
    font-family: lalezar;
    font-size: 20px;
    color: var(--white);
    background: linear-gradient(130deg, #4565e5, #7ac9fe);
    cursor: pointer;
    border-radius: 20px;
    padding: 14px;
    border: none;
    opacity: .9;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 3px solid var(--white);
}

.profile-websites-single-content-form-btn button:hover {
    box-shadow: 0 0 0 5px #4a6dff50;
    opacity: 1;
}

.profile-websites-single-content-form-btn button i {
    margin-top: -6px;
    font-size: 18px;
}






.profile-websites-single-content-tariff {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 0px;
}

.profile-websites-single-content-tariff-back {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-websites-single-content-tariff-back input {
    display: none;
}

.profile-websites-single-content-tariff-back label {
    width: 100%;
    /* max-width: 400px; */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid #00000015;
    background-color: #00000005;
    border-radius: 25px;
    padding: 15px 15px 15px 30px;
    gap: 15px;
    cursor: pointer;
    position: relative;
    transition: .3s;
}

.profile-websites-single-content-tariff-back label:hover {
    border-color: #4a6dff;
}

.profile-websites-single-content-tariff-back input:checked~label {
    border-color: #4a6dff;
    /* box-shadow: 0 0 20px #4a6dff50; */
}

.profile-websites-single-content-tariff-label-back {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-websites-single-content-tariff-label-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.profile-websites-single-content-tariff-back-check {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 30%;
    border: 2px solid #00000010;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
    margin: 0 5px;
}

.profile-websites-single-content-tariff-back-check i {
    font-size: 15px;
    transition: .3s;
    color: var(--white);
    opacity: 0;
    transition: .3s;
}

.profile-websites-single-content-tariff-back input:checked~label .profile-websites-single-content-tariff-back-check {
    border-color: var(--white);
    box-shadow: 0 0 0 2px #4a6dff;
    background-color: #4a6dff;
}

.profile-websites-single-content-tariff-back input:checked~label .profile-websites-single-content-tariff-back-check i {
    opacity: 1;
}


.profile-websites-single-content-tariff-label-top h3 {
    font-family: lalezar;
    font-size: 24px;
    color: #3e3e3e;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

/* .profile-websites-single-content-tariff-label-top h3 span{
    width: 40px;
    height: 40px;
    border-radius: 30%;
    border: 1px solid #00000010;
    background-color: #4a6dff10;
    color: #4a6dff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 2px 1px 0 0;
} */
.profile-websites-single-content-tariff-label-top p {
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor2);
}

.profile-websites-single-content-tariff-label-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border-top: 2px dashed #00000015; */
    padding-top: 0px;
    margin-top: 0px;
}

.profile-websites-single-content-tariff-label-bottom h5 {
    font-family: lalezar;
    font-size: 17px;
    color: var(--fontcolor3);
    font-weight: normal;
    text-decoration: line-through;
}

.profile-websites-single-content-tariff-label-bottom h2 {
    font-family: lalezar;
    font-size: 22px;
    color: #4a6dff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.profile-websites-single-content-tariff-label-bottom h2 span {
    font-family: vazir-light;
    font-size: 13px;
    color: var(--fontcolor3);
}

.profile-websites-single-content-tariff-label-top-discount {
    position: absolute;
    top: -5px;
    left: -10px;
    transform: rotate(-35deg);
}

.profile-websites-single-content-tariff-label-top-discount h4 {
    font-family: lalezar;
    font-size: 14px;
    padding: 7px 12px 5px 12px;
    background-color: #f43f5e;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: var(--white);
    font-weight: normal;
}





/* --- dashboard --- */

.profile-dashboard-back {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.profile-dashboard-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.profile-dashboard-div-left {
    max-width: 300px;
    min-width: 300px;
}

.profile-dashboard-user {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    background-color: var(--white);
    border-radius: 25px;
    position: relative;
    border: 1px solid #00000010;
    padding: 30px 30px;
    overflow: hidden;
}

.profile-dashboard-user a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.profile-dashboard-user-img {
    width: 90px;
    height: 90px;
    min-width: 90px;
    min-height: 90px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid #00000010;
}

.profile-dashboard-user-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.profile-dashboard-user-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0px;
}

.profile-dashboard-user-text h1 {
    font-family: lalezar;
    font-size: 22px;
    color: #272727;
    font-weight: normal;
    pointer-events: none;
}

.profile-dashboard-user-text h2 {
    font-family: lalezar;
    font-size: 18px;
    color: var(--fontcolor2);
    font-weight: normal;
    pointer-events: none;
}

.profile-dashboard-user-text-p {
    font-family: vazir-black;
    font-size: 14px;
    color: #4a6dff;
    margin-top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0px;
    word-spacing: -1px;
    pointer-events: none;
}

.profile-dashboard-user-text-p i {
    margin-right: 5px;
    font-size: 16px;
    transition: .3s;
}

.profile-dashboard-user:hover .profile-dashboard-user-text-p i {
    margin-right: 8px;
}

.profile-dashboard-price {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 25px;
    padding: 30px 30px;
    border: 1px solid #00000010;
    background-color: var(--white);
}

.profile-dashboard-price p {
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor1);
    pointer-events: none;
}

.profile-dashboard-price h2 {
    font-family: lalezar;
    font-size: 30px;
    color: #4a6dff;
    pointer-events: none;
}

.profile-dashboard-price h2 span {
    font-size: 14px;
    color: #4a6dff99;
}

.profile-dashboard-price a {
    font-family: vazir-light;
    font-size: 14px;
    color: var(--fontcolor2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .3s;
}

.profile-dashboard-price a:hover {
    color: #4a6dff;
}

.profile-dashboard-price a i {
    color: var(--fontcolor3);
    transition: .3s;
}

.profile-dashboard-price a:hover i {
    color: #4a6dff99;
}


.profile-dashboard-contact {
    width: 100%;
}

.profile-dashboard-contact a {
    width: 100%;
    height: 83px;
    font-family: lalezar;
    font-size: 17px;
    color: #4a6dff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 0 25px;
    transition: background-color .4s, box-shadow .4s, border-radius .4s;
    background-color: var(--white);
    border: 1px solid #00000010;
    border-radius: 25px;
}

.profile-dashboard-contact a:hover {
    background-color: #4a6dff;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 6px #4a6dff80;
    color: var(--white);
    border-radius: 20px;
    padding: 0 28px 0 23px;
}

.profile-dashboard-contact a div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .4s;
}

.profile-dashboard-contact a:hover div {
    gap: 15px;
}

.profile-dashboard-contact a i.fa-headphones-alt {
    margin-top: -1px;
    font-size: 22px;
}

.profile-dashboard-contact a i.fa-arrow-alt-circle-left {
    font-size: 20px;
}






.profile-dashboard-right-divs-back {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.profile-dashboard-right-divs-back-right,
.profile-dashboard-right-divs-back-left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.profile-dashboard-views,
.profile-dashboard-store-websites,
.profile-dashboard-messages,
.profile-dashboard-cart {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background-color: var(--white);
    border: 1px solid #00000010;
    padding: 30px;
    position: relative;
    overflow: hidden;
}

.profile-dashboard-views a,
.profile-dashboard-store-websites a,
.profile-dashboard-messages a,
.profile-dashboard-cart a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.profile-dashboard-messages,
.profile-dashboard-views {
    gap: 1px;
}

.profile-dashboard-views h2,
.profile-dashboard-messages h2 {
    font-family: lalezar;
    /* font-weight: normal; */
    font-size: 30px;
    color: #4a6dff;
    pointer-events: none;
}

.profile-dashboard-views p,
.profile-dashboard-messages p {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor2);
    pointer-events: none;
    text-align: center;
}

.profile-dashboard-store-websites,
.profile-dashboard-cart {
    padding: 25px 20px 20px 20px;
    gap: 15px;
}

.profile-dashboard-store-websites i,
.profile-dashboard-cart i {
    font-size: 28px;
    color: #4a6dff;
}

.profile-dashboard-store-websites p,
.profile-dashboard-cart p {
    font-size: 15px;
    font-family: vazir-light;
    color: var(--fontcolor2);
}

.profile-dashboard-store-websites-list .website-sigle-content-left-3-title h2 {
    font-size: 18px;
    font-weight: normal;
    pointer-events: none;
}

.website-sigle-content-left-div.profile-dashboard-store-websites-list {
    padding: 15px 0 0 0;
    border-radius: 20px;
    border: 1px solid #00000010;
    margin-top: 5px;
}

.website-sigle-content-left-div.profile-dashboard-store-websites-list .website-sigle-content-left-3-title {
    border-bottom: 1px solid #00000010;
}

.website-sigle-content-left-div.profile-dashboard-store-websites-list .website-sigle-content-left-3-div-img {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
}

.website-sigle-content-left-div.profile-dashboard-store-websites-list .website-sigle-content-left-3-content-div {
    padding: 2px 5px 12px 10px;
}




.profile-dashboard-score {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: wrap;
    padding: 30px;
    border: 1px solid #00000010;
    background-color: var(--white);
    border-radius: 25px;
}

.profile-dashboard-score h2 {
    font-family: lalezar;
    font-size: 27px;
    color: #4a6dff;
    pointer-events: none;
    margin-bottom: -3px;
}

.profile-dashboard-score p {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor2);
    pointer-events: none;
}









.profile-dashboard-websites {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    padding: 20px 30px;
    border-radius: 25px;
    border: 1px solid #00000010;
    background-color: var(--white);
}

.profile-dashboard-websites h1 {
    font-family: lalezar;
    font-size: 24px;
    color: #272727;
    font-weight: normal;
}

.profile-dashboard-websites-back {
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    overflow-x: auto;
}

.profile-dashboard-websites-div {
    /* min-width: 400px; */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.profile-dashboard-websites-div-img {
    width: 110px;
    height: 110px;
    min-width: 110px;
    min-height: 110px;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #00000010;
    position: relative;
}

.profile-dashboard-websites-div-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



.profile-dashboard-websites-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px 20px;
}

.profile-dashboard-websites-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    background-color: var(--white);
    /* border: 1px solid var(--navcolor);
    box-shadow: 0px 8px 20px var(--theme3); */
    border-radius: 20px;
}


.profile-dashboard-websites-div-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-dashboard-websites-div-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.profile-dashboard-websites-div-text h2 {
    font-family: vazir-light;
    font-weight: normal;
    font-size: 13px;
    text-align: center;
    line-height: 25px;
}

.profile-dashboard-websites-div-text h2 a {
    color: #4d4d4d;
}

.profile-dashboard-websites-div-text a.profile-dashboard-websites-div-text-a {
    font-family: vazir-black;
    font-size: 14px;
    color: var(--fontcolor2);
}

.profile-dashboard-websites-div-text h3 {
    font-family: lalezar;
    font-weight: normal;
    font-size: 16px;
    color: var(--fontcolor3);
}

.profile-dashboard-website-status {
    position: absolute;
    top: 0;
    left: 0;
    padding: 4px 7px;
    border-radius: 15px 0;
    border: 1px solid #00000010;
    font-family: vazir-light;
    font-weight: bold;
    font-size: 11px;
    color: var(--white);
    pointer-events: none;
}

.profile-dashboard-website-status#profile-dashboard-website-status-on {
    background-color: #60e7b1;
}

.profile-dashboard-website-status#profile-dashboard-website-status-off {
    background-color: #ff496d;
}






.profile-dashboard-websites-div-not-orders {
    width: 100%;
    min-height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 15px;
}

.profile-dashboard-websites-div-not-orders p {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor3);
}

.profile-dashboard-websites-div-not-orders a {
    font-family: vazir-black;
    font-size: 13px;
    color: #4a6dff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .3s;
    margin-top: auto;
    margin-right: auto;
}

.profile-dashboard-websites-div-not-orders a:hover {
    gap: 10px;
}

.profile-dashboard-websites-div-not-orders a i {
    color: #6e8bff;
    margin-top: -2px;
    padding-top: 1px;
    transition: .3s;
    font-size: 20px;
    border: 2px solid var(--white);
    border-radius: 50%;
}

.profile-dashboard-websites-div-not-orders a:hover i {
    margin-left: -5px;
    box-shadow: 0 0 0 4px #819aff;
}













/* ----- notification ----- */

.profile-content-back.profile-content-back-notification {
    gap: 0px;
    min-height: calc(100vh - 235px);
}

.profile-content-body-notification {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0 0px;
}

.profile-content-body-notification .profile-notification-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 10px;
    position: relative;
    border-bottom: 1px solid #00000010;
    transition: .3s;
}

/* .profile-content-body-notification .profile-notification-div:last-child{
    border: none;
} */
.profile-notification-div-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    pointer-events: none;
    transition: .3s;
}

.profile-notification-div-content i.fa-bell {
    color: #21252940;
    font-size: 19px;
    transition: .3s;
}

.profile-notification-div-content p {
    font-family: vazir-regular;
    /* font-weight: bold; */
    font-size: 16px;
    color: #717477;
    transition: .3s;
    line-height: 30px;
}

.profile-content-body-notification .profile-notification-div:hover .profile-notification-div-content p {
    color: var(--blue);
}

.profile-content-body-notification .profile-notification-div:hover .profile-notification-div-content i {
    color: #4a6dff;
}

.profile-notification-div-date {
    min-width: 110px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #808080;
    font-family: vazir-black;
    font-size: 14px;
    pointer-events: none;
    transition: .3s;
    margin-bottom: -3px;
}

.profile-content-body-notification .profile-notification-div:hover .profile-notification-div-date {
    color: #5089f2;
}

.profile-notification-div a#profile-notification-div-a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}






/* ----- Messages ----- */

.profile-content-back.profile-content-back-messages {
    gap: 0;
    padding: 20px 0 0 0;
    overflow: hidden;
    min-height: calc(100vh - 235px);
}

.profile-content-back.profile-content-back-messages .profile-content-title {
    padding: 0 30px 15px 30px;
}

.profile-content-back.profile-content-back-messages .profile-content-title h1 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
}

.profile-content-back.profile-content-back-messages .profile-content-title img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid #00000015;
}

.profile-content-back.profile-content-back-messages .profile-content-title a {
    font-size: 18px;
    color: var(--fontcolor2);
    padding-top: 10px;
    padding-left: 10px;
}

.profile-content-back.profile-content-back-messages .profile-content-title span {
    padding-left: 15px;
}

.profile-content-body-messages {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-menu#profile-messages-list-users {
    width: 100%;
    max-width: unset;
}

.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li {
    width: 100%;
}

/* .profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li:last-child a{
    border: none;
} */
.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li a.profile-menu-content-div-h2 {
    width: 100%;
    position: relative;
    padding: 15px 20px;
    gap: 10px;
    transition: 0;
}

.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li a.profile-menu-content-div-h2:hover {
    gap: 10px;
    background-color: #00000010;
}

.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li a.profile-menu-content-div-h2 img {
    width: 50px;
    height: 50px;
    min-width: 50px;
    min-height: 50px;
}

.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li a.profile-menu-content-div-h2 h2 {
    font-weight: normal;
    font-size: 18px;
    color: var(--fontcolor1);
}

.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li a.profile-menu-content-div-h2 span#phone-nav-cart-a-span-num {
    position: relative;
    top: unset;
    left: unset;
    transform: translate(0);
}

.profile-messages-list-users-div-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
}

.profile-messages-list-users-div-top,
.profile-messages-list-users-div-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.profile-messages-list-users-div-text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
}

.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li a.profile-menu-content-div-h2 .profile-messages-list-users-div-text p {
    font-family: vazir-light;
    font-weight: normal;
    font-size: 14px;
    color: var(--fontcolor3);
    line-height: 23px;
    height: 23px;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
}

.profile-messages-list-users-div-text span {
    color: var(--fontcolor3);
    font-size: 12px;
    letter-spacing: 1px;
}

.profile-menu#profile-messages-list-users ul li.profile-messages-list-users-li a.profile-menu-content-div-h2 .profile-messages-list-users-div-top p {
    color: #00000080;
    font-family: vazir-black;
    font-size: 13px;
    font-weight: normal;
}




















p#profile-messages-not-msg-p {
    font-family: vazir-black;
    font-size: 13px;
    color: var(--fontcolor3);
    margin: 40px 0;
}


















/* .profile-content-back.profile-content-back-messages.profile-content-back-messages-pv{
    min-height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0;
    z-index: 101;
    padding-top: 15px;
} */

.profile-content-back.profile-content-back-messages.profile-content-back-messages-pv {
    max-height: 95vh;
}

.profile-content-back.profile-content-back-messages.profile-content-back-messages-pv h1 {
    font-size: 20px;
}

.profile-messages-pv-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 15px 20px;
    gap: 5px;
    overflow-y: auto;
}

.profile-messages-pv-content::-webkit-scrollbar {
    width: 5px;
    height: 7px;
}

.profile-messages-pv-content::-webkit-scrollbar-track {
    background-color: transparent;
}

.profile-messages-pv-content::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #4a6dff80;
}

.profile-messages-pv-msg {
    width: auto;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* border: 1px solid #00000010; */
    background-color: #00000009;
    padding: 10px 20px;
    border-radius: 20px;
    position: relative;
}

.profile-messages-pv-msg::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: 0;
    right: -14px;
    background-color: #4a6dff20;
}

.profile-messages-pv-msg::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    bottom: 0;
    right: -14px;
    background-color: var(--white);
    border-radius: 0 0 0 20px;
}

.profile-messages-pv-msg-text {
    width: 100%;
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor1);
    line-height: 26px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.profile-messages-pv-msg-date {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.profile-messages-pv-msg-date p {
    font-size: 12px;
    color: var(--fontcolor2);
    font-family: vazir-light;
}

.profile-messages-pv-msg-check {
    width: 12px;
    font-size: 13px;
    color: #00000050;
    margin-top: -1px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0px;
}

.profile-messages-pv-msg-check span {
    display: none;
}

.profile-messages-pv-msg-check.profile-messages-pv-msg-check-seen {
    color: var(--blue);
}

.profile-messages-pv-msg-check.profile-messages-pv-msg-check-seen span {
    display: block;
    margin-right: -3px;
    width: 1px;
    height: 10px;
    border-radius: 10px;
    background-color: #3071e7;
    transform: rotate(46deg) translateY(-1px);
}

.profile-messages-pv-msg-you {
    margin-right: auto;
    border-bottom-left-radius: 0;
    border-top-left-radius: 10px;
}

.profile-messages-pv-msg-me {
    margin-left: auto;
    border-bottom-right-radius: 0;
    border-top-right-radius: 10px;
    background-color: #4a6dff20;
}

.profile-messages-pv-msg-me .profile-messages-pv-msg-text {
    color: var(--fontcolor1);
}



.profile-messages-pv-msg.profile-messages-pv-msg-you::before {
    bottom: 0;
    right: unset;
    left: -14px;
    background-color: #F6F6F6;
}

.profile-messages-pv-msg.profile-messages-pv-msg-you::after {
    bottom: 0;
    right: unset;
    left: -14px;
    background-color: var(--white);
    border-radius: 0 0 20px 0px;
}











.profile-messages-pv-msg-form {
    position: sticky;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: auto;
}

.profile-messages-pv-msg-form form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-top: 1px solid #00000020;
    padding: 12px 25px;
}

.profile-messages-pv-msg-form form input {
    width: 100%;
    padding: 15px 10px;
    color: var(--fontcolor1);
    background-color: var(--white);
    border: none;
    outline: none;
    border-radius: 20px;
    font-family: vazir-light;
    font-size: 15px;
}

.profile-messages-pv-msg-form form button {
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 14px;
}
















/* ---------------------------------------- */

/* -------- START ABOUT PAGE ------- */

#about-us-section {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.about-us-section-back {
    width: 100%;
    max-width: 1300px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.about-us-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    max-width: 1180px;
}

.about-us-top-img {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 500px;
}

.about-us-top-img img {
    width: 100%;
    object-fit: contain;
}

.about-us-top-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 20px;
}

.about-us-company-information {
    width: 100%;
    padding: 30px 30px;
    max-width: 1180px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    margin-top: 30px;
}

.about-us-top-content-text-p {
    font-family: vazir-light;
    color: #555555;
    text-align: justify;
    line-height: 35px;
    margin-top: 30px;

}

.about-us-top-content-text-p span {
    font-family: vazir-black;
    color: var(--fontcolor2);
}

.about-us-services {
    width: 95%;
    margin-top: 10px;
    margin-bottom: 50px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.about-us-services-content {
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-family: vazir-light;
    font-size: 18px;
    text-align: justify;
    color: #363636;
    line-height: 30px;
}

.about-us-services-content h1 {
    font-family: vazir-extrabold;
    color: #6166f2;
    font-size: 30px;
    margin-bottom: 30px;
}

.about-us-services-content li {
    margin-right: 20px;
}

.about-us-services-content-list {
    margin-top: 15px;
    padding-right: 40px;
    font-size: 17px;
    color: #555555;
    line-height: 35px;
}

.about-us-services-content-list li {
    transition: padding-right .3s, color .2s, font-weight .3s;
    cursor: default;
    max-width: 400px;
    margin-right: 20px;
}

.about-us-services-content-list li:hover {
    padding-right: 20px;
    color: #4247df;
    font-weight: bold;
}

.about-us-services-img {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-us-services-img div {
    width: 80%;
    height: 80%;
    background-color: #6166f215;
    border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 50px 2px #6166f210;
}

.about-us-services-img img {
    width: 100%;
    padding: 0 30px;
}


#circle-id-4 {
    background: linear-gradient(130deg, var(--lightblue1), #8b8ee7);
    width: 100px;
    height: 100px;
    bottom: 50px;
    right: 50px;
    box-shadow: 0 0 50px 3px #9093f5;
    opacity: 1;
    border-radius: 100px;
}

/* border-radius: 63% 37% 30% 70% / 50% 45% 55% 50%; */

.about-us-our-team {
    width: 95%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 50px;
}

.about-us-our-team-div {
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    box-shadow: 5px 5px 10px 1px #d5dadf;
}

.about-us-our-team-div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.our-team-div-img {
    width: 150px;
    height: 150px;
    margin: 20px auto;
}

.our-team-div-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: vazir-light;
    padding: 10px 0 30px 0;
}

.our-team-div-content h2 {
    font-size: 21px;
    color: #4e4e4e;
    font-family: vazir-light;
    font-weight: 600;
}

.our-team-div-content p {
    font-size: 16px;
    color: #777777;
    font-family: vazir-light;
    margin-top: -10px;
}

.our-team-div-links {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-size: 20px;
}

.our-team-div-links a {
    color: #6461ee;
}

.our-team-div-img {
    transition:
        width .3s,
        height .3s,
        margin-top .3s,
        border-radius .3s;
}

.our-team-div-img img {
    transition: .3s;
}

.about-us-our-team-div:hover {
    box-shadow: 5px 8px 20px 2px #c4c4c4;
    transition: box-shadow .4s;
}

.about-us-our-team-div:hover .our-team-div-img {
    width: 190px;
    height: 190px;
    margin-top: -20px;
    border-radius: 20px;
}

.about-us-our-team-div:hover .our-team-div-img img {
    box-shadow: 5px 5px 20px #bdbdbd;
    border-radius: 20px;
}

.about-us-our-team {
    position: relative;
    padding-top: 100px;
    margin-top: 100px;
    margin-bottom: 100px;
}

.about-us-our-team-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-family: vazir-light;
    font-size: 19px;
    color: var(--purple);
}



















/* ---------------------------------------- */

/* -------- START CONTACT PAGE ------- */
#contact-us-section {
    max-width: 100vw;
    object-fit: cover;
    overflow: hidden;
}

.contact-us-section-back {
    margin: -60px 0 50px 0;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 50px;
    padding: 50px;
    width: auto;
    min-height: 500px;
    max-width: 1180px;
    position: relative;
}

#contact-us-section-background-back {
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: -1;
    height: 80vh;
}

#contact-us-section-background {
    width: 200vw;
    height: 70vh;
    position: absolute;
    top: 0;
    right: -50px;
    transform: rotate(-12deg);
    background-color: #9295f7;
    object-fit: cover;
    z-index: -1;
}

.circle-section-contact #circle-id-1 {
    opacity: 1;
}

.circle-section-contact #circle-id-2 {
    opacity: 1;
}

.circle-section-contact #circle-id-3 {
    opacity: 1;
    box-shadow: 0 0 10px 2px #00000010;
}




.contact-us-img {
    width: 100%;
    max-width: 400px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.contact-us-img-back {
    width: 100%;
    height: 60%;
    max-height: 400px;
    /* background-color: #6166f280; */
}

.contact-us-img-back img {
    width: 100%;
    object-fit: contain;
}

.contact-us-img-link-back {
    display: flex;
    flex-direction: column;
    gap: 20px;
    pointer-events: none;
    font-family: lalezar;
    color: #555555;
    font-size: 18px;
}

.contact-us-img-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.contact-us-img-link-icon-back {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(130deg, var(--theme2), var(--theme3));
    color: #5C7CFF;
    font-size: 19px;
    /* box-shadow: 0 0 20px 1px #5C7CFF90; */
}

#contact-us-content-link-back {
    display: none;
}

.contact-us-contnet {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 50px;
}

#contact-us-contnet-title-phone {
    display: none;
}


.contact-us-contnet-form form {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.contact-us-contnet-form-name {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
}

.contact-us-contnet-form-name div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.contact-us-contnet-form form input {
    font-family: vazir-light;
    outline: none;
    border: 1px solid #dbdbdb;
    border-radius: 18px;
    padding: 15px 20px;
    min-width: 240px;
    transition: transform .4s, box-shadow .4s, border-right-color .4s, padding .3s;
    font-size: 14px;
    color: var(--fontcolor1);
}

.contact-us-contnet-form form input:focus {
    /* transform: scale(1.05); */
    border-right: 6px solid transparent;
    border-right-color: var(--theme4);
    border-radius: 20px 10px 10px 20px;
    padding-right: 25px;
    box-shadow: 0 10px 10px #cecece;
}

#contact-us-form-input-topic {
    width: 100%;
}

.contact-us-contnet-form form textarea {
    font-family: vazir-light;
    outline: none;
    border: 1px solid #dbdbdb;
    border-radius: 20px;
    padding: 15px 20px;
    width: 100%;
    font-size: 14px;
    color: var(--fontcolor2);
    resize: none;
    height: 200px;
    transition: .3s;
}

.contact-us-contnet-form form textarea:focus {
    box-shadow: 0 5px 10px #cecece;

}

.contact-us-contnet-form form button {
    width: 100%;
    border: none;
    border-radius: 20px;
    padding: 15px 0px;
    font-family: lalezar;
    font-size: 19px;
    color: #777777;
    background: linear-gradient(130deg, var(--theme4), #5C7CFF);
    color: var(--white);
    cursor: pointer;
    transition: .3s;
}

.contact-us-contnet-form form button:hover {
    box-shadow: 0 0 20px 1px var(--lightblue1);
}

.contact-us-contnet-form input::-webkit-outer-spin-button,
.contact-us-contnet-form input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.contact-us-contnet-form input[type=number] {
    -moz-appearance: textfield;
}

.contact-us-contnet-form-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.contact-us-contnet-form button[type=reset] {
    max-width: 50px;
    background: transparent;
    border: 1px solid var(--theme4);
    color: var(--theme4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
}

.contact-us-contnet-form button[type=reset]:hover {
    box-shadow: 0 0 20px 1px transparent;
    color: crimson;
    transform: scale(1);
}

.contact-us-location-back {
    position: absolute;
    left: 0px;
    top: 0px;
    background-color: transparent;
    border-radius: 19px 0% 100% 0;
    z-index: 10;
}

.contact-us-location-btn button {
    border: none;
    font-size: 29px;
    color: var(--blue);
    background-color: transparent;
    padding: 17px 30px 25px 20px;
    transition: .4s;
    cursor: pointer;
}

.contact-us-location-btn button .fa-chevron-left {
    display: none;
}

.contact-us-location-btn:hover button {
    padding: 17px 40px 35px 20px;

}

.contact-us-location-div {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--white);
    border-radius: 20px;
    clip-path: circle(5% at 0 0);
    transition: 1s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-us-location-div-active {
    clip-path: circle(141.4% at 0 0);

}

.contact-us-location-btn button.contact-us-location-btn-active .fa-chevron-left {
    display: block;
}

.contact-us-location-btn-active .fa-map-marker-alt {
    display: none;
}

.contact-us-location-div iframe {
    width: 90%;
    height: 80%;
    border-radius: 20px;
    margin-top: 50px;
    transition: 1.5s;
    clip-path: circle(0% at 0 0);
}

.contact-us-location-div-active iframe {
    clip-path: circle(141.4% at 0 0);

}

.contact-us-location-div h1 {
    font-family: vazir-light;
    color: var(--white);
    font-size: 25px;
    position: absolute;
    top: 40px;
    right: 40px;
}















/* ---------------------------------------- */

/* -------- START QUESTIONS PAGE ------- */

.home.questions-home {
    padding: 50px 0;
}

.questions-back {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
}

.questions-img {
    width: 100%;
    max-width: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 50%;
    transform: translateY(-50%);
}

.questions-img img {
    width: 100%;
    object-fit: contain;
}

.questions-back-div {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.question-div {
    width: 90%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* background-color: var(--white); */
    background: linear-gradient(130deg, var(--theme3), var(--theme2));
    border-radius: 25px;
    transition: .3s;
    /* box-shadow: 0 5px 10px #00000020; */
    border: 1px solid #beced5;
}

.question-div input {
    display: none;
}

.question-div label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 25px 25px 25px 20px;
    border-radius: 25px;
    font-family: lalezar;
    font-size: 19px;
    color: var(--fontcolor1);
    cursor: pointer;
}

.question-div label .fa-arrow-alt-circle-left {
    font-size: 25px;
}

.question-div label .fa-circle-xmark {
    font-size: 25px;
    display: none;
}

.question-div .question-answer {
    width: 95%;
    padding: 0px 20px;
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor1);
    text-align: justify;
    transition: .3s;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.question-div input:checked~.question-answer {
    opacity: 1;
    padding: 20px 20px;
    border-top: 1px dashed #00000050;
    height: auto;
    visibility: visible;

}

.question-div input:checked~label .fa-circle-xmark {
    display: block;
}

.question-div input:checked~label .fa-arrow-alt-circle-left {
    display: none;
}






































/* -------------------------------- */

/* -------- START BLOG PAGE ------- */



/* ---- article-home ---- */
.blog-home {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 30px;
    height: auto;
}

.blog-home-back {
    width: 95%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: auto;
}

.blog-home-group-div {
    width: 100%;
    height: 40vh;
    /* min-height: 400px; */
    background-color: #00000010;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-home-group-div h1 {
    font-family: vazir-extrabold;
    font-size: 40px;
    color: var(--firstcolor);
}

.blog-home-div {
    width: 100%;
    height: 50vh;
    min-height: 350px;
    max-height: 450px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.blog-home-img-div {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-home-img-div img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: #00000060;
}




#home-banner .home-back#blog-top-search-back {
    margin-top: -20px;
    max-width: 1250px;
    margin-bottom: 20px;
}

#home-banner .home-back#blog-top-search-back .home-img {
    max-width: 250px;
}

#home-banner .home-back#blog-top-search-back .home-txt h1 {
    /* max-width: 620px; */
    font-size: 32px;
    line-height: 45px;
}

#home-banner .home-back#blog-top-search-back .home-img img {
    transform: scale(1.4);
}

#home-banner .home-back#blog-top-search-back form {
    width: 100%;
    max-width: 500px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

#home-banner .home-back#blog-top-search-back form input {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor1);
    padding: 15px 25px;
    width: 100%;
    border-radius: 100px;
    border: none;
    background: #ffffff80;
    outline: none;
}

#home-banner .home-back#blog-top-search-back form button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    border: none;
    width: 55px;
    height: 50px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(130deg, var(--theme4), #5C7CFF);
    color: var(--white);
    cursor: pointer;
    font-size: 18px;
    transition: .3s;
    opacity: .7;
}

#home-banner .home-back#blog-top-search-back form:hover button {
    opacity: 1;
}

#home-banner .home-back#blog-top-search-back form button:hover {
    box-shadow: 0 0 15px #5C7CFF70;
    width: 70px;
}

#home-banner .home-back#blog-top-search-back form a {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(130deg, #e93257, #dc143c); */
    color: var(--fontcolor2);
    cursor: pointer;
    font-size: 18px;
    transition: .3s;
    opacity: 1;
}

#home-banner .home-back#blog-top-search-back form:hover a {
    opacity: 1;
}

#home-banner .home-back#blog-top-search-back form a:hover {
    /* box-shadow: 0 0 15px #dc143c50; */
    color: #dc143c;
}

#home-banner .home-back#blog-top-search-back form a~input {
    padding-right: 55px;
    padding-left: 65px;
}











.blog-home-content {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    background-color: #00000099;
    backdrop-filter: blur(12px);
    padding: 30px 40px;
}

.blog-home-content h1 {
    font-family: vazir-extrabold;
    font-size: 30px;
    color: #fdfdfd;
    text-shadow: 0 0 10px #d1d1d1;
    margin-bottom: 10px;
}

#blog-home-content-p {
    font-family: vazir-extrabold;
    font-size: 18px;
    color: #c4c4c4;
    max-width: 600px;
    margin-bottom: 20px;
    text-align: right;
}

.blog-home-content div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.blog-home-content div p {
    font-family: vazir-extrabold;
    font-size: 16px;
    color: #d7d7d7;
    /* padding: 12px 15px; */
    border-radius: 20px;
    /* border: 2px solid #d7d7d7; */
    pointer-events: none;
    position: absolute;
    bottom: 20px;
    left: 30px;
    text-shadow: 0 0 10px #242424;
}

#blog-home-content-link-more {
    font-family: vazir-extrabold;
    font-size: 20px;
    color: var(--themeshadow3);
    /* color: var(--firstcolor);
    text-shadow: 0 0 10px var(--white); */
    padding: 12px 15px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: .3s;
    /* border: 2px solid transparent; */
    /* background: linear-gradient(130deg,var(--firstcolor),var(--secondcolor)); */
}

#blog-home-content-link-more:hover {
    gap: 10px;
}

.blog-home-content-links {
    position: absolute;
    top: 20px;
    right: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-home-content-links a {
    font-family: vazir-regular;
    font-size: 17px;
    color: var(--navcolor);
}

/* ----- article-content ----- */
.blog-content {
    width: 95%;
    max-width: 1250px;
    height: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    /* flex-wrap: wrap; */
    margin: 20px auto 0 auto;
    /* padding: 0 30px; */
}

/* ----- article-content-back ----- */
.blog-content-back {
    width: 100%;
    min-height: 50vh;
    min-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    overflow: visible;
    padding-bottom: 50px;
}

.blog-content-div {
    width: 100%;
    background-color: var(--white);
    border: 1px solid #00000020;
    /* box-shadow: 1px 10px 20px 1px #00000010; */
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
    gap: 20px;
    z-index: 1;
}

.blog-content-back-single .blog-content-div {
    background-color: transparent;
    border: none;
}

.blog-content-div-img {
    width: 348px;
    height: 230px;
    border-radius: 25px;
    overflow: hidden;
}

.blog-content-div-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#blog-content-single .blog-content-div-img img {
    height: unset;
}

.blog-content-div-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    width: 100%;
}

.blog-content-title h1 {
    font-family: lalezar;
    font-size: 25px;
    letter-spacing: 0px;
    line-height: 35px;
    pointer-events: none;
    color: var(--fontcolor1);
}

.blog-content-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    flex-wrap: wrap;
}

.blog-content-title a {
    font-family: vazir-extrabold;
    font-size: 15px;
    color: var(--white);
    background: linear-gradient(130deg, var(--theme4), var(--themeshadow3));
    box-shadow: 0 5px 10px #91aee770;
    border-radius: 100px;
    padding: 16px 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .3s;
}

.blog-content-title a:hover {
    box-shadow: 0 10px 20px var(--themeshadow3);
    transform: translateY(-5px);
}

.blog-content-title a span {
    width: 1px;
    height: 20px;
    background-color: var(--navcolor);
    border-radius: 10px;
    display: flex;
}

.blog-content-date {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.blog-content-date p {
    pointer-events: none;
}

#blog-content-date-link {
    transform: translateY(-2px);
    pointer-events: visible;
}

.blog-content-date p,
.blog-content-date a {
    font-family: vazir-light;
    font-size: 16px;
    color: #525878;
}

.blog-content-text1 p {
    font-family: vazir-light;
    font-size: 16;
    line-height: 30px;
    color: #717171;
}

.blog-content-text1 {
    max-height: 60px;
    overflow: hidden;
}

.blog-content-link {
    font-family: lalezar;
    font-size: 17px;
    color: #333333;
    /* width: 100%; */
    margin-right: auto;
    padding-left: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    transition: .3s;
}

.blog-content-link i {
    color: #525878;
    font-size: 14px;
    transition: .3s;
}

.blog-content-link:hover i {
    transform: translateX(-10px);
}






.blog-content-div-nothing {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 20px;
    background-color: #DC143C10;
    border-radius: 20px;
}

.blog-content-div-nothing img {
    max-width: 300px;
    max-height: 200px;
    transform: scale(1.2);
}

.blog-content-div-nothing div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}

.blog-content-div-nothing div h1 {
    font-family: lalezar;
    font-size: 40px;
    color: var(--fontcolor1);
}

.blog-content-div-nothing div h1 i {
    color: #DC143C;
    transform: translateY(5px);
}

.blog-content-div-nothing div h2 {
    font-family: vazir-black;
    font-size: 16px;
    color: var(--fontcolor2);
}

.blog-content-div-nothing div a {
    font-family: lalezar;
    font-size: 16px;
    color: var(--blue);
    /* margin-right: auto; */
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: .3s;
}

.blog-content-div-nothing div a:hover {
    gap: 20px;
}

.blog-content-div-nothing div a i {
    margin-bottom: 2px;
}















/* --- article-content-back-single --- */

#blog-content-single {
    flex-direction: column;
}

#blog-content-single .blog-content-div-img {
    width: 100%;
    max-width: 700px;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -30px;
}

#blog-content-single .blog-content-div-img img {
    object-fit: contain;
    border-radius: 30px;
    width: 100%;
    margin: 0 auto;
}

#journal-body #blog-content-single .blog-content-div-img {
    min-height: 200px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

#journal-body .blog-content-div-img img {
    object-fit: contain;
    max-width: 400px;
    border-radius: 30px;
}

.blog-single-content {
    width: 100%;
    min-height: 150px;
    border-top: 1px dashed #00000040;
    padding: 20px 10px;
    font-family: vazir-light;
    color: #555555;
    line-height: 35px;
    text-align: justify;
}

.blog-single-content h1 {
    font-family: vazir-extrabold;
    font-size: 20px;
    color: #1b1b1b;
}

.blog-single-content h2 {
    font-family: vazir-extrabold;
    font-size: 18px;
    color: #3e3e3e;
}

.blog-single-content h3 {
    font-family: vazir-extrabold;
    font-size: 17px;
    color: #494949;
}

.blog-content-back.home {
    margin-bottom: 0;
}



/* ----- aside ----- */
.aside {
    width: 35%;
    min-width: 250px;
    max-width: 400px;
    min-height: 0vh;
    margin-bottom: 50px;
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
}

.aside-back {
    width: 100%;
    min-height: 150px;
    border-radius: 25px;
    background-color: var(--white);
    /* box-shadow: 2px 5px 15px 1px var(--shadow); */
    border: 1px solid #00000020;
    /* box-shadow: 0px 8px 20px var(--theme3); */
}

.aside-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-bottom: 2px dashed #00000025;
}

.aside-title h2 {
    font-family: lalezar;
    font-size: 25px;
    color: var(--fontcolor1);
}

.aside-content-back {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    /* gap: 10px; */
    padding: 0px 20px;
}

.aside-content {
    width: 100%;
    height: 80px;
    /* border-radius: 20px; */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    gap: 10px;
    border-bottom: 1px solid #00000020;
}

.aside-content:last-child {
    border-bottom: none;
}

.aside-content-img {
    width: 60px;
    height: 60px;
    border-radius: 100px;
    overflow: hidden;
}

.aside-content-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aside-content-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    max-width: 75%;
    position: relative;
    padding-left: 7px;
}

.aside-content-text h3 {
    color: #333333;
    font-family: vazir-extrabold;
    font-size: 17px;
    height: 25px;
    overflow: hidden;
    position: relative;
}

.aside-content-text span {
    position: absolute;
    top: 0;
    left: -5px;
    font-family: vazir-extrabold;
    color: #585858;
}

.aside-content-text p {
    color: #5d5d5d;
    font-family: vazir-light;
    font-size: 14px;
    text-align: left;
}


/* --- blog-comments --- */
.blog-content-single {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.blog-comments-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 15px;
    border-bottom: 1px solid #00000020;
}

.blog-comments-title h1 {
    font-family: vazir-extrabold;
    font-size: 30px;
    color: #2c2c2c;
}

.blog-comments-back {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-width: 700px;
    gap: 40px;
}

.blog-comments {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    width: 100%;
}

.blog-comments-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--white);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(10px);
}

.blog-comments-img img {
    width: 105%;
    background-color: var(--bodycolor);
    height: 105%;
}

.blog-comments-text {
    width: 100%;
    min-height: 150px;
    background-color: #00000009;
    border-radius: 25px 25px 5px 25px;
    padding: 20px 30px;
}

.blog-comments-text-name {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding-bottom: 20px;
    font-family: vazir-light;
    font-size: 15px;
    color: #373737;
    pointer-events: none;
}

.blog-comments-text-name h3 {
    font-family: vazir-extrabold;
    font-size: 17px;
    color: #202020;
}

.blog-comments-text-msg p {
    font-family: vazir-light;
    font-size: 16px;
    color: #5e5e5e;
}

.blog-comments-replay {
    width: 90%;
    margin-top: -30px;
}

.blog-comments-replay .blog-comments-text {
    background-color: var(--navcolor);

}























/* -------- START COMMENTS PAGE -------  */



.comments-back {
    width: 95%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 30px;
    padding: 30px 0;
}

.comments-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    width: 100%;
    border-bottom: 2px dashed #00000010;
    padding: 10px 10px 20px;
}

.comments-title h1 {
    font-family: vazir-extrabold;
    font-size: 25px;
    color: var(--fontcolor1);
}

.comments-div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* background-color: #00000009; */
    width: 100%;
    gap: 30px;
}

.comments-div .comment {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    max-width: 500px;
}

.comments-div .comment .comment-img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    background-color: var(--white);
    /* padding: 5px; */

}

.comments-div .comment .comment-img img {
    width: 100%;
    min-width: 50px;
    height: 100%;
    object-fit: cover;
    border-radius: 100%;
}

.comments-div .comment .comment-content {
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.comments-div .comment .comment-content .comment-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
}

.comments-div .comment .comment-content .comment-title h1 {
    font-family: vazir-extrabold;
    font-size: 17px;
    color: var(--fontcolor1);
}

.comments-div .comment .comment-content .comment-title h3 {
    font-family: vazir-extrabold;
    font-size: 15px;
    color: var(--fontcolor2);
}

.comments-div .comment .comment-content .comment-title h5 {
    font-family: vazir-light;
    font-size: 13px;
    color: var(--fontcolor2);
}

.comments-div .comment .comment-content .comment-text p {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor2);
    text-align: justify;
    line-height: 25px;
}

.comments-div .comment .comment-content .comment-like {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
}

.comments-div .comment .comment-content .comment-like form {
    width: 0%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    display: none;
    transition: .5s;
}

.comments-div .comment .comment-content .comment-like form input {
    width: 100%;
    padding: 15px 50px 15px 55px;
    outline: none;
    border: 1px solid #00000015;
    border-radius: 15px;
    font-family: vazir-light;
    color: var(--fontcolor1);
    font-size: 15px;
}

.comments-div .comment .comment-content .comment-like form button {
    position: absolute;
    left: 5px;
    font-size: 15px;
    color: var(--theme4);
    top: 50%;
    transform: translateY(-50%);
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e0e5f3;
    border: none;
    border-radius: 12px;
    height: 85%;
    cursor: pointer;
}

.comments-div .comment .comment-content .comment-like form i.fa-times {
    position: absolute;
    right: 5px;
    font-size: 15px;
    color: var(--thirdcolor);
    top: 50%;
    transform: translateY(-50%);
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dc143c10;
    border: none;
    border-radius: 12px;
    height: 85%;
    cursor: pointer;
}

#reply-comment-div {
    transition: .3s;
}

#reply-comment-div.open-comment-div {
    width: 100%;
}

#reply-comment-div.open-comment-div form {
    display: flex;
    width: 100%;
}

#reply-comment-div.open-comment-div #reply-comment-div-a {
    display: none;
}

.comments-div .comment .comment-content .comment-like div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: auto;
}

.comments-div .comment .comment-content .comment-like div a {
    cursor: pointer;
}

.comments-div .comment .comment-content .comment-like a {
    font-family: vazir-extrabold;
    font-size: 15px;
    color: var(--fontcolor1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.comments-div .comment .comment-content .comment-like a i {
    font-size: 22px;
    color: var(--fontcolor2);
}

.comments-div .comment .comment-content .comment-like i.fa-circle {
    font-size: 5px;
    color: var(--fontcolor2);
}

.comments-div .comment .comment-content .comment-like i.fa-reply {
    font-size: 15px;
    color: var(--fontcolor2);
}

.comments-reply {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* background-color: #00000009; */
    width: 90%;
    border-right: 1px solid #00000020;
    padding: 20px 20px 20px 0;
    margin-right: auto;
    /* margin-top: 20px; */
    gap: 30px;
}

.add-comment {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-comment-nouser {
    width: auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    background-color: var(--white);
    padding: 15px 20px;
    border-radius: 100px;
    border: 1px solid #00000010;
    /* box-shadow: 0 10px 20px #e0e5f3; */
}

.add-comment-nouser img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #5C7CFF;
    background-color: var(--white);
}

.add-comment-nouser p {
    font-family: vazir-extrabold;
    font-size: 16px;
    color: var(--fontcolor1);
    padding-left: 50px;
}

.add-comment-nouser a {
    font-family: vazir-extrabold;
    font-size: 16px;
    padding: 10px 30px;
    border-radius: 100px;
    background-color: #5C7CFF;
    color: var(--white);
}

form.add-comment-nouser {
    width: 100%;
    max-width: 700px;
}

.add-comment-nouser input {
    font-family: vazir-extrabold;
    font-size: 16px;
    color: var(--fontcolor1);
    padding-left: 50px;
    width: 100%;
    border: none;
    resize: none;
    outline: none;
    padding: 10px 0 10px 0;
}

.add-comment-nouser button#add-comment-btn-id {
    font-family: vazir-extrabold;
    font-size: 16px;
    padding: 10px 30px;
    border-radius: 100px;
    background-color: #4a6dff;
    color: var(--white);
    cursor: pointer;
    border: none;
    position: relative;
    left: unset;
    top: unset;
    transform: translateY(0);
    bottom: unset;
}


.comments-div .comment .comment-content .comment-title #secend-comment-title-div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#secend-comment-title-div .menu-comment {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#secend-comment-title-div .menu-comment i.fa-ellipsis-v {
    color: var(--fontcolor1);
    font-size: 16px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

#secend-comment-title-div .menu-comment:hover i.fa-ellipsis-v {
    background-color: var(--white);
}

#secend-comment-title-div .menu-comment .menu-comment-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 200px;
    background-color: #00000025;
    padding: 10px;
    border-radius: 15px;
    background-color: var(--white);
    box-shadow: 0 10px 20px #e0e5f3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    transition: .3s;
}

#secend-comment-title-div .menu-comment:hover .menu-comment-div {
    visibility: visible;
    opacity: 1;
    transition: .3s;
}

#secend-comment-title-div .menu-comment .menu-comment-div form {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#secend-comment-title-div .menu-comment .menu-comment-div form button {
    width: 100%;
    font-size: 14px;
    color: var(--fontcolor2);
    padding: 12px 15px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    font-family: vazir-extrabold;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background-color: #e0e5f360;
    gap: 10px;
    border-radius: 10px;
    transition: .3s;

    position: relative;
    top: unset;
    left: unset;
    bottom: unset;
    transform: translateY(0);
}

#secend-comment-title-div .menu-comment .menu-comment-div form button:hover {
    background-color: #e0e5f3;
}

#secend-comment-title-div .menu-comment .menu-comment-div form button i {
    font-size: 13px;
}











/* ------------------------------- */
/* ----- START WEBSITES PAGE ----- */

.websites-section {
    width: 95%;
    max-width: 1270px;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 35px;
    /* background-color: #00000010; */
    margin: 20px 0 30px 0;
}

.websites-back {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    order: 2;
}

.service-div#websites-service-div {
    max-width: 350px;
    box-shadow: none;
    border: 1px solid var(--navcolor);
}

.websites-back .service-home-div {
    gap: 90px 20px;
}

.service-div#websites-service-div:hover {
    /* transform: translateY(-10px); */
    box-shadow: 0 10px 15px #d4d5dd80;
}


.websites-aside {
    width: 100%;
    max-width: 280px;
    /* position: sticky; */
    top: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
}

.websites-aside .question-div {
    width: 100%;
    border-color: var(--navcolor);
    background: var(--white);
    border-radius: 25px;
    /* box-shadow: 0px 8px 20px var(--theme3); */
}

.websites-aside .question-div label {
    padding: 20px 20px 20px 20px;
    font-size: 16px;
}

.websites-aside .question-div label p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.websites-aside .question-div label p i {
    color: #688599;
    font-size: 19px;
}

.websites-aside .question-div label .fa-chevron-down {
    font-size: 13px;
    color: #63859d;
    transition: .2s;
}

.websites-aside .question-div input:checked~label .fa-chevron-down {
    transform: rotate(180deg);
}


.websites-aside .question-div ul input {
    display: block;
}

.websites-aside .question-div .question-answer ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 5px;
}

.websites-aside .question-div .question-answer ul li {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    /* background-color: #00000010; */
}

.websites-aside .question-div .question-answer ul li a {
    font-family: vazir-light;
    font-size: 16px;
    color: var(--fontcolor2);
    width: 100%;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
}

.websites-aside .question-div .question-answer ul li a span {
    width: 17px;
    height: 17px;
    border-radius: 5px;
    background-color: #d4d5ddcc;
    display: flex;
    align-items: center;
    justify-content: center;
}

.websites-aside .question-div .question-answer ul li a span i {
    font-size: 11px;
    display: none;
    margin-left: .5px;
}

.websites-aside .question-div .question-answer ul li a#websites-aside-a-selected {
    gap: 8px;
}

.websites-aside .question-div .question-answer ul li a#websites-aside-a-selected span {
    background-color: #4a6dff;
    border: 2px solid var(--white);
    box-shadow: 0 0 0 2px #4a6dff;
    box-sizing: content-box;
    margin-right: -2px;
    border-radius: 7px;
}

.websites-aside .question-div .question-answer ul li a#websites-aside-a-selected span i {
    display: block;
    color: var(--white);
}






/* ----- WEBSITE SINGLE ----- */

.website-sigle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0 50px 0;
}

.website-sigle-back {
    width: 95%;
    max-width: 1270px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

.website-sigle-top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background-color: var(--white);
    border-radius: 20px;
    padding: 25px 35px;
}

.website-sigle-top-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
}

.website-sigle-top-img {
    width: 100%;
    max-width: 500px;
    max-height: 300px;
    padding: 10px 0;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-sigle-top-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.website-sigle-top-content h1 {
    font-family: lalezar;
    font-size: 27px;
    color: var(--fontcolor1);
}

.website-sigle-top-content p {
    font-family: vazir-regular;
    color: var(--fontcolor2);
    font-size: 16px;
    line-height: 32px;
    text-align: justify;
}

.website-sigle-top-content div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.website-sigle-top-content div a {
    min-width: 60px;
    width: 60px;
    height: 60px;
    border-radius: 15px;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    position: relative;
    transition: .3s;
}

#website-sigle-top-content-like-a {
    background-color: #f43f5e10;
    /* border: 1px solid #f43f5e; */
    color: #f43f5e;
    font-size: 22px;
}

#website-sigle-top-content-comment-a {
    background-color: #00c07310;
    /* border: 1px solid #00c073; */
    color: #00c073;
    font-size: 22px;
}

#website-sigle-top-content-menu-a {
    background-color: #4C6EFF20;
    /* border: 1px solid #00c073; */
    color: #4C6EFF;
    font-size: 22px;
}

#website-sigle-top-content-order-a {
    /* width: 100%; */
    width: auto;
    padding: 0 90px;
    font-family: lalezar;
    background-color: #4C6EFF;
    margin-left: auto;
    border: 2px solid transparent;
}

#website-sigle-top-content-order-a i {
    width: 60px;
    height: 41px;
    /* background-color: #E9EDFF;
    color: #4C6EFF;
    border-radius: 11px; */
    border-left: 1px dashed #00000040;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 2px;
    font-size: 22px;
}

#website-sigle-top-content-order-a:hover {
    box-shadow: 0 0 0px 5px #4C6EFF70;
    border: 2px solid var(--white);
    text-shadow: 0 0 15px #ffffff70;
}

#website-sigle-top-content-like-a:hover {
    background-color: #f43f5e;
    /* box-shadow:0 0px 10px #f43f5e80; */
    color: var(--white);
    /* transform: translateY(-5px); */
}

#website-sigle-top-content-comment-a:hover {
    background-color: #24cc89;
    /* box-shadow:0 0px 10px #00c07380; */
    color: var(--white);
    /* transform: translateY(-5px); */
}

#website-sigle-top-content-menu-a:hover {
    background-color: #4C6EFF;
    /* box-shadow:0 0px 10px #4C6EFF80; */
    color: var(--white);
    /* transform: translateY(-5px); */
}





.website-sigle-top-content div a span {
    position: absolute;
    bottom: 110%;
    pointer-events: none;
    font-size: 16px;
    padding: 10px 0px;
    border-radius: 13px;
    background-color: #EAEAED;
    color: #595b6f;
    border: 1px solid #595b6f20;
    font-family: lalezar;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    transform: translateY(-10px);
    /* box-shadow: 0 10px 10px #7f819870; */
}

#website-sigle-top-content-like-a span {
    width: 70px;
    left: 30%;
    border-radius: 20px 20px 20px 3px;
}

#website-sigle-top-content-comment-a span {
    width: 70px;
    /* left: 30%;
    border-radius: 20px 20px 20px 3px; */
}

#website-sigle-top-content-menu-a span {
    width: 130px;
    /* left: 40%;
    border-radius: 20px 20px 20px 3px; */
}

.website-sigle-top-content div a:hover span {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


#website-sigle-top-content-div-bottom {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 2px dashed var(--navcolor);
    padding-bottom: 22px;
}

#website-sigle-top-content-div-bottom span {
    padding: 8px 10px;
    font-size: 13px;
    border-radius: .5rem;
    font-family: lalezar;
    background-color: #d4d5dd4d;
    color: #7f8198;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    pointer-events: none;
}

#website-sigle-top-content-div-bottom span i {
    font-size: 15px;
    /* transform: translateY(2px); */
}


.website-sigle-content {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 30px;
}

.website-sigle-content-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
}

.website-sigle-content-right-div {
    width: 100%;
    padding: 30px 30px 50px 30px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    position: relative;
    background-color: var(--white);
}

.website-sigle-content-right-div h2 {
    font-family: lalezar;
    font-size: 25px;
    color: #4A6DFF;
}

.website-sigle-content-right-div p {
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor2);
    text-align: justify;
    line-height: 35px;
}

.website-sigle-content-left {
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    gap: 30px;
}

.website-sigle-content-left-div {
    width: 100%;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    background-color: var(--white);
}

.website-sigle-content-left-1 h1 {
    font-family: lalezar;
    font-size: 30px;
    color: #3F4264;
}

.website-sigle-content-left-1 h1 span {
    font-size: 18px;
    color: #3F426490;
}

.website-sigle-content-left-div-discount {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-10px) translateY(-11px) rotate(-35deg);
    font-size: 12px;
    width: 50px;
    border-radius: 10px;
    padding: 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4A6DFF;
    font-family: lalezar;
    color: var(--white);
}

.website-sigle-content-left-1 a {
    width: 100%;
    font-family: lalezar;
    font-size: 20px;
    background-color: #4A6DFF;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    border-radius: 15px;
}

.website-sigle-content-right-1 {
    position: relative;
    max-height: 400px;
    overflow: hidden;
    transition: .3s;
}

#website-sigle-content-right-shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0px;
    box-shadow: 0 -50px 100px 100px #ffffff;
    background-color: var(--white);
    z-index: 1;
}

.website-sigle-content-right-1 button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    font-family: lalezar;
    font-size: 14px;
    background-color: #E9EAEE;
    color: #3f4264;
    border-radius: 12px;
    border: 1px solid var(--navcolor);
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .3s;
}

.website-sigle-content-right-1 #website-sigle-content-button-unshow-span {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 10px;
    font-family: lalezar;
    font-size: 14px;
    background-color: #E9EAEE;
    color: #3f4264;
    border-radius: 12px;
    border: 1px solid var(--navcolor);
    cursor: pointer;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .3s;
    display: none;
}

.website-sigle-content-right-1 button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.website-sigle-content-right-1 button:hover {
    background-color: #F3F4F6;
}

.website-sigle-content-right-1 a:hover {
    background-color: #F3F4F6;
}

.website-sigle-content-right-1-open {
    max-height: unset;
}

.website-sigle-content-right-1-open #website-sigle-content-button-unshow-span {
    display: flex;
}

.website-sigle-content-right-1-open #website-sigle-content-button-show-span {
    display: none;
}

.website-sigle-content-right-1-open #website-sigle-content-right-shadow {
    display: none;
}

#website-sigle-content-left-1-id-phone {
    display: none;
}


.website-sigle-content-right-back {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-evenly;
    gap: 20px;
    margin-top: 15px;
}

.website-sigle-content-tariff {
    width: 100%;
    height: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    padding: 0 15px 15px 15px;
    border-radius: 20px;
    background-color: var(--white);
    border: 1px solid var(--navcolor);
    box-shadow: 0px 10px 15px 5px var(--theme3);
    position: relative;
}

.website-sigle-content-tariff-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px dashed var(--navcolor);
    padding: 18px 12px 12px 12px;
    position: relative;
}

.website-sigle-content-tariff-title h3 {
    font-family: lalezar;
    font-size: 30px;
    color: #4A6DFF;
    /* text-shadow: 0 0px 15px #a1b4ff; */
}

.website-sigle-content-tariff-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.website-sigle-content-tariff-content ul {
    width: 100%;
    height: 100%;
    min-height: 70px;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.website-sigle-content-tariff-content ul li {
    font-family: vazir-light;
    font-size: 13px;
    color: var(--fontcolor2);
}

.website-sigle-content-tariff-discount {
    position: absolute;
    top: 10%;
    transform: translateY(-50%) rotate(-35deg);
    left: -30px;
    padding: 2px 12px 0px 12px;
    border-radius: 12px;
    background-color: #f43f5e;
    display: flex;
    align-items: center;
    justify-content: center;
    /* border: 1px solid var(--navcolor); */

    /* width: 40px;
    height: 40px; */
    border-radius: 50px;
}

.website-sigle-content-tariff-discount p {
    font-family: lalezar;
    font-size: 14px;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.website-sigle-content-tariff-discount p i {
    margin-top: -2px;
}

.website-sigle-content-tariff-discount.website-sigle-content-tariff-sell {
    left: unset;
    right: 5px;
    top: unset;
    transform: translateY(0);
    bottom: 100%;
    /* transform: rotate(35deg); */
    background-color: #4A6DFF;
    max-width: unset;
    padding: 12px 12px 11px 12px;

    border: none;
    width: auto;
    height: auto;
    border-radius: 15px 15px 0 0;
}

.website-sigle-content-tariff-discount.website-sigle-content-tariff-sell p {
    color: var(--white);
    /* flex-direction: column; */
    line-height: 20px;
    text-align: center;
}

.website-sigle-content-tariff-content form {
    width: 100%;
    min-height: 135px;
    padding-top: 15px;
    margin-top: 10px;
    border-top: 2px dashed var(--navcolor);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
}

.website-sigle-content-tariff-content form h4 {
    font-family: lalezar;
    font-size: 23px;
    color: #3F4264;
}

.website-sigle-content-tariff-content form h4 span {
    font-family: lalezar;
    font-size: 15px;
    color: #3F426470;
}

.website-sigle-content-tariff-content form h5 {
    font-family: lalezar;
    font-size: 16px;
    color: #3F426480;
    text-decoration: line-through;
    margin-bottom: -12px;
}

.website-sigle-content-tariff-content form button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background-color: #4A6DFF;
    border: none;
    border-radius: 12px;
    color: var(--white);
    font-family: lalezar;
    font-size: 17px;
    cursor: pointer;
}

.website-sigle-content-tariff-content form a#website-single-form-a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px;
    background-color: #4A6DFF;
    border: none;
    border-radius: 12px;
    color: var(--white);
    font-family: lalezar;
    font-size: 17px;
    cursor: pointer;
}

.website-sigle-content-tariff-content form a#website-single-form-a.website-add-cart-a-tariff {
    font-size: 15px;
    background-color: #e2ebf090;
    border: 1px solid #e2ebf0;
    color: var(--blue);
    padding: 17px 15px;
}

#website-sigle-content-comment-back {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#website-sigle-content-comment-back-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -102px;
}


.website-sigle-content-left-div.website-sigle-content-left-2 {
    flex-direction: row;
    justify-content: space-evenly;
    /* position: sticky; */
    /* top: -5px; */
    z-index: 2;
    /* box-shadow: 0px 8px 20px var(--theme3); */
    /* border: 1px solid var(--navcolor); */
    padding: 22px 0;
    /* background-color: var(--theme3); */
}

.website-sigle-content-left-2 a {
    font-family: lalezar;
    font-size: 16px;
    color: var(--fontcolor2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: .3s;
}

.website-sigle-content-left-2 a span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #4A6DFF80;
    transition: .3s;
}

.website-sigle-content-left-2 a:hover {
    color: #3f3f3f;
}

.website-sigle-content-left-2 a:hover span {
    background-color: #4A6DFF;
    box-shadow: 0 0 0px 3px #4A6DFF60;
}


.website-sigle-content-left-3-title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 2px dashed var(--navcolor);
    padding-bottom: 15px;
}

.website-sigle-content-left-3-title h2 {
    font-family: lalezar;
    font-size: 25px;
    color: #4A6DFF;
}

.website-sigle-content-left-3-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.website-sigle-content-left-3-content-div {
    width: 95%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    border-bottom: 1px solid #00000010;
    padding: 2px 0 12px 0;
    position: relative;
}

.website-sigle-content-left-3-div-img {
    width: 55px;
    height: 55px;
    min-width: 55px;
    min-height: 55px;
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0 0 0px 4px #4A6DFF70;
}

.website-sigle-content-left-3-div-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.website-sigle-content-left-3-content-div-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.website-sigle-content-left-3-content-div-text h3 {
    width: 100%;
    font-family: vazir-black;
    font-size: 15px;
    color: #4a4a4a;
    max-height: 20px;
    overflow: hidden;
    position: relative;
}

.website-sigle-content-left-3-content-div-text h3 span {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-family: vazir-light;
    font-size: 15px;
    color: var(--fontcolor3);
}

.website-sigle-content-left-3-content-div-text div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.website-sigle-content-left-3-content-div-text div h4 {
    font-family: lalezar;
    font-size: 16px;
    color: #3F4264;
    margin-right: auto;
}

.website-sigle-content-left-3-content-div-text div p {
    font-family: lalezar;
    font-size: 15px;
    color: #3F426480;
    text-decoration: line-through;
}

.website-sigle-content-left-3-content-div-text div span {
    font-family: vazir-black;
    font-size: 11px;
    color: var(--white);
    padding: 5px 8px 3px 9px;
    border-radius: 20px;
    background-color: #F43F5E;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-sigle-content-left-3-content-div a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}









/* -------------------------- */
/* ----- START SERVICES ----- */



.home-text-top-services {
    gap: 30px;
    margin-top: 40px;
    margin-bottom: 50px;
}

.home-text-top-services .service-home-div {
    gap: 20px;
    margin-top: 0px;
}

.home-text-top-services .service-div {
    box-shadow: unset;
}

.home-text-top-services .service-div:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 20px 5px #d4d5dd;
}

.home-text-top-services .service-content {
    justify-content: space-between;
    height: 100%;
}

.home-text-top-services .service-price-link {
    width: 100%;
}

.home-text-top-services .service-price-link a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
}


















/* ---------------------- */
/* ----- START CART ----- */

/* .blog-content.cart-back{
    margin-bottom: 100px;
} */
.cart-back .aside {
    min-width: 300px;
}

.aside-most-views.aside-back {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cart-aside-back-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.cart-aside-content-texts {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    padding: 15px 15px;
}

.cart-aside-content-texts div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.cart-aside-content-texts div h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: vazir-light;
    font-size: 13px;
    color: #00000090;
}

.cart-aside-content-texts div h3 i {
    width: 15px;
    color: #00000090;
    font-size: 16px;
}

.cart-aside-content-texts div h4 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-family: vazir-light;
    font-size: 13px;
    color: #00000099;
}

.cart-aside-content-texts div h4 span {
    font-family: vazir-light;
    font-size: 10px;
    color: #00000099;
}

.cart-aside-back-btn-back {
    width: 90%;
    border-top: 1px solid #00000015;
    padding: 12px 0 15px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.cart-aside-back-btn-back div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cart-aside-back-btn-back div h3 {
    font-family: lalezar;
    font-size: 23px;
    color: var(--fontcolor1);
    color: #4a6dff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.cart-aside-back-btn-back div h3 span {
    font-family: vazir-light;
    font-size: 12px;
    color: #00000080;
}

.cart-aside-back-btn-back div h4 {
    font-family: vazir-light;
    font-size: 13px;
    color: var(--fontcolor2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.cart-aside-back-btn-back a {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border-radius: 16px;
    background-color: #4A6DFF;
    color: var(--white);
    font-family: lalezar;
    font-size: 17px;
    transition: .3s;
    opacity: .8;
    box-shadow: 0 5px 10px #4A6DFF50;
}

.cart-aside-back-btn-back a:hover {
    opacity: 1;
    box-shadow: 0 8px 15px #4A6DFF80;
}

.cart-aside-back-btn-back form {
    width: 100%;
}

.cart-aside-back-btn-back button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    border-radius: 16px;
    background-color: #4A6DFF;
    color: var(--white);
    font-family: lalezar;
    font-size: 17px;
    transition: .3s;
    opacity: .8;
    box-shadow: 0 5px 10px #4A6DFF50;
    cursor: pointer;
    border: none;
}

.cart-aside-back-btn-back button:hover {
    opacity: 1;
    box-shadow: 0 8px 15px #4A6DFF80;
}




.cart-back.blog-content {
    max-width: 1100px;
}

.cart-back.blog-content .blog-content-back .blog-content-div .blog-content-div-img {
    width: 112px;
    min-width: 112px;
    height: 112px;
    min-height: 112px;
    border-radius: 15px;
}


.cart-back.blog-content .blog-content-back .blog-content-div {
    padding: 28px 36px;
}

.cart-back.blog-content .blog-content-div-text .blog-content-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.cart-back.blog-content .blog-content-div-text .blog-content-title a {
    color: #555775;
    cursor: pointer;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.cart-back.blog-content .blog-content-div-text .blog-content-title a h1 {
    color: #555775;
    transition: .3s;
}

.cart-back.blog-content .blog-content-div-text .blog-content-title a:hover {
    color: #2563EB;
    box-shadow: none;
    transform: translateY(0);
}

.cart-back.blog-content .blog-content-div-text .blog-content-title a:hover h1 {
    color: #2563EB;
}

.cart-back.blog-content .blog-content-div-text .blog-content-title h2 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    font-family: vazir-light;
    font-size: 15px;
    color: #6a6c87;
}

.cart-back.blog-content .blog-content-div .blog-content-div-text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}

.cart-price-back {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    padding: 0 10px 0 20px;
}

.cart-price-back h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: vazir-light;
    color: var(--fontcolor2);
    font-size: 15px;
}

.cart-price-back h3 div {
    text-decoration: line-through;
    padding-top: 3px;
}

.cart-price-back h3 span#cart-price-back-discount-span {
    padding: 7px 12px 5px 12px;
    border-radius: 12px;
    background-color: #f43f5e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: vazir-black;
    font-size: 12px;
    color: var(--white);
    gap: 5px;
    border-radius: 50px;
}

.cart-price-back h3 span i {
    margin-top: -2px;
}

.cart-price-back h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: lalezar;
    font-size: 24px;
    color: #4a6dff;
    gap: 5px;
}

.cart-price-back h2 span {
    font-family: vazir-black;
    color: #00000090;
    font-size: 13px;
}

.cart-back.blog-content .blog-content-back form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-back.blog-content .blog-content-back form button {
    font-size: 15px;
    color: crimson;
    border: 1px solid #00000015;
    background-color: transparent;
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    transition: .3s;
}

.cart-back.blog-content .blog-content-back form button:hover {
    background-color: #dc143c10;
    border-color: #dc143c10;
}

#phone-nav-cart-a-span-num {
    position: absolute;
    top: -7px;
    left: 0px;
    font-family: lalezar;
    font-size: 13px;
    color: #4A6DFF;
    background-color: #E5EAFF;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding-top: 1px;
}

.profile-websites-single-content-info-edit div input[type=number]::-webkit-outer-spin-button,
.profile-websites-single-content-info-edit div input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.profile-websites-single-content-info-edit div input[type=number][type=number] {
    -moz-appearance: textfield;
}














/* ------------------ */
/* ----- FOOTER ----- */

.footer-top {
    position: absolute;
    bottom: 0;
    left: 0;
    margin-bottom: 349px;
    width: 100%;
    height: 130px;
}

.footer-top-animation {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: 130px;
}

.dark-body .footer-top-animation .wave {
    /* background: url(../images/images-dark.png); */
    background: transparent;
}

.footer-top-animation .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background: url(../images/images2.png);
    background-size: 1000px 100px;
}

.footer-top-animation .wave1 {
    animation: animefooter 20s linear infinite;
    z-index: 5;
    opacity: 1;
    animation-delay: 0s;
    bottom: 0;
}

.footer-top-animation .wave2 {
    animation: animefooter2 10s linear infinite;
    z-index: 4;
    opacity: 0.5;
    animation-delay: -5s;
    bottom: 10px;
}

.footer-top-animation .wave3 {
    animation: animefooter 20s linear infinite;
    z-index: 3;
    opacity: 0.2;
    animation-delay: -2s;
    bottom: 15px;
}

.footer-top-animation .wave4 {
    animation: animefooter2 5s linear infinite;
    z-index: 2;
    opacity: 0.7;
    animation-delay: -5s;
    bottom: 20px;
}

@keyframes animefooter {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 1000px;
    }
}

@keyframes animefooter2 {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: -1000px;
    }
}

.footer {
    width: 100%;
    height: 350px;
    background-color: var(--navcolor);
    position: relative;
    bottom: 0;
    display: flex;
    justify-content: center;
    color: var(--white);
    margin-top: 120px;
}

.back-footer {
    width: 100%;
    display: flex;
    justify-content: space-around;
    max-width: 1280px;
    padding: 20px 0;
    height: 100%;
    flex-wrap: wrap;
    margin: 0 10px;
}

.footer-div {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    max-width: 400px;
    /* background: var(--mainblack); */
}

.footer-div h1 {
    font-family: lalezar;
    font-size: 40px;
    color: var(--theme3);
    text-shadow: 0 5px 0px #3CB37150;
    text-align: center;
}

.footer-links {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
}

.footer-links a {
    font-size: 17px;
    font-family: vazir-black;
    color: var(--fontcolor2);
    margin: 0 3px;
    transition: 0.3s;
    border: 2px solid transparent;
    text-align: center;
}

.footer-links a:hover {
    color: var(--blue);
}

#footer-Copyright {
    font-size: 16px;
    color: var(--fontcolor3);
    font-family: sans-serif;
    pointer-events: none;
    text-align: center;
}

.footer-links span {
    width: 2px;
    height: 20px;
    background: var(--fontcolor3);
    margin: 0 5px;
    border-radius: 20px;
    opacity: 0.7;
}

#footer-m {
    width: 350px;
}

#footer-m div a {
    display: flex;
    align-items: center;
    color: var(--fontcolor2);
    font-size: 18px;
    font-family: lalezar;
    cursor: pointer;
    transition: 0.3s;
    transition: .3s;
}

#footer-m div a:hover {
    color: var(--blue);
}

#footer-m div a:hover i {
    box-shadow: 0 0 20px var(--blue);
    background-color: var(--blue);
    color: var(--white);
}

#footer-m div a i,
.footer-socialmedia i {
    font-size: 25px;
    width: 50px;
    height: 50px;
    background-color: #68686820;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 30px;
    color: var(--fontcolor1);
    transition: .3s;
}

#footer-m div a p:nth-child(1) {
    font-size: 20px;
}

#footer-m div a p:nth-child(2) {
    font-size: 15px;
}

.footer-div h2 {
    font-size: 35px;
    font-family: lalezar;
    color: var(--fontcolor1);
}

.footer-socialmedia {
    display: flex;
}

.footer-socialmedia a {
    cursor: pointer;
    transition: 0.3s;
}

.footer-socialmedia i {
    border-radius: 15px;
    margin: 0 15px;
    color: var(--fontcolor1);
}

.footer-socialmedia a:hover {
    color: var(--white);
}

.footer-socialmedia a:hover i {
    box-shadow: 0 0 20px var(--blue);
    background-color: var(--blue);
    color: var(--white);
}

.footer-div h1 span {
    color: var(--blue);
}

#footer-l p {
    font-size: 15px;
    text-align: justify;
    text-justify: inter-word;
    font-family: vazir-black;
    color: var(--fontcolor2);
}




@media screen and (max-width: 1070px) {
    .footer {
        height: 550px;
    }

    .footer-div {
        margin: 20px 10px;
        min-height: 200px;
    }

    .footer-top {
        margin-bottom: 549px;
    }

    #footer-r {
        order: 3;
    }

    #footer-m {
        order: 2;
    }

    #footer-l {
        order: 1;
    }

    #footer-Copyright {
        text-align: center;
    }
}

@media screen and (max-width: 810px) {
    .footer {
        height: 900px;
    }

    .footer-div {
        margin: 20px 10px;
        min-height: 200px;
    }

    .footer-top {
        margin-bottom: 899px;
    }

    #footer-m {
        width: 100%;
        margin-right: -50px;
    }

    .footer-links {
        flex-wrap: wrap;
    }

    #footer-Copyright {
        font-size: 15px;
    }
}

@media screen and (max-width: 450px) {
    .back-footer {
        flex-wrap: wrap;
        height: auto;
        align-items: center;
        padding: 0 20px;
    }

    .footer-lmr {
        margin: 10px 0;
        min-width: 160px;
    }

    .footer-l {
        margin-top: -70px;
    }

    .footer-title-flwus h2 {
        font-size: 19px;
        margin-right: 24px;
        opacity: 0.8;
    }
}






/* ------ Start Login ------ */
.login {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form {
    width: 330px;
    background: var(--white);
    height: 300px;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 0 50px var(--blue);
}

.login-form div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-form div input {
    width: 200px;
    height: 30px;
    font-family: sans-serif;
    font-size: 15px;
    background: transparent;
    outline: none;
    border: none;
    box-shadow: 0 0 5px #969696;
    border-radius: 100px;
    padding: 10px 20px;
}

.login-form div label,
.login-section-incorrect div label {
    font-size: 18px;
    font-family: vazir-light;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form input[type="submit"],
.login-section-incorrect input[type="submit"] {
    border: none;
    font-size: 24px;
    font-family: vazir-light;
    padding: 3px 0;
    border-radius: 3px 3px 15px 15px;
    cursor: pointer;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-form input[type="submit"]:hover,
.login-section-incorrect input[type="submit"]:hover {
    background: var(--lightblue1);
    color: var(--white);
}

.login-section {
    height: 200px;
}

#admin-login-section {
    width: auto;
    height: 380px;
    background-color: #111827;
}

#admin-login-section h1 {
    text-align: center;
    font-family: vazir-regular;
    color: #0fbcf9;
}

#admin-login-section label {
    color: var(--white);
}

#admin-login-section div input {
    color: var(--white);
}

#admin-body {
    background-color: var(--black);
}

.g-recaptcha {
    margin-bottom: -40px;
    border-radius: 15px 15px 3px 3px;
    overflow: hidden;
    width: auto;
    position: relative;
}


/* ---------- ADMIN PANEL --------- */
#admin-body {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    min-height: 100vh;
    background-color: var(--bodyblack);
}

#admin-menu {
    width: 300px;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    background-color: #111827;
    color: var(--white);
    /* padding-top: 4400px; */
    position: fixed;
    z-index: 100;
}

.admin-menu .admin-menu-title a {
    font-family: vazir-regular;
    font-size: 16px;
    color: var(--white);
    width: 100%;
    text-align: center;
    line-height: 100px;
    text-shadow: 0 0 20px #b3b5f1, 0 0 15px #8689ec, 0 0 10px #686ce0, 0 0 5px #4c50cc;
}

.admin-menu-ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* gap: 10px; */
}

.admin-menu-ul li {
    width: 100%;
    min-height: 70px;
    /* border-top: 1px solid #e9e9e920; */
    /* background-color: var(--green); */
    position: relative;
}




#admin-menu-ul-a {
    width: 100%;
    padding: 0px 20px;
    height: 70px;
    color: #e0e0e0;
    font-family: vazir-light;
    font-size: 20px;
    /* background-color: var(--lightblue2); */
    position: absolute;
    display: flex;
    align-items: center;
    gap: 20px;
    border-right: 5px solid transparent;
    border-left: 5px solid #111827;
    border-radius: 5px;
    transition: .3s;
    cursor: pointer;
}

#admin-menu-ul-a:hover {
    gap: 30px;
    border-right: 5px solid #3071e7;
    border-radius: 5px;
    background-color: #242d41;
    color: #b8c6e7;
}

#admin-menu-ul-a i {
    transition: margin .3s, transform .7s;
}

#admin-menu-ul-a:hover i {
    margin-right: 10px;
    /* transform: rotate(-360deg); */
}

.admin-menu-ul-div {
    background-color: #2a3244;
    margin: 10px 15px;
    margin-top: 80px;
    border-radius: 7px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
    overflow: hidden;
}

.admin-menu-ul-div::before {
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    border-radius: 3px;
    transform: rotate(45deg);
    top: -7px;
    right: 15px;
    z-index: -1;
    background-color: #2a3244;
}

.admin-menu-ul-div a {
    font-family: vazir-light;
    color: #dee8f7;
    font-size: 16px;
    width: 100%;
    line-height: 50px;
    padding: 0 25px 0 0;
    transition: .3s;
}

.admin-menu-ul-div a:hover {
    background-color: #404b61;
    padding: 0 35px 0 0;
}

.admin-menu-ul-div {
    height: 0;
    margin: 0;
    transition: .3s;
}

.admin-menu-a-contact-open~.admin-menu-ul-div {
    height: auto;
    margin: 10px 15px;
    margin-top: 80px;
}

#admin-menu-ul-a .fa-caret-left {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    transition: .3s;
    color: #56627a;
}

#admin-menu-ul-a.admin-menu-a-contact-open .fa-caret-left {
    transform: translateY(-50%) rotate(-90deg);

}




.admin-nav {
    width: 100%;
    height: 70px;
    background-color: var(--navcolor);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 30px;
    gap: 20px;
    position: fixed;
    z-index: 99;
    box-shadow: 0 0 10px #00000035;
    border-bottom: 3px solid #556280;
}

.admin-nav-user .admin-nav-user-btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    cursor: pointer;
    background-color: var(--white);
}

.admin-nav-user .admin-nav-user-btn img {
    width: 103%;
    height: 103%;
    object-fit: cover;
}

.admin-nav-notif-btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border: 1px solid #d6d6d6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #494949;
    cursor: pointer;
}

.admin-nav-notif-btn a {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #494949;
    justify-content: center;
}

.admin-nav-div {
    position: relative;
}

.admin-nav-div-child-back {
    min-width: 250px;
    min-height: auto;
    left: -40px;
    padding: 15px 20px 0 20px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 130%;
    transition: .4s;

}

.admin-nav-div-child-back ul {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;

}

.admin-nav-div-child-back ul li {
    width: 100%;
    height: auto;
    list-style: none;
}

.admin-nav-div-child-back ul li a {
    width: 100%;
    margin: 0 auto;
    height: 55px;
    display: flex;
    align-items: center;
    padding: 0 20px;
    font-family: vazir-light;
    font-size: 14px;
    justify-content: flex-end;
    color: #565656;
    transition: .3s;
    border-bottom: 1px solid #f6f6f6;
}

.admin-nav-div-child-back ul li:last-child a.admin-nav-div-last-child-a {
    border-bottom: 1px solid transparent;
    background-color: #f8f8f8;
    color: crimson;
}

.admin-nav-div-child-back ul li a i {
    font-size: 19px;
    width: 35px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transition: .3s;
}

.admin-nav-div-child-back ul li a:hover {
    background-color: #f8f8f8;
    padding-right: 25px;
}

.admin-nav-div-child-back ul li a:hover i {
    width: 40px;
}

.admin-nav-div-child {
    width: 100%;
    height: auto;
    min-height: 100px;
    border-radius: 15px;
    background-color: var(--white);
    box-shadow: 1px 3px 15px 2px #cecece;
    overflow: hidden;
}

.admin-nav-div-child::before {
    content: '';
    width: 15px;
    height: 15px;
    border-radius: 3px;
    position: absolute;
    top: 9px;
    left: 53px;
    background-color: var(--white);
    transform: rotate(45deg);
    z-index: -1;
}

.admin-nav-div:hover .admin-nav-div-child-back {
    opacity: 1;
    visibility: visible;
    top: 100%;

}



#admin-menu::-webkit-scrollbar {
    width: 12px;
}

#admin-menu::-webkit-scrollbar-track {
    background-color: #111827;
}

#admin-menu::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #111827;
    box-shadow: none;
    cursor: pointer;
}

#admin-menu:hover::-webkit-scrollbar-thumb {
    background-color: #343d52;
}

#admin-body::-webkit-scrollbar {
    width: 12px;
}

#admin-body::-webkit-scrollbar-track {
    background-color: #24273a;
}

#admin-body::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: var(--green);
    box-shadow: none;
    cursor: pointer;
}




/* --------- admin content -------- */
.admin-content {
    width: 100%;
    min-height: 100vh;
    padding: 90px 320px 50px 20px;
    background-color: var(--bodycolor);
}

.admin-content-back {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.admin-content-title h1 {
    font-family: vazir-extrabold;
    font-size: 30px;
    color: #353535;
}

.admin-dashboard-header {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
}

.admin-dashboard-header-link {
    height: 150px;
    background-color: var(--white);
    border-radius: 15px;
    box-shadow: 0 0 15px 1px #d0d0d0;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10%;
}

.admin-dashboard-header-link .header-link-img img {
    width: 100px;
}

.admin-dashboard-header-link .header-link-contnet {
    font-family: vazir-light;
    font-size: 20px;
    color: #2c2c2c;
}

.admin-dashboard-header-link .header-link-contnet p {
    font-family: vazir-light;
    font-size: 16px;
    color: #6a6a6a;
    margin-top: -5px;
}

.admin-dashboard-table {
    width: 100%;
    display: flex;
    flex-direction: column;
    border-radius: 15px 15px 7px 7px;
    background-color: var(--white);
    box-shadow: 0 0 15px 1px #d0d0d0;
    min-height: 400px;
    overflow: hidden;
    border-bottom: 5px solid #3a4764;
}

.admin-dashboard-table-header {
    width: 100%;
    display: flex;
    height: 80px;
    border-bottom: 1px solid #e1e1e1;
    background-color: #3a4764;
    padding: 0 30px;
    align-items: center;
    gap: 20px;
}

.admin-dashboard-table-header div {
    border-left: 1px solid #e6e6e6;
    font-family: vazir-light;
    font-size: 17px;
    color: #f0f0f0;
    padding: 5px 0;
}

.admin-dashboard-table-header div:last-child {
    border-left: 1px solid transparent;
}

.dashboard-table-header-name {
    width: 30%;
}

.dashboard-table-header-phone {
    width: 15%;
}

.dashboard-table-header-topic {
    width: 20%;
}

.dashboard-table-header-txt {
    width: 35%;
}


.admin-dashboard-table-content-back {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;

}

.dashboard-table-header-name {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dashboard-table-header-name img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    border-radius: 50%;
    transition: .2s;
    background-color: var(--white);
    opacity: .8;

}

.admin-dashboard-table-content {
    width: 100%;
    display: flex;
    min-height: 70px;
    border-bottom: 1px solid #e1e1e1;
    padding: 0 30px;
    align-items: center;
    gap: 20px;
    font-family: vazir-light;
}

.dashboard-table-content-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
}

.admin-dashboard-table-content div {
    border-left: 1px solid #e6e6e6;
    font-family: vazir-light;
    font-size: 17px;
    color: #525252;
    padding: 5px 0;
}

.admin-dashboard-table-content div:last-child {
    border-left: 1px solid transparent;
}

.dashboard-table-content-name img {
    width: 45px;
    height: 45px;
    object-fit: cover;
    opacity: .9;
    border-radius: 50%;
    transition: .2s;
}

.admin-dashboard-table-content:hover .dashboard-table-content-name img {
    opacity: 1;
}

.dashboard-table-content-name {
    width: 30%;
}

.dashboard-table-content-phone {
    width: 15%;
}

.dashboard-table-content-topic {
    width: 20%;
}

.dashboard-table-content-txt {
    width: 35%;
}

.dashboard-table-content-txt p {
    padding: 10px 0;
    font-size: 15px;
    color: #6a6a6a;
    text-align: justify;
}

#dashboard-table-content-txt-links {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

#dashboard-table-content-txt-a {
    font-size: 25px;
    color: #6c7ee4;
    margin: 0 2px;
}


#home-admin-edit-web-link-back {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

#home-admin-edit-web-link-back label {
    font-family: vazir-light;
    font-size: 18px;
    color: #6166f2;
    margin-bottom: -10px;
    margin-top: 10px;
}

.admin-home-content {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 0 15px #cecece;
    overflow: hidden;
    padding: 20px 25px;
    background-color: var(--white);
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.admin-home-content-name,
.admin-home-content-name form {
    width: 100%;
    min-height: 130px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: 50px;
}

.admin-content-name-inputs {
    width: 40%;
    min-width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
}

.admin-content-name-inputs input {
    border: 1px solid #cecece;
    font-family: vazir-light;
    font-size: 20px;
    padding: 10px 15px;
    border-radius: 10px;
    outline: none;
    background-color: transparent;
    transition: .3s;
}

.admin-content-name-inputs input:focus {
    border-right: 7px solid #8495ba;
    box-shadow: 0 0 10px #cccccc;
}

.admin-content-name-inputs a {
    font-family: vazir-light;
    font-size: 20px;
    color: #3e4f72;
    background-color: #e3ebff;
    border: 1px solid #3e4f72;
    border-radius: 12px;
    padding: 10px 30px;
    transition: .3s;
}

.admin-content-name-inputs a:hover {
    background-color: #3e4f72;
    color: #ffffff;
}

.admin-content-name-buttons {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-content-name-buttons button {
    border: 1px solid #cecece;
    background-color: #384563;
    font-family: vazir-light;
    color: var(--white);
    font-size: 20px;
    padding: 12px 45px;
    border-radius: 15px;
    cursor: pointer;
}


.admin-home-content-txt {
    padding: 20px;
}

.admin-home-content-txt form {
    flex-direction: column;
}

.admin-home-content-txt form .admin-content-name-buttons {
    width: 100%;
}

.admin-home-content-txt form .admin-content-name-inputs {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 30px;
    padding: 10px 0;
}

#admin-content-name-textarea {
    width: 80%;
    height: 200px;
    border-radius: 15px;
    background-color: var(--white);
    border: 1px solid #e1e1e1;
    resize: vertical;
    outline: none;
    padding: 12px 15px;
    color: #545454;
    font-family: vazir-light;
    font-size: 16px;
}

.admin-content-txt-name-inputs {
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 80px;
}







.admin-work-samples .admin-content-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 30px;
}

.admin-work-samples .admin-content-title a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 55px;
    background-color: #4a5c82;
    color: var(--white);
    font-family: vazir-light;
    font-size: 16px;
    border-radius: 12px;
    transition: .3s;
}

.admin-work-samples .admin-content-title a:hover {
    box-shadow: 0 0 20px 2px #adc2e9;
}

.admin-work-samples .dashboard-table-content-name {
    width: 25%;
}

.admin-work-samples .dashboard-table-content-phone {
    width: 30%;
    overflow: hidden;
}

.admin-work-samples .dashboard-table-content-txt {
    width: 35%;
}

#dashboard-table-header-txt-edit {
    width: 5%;
    min-width: 70px;
    position: relative;
}

#dashboard-table-header-txt-delete {
    width: 5%;
    min-width: 70px;
    position: relative;
}

#dashboard-table-header-txt-edit a {
    font-size: 25px;
    color: #0dc981;
    position: absolute;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
}

#dashboard-table-header-txt-delete a {
    font-size: 25px;
    color: crimson;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
}


.admin-work-samples .dashboard-table-header-name {
    width: 25%;
}

.admin-work-samples .dashboard-table-header-phone {
    width: 30%;
}

.admin-work-samples .dashboard-table-header-txt {
    width: 35%;
}

.admin-contact-edit {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 15px;
    border-radius: 15px;
    background-color: var(--white);
    font-family: vazir-light;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px #dadada;
}

.admin-contact-edit form {
    width: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
}

.admin-contact-edit form .contact-admin-form-input-back {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.contact-admin-form-input-back label {
    min-width: 120px;
    font-size: 17px;
    color: #363636;
}

.contact-admin-form-input-back input {
    width: 100%;
    border: 1px solid #d3d3d3;
    border-radius: 12px;
    padding: 12px 15px;
    font-family: vazir-light;
    outline: none;
    font-size: 15px;
    transition: .3s;
}

.contact-admin-form-input-back input:focus {
    border-right: 6px solid var(--green);
    box-shadow: 0 0 10px #c9c9c9;
}

.contact-form-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form-submit button {
    font-family: vazir-light;
    font-size: 18px;
    border-radius: 12px;
    border: 1px solid #dcdcdc;
    cursor: pointer;
    background-color: #d8e1f7;
    padding: 10px 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s;
}

.contact-form-submit button:hover {
    background-color: var(--green);
    color: var(--white);
    border-color: var(--green);
}

.admin-contact .contact-table-header-eye {
    width: 5%;
    min-width: 70px;
}

.admin-contact .contact-table-header-eye a {
    color: var(--green);
    font-size: 25px;
    margin: 0 auto;
    margin-right: 10%;
}

.admin-contact .dashboard-table-header-name,
.admin-contact .dashboard-table-content-name {
    width: 25%;
}

#order-view-message::-webkit-scrollbar {
    width: 10px;
    z-index: 101;
}

#order-view-message::-webkit-scrollbar-track {
    z-index: 101;
    background-color: transparent;
}

#order-view-message::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: var(--green);
    z-index: 101;
    box-shadow: inset 0 0 10px 1px #b6b8f2;
}

#order-view-message {
    z-index: 100;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    align-items: flex-start;
}

#order-view-message .contact-view-message-back {
    min-height: 100%;
    margin: 20px 0;
    width: 100vw;
    top: 0;
    max-width: 800px;
    justify-content: flex-start;
}

#order-view-message .order-options-back {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

#order-view-message .order-options-back p {
    border: none;
    box-shadow: none;
    font-size: 17px;
    width: 100%;
    max-width: 300px;
}

#order-view-message .order-options-back label {
    pointer-events: none;
}

#order-view-message p {
    border-color: #d9e2f4;
    box-shadow: 0 0 10px #e5eeff;
    color: #585858;
}

#order-view-message-web-text p {
    min-height: 100px;
    height: 100px;
}

#order-view-message-div {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

#order-view-message-div label {
    width: 160px;
}

#order-view-message-div p {
    border: none;
    box-shadow: none;
}









.contact-view-message {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    overflow-y: auto;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;

}

.contact-view-message-close-back {
    width: 100%;
    min-height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
    cursor: default;
    background-color: #00000050;
    backdrop-filter: blur(3px);
}

.contact-view-message-back {
    width: 100%;
    max-width: 600px;
    min-height: 500px;
    border-radius: 15px;
    background-color: var(--white);
    box-shadow: 0 0 10px #00000020;
    padding: 50px 30px 30px 30px;
    font-family: vazir-light;
    font-size: 17px;
    z-index: 2;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.contact-view-message-back a {
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--green);
    font-size: 20px;
}

.contact-view-message-div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.contact-view-message-back p {
    width: 100%;
    border: 1px solid #cacaca;
    background-color: transparent;
    box-shadow: 0 0 10px #e2e2e2;
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    border-radius: 12px;
    color: #303030;
    transition: .3s;
}

.contact-view-message-div-topic {
    width: 100%;
}

.contact-view-message-div-txt {
    width: 100%;
}

.contact-view-message-div-txt p {
    min-height: 200px;
    height: auto;
    text-align: justify;
    line-height: 30px;
    font-size: 15px;
    align-items: flex-start;
    padding: 12px 15px;
}

/* .add-work-samples textarea{
    min-height: 600px;
} */
#add-text-1-textarea {
    min-height: 200px;
    height: 200px;
    width: 100%;
}

#admin-add-work-samples-table-1 {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

#admin-add-work-samples-table-1 form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#admin-add-work-samples-table {
    max-width: 700px;
    margin: 0 auto;
    padding: 20px;
}

#admin-add-work-samples-table form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.add-work-samples-img {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.samples-status-back {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    background-color: #e4e4e4;
    padding: 12px 20px;
    border-radius: 12px;

}

.samples-radio-back {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
}

.samples-radio-back input {
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    position: absolute;
}

.samples-radio-back label {
    width: 100%;
    cursor: pointer;
    background-color: #d8d8d8;
    font-family: vazir-light;
    font-size: 18px;
    padding: 12px 20px;
    padding-right: 40px;
    border-radius: 12px;
    transition: .3s;
}

.samples-radio-back label:hover {
    background-color: #879cc7;
    color: var(--white);
}

.samples-radio-back input:checked~label {
    background-color: #6e81a9;
    color: var(--white);
}

.add-work-samples-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.add-work-samples-submit button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 100px;
    border: none;
    font-family: vazir-light;
    color: var(--white);
    border-radius: 12px;
    font-size: 19px;
    background: linear-gradient(130deg, var(--lightblue1), var(--green));
    cursor: pointer;
}








#custom-file-input1::-webkit-file-upload-button {
    visibility: hidden;
}

#custom-file-input1 {
    width: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -3px 0 0 0;
}

#custom-file-input1::before {
    content: 'افزودن عکس  + ';
    display: block;
    background: #e2eaf8;
    border: 2px solid #b5b5b5;
    border-radius: 10px;
    width: 340px;
    height: 170px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 26px;
    font-family: vazir-light;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    transition: .3s;
}

#custom-file-input1:hover::before {
    background: #364361;
    color: var(--white);
}





.add-work-samples {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.add-work-samples input,
.add-work-samples textarea {
    width: 100%;
    font-family: vazir-light;
    font-size: 17px;
    padding: 10px 15px;
    border-radius: 12px;
    background-color: transparent;
    border: 1px solid #d5d5d5;
    outline: none;
    transition: .3s
}

.add-work-samples input:focus {
    border-right: 6px solid #8ca2d3;
    box-shadow: 0 0 10px #d8d8d8;
}

.add-work-samples textarea {
    resize: none;
    height: 200px;
}

.contact-view-message-back#sample-edit-photo-back {
    min-height: 350px;
    max-width: 440px;
    padding: 10px;
}

.contact-view-message-back form {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.contact-view-message-back form button {
    width: 200px;
    padding: 15px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    font-size: 17px;
    font-family: vazir-light;
    font-weight: 600;
    cursor: pointer;
    background-color: #3071e7;
    color: var(--white);
    border: none;
}

#edit-work-samples-div-img {
    width: 340px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d1dbf5;
    border: 2px solid #5a678b;
    color: #3d4b70;
    font-size: 25px;
    font-weight: 700;
    font-family: vazir-light;
    border-radius: 15px;
}

#sample-table-trash-btn {
    font-size: 25px;
    color: crimson;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
    border: none;
    background-color: transparent;
    cursor: pointer;
}




.edit-learn-div-img#edit-work-samples-div-img {
    width: 550px;
    margin: 0 auto;
}

.add-learn-img #custom-file-input1 {
    width: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}

.add-learn-img #custom-file-input1::before {
    content: 'افزودن عکس  + ';
    display: block;
    background: #e2eaf8;
    border: 2px solid #b5b5b5;
    border-radius: 10px;
    width: 540px;
    height: 170px;
    outline: none;
    white-space: nowrap;
    -webkit-user-select: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 26px;
    font-family: vazir-light;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666666;
    transition: .3s;
}

.add-learn-img #custom-file-input1:hover::before {
    background: #364361;
    color: var(--white);
}

.contact-view-message {
    z-index: 10;
}


.learn-section-back-single {
    width: 92%;
    max-width: 1100px;
    display: flex;
    flex-direction: column;
}

.learn-single-top {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 60px;
    gap: 30px;
}

.learn-single-top-img {
    width: 100%;
    max-width: 550px;
    max-height: 350px;
    overflow: hidden;
    border-radius: 25px;
}

.learn-single-top-img img {
    width: 100%;
    object-fit: cover;
}

.learn-single-top-txt {
    width: 100%;
    max-width: 800px;
    display: flex;
    flex-direction: column;
    font-family: vazir-light;
}

.learn-single-top-txt-link {
    margin-top: -20px;
    margin-bottom: 30px;
    margin-right: -50px;
    display: flex;
    align-items: center;
    color: #acacac;
    font-size: 10px;
    gap: 10px;
}

.learn-single-top-txt-link i {
    margin-top: -2px;
    display: flex;
    align-items: center;
    color: #bdbdbd;
    font-size: 10px;
    gap: 10px;
}

.learn-single-top-txt-link a {
    font-size: 14px;
    font-family: vazir-regular;
    color: #979797;
}

.learn-single-top-txt h1 {
    max-width: 80%;
    font-size: 35px;
    color: #4b4b4b;
    font-family: vazir-extrabold;
    margin-bottom: 30px;
    line-height: 53px;
    word-spacing: -5px;
}

.learn-single-top-txt h3 {
    max-width: 100%;
    font-size: 24px;
    color: #a89ff3;
    font-family: vazir-extrabold;
    margin-bottom: 10px;
    margin-top: 10px;
}

.learn-single-top-txt p {
    max-width: 90%;
    font-size: 17px;
    color: #666666;
    line-height: 30px;
    text-align: justify;
    font-family: vazir-light;
}


.learn-single-bottom {
    font-size: 16px;
    font-family: vazir-light;
    text-align: justify;
    line-height: 30px;
    color: #505050;
}

.learn-single-bottom p {
    font-family: vazir-light;
    text-align: justify;
}

.learn-single-bottom h1,
.learn-single-bottom h2,
.learn-single-bottom h3 {
    margin: 20px 0;
}




.admin-learn-edit-text {
    width: 100%;
    padding: 20px 30px;
    background-color: var(--white);
    box-shadow: 0 0 10px #d5d5d5;
    border-radius: 20px;
}

.admin-learn-edit-text form {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.admin-learn-edit-text form input {
    width: 100%;
    padding: 12px 20px;
    border-radius: 12px;
    border: 1px solid #c9c9c9;
    font-size: 17px;
    font-family: vazir-light;
    margin-bottom: 20px;
    outline: none;
    color: #767676;
}

.admin-learn-edit-text form label {
    font-size: 16px;
    font-family: vazir-regular;
    color: #969696;
    margin-bottom: 10px;
}

.admin-learn-edit-text-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.admin-learn-edit-text-submit button {
    width: 200px;
    padding: 12px 0;
    font-size: 20px;
    font-family: vazir-light;
    background-color: #738cc0;
    border: none;
    color: var(--white);
    border-radius: 12px;
    cursor: pointer;
    margin-top: 10px;
    transition: .3s;
}

.admin-learn-edit-text-submit button:hover {
    background-color: #6376a0;
}





#add-work-team-links-back {
    flex-direction: row;
    gap: 0;
    justify-content: space-between;
}

.team-link-back {
    position: relative;
    width: 31%;
    overflow: hidden;
    border-radius: 12px;
}

.team-link-back input {
    padding-left: 60px;
    text-align: left;
}

.team-link-back label {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: #d8d8d8;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: vazir-light;
    font-size: 16px;
    transition: .2s;
}

.team-link-back input:focus~label {
    background-color: #8ca3ed;
    color: var(--white);
}

.team-link-back input::-webkit-outer-spin-button,
.team-link-back input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}





.admin-texts-back {
    width: 100%;
    border-radius: 20px;
    background-color: var(--white);
    box-shadow: 0 0 15px #dadada;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-texts-back form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 150px;
    padding: 20px 30px;
    font-family: vazir-light;
    font-size: 19px;
}

.admin-texts-back form textarea {
    width: 100%;
    padding: 12px 15px;
    font-family: vazir-light;
    font-size: 16px;
    outline: none;
    background-color: var(--white);
    border: 1px solid #e8e8e8;
    border-radius: 13px;
    color: #747474;
}

.admin-texts-back form input {
    width: 100%;
    padding: 12px 15px;
    font-family: vazir-light;
    font-size: 17px;
    outline: none;
    background-color: var(--white);
    border: 1px solid #e8e8e8;
    border-radius: 13px;
    color: #747474;
}

.admin-texts-back form label {
    margin: 25px 0 15px 0;

}

.admin-texts-back form label:nth-child(1) {
    margin: 0px 0 15px 0;
    margin-top: 0;
}

.admin-texts-back form button {
    width: 220px;
    padding: 12px 15px;
    font-family: vazir-light;
    font-size: 18px;
    outline: none;
    background-color: #4f5f83;
    border: 1px solid #e8e8e8;
    border-radius: 13px;
    color: var(--white);
    margin-top: 30px;
    margin-right: auto;
    cursor: pointer;
}


#form-about-text label {
    font-family: vazir-regular;
    font-size: 18px;
    color: #505050;
    margin-left: auto;
    margin-right: 5px;
    margin-bottom: -10px;
    margin-top: 10px;
}

#form-about-text label:nth-child(1) {
    margin-top: 0px;
}




/* ----- Admin User ----- */
.admin-user {
    display: flex;
    align-items: flex-start;
    /* justify-content: center; */
}

.admin-cart {
    width: 400px;
    height: 450px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: 3px 6px 15px #96969690;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 20px 0;
}

.admin-cart-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: vazir-extrabold;
    font-size: 18px;
    font-weight: normal;
    color: var(--black);
}

.admin-cart-title img {
    width: 80px;
    margin-bottom: 10px;
}

.admin-cart-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 200px;
    font-family: vazir-light;
    font-size: 20px;
}

.admin-cart-content div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 300px;
}

.admin-cart-content .admin {
    width: 200px;
    height: 50px;
    background: var(--bodycolor);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 15px;
    border-radius: 10px;
    color: var(--green);
    transition: .3s;
}

.admin-cart-content .admin:hover {
    box-shadow: 3px 5px 5px #4e4e4e30;

}

.admin-cart-content .password button {
    padding: 12px 15px;
    border: none;
    background-color: var(--bodycolor);
    color: var(--green);
    border-radius: 10px;
    font-size: 18px;
    font-family: vazir-regular;
    transition: .3s;
    cursor: pointer;
}

.admin-cart-content .password button:hover {
    background-color: var(--green);
    color: var(--white);
    box-shadow: 0px 0px 10px var(--lightblue1);
}

.change_password {
    height: 250px;
    display: none;
}

.change_password form {
    width: 370px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100%;
    margin-top: -10px;
}

.change_password form div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.change_password form div label {
    font-size: 16px;
    font-family: vazir-light;
    color: #777777;

}

.change_password form div input {
    padding: 10px 12px;
    width: 220px;
    font-size: 16px;
    font-family: vazir-regular;
    border: none;
    outline: none;
    box-shadow: 1px 3px 10px #dbdbdb;
    border-radius: 12px;
    text-align: left;
    background-color: var(--white);
}

#change-password-btn {
    justify-content: space-around;
}

#change-password-btn button {
    /* width: 100px; */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-family: vazir-light;
    font-size: 19px;
    border-radius: 12px;
    cursor: pointer;
    margin-top: 20px;
}

#save-btn {
    width: 170px;
    background: var(--green);
    color: var(--white);
    padding: 12px 30px;

}

#cancel-btn {
    width: 100px;
    color: crimson;
    background-color: #00000010;
}

.edit-btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--mainwhite);
    background: #00d6ab;
    font-size: 20px;
    border: none;
    cursor: pointer;
}

.admin-login-notif {
    width: 400px;
    font-size: 18px;
    font-family: vazir-light;
    font-weight: normal;
    height: 60px;
    background-color: #5b6e97;
    border-radius: 15px;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    z-index: 100;
}

.login-section-incorrect {
    box-shadow: 0 0 50px crimson;

}

#admin-login-section.login-section-incorrect h1 {
    color: crimson;
}

.admin-login-notif#admin-login-notif-succes {
    background-color: #00caa2;
}




















/* ---------- START NEW ADMIN ---------- */

#admin {
    background-color: var(--admin-bg-1);

    .profile-menu-back{
        background-color: var(--admin-bg-2);
        border: 1px solid var(--admin-border-color);
    }
}










































/* ---------- MEDIA ---------- */


@media screen and (max-width:1100px) {
    #menu-navbar-icon {
        display: flex;
    }

    .div-nav-ul-back {
        display: none;
    }

    .nav-order-btn-right-a span {
        display: none;
    }

    .nav-order-btn-right-a {
        width: 53px;
        height: 53px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #circle-id-1 {
        display: none;
    }

    #service-class .service-home-div {
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    .home-text-top-services .service-home-div {
        gap: 10px;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    #top-services .service-home-div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        padding-top: 60px;
        padding-bottom: 20px;
        margin-top: -10px;
    }

    #top-services .service-div {
        min-width: 300px;
    }

    #top-services .service-home-div::-webkit-scrollbar {
        display: none;
    }

    #blog .service-home-div {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }

    #blog .service-content .service-text div {
        flex-wrap: wrap;
    }

    #blog .service-content .service-text div span {
        margin-right: auto;
    }

    .questions-back {
        flex-direction: column;
        align-items: center;
    }

    .questions-img {
        order: 0;
        top: unset;
        transform: translateY(0);
        position: relative;
        margin-bottom: 20px;
    }

    .questions-back-div {
        order: 1;
    }

    .blog-content-back,
    .blog-content-back.home {
        margin-top: 0;
    }

    .website-sigle-top {
        flex-direction: column;
    }

    .website-sigle-top-img {
        order: 0;
    }

    .website-sigle-top-content {
        order: 1;
    }

    .website-sigle-content-right-back {
        flex-wrap: wrap;
        gap: 50px 20px;
        padding: 20px 0 0 0;
    }

    .website-sigle-content-tariff {
        min-width: 250px;
        width: auto;
    }

    .cart-back.blog-content {
        max-width: 800px;
        flex-direction: column;
    }

    .cart-back.blog-content .blog-content-back {
        margin-bottom: 0;
        padding-bottom: 0;
        min-height: unset;
    }

    .cart-back .aside {
        min-width: none;
        max-width: unset;
        width: 100%;
    }

    .cart-aside-back-btn-back {
        width: 95%;
    }

    .profile-dashboard-back {
        flex-direction: column;
    }

    .profile-dashboard-div-left {
        min-width: unset;
        max-width: unset;
    }

    .profile-content-nav-right ul {
        gap: 0;
    }

    .profile-content-nav-right ul li a {
        padding: 10px 6px;
    }

    .profile-content-body-websites-div {
        padding: 15px 25px;
        gap: 20px;
    }

    .profile-body-websites-content-div {
        max-width: unset;
    }

    .profile-body-websites-content-end-div {
        width: 100%;
        position: relative;
    }

    .profile-body-websites-content {
        flex-direction: column;
        align-items: flex-start;

    }

    .profile-body-websites-content-end-div a {
        padding: 15px 20px;
        margin-right: auto;
        font-size: 16px;
    }

    .profile-body-websites-content-end-div a i {
        font-size: 15px;
    }

    .profile-content-body-website-single {
        flex-direction: column;
    }

    .profile-content-body-website-single .profile-menu#profile-websites-info-single-id {
        max-width: unset;
        position: relative;
        top: 0;
    }



    body#home-body {
        * {
            cursor: unset !important;
        }
        max-width: 100vw;
    }

    .cursor-dot,
    .cursor-outline {
        display: none;
    }

    .floating-shape.shape-10 {
        display: none;
    }

    .floating-shape.shape-5 {
        display: none;
    }





}

@media screen and (max-width:950px) {
    #home-banner .home-back {
        background: transparent;
    }

    #home-banner .home-back .home-content {
        flex-direction: column;
        padding: 20px 30px;
    }

    .home-txt {
        align-items: center;
    }

    .home-txt p {
        text-align: center;
        max-width: 500px;
        line-height: 30px;
    }

    #circle-id-2 {
        top: 220px;
        width: 0;
        height: 0;
        box-shadow: 0 0 200px 200px #3071e720;
        left: unset;
        right: 20vw;
    }

    #circle-id-1 {
        display: block;
        top: 75vh;
        width: 0;
        height: 0;
        box-shadow: 0 0 200px 200px #aec3d180;
        left: 20vw;
        right: unset;
    }

    #home-banner .home-back .home-txt h1 {
        text-align: center;
    }

    #home-text-top-div {
        flex-direction: column;
    }

    #home-text-top-div div,
    #home-text-top-div img {
        width: 95%;
    }

    #home-text-top-div img {
        order: 0;
    }

    #home-text-top-div div {
        order: 1;
    }

    .home-comments-back {
        flex-direction: column;
    }

    .home-comments-text {
        order: 0;
    }

    #home-slider-comments.slider {
        order: 1;
    }

    #home-banner .home-back .home-img {
        max-width: 400px;
    }

    #home-banner .home-back .home-img img {
        transform: scale(1);
    }

    .about-us-top {
        flex-direction: column;
    }

    .contact-us-section-back {
        flex-direction: column;
    }

    .contact-us-img {
        order: -1;
        min-height: 0;
        max-width: 600px;

    }

    .contact-us-contnet {
        width: 100%;
        padding: 0;
        max-width: 600px;
    }

    .contact-us-contnet-title {
        display: none;
    }

    #contact-us-contnet-title-phone {
        display: flex;
    }

    .contact-us-img-back {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30px;
    }

    .contact-us-img-back img {
        max-width: 400px;
    }

    #contact-us-content-link-back {
        display: flex;
    }

    .contact-us-img-link-back {
        display: none;
    }

    #contact-us-contnet-title-desktop {
        display: none;
    }

    .blog-content {
        flex-direction: column;
        align-items: center;
    }

    .aside {
        width: 100%;
        min-height: 0;
        margin-top: 20px;
    }

    .cart-back .aside {
        margin-top: 0px;
    }

    .blog-content-back {
        min-width: 0;
    }

    .blog-content {
        padding: 0 10px;
    }

    #blog-content-single .blog-content-div-img {
        min-height: 0;
    }

    .blog-content-back,
    .blog-content-back.home {
        min-height: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .websites-section {
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .websites-aside {
        max-width: unset;
        width: 80%;
    }

    .service-home-div {
        width: 95%;
    }

    .service-img a img {
        height: 180px;
    }

    .service-content {
        height: 100%;
    }

    .service-content .service-text {
        height: 100%;
    }

    .service-content .service-text div {
        margin-top: auto;
    }


    .website-sigle-content {
        flex-direction: column;
    }

    .website-sigle-content-left {
        max-width: none;
    }

    .website-sigle-content-left-1 {
        display: none;
    }

    #website-sigle-content-left-1-id-phone {
        display: flex;
    }





    .profile-back {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }

    .profile-menu {
        opacity: 0;
        visibility: hidden;
        position: fixed;
        max-width: unset;
        top: 0;
        right: 0;
        z-index: 101;
    }

    .profile-menu#profile-messages-list-users {
        opacity: 1;
        visibility: visible;
        position: unset;
        max-width: unset;
        top: unset;
        right: unset;
        z-index: unset;
    }

    .profile-menu.profile-menu-open-nav {
        opacity: 1;
        visibility: visible;
        justify-content: flex-start;
    }

    .profile-content-nav-left-div.profile-content-nav-left-div-menu {
        display: flex;
    }

    .profile-menu.profile-menu-open-nav~.profile-content .profile-content-nav-left-div.profile-content-nav-left-div-menu i.fa-bars {
        display: none;
    }

    .profile-menu.profile-menu-open-nav~.profile-content .profile-content-nav-left-div.profile-content-nav-left-div-menu i.fa-close {
        display: flex;
    }

    .profile-menu.profile-menu-open-nav .profile-menu-background div {
        opacity: 1;
    }

    .profile-menu-back {
        transform: translateX(150%);
        height: 100vh;
        overflow-y: auto;
        border-radius: 0px 0 0 0;
        transition: .3s;
        max-width: 300px;
    }

    .profile-menu.profile-menu-open-nav .profile-menu-back {
        transform: translateX(0);
    }

    .profile-menu-back::-webkit-scrollbar {
        width: 6px;
        height: 7px;
    }

    .profile-menu-back::-webkit-scrollbar-track {
        background-color: transparent;
    }

    .profile-menu-back::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: #4a6dff70;
    }


    .profile-menu-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
    }

    .profile-menu-background div {
        width: 100%;
        height: 100vh;
        background-color: #00000030;
        backdrop-filter: blur(10px);
        transition: .3s;
        opacity: 0;
    }

    .profile-content-body-website-single .profile-menu#profile-websites-info-single-id {
        opacity: 1;
        visibility: visible;
        z-index: 1;
    }

}

@media screen and (max-width:710px) {
    .navbar {
        padding: 15px 15px 0 15px;
    }

    #service-class .service-content .service-price {
        display: none;
    }

    #service-class .service-content {
        height: auto;
    }

    #service-class .service-content .service-text p {
        display: none;
    }

    #service-class .service-div {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .class-service-home-icon {
        padding: 0;
        width: auto;
    }

    .class-service-home-icon i {
        width: 60px;
        height: 60px;
        font-size: 24px;
    }

    #service-class .service-content .service-text h1 a {
        font-size: 17px;
    }

    #service-class .service-home-div {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }

    #top-services .service-div {
        min-width: 270px;
    }

    #home-map-middle {
        height: 80px;
    }

    .blog-content-div-nothing {
        padding: 30px 0;
    }

    .blog-content-div-nothing div {
        align-items: center;
    }

    .blog-content-div-nothing img {
        display: none;
    }


    .cart-back.blog-content .blog-content-back .blog-content-div {
        gap: 10px;
    }

    .cart-back.blog-content .blog-content-back .blog-content-div .blog-content-div-img {
        width: 100px;
        min-width: 100px;
        height: 100px;
        min-height: 100px;
    }

    .cart-back.blog-content .blog-content-div-text .blog-content-title a {}

    .cart-back.blog-content .blog-content-div-text .blog-content-title a h1 {
        font-size: 18px;
        line-height: 30px;
    }

    .cart-back.blog-content .blog-content-div-text .blog-content-title h2 {
        font-size: 13px;
    }

    .cart-price-back h2 {
        font-size: 20px;
    }

    .cart-price-back h3 {
        font-size: 14px;
    }

    .cart-price-back h3 span#cart-price-back-discount-span {
        font-size: 11px;
        padding: 5px 9px 3px 9px;
    }

    .profile-content-nav-right ul {
        display: none;
    }
}

@media screen and (max-width:644px) {

    .home-map-1 .home-map-left,
    .home-map-3 .home-map-left {
        display: none;
    }

    .home-map-2 .home-map-right,
    .home-map-4 .home-map-right {
        display: none;
    }

    .home-map-1 .home-map-right div,
    .home-map-3 .home-map-right div {
        width: 100%;
    }

    #home-map-middle {
        order: 0;
        height: 110px;
        margin-bottom: -47px;
    }

    .home-map-right {
        order: 1;
    }

    .home-map-all {
        gap: 30px;
    }

    .home-map-side {
        min-height: 160px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .home-map-bottom-text {
        width: auto;
        margin: 5px 50px 0 auto;
    }

    .home-text-top#home-map .home-title-div {
        width: 100%;
    }

    .home-text-top#home-map .home-title-div .home-title-div-text {
        align-items: flex-start;
    }

    #home-map #home-title-shape {
        display: block;
    }

    .home-title-div-text h1 {
        font-size: 25px;
    }

    .home-title-div-text p {
        font-size: 14px;
    }

    .service-home-title.home-title-div a {
        font-size: 14px;
    }

    #blog .service-home-div {
        gap: 15px;
    }

    .home-comments-text p {
        padding: 0 20px;
    }

    .contact-us-section-back {
        width: 100%;
    }

    .contact-us-contnet-form-name div {
        flex-direction: column;
        width: 100%;
    }

    .contact-us-contnet-form-name {
        width: 100%;
    }

    .contact-us-contnet-form form input {
        width: 100%;
        min-width: 100%;
    }

    .contact-us-location-div iframe {
        max-height: 500px;
        margin-top: 130px;
        margin-bottom: auto;
    }

    .about-us-company-information {
        padding: 30px 15px;
    }

    .websites-back .service-home-div {
        gap: 70px 10px;
    }



    .cart-back.blog-content .blog-content-back .blog-content-div {
        align-items: flex-start;
        padding: 25px;
        gap: 20px;
    }

    .cart-back.blog-content .blog-content-div .blog-content-div-text {
        flex-direction: column;
    }

    .cart-price-back {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 0;
    }

    .cart-price-back h2 {
        margin-right: auto;
    }
}

@media screen and (max-width:550px) {
    #blog .service-home-div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        padding-top: 40px;
        padding-bottom: 20px;
        margin-top: 0;
    }

    #blog .service-div {
        min-width: 250px;
    }

    #blog .service-home-div::-webkit-scrollbar {
        display: none;
    }

    .home-banner-back h2 {
        font-size: 30px;
        text-align: center;
    }

    .home-banner-back p {
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
    }

    .home-banner-back a {
        box-shadow: 0px 0px 50px var(--theme4);
        background: var(--theme4);
        color: var(--white);
    }

    #desktop-nav-order-btn-a {
        display: none;
    }

    .navbar {
        padding: 20px 10px 0 10px;
    }

    #service-class .service-home-div {
        grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
    }

    .home-title-div {
        flex-wrap: wrap;
    }

    .phone-nav {
        display: flex;
    }

    #home-banner .home-back {
        padding: 0;
    }

    #home-banner .home-back .home-content {
        gap: 30px;
        padding-top: 40px;
    }

    .home-text-top#service {
        margin-top: 70px;
    }

    #footer-l {
        gap: 20px;
    }

    .footer-socialmedia {
        align-items: center;
        justify-content: center;
    }

    .footer-div h2 {
        text-align: center;
    }

    #footer-l p {
        text-align: center;
    }

    .footer {
        padding-bottom: 100px;
    }

    .about-us-top-img {
        max-width: 350px;
    }

    .contact-us-section-back {
        padding-left: 20px;
        padding-right: 20px;
    }

    .questions-img {
        max-width: 300px;
    }

    .question-div label {
        font-size: 16px;
    }

    .question-div label .fa-arrow-alt-circle-left {
        font-size: 18px;
    }

    .question-div .question-answer {
        font-size: 14px;
        line-height: 29px;
    }

    .question-div {
        width: 100%;
    }

    .blog-home-content h1 {
        font-size: 20px;
        text-shadow: none;
    }

    .blog-content-div-img img {
        object-fit: contain;
    }

    .blog-content-div-img {
        width: 100%;
        max-width: 200px;
        height: auto;
    }

    .blog-content-div {
        flex-direction: column;
    }

    #blog-content-single.blog-content-div {
        padding: 20px 0;
    }

    /* .blog-content{padding: 0;} */
    .blog-single-content {
        padding: 20px 0;
    }

    #home-banner .home-back#blog-top-search-back .home-img {
        display: none;
    }

    #home-banner .home-back#blog-top-search-back {
        margin-top: -50px;
        margin-bottom: 0;
    }

    #home-banner .home-back#blog-top-search-back form input {
        border: 1px solid var(--navcolor);
    }

    #home-banner .home-back#blog-top-search-back form button {
        left: 4px;
    }

    #blog-content-div-id .blog-content-div-img {
        max-width: unset;
        max-height: 250px;
        border-radius: 0;
    }

    #blog-content-div-id.blog-content-div {
        padding: 0;
        overflow: hidden;
        gap: 0;
    }

    #home-banner .home-back .home-content {
        padding: 40px 0 20px 0;
    }

    #blog-content-div-id.blog-content-div .blog-content-div-text {
        padding: 20px 20px 0 20px;
        margin-top: -10px;
        box-shadow: 0 0 40px 50px #ffffff;
        background-color: var(--white);
    }

    #blog-content-div-id.blog-content-div .blog-content-date {
        justify-content: space-between;
        width: 100%;
    }

    #blog-content-div-id.blog-content-div .blog-content-date span {
        display: none;
    }

    #blog-content-div-id.blog-content-div .blog-content-link {
        padding: 20px 20px 22px 20px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 2px dashed var(--navcolor);
        font-size: 20px;
    }

    .blog-content-div-nothing div h1 {
        font-size: 25px;
    }

    .service-img {
        height: 150px;
    }

    .service-img a img {
        height: 150px;
    }

    .service-content .service-text h1 a {
        font-size: 17px;
    }

    .service-content .service-text h1 {
        line-height: 25px;
    }

    .service-content .service-text p {
        font-size: 13px;
        max-height: 60px;
    }

    #websites-service-div .service-content .service-price {
        flex-direction: column;
    }

    #websites-service-div .service-price-link {
        width: 100%;
        order: 2;
    }

    #websites-service-div .service-content .service-price {
        height: auto;
        gap: 10px;
        padding: 10px 0 0 0;
    }

    #websites-service-div .service-content .service-price a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 13px 15px;
        box-shadow: none;
    }

    .service-content {
        padding: 0;
    }

    .service-content .service-text {
        padding: 0 10px;
    }

    .service-home-div {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }


    .website-sigle-top-img {
        max-width: 300px;
        max-height: 200px;
    }

    #website-sigle-top-content-order-a {
        width: 100%;
        padding: 0 20px;
    }

    #website-sigle-top-content-order-a i {
        position: relative;
        top: unset;
        right: unset;
        transform: translateY(0);
        border: none;
        width: unset;
        padding: 0 0px 1px 10px;
        font-size: 17px;
    }

    .website-sigle-content-right-back {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding: 50px 20px 30px 20px;
    }

    /* .website-sigle-content-tariff{
        min-width: unset;
        width: 100%;
        max-width: unset;
    } */
    /* .website-sigle-content-tariff-content ul{
        min-height: unset;
    } */

    #home-banner .home-back .home-img {
        max-width: 300px;
    }

    .about-us-top-img {
        max-width: 300px;
    }


    .home-text-top.home-text-top-services {
        width: 100%;
    }

    .home-text-top.home-text-top-services .home-title-div {
        padding: 0 15px;
    }

    .home-text-top.home-text-top-services .service-div {
        gap: 10px;
    }

    .home-text-top.home-text-top-services .service-content .service-text {
        justify-content: flex-start;
    }

    .home-text-top.home-text-top-services .service-content .service-price {
        padding-bottom: 0;
    }

    .home-text-top.home-text-top-services .service-content .service-text p {
        line-height: 25px;
    }


    .nav-back {
        z-index: 1;
    }

    .nav-phone-back.nav-phone-back-search {
        border-radius: 100px;
        z-index: 0;
        margin-top: -5px;
        width: 100%;
        border-color: var(--white);
        transform: translateY(-50px);
    }

    .nav-phone-back.nav-phone-back-search form input {
        border-radius: 100px;
        padding-right: 60px;
        padding-left: 60px;
        border: none;
    }

    .nav-phone-back.nav-phone-back-search form button {
        border-radius: 100px;
        width: 55px;
        height: 55px;
        left: 15px;
        color: #4d5f68;
        background-color: var(--theme3);
    }

    .navbar.navbar-open-search .nav-phone-back.nav-phone-back-search {
        height: 89px;
        padding: 0;
        margin-top: 10px;
        border: 1px solid var(--navcolor);
        transform: translateY(0px);
    }

    .nav-phone-back.nav-phone-back-search span {
        display: flex;
    }

    .blog-content-div-nothing {
        width: 95%;
    }


    .profile-content-nav-right ul {
        display: none;
    }






    .cart-back.blog-content .blog-content-back .blog-content-div {
        flex-direction: row;
    }

    .cart-back.blog-content .blog-content-div-img img {
        object-fit: cover;
    }

    .cart-price-back {
        flex-direction: column;
        align-items: flex-end;
    }

    .cart-price-back h2 {
        margin: 0;
    }

    .cart-aside-back-btn-back {
        width: 100%;
        padding: 15px;
    }

    .profile-dashboard-contact a {
        height: 95px;
    }

    .profile-content {
        margin-bottom: 75px;
    }

    .profile-dashboard-back {
        margin-bottom: 0;
    }

    .profile-phone-nav-left-div-a-back {
        display: none;
    }



    .profile-content-body-websites-div {
        padding-bottom: 0;
        flex-direction: column;
    }

    .profile-body-websites-content-end-div a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-top: 2px dashed #00000010;
        margin: 20px 0 0 0;
        padding: 25px;
    }

    .profile-content-title h1 {
        font-size: 21px;
    }

    .profile-websites-single-content-info div {
        gap: 20px;
    }

    #profile-websites-single-info-p-text-info {
        max-width: 300px;
        width: 60%;
    }

    .profile-websites-single-title div h2 {
        font-size: 18px;
    }



    .profile-content-body-notification .profile-notification-div {
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 0px;
    }

    .profile-notification-div-date {
        margin-right: auto;
    }

    .profile-notification-div-content {
        align-items: flex-start;
    }

    .profile-notification-div-content i.fa-bell {
        margin-top: 5px;
    }

    .profile-notification-div-content p {
        text-align: justify;
    }

    .profile-content-back.profile-content-back-notification {
        padding: 15px 20px;
    }

    .profile-content-back.profile-content-back-notification .profile-content-title {
        padding: 5px 0px 15px 5px;
    }












    .profile-content-back.profile-content-back-messages.profile-content-back-messages-pv {
        min-height: 100vh;
        position: absolute;
        top: 0;
        right: 0;
        border-radius: 0;
        z-index: 101;
        padding-top: 15px;
    }

    .profile-messages-pv-msg {
        max-width: 85%;
    }








    #home-banner .home-back .home-txt h1{
        font-size: 40px;
        line-height: 55px;
    }
    #home-banner .home-back .home-content{
        gap: 10px;
    }
    .option-product-back{
        gap: 10px;
    }
    .home-text-top#home-map{
        margin-top: 40px;
        margin-bottom: 70px;
    }
    .home-map-back{
        padding: 0;
    }
    .home-comments{
        gap: 0;
    }
    .service-home#blog{
        padding: 50px 0 10px 0;
    }
    #blog .service-home-div{
        padding-top: 20px;
    }




}

@media screen and (max-width:450px) {
    #home-banner .home-back .home-content {
        padding: 60px 0 20px 0;
    }

    .home {
        padding-top: 20px;
    }

    #service-class .service-home-title.home-title-div a {
        display: none;
    }

    #home-slider-comments .slide {
        padding: 10px 10px 20px 10px;
    }

    #home-slider-comments button {
        transform: translateX(-50%) translateY(0);
        top: unset;
        bottom: 5px;
        border: 1px solid #00000010;
        color: var(--fontcolor1);
        width: 60px;
        height: 60px;
    }

    #home-slider-comments .next {
        right: unset;
        left: 50%;
        margin-left: 32px;
    }

    #home-slider-comments .prev {
        left: 50%;
        margin-left: -32px;
    }

    #home-slider-comments .slide .home-comment {
        padding: 20px 10px;
    }

    #home-slider-comments.slider {
        padding-bottom: 30px;
    }

    #home-slider-comments button:hover {
        transform: translateX(-50%) translateY(0);
    }

    .home-banner-back p {
        max-width: 90%;
    }

    #home-banner-back-span1 {
        display: none;
    }

    #home-text-top-div div {
        min-width: 0;
    }

    #home-text-top-div img {
        min-width: 0;
    }

    .home#about-us-section {
        padding-left: 5px;
        padding-right: 5px;
    }

    .blog-content-div-img {
        height: auto;
    }

    .blog-content-div {
        flex-direction: column;
    }

    #home-banner .home-back#blog-top-search-back .home-txt h1 {
        font-size: 25px;
    }

    .add-comment-nouser {
        flex-wrap: wrap;
        justify-content: center;
    }

    .add-comment-nouser p {
        text-align: center;
        padding: 0;
    }

    form.add-comment-nouser {
        border-radius: 30px;
    }

    .comments-back {
        /* width: 100%; */
        align-items: center;
        margin: 0 auto;
    }

    #websites-back-service-home-div.service-home-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .service-div#websites-service-div {
        max-width: none;
    }

    #websites-service-div .service-content .service-price {
        flex-direction: row;
    }

    #websites-service-div .service-price-link {
        order: 0;
        width: unset;
    }

    #websites-service-div .service-content .service-price a {
        padding: 15px 40px;
    }

    #websites-service-div .service-price-back {
        padding: 0 20px;
    }



    .website-sigle-top {
        padding: 15px 20px;
    }

    .website-sigle-top-content h1 {
        font-size: 20px;
    }

    .website-sigle-top-content p {
        font-size: 14px;
    }

    #website-sigle-top-content-div-bottom span {
        font-size: 11px;
    }

    .website-sigle-top-content div a {
        font-size: 16px;
    }

    #website-sigle-top-content-menu-a {
        font-size: 16px;
    }

    .website-sigle-content-left-1 a {
        font-size: 18px;
    }

    .website-sigle-content-left-1 h1 {
        font-size: 24px;
    }

    .website-sigle-content-right-div h2 {
        font-size: 22px;
    }

    .website-sigle-content-right-div p {
        font-size: 14px;
    }

    .website-sigle-content-right-back {
        padding: 50px 10px 30px 10px;
    }

    .website-sigle-content-right-div {
        padding: 20px 20px 50px 20px;
    }

    .website-sigle-content-right-div h2 {
        padding: 0 10px;
    }


    .home-text-top.home-text-top-services .service-home-div {
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 0 10px;
    }

    .home-text-top.home-text-top-services .service-div {
        flex-direction: row;
        gap: 15px;
        border-radius: 20px;
        border: 1px solid var(--navcolor);
        box-shadow: 0px 8px 20px var(--theme3);
    }

    .home-text-top.home-text-top-services .class-service-home-icon i {
        width: 90px;
        height: 90px;
        font-size: 27px;
        border-radius: 30px;
    }

    .home-text-top.home-text-top-services .service-content .service-price {
        height: unset;
    }

    .home-text-top-services .service-content {
        padding-top: 10px;
    }

    .home-text-top-services .service-price-link a {
        box-shadow: none;
    }

    .home-text-top.home-text-top-services .service-content .service-text h1 a {
        font-size: 19px;
    }


    .login-section-user {
        padding: 20px;
        margin-bottom: 100px;
    }

    .login-user-back {
        padding: 30px 10px;
    }

    .login-user-back form {
        max-width: 350px;
        margin: 30px auto 0 auto;
    }


    .cart-back.blog-content .blog-content-back .blog-content-div {
        padding: 15px;
        gap: 10px;
        padding-bottom: 70px;
        position: relative;
        overflow: hidden;
    }

    .cart-back.blog-content .blog-content-back .blog-content-div .blog-content-div-img {
        width: 70px;
        min-width: 70px;
        height: 70px;
        min-height: 70px;
    }

    .cart-back.blog-content .blog-content-div-text .blog-content-title a h1 {
        font-size: 15px;
        line-height: 26px;
    }

    .cart-price-back {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        flex-direction: row;
        padding: 10px 20px;
        /* background-color: #00000010; */
        align-items: center;
        border-top: 2px dashed #00000010;
    }

    .cart-price-back h2 {
        margin-right: auto;
    }





    .profile-dashboard-websites h1 {
        font-size: 21px;
    }

    .profile-dashboard-websites-div-img {
        width: 85px;
        height: 85px;
        min-width: 85px;
        min-height: 85px;
    }

    .profile-dashboard-websites-div-text h2 {
        font-size: 12px;
        line-height: 16px;
    }

    .profile-dashboard-website-status {
        padding: 3px 5px;
        font-size: 10px;
    }

    .profile-dashboard-websites-container {
        grid-template-columns: repeat(auto-fit, minmax(109px, 1fr));
    }

    .profile-dashboard-right-divs-back {
        flex-direction: column;
    }

    .profile-dashboard-right-divs-back-right {
        order: 2;
    }

    /* .profile-dashboard-right-divs-back-left{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    }
    .profile-dashboard-views, .profile-dashboard-store-websites, .profile-dashboard-messages, .profile-dashboard-cart{
        height: 100%;
    } */
    .profile-body-websites-content-div h2 {
        font-size: 20px;
    }

    .profile-body-websites-content-div h3 {
        font-size: 13px;
        line-height: 24px;
    }

    .profile-websites-single-title div {
        gap: 8px;
    }

    .profile-websites-single-title div img {
        width: 55px;
        height: 55px;
    }

    .profile-websites-single-title div h2 {
        font-size: 16px;
    }

    .profile-websites-single-title div a {
        width: 45px;
        height: 45px;
    }

    .profile-websites-single-content-info div h3 {
        font-size: 13px;
        margin-left: auto;
        color: var(--theme1);
    }

    .profile-websites-single-content-info div {
        flex-wrap: wrap;
        justify-content: flex-end;
        padding: 15px 0;
        gap: 10px;
    }

    #profile-websites-single-info-p-text-info {
        padding: 0;
    }

    #profile-websites-single-info-p-text-info {
        max-width: unset;
        width: 100%;
    }

    .profile-websites-single-content-info {
        padding: 0 5px;
    }






    .profile-messages-pv-msg-text {
        font-size: 14px;
    }











    .home-comment-content{
        padding: 0;
    }
    .home-comment-content p{
        margin: 0;
    }




}

@media screen and (max-width:350px) {
    #service-class .service-home-div {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        overflow-x: auto;
        padding: 0 20px;
        max-width: 950px;
    }

    #service-class .service-home-div::-webkit-scrollbar {
        display: none;
    }

    #service-class .service-div {
        min-width: 220px;
        flex-direction: column;
        gap: 10px;
        padding: 20px 0;
    }

    .contact-us-contnet-form-name input {
        min-width: none;
    }

    #websites-service-div .service-content .service-price a {
        padding: 15px 20px;
    }

    .website-sigle-top-content div {
        flex-wrap: wrap;
    }

    #website-sigle-top-content-menu-a,
    #website-sigle-top-content-comment-a {
        width: 48%;
    }

    .home-text-top.home-text-top-services .service-div {
        flex-direction: column;
        gap: 0px;
    }

    .home-text-top.home-text-top-services .class-service-home-icon i {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        font-size: 25px;
    }


    .profile-menu {
        min-width: unset;
    }

    .profile-menu-back {
        width: 85%;
    }

    .phone-nav-back ul li a {
        font-size: 12px;
    }

    .phone-nav-back ul li a i {
        font-size: 17px;
    }



    #home-banner .home-back .home-txt h1{
        font-size: 30px;
        line-height: 45px;
    }
    .nav-title .img-nav{
        min-width: 60px;
        min-height: 60px;
    }
    #home-banner .home-back .home-txt p{
        font-size: 13px;
    }
    .home-content .home-trader .home-trader-top .home-trader-top-btns button {
        font-size: 14px;
    }
    .home-content .home-trader{
        padding: 15px;
    }
    .option-product-back{
        gap: 10px 0;
    }

}





/* ------ Fonts ------ */

@font-face {
    font-family: vazir-regular;
    src: url(../fonts/vazir/Vazirmatn-Regular.ttf);
}

@font-face {
    font-family: vazir-light;
    src: url(../fonts/vazir/Vazirmatn-Light.ttf);
}

@font-face {
    font-family: vazir-extrabold;
    src: url(../fonts/vazir/Vazirmatn-ExtraBold.ttf);
}

@font-face {
    font-family: vazir-black;
    src: url(../fonts/vazir/Vazirmatn-Black.ttf);
}

@font-face {
    font-family: lalezar;
    src: url(../fonts/Lalezar/Lalezar-Regular.ttf);
}



/* ------ Animation ------ */

@keyframes animated-gradient {
    25% {
        background-position: left bottom;
    }

    50% {
        background-position: right bottom;
    }

    75% {
        background-position: right top;
    }

    100% {
        background-position: left top;
    }
}

@keyframes title-animate {

    0%,
    10%,
    100% {
        width: 0;
    }

    50%,
    90% {
        width: 100%;
    }
}