/*
Theme Name: RSTC Co.
Author: Webnegar TM
Theme URI: https://rstc.co.ir
Description: private awsome theme for rstc company
Author URI: https://negarteam.com
Version: 0.2 Beta
License: GNU General Public Lisence v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: HTML Theme, company, responsive, modern design, ...
*/


/* ----------------- main.css ------------------- */

@font-face {
    font-family: IranSans;
    src: url('fonts/IRANSans(FaNum).ttf');
}

::placeholder {
    font-family: IranSans;
}

::-webkit-scrollbar {
    width: 10px;
    
}
  
::-webkit-scrollbar-track {
    background: black; 
}

::-webkit-scrollbar-thumb {
    background: #888; 
}

::-webkit-scrollbar-thumb:hover {
    background: #555; 
}

html {
    scroll-behavior: smooth;
}

a {
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    text-decoration: none;
}

button {
    cursor: pointer;
}

button:focus {
    outline: none;
}

.c-header-size-filler {
    width: 100%;
    height: 0px;
}

body {
    --main-color: rgb(255, 194, 15);
    --main-color-light: rgb(255, 233, 146);
    --dark-grey: rgb(62, 63, 65);
    --light-grey: rgb(102, 102, 102);
    background-color: rgb(80, 80, 80);
    background-image: url(assets/back2.png);
    background-position: center;
    background-attachment: fixed;
    background-repeat: repeat;
    text-align: center;
    font-family: IranSans;
}

.c-yellow-bg {
    background-color: var(--main-color);
}

.c-grey-bg {
    background-color: var(--light-grey);
}

.c-dark-grey-bg {
    background-color: var(--dark-grey);
}

.c-grey-border {
    border: 8px solid var(--light-grey);
}

.c-dark-grey-border {
    border: 8px solid var(--dark-grey);
}

.c-top-yellow-border {
    border-top: 8px solid var(--main-color);
}

.c-bottom-yellow-border {
    border-bottom: 8px solid var(--main-color);
}

.c-yellow-border {
    border: 8px solid var(--main-color);
}

.c-card {
    box-shadow: 0px 4px 8px 0px var(--dark-grey);
    transition: 0.3s;
}

.c-card:hover {
    box-shadow: 0px 8px 16px 0px var(--dark-grey);
}

.c-logo-pos {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    background-color: var(--main-color);
    width: 50%;
}

.c-side-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 25%;
}

.c-contact-link {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    margin: 3px;
    width: 25px;
    height: 25px;
    /* border: 1px solid black; */
    border-radius: 50%;
    background-color: black;
    transition: 0.3s;
}

.c-contact-icon {
    font-size: 12px;
    color: var(--main-color);
}

.c-contact-link:hover {
    background-color: var(--light-grey);
}

.c-contact-link:hover .c-contact-icon{
    color: var(--main-color-light);
}

.c-logo {
    width: 400px;
}

.c-search-bar {
    direction: ltr;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    width: 70%;
    background-color: white;
    border: solid 2px black;
    border-radius: 20px;
    padding-right: 10px; 
}

.c-second-search-bar {
    position: fixed;
    left: 20px;
    right: 20px;
    top: 0px;
    z-index: 80;
    margin: 10px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: 30px;
    display: none;
    transition: 0.3s;
    background-color: white;
    border: solid 2px black;
    border-radius: 20px;
    padding-right: 10px; 
}

.c-side-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.c-search-input {
    outline: transparent;
    height: 100%;
    direction: rtl;
    width: 100%;
    font-size: 12px;
    font-family: IranSans;
    border: 0;
    background-color: transparent;
}


.c-search-icon {
    color: var(--main-color);
}

.c-search-button {
    outline: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 100%;
    margin-left: -1px;
    border: 0px;
    border-radius: 20px 0px 0px 20px;
    background-color: black;
}

.c-search-button:hover {
    background-color: rgb(32, 32, 32);
}

.c-search-button:focus {
    outline: none;
}

.c-header-black-box {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    width: 100%;
}

.c-triangle-left {
    width: 0px;
    border-bottom: 25px solid var(--dark-grey);
	border-right: 25px solid transparent;
	height: 0;
}

.c-triangle-right {
    width: 0px;
    border-bottom: 25px solid var(--dark-grey);
	border-left: 25px solid transparent;
	height: 0;
}

.c-rectangular {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25px;
    background-color: var(--dark-grey);
}

.c-triangle-left-2 {
    width: 0px;
    border-bottom: 25px solid var(--light-grey);
    border-right: 25px solid transparent;
    height: 0;
}

