@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: 'iranyekanweblight';
    src: url('../../Fonts/iranyekanweblight.eot') format('embedded-opentype'), url('../../Fonts/iranyekanweblight.ttf') format('truetype'), url('../../Fonts/iranyekanweblight.woff') format('woff'), url('../../Fonts/iranyekanweblight.woff2') format('woff2');
}

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

@font-face {
    font-family: 'B Nazanin Bold';
    src: url('../../Fonts/B Nazanin Bold_YasDL.ttf') format('truetype');
}


@font-face {
    font-family: 'B Nazanin';
    src: url('../../Fonts/Far_Nazanin.ttf') format('truetype');
}

@font-face {
    font-family: 'shin';
    src: url('../../Fonts/Adobe arabic shin.ttf') format('truetype');
}

@font-face {
    font-family: 'ebrimabd';
    src: url('../Fonts/ebrimabd.ttf') format('truetype');
}

body {
    padding: 0;
    overflow:hidden
}
.display-500{
    display:none
}


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

.menu-item {
    font-family: 'shin';
    border-top-left-radius: 20px;
    border-bottom-right-radius: 20px;
    color: #1c1b17;
    margin-top: 4px;
    transition: all 0.3s ease-out 0s;
    padding-right: 12px
}


.animationSwing  {
    transition: all 0.3s ease-out 0s;
}

.animationSwing:hover {
    cursor: pointer
}

