/*
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.   ***************/
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Black Italic.otf') format('opentype');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy XBold.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy XBold Italic.otf') format('opentype');
  font-weight: 800;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Bold Italic.otf') format('opentype');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy SemiBold Italic.otf') format('opentype');
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Medium Italic.otf') format('opentype');
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Light Italic.otf') format('opentype');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Thin.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Thin Italic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Xlight.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Xlight Italic.otf') format('opentype');
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Heavy.otf') format('opentype');
  font-weight: 950;
  font-style: normal;
}
@font-face {
  font-family: 'Gilroy';
  src: url('assets/fonts/SVN-Gilroy Heavy Italic.otf') format('opentype');
  font-weight: 950;
  font-style: italic;
}

.fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease;
}

.fade-up.animated {
    opacity: 1;
    transform: translateY(0);
}


/* Header */
.header-main .header-nav a{
    font-family: Gilroy, sans-serif;
    font-weight: 400;
    font-size: 18px;
    /* line-height: 20px; */
    color: #45474A;
}
.header-main .header-nav .nav-dropdown>li>a:hover{
    color: #FA7436;
}
.header-main .header-nav .header-button-1 a{
    border-color: #FA7436;
    color: #FA7436;
}
.header-main .header-nav .header-button-1 a:hover{
    color: #fff;
    background-color: #FA7436;
}
/* End Header */

/* Home page */
.section-1 .ftech-item .section-title b{
    background-color: transparent;
}
.section-1 .ftech-item .box-text-inner{
    font-family: 'Montserrat', sans-serif;
    font-size: 32px;
    color: #313335;
}
.section-1 .ftech-item .box{
    width: 256px;
    height: 234px;
    border-radius: 20px;
    box-shadow: 14px 24px 72px 0px #6666661A;
    display: flex;
    flex-direction: column;     /* xếp item theo chiều dọc */
    justify-content: center;    /* căn giữa theo chiều dọc */
    align-items: center;
}
.section-3{

}
/* .hover-flex-row {
  display: flex;
  width: 100%;
  height: 300px;
}

.hover-col {
  flex: 1;
  transition: flex 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  overflow: hidden;
}

.hover-flex-row:hover .hover-col {
  flex: 1;
}

.hover-flex-row .hover-col:hover {
  flex: 2;
  background-color: #ddd;
  max-width: unset !important;
}
.hover-flex-row .hover-col > .col-inner .text{
    display: none;
}
.hover-flex-row .hover-col:hover > .col-inner{
    display: flex;
    flex-wrap: wrap;
}
.hover-flex-row .hover-col:hover > .col-inner .img{
    width: 150px !important;
}
.hover-flex-row .hover-col:hover > .col-inner h3{
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 100px; 
    width: 250px !important;
}
.hover-flex-row .hover-col:hover > .col-inner .text{
    width: 100%;
    display: block;
}
.section-3 .img img{
    width: 100px;
    height: 100px;
} */
/* End home page */

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


}

@media (max-width: 767px) {
    .hover-flex-row {
        flex-direction: column;
    }
    .hover-col {
        flex: none;
        width: 100%;
    }
}