.c-triangle-right-2 {
    width: 0px;
    border-bottom: 25px solid var(--light-grey);
    border-left: 25px solid transparent;
    height: 0;
}

.c-contact-bar {
    display: flex;
    justify-content: center;
    width: 100%;
}

.c-main-header {
    display: flex; 
    background-color: var(--main-color);
    width: 100%;
    height: 100px;
    justify-content: center;
}

.c-sub-header {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: var(--dark-grey);
}

.c-lang {
    cursor: default;
    display: flex;
    align-items: center;
}

.c-lang-link {
    font-size: 12px;
    color: black;
    padding: 3px;
    margin: 1px;
    border-radius: 4px;
    transition: 0.3s;
}

.c-lang-link:hover {
    color: darkblue;
    background-color: rgba(128, 128, 128, 0.253);
}

.c-navbar {
    display: flex;
    justify-content: space-between;
}

.c-navbar-item {
    text-decoration: none;
    display: block;
    padding: 5px 15px 5px 15px;
    color: rgb(189, 189, 189);
    font-size: 16px;
    border-bottom: solid 2px transparent;
    transition: 0.3s;
}

.c-navbar-item:hover{
    color: var(--main-color-light);
    background-image: linear-gradient(to top, rgba(255, 204, 0, 0.1), var(--dark-grey));
    border-bottom: solid 2px var(--main-color);
}

.c-navbar-item-selected:hover {
    background-image: linear-gradient(to top, rgba(255, 204, 0, 0.1), var(--dark-grey));
    border-bottom: solid 2px var(--main-color);
    color: var(--main-color);
}

.c-navbar-item-selected {
    text-decoration: none;
    display: block;
    padding: 5px 15px 5px 15px;
    font-size: 16px;
    font-weight: bold;
    color: var(--main-color);
    transition: 0.3s;
}

.c-dropdown:hover .c-dropdown-content {
    display: block;
}

.c-dropdown {
    display:flex; 
    justify-content: flex-end; 
    position: relative;
}

.c-dropdown-content {
    position: absolute;
    width: 220px; 
    background-color: var(--dark-grey);
    z-index: 10000; 
    margin-top: 36px; 
    right: 0;
    display: none;
}

.c-dropdown-item {
    text-align: right;
    text-decoration: none;
    display: block;
    padding: 10px;
    color: rgb(189, 189, 189);
    font-size: 14px;
    transition: 0.3s;
}

.c-side-navbar-item.sub {
    padding-right: 50px;
    color: gray;
}

.c-dropdown-item:hover{
    color: var(--main-color-light);
    background-color: var(--light-grey);
}

.c-menu {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 30px 0px 80px 0px; 
    
}

.c-menu-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px;
}

.c-menu-item:hover .c-menu-item-card{
    background-color: rgb(255, 215, 53);
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.c-menu-item:hover .c-menu-item-pic{
    transform: rotate3d(0,1,0,180deg)
}

.c-menu-item-card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 150px;
    background-color: var(--main-color);
    border-radius: 50%;
    margin-bottom: 20px;
}

.c-menu-item-pic {
    transition: 1s;
    width: 50px;
    height: 50px;
}

.c-menu-item-text {
    font-size: 14px;
    color: white;
}

.c-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 50px;
    padding-right: 50px;
}

.c-container-title {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    padding: 10px;
    background-color: white;
    color: black;
    border-radius: 50%;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: -70px;
    direction: rtl;
}

.c-container-title:hover {
    background-color: #ececec;
    transition: 0.3s;
}

.c-container-content {
    display: flex;
    justify-content: center;
    position: relative;
    width: 100%;
    padding-top: 80px;
}

.c-about-us {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 100px;
}

.c-about-us-item {
    width: 25%;
}

.c-about-us-item-pic {
    height: 70px;
}

.c-about-us-item-title {
    padding-top: 20px;
    padding-bottom: 10px; 
    font-size: 14px;
    font-weight: bold;
    color: white;
}

.c-about-us-item-text {
    text-align: justify;
    direction: rtl;
    color: rgb(189, 189, 189);
    font-size: 14px;
}

.c-scroll-top-button {
    z-index: 1;
    display: none;
    font-size: 14px;
    background-color: white;
    color: var(--dark-grey);
    border: solid 2px var(--dark-grey);
    width: 50px;
    height: 50px;
    box-shadow: 0px 4px 8px 0px var(--dark-grey);
    border-radius: 50%;
    position: fixed;
    right: 10px;
    bottom: -100px;
    animation: none;
    animation-duration: 5s;
    transition: 0.3s
}

