/*** Created by finalstar on 1/19/2021. */
@charset "utf-8";
/* CSS Document */
/*--------------------------------------------- font ----------------------------*/
@font-face {
    font-family: 'textFont';
    src: url('font/AbarMidFaNum-Light.ttf');
}
@font-face {
    font-family: 'titleFont';
    src: url('font/AbarMidFaNum-Bold.ttf');
}
@font-face {
    font-family: 'subTitleFont';
    src: url('font/AbarMidFaNum-Regular.ttf');
}
@font-face {
    font-family: 'EnTextFont';
    src: url('font/GothamBook.otf.otf');
}
@font-face {
    font-family: 'EnTexFont';
    src: url('font/GothamBook.otf.otf');
}

/*--------------------------------------------- reset ----------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body{ line-height: 1; }
table { border-collapse: collapse; border-spacing: 0; }
input,textarea{ padding: 0; font-family: textFont; font-size:0.95rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="radio"]{ -webkit-appearance: radio; -moz-appearance: radio; appearance: radio; }

html,body{ width: 100%; height: 100%; scroll-behavior: smooth; direction: rtl; }
*{ box-sizing: border-box; }

/*--------------------------------------------- var ----------------------------*/
:root {
    --color1: #4D0066;
    --color2: #ECE0F1;
    --color3: #FBDFEA;
    --color4: #F8F9EC;
    --color5: #DCEDF9;

    --hColor1: #7e03a7;
    --hColor2: #4D0066;
    --hColor3: #E32675;
    --hColor4: #FF6B3D;
    --hColor5: #003D7A;
}

/* other style for bootstrap */
.dirLtr{ direction: ltr; }
.text-left{ text-align: left; }

