@import url(iran_yekan_x.css);
.text-center {
     text-align: center;
}
.text-rose {
     color: #DB2247;
}
.text-royal {
     color: #B5A27D;
}
.div-btn {
     display: flex;
     justify-content: center;
     align-items: center;
     margin-top: 10px;
}
.btn {
     padding: 10px;
     border-radius: 40px;
}
.btn img{
     margin-left: 5px;
     vertical-align: middle;
}
.btn-rose {
     background-color: #EC004A0F;
     color: #EC004A;
}
.btn-royal {
     background-color: #AB966D4D;
     color: #7C6F55;
}
.card {
     border-radius: 40px;
     padding: 30px;
     background-color: #FFFFFFB3;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.50);
}
.info_div img {
     margin-left: 5px;
     vertical-align: middle;
}
.info_royal {
     right: 110px;
     left: auto;
     top: calc(0% - 55px);
}
.info_rose {
     left: 110px;
     right: auto;
     top: calc(100% + 15px);
}
.info_arrow_div {
     display: flex;
     padding: 11px 15px;
     background-color: #EEEEEE;
     border-radius: 40px;
     position: absolute;
}
.info_arrow_royal {
     right: 645px;
     left: auto;
     top: calc(0% - 55px);
}
.info_div {
     display: flex;
     padding: 10px 15px;
     background-color: #EEEEEE;
     border-radius: 40px;
     position: absolute;
     width: 0;
     overflow: hidden;
     white-space: nowrap;
     transition: width 1.5s ease;
}
.info_div.expand {
     width: 495px;
}
.info_div_one {
     padding-left: 20px;
     border-left: 1px solid #fff;
}
.info_div_two {
     padding-right: 20px;
}
.header {
     display: flex;
     padding: 20px;
     flex-direction: row-reverse;
     justify-content: flex-start;
}
.language-toggle {
     display: flex;
     align-items: center;
     background-color: #EEEEEE;
     border-radius: 50px;
}
.language-toggle img {
     border-radius: 50%;
}
.language-toggle-text {
     margin: 0px 5px;
}
.language-toggle-down {
     margin-left: 10px;
}
.language-toggle-menu {
     position: absolute;
     background-color: #EEEEEE;
     padding: 0px 10px;
     border-radius: 14px;
     margin-top: 5px;
     width: 93px;
     z-index: 100;
}
.language-toggle-menu img {
     border-radius: 50%;
     vertical-align: middle;
     margin-left: 5px;
}
.language-toggle-menu div {
     padding: 15px 9px;
}
.reserve-tel {
     margin-left: 10px;
     padding: 8px 10px;
     background-color: #EEEEEE;
     border-radius: 50px;
}
.reserve-tel-number {
     padding-right: 10px;
}
.reserve-tel img {
     margin-left: 5px;
     vertical-align: middle;
}
/* General Styles for FUllpage Elements
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fp-section {
     width: 100% !important;
     position: absolute;
     left: 0;
     top: 0;
     visibility: hidden;
     opacity: 0;
     z-index: 0;
     -webkit-transition: all .5s;
     -moz-transition: all .5s;
     -o-transition: all .5s;
     transition: all .5s;
}

.fp-section.active {
     visibility: visible;
     opacity: 1;
     z-index: 1;
}

/* Reset-General Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
html, body {
     height: 100%;
     overflow: auto; /* اضافه کردن این خط */
}
* {
     margin: 0;
     padding: 0;
}

html {
     font-size: 14px;
     font-weight: normal;
}

body {
     color: #343434;
     background-color: white;
     background-image: url('../img/bg.jpg');
     background-position: top center;
     background-repeat: repeat-x;
     font-family: IRANYekanX;
     -moz-font-feature-settings: "ss02";
     -webkit-font-feature-settings: "ss02";
     font-feature-settings: "ss02";
     direction: rtl;
}

a {
     text-decoration: none;
     color: #343434;
}

ul,
li {
     list-style-type: none;
}

