@import url(fontiran.css);

body {
    font-family: IRANSans !important;
    font-weight: 100;
    direction: rtl;
    text-align: right;
    /*background-color: #E2E2E2;*/
    background-color: #ffffff;
    margin: 0;
}

h1, h2, h3, h4, h5, h6, input, textarea {
    font-family: IRANSans !important;
}

h1 {
    font-weight: bold;
}

a {
    text-decoration: none;
}

.wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.ltr {
    direction: ltr;
}

.text-right {
    text-align: right;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-small {
    font-size: 0.8em;
}

.text-xsmall {
    font-size: 0.6em;
}

.text-large {
    font-size: 1.2em;
}

.text-xlarge {
    font-size: 1.4em;
}

.text-underline {
    text-decoration: underline;
}

.text-ultralight {
    font-weight: 200;
}

.text-light {
    font-weight: 300;
}

.text-regular {
    font-weight: normal;
}

.text-medium {
    font-weight: 500;
}

.text-bold {
    font-weight: bold;
}

.text-black {
    font-weight: 900;
}

blockquote {
    font-weight: 500;
    padding: 10px;
    border: 1px dashed #666666;
}

.mainbox {
    width: 100%;
    background-color: #EFEFEF;
    display: table;
    margin-bottom: 30px;
    border-right: 8px solid #FFFF33;
}

.mainboxnegativ {
    width: 100%;
    background-color: #000000;
    display: table;
    margin-bottom: 30px;
    border-right: 8px solid #FFFF33;
    color: #F9F9F9;
}

.mainbox2 {
    font-size: 1em;
    width: 90%;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.mainbox3 {
    width: 100%;
    background-color: #b8b8b8;
    display: table;
    margin-bottom: 30px;
    border-right: 8px solid #bd70ff;
}

.mainbox2negativ {
    font-size: 1em;
    color: #F9F9F9;
    background-color: #000000;
    padding-right: 20px;
}

.farsiparagraph {
    font-size: 1em;
    width: 47%;
    float: right;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;

}

.englishparagraph {
    font-size: 1em;
    width: 47%;
    float: left;
    direction: ltr;
    padding-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;


}

.rightbox {
    width: 60%;
    padding-right: 20px;
    padding-left: 5px;
    float: right;
    margin-left: 10px;
    margin-bottom: 0px;
    min-width: 0px;
    background-color: #F7F7F7;

}

.titelbox {
    width: 60%;
    padding-right: 25px;
    padding-left: 0px;
    float: right;
    margin-left: 10px;
    margin-bottom: 0px;
    min-width: 0px;
    background-color: #F2F2F2;
    color: #4B4B4B;
}


.lefttbox {

    padding-right: 20px;
    padding-left: 4px;
    float: right;
    margin-bottom: 10px;
    min-width: 0px;
}

.alphabet {
    width: 35%;
    float: left;
    font-size: 21em;
    text-align: center;
    font-weight: 500;
    color: #999999;
}

.alphabet2 {
    width: 35%;
    float: left;
    direction: ltr;
    font-size: 1.6em;
    text-align: left;
    font-weight: 500;
    color: #333333;
    margin-top: 100px;
}

.belize {
    color: #2980b9;
}

.belize_bg {
    background-color: #2980b9;
}

.asbestos {
    color: #7f8c8d;
}

.just {
    text-align: justify;
}

.first_repeat {
    height: 79px;
    background-image: url("../img/transparent/Triangle.png");
    background-repeat: repeat-x;
    animation: forlogo 5s infinite;
    position: relative;
}

.first_repeat_second {
    height: 79px;
    background-image: url("../img/transparent/Triangle.png");
    background-repeat: repeat-x;
    animation: forlogoS 5s infinite;
    position: relative;
}

.peter-bg {
    background-color: #3498db;
}
.setakk-bg{
    background-image: linear-gradient(to right, #3163c1 , #1f4a9d , #0c3175);
}
.peter-color {
    color: #3498db;
}

.more_back {
    background-image: url("../img/background2.jpg");
}


@keyframes forlogo {
    0%,
    100% {
        left: 0;
    }

    50% {
        left: 100px;
    }
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--bs-nav-tabs-link-active-color);
    background-color: #3498db;
    border-color: #3498db;
}

@keyframes forlogoS {
    0%,
    100% {
        left: 100px;
    }

    50% {
        left: 0;
    }
}

.shape-section {
    background: #222;
    border-bottom: 2px solid #555;
    border-top: 2px solid #555;
    margin-top: 30px;
    padding: 40px 0;
}

.diamond-shape {
    background: #fff;
    height: 60px;
    text-align: center;
    transform: rotate(45deg);
    width: 60px;
}

.item-count {
    color: #333;
    display: table-cell;
    height: 60px;
    transform: rotate(-45deg);
    vertical-align: middle;
    width: 60px;
}

.rotate {
    animation: rotation 20s infinite linear;
}

@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.target {
    font-weight: bold;
    color: #fbfbfb;
    animation-name: rightToLeft;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    /* animation: rightToLeft 4.5s linear infinite; */
}

@keyframes rightToLeft {
    0% {
        transform: translateX(1000px);
    }
    100% {
        transform: translateX(-660px);
    }
}

#bg {
    background: url('../img/logos/logos.jpg');
    width: 100%;
    height: 185px;
    animation: bgScrollLeft 80s linear infinite;
}


@keyframes bgScrollLeft {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -3000px 0;
    }
}

