/* ////////////////// config //////////////////*/

@font-face
{
    font-family: "Vazirmatn";

    src: url("../fonts/Vazirmatn[wght].ttf")
         format("truetype");

    font-weight: 100 900;

    font-style: normal;

    font-display: swap;
}
:root {
    --color-background: #fff;
    --color-text: #000;
}
html
{
    scroll-behavior: smooth;
    scrollbar-width: none;
}
body{   
    background: var(--color-background);
    padding: 0;
    margin: 0;
    color: var(--color-text);
    font-family:
        "Vazirmatn",
        Tahoma,
        sans-serif;
    font-size: 10px;
}
img{
    display: block;
    width: 100%;
}
a{
    color: inherit;
    font: inherit;
    text-decoration: none;
}
a:hover{
        color: dodgerblue;
    }
button,
input,
textarea,
select
{
    font: inherit;
}

    
/* ========================= HEADER ========================= */
header
{
    position: fixed;
    top: 10px;

    width: 100%;

    border: 1px solid transparent;
    border-radius: 0;

    background: transparent;

    box-shadow: none;

    z-index: 1000;

    transition:
        width 1s ease .1s,
        margin-right 1s ease .1s,
        border-radius 1s ease .1s,
        border-color 1s ease .1s,
        background 1s ease .1s,
        backdrop-filter 1s ease .1s,
        box-shadow 1s ease .1s;
}
nav
{

    display: grid;
    grid-template-columns:
        auto
        80px
        80px
        80px
        150px
        80px
        80px
        80px
        auto;
    align-content: center;
    text-align: center;
    padding-top: 60px;
    transition:
        padding-top 1s ease .1s;
}
.header-logo
{
    text-align: center;

    display: grid;

    grid-template-rows:
        auto
        auto
        auto;

    align-content: center;

    transition:
        padding-top 1s ease .1s;
}
.header-logo-image
{
    padding-top: 10px;

    width: 60px;
    height: 60px;

    margin: auto;
    margin-top: -60px;

    transition:
        opacity .8s ease .4s,
        transform .8s ease .4s;
}
.header-logo-title
{
    margin-top: -5px;

    letter-spacing: .35em;

    font-size: 1rem;

    font-weight: 700;

    line-height: .8;

}
.header-logo-subtitle
{
    padding-right: 5px;

    letter-spacing: .1em;

    font-size: .7rem;

    font-weight: 500;

    line-height: 2;

    opacity: 50%;
}
.header-side-left,
.header-link-login,
.header-link-menu,
.header-link-product,
.header-link-platform,
.header-link-teach,
.header-link-about,
.header-link-suport,
.header-side-right
{
    font-size: 1.1rem;
    font-weight: 600;
    opacity: .7;
    transition:
        font-size 1s ease,
        opacity 1s ease;
}


.header-side-left{    
}
.header-side-right{    
}

/* ========================= SCROLLED STATE ========================= */
.header.scrolled
{
    width: 90%;
    margin-right: 5%;
    border-color: rgba(255,255,255,.45);
    border-radius: 999px;
    background: rgba(255,255,255,.74);
    backdrop-filter: blur(5px);
    box-shadow:
        0 12px 35px
        rgba(15,23,42,.08);
}
.header.scrolled .header-logo-image
{
    opacity: 0;

    transform:
        scale(.6);

    pointer-events: none;
        transition:
        opacity .5s ease ,
        transform .5s ease ;
}
.header.scrolled nav
{
    padding-top: 15px;
}






main
{
    width: 100%;
    padding-top: 200px;
    font-size: 5em;
}
section{
    margin-bottom: 315px !important; 
}












/* ========================= MOBILE ========================= 
@media (max-width: 768px)
{

    .header-side-left
    {
        order: 7;
    }


    .header-link-login
    {
        order: 6;
    }


    .header-link-menu
    {
        order: 2;
        display: inline;
    }    
    
    
    .header-link-product
    {
        order: 3;
    }


    .header-link-platform
    {
        display: none;
    }


    .header-link-teach
    {
        order: 5;
    }


    .header-link-about
    {
        display: none;
    }


    .header-link-suport
    {
        display: none;
    }


    .header-side-right
    {
        order: 1;
    }


    .header-logo
    {
        order: 4;
    }

    .header-logo-image{
        padding-top: 0;
    }
    nav
    {
        padding-top:80px;
        grid-template-columns:
            auto
            70px
            70px
            150px
            70px
            70px
            auto;
    }


    .header-side-left,
    .header-link-login,
    .header-link-menu,
    .header-link-product,
    .header-link-platform,
    .header-link-teach,
    .header-link-about,
    .header-link-suport,
    .header-side-right
    {
        margin-top: -5px;
        font-size: .9rem;

        font-weight: 500;

        opacity: 70%;
    }

}
*/










    
.hero{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    display: grid;
    grid-column-gap: 20px;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
}
.hero-image{
    max-width: 40%;
    margin: auto;
    grid-row-start: 1;
    grid-row-end: 5;
}
.hero-title{
    max-width: 400px;
    font-weight: 800;
    text-align: right;
    opacity: .8;
    margin: auto;
    margin-top: 60px;
}
.hero-text{
    width: 400px;
    margin: auto;
    text-align: left;
    font-size: .45em;
    font-weight: 700;
    opacity: .7;
    margin-top: 10px;
}
.hero-button{
    font-size: .3em;
    background-color: #333;
    color: aliceblue;
    border: 2px solid #111;
    border-radius: 10px;
    width: 120px;
    height: 35px;
    padding-right: 30px;
    padding-top: 10px;
    margin-top: 80px;
    margin-right: 55%;
} 