.c-scroll-top-button:focus {
    outline: none;
}

@keyframes move-in {
    from {bottom: -100px;}
    to {bottom: 10px;}
}

@keyframes move-out {
    from {bottom: 10px;}
    to {bottom: -100px;}
}

.c-footer {
    padding: 5px 70px 5px 70px;
    background-color: var(--dark-grey);
    color: white;
    font-size: 10px;
    direction: rtl;
}

.c-all-rights {
    font-size: 10px;
    padding: 5px;
    background-color: var(--dark-grey);
    color: var(--main-color);
}

.c-peyvand-title {
    padding: 10px;
    color: white;
    width: 100%;
    font-size: 20px;
}

.c-peyvand {
    width: 100%;
}

.c-peyvand-content {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 50px 20px 50px;
}

.c-peyvand-pic {
    padding: 10px;
    width: 190px;
    transition: 0.3s;
}

.c-peyvand-pic:hover {
    filter: brightness(120%);
    transform: scale(1.1);
}

.c-contact-us {
    background-color: var(--main-color);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 30px 50px 30px 50px;
    border-top: 1px solid var(--dark-grey);
}

.c-footer-logo {
    width: 170px;
}

.googleMap {
    border-radius: 4px;
    background-color: gray;
    width: 250px;
    height: 200px;
}

.c-second-logo {
    width: 100%;
    padding: 20px 0px 20px 0px;
}

.c-second-contact-bar {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
}

.c-contact-us-info {
    font-size: 12px;
    width: 30%;
    direction: rtl;
    text-align: right;
}

.c-site-info {
    text-align: right;
    font-size: 12px;
}

.c-news-title {
    padding: 20px;
    color: white;
    width: 100%;
    font-size: 20px;
}

.c-news-main-title {
    padding: 10px;
    color: white;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    font-size: 24px;
    font-weight: bold;
    /*border: solid 2px #888888;*/
    /*border-radius: 25px;*/
}

.c-news-info {
    display: flex;
    color: beige;
    font-size: 16px;
    justify-content: space-between;
    padding: 5px;
}

.c-news-photo {
    /*width:100%;*/
    /*border-radius: 4px;*/
    /*object-fit: fill;*/
    position: absolute;
    /*left: 30%;*/
}

.c-news-back-photo {
    /*filter: brightness(40%);*/
    opacity: 0.4;
    filter: blur(4px);
    width:100%;
    object-fit: cover !important;
    border-radius: 4px;
    object-fit: fill;
}

.c-news-content {
    width: 100%;
    text-align: right;
    padding: 50px 0px 50px 0px;
    color: white;
}

.c-news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 150px 60px 150px;
}

.c-news-text {
    z-index: 10;
    direction: rtl;
    color: white;
    padding: 30px;
    text-align: justify;
    width: 50%;
    font-size: 12px;
}

.c-news-text-title {
    font-size: 20px;
    text-align: right;
    padding: 10px;
}

.c-news-text-date {
    font-size: 12px;
    text-align: right;
    padding: 5px;
    color: #888888;
}

.c-news-more {
    padding-top: 10px; 
    color: rgb(255, 194, 15);
    text-align: left;
    padding: 5px;
    transition: 0.3s;
    border-radius: 4px;
}

.c-news-more:hover {
    background-color: rgba(128, 128, 128, 0.253);
    color: rgb(255, 221, 68);
}

.c-news-pic {
    width: 50%;
    height: 300px;
    object-fit: contain;
}

#carouselExampleIndicators2 {
	height: 400px;
}

.c-hidden-button {
    padding: 4px;
    font-size: 16px;
    background-color: transparent;
    border: 0px;
    display: none;
}

.c-hidden-button-icon {
    color: black;
}

.c-hoze-item {
    width: 23%;
    color: black;
}

.c-hoze-item:hover {
    color: #555;
}

.c-hoze-item-pic {
    border-radius: 5px;
    width: 100%;
    transition: 0.3s;
}

.c-hoze-item-pic:hover {
    filter: brightness(80%);
    transform: translateY(-5px);
}

.c-hoze-item-title {
    font-size: 16px;
    font-weight: bold;
    padding: 4px;
    margin-top: 10px;
}

.c-hoze {
    display: flex;
    justify-content: space-between;
    margin-bottom: 60px;
}

.c-recent-projects {
    display: flex;
    justify-content: space-between;
}

.c-projects-item {
    width: 23%;
    color: black;
}

.c-projects-item:hover {
    color: #555;
}

.c-background {
    height: 200px;
}

