#about-section{}
.xfont{
    -webkit-text-stroke-width: 2px;
    -webkit-text-stroke-color: var(--primary-color);
    color: #fff;
    font-size: 3.7em;
    text-transform: uppercase;
    font-family: Avo_bold;
    line-height: 0.9em;
    font-weight: bold;
    position: relative;
    padding-right: 25px !important;
    }
.xfont:after{
 content:"";
 right: 0;
 position: absolute;
 width: 10px;
 background: var(--primary-color);
 height: 100%;
 top: -6px;
 }
#about-section .title{font-size: 3rem;}
#about-section .slogan{
    font-family: 'Pinyon Script';
    font-size: 25px;
    font-weight: bold;
    color: var(--primary-color);
    margin: 10px 0;
}
#about-section .desc{}
#service-section{
    background: var(--primary-color);
    color: #fff;
}
#service-section .desc{
    text-align: center;
    margin: 15px 0;
}
#service-section .title:after {background:#fff}
#service-section .title {
    color: var(--primary-color);
    -webkit-text-stroke-color: #ffffff;
    border-right-color: #fff;
}
.img-radius{
    border-radius: 43px;
    overflow: hidden;
    display: inline-block;
}
.grid-service{}
.grid-service a{
    display: block;
    position: relative;
    border-radius: 15px;
    overflow: hidden;
}
.grid-service a h4{}
.grid-service a img{}
.grid-service a h4{
    position: absolute;
    bottom: 0;
    width: 100%;
    font-size: 13px;
    text-align: center;
    font-weight: 700;
    background: rgb(255 255 255 / 50%);
    bottom: 0;
    margin: 0;
    padding: 5px 11px;
    color: #103786;
}
.grid-service a:hover h4{}

#transform-section{}
#transform-section .title {
    font-size: 3.3em;
}
#transform-section .sub-title{
    color: #103786;
    text-align: center;
}
#transform-section .sub-title .big{
    font-size: 4em;
    font-weight: bold;
    line-height: 1.1;
    margin-top: 15px;
}
#transform-section .sub-title .small{
    font-size: 1.7em;
    font-weight: 500;
}

.list-after-before{}
.list-after-before .item {
    background: var(--primary-color);
    color: #fff;
    padding: 20px 10px;
    /* float: left; */
}
.list-after-before .item.odd .wrap{}
.list-after-before .item.odd {
    background: #fff;
    color: #111;
 
}
.od .item {display: flex;
    justify-content: end;}