.cellBgUnset td, .cellBgUnset th{ background: none !important; }
.table-bordered th, .table-bordered td { border: 1px solid #ddd!important }
.bootstrap-select .dropdown-toggle .filter-option{ text-align: right !important; }
.bootstrap-select > .dropdown-toggle{ border: 1px solid #dee2e6; background: none; color: #000 !important; }

input, textarea, select{ font-family: textFont; font-size: .85rem; }

.dNone{ display: none; }
.resizeDisable{ height: 10rem; resize: none; }
.transition{ transition: all .3s linear; }
.transition2{ transition: all .5s linear; }
.img-white{ filter: brightness(0) invert(1); }

/* btn */
.btn-yellow{ background: #FFB61D; }
.btn-yellow:hover{ background: #e9db00; }
.btn-pink{ background: #fd7be0; }
.btn-pink:hover{ background: #f24bcd; }
.btn-orange{ background: #ff863b; }
.btn-orange:hover{ background: #e77302; }
.btn-purple{ background: #a912ff; color: #FFFFFF; }
.btn-purple:hover{ background: #9100e4; color: #FFFFFF; }

.btn-square1{ width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; }

.btn-outline-custom2{ border-color: var(--color2); }
.btn-outline-custom2:hover{ background: var(--color2); color: #FFFFFF; }
.btn-outline-custom3{ border-color: var(--color3); }
.btn-outline-custom3:hover{ background: var(--color3); color: #FFFFFF; }

/* text and bg */
.text-bg-yellow{ background: #FFB61D; }
.text-bg-pink{ background: #fd7be0; }
.text-bg-orange{ background: #ff863b; }
.text-bg-purple{ background: #a912ff; color: #FFFFFF; }

/* text */
.text-yellow{ color: #FFB61D; }
.text-pink{ color: #fd7be0; }
.text-orange{ color: #ff863b; }
.text-purple{ color: #a912ff; }

/* container */
.custom-container-center{ padding: 0 0.75rem; }
.custom-container-lg{ max-width: 720px; }
@media only screen and (min-width: 1400px) {
    .custom-container-center{ width: 85%; margin: auto; }
}

/* width */
.width1{ width: 1rem; }
.width1-5{ width: 1.5rem; }
.width2{ width: 2rem; }
.width2_5{ width: 2.5rem; }
.width3{ width: 3rem; }
.width4{ width: 4rem; }
.width5{ width: 5rem; }
.width6{ width: 6rem; }
.width7{ width: 7rem; }
.width8{ width: 8rem; }
.width9{ width: 9rem; }
.width10{ width: 10rem; }
.width11{ width: 11rem; }
.width12{ width: 12rem; }
.width13{ width: 13rem; }
.width14{ width: 14rem; }
.width15{ width: 15rem; }
.width16{ width: 16rem; }
.width17{ width: 17rem; }
.width18{ width: 18rem; }
.width19{ width: 19rem; }
.width19{ width: 19rem; }
.width20{ width: 20rem; }
.width21{ width: 21rem; }
.width22{ width: 22rem; }

/* height */
.height2{ height: 2rem; }
.height2_5{ height: 2.5rem; }
.height3{ height: 3rem; }
.height4{ height: 4rem; }
.height5{ height: 5rem; }
.height6{ height: 6rem; }
.height7{ height: 7rem; }
.height8{ height: 8rem; }
.height9{ height: 9rem; }
.height10{ height: 10rem; }
.height11{ height: 11rem; }
.height12{ height: 12rem; }
.height13{ height: 13rem; }
.height14{ height: 14rem; }

.minHeight2{ min-height: 2rem; }
.minHeight2_5{ min-height: 2.5rem; }
.minHeight3{ min-height: 3rem; }
.minHeight4{ min-height: 4rem; }
.minHeight5{ min-height: 5rem; }
.minHeight6{ min-height: 6rem; }
.minHeight7{ min-height: 7rem; }
.minHeight8{ min-height: 8rem; }
.minHeight9{ min-height: 9rem; }

/* padding and margin */
@media only screen and (max-width: 1400px) {
    .px-custom5{ padding: unset; }
}

@media only screen and (min-width: 1200px) {
    .mt-5{ margin-top: 6rem !important; }

    .pt-5{ padding-top: 6rem !important; }
    .py-5{ padding-top: 6rem !important; padding-bottom: 6rem !important; }
}

/* position */
.top-1{ top: 1rem; }
.top-2{ top: 2rem; }
.top-3{ top: 3rem; }
.top-4{ top: 4rem; }
.top-5{ top: 5rem; }

.bottom-1{ bottom: 1rem; }
.bottom-2{ bottom: 2rem; }
.bottom-3{ bottom: 3rem; }
.bottom-4{ bottom: 4rem; }
.bottom-5{ bottom: 5rem; }

.start-1{ right: 1rem; }
.start-2{ right: 2rem; }
.start-3{ right: 3rem; }
.start-4{ right: 4rem; }
.start-5{ right: 5rem; }

.end-1{ left: 1rem; }
.end-2{ left: 2rem; }
.end-3{ left: 3rem; }
.end-4{ left: 4rem; }
.end-5{ left: 5rem; }

/* text font */
.boldFont{ line-height: 1.5em; font-family: titleFont !important; color: var(--color); }
.normalFont{ line-height: 1.35em; font-family: textFont !important; color: var(--color); }
.subTitleFont{ line-height: 1.5em; font-family: subTitleFont !important; color: var(--color); }

.enBoldFont{ line-height: 1.2em; font-family: EnTitleFont !important; color: var(--color); }
.enNormalFont{ line-height: 1.2em; font-family: EnTextFont !important; color: var(--color); }

.fontSize-1{ font-size: .85rem !important; }
.fontSize{ font-size: 1rem !important; }
.fontSize1, .readText h6{ font-size: 1rem !important; }
.fontSize2, .readText h5{ font-size: 1.4rem !important; }
.fontSize3, .readText h4{ font-size: 1.6rem !important; }
.fontSize4, .readText h3{ font-size: 1.8rem !important; }
.fontSize5, .readText h2{ font-size: 2rem !important; }
.fontSize6, .readText h1{ font-size: 2.2rem !important; }
.fontSize7{ font-size: 2.4rem !important; }
.fontSize8{ font-size: 2.6rem !important; }
.fontSize9{ font-size: 2.8rem !important; }
.fontSize10{ font-size: 3rem !important; }
.fontSize11{ font-size: 4rem !important; }
.fontSize12{ font-size: 5rem !important; }
.fontSize13{ font-size: 6rem !important; }
.fontSize14{ font-size: 7rem !important; }
.fontSize15{ font-size: 8rem !important; }
@media only screen and (max-width: 1200px) {
    .fontSize3, .readText h4{ font-size: 1.4rem !important; }
    .fontSize4, .readText h3{ font-size: 1.55rem !important; }
    .fontSize5, .readText h2{ font-size: 1.7rem !important; }
    .fontSize6, .readText h1{ font-size: 1.85rem !important; }
    .fontSize7{ font-size: 1.9rem !important; }
    .fontSize8{ font-size: 2rem !important; }
    .fontSize9{ font-size: 2.2rem !important; }
    .fontSize10{ font-size: 2.4rem !important; }
    .fontSize11{ font-size: 2.4rem !important; }
    .fontSize12{ font-size: 3rem !important; }
    .fontSize13{ font-size: 4rem !important; }
    .fontSize14{ font-size: 5rem !important; }
    .fontSize15{ font-size: 6rem !important; }
}
@media only screen and (max-width: 700px) {
    .fontSize3, .readText h5{ font-size: 1.2rem !important; }
    .fontSize4, .readText h4{ font-size: 1.2rem !important; }
    .fontSize5, .readText h3{ font-size: 1.4rem !important; }
    .fontSize6, .readText h2{ font-size: 1.55rem !important; }
    .fontSize7, .readText h1{ font-size: 1.7rem !important; }
    .fontSize8{ font-size: 1.85rem !important; }
    .fontSize9{ font-size: 2rem !important; }
    .fontSize10{ font-size: 2.2rem !important; }
    .fontSize11{ font-size: 2.2rem !important; }
    .fontSize12{ font-size: 2.5rem !important; }
    .fontSize13{ font-size: 2.7rem !important; }
    .fontSize14{ font-size: 2.7rem !important; }
    .fontSize15{ font-size: 2.7rem !important; }
}

.readText{ font-size: 1.2rem;  text-align: justify; text-justify: auto; }
.readText h1, .readText h2, .readText h3, .readText h4, .readText h5, .readText h6{ line-height: 1.5em; font-family: titleFont !important; }

.readText img{ max-width: 100% !important; height: auto !important; margin: auto; display: block; }
.readText ul, .readText ol{ padding-right: 2rem; }
.readText b, .readText strong{ font-family: titleFont; font-weight: bold; }
a{ text-decoration: none !important; }
.text-justify{ text-align: justify; }

/* company color */
.border-company{ border-color: var(--color1) !important; }
.border-company2{ border-color: var(--color2) !important; }
.border-company3{ border-color: var(--color3) !important; }

.bg-company1{ background: var(--color1) !important; }
.bg-company2{ background: var(--color2) !important; }
.bg-company3{ background: var(--color3) !important; }
.bg-company4{ background: var(--color4) !important; }
.bg-company5{ background: var(--color5) !important; }

.text-company1{ color: var(--color1) !important; }
.text-company2{ color: var(--color2) !important; }
.text-company3{ color: var(--color3) !important; }

.link-company1{ color: var(--color1) !important; transition: all .3s linear; }
.link-company2{ color: var(--color2) !important; transition: all .3s linear; }
.link-company3{ color: var(--color3) !important; transition: all .3s linear; }

.link-company1:hover{ color: var(--hColor1) !important; transition: all .3s linear; }
.link-company2:hover{ color: var(--hColor2) !important; transition: all .3s linear; }
.link-company3:hover{ color: var(--hColor3) !important; transition: all .3s linear; }

/* class text color */

/* image hover */
.image-hover-zoom{ overflow: hidden; }
.image-hover-zoom img{ transition: all 1.5s linear; }
.image-hover-zoom:hover img{ transform: scale(1.05); }

/* animation */
@keyframes imageOpacityAnimate {
    0% { opacity: 1; }
    50% { opacity: 0.3; }
    100% { opacity: 1; }
}
@keyframes imageOpacityRotateAnimate {
    0% { opacity: 1; transform: rotate(0); }
    50% { opacity: 0.3; transform: rotate(10deg); }
    100% { opacity: 1; transform: rotate(0); }
}
.imageOpacityAnimate{ animation: imageOpacityAnimate 3s ease-in infinite; }
.imageOpacityRotateAnimate{ animation: imageOpacityRotateAnimate 3s ease-in infinite; }

/* loader */
@keyframes loaderLogoAnimate {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#loaderLogo::after{ content: ""; width: 100%; height: 100%; background: var(--color2); position: absolute; left: 0; display: block; z-index: 1; animation: loaderLogoAfterAnimate 5s ease-in; }
#loaderLogo{ opacity: 1; animation: loaderLogoAnimate 6s ease-in; }

/* header */
#headerImg{ height: 8rem; position: absolute; top: 2.5rem; left: 10rem; }
#headerImg2{ width: 8rem; position: absolute; top: 2.5rem; left: 10rem; }
@media only screen and (max-width: 900px){
    #headerImg{ height: 4rem; left: 1.5rem; }
    
    #headerImg2{ width: 7rem; left: 1.5rem; }
}

/* main data */
@keyframes verticalLineAnimation {
    0% { top: -300%; }
    20% { top: -300%; }
    40% { top: 0; }
}
@keyframes horizontalLineAnimation {
    0% { right: -300%; }
    50% { right: -300%; }
    70% { right: 0; }
}
@keyframes horizontalLineFigureAnimation {
    0% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 1; }
}
.main-padding-1{ padding-right: 2rem; }

/* vertical line */
.hasVerticalLine{ position: relative; z-index: 2; }
.hasVerticalLine::before{ content: ""; width: 0.45rem; height: 100%; clip-path: polygon(0 2px, 60% 0, 100% calc(100% - 3px), 0 100%); position: absolute; top: 0; right: 1.2rem; animation: verticalLineAnimation 1.5s ease-in; display: block; z-index: -1; }
.hasVerticalLine.color2::before{ background: var(--hColor2); }
.hasVerticalLine.color3::before{ background: var(--hColor3); }
.hasVerticalLine.color4::before{ background: var(--hColor4); }
.hasVerticalLine.color5::before{ background: var(--hColor5); }

/* horizontal line */
.hasHorizontalLine{ margin-bottom: .15rem; padding-bottom: .55rem; position: relative; z-index: 2; }
.hasHorizontalLine::after{ content: ""; width: calc(100% + .2rem); height: .4rem; clip-path: polygon(0 0, 100% 3px, calc(100% - 2px) 100%, 3px 100%); position: absolute; bottom: 0; right: 0; animation: horizontalLineAnimation 1.5s ease-in; display: block; z-index: -1; }
#mainData2.hasHorizontalLine::after{ width: calc(100% - 1.5rem); }
.hasHorizontalLine.color2::after{ background: var(--hColor2); }
.hasHorizontalLine.color3::after{ background: var(--hColor3); }
.hasHorizontalLine.color4::after{ background: var(--hColor4); }
.hasHorizontalLine.color5::after{ background: var(--hColor5); }

.hasBeforeHorizontalLine{ margin-top: .15rem; padding-top: .55rem; position: relative; z-index: 2; }
.hasBeforeHorizontalLine::before{ content: ""; width: 100%; height: .4rem; clip-path: polygon(0 0, 100% 3px, calc(100% - 2px) 100%, 3px 100%); position: absolute; top: 0; right: 0; animation: horizontalLineAnimation 1.5s ease-in; display: block; z-index: -1; }
.hasBeforeHorizontalLine.color2::before{ background: var(--hColor2); }
.hasBeforeHorizontalLine.color3::before{ background: var(--hColor3); }
.hasBeforeHorizontalLine.color4::before{ background: var(--hColor4); }
.hasBeforeHorizontalLine.color5::before{ background: var(--hColor5); }

.hasHorizontalLineRelativeFigure{ position: relative; top: 1px; }

#scrollArrowTop, #scrollArrowDown, .hasHorizontalLine figure, .hasBeforeHorizontalLine figure{ opacity: 1; animation: horizontalLineFigureAnimation 1.5s ease-in; }

/* content box */
#mainContainer{ width: calc(100% - 5rem); max-width: 720px; height: calc(100vh); padding: 4rem 10rem 4rem 0; }
#contentBox{ width: 100%; max-height: 100%; transform-origin: 100% 0; transform: rotate(2deg); overflow: hidden; }
#mainData2{ width: 100%; }
#mainDataInfo2{ width: calc(100% + 1.5rem); padding-left: 2.75rem; opacity: 1; animation: horizontalLineFigureAnimation 1.5s ease-in; }

#scrollArrowTop{ position: absolute; top: 0.25rem; right: 0; }
#scrollArrowDown{ position: absolute; bottom: 0.5rem; right: 0; }

@media only screen and (max-width: 900px){
    #mainContainer{ width: 100%; padding: 3rem 2rem 3rem 4.25rem; }
}

/* footer */
#footerImg{ width: 20rem; position: absolute; bottom: 0; left: 10rem; }
@media only screen and (max-width: 1200px){
    #footerImg{ width: 15rem; }
}
@media only screen and (max-width: 900px){
    #footerImg{ width: 13rem; left: 1.5rem; }
}

/* rating */
.ratingBtn::before{ color: #FFB61D; font-family: FontAwesome; display: block; transition: all .3s linear; }
.ratingBtn.fa-star::before{ content: "\f005"; }
.ratingBtn.fa-star-half-o::before{ content: "\f123"; }
.ratingBtn.fa-star-o::before{ content: "\f006"; }
.ratingBtn:hover::before, .ratingBtn:hover ~ .ratingBtn::before{ content: "\f005"; color: #eea508; }

/* check box */
.checkedBox { width: 1.5rem; height: 1.5rem; position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; }
.checkedBox input { position: absolute; top: -100%; opacity: 0; cursor: pointer; }
.checkedBox .checkmark { width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 1px solid #4b4b4b; transition: all .3s linear; }
.checkedBox:hover input ~ .checkmark { background-color: #ccc; }
.checkedBox input:checked ~ .checkmark { background-color: #31bdb0; border-color: #31bdb0; }
.checkedBox .checkmark:after { content: ""; width: 0.5rem; height: 0.9rem; margin: auto; position: absolute; left: 0; right: 0; top: 0; bottom: 0.2rem; border: solid white; border-width: 0 0.15rem 0.15rem 0; transform: rotate(40deg); display: none; }
.checkedBox input:checked ~ .checkmark:after { display: block; }

 /* Extra Small Devices, Phones */ 
@media only screen and (min-width : 576px) {
    .border-top-sm-0{ border-top: none !important; }
}
 
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    .border-top-md-0{ border-top: none !important; }
}
 
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    .border-top-lg-0{ border-top: none !important; }
}
 
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .border-top-xl-0{ border-top: none !important; }
}