@font-face {
    font-family: 'iranyekanwebbold';
    src: url('../../Fonts/iranyekanwebbold.eot') format('embedded-opentype'), url('../../Fonts/iranyekanwebbold.ttf') format('truetype'), url('../../Fonts/iranyekanwebbold.woff') format('woff'), url('../../Fonts/iranyekanwebbold.woff2') format('woff2');
}
@font-face {
    font-family: 'iranyekanwebregular';
    src: url('../../Fonts/iranyekanwebregular.woff2') format('woff2');
}
html{
    overflow-x:hidden
}

    input:focus, textarea:focus {
        outline: 1px solid #636363;
    }



.mainContent{
    position:relative
}

.background {
    position: relative;
    z-index: 2
}

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

.persianLogo{
    position:absolute;
    width:4.0625%;
    right:66.6145%;
    z-index:10
}

.persianLogo img{
    width:100%
}

    .persianLogo img {
        width: 100%;
        transition: all 0.3s ease-in-out 0s;
    }

        .persianLogo img:hover {
            cursor: pointer;
            box-shadow: 0 0 10px black
        }

    .EngLogo {
        position: absolute;
        width: 5.208%;
        right: 30.5208%;
        z-index: 10
    }

.EngLogo img{
    width:100%
}




.menu {
    position: absolute;
    text-align: right;
    direction: ltr;
    z-index: 10
}

.column-one {
    position: absolute;
    width: 10.1146%;
    right: 19.8%;
    z-index: 10
}


.column-two {
    display: none;
    position: absolute;
    width: 60%;
    left: 96%;
    top: 0;
    padding-left: 7%;
    text-align: center
}

.column-three {
    width: 97%;
}



.description-1{
    position:absolute;
    width:15.9375%;
    right:35.127%;
    z-index:10
}

.description-1 p{
    font-family:shin;
    color:#daa90e;
    text-align:right;
    font-size:39px;
    margin-bottom:0;
    line-height:41px
}

.description-2 {
    position: absolute;
    width: 13.3333%;
    right: 51.3645%;
    z-index: 10
}

    .description-2 p {
        font-family: shin;
        color: #daa90e;
        text-align: right;
        font-size: 39px;
        margin-bottom: 0;
        direction:rtl;
        line-height:47px

    }

.description-3 {
    position: absolute;
    width: 19.6354%;
    right: 11.5625%;
    z-index: 10
}

    .description-3 p {
        font-family: 'B Nazanin';
        color: #d1d1d1;
        text-align: right;
        font-size: 28px;
        margin-bottom: 0;
        direction: rtl;
        line-height: 38px;
        text-align:justify
    }

.contactForm{
    position:absolute;
    width:27.8125%;
    right:59.7916%;
    z-index:10;
    text-align:right
}

.form-group{
    margin-bottom:8px
}

#nameForm {
    width: 100%;
    background-color: #f0f8ff00;
    font-family: iranyekanwebbold;
    direction: rtl;
    height: 58px;
    border: solid 2px #636363;
    border-top-right-radius: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 0;
    color: #444342;
    padding-right: 35px
}

#phoneForm {
    width: 100%;
    background-color: #f0f8ff00;
    font-family: iranyekanwebbold;
    direction: rtl;
    height: 58px;
    border: solid 2px #636363;
    border-top-left-radius: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0;
    color: #444342;
    padding-right: 35px
}

.form-check{
    padding:0
}

#massageForm {
    width: 100%;
    background-color: #f0f8ff00;
    font-family: iranyekanwebbold;
    direction: rtl;
    height: 242px;
    border: solid 2px #636363;
    border-top-right-radius: 40px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 0;
    color: #444342;
    padding-right: 35px;
    padding-top:17px;
    resize:none
}


.btn-submit {
    width: 27.3585%;
    background-color: #545454;
    font-family: iranyekanwebbold;
    direction: rtl;
    min-height: 50px;
    border-top-left-radius: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0;
    color: white;
    font-size: 16px;
    margin-top: 8px;
      overflow: hidden ;
      transform: ease-in-out;
      will-change: transform;
      z-index: 0
}

    

    .btn-submit:focus{
        outline:none !important;
    }

    body {
        background-color: #e6e6e6
    }


