/*  GLOBAL
    -----------------------------------------------------------------------------------------------
*/



.cover
{

    background-image: url(/Code/Image/Project/cover_01.webp);

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    width: 100%;
    height: 100vh;

    z-index: -99;

    top: 0;

}



.cover_title
{

    font-family: var(--x-title-font);
    font-size: 45px;
    font-weight: 600;

    color: var(--x-logo-forecolor);

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    padding: 20px 20px 20px 20px;

    width: 100%;
    max-width: 55%;

    background-color: rgba(0,0,0,0.5);

}



.cover_phone
{

    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    background-color: var(--x-color-orange);
    border-radius: 50%;

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    z-index: -1;

}



.cover_whatsapp
{

    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    background-color: #25D366;
    border-radius: 50%;

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    z-index: -1;

}



.cover_login
{

    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    background-color: #435ee2;
    border-radius: 50%;

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    z-index: -1;

}



.cover_login2
{

    display: flex;

    align-items: center;
    justify-content: center;

    width: 55px;
    height: 55px;

    background-color: #bac23b;
    border-radius: 50%;

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    z-index: -1;

}



.cover_mt
{

    margin-top: 180px;

}



.cover_subtitle
{

    font-family: var(--x-title-font);
    font-size: 35px;
    font-weight: 400;

    color: var(--x-logo-forecolor);

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    position: absolute;
    padding: 20px 20px 20px 20px;

    background-color: rgba(0,0,0,0.5);

    bottom: 200px;

}



.scroll 
{

    position: absolute;

    bottom: 20px;
    left: 49%;

}



.flex_box
{

    -ms-flex: 0 0 30%;
    flex: 0 0 30%;
    max-width: 30%;

    word-break: break-word;

}



.box_02
{

    position: relative;

    font-family: var(--x-logo-font);
    font-size: 17px;
    font-weight: 400;

    color: var(--x-input-text-forecolor);

    letter-spacing: 1px;

    background-color: #ffffff;

    text-align: justify;
    margin-left: auto;
    margin-right: auto;

    width: 100%;
    height: 320px;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border-radius: 12px;

    padding: 30px 30px 30px 30px;

}



.icon_box 
{

    position: absolute;

    top: -20px;
    left: -20px;

    width: 60px;
    height: 60px;

    background: #ff4800;
    border-radius: 12%;

    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;

    cursor: pointer;
    border: 2px solid #ffffff;

}



@media screen and (max-width:1899.98px)
{

    .cover_title
    {

        font-size: 45px;

        max-width: 55%;

    }



    .cover_mt
    {

        margin-top: 150px;

    }



    .cover_subtitle
    {

        font-size: 29px;

        padding: 15px 15px 15px 15px;

        bottom: 150px;

    }

    .box_02
    {

        height: 400px;

    }

}



@media screen and (max-width:1499.98px)
{

    .cover_title
    {

        font-size: 45px;

        max-width: 55%;

    }



    .cover_mt
    {

        margin-top: 150px;

    }



    .cover_subtitle
    {

        font-size: 29px;

        padding: 15px 15px 15px 15px;

        bottom: 150px;

    }

    .box_02
    {

        height: 400px;

    }

}



@media screen and (max-width:1499.98px)
{

    .cover_title
    {

        font-size: 45px;

        max-width: 55%;

    }



    .cover_mt
    {

        margin-top: 150px;

    }



    .cover_subtitle
    {

        font-size: 29px;

        padding: 15px 15px 15px 15px;

        bottom: 150px;

    }

    .box_02
    {

        height: 400px;

    }

}



@media screen and (max-width:1199.98px)
{

    .cover_title
    {

        font-size: 45px;

        max-width: 55%;

    }



    .cover_mt
    {

        margin-top: 150px;

    }



    .cover_subtitle
    {

        font-size: 27px;

        padding: 15px 15px 15px 15px;

        bottom: 150px;

    }



    .flex_box
    {

        -ms-flex: 0 0 90%;
        flex: 0 0 90%;
        max-width: 90%;

        word-break: break-word;

    }



    .box_02
    {

        height: 460px;

    }



}



@media screen and (max-width:991.98px)
{

    .cover_title
    {

        font-size: 43px;

        max-width: 55%;

    }



    .cover_mt
    {

        margin-top: 150px;

    }



    .cover_subtitle
    {

        font-size: 27px;

        padding: 15px 15px 15px 15px;

        bottom: 150px;

    }



    .box_02
    {

        height: 280px;

    }



    .icon_box 
    {

        top: -20px;
        left: -10px;

    }

}



@media screen and (max-width:767.98px)
{

    .cover_title
    {

        font-size: 42px;

        max-width: 65%;

    }



    .cover_mt
    {

        margin-top: 150px;

    }



    .cover_subtitle
    {

        font-size: 25px;

        padding: 15px 15px 15px 15px;

        bottom: 140px;

    }

    .box_02
    {

        height: 280px;

    }

}



@media screen and (max-width:575.98px)
{

    .cover_title
    {

        font-size: 42px;

        max-width: 85%;

    }



    .cover_mt
    {

        margin-top: 150px;

    }



    .cover_subtitle
    {

        font-size: 22px;

        padding: 15px 15px 15px 15px;

        bottom: 140px;

    }

    .box_02
    {

        height: 320px;

    }

}



.box_01
{

    font-family: var(--x-logo-font);
    font-size: 17px;
    font-weight: 400;

    color: var(--x-input-text-forecolor);

    letter-spacing: 1px;

    border: 1px solid #cccccc;

    background-color: #f5f5f5;

    text-align: center;
    margin-left: auto;
    margin-right: auto;

    width: 100%;
    height: 300px;

    box-shadow: inset 0 0 0 10px white, 0 4px 6px rgba(0, 0, 0, 0.2);

    padding: 10px 10px 10px 10px;

    position: relative;
    overflow: hidden;

}