.c-background-yellow {
    height: 200px;
    background-attachment: fixed;
    background-image: url(assets/yellow-background.png);
    background-size: 100% 100%;
}

.c-side-navbar {
    border-left: 0px solid transparent;
    display: none;
    text-align: right;
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 100;
    top: 0;
    right: 0;
    background-color: var(--dark-grey);
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 100px;
}

.c-side-navbar-item {
    width: 250px;
    text-decoration: none;
    display: block;
    padding: 5px 30px 5px 10px;
    color: rgb(189, 189, 189);
    font-size: 14px;
    border-bottom: solid 2px transparent;
    transition: 0.3s;
}

.c-side-navbar-item-selected {
    width: 250px;
    text-decoration: none;
    display: block;
    padding: 5px 30px 5px 10px;
    color: var(--main-color);
    font-size: 14px;
    font-weight: bold;
    border-bottom: solid 2px transparent;
    transition: 0.3s;
}

.c-side-navbar-item:hover {
    color: var(--main-color-light);
}

.c-side-navbar-item-selected:hover {
    color: var(--main-color);
}

.c-close-button {
    width: 40px;
    height: 40px;
    position: absolute;
    top: 30px;
    left: 30px;
    background-color: transparent;
    color: var(--main-color);
    border: 0px;
    font-size: 20px;
    border-radius: 50%;
    transition: 0.3s;
}

.c-close-button:hover {
    transform: rotate(90deg);
    color: var(--main-color-light);
    background-color: rgba(102, 102, 102, 0.199);
}

.c-404-info {
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    padding-left: 100px;
}

.c-content-item {
    direction: ltr;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: white;
    padding: 10px 0px 10px 10px;
}

.c-bullet {
    padding: 10px 0px 10px 20px;
    color: var(--main-color);
}

.small-size {
    display: none;
}

.small-size-img {
    height: 400px;
    background-size: cover; 
    background-position: left;
}


.c-carousel-text {
    position: absolute; 
    right: 0px; 
    bottom: 0px; 
    width: 40%; 
    margin: 0px 120px 140px 0px; 
    font-size: 12px; color: white; 
    background-color: rgba(58, 58, 58, 0.712); 
    padding: 20px; 
    border-radius: 4px; 
    direction: rtl;
}

/* ------------------ about-us.css ------------------ */

