/*
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.   ***************/
:root {
    --primary-color: rgb(12, 142, 78);
    --secondary-color: #346b31;
    --base-color: #062e39;
    --heading-color: #062e39;
    --white-color: #ffffff;
    --black-color: #000000;
    --font-icon: 'Font Awesome 7 Free';
}
.absolute-footer {display: none !important;}

#header.has-transparent .header-inner {background-color: var(--white-color); background-clip:content-box;}
#header.has-transparent .header-inner .logo {padding-left: 15px;}
#header .header-inner .header-nav-main {gap: 40px;}
#header .header-inner .header-nav-main li a {font-size: 16px; font-weight: 600;}
#header .header-inner .header-button-1 {padding-right: 15px;}
#header .header-inner .header-button-1 a {padding: 15px 20px; padding-right: 35px; background: var(--primary-color); color: var(--white-color); border-radius: 4px !important; transition: linear 0.4s; line-height: 1.5; text-transform: inherit; font-weight: 500;}
#header .header-inner .header-button-1 a:hover {background: var(--secondary-color);}
#header .header-inner .header-button-1 span {line-height: 0; text-transform: inherit; position: relative;}
#header .header-inner .header-button-1 span::after{content: '\f178'; font-family: var(--font-icon); position: absolute; right: -20px; top: 50%; transform: rotate(-45deg);  font-weight: bold;}

.header-contact {gap: 20px}
.header-contact a{color: var(--white-color) !important; text-transform: inherit !important; font-weight: 500; font-size: 15px !important;}
.header-contact a::after {content: unset !important;}
.header-contact a i.icon-envelop::before {content: '\f0e0'; font-family: var(--font-icon); font-weight: bold;}
.header-contact a i.icon-phone::before {content: '\f095'; font-family: var(--font-icon); font-weight: bold;}
.header-social-icons a i {font-size: 16px;}

.services-hero {position:relative;z-index:5;margin:-200px auto 0;}

.section-about {padding-top: 100px !important;}