/* Custon Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.wrapper {
     position: absolute;
     left: 50%;
     top: 50%;
     margin-left: -400px;
     margin-top: -225px;
     width: 800px;
     height: 450px;
}

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

.overflow {
     width: 100%;
     height: 100%;
     position: absolute;
     overflow: hidden;
}

.image {
     border-radius: 20px;
     width: 100%;
     height: 100%;
     overflow: hidden;
     visibility: hidden;
     background-size: cover;
     background-position: center center;
     background-repeat: no-repeat;
     -webkit-transition-delay: .5s;
     -moz-transition-delay: .5s;
     -o-transition-delay: .5s;
     transition-delay: .5s;
     background-image: url(../img/img.jpg)
}

.section.active .image {
     visibility: visible;
     -webkit-transition-delay: 1.65s;
     -moz-transition-delay: 1.65s;
     -o-transition-delay: 1.65s;
     transition-delay: 1.65s;
}


/*Work Titles*/

.work_headers {
     position: absolute;
     width: 300px;
     height: auto;
     left: -100px;
     margin-top: -50px;
     -webkit-transition: opacity .5s;
     -moz-transition: opacity .5s;
     -o-transition: opacity .5s;
     transition: opacity .5s;
}

.work_headers .title {
     font-size: 24px;
     font-weight: bold;
     text-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
     margin-bottom: 10px;
}
.title-royal {
     margin-right: 10px;
}
.title-rose {
     margin-left: 10px;
}

.work_headers.active {
     opacity: 0;
}

/* Screen Size/Mobile Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 950px) {
     .info_royal {
          display: none;
     }
     .info_rose {
          display: none;
     }
     .wrapper {
          width: 600px;
          height: 338px;
          margin-left: -300px;
          margin-top: -169px;
     }

     .work_headers {
          left: -50px;
          margin-top: -30px;
     }

}

.royal {
     right: -210px;
     left: auto;
     top: calc(0% - 70px);
     text-align: right;
}

.rose {
     left: -210px;
     right: auto;
     top: calc(100% - 70px);
     text-align: left;
}
@media screen and (min-width: 600px) {
     .desktop-hide {
          display: none;
     }
}
@media screen and (max-width: 1250px) {
     .info_royal {
          right: 255px;
     }
     .info_rose {
          left: 255px;
     }
     .royal {
          right: -65px;
          left: auto;
     }

     .rose {
          left: -65px;
          right: auto;
     }
}

@media screen and (max-width: 750px) {
     .info_royal {
          display: none;
     }
     .info_rose {
          display: none;
     }
     .royal {
          right: 5px;
          left: auto;
     }

     .rose {
          left: 5px;
          right: auto;
     }
}

@media screen and (max-width: 600px) {
     .wrapper {
          overflow: visible !important;
          transition: height 1s ease-in-out;
          width: 80%;
          height: 200px;
          margin: 0;
          margin-top: -160px;
          -webkit-transform: translate(-50%, -50%);
          -moz-transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          -o-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
     }
     .work_headers {
          width: 260px;
     }
     .title {
          font-size: 18px !important;
     }
     .title-rose {
          margin-top: 10px;
          margin-bottom: 80px !important;
     }
     .card {
          padding: 20px;
          padding-bottom: 30px;
     }
     .info_a_mobile {
          position: absolute;
          left: calc(50% - 77.5px);
          bottom: 3px;
          padding: 5px 70px;
     }
     .info_img_mobile {
          transition: transform 0.5s ease;
     }
     .rotate {
          transform: rotate(180deg);
     }
     .info_div_mobile {
          border-top: 1px solid #949494;
          margin-top: 15px;
          display: none;
          text-align: right;
     }
     .info_div_mobile.show {
          display: block;
     }
     .info_div_mobile img {
          vertical-align: middle;
          margin-left: 5px;
     }

     .info_div_mobile .info_div_one {
          border-left: 0px !important;
          padding: 10px 0px;
     }
     .info_div_mobile .info_div_two {
          padding: 10px 0px;
     }
     .btn img {
          width: 16px !important;
     }
     html {
          font-size: 12px;
     }
     .royal {
          right: calc(50% - 130px);
          top: -75px;
     }

     .rose {
          bottom: -75px;
          left: calc(50% - 130px);
     }

     .mobile-hide {
          display: none;
     }

     .image{
          background-image: url(../img/img-mobile.jpg)
     }
}