/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
:root {
	--blue : #0E4094;
	--yellow : #febb12;
	--bg-gradient-primary : linear-gradient(94deg, #ffd79b .88%, #ffc062 119.53%);
	--text-primary : #ffd699;
	--jet-hover : #c8a241;
	--text-gold : #c8a241;
	--text-xam : #505050;
}
p{margin-bottom:0}
li {margin-bottom: .3em}
iframe {aspect-ratio: 853 / 480; width: 100%; pointer-events:none}
.text-primary {color: var(--text-primary)}
.text-gold {color: var(--text-gold)!important}
.bg-gradient-primary {    background-image: var(--bg-gradient-primary)}
.section-home{height: 100vh}
.section-home h2 {margin-bottom: 0}
.jprojects a:hover, a:hover, .text-gold-hover:hover {color: var(--jet-hover)}
.jwhite {color : #e8e8e8!important}
.text-xam {color: var(--text-xam); font-weight: 600}
.font-3rem {font-size: 3rem}
h1,h2,h3 {line-height: 1em}
.size5rem {font-size: 5rem!important}
.size6rem {font-size: 6rem!important}
.row-border-top-bottom {border-top: 1px solid #707070; border-bottom: 1px solid #707070}
.archive .is-divider, .single-post .is-divider {display: none}
#mega-menu-primary {background : #f6f3eeb3!important; border-radius: 99px!important; padding: 5px 10px!important;border: 1px solid #b3b2b2 !important;    box-shadow: 0 0 4px 0px #ffffff !important;}

#mega-menu-primary li a:before {content: ""!important; border-radius:9999px!important; background-color: var(--jet-hover)!important; width: .25rem!important; height: .25rem!important;left: 50%;    transform: translate(-50%, -50%);position: absolute !important;   bottom: -6px; transition: bottom .3s ease-in-out;visibility:hidden}

#mega-menu-primary li a:hover:before, #mega-menu-wrap-primary #mega-menu-primary li.mega-current-menu-item a.mega-menu-link::before {bottom: 0;  visibility: visible }

.section-kinhnghiem span {font-size: 80px; font-weight: 600}
.section-kinhnghiem sup {font-size: 25px; }
.section-kinhnghiem .col:before {position:absolute; content:""; width: 0%; height: 100%; background: #000; transition: width .5s ease-in-out}
.section-kinhnghiem .col:hover:before {width: 100%;}
.section-kinhnghiem .col:hover:after {display: none}
.section-kinhnghiem .col:hover .col-inner{
	background: linear-gradient(94deg, #ffd79b .88%, #ffc062 119.53%);	  -webkit-background-clip: text;    -webkit-text-fill-color: transparent;    background-clip: text; cursor: pointer;overflow: visible !important;}
.section-kinhnghiem .col-inner {padding: 20px; ;border-right: 1px solid #706861;border-bottom: 1px solid #706861; }

.row-our-system {background: #f6f3ee;}
.row-our-system .col { padding: 20px}
.row-our-system li, .challenge-approach li, .jet-custome-ul li, .ul-services li, ul li{list-style: square; }
.row-our-system li::marker, .ul-services li::marker, ul li::marker {color: var(--text-primary)}

.jprojects {display: flex;    align-items: center;    justify-content: space-between;}
.jprojects p {font-size: 40px; font-weight: 600; width: 20%;    letter-spacing: 3px;}
.jprojects a {font-size: 14px; color: #000; font-weight: normal}
.jprojects h3 {font-size: 40px;}

.project h4 {font-weight: 500; font-size: 18px; margin-top: 20px}
.project h5 {font-weight: 500; font-size: 24px; color: #000}
.project .from_the_blog_excerpt  {color: #666}
.project a:hover h5 {color:var(--text-gold)}

.row-animate-gallery-list {display: flex; align-items: center; flex-flow: nowrap; min-width: 300% }
.row-animate-gallery-list .col:nth-child(2n+1) img{height: 80vh}
.row-animate-gallery-list {animation: scroll-left 10s linear infinite; }

.row-about {padding-top: 40px}
.row-our-people .large-12 .col-inner{display: flex; align-items: center;}
.row-our-people .large-12 .hr-gold { margin-right: 10px;width: 40px;  height: 1px ;background: var(--text-gold);   }
.project-cat a.active-cat:before, .project-cat a:hover:before {
    content: "" !important;
    border-radius: 9999px !important;
    background-color: var(--jet-hover) !important;
    width: .25rem !important;
    height: .25rem !important;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute !important;
    bottom: 10%;
    transition: bottom .3s ease-in-out;
}

.project-cat ul {display: flex; margin: 0 auto;justify-content: center; border-bottom: 1px solid var(--text-xam);  }
.project-cat ul li {list-style: none; position: relative}
.project-cat a {padding: 0px 20px; color: var(--text-xam)}
.project-cat {height: 50px; line-height: 50px; margin-bottom: 20px}
.project-cat a.active-cat, .project-cat a:hover {color: var(--text-gold)}

.project .col-inner:hover .overlay {    background-color: rgba(0, 0, 0, .5);}
.project .symbol-project:last-child , .page-id-16 footer{display: none}

.load-cat-js {margin: 60px 0 20px 0}
.load-cat-js .box-text {padding: 20px;    position: absolute;    bottom: 0;}
.load-cat-js .box-text h5, .load-cat-js .box-text .tag-project {color: #fff}

.text-overview {display: flex; border-bottom: 1px solid #dedad399; padding: 30px 0}
.text-overview .overview-t {width: 20%; text-transform: uppercase; color: #1f1f1f99}
.text-overview span {width: 80%}

.challenge-approach li {margin-left: 15px; font-size: 16px}
.challenge-approach li::marker, .jet-custome-ul li::marker {color: var(--text-gold)}

.content_execution ul {display: grid;  grid-template-columns: 50% 50%;}

.stuck #mega-menu-primary {box-shadow: 0 0 0 transparent !important; border:0 !important}


.gallery_execution_detail {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 200px);
    gap: 10px;
	margin: 30px 0
}

.gallery_execution_detail img:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
}

.gallery_execution_detail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery_execution_detail img {
    border-radius: 5px;
    transition: transform 0.3s;
}

.gallery_execution_detail img:hover {
    transform: scale(1.05);
}

.row-capabilities .col:after {bottom:0}

.row-capabilities .col-inner {
	padding: 50px 30px
}
.row-capabilities .col-inner:hover {
	background-color: #e5e1db!important
}
.jet-custome-ul li {font-size: 20px; margin-top: 20px}
.ul-services li {font-size: 16px;}
.row-process h5, .row-services h5 {border: 1px solid var(--text-gold);    width: fit-content;    padding: 15px;    border-radius: 99px;    color: var(--text-gold);}
.row-process .large-3 .icon-box-text:before{content:""; border-top: 1px solid #ccc;    width: 93%;    position: absolute;    top: 15%;    left: 18%;}
.row-process .large-3:nth-child(5) .icon-box-text:before {width: 80%}

.row-services .icon-box-img img{ padding:13px; border-radius:99px; border: 1px solid var(--text-gold)}
.row-services .large-3 {max-width: 20%; flex-basis: 20%}
.row-services .large-3 .icon-box-text:before {content:""; border-top: 1px solid #ccc;    width: 92%;    position: absolute;    top: 15%;    left: 22%;}
.row-services .large-3:nth-child(6) .icon-box-text:before {width: 80%}

.box-text-hover {display:none;position: absolute;top: 50%;    left: 50%;    transform: translate(-50%, -50%);    position: absolute; width: 90%}
.box-text-hover h5 {color: #fff!important; font-size: 20px}
.box-text-hover p {text-decoration: underline; padding-bottom: 5px}
.load-cat-js .col-inner:hover .box-text{display: none;}
.load-cat-js .col-inner:hover .box-text-hover {display: block}
.row-clients .col-inner {background: #e2dfd9; border:0.1px solid #cccccc0a; font-weight: 600; text-align: center; transition : background 0.2s ease-in-out, color 0.2s ease-in-out; }
.row-clients .col-inner p {font-size: 20px; height: calc (100% / 6 ); line-height: 150px; font-family:"Cormorant Garamond", sans-serif}
.row-clients .col-inner:hover {background: #fff; color: var(--text-gold); cursor: pointer}

.featured {display: flex; border-top: 1px solid #d5d5d5; border-bottom: 1px solid #d5d5d5; padding: 30px 0}
.featured .count-f {width: 10%; color: #9b9a9a}
.featured .title-f {width: 20%; font-size: 20px; color: #000; font-family:"Cormorant Garamond", sans-serif}
.featured .detail-f {width: 70%; color: #9b9a9a}

.row-industry .col-inner:hover .icon-box .icon-box-img{display:none}
.row-industry .icon-box.icon-box-hover .icon-box-img{display: none}
.row-industry .col-inner:hover .icon-box.icon-box-hover .icon-box-img{display: block; cursor: pointer}
.row-industry .col + .col {border-left: 1px solid #9b9a9a;}

.testimonial-box{border-top: 1px solid #505050; background: #1f1f1f; font-family:"Cormorant Garamond", sans-serif}
.jet-quote  {font-size: 50px; padding-top: 30px}

.blog-single { padding-bottom: 0; padding-top: 0}
.blog-single p {font-size: 20px;}
.blog-single h2 {font-size: 1.6rem; color: #000}
.blog-single img {width: 100%}

.services-manwood-img .col-inner{margin-top: 30px}
.from_the_blog_excerpt {text-align: justify}
.btn-cta {font-weight: 500; color: #000; text-transform: uppercase!important;font-size: 12px;    padding: 5px 20px;
    letter-spacing: .3em;}

h5.post-title {font-size: 20px;}
.testimonial-meta {font-family: "Work Sans"}

h5.post-title a {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    padding: 0;
    height: 45px;
}

#footer a.ux-menu-link__link {color: #fff}
#footer .lets-talk {font-size: 120px; font-weight: 600}
#footer .lets-talk p {margin-bottom: 0}
#footer .lets-talk span img {width: 5%;    position: absolute;    left: 46%;    top: 5%;}

#footer .form-lh p, .form-lh p {color: #ccc; line-height: 50px}
#footer .form-lh input[type=text], #footer .form-lh input[type=email], #footer .form-lh input[type=tel],
.form-lh input[type=text], .form-lh input[type=email]{	height: 45px; border-radius: 10px; background: #000; box-shadow: none; border: 0; border-bottom: 1px solid #fff; border-radius: 0; color: #fff}
#footer .form-lh input:focus {box-shadow:none;}
::placeholder {color: #fff}
#footer .btn-submit {background: transparent; text-transform: capitalize; border-color: #e8e8e8; border-radius: 10px; font-size: 14px; padding: 5px 25px; color : #e8e8e8}
.copyright-footer {
	color: #fff;
}

.page-id-16 a:hover {color: var(--text-gold)}

.screen-reader-response, .wpcf7-response-output {display: none}

.slide-to-right, .slide-to-left {
	width: 100%;
  overflow: hidden;
}

.slide-to-right img{
	display: flex;
   min-width: 250%;
  animation: scroll-right 10s linear infinite;
}

.slide-to-left img{
	display: flex;
  min-width: 250%;
  animation: scroll-left 10s linear infinite;
}


@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.fade-item {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.fade-item.show {
    opacity: 1;
    transform: translateY(0);
}

/*Flicky Button*/
.flickity-prev-next-button {opacity: 1!important; top:unset }
.flickity-prev-next-button svg{border-color: var(--primary-color)!important; background: var(--primary-color); color: #fff }

/*CSS MANSORY*/
`