@font-face {
                            font-family: Vazir;
                            src: url('fonts/vazir/Vazir.eot');
                            src: url('fonts/vazir/Vazir.eot?#iefix') format('embedded-opentype'), url('fonts/vazir/Vazir.woff2') format('woff2'), url('fonts/vazir/Vazir.woff') format('woff'), url('fonts/vazir/Vazir.ttf') format('truetype');
                            font-weight: normal;
                        }
                        
                        @font-face {
                            font-family: Vazir;
                            src: url('fonts/vazir/Vazir-Bold.eot');
                            src: url('fonts/vazir/Vazir-Bold.eot?#iefix') format('embedded-opentype'), url('fonts/vazir/Vazir-Bold.woff2') format('woff2'), url('fonts/vazir/Vazir-Bold.woff') format('woff'), url('fonts/vazir/Vazir-Bold.ttf') format('truetype');
                            font-weight: bold;
                        }
                        
                        @font-face {
                            font-family: Vazir;
                            src: url('fonts/vazir/Vazir-Thin.eot');
                            src: url('fonts/vazir/Vazir-Thin.eot?#iefix') format('embedded-opentype'), url('fonts/vazir/Vazir-Thin.woff2') format('woff2'), url('fonts/vazir/Vazir-Thin.woff') format('woff'), url('fonts/vazir/Vazir-Thin.ttf') format('truetype');
                            font-weight: 100;
                        }
                        
                        @font-face {
                            font-family: Vazir;
                            src: url('fonts/vazir/Vazir-Light.eot');
                            src: url('fonts/vazir/Vazir-Light.eot?#iefix') format('embedded-opentype'), url('fonts/vazir/Vazir-Light.woff2') format('woff2'), url('fonts/vazir/Vazir-Light.woff') format('woff'), url('fonts/vazir/Vazir-Light.ttf') format('truetype');
                            font-weight: 300;
                        }
                        
                        @font-face {
                            font-family: Vazir;
                            src: url('fonts/vazir/Vazir-Medium.eot');
                            src: url('fonts/vazir/Vazir-Medium.eot?#iefix') format('embedded-opentype'), url('fonts/vazir/Vazir-Medium.woff2') format('woff2'), url('fonts/vazir/Vazir-Medium.woff') format('woff'), url('fonts/vazir/Vazir-Medium.ttf') format('truetype');
                            font-weight: 500;
                        }
                        
                        @font-face {
                            font-family: Vazir;
                            src: url('fonts/vazir/Vazir-Black.eot');
                            src: url('fonts/vazir/Vazir-Black.eot?#iefix') format('embedded-opentype'), url('fonts/vazir/Vazir-Black.woff2') format('woff2'), url('fonts/vazir/Vazir-Black.woff') format('woff'), url('fonts/vazir/Vazir-Black.ttf') format('truetype');
                            font-weight: 900;
                        }
                        
                        @font-face {
                            font-family: IRANSans;
                            font-style: normal;
                            font-weight: bold;
                            src: url('fonts/iransan/eot/IRANSansWeb_Bold.eot');
                            src: url('fonts/iransan/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
                            url('fonts/iransan/woff2/IRANSansWeb_Bold.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
                            url('fonts/iransan/woff/IRANSansWeb_Bold.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
                            url('fonts/iransan/ttf/IRANSansWeb_Bold.ttf') format('truetype');
                        }
                        
                        @font-face {
                            font-family: IRANSans;
                            font-style: normal;
                            font-weight: 500;
                            src: url('fonts/iransan/eot/IRANSansWeb_Medium.eot');
                            src: url('fonts/iransan/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
                            url('fonts/iransan/woff2/IRANSansWeb_Medium.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
                            url('fonts/iransan/woff/IRANSansWeb_Medium.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
                            url('fonts/iransan/ttf/IRANSansWeb_Medium.ttf') format('truetype');
                        }
                        
                        @font-face {
                            font-family: IRANSans;
                            font-style: normal;
                            font-weight: 300;
                            src: url('fonts/iransan/eot/IRANSansWeb_Light.eot');
                            src: url('fonts/iransan/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
                            url('fonts/iransan/woff2/IRANSansWeb_Light.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
                            url('fonts/iransan/woff/IRANSansWeb_Light.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
                            url('fonts/iransan/ttf/IRANSansWeb_Light.ttf') format('truetype');
                        }
                        
                        @font-face {
                            font-family: IRANSans;
                            font-style: normal;
                            font-weight: 200;
                            src: url('fonts/iransan/eot/IRANSansWeb_UltraLight.eot');
                            src: url('fonts/iransan/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
                            url('fonts/iransan/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
                            url('fonts/iransan/woff/IRANSansWeb_UltraLight.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
                            url('fonts/iransan/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
                        }
                        
                        @font-face {
                            font-family: IRANSans;
                            font-style: normal;
                            font-weight: normal;
                            src: url('fonts/iransan/eot/IRANSansWeb.eot');
                            src: url('fonts/iransan/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'), /* IE6-8 */
                            url('fonts/iransan/woff2/IRANSansWeb.woff2') format('woff2'), /* FF39+,Chrome36+, Opera24+*/
                            url('fonts/iransan/woff/IRANSansWeb.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
                            url('fonts/iransan/ttf/IRANSansWeb.ttf') format('truetype');
                        }
                        
                        body {
                            font-family: "IRANSans", Vazir;
                        }
                        
                        important* {
                            background-color: black;
                        }
                        
                        a {
                            text-decoration: none;
                        }
                        
                        body {
                            position: relative;
                            overflow-x: hidden;
                            background-color: #CFD8DC;
                        }
                        /* Floating Social Media Bar Style Starts Here */
                        /* fixed social*/
                        
                        #fixed-social {
                            position: fixed;
                            top: 130px;
                        }
                        
                        #fixed-social a {
                            color: #fff;
                            display: block;
                            height: 40px;
                            position: relative;
                            text-align: center;
                            line-height: 40px;
                            width: 40px;
                            margin-bottom: 1px;
                            z-index: 2;
                        }
                        
                        #fixed-social a:hover>span {
                            visibility: visible;
                            right: 41px;
                            opacity: 1;
                        }
                        
                        #fixed-social a span {
                            line-height: 40px;
                            right: 60px;
                            position: absolute;
                            text-align: center;
                            width: 120px;
                            visibility: hidden;
                            transition-duration: 0.5s;
                            z-index: 1;
                            opacity: 0;
                        }
                        
                        .fixed-facebook {
                            background-color: #00AAE5;
                        }
                        
                        .fixed-facebook span {
                            background-color: #00AAE5;
                        }
                        
                        .fixed-twitter {
                            background-color: #7D3895;
                        }
                        
                        .fixed-twitter span {
                            background-color: #7D3895;
                        }
                        
                        .fixed-gplus {
                            background-color: #00AF54;
                        }
                        
                        .fixed-gplus span {
                            background-color: #00AF54;
                        }
                        
                        .fixed-linkedin {
                            background-color: #FFC41E;
                        }
                        
                        .fixed-linkedin span {
                            background-color: #FFC41E;
                        }
                        
                        .fixed-instagrem {
                            background-color: #ED2B29;
                        }
                        
                        .fixed-instagrem span {
                            background-color: #ED2B29;
                        }
                        
                        .fixed-tumblr {
                            background-color: #EB1471;
                        }
                        
                        .fixed-tumblr span {
                            background-color: #EB1471;
                        }
                        /*end fixed social*/
                        /* Floating Social Media Bar Style Ends Here */
                        
                        a:hover {
                            text-decoration: none;
                        }
                        
                        .my-flip-inner-wrapper {
                            perspective: 150rem;
                            -moz-perspective: 150rem;
                            position: relative;
                        }
                        
                        .my-flip-side {
                            display: block;
                            height: 500px;
                            top: 0;
                            right: 0;
                            left: 0;
                            box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
                            transition: all .8s ease;
                            -webkit-backface-visibility: hidden;
                            backface-visibility: hidden;
                        }
                        
                        .my-flip-back {
                            transform: rotateY(180deg);
                            color: #fff;
                            position: absolute;
                            z-index: -1;
                            box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
                            padding: 46px;
                        }
                        
                        .my-flip-back-1 {
                            background: linear-gradient(to right bottom, #004e92, #2998ff);
                        }
                        
                        .my-flip-back-2 {
                            background: linear-gradient(to right bottom, #8F9090, #424343);
                        }
                        
                        .my-flip-back-3 {
                            background: linear-gradient(to right bottom, #67af41, #347C0E);
                        }
                        
                        .my-flip-inner-wrapper:hover .my-flip-front {
                            transform: rotateY(-180deg);
                        }
                        
                        .my-flip-inner-wrapper:hover .my-flip-back {
                            transform: rotateY(0);
                        }
                        
                        .my-flip-image {
                            height: 15rem;
                            background-blend-mode: screen;
                            clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
                        }
                        
                        .my-flip-image img {
                            width: 100%;
                            height: 100%;
                            background-blend-mode: screen;
                            object-fit: cover;
                        }
                        
                        .my-flip-heading {
                            margin: 0 0 15px;
                        }
                        
                        .my-flip-details {
                            padding: 2rem;
                        }
                        
                        .my-flip-details p {
                            font-size: 15px;
                            margin: 0;
                            line-height: 2;
                            color: #848484;
                        }
                        
                        .my-flip-back-inner ul {
                            list-style: none;
                            margin: 0 0 1.5rem;
                            padding: 0;
                        }
                        
                        .my-flip-back-text ul li {
                            text-align: center;
                            color: #fff;
                            font-size: 1rem;
                            padding: 0.8rem 0;
                        }
                        
                        .my-flip-back-inner ul li:not(:last-child) {
                            border-bottom: 1px solid #ffffff;
                        }
                        
                        .my-flip-price {
                            margin-top: 90%;
                            color: #fff;
                            text-align: center;
                            margin-bottom: 1rem;
                        }
                        
                        .my-flip-price h3 {
                            font-size: 3rem;
                            font-weight: 300;
                        }
                        
                        .my-flip-btn-box {
                            text-align: center;
                        }
                        /*.my-flip-btn {
    text-transform: uppercase;
    padding: 1rem 1.8rem;
    font-size: 1rem;
    background-color: #fff;
    color: #000;
    border-radius: 10rem;
    display: inline-block;
    transition: all .2s;
    color: initial;
    position: relative;
}

.my-flip-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
    color: #000;
}
*/
                        
                        .btn-three {
                            color: #FFF;
                            transition: all 0.5s;
                            position: relative;
                            font-size: larger;
                        }
                        
                        .btn-three::before {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            z-index: 1;
                            background-color: rgba(255, 255, 255, 0.4);
                            transition: all 0.3s;
                        }
                        
                        .btn-three:hover::before {
                            opacity: 0;
                            transform: scale(0.5, 0.5);
                        }
                        
                        .btn-three::after {
                            content: '';
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            z-index: 1;
                            opacity: 0;
                            transition: all 0.3s;
                            border: 1px solid rgba(255, 255, 255, 0.5);
                            transform: scale(1.2, 1.2);
                        }
                        
                        .btn-three:hover::after {
                            opacity: 1;
                            transform: scale(1, 1);
                        }
                        /* -----------------MUSIC PLAYER --------------*/