@font-face {
    font-family: 'estedad';
    src: url('../fonts/Estedad/Estedad.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'estedadfa';
    src: url('../fonts/Estedad/Estedad-FD.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --bs-gutter-x: 1.5rem;
    --font-family: 'estedad';

    --color-neutral-700: #404040;

    --color-primary-0: #8200DB;
    --color-primary-10: #8D39E1;
    --color-primary-20: #9855E6;
    --color-primary-30: #A46DEB;
    --color-primary-40: #B084EF;
    --color-primary-50: #BD99F3;

    --gradient-primary: linear-gradient(90deg, #9810FA 0%, #7A00CE 87.5%, #8200DB 100%);
    --color-page-background: #121212;
}

body {
    font-family: 'estedad', serif;
    color: #FFF;
    font-size: 16px;
    background: var(--color-page-background);
}

button, input, select, textarea {
    font-family: 'estedad', serif;
    color: #FFF;
}

body:before{
    content: "";
    left: 0;
    right: 0;
    height: 1000px;
    z-index: -1;
    background: var(--color-page-background) url('../images/background-pattern.png') no-repeat top;
    background-size: cover;
    position: absolute;
    mask-image: linear-gradient(
            to bottom,
            #000000,
            #000 50%,
            transparent
    );

    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

* {
    box-sizing: border-box;
}
.divider-10{
    height: 10px;
}
/** Styles **/

/** titles **/
.body-xs{
    font-size: 10px;
    font-weight: 200;
}
.body-s{
    font-size: 12px;
    font-weight: 200;
}
.body-m{
    font-size: 14px;
    font-weight: 200;
}
.body-l{
    font-size: 16px;
    font-weight: 200;
}
.title-s{
    font-weight: 500;
    font-size: 14px;
}
.title-m{
    font-weight: 500;
    font-size: 16px;
}
.title-l{
    font-weight: 500;
    font-size: 18px;
}
.title-xl{
    font-weight: 500;
    font-size: 20px;
}

/** Heading **/
.heading-l{
    font-weight: 500;
    font-size: 24px;
}
.heading-m{
    font-weight: 500;
    font-size: 20px;
}
.heading-18{
    font-weight: 500;
    font-size: 18px;
}
.heading-s{
    font-weight: 600;
    font-size: 16px;
}
.heading-14{
    font-weight: 500;
    font-size: 14px;
}
.heading-xs{
    font-weight: 500;
    font-size: 12px;
}

.color-primary{
    color: var(--color-primary-0);
}

.box{
    background: rgba(23, 23, 23, 0.3);
    border: 1px solid #404040;
    box-shadow: inset -1px -1px 4px rgba(161, 161, 161, 0.25);
    backdrop-filter: blur(2px);
    border-radius: 24px;
    padding: 15px;
}

/** #Styles **/

h1{
    font-weight: 700;
}

p{
    font-weight: 400;
}

a,a:visited {
    color: #FFF;
    text-decoration: none;
}

.w-100{
    width: 100%;
}
.w-50{
    width: 50%;
}
.w-25{
    width: 25%;
}

/** Container **/
.container,
.container-fluid {
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

.main-container {
    display: flex;
    flex-direction: column;
    gap: 100px;
}



@media (min-width: 576px) {
    .container {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
    .main-container {
        gap: 250px;
        margin-bottom: 100px;
    }

}

@media (min-width: 992px) {
}

@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1440px;
    }
}


/** #Container **/


.section-separator:before{
    content: "";
    height: 200px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: url('../images/desktop-separator.png')  top;
    background-size: 100% auto;
    mask-image: linear-gradient(
            to bottom,
            transparent,
            #000 50%,
            transparent
    );

    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

.section-separator {
    position: relative;
    margin-top: -150px;
}


/** Btn **/
.btn {
    display: inline-flex;
    gap: 4px;
    padding: 3px 20px;
    border-radius: 10px;
    border: 2px solid transparent;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.btn:before{
    content: "";
    height: 16px;
    background: url('../images/loading-spinner.svg') no-repeat center;
    background-size: 100%;
    width: 0;
    transition: 0.3s;
}

.btn.loading:before{
    width: 16px;
}

.btn[disabled] {
    filter: grayscale(.8);
}

.btn > svg{
    width: 0;
    height: 0;
    transition: 0.3s;
}
.btn:hover > svg{
    width: 24px;
    height: 24px;
}
.btn-rounded{
    border-radius: 50px;
}
.btn.btn-primary {
    background: var(--color-primary-0);
    border-color: var(--color-primary-0);
}

.btn.btn-primary:hover{
    background: #4f0083;
    border-color: #4f0083;
}

.btn.btn-large {
    padding: 5px 15px;
}

.btn.btn-outline {
    border-color: var(--color-primary-0);
}
/** #Btn **/


/** Nav **/
#nav {
    background: rgba(23, 23, 23, 0.3);
    border: 1px solid #404040;
    box-shadow: inset -1px -1px 4px rgba(161, 161, 161, 0.25);
    border-radius: 16px;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    backdrop-filter: blur(5px);
}

#mobile-nav-btn{
    height: 48px;
    display: block;
}

.nav-container{
    position: sticky;
    top: 10px;
    z-index: 9;
}

#nav > nav {
    display: none;
    align-items: center;
    gap: 30px;
}
#nav .nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
}
#nav .nav-btn-login{
    display: none;
}
.nav-logo{
    height: 56px;
}
.slide-menu{
    position: relative;
}

.mobile-nav {
    position: absolute;
    display: flex;
    opacity: 0;
    transition: 0.3s;
    transform: translateY(20px);
    visibility: hidden;
    flex-direction: column;
    padding: 15px;
    background: rgba(23, 23, 23, 0.85);
    border: 1px solid #404040;
    box-shadow: inset -1px -1px 4px rgba(161, 161, 161, 0.25);
    border-radius: 16px;
    backdrop-filter: blur(4px);
}

.mobile-nav.open{
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav a {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 10px;
    white-space: nowrap;
}

.mobile-nav a:not(:last-child) {
    border-bottom: 1px solid var(--color-neutral-700);
}

#nav .logo-right{
    display: none;
}

@media screen and ( min-width: 768px ) {
    #nav {

    }
    #nav > nav{
        display: flex;
    }
    #nav .nav-btn-login{
        display: inline-flex;
    }
    .slide-menu{
        display: none;
    }
    #nav .logo-right{
        display: block;
    }
    #nav .logo-left{
        display: none;
    }
    .nav-container{
        top: 25px;
    }
}
/** #Nav **/