.slider {
    width: 48.4375%;
    position: absolute;
    z-index: 0;
    right: 32.31%;
}
 
.slider img{
    width:100%
}


.social{
    margin-left:-2%
}




.footer {
    position: absolute;
    z-index: 10;
    right: 61.875%;
}





.englishFont{
    font-family:Ebrima
}

.padding-top-20 {
    padding-top: 20px
}



.rights{
    right:20%;
    text-align:right;
    font-size:18px
}


/*button Style*/


.button_su {
    overflow: hidden;
    position: relative;
    display: inline-block;
    border-radius: 3px;
    margin-bottom: 30px;
    margin-top: 6px;
    border-radius: 40px 0;
    overflow: hidden
}

.su_button_circle {
    background-color: red;
    border-radius: 1000px;
    position: absolute;
    left: 0;
    top: 0;
    width: 0px;
    height: 0px;
    margin-left: 0px;
    margin-top: 0px;
    pointer-events: none;
    /*animation-timing-function: ease-in-out; */
}

.button_su_inner {
    display: inline-block;
    background: #545454;
    color: white;
    font-size: 20px;
    font-weight: normal;
    width: 145px;
    text-align: center;
    border-radius: 40px 0 !important;
    transition: 400ms;
    text-decoration: none;
    padding: 0;
    z-index: 100000;
    height: 50px;
    line-height: 45px;
}

.button_text_container{
}

.button_text_container {
    position: relative;
    z-index: 10000;
    font-family: iranyekanwebbold;
}

.explode-circle {
    animation: explode 0.5s forwards;
}

.desplode-circle {
    animation: desplode 0.5s forwards;
}

.button_text_container:hover {
    color: white !important
}

.button_su_inner:hover {
    color: white !important
}

@keyframes explode {
    0% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(225, 225, 225, 0.2);
    }

    100% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: #5e5c5cb8;
    }
}

@keyframes desplode {
    0% {
        width: 400px;
        height: 400px;
        margin-left: -200px;
        margin-top: -200px;
        background-color: #5e5c5cb8;
    }

    100% {
        width: 0px;
        height: 0px;
        margin-left: 0px;
        margin-top: 0px;
        background-color: rgba(225, 225, 225, 0.2);
    }
}

@media only screen and (max-width:1900px){
    .description-3 p{
        font-size:26px
    }

    .description-1 p{
        font-size:35px
    }
}

@media only screen and (max-width:1710px) {
    .description-3 p {
        font-size: 24px
    }

    .description-1 p {
        font-size: 33px
    }

    .description-2 p{
        font-size:35px
    }

    #nameForm{
        height:50px
    }

    #phoneForm{
        height:50px
    }

    #massageForm{
        height:210px
    }
}

@media only screen and (max-width:1610px) {
    .description-1{
        right:34%
    }

    .footer p{
        margin-bottom:5px
    }

    .description-1 {
        width: 20.938%;
        right: 35.127%
    }

    .description-3 {
        width: 19.635%
    }

    .description-3 p {
        font-size: 22px;
        line-height:32px
    }

    .description-1 p {
        font-size: 33px
    }

    .description-2 {
        right: 52.3645%
    }


    .description-2 p {
        font-size: 35px
    }

    .menu-item p{
        font-size:23px;
        line-height:17px
    }

    .rights{
        right:16%
    }

    #nameForm, #phoneForm {
        height: 42px
    }

    .button_su_inner{
        height:38px;
        line-height:33px;
        font-size:18px;
        width:130px
    }

    #massageForm {
        height: 200px
    }

    .btn-submit{
        min-height:42px
    }
}

@media only screen and (max-width:1520px) {
    .description-3 p {
        font-size: 24px;
        line-height:32px
    }

    .description-1 p {
        font-size: 31px;
        line-height:38px
    }

    .description-2 p {
        font-size: 32px
    }

    .contactForm{
        width:31%
    }

    #massageForm{
        height:170px
    }

    .btn-submit{
        min-height:43px
    }

    .ContactUs{
        padding-top:20px
    }

    .column-one {
        width: 11.115%;
        right: 18.8%;
    }

    .menu-item p{
        font-size:22px;
        line-height:15px
    }
}

@media only screen and (max-width:1450px) {
    .rights {
        right: 13%
    }
}