.c-about-us-full {
    width: 100%;
    text-align: right;
    direction: rtl;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.c-more {
    padding: 10px 50px 10px 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.c-more-all-items {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.c-more-item {
    background-color: transparent;
    border: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.c-more-item:hover .c-more-item-card{
    background-color: rgb(122, 122, 122);
    box-shadow: 0px 8px 16px 0px var(--dark-grey);
}

.c-more-item-card {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
    background-color: rgb(92, 92, 92);
    box-shadow: 0px 4px 8px 0px var(--dark-grey);
    border-radius: 50%;
    margin: 2vw;
    margin-bottom: 20px;
    transition: 0.3s;
}

.c-more-item-pic {
    width: 110px;
}

.c-more-item-title {
    font-size: 14px;
    color: white;
}

.c-chips-button {
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: bold;
    direction: rtl;
    font-size: 10px;
    border-radius: 20px;
    margin: 40px 10px 40px 10px;
    background-color: rgb(255, 194, 15);
    width: 400px;
    padding: 10px 20px 10px 20px;
}

.c-chips-info {
    border: 1px solid var(--main-color);
    background-color: var(--dark-grey); 
    color: white;
    direction: rtl;
    font-size: 10px;
    border-radius: 20px;
    margin: 40px 0px 40px 0px;
    width: 400px;
    padding: 10px;
}

.c-chips-button:hover {
    color: darkblue;
    text-decoration: none;
}

.c-chips-button > i {
    transition: 1s;
}

.c-chips-button:hover i{
    color: darkblue;
    transform: translateX(5px);
    transition: 1s;
}

.c-more-description {
    font-size: 14px;
    direction: rtl;
    background-color: rgba(128, 128, 128, 0.219);
    padding: 20px;
    text-align: right;
    margin-top: 40px;
    margin-bottom: 20px;
    width: 100%;
    border-right: 8px solid var(--main-color);
    border-radius: 10px;
    color: white;
    display: none;
    animation: fade-in 1s;
}

@keyframes fade-in {
    from {opacity: 0; margin-top: 0px}
    to {opacity: 1; margin-top: 40px}
}

.c-description-title {
    text-align: center; 
    padding: 20px; 
    width: 100%; 
    border-radius: 10px 0px 0px 0px; 
    color: var(--main-color); 
    font-weight: bold;
    font-size: 20px;
}

/* ------------------ activities.css ------------------ */

.c-hoze-full {
    width: 100%;
    text-align: right;
    direction: rtl;
    font-size: 14px;
    margin-top: 20px;
    margin-bottom: 100px;
}

.c-quality {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: right;
    direction: rtl;
    font-size: 14px;
    margin-top: 50px;
    margin-bottom: 50px;
}

.c-chips-button {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    direction: rtl;
    font-size: 10px;
    border-radius: 20px;
    margin: 30px;
    background-color: var(--dark-grey);
    padding: 10px 20px 10px 20px;
}

.c-content-full {
    text-align: right;
    width: 100%;
    margin-bottom: 50px;
}

.c-chips-button:hover {
    color: var(--main-color-light);
    text-decoration: none;
}

.c-chips-button > i {
    transition: 1s;
}

.c-chips-button:hover i{
    color: var(--main-color-light);
    transform: translateX(5px);
    transition: 1s;
}

/* ------------------ projects.css ------------------ */

.c-projects {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 50px;
}

.c-project-item {
    width: 360px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 40px;
    border-radius: 4px;
}

.c-project-title {
    font-size: 14px;
    text-align: right;
    width: 100%;
    color: white;
    height: 120px;
}

.c-project-all-title {
    text-align: center;
    width: 100%;
    color: white;
}

.c-project-precentage {
    font-size: 50px;
    font-family: IranSans;
    color: var(--main-color);
}

.c-project-slider {
    width: 100%;
    border-radius: 10px;
    display: flex;
    justify-content: flex-start;
    height: 10px;
    background-color: var(--light-grey);
}

.c-slider-process {
    border-radius: 10px;
    transition: 1s;
    width: 0%;
    height: 10px;
    background-color: var(--main-color);
}

/* ------------------ certificates.css ------------------ */

.c-certificates {
    width: 100%;
    padding-top: 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 50px;
}

.c-certificate-item {
    padding: 0px;
    background-color: transparent;
    border: 0px;
    display: flex;
    justify-content: center;
    position: relative;
    margin: 20px;
    width: 250px;
    height: 320px;
    transition: 0.3s;
}

.c-certificate-item.landscape {
    width: 320px;
    height: 250px;
}

.c-certificate-pic {
    width: 100%;
    height: 100%;
    transition: 0.3s;
    border-radius: 20px;
}

.c-certificate-text {
    border-top: 0px solid transparent;
    border-bottom: 0px solid transparent;
    background-color: transparent;
    padding: 10px;
    width: 100%;
    position: absolute;
    bottom: 20%;
    border-radius: 4px;
    color: transparent;
    transition: 0.3s;
    font-size: 14px;
}

.c-certificate-item:hover .c-certificate-pic{
    filter: brightness(20%);
    border-radius: 4px;
}

.c-zoom-in{
    opacity: 0;
    font-size: 70px;
    position: absolute;
    color: var(--main-color);
    bottom: 60%;
    transition: 0.3s;
}

.c-certificate-item:hover .c-certificate-text{
    color: white;
    background-color: var(--light-grey);
    border-top: 8px solid var(--main-color);
    border-bottom: 8px solid var(--main-color);
}

.c-certificate-item:hover .c-zoom-in{
    opacity: 1;
    transform: scale(1.2);
}

/* ------------------ contact-us.css ------------------ */

.c-contact-us-full {
    margin-bottom: 50px;
}

.c-contact-us-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 50px 10px 50px;
}

.c-contact-us-image {
    filter: brightness(40%);
    width: 100%;
}

.c-image-container {
    background-image: url(assets/contactus3.jpg);
    background-position: left;
    background-size: cover;
    height: 300px;
    position: relative;
}

.c-image-text {
    width: 100%;
    font-size: 30px;
    position: absolute;
    bottom: 50%;
    color: white;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 auto;
    direction: rtl;
    animation: typing 10s;
}

.c-contact-us-chips {
    background-color: rgb(92, 92, 92); 
    color: white;
    width: 120px;
    direction: rtl;
    font-size: 14px;
    border-radius: 20px;
    margin: 40px;
    padding: 10px 20px 10px 20px;
    border: 1px solid var(--main-color);
    background-color: var(--dark-grey); 
}

@keyframes typing {
  0% { width: 0 }
  50% { width: 100% }
}

.c-text-field-title {
    width: 100px;
    border-radius: 4px;
    position: absolute;
    font-size: 12px;
    font-weight: bold;
    top: -15px;
    right: 5px;
    color: black;
    background-color: var(--main-color);
    padding: 5px 10px 5px 10px;
    border-radius: 10px 10px 0px 0px;
}

.c-text-field {
    margin: 40px 30px 0px 30px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 300px;
    font-size: 14px;
    font-family: inherit;
    -webkit-appearance: none;
    padding: 13px 5px 5px 5px;
    cursor: text;
}

.c-input {
    background-color: var(--dark-grey);
    border-radius: 4px 0px 4px 4px;
    padding: 5px;
    color: white;
    height: 40px;
    border: 0.5px solid gray; 
    text-align: right;
    width: 100%;
    transition: 0.3s;
}

textarea.c-input {
    min-height: 50px;
}

.c-input:hover {
    background-color: rgb(87, 87, 87);
}

.c-input:focus {
    background-color: rgb(71, 71, 62);
    outline: none;
}

.c-contact-us-button {
    width: 160px;
    background-color: rgb(0, 102, 255); 
    color: white;
    direction: rtl;
    font-size: 14px;
    border-radius: 20px;
    margin: 40px;
    border: 0px;
    padding: 10px 20px 10px 20px;
}

.c-contact-us-button:hover {
    background-color: rgb(0, 93, 233);
}

.c-contact-us-item {
    background-color: var(--dark-grey);
    border-radius: 0px 0px 4px 4px;
    display: flex; 
    padding: 20px; 
    justify-content: space-between; 
    font-size: 14px; 
    align-items: center;
}

.c-contact-us-map {
    border-radius: 4px;
    background-color: gray;
    width: 400px;
    height: 200px;
}

.c-info {
    width: 550px;
    font-size: 12px;
    text-align: right; 
    direction: rtl; 
    color:rgb(189, 189, 189); 
    padding: 0px 20px 0px 20px;
}

.c-qrcode-content {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    border-radius: 4px;
    border: 0.5px solid gray;
    width: 300px;
}

.c-qrcode-info {
    height: 100%;
    width: 100%;
    color: rgb(189, 189, 189); 
    font-size: 10px;
    text-align: center;
    direction: rtl;
    padding: 0px 10px 0px 10px;
}

.c-qrcode-img {
    border-radius: 0px 3px 3px 0px;
}

.nav-item {
    border: 0.5px solid var(--dark-grey) !important;
    transition: 0.3s;
    background-color: var(--light-grey); 
    color:white;
}

.nav {
    overflow-y: hidden;
}

.nav-item:hover {
    background-color: rgb(122, 122, 122);
    color: var(--main-color-light);
}

.nav-item.active {
    background-color: var(--dark-grey) !important; 
    color: var(--main-color) !important; 
    border: 0px !important;
}

/* ------------------ news.css ------------------ */

/*empty!*/

/* ------------------ products.css ------------------ */

.accordion {
    width: 100%;
    direction: rtl;
}

.btn.btn-link {
    text-align: right;
    text-decoration: none;
    width: 100%;
    background-color: var(--dark-grey);
    background-image: linear-gradient(to left, var(--light-grey), var(--dark-grey));
    border: 0px;
}

.card {
    border: 0px;
    background-color: transparent;
}

.card-header {
    padding-right: 0px;
    padding-left: 0px;
    border: 0px;
    background-color: transparent;
}

.card-body {
    border: 1px solid var(--light-grey);
    display: flex;
    background-color: var(--dark-grey);
    align-items: flex-start;
    font-size: 14px;
    text-align: right;
    color: white;
    border-radius: 0px 0px 10px 10px;
}

.c-products-full {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 50px;
}

.c-product-img {
    width: 400px;
    margin-right:20px;
    border-radius: 4px;
}

.c-product-info {
    color: white;
    width: 100%;
    text-align: right;
    direction: rtl;
    padding: 40px 0px 20px 0px;
    font-size: 14px;
}

.c-product-table {
    background-color: var(--main-color);
    width: 100%;
    padding: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

th{
    background-color: var(--dark-grey);
    color: white;
}

#table-left-item {
    border-radius: 20px 0px 0px 20px;
}

#table-right-item {
    border-radius: 0px 20px 20px 0px;
}

table  {
    direction: ltr;
    width: 100%;
    font-size: 14px;
}

th, td {
    padding: 10px;
}

.c-table-container {
    direction: rtl;
    width: 100%;
}

.c-chips-button {
    width: 400px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    direction: rtl;
    font-size: 12px;
    border-radius: 20px;
    margin: 50px 30px 30px 30px;
    background-color: var(--dark-grey);
    padding: 10px 20px 10px 20px;
}

.c-chips-button:hover {
    background-color: var(--light-grey);
    color: var(--main-color-light);
    text-decoration: none;
}

.c-chips-button > i {
    transition: 1s;
}

.c-chips-button:hover i{
    color: var(--main-color-light);
    transform: translateX(5px);
    transition: 1s;
}

/* ------------------ structure.css ------------------ */

.c-structure-all {
    width: 100%;
    margin-bottom: 50px;
}

.c-structure {
    width: 100%;
}

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

.c-title {
    width: 300px;
    padding: 10px;
    color: white;
}

.c-line {
    border: 2px solid var(--light-grey);
    width: 100%;
}

.c-structure-content {
    padding-left: 50px;
    padding-right: 50px;
}

.c-structure-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.c-person {
    width: 210px;
    background-color: transparent;
    border: 0px;
    margin: 20px 10px 20px 10px;
}

.c-person-pic {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 50%;
    width: 200px;
    height: 200px;
    border: 8px solid rgb(255, 194, 15);
}

.c-person:hover .c-person-pic {
    transform: translateY(-10px);
    box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2);
}

.c-person-name {
    padding: 10px;
    font-size: 14px;
    color: white;
}

.c-person-job {
    font-size: 12px;
    color: white;
}

/* ------------------ live.css ------------------ */

.c-get-it-img {
    width: 200px; 
    margin: 20px; 
    transition: 0.3s;
}

.c-get-it-img:hover {
    transform: scale(1.1);
}

.c-contact-us-button {
    background-color: rgb(0, 102, 255); 
    color: white;
    direction: rtl;
    font-size: 14px;
    border-radius: 20px;
    margin: 40px;
    border: 0px;
    padding: 10px 20px 10px 20px;
}

.c-contact-us-button:hover {
    background-color: rgb(0, 93, 233);
}



@media screen and (max-width: 1100px) {
    .c-more-all-items {
        flex-direction: column-reverse;
    }

    .c-more {
        padding: 30px;
    }

    .c-more-item {
        padding: 10px;
    }

    .c-contact-us-item {
        flex-direction: column;
    }

    .c-qrcode-content {
        width: 100%;
    }

    .c-info {
        padding: 20px 0px 20px 0px;
        width: 100%;
    }

    .c-contact-us-map {
        width: 100%;
        /* height: 250px; */
        /* margin-top: 20px; */
    }
	#carouselExampleIndicators2 {
		height: 550px;
	}
}