.describe1{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns:45% auto;
    grid-template-rows: auto auto auto;
}
.describe1-hero{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 5;
}
.describe1-title{
    text-align: center;
    font-size: clamp(.2em ,3cqw, .85em);
    margin-right: 5%;
    font-weight: 800;
    opacity: .8;
    padding-top: 20px;
}
.describe1-text{

    text-align: left;
    margin-right: 5%;
    font-size: clamp(.2em ,1.4cqw, .4em);
    font-weight: 700;
    opacity: .7;
    margin-top: 40px;
    padding-left: 5%;
}
.describe1-footer{
    font-size: clamp(.2em ,1.6cqw, .45em);
    font-weight: 800;
    opacity: .7;
    text-align: center;
    margin-top: 60px;

}



.describe2{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto auto auto;
}
.describe2-hero{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 5;
}
.describe2-title{
    text-align: center;
    font-size: clamp(.2em ,3cqw, .9em);
    margin-right: 5%;
    font-weight: 800;
    opacity: .8;
    padding-top: 20px;
}
.describe2-text{

    text-align: left;
    margin-right: 5%;
    font-size: clamp(.2em ,1.4cqw, .4em);
    font-weight: 700;
    opacity: .7;
    margin-top: 40px;
    padding-left: 10%;
}
.describe2-footer{
    font-size: clamp(.2em ,1.6cqw, .45em);
    font-weight: 800;
    opacity: .7;
    text-align: center;
    margin-top: 60px;

}


.describe3{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: 50% auto;
    grid-template-rows: auto auto auto;
}
.describe3-hero{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 5;
}
.describe3-title{
    text-align: center;
    font-size: clamp(.2em ,3cqw, .9em);
    margin-right: 5%;
    font-weight: 800;
    opacity: .8;
    padding-top: 20px;
}
.describe3-text{

    text-align: left;
    margin-right: 5%;
    font-size: clamp(.2em ,1.4cqw, .4em);
    font-weight: 700;
    opacity: .7;
    margin-top: 40px;
    padding-left: 10%;
}
.describe3-footer{
    font-size: clamp(.2em ,1.6cqw, .45em);
    font-weight: 800;
    opacity: .7;
    text-align: center;
    margin-top: 60px;

}




.cards-container{
    max-width: 80%;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
}
.cards-title{
    font-size: 80%;
    font-weight: 800;
    opacity: .7;
    grid-column-start: 1;
    grid-column-end: 4;
    padding-bottom: 40px;
}
.card-title{
    font-size: 280%;
    margin: auto;
    margin-bottom: 10px;
    font-weight: 500;
    opacity: .7;
    background-color: #fff;
    border-radius: 10px;
}
.card1{
    font-size: .4cqw;
    max-width: 50%;
    margin: auto; 
    background-color: #eee;
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 0;
}
.card2{
    font-size: .5cqw;
    max-width: 60%;
    margin: auto;
    background-color: #eee;
    border-radius: 30px;
    padding: 20px;
}
.card3{
    font-size: .4cqw;
    max-width: 50%;
    margin: auto;  
    background-color: #eee;
    border-radius: 30px;
    padding: 20px;
    margin-bottom: 0;
}


.advantage1{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto auto auto;
}
.advantage1-hero{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 5;
}
.advantage1-title{
    text-align: center;
    font-size: clamp(.2em ,3cqw, .9em);
    margin-right: 5%;
    font-weight: 800;
    opacity: .8;
    padding-top: 20px;
}
.advantage1-text{
    text-align: left;
    margin-right: 5%;
    font-size: clamp(.2em ,1.4cqw, .4em);
    font-weight: 700;
    opacity: .7;
    margin-top: 80px;
    padding-left: 10%;
}
.advantage1-footer{
    font-size: clamp(.2em ,1.6cqw, .45em);
    font-weight: 800;
    opacity: .7;
    text-align: right;
    margin-top: 80px;

}


