/*=========By Tags=========*/
body{
    margin : 0;
}
h1{
    margin : 0;
    padding : 0;
}
html{
    scroll-behavior : smooth;
    width : 100vw;
    overflow-x : hidden;
}

section{
    display : grid;
}

/*=========Top Navigator Bar=========*/

/*=========Banner Section=========*/
.servicesBanner{
    display : grid;
    background-color : grey;
    width : 100%;
    height : 100vh;
    top : 0px;
    text-align : center;
}
.bannerContainer{
    display : flex;
    flex-direction : row;
    position : relative;
    /* margin : 100px 0 0; */

    background-color: rgb(41, 148, 87);
}
.bannerEachContainer{
    width : calc(100vw/6);
    background-color: chocolate;

    /* margin-bottom: 12px; */

    overflow : hidden;
    row-gap : 0;
    column-gap: 0;

    /*box-shadow : 2px 3px 4px 3px rgba(1, 8, 20, 0.3);*/
}
.bannerAnchor{
    position : relative;
    margin : 0;
}
.bannerImages{
    position : relative;
    height : 100%;
    width : 100%;
    z-index : 2;

    object-fit : cover;
    object-position : 30% 0%;

    /* opacity : 88%; */
    filter : blur(3.5px);
}
.bannerImages:hover{
    z-index : 0;
    opacity : 100%;
    filter: blur(0.0px);
}
.bannerTextContainer{
    display : block;
    position : absolute;
    height : 200px;
    width : calc(100vw/6);
    background-color : rgba(0,0,0,.6);
    z-index : -1;

    margin-top : 500px;
    margin-left : 0;

    transform : translateX(-100%);
    transition : transform 0.65s ease;
}
.bannerTextContainer.active{
    z-index : 1;
    transform : translateX(0%);
}
.bannerTextContainer h2{

    line-height : 200px;
    font-family : Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size : 1.85rem;
    color : whitesmoke;
    text-align : center;
    
    margin : 0;
}
.bannerFilter{
    display : block;
    position : absolute;
    width : calc(100vw/6);
    height : 100%;
    background-color : rgba(0, 0, 0, 0.8);
    z-index : 3;

    opacity : 50%;
    visibility : visible;
}
.bannerFilter.sleep{
    visibility : hidden;
}
/*
.bannerEffect{
    position : absolute;
    width : calc(100%/6);
    height : 100%;

    content : '';

    left : 0%;
    right : 0%;

    background-color : rgba(166, 26, 89, 0.0);
    opacity : 100%;
    z-index : 2;

    overflow-x : hidden;
}
.bannerEffect:before{
    position : absolute;
    content : '';
    opacity : 10%;
    width : 50%;
    height : 100%;
    left : 0%;
    top : 0%;
    background-color :rgba(41, 148, 87, 0.0);
    
}
.bannerEffect:after{
    position : absolute;
    content : '';
    width : 100%;
    height : 100%;
    left : -100%;
    top : 0%;

    background : linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition : 0.5s;
}
.bannerEffect:hover:after{ 
    opacity : 100%;
    left : 100%;
}
*/

/* Outdate */
/* .companySlogan{
    position : absolute;
    margin-top : 400px;
    margin-left : 45%;
    z-index : 2;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-size : 50px;
} */
/*========old=======*/
/* .bannerFlexAnchor{
    margin : 0 0 0 0;
    padding : 0 0 0 0;
} */

/*=========Profile Section=========*/
.profile_AboutUsText{
    
    position : absolute;
    
    text-align: left;
    
    font-size : 1.0em;
    opacity: 0%;
    z-index : 5;
    
    left : 30%;
    right : 0;
    top : 30%;
    margin-left : auto;
    margin-right : auto;

    transform : translateX(0%);
    transition : transform 0.9s ease, opacity 1.2s ease-in 0.05s;
    /*box-shadow: 2px 2px 4px rgba(0, 0 ,0 ,0.4);*/

    scrollbar-gutter : stable;
}
.profile_AboutUsText.active{
    transform : translateX(20%);
    opacity: 100%;
}
.profile_AboutUsText.kill{
    transition : transform 1s ease, opacity 0.5s ease-out;
}
.profile_CompanyLogo{
    
    position : absolute;
    width : 15%;
    z-index : 6;

    left : 0;
    right : 0;
    top : 25%;
    margin-left : auto;
    margin-right : auto;

    filter : drop-shadow(4px 10px 4px rgba(0,0,0,0.2));

    transform : translateX(0%);
    transition : transform 0.8s ease;
}
.profile_CompanyLogo.active{
    transform : translateX(-100%);
}
.companyDetail{
    display: flex;
    flex-direction : row;
    position : relative;
    background-color : whitesmoke;
    background-image : linear-gradient(-90deg, rgba(0,0,0,0.1), rgba(255,255,255,1));
    width : 100%;
    height : 630px;
    z-index : 4;
    
    text-align : center;
    align-items: center;
    justify-content: center;
    text-shadow: 0.2px 0.2px 1px rgba(0,0,0,0.4);

    /* box-shadow : 0px 2px 4px rgba(1, 0, 0, 0.4); */
}