/** Header **/
.header-fluid{
    padding-top: 25px;

}
div#header {
    display: flex;
    align-items: center;
    flex-direction: column-reverse;
    gap: 50px;
    justify-content: center;
}

.header-info-box {
    background: rgba(23, 23, 23, 0.3);
    border: 1px solid #404040;
    box-shadow: inset -1px -1px 4px rgba(161, 161, 161, 0.25);
    backdrop-filter: blur(2px);
    border-radius: 24px;
    padding: 15px;
    max-width: 95%;
    width: 400px;
    margin-top: 100px;
}

.header-info-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-info-footer > a {
    width: 100%;
}
.header-info-box h1{
    font-size: 36px;
    font-weight: 800;
    margin: 0;
    color: var(--color-primary-0);
}
.header-subtitle{
    margin-top: 0;
}

.header-preview {
    position: relative;
}

.header-preview img{
    max-width: 100%;
    height: auto;
}

picture.preview-mobile {
    display: block;
    position: absolute;
    left: 25px;
    bottom: -130px;
}

.preview-mobile img {
    width: 150px;
}

@media screen and ( min-width: 768px ) {
    .header-fluid{
        margin-top: 75px;
    }
    .preview-mobile img {
        width: 222px;
    }
}

@media screen and ( min-width: 1200px ) {
    div#header {
        flex-direction: row;
        justify-content: space-between;
    }
    .header-info-box{
        margin-top: initial;
    }
    picture.preview-mobile {
        left: -37px;
    }
}
/** #Header **/