@media only screen and (max-width:1350px){
    .contactForm{
        width:36%
    }

    #massageForm{
        height:140px
    }

    .btn-submit{
        width:23%
    }

    .column-one {
        width: 12.115%;
        right: 17.8%;
    }

    .menu-item p {
        font-size: 21px;
        line-height: 13px
    }
}

@media only screen and (max-width:1320px) {
    .description-3 p {
        font-size: 21px;
        line-height:29px
    }


}


@media only screen and (max-width:1300px) {
    .rights {
        right: 10%
    }

    .footer p{
        margin-bottom:0
    }
}

@media only screen and (max-width:1250px) {
    .contactForm {
        width: 40%;
        right: 56.792%
    }

    #massageForm {
        height: 110px
    }

    .btn-submit {
        width: 23%
    }

    .footer h4 {
        font-size: 120%
    }
    
    .footer h5 {
        font-size: 120%
    }

    .padding-top-20{
        padding-top:15px
    }

    .social img {
        width: 20px
    }

    .footer{
        width:14%
    }

    .column-one {
        width: 13.115%;
        right: 16.8%;
    }

    .menu-item p {
        font-size: 21px;
    }
}

@media only screen and (max-width:1200px) {
    .description-3 {
        width: 18.635%;
        right: 10.563%;
    }

    .description-3 p {
        font-size: 20px;
        line-height: 25px
    }

    .description-1 p{
        font-size:29px;
        line-height:34px;
    }


    .description-2 p{
        font-size:29px
    }

    .description-3 p {
        line-height: 23px
    }

    .description-1 p {
        font-size: 24px;
        line-height: 29px;
    }


    .description-2 p {
        font-size: 24px
    }

    .column-three{
        width:110%
    }

    .rights {
        right: 7%
    }
}


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


    .menu-item p {
        font-size: 20px;
        line-height: 10px
    }

    .footer p {
       line-height:20px;
       font-size:15px
    }
    h4{
        margin-bottom:5px
    }

    .footer .social a img{
        width:20px
    }
}



@media only screen and (max-width:1100px){
    #nameForm{
        height:40px;
        font-size:14px
    }

    #phoneForm {
        height: 40px;
        font-size: 14px
    }

    #massageForm{
        height:95px
    }

    .button_su_inner {
        height: 33px;
        line-height: 28px;
        font-size: 16px;
        width: 110px
    }

    .btn-submit{
        min-height:37px;
        font-size:17px
    }
}

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


    .menu-item p {
        font-size: 19px;
        line-height: 9px
    }
}


@media only screen and (max-width:991px){
    .EngLogo{
        width:10.0908%;
        right:8.073%
    }

    input:focus, textarea:focus {
        outline: none !important;
    }

    .slider{
        width:74.672%;
        right:12.714%
    }

    .rights {
        right: 0;
        text-align: center;
        width: 100%;
        padding: 0
    }

    .persianLogo{
        width:6%;
        right:75.8%
    }

.persianLogo img {
    width: 100%;
    transition: all 0.3s ease-in-out 0s;
}

.persianLogo img:hover {
    cursor: pointer;
    box-shadow: 0 0 10px black
}

    .mobileMenu .collapseIcon img{
        width:100%
    }

    .rights p {
        font-size: 18px
    }

    .mobileMenu {
        display: block;
        width: 5%;
        right: 0;
        position: absolute;
        z-index: 12
    }

    .description-1{
        width:39.354%;
        right:26.2361%
    }

    .description-1 p{
        font-size:43px;
        line-height:45px
    }

    .description-2{
        width:25.227%;
        right:52.17%
    }


    .description-2 p{
        font-size:43px;
    }

    .description-3{
        width:38.3451%;
        right:26.64%
    }


    .description-3 p{
        font-size:28px;
        line-height:35px
    }

    .contactForm{
        width:62.06%;
        right:21.49%
    }

    #nameForm{
        height:55px;
        font-size:20px;
        color:black;
    }


    #phoneForm {
        height: 55px;
        font-size: 20px;
        color:black
    }


    #massageForm {
        height: 280px;
        font-size: 20px;
        color:black
    }

    .button_su_inner {
        height: 55px;
        line-height: 50px;
        font-size: 18px;
        width: 160px
    }

    .button_su{
        margin-top:70px
    }

    form {
        text-align: left
    }

    .btn-submit{
        margin-top:70px;
        min-height:55px;
        font-size:20px
    }

    .footer{
        width:21.49%;
        left:10%
    }

    .footer h4{
        font-size:140%
    }
}