.advantage2{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto auto auto;
}
.advantage2-hero{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 5;
}
.advantage2-title{
    text-align: center;
    font-size: clamp(.2em ,3cqw, .9em);
    margin-right: 5%;
    font-weight: 800;
    opacity: .8;
    padding-top: 20px;
}
.advantage2-text{

    text-align: left;
    margin-right: 5%;
    font-size: clamp(.2em ,1.4cqw, .4em);
    font-weight: 700;
    opacity: .7;
    margin-top: 80px;
    padding-left: 10%;
}
.advantage2-footer{
    font-size: clamp(.2em ,1.6cqw, .45em);
    font-weight: 800;
    opacity: .7;
    text-align: center;
    margin-top: 80px;

}

.advantage3{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto auto auto;
}
.advantage3-hero{
    width: 90%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 5;
}
.advantage3-title{
    text-align: center;
    font-size: clamp(.2em ,3cqw, .9em);
    margin-right: 5%;
    font-weight: 800;
    opacity: .8;
    padding-top: 20px;
}
.advantage3-text{

    text-align: left;
    margin-right: 5%;
    font-size: clamp(.2em ,1.4cqw, .4em);
    font-weight: 700;
    opacity: .7;
    margin-top: 80px;
    padding-left: 10%;
}
.advantage3-footer{
    font-size: clamp(.2em ,1.6cqw, .45em);
    font-weight: 800;
    opacity: .7;
    text-align: center;
    margin-top: 80px;

}

.shoot{
    /*background-color: aqua;
    border: 5px solid red;*/
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: grid;
    grid-template-columns: 45% auto;
    grid-template-rows: auto auto auto;
}
.shoot-hero{
    width: 80%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 5;
}
.shoot-title{
    text-align: center;
    font-size: clamp(.2em ,3cqw, .9em);
    margin-right: 5%;
    font-weight: 800;
    opacity: .8;
    padding-top: 20px;
}
.shoot-text{

    text-align: left;
    margin-right: 5%;
    font-size: clamp(.2em ,1.4cqw, .4em);
    font-weight: 700;
    opacity: .7;
    margin-top: 80px;
    padding-left: 10%;
}
.shoot-footer{
    font-size: clamp(.2em ,1.6cqw, .45em);
    font-weight: 800;
    opacity: .7;
    text-align: center;
    margin-top: 80px;

}
.shoot-button{
    font-size: .3em;
    font-weight: 600;
    background-color: #333;
    color: #88ffff;
    border: 2px solid #111;
    border-radius: 10px;
    width: 200px;
    height: 35px;
    padding-top: 10px;
    padding-right: 1px;
    margin-top: 80px;
    margin-right: 55%;
} 




footer{
    width: 100%;
    background-color: #001122;
    color: white;
    padding-top: 40px;
}
.footer-container{
    /*background-color: aqua;
    border: 5px solid red;*/
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto;
}

.footer-symbol{
    width: 80%;
    margin: auto;
    margin-top: 20px;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 4; 
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto auto;
}

.footer-symbol-img{
    width: 6cqw;
    opacity: .9;
    margin-right: 0%;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
}

.footer-symbol-title{
    font-size: 2cqw;
    font-weight: 700;
    letter-spacing: 15%;
    opacity: .9;
    margin: auto;
    margin-bottom: -15px;
}
.footer-symbol-text{
    font-size: 1cqw;
    font-weight: 600;
    letter-spacing: 20%;
    opacity: .7;
    margin: auto;
}
.footer-symbol-simple{
    font-size: 2cqw;
    font-weight: 700;
    opacity: .9;
    margin: auto;
    margin-top: 30px;
    grid-column-start: 1;
    grid-column-end: 3;
}

.footer-about{
    font-size: 1.5cqw;
    font-weight: 700;
    opacity: .9;
    margin: auto;
    margin-top: 20px;
}
.footer-product{
    font-size: 1.5cqw;
    font-weight: 700;
    opacity: .9;
    margin: auto;
    margin-top: 20px;
}
.footer-contact{
    font-size: 1.5cqw;
    font-weight: 700;
    opacity: .9;
    margin: auto;
    margin-top: 20px;
}
.footer-contact-title{
    
}
.footer-contact-number{
    font-size: 1.2cqw;
    padding-top: 20px;
}
.footer-contact-email{
    font-size: 1.2cqw;    
    padding-top: 10px;
}

.footer-bhmn{
    width: 100%;
    margin-top: 4cqw;
    margin-bottom: 1cqw;
    text-align: center;
    font-size: 1cqw;
    font-weight: 900;
    letter-spacing: 15%;
    opacity: .4;
    grid-column-start: 1;    
    grid-column-end: 5;
    grid-row-start: 3;
    
}