/** Why **/

#why-mindraft h2, #why-mindraft > p {
    text-align: center;
}

.why-items {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 15px;
}

.why-item {
    display: grid;
    grid-template-columns: auto 72px;
    gap: 20px;
    align-items: center;
    transition: 0.3s;
}

.why-item:hover {
    background: rgba(89, 22, 139, 0.05);
    border: 1px solid #8200DB;
}

.why-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    width: 72px;
    aspect-ratio: 1;
    background: rgba(89, 22, 139, 0.29);
    box-shadow: inset -0.5px -0.5px 2px rgba(161, 161, 161, 0.25);
}

.why-item.box p {
    margin: 0;
}


@media screen and ( min-width: 1200px ) {
    .why-items {
        grid-template-columns: repeat(2,1fr);
    }
}
/** #Why **/


/** Features **/
#features h2, #features > p {
    text-align: center;
}


.tab-nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 30px;
}

.tab-nav a {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(23, 23, 23, 0.3);
    border: 1px solid #404040;
    box-shadow: inset -1px -1px 4px rgba(161, 161, 161, 0.25);
    border-radius: 24px;
    padding: 7px 20px;
    transition: 0.3s;
}

.tab-nav a.active {
    background: rgba(89, 22, 139, 0.2);
    border-color: #8200DB;
}

.tab-nav a:hover {
    border-color: #8200DB;
}

.tab-contents {
    position: relative;
    margin-top: 15px;
}

.tab-navigation {
    position: absolute;
    right: 15px;
    bottom: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.tab-content {
    display: none;
    grid-template-columns: auto 40%;
    flex-direction: column-reverse;
    gap: 25px;
    border-radius: 24px;
    padding: 30px 20px;
    border: 1px solid var(--color-primary-0);
}

.tab-content.active{
    display: flex;
}

.tab-navigation a {
    padding: 5px;
    font-size: 30px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: 0.3s;
}

.tab-content picture {
    text-align: center;
}

.tab-content picture img{
    max-width: 100%;
    height: auto;
}

.tab-navigation a.active {
    background: var(--color-primary-0);
    border-color: var(--color-primary-0);
}

.tab-navigation a:hover {
    border-color: var(--color-primary-0);
}
@media screen and ( min-width: 1200px ) {
    .tab-content.active{
        display: grid;
    }
    .tab-content picture{
        text-align: left;
    }
}
/** #Features **/


/** Download **/
#download h2, #download > p {
    text-align: center;
}


.download-types {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 15px;
}

.type-header {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: center;
    background: #171717;
    border: 1px solid #262626;
    box-shadow: inset -0.5px -0.5px 2px rgba(161, 161, 161, 0.25);
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 15px;
}

.type-items {
    display: grid;
    grid-template-columns: repeat(1,1fr);
    gap: 15px;
}

.type-items a {
    border: 2px solid #404040;
    box-shadow: inset -1px -1px 4px rgba(161, 161, 161, 0.25);
    border-radius: 16px;
    display: grid;
    grid-template-columns: auto 64px;
    padding: 10px;
    align-items: center;
    transition: 0.3s;
}

.type-items a:hover{
    border-color: var(--color-primary-0);
}

.type-items a p {
    margin: 0;
}

.type-items a span {
    display: block;
}

.download-item-icon {
    display: flex;
}

.download-hover-icon {
    width: 64px;
    height: 64px;
    background: rgba(89, 22, 139, 0.2);
    position: absolute;
    border-radius: 50%;
    padding: 20px;
    transition: 0.3s;
    opacity: 0;
}

.platform-icon {
    transition: 0.3s;
}

.type-items a:not(.disable-hover-download-icon):hover .platform-icon {
    opacity: 0;
}

.type-items a:not(.disable-hover-download-icon):hover .download-hover-icon {
    opacity: 1;
}

@media screen and ( min-width: 1200px ) {
    .download-types {
        grid-template-columns: repeat(2,1fr);
    }

}
@media screen and ( min-width: 600px ) {
    .type-items {
        grid-template-columns: repeat(2,1fr);
    }
}
/** #Download **/



