*{
    margin: 0;
    padding: 0%;
    box-sizing: border-box;
}
body{
    overflow-x: hidden;
}
#header{
    background-image: url("img/about/banner.png");
    background-position: center;
    background-size: cover;
    padding-top: 40px;
    height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    color: white;
}
#header h1{
    font-weight: bold;
    font-size: 3rem;
}
#header p{
    font-weight: 500;
    font-size: 1.1rem;
}

/* %%%%%%%%%%%%%%%%%%%%%%%%% showcase %%%%%%%%%%%%%%%%%%%%%% */
#showcase .row{
    /* background-color: aqua; */
    margin: 50px 0;
}
#showcase .col-6{
    /* background-color: bisque; */
    width: 557px;
    height: 400px;
    margin: auto;
}
#showcase .col-6 img{
    width: 100%;
    height: 100%;
}
#showcase .text h1{
    font-weight: bold;
}
#showcase .text{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#showcase .text .fr{
    color: rgb(107, 106, 106);
}
#showcase .text .sec{
    text-decoration: underline;
    text-decoration-style: dotted;
    -moz-text-decoration-style: dotted;
}
#showcase .text .p-text{
    width: 100%;
    padding-bottom:30px;
    height: 25px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    background-color: gray;
    display: flex;
    justify-content: center;
    
    
}
#showcase .text .p-text p{
    position: absolute;
    width: 150%;
    text-align: left;
    margin-bottom: 0px;
    transform: translate(100%) ;
    -webkit-transform: translate(100%) ;
    -moz-transform: translate(100%) ;
    -ms-transform: translate(100%) ;
    -o-transform: translate(100%) ;
    animation: moving 20s linear infinite;
    -webkit-animation: moving 20s linear infinite;
}
@keyframes moving{
    0%{
        transform: translate(100%);
        -webkit-transform: translate(100%);
        -moz-transform: translate(100%);
        -ms-transform: translate(100%);
        -o-transform: translate(100%);
    }
    100%{
        transform: translate(-100%);
        -webkit-transform: translate(-100%);
        -moz-transform: translate(-100%);
        -ms-transform: translate(-100%);
        -o-transform: translate(-100%);
}
}
#video .container .col-12{
    text-align: center;
}
#video .container .col-12 span{
    color: blue;
    text-decoration: underline;
}
#video .container .col-12 video{
    /* margin: 30px 0; */
    width: 70%;
}
#video{
    padding-top: 50px;
}
#video h1{
    margin-bottom: 40px;
    font-weight: bold;
}


/* &&&&&&&&&&&&&&&&&&&&&&&&&&&& fetuer $$$$$$$$$$$$$$$$$$$$$$$$ */

#fetuer img{
    width: 130px;
    height: 110px;
    display: inline-block;
}
#fetuer .col-2{
    width: 175px;
    background-color: rgba(255, 255, 255, 0.267) ;
    border: 1px solid rgb(237, 235, 235);
    box-shadow: 0px 0px 30px rgb(236, 233, 233);
    margin: 50px 0px 0px 15px;
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  
}
#fetuer .col-2:hover{
    box-shadow: 0 5px 15px rgb(220, 216, 216);
}
#fetuer .col-2 button{
    color:  rgb(0, 168, 78);
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-top: 20px;
    padding: 3px 2px;
    border: none;
    display: inline-block;
}
.col-2 .b-1{
    background: rgb(160, 160, 255);
}
.col-2 .b-2{
    background-color: rgb(169, 255, 255);
}
.col-2 .b-3{
    background-color: rgb(221, 255, 187);
}
.col-2 .b-4{
    background-color: rgb(255, 234, 182);
}
.col-2 .b-5{
    background-color: rgb(255, 224, 229);
}
.col-2 .b-6{
    background-color: rgb(223, 160, 255);
}

#fetuer .main-line{
    padding: 100px 0px 50px 0px;
    text-align: center;
}
#fetuer .main-line h1{
    font-weight: 700;
    letter-spacing: 1.5px;
}
#fetuer .main-line p{
    font-weight: 300;
    color: gray;
}