.title-website h2 {font-size: 31px; font-weight: 700;}
.title-website p {margin-bottom: 0px; color: #747474;}

.title-website.about h2 {font-size: 25px;}

.title-website-icon {align-items: center;}
.title-website-icon h2 {font-size: 31px; margin-bottom: 0; line-height: 41px}
.text-under-twi p {margin-bottom: 0px; font-size: 20px; margin-top: 20px;}

.list-about {margin-top: 30px;}
.list-about ul{list-style: none; padding-left: 0;}
.list-about ul li {position: relative; padding-left: 20px; color: var(--base-color); font-size: 16px; margin-bottom: 15px; padding-left: 30px; margin-left: 0;}
.list-about ul li::before {content: '\f058'; font-family: var(--font-icon); font-weight: bold; position: absolute; left: 0; bottom: 0px; color: var(--primary-color); font-size: 18px;}
.list-about.form-qoute ul li {color: var(--white-color) !important;}
.list-about.form-qoute {margin-top: 0;}

.row-number {margin-bottom: -235px; border-radius: 4px; filter: drop-shadow(0px 7px 23px rgba(0, 0, 0, 0.09));}
.row-number .text-number p span {color: var(--primary-color); font-size: 65px; font-weight: 700; line-height: 1;}
.row-number .text-number p.mb-0 {font-size: 18px; line-height: 1.5; color: var(--base-color); font-weight: 500;}

.image-box-service {filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1)); overflow: hidden;}
.image-box-service .box-text {position: absolute; top: 0; left: 0; z-index: 0;}
.image-box-service .box-text::before {content: ''; position: absolute; background: url(../flatsome-child/assets/images/transport-shape-1.png); left: -30px; top: 0; width: 100%; height: 100%; background-repeat: no-repeat; z-index: 0; pointer-events: none;}
.image-box-service .box-text > * {position: relative; z-index: 1;}
.image-box-service .icon-box-img {bottom: -60px; left: -20px; }
.image-box-service .icon-box-img .icon-inner{background: var(--primary-color);}
.image-box-service .icon-box-img svg {fill: #fff;}
.image-box-service .icon-box-img svg path{fill: #fff;}

.form-qoute-7 {padding: 53px; background: var(--primary-color); border-radius: 4px;}
.form-qoute-7 button {margin-bottom: 0; margin-left: 15px; background: var(--white-color) !important; color: var(--base-color); text-transform: inherit; font-weight: 500; padding: 10px 20px; border-radius: 4px;}
.form-qoute-7 input {margin-bottom: 0; height: 48px; border-radius: 4px; box-shadow: none; border: 0;}
.form-qoute-7 textarea {margin-bottom: 0; height: 48px; border-radius: 4px; box-shadow: none; border: 0;}
.form-qoute-7 label {font-weight: 500; color: var(--white-color);}

.slide-fb .row {margin:0 !important;}
.col-fb .col-inner {border: 1px solid var(--primary-color);}
.col-fb .des p {color: #747474; font-size: 16px; line-height: 26px; margin-bottom: 25px;}
.col-fb .icon-box {align-items: center;}
.col-fb .icon-box h3 {font-size: 20px; line-height: 30px; margin-bottom: 0px;}
.col-fb .icon-box p {margin-bottom: 0;}

.post-item .box-blog-post {border-radius: 4px; overflow: hidden;}
.post-item .box-text {padding: 20px 30px; background: #fbfbfb}
.post-item .box-text .post-title a {font-size: 18px; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}
.post-item .box-text .is-divider {display: none;}
.post-item .box-text .post-meta {margin: 10px 0; font-size: 14px; position: relative; padding-left: 20px; color: #616161;}
.post-item .box-text .post-meta::before {content: '\f133'; font-family: var(--font-icon); position: absolute; left: 0px; top: 0%; color: var(--primary-color); font-size: 16px; transform: translateY(-10%);}
.post-item .box-text a.is-link {text-transform: inherit; color: var(--primary-color); font-size: 18px; font-weight: 500; position: relative; margin-right: 0; padding-right: 30px;}
.post-item .box-text a.is-link::after {content: '\f178'; font-family: var(--font-icon); position: absolute; right: 0px; font-weight: bold; color: var(--primary-color); font-size: 16px;}

.slide-logo img {object-fit: contain;}
.slide-logo .img { border-radius: 4px; background: #fff; margin: 0 15px !important;}
.slide-logo .img:not(.is-selected) {opacity: unset !important;}

.des-logo p {color: #b4b4b4;}
.title-footer h3{color: var(--white-color); font-size: 22px; line-height: 32px;}
.menu-footer a span{color: #b4b4b4; transition: linear 0.4s;}
.menu-footer a span:hover {color: var(--white-color);}
.menu-footer a i {color: var(--white-color);}

.blog-wrapper.blog-archive.page-wrapper {padding-top: 0px;}
.blog-wrapper.blog-single.page-wrapper {padding-top: 0px;}
.blog-wrapper.blog-single.page-wrapper .entry-header-text-top {display: none;}

.header-page-section {padding: 50px 0; background: url(../flatsome-child/assets/images/bgr-posts.png); background-size: cover; background-repeat: no-repeat; margin-bottom: 40px; position: relative;}
.header-page-section::before {position: absolute; content: ''; width: 100%; height: 100%; top: 0; left: 0; background: rgba(12, 142, 78,0.1);}
h1.page-title-section { font-size: 25px; line-height: 30px; color: var(--white-color);}
#breadcrumbs {margin-bottom: 0; margin-top: 25px;}
#breadcrumbs > span {color: var(--white-color); display: inline-flex; gap: 10px; justify-content: center; flex-wrap: wrap;}
#breadcrumbs > span a {color: var(--white-color);}

.post-sidebar aside {padding: 30px; background: #F7F9FB; border-radius: 4px;}
.post-sidebar aside .widget-title {font-size: 24px; line-height: 34px; text-transform: inherit;}
.post-sidebar aside .is-divider {height: 2px; background: var(--primary-color); width: 70px; max-width: unset;}
.post-sidebar aside.flatsome_recent_posts .post-date {width: 60px; height: 60px; border-radius: 99%; overflow: hidden;}
.post-sidebar aside.flatsome_recent_posts a {display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;}

.blog-wrapper.blog-single.page-wrapper .bai-viet-lien-quan h3 {font-size: 30px; margin: 20px; text-align: center;}


/*************** tablet   ***************/
@media (min-width: 768px) {
    .title-website h2 {font-size: 38px;}
    .title-website-icon h2 {font-size: 38px; line-height: 48px}
    .title-website.about h2 {font-size: 30px;}
    .header-page-section {padding: 80px 0;}
}



/*************** desktop   ***************/
@media (min-width: 992px) { 
    .row-no-padding-bottom > .col {padding-bottom: 0;}
    .title-website h2 {font-size: 45px;}
    .title-website-icon h2 {font-size: 45px; line-height: 55px;}
    .title-website.about h2 {font-size: 35px;}
    .header-page-section {padding: 120px 0;}
    h1.page-title-section { font-size: 40px; line-height: 45px;}
    .header-page-section .col-inner { padding: 0 70px;}
}

/* About page */
.about-hero .section-bg {background-position: center center !important;}
.about-hero .section-content {min-height: 540px; display: flex; align-items: center;}
.about-hero-row {min-height: 540px;}
.about-eyebrow p {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--white-color); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}
.about-eyebrow p::before {content: ''; width: 38px; height: 2px; background: var(--primary-color); display: inline-block;}
.about-hero-title h1 {font-size: 32px; line-height: 1.18; color: var(--white-color); margin-bottom: 18px; font-weight: 700;}
.about-hero-title p {font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.86); margin-bottom: 28px; max-width: 720px;}
.about-hero .button {margin-right: 10px; margin-bottom: 10px; border-radius: 4px !important; text-transform: inherit; font-weight: 600; line-height: 1.5;}
.about-hero-button {background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--white-color) !important;}
.about-hero-button:hover {background: var(--secondary-color) !important; border-color: var(--secondary-color) !important;}
.about-hero-phone {color: var(--white-color) !important; border-color: rgba(255,255,255,0.7) !important;}
.about-stats-section {position: relative; z-index: 6; margin-top: -55px;}
.about-stats-row {border-radius: 4px; overflow: hidden; filter: drop-shadow(0px 7px 23px rgba(0,0,0,0.09));}
.about-stat-card {padding: 22px 14px;}
.about-stat-number {font-size: 31px; line-height: 1; font-weight: 700; color: var(--primary-color); margin-bottom: 8px;}
.about-stat-label {font-size: 14px; line-height: 1.45; color: var(--base-color); margin-bottom: 0; font-weight: 600;}
.about-intro-section {padding-top: 75px !important; padding-bottom: 70px !important;}
.about-intro-image .img-inner {border-radius: 4px; overflow: hidden; filter: drop-shadow(0px 12px 30px rgba(0,0,0,0.1));}
.about-intro-copy p {font-size: 16px; line-height: 1.75; color: #747474; margin-bottom: 16px;}
.about-intro-list {margin-top: 24px;}
.about-values-section {padding-top: 70px !important; padding-bottom: 70px !important;}
.about-section-title p {color: #747474; max-width: 720px; margin-left: auto; margin-right: auto;}
.about-value-card {height: 100%; padding: 26px 24px; background: var(--white-color); border-radius: 4px; filter: drop-shadow(0px 0px 24px rgba(0,0,0,0.07)); position: relative; overflow: hidden;}
.about-value-card::before {content: '\f058'; font-family: var(--font-icon); font-weight: 900; width: 46px; height: 46px; border-radius: 4px; background: rgba(12,142,78,0.1); color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px;}
.about-value-card h3 {font-size: 20px; line-height: 1.35; color: var(--base-color); margin-bottom: 10px;}
.about-value-card p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 0;}
.about-capability-section {padding-top: 70px !important; padding-bottom: 46px !important;}
.about-service-card {border-radius: 4px; overflow: hidden; background: var(--white-color); filter: drop-shadow(0px 0px 24px rgba(0,0,0,0.08));}
.about-service-card .box-image img {height: 225px; object-fit: cover;}
.about-service-card .box-text {padding: 22px 24px 24px; background: var(--white-color);}
.about-service-card h3 {font-size: 20px; line-height: 1.35; color: var(--base-color); margin-bottom: 10px;}
.about-service-card p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 0;}
.about-process-section {padding-top: 70px !important; padding-bottom: 70px !important;}
.about-process-card {height: 100%; padding: 25px 22px; background: #F7F9FB; border-radius: 4px; border-left: 3px solid var(--primary-color);}
.about-process-number {display: block; color: var(--primary-color); font-size: 34px; line-height: 1; font-weight: 700; margin-bottom: 16px;}
.about-process-card h3 {font-size: 19px; line-height: 1.35; color: var(--base-color); margin-bottom: 10px;}
.about-process-card p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 0;}
.about-license-section {position: relative; z-index: 6; margin-top: -55px;}
.about-license-row {border-radius: 4px; overflow: hidden; filter: drop-shadow(0px 7px 23px rgba(0,0,0,0.09)); align-items: stretch;}
.about-license-row > .col {display: flex; padding-bottom: 0;}
.about-license-row > .col > .col-inner {display: flex; width: 100%;}
.about-license-card {width: 100%; min-height: 132px; padding: 24px 18px; background: var(--white-color); display: flex; flex-direction: column; align-items: center; justify-content: center;}
.about-license-card h3 {font-size: 18px; line-height: 1.35; color: var(--base-color); margin-bottom: 8px;}
.about-license-card p {font-size: 14px; line-height: 1.6; color: #747474; margin-bottom: 0;}
.about-license-card strong {color: var(--primary-color);}
.about-field-row {align-items: stretch;}
.about-field-row > .col {display: flex;}
.about-field-row > .col > .col-inner {display: flex; width: 100%;}
.about-field-card {width: 100%; height: 100%; padding: 26px 24px; background: var(--white-color); border-radius: 4px; filter: drop-shadow(0px 0px 24px rgba(0,0,0,0.07)); position: relative; overflow: hidden; display: flex; flex-direction: column;}
.about-field-card::before {content: '\f0d1'; font-family: var(--font-icon); font-weight: 900; width: 46px; height: 46px; border-radius: 4px; background: rgba(12,142,78,0.1); color: var(--primary-color); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 18px;}
.about-field-card h3 {font-size: 20px; line-height: 1.35; color: var(--base-color); margin-bottom: 10px; min-height: 54px;}
.about-field-card p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 0;}
.about-route-section {padding-top: 70px !important; padding-bottom: 70px !important;}
.about-route-title h2 {color: var(--white-color); font-size: 31px; line-height: 1.25; margin-bottom: 16px;}
.about-route-title p {color: rgba(255,255,255,0.82); font-size: 16px; line-height: 1.75; margin-bottom: 20px;}
.about-route-list ul li {color: var(--white-color);}
.about-client-section {padding-top: 70px !important; padding-bottom: 46px !important;}
.about-client-row {align-items: stretch;}
.about-client-row > .col {display: flex;}
.about-client-row > .col > .col-inner {display: flex; width: 100%;}
.about-client-card {width: 100%; height: 100%; min-height: 245px; padding: 24px 22px; background: var(--white-color); border-radius: 4px; border-top: 3px solid var(--primary-color); filter: drop-shadow(0px 0px 18px rgba(0,0,0,0.06)); display: flex; flex-direction: column;}
.about-client-card h3 {font-size: 18px; line-height: 1.35; color: var(--base-color); margin-bottom: 10px; min-height: 49px;}
.about-client-card p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 0;}
.about-closing-section {padding-top: 45px !important; padding-bottom: 45px !important;}
.about-closing-text h2 {font-size: 28px; line-height: 1.3; color: var(--white-color); margin-bottom: 0;}

@media (min-width: 768px) {
    .about-hero .section-content {min-height: 610px;}
    .about-hero-row {min-height: 610px;}
    .about-hero-title h1 {font-size: 44px; line-height: 1.15;}
    .about-stat-card {padding: 28px 18px;}
    .about-stat-number {font-size: 42px;}
    .about-intro-section {padding-top: 95px !important; padding-bottom: 90px !important;}
    .about-values-section {padding-top: 90px !important; padding-bottom: 90px !important;}
    .about-capability-section {padding-top: 90px !important; padding-bottom: 66px !important;}
    .about-process-section {padding-top: 90px !important; padding-bottom: 90px !important;}
    .about-license-card {padding: 30px 22px;}
    .about-route-section {padding-top: 90px !important; padding-bottom: 90px !important;}
    .about-route-title h2 {font-size: 38px;}
    .about-client-section {padding-top: 90px !important; padding-bottom: 66px !important;}
    .about-closing-text h2 {font-size: 34px;}
}

@media (min-width: 992px) {
    .about-hero .section-content {min-height: 680px;}
    .about-hero-row {min-height: 680px;}
    .about-hero-title h1 {font-size: 54px;}
    .about-stats-section {margin-top: -82px;}
    .about-license-section {margin-top: -82px;}
    .about-stat-card {padding: 35px 20px;}
    .about-stat-number {font-size: 52px;}
    .about-intro-section {padding-top: 125px !important; padding-bottom: 110px !important;}
    .about-service-card .box-image img {height: 255px;}
    .about-route-title h2 {font-size: 45px;}
    .about-closing-text h2 {font-size: 40px;}
}

/* Contact page */
.contact-hero .section-bg {background-position: center center !important;}
.contact-hero .section-content {min-height: 420px; display: flex; align-items: center;}
.contact-hero-row {min-height: 420px;}
.contact-eyebrow p {display: inline-flex; align-items: center; gap: 10px; margin-bottom: 15px; color: var(--white-color); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;}
.contact-eyebrow p::before {content: ''; width: 38px; height: 2px; background: var(--primary-color); display: inline-block;}
.contact-hero-title h1 {font-size: 32px; line-height: 1.18; color: var(--white-color); margin-bottom: 18px; font-weight: 700;}
.contact-hero-title p {font-size: 16px; line-height: 1.7; color: rgba(255,255,255,0.86); margin-bottom: 0; max-width: 720px;}
.contact-quick-section {position: relative; z-index: 6; margin-top: -55px;}
.contact-quick-row {border-radius: 4px; overflow: hidden; filter: drop-shadow(0px 7px 23px rgba(0,0,0,0.09)); align-items: stretch;}
.contact-quick-row > .col {display: flex; padding-bottom: 0;}
.contact-quick-row > .col > .col-inner {display: flex; width: 100%;}
.contact-quick-card {width: 100%; min-height: 138px; padding: 24px 18px; background: var(--white-color); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;}
.contact-quick-card h3 {font-size: 18px; line-height: 1.35; color: var(--base-color); margin-bottom: 8px;}
.contact-quick-card p {font-size: 14px; line-height: 1.6; color: #747474; margin-bottom: 0; word-break: break-word;}
.contact-quick-card a {color: var(--primary-color); font-weight: 700; word-break: break-word;}
.contact-main-section {padding-top: 75px !important; padding-bottom: 70px !important;}
.contact-info-panel {height: 100%; padding: 28px 24px; background: #F7F9FB; border-radius: 4px;}
.contact-info-panel h2 {font-size: 28px; line-height: 1.3; color: var(--base-color); margin-bottom: 14px;}
.contact-info-panel p {font-size: 15px; line-height: 1.75; color: #747474; margin-bottom: 16px;}
.contact-info-list {margin-top: 22px;}
.contact-info-item {padding: 18px 0; border-bottom: 1px solid rgba(6,46,57,0.1);}
.contact-info-item:first-child {padding-top: 0;}
.contact-info-item:last-child {border-bottom: 0; padding-bottom: 0;}
.contact-info-item h3 {font-size: 18px; line-height: 1.35; color: var(--base-color); margin-bottom: 6px;}
.contact-info-item p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 0;}
.contact-form-card {padding: 28px 24px; background: var(--white-color); border-radius: 4px; filter: drop-shadow(0px 0px 24px rgba(0,0,0,0.08));}
.contact-form-card h2 {font-size: 28px; line-height: 1.3; color: var(--base-color); margin-bottom: 8px;}
.contact-form-card > p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 22px;}
.contact-form-card .wpcf7 form {margin: 0;}
.contact-form-card .form-contact label {display: block; margin-bottom: 14px; color: var(--base-color); font-size: 15px; font-weight: 600;}
.contact-form-card .form-contact input:not([type="submit"]) {height: 50px; margin-top: 8px; margin-bottom: 0; border: 1px solid rgba(6,46,57,0.12); border-radius: 4px; box-shadow: none;}
.contact-form-card .form-contact textarea {height: 130px; min-height: 130px; margin-top: 8px; margin-bottom: 0; border: 1px solid rgba(6,46,57,0.12); border-radius: 4px; box-shadow: none;}
.contact-form-card .wpcf7-submit {width: 100%; margin: 4px 0 0; padding: 12px 20px; background: var(--primary-color) !important; border-radius: 4px !important; color: var(--white-color); text-transform: inherit; font-weight: 600;}
.contact-form-card .wpcf7-submit:hover {background: var(--secondary-color) !important;}
.contact-map-section {padding-top: 0 !important; padding-bottom: 70px !important;}
.contact-map-card {padding: 34px 24px; background: #F7F9FB; border-radius: 4px; text-align: center; filter: drop-shadow(0px 0px 24px rgba(0,0,0,0.06));}
.contact-map-card h2 {font-size: 28px; line-height: 1.3; color: var(--base-color); margin-bottom: 10px;}
.contact-map-card p {font-size: 15px; line-height: 1.7; color: #747474; margin-bottom: 18px;}
.contact-map-link {display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 22px; background: var(--primary-color); border-radius: 4px; color: var(--white-color) !important; font-weight: 600;}
.contact-map-link:hover {background: var(--secondary-color); color: var(--white-color) !important;}

@media (min-width: 768px) {
    .contact-hero .section-content {min-height: 500px;}
    .contact-hero-row {min-height: 500px;}
    .contact-hero-title h1 {font-size: 44px; line-height: 1.15;}
    .contact-quick-card {min-height: 150px; padding: 30px 22px;}
    .contact-main-section {padding-top: 95px !important; padding-bottom: 90px !important;}
    .contact-info-panel {padding: 34px 30px;}
    .contact-form-card {padding: 34px 30px;}
    .contact-map-section {padding-bottom: 90px !important;}
    .contact-map-card {padding: 42px 30px;}
}

@media (min-width: 992px) {
    .contact-hero .section-content {min-height: 560px;}
    .contact-hero-row {min-height: 560px;}
    .contact-hero-title h1 {font-size: 54px;}
    .contact-quick-section {margin-top: -82px;}
    .contact-main-section {padding-top: 125px !important; padding-bottom: 110px !important;}
    .contact-info-panel {padding: 42px 38px;}
    .contact-form-card {padding: 42px 38px;}
    .contact-info-panel h2 {font-size: 35px;}
    .contact-form-card h2 {font-size: 35px;}
    .contact-map-card h2 {font-size: 35px;}
}