.list-after-before .wrap.bottom{/* float:right; */}
.list-after-before .wrap{
    width: 100%;
    max-width: 600px;
}
.list-after-before .odd .wrap{}
.list-after-before .item.odd .image-inner {
    background: url(../images/before-after-black.png) no-repeat;
    background-position: center;
    background-size: 423px;
}
.list-after-before .item .image-inner {
    height: 0;
    padding-bottom: 84%;
    position: relative;
    background: url(../images/before-after-white.png) no-repeat;
    background-position: center;
    background-size: 423px;
}
.list-after-before .item .image-inner .after:after {content:"";position: absolute;width: 100%;height: 100%;background: black;left: 0;z-index: 2;opacity: 0.6;top: 0;}
.list-after-before .item .image-inner .after {
    position: absolute;
    top: 0;
    left: 0;
}
.list-after-before .item .image-inner .before {
    position: absolute;
    right: 0;
    bottom: 2%;
}
.list-after-before .item .image-inner img{}
.list-after-before .item .name a{color:#fff}
.list-after-before .item.odd .name a{color:#111} 
.list-after-before .item .name{
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 20px;
}
.list-after-before .item .desc{}
.list-after-before .image-group{}

#video-section .title {}
#video-section{
    background: var(--primary-color);
    color: #fff;
}
#video-section .title:after {
    background:#fff;
}
#video-section .title {
    color: var(--primary-color);
    -webkit-text-stroke-color: #ffffff;
    border-right-color: #fff;
}
#video-section{}
#video-section .slick-video{}
#video-section .slick-video .small{}
.video-item{}
.video-item .thumbnail{display: block;position: relative;}
.video-item .thumbnail img{}
.video-item .thumbnail:after{content:"";z-index: 1;position: absolute;width: 100%;left: 0;height: 100%;top: 0;background: #111;opacity: 0.4;}
.video-item .thumbnail:before{content:"\f04b";font-family: "Font Awesome 5 Pro";font-weight: 900;position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);font-size: 3em;color: #fff;z-index: 3;}
.video-item .info{
}
.video-item.small .info h4{
    line-height: 1.2;
    margin: 0;
    font-size: 18px;
    margin-bottom: 10px;
}
.video-item.small .info h4 a{
}
.video-item .info h4{}
.video-item .info h4 a{color: #fff;
}
.video-item .info h4:hover a{text-decoration:none;color: var(--secondary-color);}
.video-item .info .desc{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* number of lines to show */
    line-height: 17px;        /* fallback */
    max-height: 66px;       /* fallback */
}
.news-item-index-big{
    max-width: 600px;
    float: right;
}
.news-item-index-big .info{}
.news-item-index-big .info h4{
    margin: 15px 0;
}
.news-item-index-big .info h4 a{
    color: #5c5c5c;
    font-weight: bold;
    transition: 0.4s ease;
}
.news-item-index-big .info h4:hover a{
    text-decoration: none;
    color: var(--primary-color);
}
.news-item-index-big .info .desc {}
.news-item-index-big .link{
    display: block;
    border-radius: 30px;
    overflow: hidden;
}
.news-item-index-big .view-more{
    font-weight: bold;
    font-size: 16px;
    color: var(--primary-color);
    text-transform: uppercase;
    border-bottom: 2px solid;
    text-decoration: none !IMPORTANT;
}
.news-item-index-big .button-control{font-size: 0;}
.news-item-index-big .button-control span:hover{
    background: #fff;
    color: var(--primary-color);
}
.news-item-index-big .button-control span{
    display: inline-block;
    background: var(--primary-color);
    font-size: 0;
    line-height: 0;
    padding: 9px 11px;
    color: #fff;
    margin: 0;
    cursor: pointer;
    transition: 0.5s ease;
    border: 2px solid var(--primary-color);
    border-left-width: 1px;
}
.news-item-index-big .button-control span i{
    font-size: 16px;
}
.news-item-index-big .button-control span.left{
    border-right: 0;
    border-left-width: 2px;
}
.news-item-index-big .link a{}
.news-item-index-big .link a img{}

.news-item-index-small{
    max-width: 300px;
    margin: auto;
    min-height: 270px !important;
}
.news-item-index-small .link{
    display: block;
    border-radius: 15px;
    overflow: hidden;
}

.news-item-index-small .link img{}
.news-item-index-small .info{
    text-align: center;
    margin-top: 15px;
}
.news-item-index-small .info h4{
    font-size: 15px;
}
.news-item-index-small .info h4 a{
    font-weight: bold;
    color: #333;
}
.news-item-index-small .info h4:hover a{}
.news-item-index-small .info .desc {
    text-align: center;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;
}
@media(min-width:768px){
    
    .grid-service{
    width: 100%;max-width: 550px;margin: auto;
}
}
@media(max-width:768px){
    #about-section .slogan{font-size: 22px}
    .video-item .thumbnail:before{
    font-size: 2em;
}
    .list-after-before .item .name{
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 5px;
}
    .xfont:after{display:none}
    .xfont{font-size: 2.1em !important;padding-right:0 !important;line-height: 1;-webkit-text-stroke-width: 1px;}
    #transform-section .title{font-size:1.8em !important}
    #transform-section .sub-title .big{
    font-size: 2em;
}
    #transform-section .sub-title .small{}
    .list-after-before .item .desc{ display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 13px;}
}