.animationSwing:hover img {
    transform: translateY(-10px);
    filter:drop-shadow(0 31px 10px #1717175c)
}

.animationSwing img {
    transition: all 0.3s ease-out 0s;
}

.animationSwing:hover img {
    filter:drop-shadow(0 31px 10px #17171775)
}




.animationSwing2  {
    transition: all 0.3s ease-out 0s;
}

.animationSwing2:hover {
    cursor: pointer
}

.animationSwing2:hover img {
    transform: translateY(-10px);
    filter:drop-shadow(0 31px 10px #00000091)
}

.animationSwing2 img {
    transition: all 0.3s ease-out 0s;
}

.animationSwing2:hover img {
    filter:drop-shadow(0 31px 10px #00000091)
}


.active-menu {
    background-color: #959595;
    color: white;
}


.BlogIndexContent{
    position:absolute;
    z-index:10;
    width:21.875%;
    right:21.302%;
    text-align:right
}


 .BlogIndexContent h2{
    color:#ffc800;
    font-family:shin;
    font-size:188%;
    margin-top:0;
    text-align:right
}


.numberfont{
    font-family:shin;
    font-size:25px
}


.BlogIndexContent p {
    color: #e5e5e5;
    font-family: 'B Nazanin';
    padding-right: 0;
    text-align: justify;
    direction: rtl;
    font-size: 17px;
    line-height: 26px
}

.BlogIndexContent  a span {
    color: #e6b032;
    font-family: shin;
    padding-right: 17.46411%;
    text-align: right;
    direction: rtl;
    font-size: 33px;
    line-height: 26px
}

.BlogIndexContent  a span:hover{
    text-decoration:none
}

.BlogIndex img{
    width:100%
}




.mainContent {
    position: relative
}

.background img {
    width: 100%;
    height: 100%
}


.BlogIndex{
    position:absolute;
    width:28.90526%;
    right:17.1875%;
    z-index:0
}

.EngLogo {
    position: absolute;
    right: 29.5%;
    width: 6.05%;
    z-index: 10
}

    .EngLogo:hover{
        cursor:pointer
    }

    .EngLogo img {
        width: 100%;
        z-index: 10
    }

.rights {
    position: absolute;
    width: 100%;
    padding-left: 56.25%;
    z-index: 10
}



.persianLogo {
    position: absolute;
    left: 29.4%;
    width: 4.1%;
    z-index: 10;
}

.extend{
    position:absolute;
    width:40%;
    right:-50%;
    bottom:0
}


.noScroll{
    overflow-y:hidden !important
}


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

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

.extend img:hover {
    box-shadow: none !important;
}

.paragrapg p {
    font-family: 'B Nazanin';
    color: #d1d1d1;
    font-size: 23px;
    text-align: justify;
    direction: rtl;
    line-height: 28px
}

.description {
    width: 11.98%;
    position: absolute;
    left: 25.25%;
    z-index: 10
}

    .description .logo {
        margin-bottom: 15px;
        width: 58%
    }

        .description .logo img {
            width: 100%
        }

.social {
    padding: 0 10px
}

.show-576{
    display:none !important
}





.textCenter {
    text-align: center
}


.Hood {
    position: absolute;
    width: 10.416%;
    right: 32.55%;
    z-index: 10
}


    .Hood img {
        width: 100%;
        filter: drop-shadow(0 31px 10px #171717)
    }

h2 {
    font-family: shin;
    color: #ffc800;
    margin-top: 20px;
    font-size: 29px;
    text-align: center;
    position: relative;
    z-index: 10
}


.Oven {
    position: absolute;
    width: 11.41%;
    right: 38.385%;
    z-index: 10
}


    .Oven img {
        width: 100%;
        filter: drop-shadow(0 31px 10px #171717)
    }





.Sink {
    position: absolute;
    width: 10.9895%;
    right: 45.1041%;
    z-index: 10
}


    .Sink img {
        width: 100%;
        filter: drop-shadow(0 31px 10px #171717)
    }





.Stove {
    position: absolute;
    width: 6.7708%;
    right: 54.2708%;
    z-index: 10
}


    .Stove img {
        width: 100%;
        filter: drop-shadow(0 31px 10px #171717)
    }




.Micro {
    position: absolute;
    width: 7.5%;
    right: 58.6458%;
    z-index: 10
}


    .Micro img {
        width: 100%;
        filter: drop-shadow(0 31px 10px #171717)
    }



.DishHolder {
    position: absolute;
    width: 11.5625%;
    right: 51.25%;
    z-index: 10
}


    .DishHolder img {
        width: 100%;
        filter: drop-shadow(0 31px 5px #0d0d0d)
    }

    .DishHolder h2 {
        margin-top: 5px;
        text-align: right
    }


.Valve {
    position: absolute;
    width: 9.3229%;
    right: 44.375%;
    z-index: 10
}


    .Valve img {
        width: 100%;
        filter: drop-shadow(0 31px 5px #0d0d0d)
    }

.Design {
    position: absolute;
    width: 12.083%;
    right: 36.1458%;
    z-index: 10
}


    .Design img {
        width: 100%;
        filter: drop-shadow(0 31px 5px #0d0d0d)
    }

.lace {
    position: absolute;
    width: 6.61458%;
    right: 34.0104%;
    z-index: 10
}


    .lace img {
        width: 100%;
        filter: drop-shadow(0 31px 5px #0d0d0d)
    }

    .lace h2 {
        text-align: right
    }


.Logo {
    position: absolute;
    width: 11.9270%;
    right: 41.1458%;
    z-index: 10
}

.mobileCloseLayer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: none
}


.Logo img:hover{
    cursor:pointer
}

.LogoRow {
    display: flex
}

.logoItem {
    flex: 0 0 50%
}

    .logoItem img {
        width: 100%
    }

.padding-right-9 {
    padding-right: 9%
}

.padding-right-18 {
    padding-right: 18%
}

.padding-right-14 {
    padding-right: 14%
}

.padding-right-23 {
    padding-right: 23%
}

.padding-left-13 {
    padding-left: 13%
}

.padding-left-16 {
    padding-left: 16%
}

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



.display-1250 {
    display: none
}

.socialMobile {
    display: none;
    z-index: 10
}



.menu {
    display: block
}


.footerMobile {
    display: none
}


.Side {
    right: 68.6458%;
    width: 6.4583%;
    position: absolute;
    z-index: 10
}

    .Side img {
        width: 100%
    }


.IndexVideo {
    position: absolute;
    width: 54.479%;
    right: 19.583%;
    z-index: 0
}

#IndexVideo {
    width: 100%
}

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

.social a img{
    width:20px
}

.show-560 {
    display: none !important
}


@media only screen and (max-width:1800px) {
    .description {
        width: 14.98%
    }
}

@media only screen and (max-width:1760px) {
    .DishHolder h2 {
        font-size: 23px
    }

     .social a img {
        width: 45%
    }


}

@media only screen and (max-width:1650px) {
    .description {
        width: 15.98%;
        left: 24.25%
    }

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

    .BlogIndexContent h2{
        font-size:170%
    }
}

@media only screen and (max-width:1600px) {
    .description .logo {
        width: 50%
    }

    .paragrapg p {
        font-size: 22px
    }

    .DishHolder h2{
        font-size:21px
    }


    h2 {
        margin-top: 20px;
        font-size: 19px
    }

    .ContactUs {
        padding-top: 20px
    }
}

@media only screen and (max-width:1520px) {
    .menu-item p {
        font-size: 20px;
        line-height: 16px
    }
}

@media only screen and (max-width:1500px) {
    .DishHolder h2 {
        font-size: 16px;
        width: 109%
    }

    .footer h4 {
        font-size: 110%;
        margin-bottom: 4px
    }

    .footer p {
        margin-bottom: 4px;
        font-size: 15px
    }

    .footer {
        width: 18%
    }

        .footer .social {
            margin-right: 23%
        }
}

@media only screen and (max-width:1450px) {
    .paragrapg p {
        font-size: 20px
    }

    .footer .social {
        padding-top: 10px
    }
}

@media only screen and (max-width:1400px) {
    h2 {
        font-size: 20px
    }

    .DishHolder h2 {
        font-size: 18px
    }

    .menu {
        width: 21.438%;
        right: 8.302%
    }
}

@media only screen and (max-width:1350px) {
    .paragrapg p {
        font-size: 18px
    }

    .social {
        padding-top: 0;
    }

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



    .social div{
        margin-right:8px;
        padding-right:0
    }
}

@media only screen and (max-width:1300px) {
    h2 {
        font-size: 19px
    }



    .ContactUs {
        padding-top: 15px
    }

    .footer .social {
        padding-top: 15px
    }

    .footer{
        left:21.25%
    }
}

@media only screen and (max-width:1250px) {
    .hide-1250 {
        display: none
    }

    .display-1250 {
        display: block
    }
    h2{
        margin-top:10px
    }


    .BlogIndexContent  a span{
        font-size:27px
    }

    .DishHolder h2 {
        width: 118%;
        font-size: 17px
    }

    .BlogIndexContent p{
        display:none
    }

    .BlogIndexContent h2{
        margin-bottom:30px
    }
}


@media only screen and (max-width:1400px) {
    .menu {
        width: 24.438%;
        right: 5.302%
    }
}

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



    .DishHolder h2 {
        font-size: 16px
    }

    .footer p {
        font-size: 14px
    }

    .menu-item p{
        font-size:18px;
        line-height:16px
    }


}

@media only screen and (max-width:1050px) {
    h2 {
        margin-top: 8px
    }

    .social img {
        width: 70%
    }

    .social {
        padding-top: 0
    }

    .padding-top-25 {
        padding-top: 7px
    }

    .footer .social {
        padding-top: 3px
    }
}

@media only screen and (max-width:991px) {
    .mobileMenu {
        z-index: 17
    }

    .mobileCloseLayerDisplay {
        display: block
    }
    .element-1{
        position:absolute;
        z-index:20;
        width:39.13%;
        right:39.13%;
        bottom:5%
    }

    .element-2{
        position:absolute;
        bottom:0
    }



    html {
        overflow-x: hidden !important
    }
    body{
        overflow-x:hidden !important
    }

    .mobileMenu {
        display: block;
        width: 5%;
        position: absolute;
        right: 0;
        transition:all 0.3s ease-in-out 0s
    }

        .mobileMenu:hover{
            cursor:pointer
        }

    .collapseMenu {
        position: fixed;
        display: block;
        width: 260px;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #1e1d1bf7;
        z-index: 20;
        margin-right: -260px;
        padding: 5% 0;
        transition: all 0.3s ease-in-out 0s;
        border-top-left-radius: 40px;
        border-bottom-right-radius: 40px;
        overflow: hidden
    }


    .collapseMenu ul {
        text-align: right;
        direction: rtl;
        list-style-type: none;
        padding-right:0
    }

        .collapseMenu li{
            margin:1px 0
        }

        .collapseMenu li a {
            font-family: iranyekanwebregular;
            color: #d1d1d1;
            height: 35px;
            line-height: 35px
        }

    .collapseMenu li a:hover{
        color:#ffc800;
        cursor:pointer;
        text-decoration:none
    }


    .noChildren{
        padding-right:19%
    }

    #CollapseTwo {
        padding-right: 11%
    }



    .Color-Syle-1 {
    }

    .childrenOne li {
        background-color: #373737
    }
    .childrenTwo li {
        background-color: #606060 !important
    }

    .fa-angle-down{
        padding:0 10px;
        transition:all 0.3s ease-in-out 0s
    }

    a[aria-expanded='true'] .fa-angle-down {
        transform:rotate(180deg)
    }

    .hasChirdren a:first-child{
        padding-right:6%
    }

    #childrenOne .noChildren{
        padding-right:26%
    }


    #CollapseOne[aria-expanded="true"]:before {
        transform: rotate(180deg)
    }






    .BlogIndex {
        right: 10.98%;
        width: 41.733%
    }

    .rights {
       padding-left:0;
       text-align:center;
       bottom:1%
    }

    .IndexVideo{
        width:110.74%;
        right:-11.95%;
    }



    .Side {
        display: none
    }

    .collapseIcon img {
        width: 100%
    }

    .menu {
        display: none
    }

    .persianLogo {
        left: 17.2552%;
        width: 7.9717%;
    }




    .EngLogo {
        right: 7.8707%;
        width: 10.0908%
    }

    .hide-1250 {
        display: block
    }

    .display-1250 {
        display: none
    }

    .description {
        width: 23.0071%;
        left: 13.925%;
    }

        .description .social div {
            padding-left: 16px
        }

    .footer {
        width: 40%;
        left: 5.5953%
    }





    .socialMobile div {
        text-align: center
    }

    .socialMobile img {
        width: 36%
    }

    .BlogIndexContent{
        width:30.875%;
        right:12.302%
    }

    .footer h4 {
        font-size: 130%;
        margin-bottom: 15px
    }

    .footer p {
        font-size: 18px
    }

    .footer .social div {
        padding: 0 47px 0 5px;
        margin:0
    }

    .footer .englishFont{
        font-size:15px
    }

    .ContactUs {
        padding-top: 45px
    }

    h2 {
        display: none
    }

    .BlogIndexContent h2{
        display:block
    }

    .Hood {
        width: 22%;
        right: 16.75%
    }

    .Oven {
        width: 24.6216%;
        right: 22.591%
    }

    .Sink {
        right: 33.09788%;
        width: 24.7225%
    }

    .Stove {
        right: 54.6922%;
        width: 14.9344%
    }

    .Micro {
        right: 66.1957%;
        width: 16.1453%
    }

    .DishHolder {
        right: 50.0504%;
        width: 26.1352%
    }

    .Valve {
        right: 37.2351%;
        width: 21.6952%
    }

    .Design {
        right: 21.1907%;
        width: 25.227%
    }

    .lace {
        right: 19.1725%;
        width: 13.118%
    }

    .Logo {
        right: 34.822%;
        width: 21.787%
    }

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

    .footer .social{
        padding-top:25px
    }

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


@media only screen and (max-width:850px) {
    .description {
        width: 25.007%;
        left: 10.925%
    }

    .paragrapg p {
        font-size: 16px
    }

    .footer h4 {
        font-size: 120%
    }

    .ContactUs {
        padding-top: 40px
    }

    .footer p {
        font-size: 16px;
        margin-bottom: 2px
    }
}

@media only screen and (max-width:768px) {
    .hide-1250 {
        display: none
    }

    .display-1250 {
        display: block
    }

    .description .social div {
        padding-left: 11px
    }

    .footer h4 {
        margin-bottom: 8px
    }

    .ContactUs {
        padding-top: 30px
    }

    .footer {
        left: 4%
    }

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


@media only screen and (max-width:700px){
    .BlogIndexContent h2{
        font-size:140%
    }

    .BlogIndexContent  a span{
        font-size:25px
    }

    .footer .englishFont{
        font-size:14px
    }
}

@media only screen and (max-width:665px) {
    .description .social div {
        padding-left: 6px
    }

    .description .logo {
        margin-bottom: 7px
    }

    .description .social {
        margin-top: -10px;
    }

    .footer h4 {
        font-size: 110%
    }

    .footer p {
        font-size: 15px;
        margin-bottom: 0
    }

    .socialMobile img {
        width: 43%
    }

    .footer .englishFont {
        font-size: 13px
    }
}

@media only screen and (max-width:620px){
    .footer .englishFont {
        font-size: 12px
    }
}

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

    .description .social div {
        padding-left: 3px;
        padding-right: 13px
    }

    .paragrapg p {
        line-height: 21px
    }

    
}

@media only screen and (max-width:560px) {
    .hide-560{
        display:none !important
    }

        .show-560{
            display:block !important
        }
        .footer {
            width: 50% !important
        }

        .footer .social{
            padding-top:10px
        }

        .footerMobile {
            display: none
        }

    .footer .social{
        margin-right:0
    }

    .socialMobile {
        position: absolute;
        width: 37.4722%;
        left: 28.1907%;
        display: flex
    }


    .IndexVideo {
        width: 126.71%;
        right: -18.95%;
    }

    .BlogIndex{
        width:57.32%;
        right:28.93%
    }

    .BlogIndexContent{
        width:51.78%;
        right:34.28%
    }

        .BlogIndexContent h2{
            font-size:150%;
            margin-bottom:15%;
            text-align:right
        }

        .BlogIndexContent  a span {
            margin-right: 50.464%;
            border-top-left-radius: 40px;
            border-bottom-right-radius: 40px;
            background-color: #daa90e;
            color: #1d1c1b;
            font-family: iranyekanwebregular;
            padding: 0;
            font-size: 14px;
            height:35px;
            display:inline-block;
            line-height:35px;
            width:44.7%;
            text-align:center
        }

    .mobileMenu{
        width:8.9285%
    }


    .socialMobile img {
        width: 52%
    }

    .persianLogo {
        width: 8.5%;
        left: 16.2%
    }

    .EngLogo {
        display: none
    }

    .description {
        width: 33.9285%;
        left: 10.8928%
    }

        .description .social {
            display: none
        }

    .Hood {
        width: 31.4285%;
        right: 13.5%;
    }

    .Oven {
        width: 33.2142%;
        right: 29.64285%
    }

    .Sink {
        width: 32.8571%;
        right: 48.2142%
    }

    .Micro {
        width: 22.1428%;
        right: 13.03571%
    }

    .Stove {
        width: 20%;
        right: 36.25%
    }

    .DishHolder {
        width: 35%;
        right: 50%
    }

    .Valve {
        width: 33.2142%;
        right: 12.6785%
    }

    .Design {
        right: 33.2142%;
        width: 41.7857%
    }

    .lace {
        width: 23.2142%;
        right: 18.2%
    }

    .Logo {
        width: 32.8214%;
        right: 37.1428%;
        direction: rtl;
    }

    .padding-right-9 {
        padding: 0 0 0 9%
    }

    .padding-left-13 {
        padding: 0 13% 0 0
    }

    .padding-right-18 {
        padding: 0 0 0 18%
    }

    .padding-left-16 {
        padding: 0 16% 0 0
    }


    .padding-right-14 {
        padding: 0 0 0 14%
    }

    .padding-left-13 {
        padding: 0 13% 0 0
    }


    .padding-right-23 {
        padding: 0 0 0 23%
    }


    .mobileHide {
        display: none
    }


    .footerMobile {
        display: block;
        width: 44.285%;
        position: absolute;
        left: 11%;
        z-index:10
    }

    .socialMobile img{
        max-width:30px
    }

    .rights{
        bottom:4%
    }


    .footerMobile h4 {
        font-family: iranyekanwebregular;
        font-size: 20px;
        margin-bottom:10px
    }


    .info {
        margin-top: 20px
    }


        .info p {
            font-size: 20px;
            font-family: iranyekanwebregular;
            margin-bottom: 0;
            margin-bottom:10px
        }


    .socialMobile {
        width: 74.2857%;
        left: 15%
    }


        .socialMobile div {
            text-align: left;
            padding: 0 9% 0 0
        }
}

@media only screen and (max-width:510px) {
    .BlogIndexContent  a span{
        width:48%
    }
}

@media only screen and (max-width:500px) {
    .paragrapg p{
        line-height:19px
    }

    .display-500{
        display:block
    }

    .display-1250{
        display:none
    }
}

@media only screen and (max-width:480px){
    .footerMobile h4{
        font-size:18px;
    }

    .info p{
        font-size:18px
    }

    .socialMobile img{
        max-width:25px
    }

    .socialMobile div{
        padding:0
    }

    .socialMobile .col-3 {
        flex: 0 0 17%
    }

    .rights{
        padding:0 5%;
        bottom:2%
    }


}

@media only screen and (max-width:460px){
    .BlogIndexContent h2{
        font-size:130%;
        margin-bottom:9%
    }

    .BlogIndexContent  a span {
        margin-right: 50%
    }
}

@media only screen and (max-width:400px) {
    .BlogIndexContent h2 {
        font-size: 120%;
    }

    .collapseMenu {
        border-top-left-radius: 30px;
        border-bottom-right-radius: 30px;
    }



    .BlogIndexContent  a span {
        font-size:12px;
        line-height:28px;
        height:28px
    }

    .padding-top-25{
        padding-top:12px
    }

    .footerMobile h4{
        font-size:16px
    }

    .info p{
        font-size:16px
    }

    .rights{
        bottom:-1%;
        margin-bottom:6%
    }
}

@media only screen and (max-width:370px) {
    .rights{
        bottom:1%
    }
}


@media only screen and (max-width:342px){
    .paragrapg p{
        line-height:16px
    }

    .BlogIndexContent  a span{
        height:35px;
        line-height:35px
    }
}