/** Footer **/
.site-footer {
    /*display: flex;*/
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    gap: 25px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.footer-link {
    display: flex;
    flex-direction: column;
}

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

.footer-logos {
    display: grid;
    grid-template-columns: 33% auto;
    gap: 15px;
    direction: ltr;
    margin:auto;
}

.footer-licenses {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-socials {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
    text-align: center;
}

.footer-socials i {
    font-size: 36px;
}

.footer-logos a, .mobile-footer > a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    aspect-ratio: 1;
}

.mobile-footer {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 5px;
    margin-bottom: 10px;
    border-radius: 10px 10px 4px 4px;
    grid-template-areas:
        "logo logo logo samandehi"
        "logo logo logo enamad"
        "linkedin instagram website telegram"
}

.mobile-footer .footer-link {
    margin-top: -15px;
}

.mobile-footer a{
    padding: 5px;
}

.mobile-footer a.box{
    font-size: 12px;
}

.mobile-footer .box i {
    font-size: 30px;
}

.mobile-footer img{
    width: 48px;
    height: auto;
}

.mobile-footer .footer-logo{
    grid-area: logo;
}

.copyright {
    text-align: center;
    border-radius: 10px 10px 25px 25px;
    margin-bottom: 25px;
}

.copyright p{
    margin: 0;
}

@media screen and ( min-width: 600px ) {
    .mobile-footer{
        display: none;
    }
    .site-footer{
        display: flex;
    }
}

@media screen and ( min-width: 1200px ) {
    .footer-logos{
        margin: initial;
    }
}

.footer-wrapper{
    background-image: url('../images/pattern-footer.png');
    background-size: cover;
    position: relative;
    margin-top: 200px;
}

.footer-wrapper:before{
    content: '';
    background-image: url('../images/pattern-footer-top.png');
    position: absolute;
    top: -100px;
    left: 0;
    width: 100%;
    height: 100px;
}

/** #Footer **/


/** About **/
.modal {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    align-items: center;
    transition: 0.3s;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 15;
    background: #00000069;
    backdrop-filter: blur(3px);
}
.modal.open{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.modal-box {
    width: 900px;
}

.about-developers-box {
    display: flex;
    justify-content: space-between;
}

.about-developers {
    display: flex;
    gap: 15px;
    text-align: center;
    justify-content: space-between;
}

.modal-box {
    background: #171717;
    border: 1px solid #404040;
    border-radius: 24px;
}

.modal-box > header {
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #262626;
}

.modal .close-modal{
    cursor: pointer;
}

.modal-box > header h4 {
    margin: 0;
}

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

.modal-body {
    padding: 20px;
}

.about-footer {
    display: grid;
    grid-template-columns: auto 200px;
    gap: 30px;
}

.about-social-box {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}

.about-social-box a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(23, 23, 23, 0.3);
    border: 1px solid #404040;
    border-radius: 16px 8px 8px 8px;
}

.about-social-box a i {
    font-size: 32px;
}

.about-developer img {
    border-radius: 50%;
    border: 3px solid #ffffff8a;
    height: auto;
}

.about-developer {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.about-description{
    line-height: 200%;
}

.about-developer p {
    margin: 0;
    font-size: 14px;
}

.about-developer span {
    font-size: 12px;
}

.modal-about h5{
    margin-bottom: 10px;
}

/** #About **/


/** Contact **/
.form-group label {
    display: flex;
    margin-bottom: 5px;
    margin-top: 10px;
}

.form-input-icon {
    position: relative;
}

.form-group input,.form-group select, .form-group textarea {
    display: block;
    width: 100%;
    background: #171717;
    border: 1px solid #404040;
    border-radius: 16px;
    padding: 10px 40px 10px 15px;
}

.form-group select{
    appearance: none;
    -webkit-appearance: none;
}

.form-input-icon .select-arrow {
    right: initial;
    left: 15px;
}

.form-input-icon > i {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 25px;
    color: #7b7b7b;
}

/** #Contact **/