/*
|--------------------------------------------------------------------------
| MOAKHAT LANDING PAGE
| Version 4.0
|--------------------------------------------------------------------------
*/

/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero{

    display:flex;

    align-items:flex-start;

    justify-content:center;

    text-align:center;

    padding:35px 0 60px;

}

.hero .container{

    width:min(1500px, calc(100% - 70px));

}

.hero-logo{

    display:flex;

    justify-content:center;

    margin-bottom:6px;

}

.hero-logo img{

    width:240px;

    height:auto;

    transition:.30s;

}

.hero-logo img:hover{

    transform:scale(1.02);

}

.hero h1{

    font-size:78px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:6px;

    letter-spacing:1px;

}

.hero-ar{

    max-width:1250px;

    margin:auto;

    margin-bottom:10px;

    font-size:38px;

    line-height:1.75;

    color:var(--primary);

}

.hero-id{

    max-width:1150px;

    margin:auto;

    margin-bottom:28px;

    font-size:27px;

    line-height:1.75;

    color:var(--text-light);

}

.hero-buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    flex-wrap:wrap;

}

/*
|--------------------------------------------------------------------------
| SECTION
|--------------------------------------------------------------------------
*/

.section-title{

    text-align:center;

    margin-bottom:55px;

}

.section-title h2{

    margin-bottom:12px;

}

.section-title p{

    max-width:900px;

    margin:auto;

}

/*
|--------------------------------------------------------------------------
| VISION
|--------------------------------------------------------------------------
*/

.vision{

    padding:90px 0;

}

.vision-content{

    max-width:1100px;

    margin:auto;

    text-align:center;

}

.vision-ar{

    font-size:38px;

    line-height:2;

    color:var(--primary);

    margin-bottom:24px;

}

.vision-id{

    max-width:950px;

    margin:auto;

    font-size:27px;

    line-height:1.9;

}

/*
|--------------------------------------------------------------------------
| JOURNEY
|--------------------------------------------------------------------------
*/

.workflow{

    padding:100px 0;

}

.journey{

    max-width:1000px;

    margin:auto;

}

.journey-step{

    text-align:center;

    padding:45px 0;

}

.journey-icon{

    font-size:62px;

    margin-bottom:18px;

}

.journey-step h3{

    color:var(--primary);

    margin-bottom:14px;

}

.journey-step p{

    max-width:700px;

    margin:auto;

    line-height:1.9;

}

.journey-line{

    width:2px;

    height:70px;

    background:var(--border);

    margin:auto;

}
/*
|--------------------------------------------------------------------------
| BUTTON AREA
|--------------------------------------------------------------------------
*/

.hero-buttons .btn{

    min-width:240px;

}

/*
|--------------------------------------------------------------------------
| SPACING
|--------------------------------------------------------------------------
*/

.workflow + section{

    padding-top:120px;

}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width:900px){

    /*
    |--------------------------------------------------------------------------
    | Hero
    |--------------------------------------------------------------------------
    */

    .hero{

        padding:35px 0 55px;

    }

    .hero .container{

        width:calc(100% - 28px);

    }

    .hero-logo{

        margin-bottom:8px;

    }

    .hero-logo img{

        width:170px;

    }

    .hero h1{

        font-size:48px;

        margin-bottom:8px;

    }

    .hero-ar{

        font-size:24px;

        line-height:1.8;

        margin-bottom:12px;

    }

    .hero-id{

        font-size:19px;

        line-height:1.8;

        margin-bottom:24px;

    }

    .hero-buttons{

        flex-direction:column;

        gap:14px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:320px;

    }

    /*
    |--------------------------------------------------------------------------
    | Section
    |--------------------------------------------------------------------------
    */

    .section-title{

        margin-bottom:40px;

    }

    .section-title h2{

        margin-bottom:10px;

    }

    .section-title p{

        max-width:100%;

    }

    /*
    |--------------------------------------------------------------------------
    | Vision
    |--------------------------------------------------------------------------
    */

    .vision{

        padding:70px 0;

    }

    .vision-content{

        max-width:100%;

    }

    .vision-ar{

        font-size:24px;

        line-height:1.9;

        margin-bottom:18px;

    }

    .vision-id{

        font-size:20px;

        line-height:1.9;

    }

    /*
    |--------------------------------------------------------------------------
    | Journey
    |--------------------------------------------------------------------------
    */

    .workflow{

        padding:70px 0;

    }

    .journey-step{

        padding:30px 0;

    }

    .journey-icon{

        font-size:46px;

    }

    .journey-step h3{

        font-size:28px;

    }

    .journey-step p{

        max-width:100%;

    }

    .journey-line{

        height:42px;

    }

}