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

/*************** ADD CUSTOM CSS HERE.   ***************/
.wpcf7-response-output {
    color: white;
}
input[type=email]:focus, input[type=number]:focus, input[type=password]:focus, input[type=search]:focus, input[type=tel]:focus, input[type=text]:focus, select:focus, textarea:focus {
    background-color: transparent !important;
    /* border: none; */
    box-shadow: none !important;
} 
input.wpcf7-form-control.wpcf7-submit.has-spinner.gtt {
    margin: 0;
}
.sec5 img.attachment-original.size-original.wp-post-image {
    border-radius: 25px;
}
.is-divider {
    display: none;
}
.pxl-banner-inner {
    padding-left: 110px;
    padding-top: 50px;
}
.flip-box {
    overflow: hidden;
}
.\31 {
    display: flex
;
}
    .\32 {
        display: flex
;
    }
.absolute-footer.dark.medium-text-center.text-center {
    display: none;
}
button#send {
    background: linear-gradient(-45deg, #ad1102, #ffbf98, #ad1102, #ffbf98);
    background-size: 400% 400%;
    animation: gradient 2s 
		
ease infinite;
	    color: white;
	padding: 0;
}

::placeholder {
  color: white;
  opacity: 1; /* Firefox */
}
input[type] {
    color: white !important;
    background-color: #fff0;
    border-top-width: 0px !important;
    border-right-width: 0px !important;
    border-left-width: 0px !important;
    box-shadow: none;
}
footer#footer a.plain {
    color: white;
}
.flip-box {
    background-color: transparent;
    width: 100%;
    height: 600px;
    border: 1px solid #f1f1f1;
    perspective: 1000px;
}
br {
    display: none;
}
a.button.primary.expand {
    background: linear-gradient(90deg, #c1352c 0%, #f84430 50%, #c1352c);
}
.flip-box-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
.flip-box-front {
    background-color: #bbb;
    color: black;
}

.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flip-box-back {
    padding: 50px 20px 20px 20px;
}

.flip-box-back {
    background-color: #ad1102;
    color: white;
    transform: rotateX(180deg);
}
.flip-box-front, .flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.sec1 .text-inner.text-left {
    padding: 30px;
}
ul.pxl-link.pxl-link-l1.hover-defualt.icon-default.pxl-block.divider-off a {
    font-size: 18px;
}ul.pxl-link.pxl-link-l1.hover-defualt.icon-default.pxl-block.divider-off li {
    margin-bottom: 15px;
}
.sec3 .section-bg.fill {
    background-color: #F8F8F8;
    background-image: url(https://xaynhadep2.monamedia.net/wp-content/uploads/2024/11/servicebanner.png.webp);
    background-position: center left;
    background-repeat: no-repeat;
    background-size: auto;
}

.box-image-top {
    top: 0px;
    left: 0px;
    max-width: 306px;
    overflow: hidden;
    border-radius: 16px;
    position: absolute;
    z-index: 1;
}
li {
    list-style-type: none;
}
li br {
    display: none;
}
.pxl-button br {
    display: none;
}
li.tab.active.has-icon a {
    color: white;
}
.gallery-col.col {
    display: flex
;
    align-items: center;
}
li.tab.has-icon {
    padding: 12px 15px;
}
.flip-box:hover .flip-box-inner {
    transform: rotateX(180deg);
}
.box.box-normal.box-text-bottom.box-blog-post.has-hover {
    overflow: hidden;
	    z-index: 99999;
}.box.box-normal.box-text-bottom.box-blog-post.has-hover:hover h5 {
    opacity: 1;
}
li.tab.active.has-icon {
    background: #e63a27;
    color: white;
    padding: 1px 20px;
    border-radius: 10px;
}
.box.box-normal.box-text-bottom.box-blog-post.has-hover:hover .box-text.text-center:after {
    opacity: 1;
    top: 50px;
    overflow: hidden;
    position: absolute;
}
.sec5 .box-text.text-center {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 1;
    width: 100%;
    padding: 40px 25px 30px;
    transition: 200ms 
linear;
}
.box-text-inner.blog-post-inner {
    text-align: left;
}
.sec5 h5 {
    color: #fff;
    bottom: 20px;
    display: block;
    position: absolute;
    font-size: 28px;
	    opacity: 0;
}
.box-text.text-center:after {
    position: absolute;
    z-index: -54;
    top: 140px;
    left: -150px;
    width: 1200px;
    height: 1200px;
    content: "";
    opacity: 0;
    display: block;
    transform: rotate(12deg);
    background-color: red;
    transition: 200ms 
linear;
    background-image: linear-gradient(90deg, #c1352c 0%, #f84430 50%, #c1352c);
}
.box-text.text-center:hover h4 {
    opacity: 1;
}
.sec5 .box-text.text-center {
    padding: 50px 40px 45px;
}
ul.pxl-link.pxl-link-l1.hover-defualt.icon-default.pxl-block.divider-off span {
    color: #0C2271;
    font-size: 18px;
    font-weight: 700;
}
.sec2 .pxl-heading--inner h3.pxl-item--title {
    font-size: 47px;
    font-weight: revert-layer;
}
.elementor-widget-container {
    display: inline-block;
    padding-right: 10px;
}
ul.pxl-link.pxl-link-l1.hover-defualt.icon-default.pxl-block.divider-off {
    margin-bottom: 40px;
}
label.pxl-title-box br {
    display: none;
}
a.btn.btn-gradient.pxl-icon--right.active {
    background-image: linear-gradient(90deg, #c1352c 0%, #f84430 50%, #c1352c);
    background-size: 180%, 1px;
    background-position: 0% center;
    /* line-height: 60px; */
    /* flex-direction: row-reverse; */
    /* padding: 0px 50px 0px 50px; */
}
.pxl-item--icon.style-2.effect-tada {
    background-color: #E63A27;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    width: 55px;
	    display: flex
;
    align-items: center;
    justify-content: center;
    height: 55px;
}
i.fas.fa-phone-alt {
    color: white;
}
.pxl-getintouch-inner {
    display: flex
;
    flex-wrap: wrap;
    align-items: center;
}
.pxl-cotnet-info a {
    color: #0c2271;
    font-size: 23px;
    font-weight: 600;
    line-height: 24px;
}
.sec2 img.attachment-original.size-original {
    border-radius: 15px;
}
.pxl-item--icon.style-2.effect-tada {
    background-color: var(--primary-color);
    /* width: 40px; */
    /* min-width: 40px; */
    /* height: 40px; */
    font-size: 20px;
    color: rgb(255, 255, 255);
    margin-right: 20px;
    box-shadow: 0 0 0px 5px rgba(var(--primary-color-rgb), 0.29);
    border-radius: 50%;
}
.btn {
    line-height: 60px;
    padding: 0px 50px 0px 50px;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    color: rgb(255, 255, 255);
    /* line-height: 51px; */
    /* position: relative; */
    cursor: pointer;
    background-color: var(--primary-color);
    height: auto;
    /* padding: 0px 30px; */
    border-radius: 10px;
    transition: 0.25s 
cubic-bezier(0.645, 0.045, 0.355, 1);
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    overflow: hidden;
}
.pxl-item--inner {
    padding-bottom: 30px;
    font-size: 18px;
    color: #8f8686;
}
ul.pxl-link.pxl-link-l1.hover-defualt.icon-default.pxl-block.divider-off span {
    color: #0C2271;
    font-size: 18px;
    font-weight: 700;
    /* margin-top: 30px; */
}
.pxl-item--subtitle {
    margin-bottom: 15px;
    align-items: center;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    display: inline-block;
    background-color: var(--primary-color);
    font-weight: 600;
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    border-radius: 25px;
}
i.fas.fa-check-circle:before {
    color: #ad1102;
    margin-top: 5px;
    font-size: 18px;
}
.box-image-main {
    position: relative;
    padding-bottom: 45px;
    padding-right: 65px;
    overflow: hidden;
}
.box-image-main .inner-box {
    overflow: hidden;
    border-radius: 31px;
    /* position: absolute; */
}
.pxl-item--meta {
    position: absolute;
    bottom: 26px;
    left: 0px;
    z-index: 2;
    writing-mode: vertical-rl;
    transform-origin: left center;
}
.pxl-inner-meta {
    display: flex
;
    align-items: center;
    transform: rotate(180deg);
}
.pxl--item-counter {
    line-height: 1;
    font-weight: 600;
    font-size: 60px;
    margin-bottom: 15px;
}
.pxl-item--title {
    font-weight: bold;
    font-size: 28px;
    color: rgb(19, 16, 34);
    text-transform: uppercase;
    max-height: 180px;
    line-height: 1.2;
}



@media screen and (max-width: 549px) {
h2.heading-style-h2.is-featured-project {
    font-size: 27px;
}
.sec1 .text-inner.text-left {
    padding: 25px 20px 00px 20px;
}
	.sec2 .pxl-heading--inner h3.pxl-item--title {
    font-size: 33px;
}
	.pxl-item--meta {
    display: none;
}
	.pxl-heading--inner {
    padding-top: 20px;
}
	.sec2 .col:nth-child(2) {
    padding-bottom: 0;
}
	.sec2 img.no-lazyload {
    width: 100%;
}
	.sec2 .box-image-top {
    top: 0px;
    left: 0px;
    max-width: 100%;
    width: 100%;
		position: relative;
	}
	.sec2 .box-image-main {
    display: none;
}
	.sec2 .pxl-banner-inner {
		padding: 0;
}
	.sec3 .flip-box {
    height: 330px !important;
}
	.sec5 h4 {
    left: 8px;
		opacity:1;
}
	.box-text.text-center:after{
		opacity:1;
		    top: 70px;
	}
	button#send {
    font-size: 13px;
    padding: 0;
}
	.colft2 {
    padding-bottom: 0;
}
}
.elementor-widget-container {
    display: inline-block;
    padding-right: 10px;
}
label, legend {
    display: block;
    font-size: 20px !important;
    font-weight: 700;
    margin-bottom: .4em;
}







/* LIEN LAC */
.gt3_tools_bar {
    position: fixed;
    right: -400px;
    top: 0;
    background-color: #ffffff;
    width: 400px;
    height: 100%;
    z-index: 10001;
    -webkit-transition: right .3s ease;
    -moz-transition: right .3s ease;
    transition: right .3s ease;
}

.gt3_tools_bar .gt3_tools_bar__icon_container {
    /* width: 50px; */
    position: absolute;
    top: calc(65% - 88px);
    left: -45px;
    display: inline-block;
    box-shadow: -8px 8px 30px rgba(0, 0, 0, 0.07);
}
.gt3_tools_bar__icon.gt3_tools_bar__icon_side_bar div.gt3_tools_bar__icon_src {
    background-position: 28px -36px;
}
.gt3_tools_bar__icon:hover {
    left: -130px;
}
.gt3_tools_bar__icon.gt3_tools_bar__icon_side_bar {
    background:  #3b5998;
	
}
.gt3_tools_bar__icon {
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: relative;
    background-color: #3b5998;
    color: #ffffff;
    cursor: pointer;
    left: 0;
    white-space: nowrap;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.gt3_tools_bar__icon.gt3_tools_bar__icon_side_bar div.gt3_tools_bar__icon_src {
    background-position: 28px -36px;
}
.gt3_tools_bar__icon div.gt3_tools_bar__icon_src {
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 48px;
    vertical-align: middle;
    border-radius: 0 !important;
    transition: opacity .2s ease;
	 color: #ffffff;
}
.gt3_tools_bar__icon_tooltip {
    font-size: 13px;
    width: 130px;
    height: 45px;
    font-weight: 700;
    line-height: 45px;
    text-align: center;
    transition: all .2s ease;
    padding: 0;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.24);
    border-radius: 0;
    display: block;
    float: right;
    color: #ffffff;
}
.gt3_tools_bar__icon.gt3_tools_bar__icon_sale {
    background: #f73859;
}
.gt3_tools_bar__icon {
    height: 45px;
    line-height: 45px;
    text-align: center;
    position: relative;
    background-color: #2f323a;
    color: #ffffff;
    cursor: pointer;
    left: 0;
    white-space: nowrap;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.gt3_tools_bar__icon a {
    color: #ffffff;
}
.gt3_tools_bar__icon.gt3_tools_bar__icon_sale div.gt3_tools_bar__icon_src {
    background-position: -37px -4px;
}
.gt3_tools_bar__icon.gt3_tools_bar__icon_support {
    background-color: #4fa8f5d4;
}
.gt3_tools_bar__icon.gt3_tools_bar__icon_docs {
    background: #48ab5fd1;
}
p.ww {
    margin-bottom: 0;
}
.primary.is-link, .primary.is-outline, .primary.is-underline {
    color: #ad1102;
}
/* END */