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

/*************** ADD CUSTOM CSS HERE.   ***************/
.z9{z-index: 999;}
.z1{z-index: 1;}
.rad{border-radius: 7px; overflow: hidden}
.rad10{border-radius: 10px !important;}
.rad15{border-radius: 15px !important;}
.rad20{border-radius: 20px !important;}
.rad25{border-radius: 25px !important;}
.rad30{border-radius: 30px !important;}
.wpcf7-spinner{display: none}
.form_footer input{border-radius: 5px}
.form_footer textarea{min-height: 80px !important; border-radius: 5px}
.form_footer .wpcf7-submit{background:linear-gradient(172deg, #00FA5A -45.79%, #16A64A 75.69%); margin: 0; min-width: 120px; border-radius: 100px}
#logo img{max-height: 80px; margin-top: -1em}
.block-hotline{background-color: var(--fs-color-success); padding-left: 30px; border-radius: 50px 0 0; padding: 8px 30px 0}
.header-main .nav > li > a{padding: 0 5px}
.header-main .nav > li{display: flex; align-items: center; justify-content: center;}
.header-main .nav-left > li:before{content:""; width: 0; transition: width 300ms; background-color: var(--fs-color-primary); position: absolute; z-index: -1; opacity: 0}
.header-main .nav-left > li:hover:before{height: 60px;  width: 110%;transform: skew(-15deg);  border-radius: 10px; opacity: 1 }
.header-main .nav > li.active >a{color: var(--fs-color-primary)}
.header-main .nav > li:hover > a{color: #fff}
.header-top .flex-right{width: 100%}
.header-top .header-search-form .searchform .ux-search-submit{background-color: var(--fs-color-success); border-radius: 100px !important; padding: 0 14px}
.header-top .header-search-form .searchform input{box-shadow: none; border: none; background: transparent; min-width: 230px}
.header-top .header-search-form .searchform{background-color: #F2F2F2; border-radius: 100px; min-height: 30px}
.top-bar-nav > li > a{font-size: 1em}
.footer-secondary{padding: 0}
.primary, input[type=submit], input[type=submit].button{background: linear-gradient(80deg, #16489A 18.3%, #0053DB 104.87%);}
.hg_animate {animation: esco infinite 4.2s ease-in-out;}
.esco_box .col {position: absolute !important;width:160px !important;height: 160px !important;background-color: #fff;box-shadow: 0 1px 11.8px rgba(0, 0, 0, 0.11);border-radius: 500px;padding: 7px; }
.esco_box .col .col-inner{padding: 10px; width: 100%; height: 100%;border: 1px solid transparent;border-radius: 100px;background:linear-gradient(white, white) padding-box, linear-gradient(-45deg, #16489A, #C1CEE4, #FFFFFF, #71A6FF, #21519F) border-box; display: flex; align-items: center; line-height: 1.2; justify-content: center}
.esco_box .esco_top{top: -10%; left: 30%}
.esco_box .esco_left{top: 30%; left: -10%}
.esco_box .esco_right{bottom: 10%; right: 5%;}
.esco_box .esco_bottom{bottom: -5%; left: 20%}
.esco_box .esco_right_top{top: 0; right: 0}
.esco_box .col p{font-size: .9em;}.esco_box .col h4{font-size: .95em; margin-bottom: 0}.esco_box .col .icon-box-img{margin-bottom: 0}
.bg_grad{border-radius:35px; background: linear-gradient(114deg, rgba(58, 132, 255, 0.00) 17.27%, rgba(15, 47, 99, 0.72) 66%);}
.slider-nav-dots-simple .flickity-page-dots .dot {background-color: var(--fs-color-primary); border-color: var(--fs-color-primary);}
.count_icon h3{margin-bottom: 0}
.ht-zalo-icon, .icon-zalo.ht-zalo-icon, .social-icons a.zalo .icon-zalo{    margin: 0 !important;}
 h3.section-title {margin-bottom: 0; border-bottom: none; background-color: #f7f7f7}
 h3.section-title span{background-color: var(--fs-color-primary); color: #fff; padding: 15px 50px 10px 20px; line-height: 1; margin-bottom: 0;}
.sp_title h3 span{border-radius: 0 100px 0 0;}
.sb_title_center h3 span{border-radius: 10px 100px;}
.sb_title_center h3{justify-content: center;}
.sb_title_center h3 b{display: none}
@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
    .esco_box {display: flex;max-width: 100%;justify-content: center; transform: translateY(-20%); align-items: center;margin: auto;}
    .esco_box .col{position: relative !important;top: unset !important;bottom: unset !important;left: unset !important;right: unset !important;max-width: 140px;max-height: 140px;margin: 10px;}
	.count_icon{display: flex;flex-wrap: wrap;flex-direction: row;}
	.count_icon > .icon-box{max-width: 45%;display: flex;flex-direction: column;}
    .count_icon > .icon-box > .icon-box-text{text-align: center}
}
@keyframes esco {
    50% {
        transform: scale(1.05)
    }
}