/*========= News and Article Section =========*/
.newsAndUpdate{
    display : flex;
    flex-direction : row;
    position : relative;
    background-color : rgb(215, 215, 215);
    /* background-image : linear-gradient(-90deg, rgba(0,0,0,0.1), rgba(255,255,255,1.0)); */
    width : 100%;
    height : 400px;
    text-align : center;

    /* box-shadow : 2px 2px 4px rgba(1, 0, 0, 0.4); */
}
.newsAndUpdate h1{
    display : block;
    position : absolute;

    padding-left : 2.0rem;
    padding-top : 1.0rem;
    z-index : 2;
}
#latestUpdateBackground{
    display : block;
    position : abosolute;
    width : 15vw;
    height : 5rem;
    background-color : rgba(240, 240, 240, 0.974);
    background-image : linear-gradient(-90deg, rgba(0,0,0,0.1), rgba(255,255,255,1.0));
    z-index : 1;

    left : 0;
    margin : 0;
    padding : 0;

    border-radius : 0px 0px 50px 5px;
    box-shadow : 2px 2px 4px rgba(1, 0, 0, 0.4);
}
.newsAndUpdateContainer{
    display : flex;
    flex-direction : row;
    position : absolute;
    /*width : 100%; */
    z-index : 2;
    
    gap : 6%;

    left : 0;
    right : 0;
    margin-left : auto;
    margin-right : auto;
    margin-top : 30px;
    padding-left : 20%;

    /* box-shadow : 2px 2px 4px rgba(44, 44, 154, 0.8); */
}
.newsFeed_01{
    background-color : black;
    width : 200px;
    height : 200px;
}
.newsFeed_02{
    background-color : white;
    width : 200px;
    height : 200px;
}
.newsAndUpdate_Date{
    display : flex;
    flex-direction : row;
    position : absolute;

    gap : 6%;

    left : 0;
    right : 0;
    margin-left : auto;
    margin-right : auto;
    margin-top : 0px;
    padding-left : 20%;
}
.newsDate{
    width : 200px;
    z-index : 2;

    font-size: 0.8rem;
    text-align : left;
}

.newsAndUpdateContainer_Info{
    display : flex;
    flex-direction : row;
    position : absolute;
    /*width : 100%;*/

    gap : 6%;

    left : 0;
    right : 0;
    margin-left : auto;
    margin-right : auto;
    margin-top : 230px;
    padding-left : 20%;


    /* box-shadow : 2px 2px 4px; */
}

.newsAndUpdateShell{
    display : block;
    position : relative;

    width : 200px;
    height : 120px;
    flex-basis : 200px;

    overflow : hidden;

    /* box-shadow : 2px 2px 4px rgba(55, 254, 5, 0.8); */
}
.newsFeed_Detail{
    display : -webkit-box;
    position : relative;
    z-index : 2;

    -webkit-line-clamp : 5;
    -webkit-box-orient : vertical;

    text-align: left;
    font-size : 1.0em;
    white-space : normal;
    overflow : hidden;
    text-overflow: ellipsis;

    /* box-shadow : 2px 2px 4px rgba(166, 26, 89, 0.8); */
}
.newsAndUpdateBackground_01{
    display : block;
    position : absolute;
    width : 700px;
    height : 320px;
    background-color : rgba(185, 185, 185, 0.25);
    z-index : 0;

    rotate : -30deg;
    left : calc(100vw/2); /* must be minus with self/5 */

    overflow : hidden;
}
.newsAndUpdateBackground_02{
    display : block;
    position : absolute;
    width : 700px;
    height : 320px;
    background-color : rgb(200, 200, 200);
    z-index : 1;

    rotate : 30deg;
    left : calc(100vw/3.5);
    margin-top : -100px;
}

/*=========Footer Section=========*/
.footerBar{
    /*background-color : rgb(215, 174, 40);*/
    background-color : rgba(255,255,255,1);
    background-image : linear-gradient(90deg, rgb(240, 218, 146, 0.4), rgba(142, 111, 12, 0.8));
    width : 100%;
    height : 200px;
    z-index : 2;

    left : 0px;
    margin-top : 0.3rem;

    box-shadow : 0px -6px 4px rgba(0,0,0,0.4);
}
.footerBar h1{
    display : block;
    position : absolute;
    line-height : 200px;
    width : 100vw;

    text-align : center;
}
.footerBar p{
    display : block;
    position : absolute;
    width : 100vw;

    text-align : center;

    padding-top : 150px;
}


/*=========Floating Element Section=========*/

/*=========!!***DELETE or MOVE LATER***!!=========*/

.testBox{
    position : relative;
    width : 500px;
    height : 120px;
    padding : 25px 30px;
    background : rgba(255,255,255,0.1);

    justify-content : center;
    align-items : center;
}
.testBox:before{
    content : '';
    position : absolute;
    top : 0;
    left : 0;
    width : 50%;
    height : 100%;
    background : rgba(166, 26, 89, 0.8);
}
.testBox:after{
    content : '';
    position : absolute;
    top : 0;
    left : -100%;
    width : 100%;
    height : 100%;
    background : linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition : 0.5s;
}
.testBox:hover:after{
    left : 100%;
}

/*==============!! Back to top !!================*/