@media only screen and (max-width:915px) {
    .description-3 p {
        font-size: 28px
    }
}

@media only screen and (max-width:880px){
    #massageForm{
        height:220px
    }
}

@media only screen and (max-width:850px){
    .description-1 p{
        font-size:36px;
        line-height:36px;
    }

    .description-3 p{
        font-size:25px;
        line-height:33px;
    }

    .description-2 p{
        font-size:36px
    }


    .button_su_inner {
        height: 50px;
        line-height: 45px;
        width: 140px
    }

    .button_su{
        margin-top:50px
    }
}


@media only screen and (max-width:768px){
    .description-1 {
        width: 41.354%;
        right: 24.236%
    }

    .description-3 {
        width: 44.345%;
        right: 24.236%
    }

        .description-3 p{
            font-size:23px;
            line-height:32px
        }
}

@media only screen and (max-width:690px){
    .description-1 p{
        font-size:30px;
        line-height:30px
    }

    .footer h4{
        font-size:130%
    }

    .description-3 p{
        font-size:21px;
        line-height:28px
    }

    .description-2 p{
        font-size:30px
    }

    #nameForm{
        height:55px;
        font-size:18px
    }

    #phoneForm {
        height: 55px;
        font-size: 18px
    }

    #massageForm{
        height:200px;
        font-size:18px
    }

    .btn-submit{
        min-height:50px;
        font-size:20px;
        width:26%;
        margin-top:50px
    }
}


@media only screen and (max-width:650px){
    #massageForm {
        height: 160px
    }

    .footer {
        width: 28%;
        left: 6%
    }

    
}


@media only screen and (max-width:576px){
    .mobileMenu {
        min-width: 40px;
    }
    .button_su_inner{
        height:45px;
        line-height:40px;
        width:130px
    }

    .button_su {
        margin-top: 20px
    }
    .slider {
        width: 79.86%;
        right: 9.895%
    }

    #nameForm, #phoneForm {
        height: 45px
    }

    .EngLogo {
        display: none
    }

    .persianLogo{
        width:8.68%;
        right:82.465%
    }

    .description-1{
        width:50.34%;
        right:23.2638%
    }

    .description-3 {
        width: 46.005%;
        right: 27.257%
    }

    .description-2 {
        width: 31.5138%;
        right: 49.1319%
    }

    .contactForm{
        right:13.368%;
        width:71.18%
    }

    .btn-submit {
        margin-top: 15px;
        min-height:40px;
        font-size:18px
    }




    .social img{
        width:30px
    }

    .rights{
        top:unset;
        bottom:3%
    }

    .footer p{
        line-height:27px
    }

    .rights p {
        font-size: 16px
    }
}


@media only screen and (max-width:470px){
    .description-1{
        width:60%;
        right:18%
    }

    .rights {
        bottom: 2%
    }

    .footer h4{
        font-size:123%
    }

    .description-3 {
        right: 18%;
        width: 60%;
    }

    #nameForm{
        height:45px;
        font-size:16px
    }

    #phoneForm {
       height: 45px;
        font-size: 16px
    }

    #massageForm{
        font-size:16px
    }

    .button_su_inner {
        height: 40px;
        line-height: 35px;
        width: 100px;
        font-size:16px
    }

    .button_su {
        margin-top: 15px
    }

    .rights{
        margin-top:40px
    }

    .btn-submit{
        width:30%;
        font-size:16px
    }
}


@media only screen and (max-width:440px){
    .description-1 p{
        font-size:25px;
        line-height:25px
    }

    .description-3 p{
        font-size:18px;
        line-height:27px
    }

    .description-2 p{
        font-size:25px
    }

    .rights{
        margin-top:70px;
        width:100%
    }

    .rights p {
        width: 90%;
        margin: 0 auto
    }

    .social img{
        width:26px
    }

    .footer{
        width:40% !important
    }

    .footer p {
        line-height: 20px !important
    }

 
}