@media screen and (max-width: 900px) {
    .c-header-size-filler {
        height: 100px;
    }

    .c-side-navbar {
        display: block;
    }

    .c-side-content{
        display: none;
    }
    .c-contact-side {
        display: block;
    }
    .c-side-header {
        justify-content: flex-end;
    }

    .c-second-search-bar {
        display: flex;
    }

    .c-navbar {
        justify-content: space-around;
    }
    .c-header-black-box {
        height: 100%;
    }
    .c-rectangular {
        background-color: var(--main-color);
        height: 100%;
    }
    .c-navbar-item {
        font-size: 2vw;
    }
    .c-navbar-item-selected {
        font-size: 2vw;
    }

    .c-sub-header {
        display: none;
    }

    .c-triangle-left {
        display: none;
    }

    .c-triangle-right {
        display: none;
    }

    .c-logo-pos {
        width: 100%;
    }
    .c-hidden-button {
        display: block;
    }

    .c-main-header {
        z-index: 100;
        position: fixed;
        top: 0px;
        border-bottom: 1px solid var(--dark-grey);
    }

    .c-menu {
        padding-right: 30px;
        padding-left: 30px;
        justify-content: space-between;
    }

    .c-contact-us {
        flex-direction: column-reverse;
        align-items: flex-end;
        padding: 30px;
    }

    .c-contact-us-info {
        width: auto;
        padding-bottom: 30px;
    }

    .c-site-info {
        padding-bottom: 30px;
    }

    .c-footer-logo {
        width: 100%;
    }

    .c-second-logo {
        padding-top: 0px;
        width: 170px;
    }
    .googleMap {
        width: 100%;
    }

    .c-news-item {
        flex-direction: column-reverse;
    }

    .c-news-item {
        padding-left: 50px;
        padding-right: 50px;
    }

    .c-news-pic {
        width: 90%;
    }

    .c-news-text {
        padding: 20px 0px 0px 0px;
        width: 90%;
    }

    .larg-size {
        display: none;
    }

    .small-size {
        display: block;
    }

    .c-carousel-text {
        position: relative;
        margin: 0px;
        width: 100%;
        padding: 30px 30px 50px 30px;
        border-radius: 0px;
    }
	#carouselExampleIndicators2 {
		height: 320px;
	}
}

