:root{
    --mainColor : #220135;
    --altColor : #F88901;
    --darkerMainColor : #190028;
    --darkestMainColor : #11001C;
}
@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: 200;
    src: url('../assets/fonts/woff/Morabba-UltraLight.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-UltraLight.woff2') format('woff2');
}

@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: 300;
    src: url('../assets/fonts/woff/Morabba-Light.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-Light.woff2') format('woff2');
}

@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: 500;
    src: url('../assets/fonts/woff/Morabba-Medium.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-Medium.woff2') format('woff2');
}

@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: 600;
    src: url('../assets/fonts/woff/Morabba-SemiBold.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: 800;
    src: url('../assets/fonts/woff/Morabba-ExtraBold.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-ExtraBold.woff2') format('woff2');
}

@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: 850;
    src: url('../assets/fonts/woff/Morabba-Black.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-Black.woff2') format('woff2');
}


@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: 900;
    src: url('../assets/fonts/woff/Morabba-Heavy.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-Heavy.woff2') format('woff2');
}

@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: bold;
    src: url('../assets/fonts/woff/Morabba-Bold.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-Bold.woff2') format('woff2');
}

@font-face {
    font-family: Morabba;
    font-style: normal;
    font-weight: normal;
    src: url('../assets/fonts/woff/Morabba-Regular.woff') format('woff'),
        url('../assets/fonts/woff2/Morabba-Regular.woff2') format('woff2');
}
body {
    font-family: morabba !important;
    direction: rtl;
    background-color: #cdcdcd;
    margin: 0;
}

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

h1 {
    font-weight: bold;
}

.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-semibold {
    font-weight: 600;
}

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

.text-extrabold {
    font-weight: 800;
}

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

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

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

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

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

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

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

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

.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;

}

.farsiparagraph_negativ {
    font-size: 1em;
    color: #F9F9F9;
    background-color: #000000;
    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;


}

.englishparagraph_negativ {
    font-size: 1em;
    color: #F9F9F9;
    background-color: #000000;
    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: #d5d5d5;
    color: #4B4B4B;
}


.lefttbox {

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

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

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

.footer {
    font-weight: 400;
    font-size: 0.7em;
    text-align: center;
    direction: ltr;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

@keyframes fadein1 {
    from {
        top: -7vh;
        opacity: 0;
    }

    to {
        top: 7vh;
        opacity: 1;
    }
}

@keyframes fadein2 {
    0% {
        top: -30vh;
        opacity: 0;
    }

    50%{
        opacity: 0;
    }
    100% {
        top: 30vh;
        opacity: 1;
    }
}

@keyframes fadein3 {
    0% {
        top: -22vh;
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        top: 22vh;
        opacity: 1;
    }
}

/* The Actual CSS */
.gt-image{
background-color: var(--darkestMainColor);
height: 50vh;
position: static;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
box-sizing: border-box;
float: top;
}

.gp-image{
background-image: url(../assets/Picture.png);
height: 50vh;
position: relative;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: 50%;
box-sizing: border-box;
float: bottom;
}
.flex-column-title{
    top: 7vh;
    position:relative;
    animation: fadein1 1s;
}
.flex-column-footer {
    top: 22vh;
    position: absolute;
    animation: fadein3 2.5s;
}
.title{
    color: var(--altColor);
    font-weight: bold;
    font-size: 5vh;
    text-align: center;
}

.subTitle{
color: #EFEFEF;
text-align: center;
font-size: 4vh;
font-weight: bold;
}

#buttons{
    top:30vh;
    left: 17.5vw;
    color:#000000;
    text-align: center;
    position: absolute;
    z-index: 10000000;
    animation: fadein2 1.5s;
    

}

.btn{
margin-bottom: 3vh;
width: 65vw;
font-weight: 500;
font-size: 3vh;
border-radius: 30px;
background-color: white;
}

.website{
    color: #0000FF;
}
.instagram{
    background-clip: border-box;
        background: linear-gradient(to left ,#CD39A0, #E8486A,
                #FF593F, #FF8B47, #FFD554);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;}

.linkedin{
    color:#0090FF
}

.google{
    background-clip: border-box;
        background: linear-gradient(to left, #00A66C,
                #59C36A, #FFDA2D, #F03800);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;}
.map {
    color: #4086F4;
}

.key{
    color: var(--altColor);
    font-weight: bold;
    font-size: 2.5vh;
    text-align: center;
}
.value{
    color: #EFEFEF;
    font-weight: 500;
    font-size: 2.3vh;
    text-align: center;
}
.row{
    --bs-gutter-x: 0;
}
}