#bg2 {
    background: url('../img/v01.png');
    width: 100%;
    height: 150px;
    animation: bgScrollRight 60s linear infinite;
}


@keyframes bgScrollRight {
    from {
        background-position: -3000px 0;
    }
    to {
        background-position: 0 0;
    }
}

.more_q_bg {
    background-image: url("../img/back_logo.png");
}

.background {
    background: linear-gradient(132deg, #FC415A, #591BC5, #3498db);
    background-size: 400% 400%;
    animation: Gradient 15s ease infinite;
    position: relative;
    height: 35vh;
    width: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0px;
}

.cube {
    position: absolute;
    top: 80vh;
    left: 45vw;
    width: 10px;
    height: 10px;
    border: solid 1px #D7D4E4;
    transform-origin: top left;
    transform: scale(0) rotate(0deg) translate(-50%, -50%);
    animation: cube 12s ease-in forwards infinite;
}

.cube:nth-child(2n) {
    border-color: #FFF;
}

.cube:nth-child(2) {
    animation-delay: 2s;
    left: 25vw;
    top: 40vh;
}

.cube:nth-child(3) {
    animation-delay: 4s;
    left: 75vw;
    top: 50vh;
}

.cube:nth-child(4) {
    animation-delay: 6s;
    left: 90vw;
    top: 10vh;
}

.cube:nth-child(5) {
    animation-delay: 8s;
    left: 10vw;
    top: 85vh;
}

.cube:nth-child(6) {
    animation-delay: 10s;
    left: 50vw;
    top: 10vh;
}

/* Animate Background*/
@keyframes Gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes cube {
    from {
        transform: scale(0) rotate(0deg) translate(-50%, -50%);
        opacity: 1;
    }
    to {
        transform: scale(20) rotate(960deg) translate(-50%, -50%);
        opacity: 0;
    }
}


.last_f {
    background-image: url("../img/last/l1.png");

}

.last_f2 {
    background-image: url("../img/last/l2.png");

}

.last_f3 {
    background-image: url("../img/last/l3.png");

}

.last_f4 {
    background-image: url("../img/last/l4.png");

}

.last_f5 {
    background-image: url("../img/last/l5.png");

}

.scroller {
    height: 200px;
    overflow-y: scroll;
    scrollbar-color: #3498db white;
    scrollbar-width: thin;

}

.scroller2 {
    height: 300px;
    overflow-y: scroll;


}

.footer_bg{
    background-image: url("../img/gold_border.png");
    background-repeat: repeat-x;
    height: 28px;
    position: relative;
}