@media screen and (max-width: 800px) {
    .c-404 {
        flex-direction: column;
    }

    .c-404-info {
        padding-left: 0px;
        align-items: center;
    }

    .c-product-img {
        align-items: center;
        width: 100%;
        height: auto;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .card-body {
        flex-direction: column-reverse;
    }
}

@media screen and (max-width: 750px) {
    .nav {
        font-size: 12px;

    }

    .c-image-text {
        bottom: 60%;
    }
	#carouselExampleIndicators2 {
		height: 400px;
	}
}

@media screen and (max-width: 650px) {
    .c-container {
        padding-right: 30px;
        padding-left: 30px;
    }
    .c-about-us {
        flex-direction: column-reverse;
    }
    .c-about-us-item {
        width: 100%;
        padding-bottom: 30px;
    }
    .c-hoze {
        flex-direction: column;
        align-items: center;
    }

    .c-recent-projects {
        flex-direction: column;
        align-items: center;
    }

    .c-logo {
        margin: 0px;
        width: 100%;
    }

    .c-main-header {
        justify-content: center;
    }

    .c-hoze-item{
        width: 100%;
        padding-bottom: 30px;
    }

    .c-projects-item{
        width: 100%;
        padding-bottom: 30px;
    }
    .c-peyvand-content {

        padding: 10px 30px 10px 30px;
    }
    .c-menu-item-card {
        width: 90px;
        height: 90px;
    }

    .c-menu-item-pic {
        width: 30px;
        height: 30px;
    }

    .c-menu {
        padding-top: 30px;
    }

    .c-menu-item {
        width: 30%;
        margin-left: 0px;
        margin-right: 0px;
    }

    .c-menu-item-text {
        width: 90px;
    }

    .c-structure-content {
        padding-left: 30px;
        padding-right: 30px;
    }
	
	.c-product-table {
        padding: 50px 30px 50px 30px;
    }

}

