.colors {
        color: #062a4d;
        color: #d0df56;
        color: #e8eeef;
        color: #b2eef4;
    }
    
    @font-face {
        font-family: 'yekan';
        src: url('../fonts/BYekan.eot');
        src: url('../fonts/BYekan.eot?#iefix') format('embedded-opentype'), url('../fonts/BYekan.woff') format('woff'), url('../fonts/BYekan.ttf') format('truetype'), url('../fonts/BYekan.svg#webfont') format('svg');
    }
    
    @font-face {
        font-family: 'shabnam';
        src: url('../fonts/Shabnam-Medium-FD.eot');
        src: url('../fonts/Shabnam-Medium-FD.eot?#iefix') format('embedded-opentype'), url('../fonts/Shabnam-Medium-FD.svg#../fonts/Shabnam-Medium-FD') format('svg'), url('../fonts/Shabnam-Medium-FD.ttf') format('truetype'), url('../fonts/Shabnam-Medium-FD.woff') format('woff'), url('../fonts/Shabnam-Medium-FD.woff2') format('woff2');
    }
    
    @font-face {
        font-family: 'esffehan';
        src: url('../fonts/B_Esfehan_Bold.eot');
        src: url('../fonts/B_Esfehan_Bold.eot?#iefix') format('embedded-opentype'), url('../fonts/B_Esfehan_Bold.woff') format('woff'), url('../fonts/B_Esfehan_Bold.ttf') format('truetype'), url('../fonts/B_Esfehan_Bold.svg#webfont') format('svg');
    }
    /*==============================[SETTINGS]==================================*/
    
    * {
        padding: 0;
        margin: 0;
        border: none;
        text-decoration: none;
        outline: 0;
        box-sizing: border-box;
    }
    
    *:focus,
    input:focus,
    textarea:focus,
    .form-control:focus {
        outline: none !important;
    }
    
    .form-control:focus {
        outline: 0px !important;
        -webkit-appearance: none;
        box-shadow: none !important;
        border-color: #ced4da !important;
    }
    
    textarea:focus,
    input:focus {
        outline: none;
    }
    
    input::-moz-focus-inner {
        border: 0;
    }
    
    a,
    a:LINK,
    a:VISITED {
        text-decoration: none;
    }
    
    ul {
        list-style: none;
    }
    
    table {
        border-collapse: collapse;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        font-family: esffehan;
        color: #062a4d;
        border-right: 4px solid #d0df56;
        padding: 0 10px;
    }
    
    .btn,
    .btn:link,
    .btn:visited {
        padding: 3px 5px;
        border-radius: 3px;
        transition: all .2s;
    }
    
    .btn1,
    .btn1:link,
    .btn1:visited {
        color: #d0df56;
        border: 2px solid #d0df56;
        background-color: rgba(208, 223, 86, 0);
        text-shadow: none;
    }
    
    .btn1:hover,
    .btn1:focus {
        background-color: rgba(208, 223, 86, 1);
        color: white;
    }
    
    .btn2,
    .btn2:link,
    .btn2:visited {
        text-shadow: none;
        background-color: rgba(208, 223, 86, 1);
        color: white;
        border: 2px solid #d0df56;
    }
    
    .btn2:hover,
    .btn2:focus {
        color: #d0df56;
        border: 2px solid #d0df56;
        background-color: rgba(208, 223, 86, 0);
    }
    
    .btn3,
    .btn3:link,
    .btn3:visited {
        color: #b2eef4;
        border: 2px solid #b2eef4;
        background-color: rgba(208, 223, 86, 0);
        text-shadow: none;
    }
    
    .btn3:hover,
    .btn3:focus {
        background-color: rgba(178, 238, 244, 1);
        color: #062a4d;
    }
    
    .btn4,
    .btn4:link,
    .btn4:visited {
        text-shadow: none;
        background-color: rgba(178, 238, 244, 1);
        color: #062a4d;
        border: 2px solid #b2eef4;
    }
    
    .btn4:hover,
    .btn4:focus {
        color: #d0df56;
        border: 2px solid #b2eef4;
        background-color: rgba(208, 223, 86, 0);
    }
    
    .clear {
        clear: both;
    }
    /*==============================[CSS]==================================*/
    
    html {
        margin: 0;
        padding: 0;
        direction: rtl;
    }
    
    body {
        background-color: #fff;
        margin: 0;
        padding: 0;
        font-family: shabnam;
        color: #062a4d;
        text-align: justify;
    }
    
    nav {
        border-bottom: none;
        transition: border .3s ease-in-out;
    }
    
    .navUnderline {
        border-bottom: 4px solid #b2eef4;
    }
    
    .navbar-brand {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .navbar-brand img {
        width: 60px;
    }
    
    .nav-link:link,
    .nav-link:visited {
        display: block;
        color: #062a4d;
        padding: 20px;
        position: relative;
    }
    
    .nav-link::before,
    .nav-link::after {
        content: "";
        position: absolute;
        transition: all .4s ease-in-out;
    }
    
    .nav-link::before {
        content: '[';
        right: 50%;
        color: transparent;
    }
    
    .nav-link::after {
        content: ']';
        left: 50%;
        color: transparent;
    }
    
    .nav-link:hover::before {
        color: #b2eef4;
        right: 0px;
        transition: all .2s ease-in-out;
    }
    
    .nav-link:hover::after {
        color: #b2eef4;
        left: 0px;
        transition: all .2s ease-in-out;
    }
    
    .nav-item .active {
        cursor: default;
    }
    
    .nav-item .active::after,
    .nav-item .active::before {
        color: #b2eef4;
    }
    
    .nav-item .active::after {
        left: 0px;
    }
    
    .nav-item .active::before {
        right: 0px;
    }
    
    .carousel-item {
        transition: -webkit-transform 3s ease;
        transition: transform 3s ease;
        transition: transform 3s ease, -webkit-transform 3s ease;
    }
    
    .carousel-item img {
        filter: brightness(.5)
    }
    
    .carousel-caption h5 {
        font-weight: 900;
        border: none;
        color: #d0df56;
        text-shadow: .08vw -.08vw .05vw rgba(0, 0, 0, .6);
        padding: 1vw;
        padding-bottom: 2vw;
        animation-delay: 1.2s;
    }
    
    .carousel-caption p {
        text-shadow: 0 .05vw 1px rgba(0, 0, 0, .3);
        animation-delay: 1s;
    }
    
    .carousel-caption p a,
    .carousel-caption p a:link,
    .carousel-caption p a:visited {
        padding: .5vw 1vw;
        animation-delay: 4s;
        animation-duration: 2s;
    }
    
    main {
        padding-top: 80px;
    }
    
    .midDiv {
        margin-top: 100px;
    }
    
    .midCol1 {
        padding: 1vw;
    }
    
    .midIMG {
        border: 2px solid #d0df56;
        position: relative;
        margin-top: 0;
        margin-right: 20px;
        margin-bottom: 20px;
        width: 100%;
        overflow: visible;
        transition: all .2s;
    }
    
    .midIMG img {
        position: relative;
        left: -20px;
        bottom: -20px;
        width: 100%;
        transition: all .2s;
    }
    
    .midCol1:hover .midIMG img {
        left: 20px;
        bottom: 20px;
        transition: .2s;
    }
    
    .midCol1:hover .midIMG {
        margin-top: 20px;
        margin-right: 0;
        margin-bottom: 0;
    }
    
    .midCol2 div .col {
        text-align: center;
        padding: 1vw;
    }
    
    .midCol2 div .col div {
        border: 1px solid rgba(6, 42, 77, 1);
        transition: .3s;
    }
    
    .midCol2 .midIcon {
        position: relative;
        width: 8vw;
        height: 8vw;
        display: inline-block;
    }
    
    .midCol2 .midIcon::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        display: inline-block;
        transform: rotate(20deg);
        width: 8vw;
        height: 8vw;
        z-index: -10;
        transition: all .2s;
        background-image: url(../images/trianlge.png);
    }
    
    .midCol2 .midIcon img {
        width: 8vw;
    }
    
    .midCol2 .col-6 div {
        padding: 3px 10px;
    }
    
    .midCol2 h4 {
        font-family: yekan;
        font-weight: bold;
        letter-spacing: -1px;
        border: none;
        transition: all .2s;
        position: relative;
    }
    
    .midCol2 h4::after {
        content: "";
        position: absolute;
        width: 20%;
        left: 40%;
        bottom: -10px;
        height: 2px;
        background-color: #062a4d;
        transition: all .2s .2s ease-in-out;
    }
    
    .midCol2 .col-6:hover div span::before {
        transform: rotate(0deg);
    }
    
    .midCol2 .col-6:hover div h4::after {
        background-color: #d0df56;
        width: 60%;
        left: 20%;
    }
    
    .midCol2 .col-6 p {
        padding: 1vw;
    }
    
    .midDivAdr {
        padding: 13px 10px !important;
    }
    
    .midDivAdr td {
        text-align: right;
        padding: 7px 5px;
    }
    
    .midDivAdr .midDivIco {
        width: 40px;
        height: 40px;
        display: inline-block;
        background-position: top center;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
    
    .midDivIco.tel {
        background-image: url(../images/telegram.png);
    }
    
    .midDivIco.inst {
        background-image: url(../images/instagram.png);
    }
    
    .midDivAdr .midDivIco:hover {
        background-position: bottom center;
    }
    
    .exprcL1 {
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        font-weight: bold;
        text-align: center;
        background-image: url(../images/exprn.jpg);
        cursor: default;
        background-size: cover;
        background-position: left center;
        transition: background-position 5s;
        text-align: left;
    }
    
    .exprcL1:hover {
        background-position: right center;
        transition: background-position 10s linear;
    }
    
    .exprcL2 {
        display: table;
    }
    
    .exprcL2 div {
        display: table-cell;
        vertical-align: middle;
        text-align: justify;
    }
    
    .exprcR>div {
        height: 50%;
        width: 100%;
        display: table;
    }
    
    .exprcR1,
    .exprcR2,
    .exprcR3,
    .exprcR4 {
        display: table-cell;
        position: relative;
        padding: 20px;
    }
    
    .exprcR1,
    .exprcR2 {
        vertical-align: bottom;
    }
    
    .exprcR1::before,
    .exprcR2::before {
        content: "";
        border-bottom: 1px solid #b2eef4;
        position: absolute;
        height: 60%;
        width: 50%;
        bottom: 0;
    }
    
    .exprcR3,
    .exprcR4 {
        vertical-align: top;
    }
    
    .exprcR3::before,
    .exprcR4::before {
        content: "";
        border-top: 1px solid #b2eef4;
        position: absolute;
        height: 60%;
        width: 50%;
        top: 0;
    }
    
    .exprcR1,
    .exprcR3 {
        text-align: left;
    }
    
    .exprcR1::before,
    .exprcR3::before {
        border-left: 1px solid #b2eef4;
        left: 0;
    }
    
    .exprcR2,
    .exprcR4 {
        text-align: right;
    }
    
    .exprcR2::before,
    .exprcR4::before {
        border-right: 1px solid #b2eef4;
        right: 0;
    }
    
    .exprcR1 span,
    .exprcR2 span,
    .exprcR3 span,
    .exprcR4 span {
        font-size: 6vw;
        font-weight: 900;
        display: block;
        line-height: 4vw;
        /* color: #b2eef4; */
    }
    
    .midBnner {
        height: 50vh;
        background-image: url(../images/midBan1.jpg);
        background-attachment: fixed;
        background-size: cover;
        background-repeat: no-repeat;
        margin: 40px auto;
        text-align: center;
        background-position: center;
        padding: 15vh 2vw;
        position: relative;
    }
    /* .midBnner::before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background-color: rgba(0, 0, 0, .8);
        z-index: 1 !important;
    } */
    
    .midBnner h1,
    .midBnner h2 {
        z-index: 10 !important;
        border: none;
    }
    
    .midBnner h1 {
        color: white;
        overflow: hidden;
        font-family: shabnam;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
    }
    
    .midBnner h2 {
        font-size: 4em;
        color: #b2eef4;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0), #b2eef4, rgba(0, 0, 0, 0));
        background-repeat: no-repeat;
        background-size: 80%;
        animation: animate 2s linear infinite;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
        display: inline-block;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, .08);
    }
    
    @keyframes animate {
        0% {
            background-position: 500%;
        }
        90% {
            background-position: -500%;
        }
        100% {
            background-position: -500%;
        }
    }
    
    .homeBrands {
        background-color: #e8eeef;
        min-height: 20px;
        text-align: center;
        min-height: 100px;
    }
    
    .homeBrands span {
        font-size: 2.5rem;
        font-family: esffehan;
        border-bottom: 4px dotted #d0df56;
    }
    
    .homeBrands div div div div div {
        min-height: 30px;
        margin: 10px 0;
        text-align: center;
    }
    
    .homeBrands div div div div div img {
        width: 100%;
        filter: grayscale(100%);
        transition: all .2s ease-in-out;
    }
    
    .homeBrands div div div div img:hover {
        filter: grayscale(20%);
    }
    
    .mainContact {
        margin: 80px auto;
    }
    
    .mainContact div div {
        text-align: center;
        min-height: 20vw;
        color: white;
        display: table;
        margin: 10px auto;
    }
    
    .mainContact div div div {
        display: table-cell;
        vertical-align: middle;
        background-color: #062a4d;
    }
    
    .mainContact div div div h5 {
        border: none;
        display: inline-block;
        background-position: right center;
        background-size: 30px;
        padding: 10px 40px 5px 5px;
        background-repeat: no-repeat;
        color: #e8eeef;
    }
    
    .mainContact div div div input,
    .mainContact div div div textarea {
        display: block;
        width: 80%;
        margin: 5px auto;
        padding: 5px;
        border-radius: 4px;
        font-size: 90%;
    }
    
    .mainContact div div div textarea {
        height: 90px;
        resize: none;
    }
    
    .mainContact div div div p {
        padding: 40px;
    }
    
    .mainContact iframe {
        width: 95%;
        display: block;
        height: 16vw;
        margin: 0 auto;
    }
    
    footer {
        min-height: 50px;
        margin: 0;
        margin-top: 40px;
        border-top: 3px solid #d0df56;
        background-color: #e8eeef;
        text-align: center;
        padding: 20px;
        padding-bottom: 10px;
        font-size: 80%;
    }
    
    footer div a:link,
    footer div a:visited {
        display: inline-block;
        width: 30px;
        height: 30px;
        background-position: center bottom;
        background-repeat: no-repeat;
        background-size: 100% auto;
    }
    
    footer div a:hover,
    footer div a:focus {
        background-position: center top;
    }
    
    footer a:link,
    footer a:visited {
        color: #d0df56;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
    }
    
    footer a:hover,
    footer a:focus {
        color: #b2eef4;
    }
    
    .mainSoc {
        position: fixed;
        width: 50px;
        min-height: 50px;
        bottom: 60px;
        right: -80px;
        transition: all .3s 3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        direction: ltr;
        z-index: 200;
    }
    
    .mainSocIn {
        right: 10px;
    }
    
    .mainSoc a,
    .mainSoc a:link,
    .mainSoc a:visited {
        display: block;
        margin-top: 3px;
        height: 50px;
        width: 50px;
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: bottom center;
        border-width: 1px;
        border-style: solid;
        transition: background-color .3s;
        /* background-color: rgba(255, 255, 255, .4); */
        border-radius: 0;
    }
    
    .mainSoc a:hover {
        background-position: top center;
        /* border-radius: 50%; */
    }
    
    .mainSoc .soc1:hover {
        background-color: #d4235a;
    }
    
    .mainSoc .soc2:hover {
        background-color: #139bd0;
    }
    
    .mainSoc .soc3:hover {
        background-color: #3a559f;
    }
    
    .mainSoc .soc4:hover {
        background-color: #50abf1;
    }
    
    .mainSoc .soc5:hover {
        background-color: #0077b7;
    }
    
    .mainSoc .soc6:hover {
        background-color: #ff0000;
    }
    
    .mainSoc .whatsapp {
        background-image: url(/images/png/whatsapp2.png);
        background-size: 100%;
        background-position: center;
        border: none !important;
        transition: all .2s !important;
    }
    
    .mainSoc .whatsapp:hover {
        transform: scale(1.2);
        /* margin-left: 10px; */
    }
    
    .pageNotFound {
        text-align: center;
        padding: 50px 20px;
    }
    
    .pageNotFound h3 {
        padding: 20px 10px;
        border: none;
    }
    
    .pageNotFound img {
        width: 80%;
        margin-bottom: 30px;
    }
    
    .updating {
        text-align: center;
        padding: 10%;
    }
    
    .updating h2 {
        border: none;
    }
    
    .updating img {
        display: block;
        margin: 20vh auto 12vh auto;
    }
    
    .fullHeight {
        min-height: 80vh;
        overflow: auto;
    }
    
    .shine {
        transition: all .2s;
        overflow: hidden;
        position: relative;
    }
    
    .shine::before {
        position: absolute;
        top: 0;
        left: -85%;
        display: block;
        content: '';
        width: 50%;
        height: 100%;
        background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
        background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .7) 100%);
        -webkit-transform: skewX( -25deg);
        transform: skewX( -25deg);
        /* transition: all .3s; */
        z-index: -1000;
    }
    
    .shine:hover:before,
    .shine:focus:before {
        -webkit-animation: shine 1s;
        animation: shine .6s;
        z-index: 999;
    }
    
    @-webkit-keyframes shine {
        100% {
            left: 125%;
        }
    }
    
    @keyframes shine {
        100% {
            left: 125%;
        }
    }
    /*==============================[MEDIA]==================================*/
    
    @media only screen and (min-width: 1600px) {
        .d-flex {
            margin-left: 70px;
        }
        .carousel-caption {
            bottom: 50vh;
        }
        .carousel-caption h5 {
            font-size: 3vw;
        }
        .carousel-caption p {
            font-size: 1.5vw;
        }
        .midCol2 div .col div {
            height: 18vW;
        }
        .midCol2 .midIcon img {
            width: 110px;
        }
        .midCol2 .midIcon,
        .midCol2 .midIcon::before {
            width: 110px;
            height: 110px;
        }
        .exprcL1 {
            font-size: 17vw;
            letter-spacing: -2vw;
        }
    }
    
    @media only screen and (min-width: 1200px) and (max-width: 1599px) {
        .d-flex {
            margin-left: 70px;
        }
        .carousel-caption {
            bottom: 30vh;
        }
        .carousel-caption h5 {
            font-size: 4vw;
        }
        .carousel-caption p {
            font-size: 2vw;
        }
        .midCol2 div .col div {
            height: 22vW;
        }
        .midCol2 .midIcon img {
            width: 110px;
        }
        .midCol2 .midIcon,
        .midCol2 .midIcon::before {
            width: 110px;
            height: 110px;
        }
        .exprcL1 {
            font-size: 20vw;
            letter-spacing: -3vw;
        }
    }
    
    @media only screen and (min-width: 800px) and (max-width: 1199px) {
        .d-flex {
            margin-left: 70px;
        }
        .carousel-caption {
            bottom: 10vh;
        }
        .carousel-caption h5 {
            font-size: 6vw;
        }
        .carousel-caption p {
            font-size: 3vw;
        }
        main {
            padding-top: 80px;
        }
        .midCol2 div .col div {
            height: 30vW;
        }
        .midCol2 .midIcon img {
            width: 100px;
        }
        .midCol2 .midIcon,
        .midCol2 .midIcon::before {
            width: 100px;
            height: 100px;
        }
        .midCol2 h4 {
            font-size: 105%;
        }
        .exprcL1 {
            font-size: 20vw;
            letter-spacing: -3vw;
        }
        .exprcR>div {
            height: 20vh;
        }
        .exprcR1 span,
        .exprcR2 span,
        .exprcR3 span,
        .exprcR4 span {
            font-size: 8vw;
            line-height: 5vw;
        }
        .mainContact div div {
            min-height: 35vh;
        }
        .mainContact iframe {
            height: 26vh;
        }
    }
    
    @media only screen and (max-width: 799px) {
        .carousel-caption {
            bottom: 10vw;
        }
        .carousel-caption h5 {
            font-size: 6vw;
        }
        .carousel-caption p {
            font-size: 3vw;
        }
        main {
            padding-top: 60px;
        }
        .midCol2 div .col div {
            height: 40vh;
        }
        .midCol2 .midIcon img {
            width: 90px;
        }
        .midCol2 .midIcon,
        .midCol2 .midIcon::before {
            width: 90px;
            height: 90px;
        }
        .midCol2 h4 {
            font-size: 115%;
        }
        .exprcL1 {
            font-size: 32vw;
            letter-spacing: -5vw;
        }
        .exprcR>div {
            height: 20vh;
        }
        .exprcR1 span,
        .exprcR2 span,
        .exprcR3 span,
        .exprcR4 span {
            font-size: 14vw;
            line-height: 8vw;
        }
        .mainContact div div {
            min-height: 35vh;
        }
        .mainContact iframe {
            height: 27vh;
        }
    }