.box_01::before 
{

    content: '';
    position: absolute;
    
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    
    background-color: rgba(0, 0, 0, 0.1);
    
    clip-path: polygon(66% 0, 100% 0, 100% 100%, 33% 100%);
    
    pointer-events: none;

    z-index:1;

}



.flexbox_jc_sb
{

    justify-content: space-between;

}



.flexbox_ac_c
{

    align-content: center;

}



.mtb_01
{

    margin-top: 30px;
    margin-bottom:30px;

}



.background_02
{

    position:relative;

    background-image: url(/Code/Image/Project/project_50.webp);
    background-repeat: no-repeat;
    background-position: center;

    width: 100%;
    max-width: 100%;

    height: 500px;
    max-height: 500px;

    z-index: -1;

}



/*  NAVIGATION / MAIN TOP
    -----------------------------------------------------------------------------------------------
*/



.navigation 
{

    font-family: var(--x-top-navigation-font);
    font-size: 13px;
    font-weight: 400;

    background: transparent;

    width: 100%;
    max-width: 100%;

    z-index: 99;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;

}



nav 
{

    text-align: right;
    margin-left: auto;

}



nav ul 
{

    margin: 0;
    padding: 0;

    margin-right: 25px;

    margin-top: 25px;

    list-style: none;

}



nav ul li
{

    float: left;
    position: relative;

    z-index: 11;

}



nav ul li a
/*nav ul li a:visited*/
{

    display: block;

    padding: 0 0 0 50px;

    background: transparent;
    color: var(--x-top-navigation-link-forecolor) !important;

    text-decoration: none;
    text-align: right;

}



nav ul li span
/*nav ul li a:visited*/
{

    display: block;

    padding: 20px 10px 0 10px;

    background: transparent;
    color: var(--x-top-navigation-link-forecolor);

    text-decoration: none;
    text-align: right;

}



nav ul li a:hover
/*nav ul li a:visited:hover*/
{

    background: transparent;
    color: var(--x-top-navigation-link-hover-forecolor);

}



nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after
{

    padding-left: 4px;
    content: ' ▾';

}



nav ul li ul li 
{

    min-width: 350px;

}



nav ul li ul li a 
{

    text-align: left;

    padding: 15px;

    line-height: 20px;
    color: var(--x-top-navigation-link-forecolor);

}



nav ul li ul li a:hover
{

    background: transparent;
    background-color: var(--x-top-navigation-link-hover-backcolor);

}



.nav-dropdown 
{

    margin-left: -100px;

    position: absolute;

    top: 40px;

    display: none;

    z-index: 21;

    background: var(--x-top-navigation-link-backcolor);

    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

}



/* Mobile navigation */
.nav-mobile 
{

    display: none;

    position: absolute;

    top: 10px;

    right: 50px;

    /*
    height: 70px;
    width: 70px;
    */

}



@media screen and (max-width: 1500px) 
{

    .nav-mobile
    {

        display: block;

    }



    nav
    {

        width: 98%;

    }



    nav ul
    {

        display: none;

        position: absolute;

        z-index: 21;

        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

        width: 96%;

        background-color: var(--x-top-navigation-link-backcolor);

        top: 70px;

    }



    nav ul ul
    {

        display: none;

        position: absolute;

        z-index: 22;

        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);

        width: 99%;

        background-color: var(--x-top-navigation-link-backcolor);

        margin-top: 0;
        margin-bottom: 5px;

    }



    nav ul li
    {

        float: none;

    }



    nav ul li a
    /*nav ul li a:visited*/
    {
        
        padding: 15px;

        background: var(--x-top-navigation-link-backcolor);
        color: #ffffff !important;

        text-align: left;

    }



    nav ul li a:hover
    /*nav ul li a:visited:hover*/
    {

        background: var(--x-top-navigation-link-hover-backcolor);
        color: var(--x-top-navigation-link-hover-forecolor);

    }



    nav ul li ul li a
    {

        padding-left: 30px;

    }



    .nav-dropdown 
    {

        margin : 0;

        position: static;

    }



    nav ul li span
    {

        display: block;

        padding: 20px 10px 0 10px;

        background: var(--x-top-navigation-link-backcolor);
        color: #ffffff;

        line-height: 0;

        text-decoration: none;
        text-align: right;

    }

}



@media screen and (min-width: 1500px) 
{

    .nav-list 
    {

        display: block !important;

    }

}



#nav-toggle 
{

    position: absolute;

    top: 3px;
    
    cursor: pointer;
    padding: 20px 30px 15px 5px;

}



#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after 
{
    cursor: pointer;
    border-radius: 1px;
    height: 3px;
    width: 25px;
    background: var(--x-top-navigation-link-forecolor);

    position: absolute;
    display: block;
    content: '';
    transition: all 200ms ease-in-out;
}



#nav-toggle span:before 
{

    top: -10px;

}



#nav-toggle span:after
{

    bottom: -9px;
    width: 15px;
    right: 0;

}



#nav-toggle.active span 
{

    background-color: transparent;
}



#nav-toggle.active span:before, #nav-toggle.active span:after
{

    top: 0;

}



#nav-toggle.active span:before
{

    transform: rotate(45deg);

}



#nav-toggle.active span:after
{

    transform: rotate(-45deg);

}



.no_click
{

   pointer-events: none;
   cursor: default;

}



/*  ANIMATION FADE IN / OUT
    -----------------------------------------------------------------------------------------------
*/



@keyframes fadein {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}



@keyframes fadeout {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}



.fade-in-out {
    animation: fadein 1.5s ease-in-out infinite alternate;
}