@media screen and (max-width: 500px) {
    .c-chips-info {
        width: 100%;
    }

    .c-chips-button {
        width: 100%;
        margin-bottom: 10px;
    }

    /* .c-chips-button {
        width: 100%;
    } */

    .c-table-container {
        overflow-y: visible;
        overflow-x: scroll;
    }


    table {
        width: 800px;
        
    }
	#carouselExampleIndicators2 {
		height: 450px;
	}
}

@media screen and (max-width: 450px) {
    .c-main-header {
        height: 70px;
    }

    .c-close-button {
        top: 15px;
    }

    .c-header-size-filler {
        height: 70px;
    }
		#carouselExampleIndicators2 {
		height: 480px;
	}
}

@media screen and (max-width: 400px) {
    .c-project-item {
        margin: 40px 0px 40px 0px;
    }

    .c-text-field {
        margin-left: 0px;
        margin-right: 0px;
        width: 100%;
    }

    .c-input {
        width: 100%;
    }

    .c-contact-us-form {
        padding: 10px 30px 10px 30px;
    }

    .c-column {
        width: 100%;
    }

    .nav {
        /* direction: rtl; */
        /* overflow-x: scroll; */
        /* overflow-y: hidden; */
        flex-direction: column-reverse;
        /* overflow-x: scroll; */
        /* font-size: 12px; */
        /* margin-bottom: 50px; */
    }
		#carouselExampleIndicators2 {
		height: 560px;
	}
}

@media screen and (max-width: 350px) {
    .c-certificate-item {
        margin: 20px 0px 20px 0px;
        width: 180px;
        height: 240px;
    }

    .c-certificate-item.landscape {
        width: 240px;
        height: 180px;
    }

    .c-zoom-in {
        font-size: 20px;
        bottom: 70%;
    }
	#carouselExampleIndicators2 {
		height: 650px;
	}
}

@media screen and (max-width: 300px) {

    .c-close-button {
        left: auto;
        right: 20px;
    }

    .c-menu {
        flex-direction: column;
        align-items: center;
    }

    .c-peyvand-pic {
        width: 100%;
    }

    .c-qrcode-content {
        /* display: flex;
        align-items: center; */
        width: 100%;
        flex-direction: column;
        margin-bottom: 20px;
    }

    .c-qrcode-info {
        padding-top: 20px;
    }
}

@media screen and (max-width: 250px) {
    .c-second-logo {
        width: 100%;
    }

    .c-more-item-card {
        width: 150px;
        height: 150px;;
    }

    .c-person-pic {
        width: 140px;
        height: 140px;
    }
}