/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0; 
  height: 100%; 
 
}  
body{     
  
  margin:0; 
  padding:0;  
 
  position: relative;
  overflow-x: hidden;

  overscroll-behavior: contain;
}

.modal-open{
  touch-action: none; 
  overscroll-behavior: contain;
}
 

.modal-backdrop{
  overscroll-behavior: contain;
}

.pc body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  image-rendering: -webkit-optimize-contrast;
}
 
a{
  color:inherit;
  text-decoration: none; 
  transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none;   }
 
.star{ color: #bc0000 }

.form-control,
.form-select{
  --input-h:48px;
 -webkit-appearance: none; 
  padding:0 15px; 
  font-family:inherit;  
 
  height:var(--input-h);
  line-height:calc(var(--input-h) - 2px);  
  background:#fff; 
  border-radius: 5px;   
  border-color: #E6E8EC;
 
    -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
         -o-transition: all 0.2s ease-in-out;
        -ms-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
}
  
.form-control:disabled, 
.form-control[readonly] {
background: #e2e2e2;
border-color: #c7c7c7;
} 
 
.form-select{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23838E9E' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: right 0.75rem center;
  background-size: 18px 15px;
  background-repeat: no-repeat;
}
.form-select:required:invalid {
  color:#838E9E; 
}
::-webkit-input-placeholder {  
  color:#838E9E; 
}
::-moz-placeholder { /* Firefox 19+ */
  color:#838E9E; 
}
:-ms-input-placeholder { /* IE 10+ */
  color:#838E9E; 
}
:-moz-placeholder { /* Firefox 18- */
  color:#838E9E;  
}
textarea.form-control{
  height: 150px;
  line-height: normal;
  padding-top: 10px; 
}
 
.form-group{
  display: block;
  position: relative;
  margin-bottom: 20px;
} 
.form-check {
  position: relative;
  padding-left:1.5em;
}
.form-check .form-check-input{
  width: 16px;
  height: 16px;
  margin-right: 10px; 
  border-width: 1px;
  position: absolute;
  top: 0;
  margin-left: -1.5em;
  border-radius: 0;
  border: 1px solid rgba(81, 68, 41, 0.6);
}
.form-check label{
  margin-bottom:0;
  font-weight: 400;
  font-size: inherit;
  padding-top: 3px; 
}
.form-check-input:checked[type=checkbox], 
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent;
  border: 1px solid rgba(81, 68, 41, 0.6);
  background-image: url(../img/icons/icon-checked.svg);
  background-size: 80%;
  background-position:2px 3px;
}
  
.btn{
  --btn-h:64px;
  position: relative; 
  padding:0 25px;    
  font-weight: 500;    
  height:var(--btn-h); 
  line-height:calc(var(--btn-h) - 2px);  
  border-radius:16px;   
  transition: all 0.25s ease-in-out;   
  font-size: var(--f-16);
  

  --bs-btn-color:#fff;
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-bg:var(--primary-color);
 
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#4D20FF;
  --bs-btn-hover-border-color:#4D20FF;

  --bs-btn-active-color:var(--bs-btn-hover-color);
  --bs-btn-active-bg:var(--bs-btn-hover-bg);
  --bs-btn-active-border-color:var(--bs-btn-hover-border-color);
}
 
.btn-secondary{
  --bs-btn-color:#fff;
  --bs-btn-border-color: var(--secondary-color);
  --bs-btn-bg:var(--secondary-color);
 
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#353535;
  --bs-btn-hover-border-color:#353535;
}
.btn-white{
  --bs-btn-color:var(--gray-100);
  --bs-btn-border-color:#fff;
  --bs-btn-bg: #fff;
 
  /* --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--gray-100);
  --bs-btn-hover-border-color:var(--gray-100); */
}
.btn-outline{
  --bs-btn-color:var(--gray-100);
  --bs-btn-border-color: var(--gray-20);
  --bs-btn-bg:transparent;
 
  --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:var(--gray-100);
  --bs-btn-hover-border-color:var(--gray-100);
}

.btn-md{
  --btn-h:56px;
}
.btn[disabled]{
  border-color: #D4EAEA;
  background-color:#D4EAEA;
  color:#A1C9C9;
  line-height: 56px;
  pointer-events: none;
  opacity: 1;
} 
.btn.disabled, .btn:disabled{opacity: 0.35; pointer-events: none;}
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.rounded {border-radius: 50px !important;}

.btn.w-400{
  width: 100%;
  max-width: 400px;
}
 
.btn-link, 
.btn-link:hover, 
.btn-link:focus, 
.btn-link:active{
  background-color: transparent;
} 

.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   outline: none !important;
   box-shadow: none!important;
} 
.buttons{
  display: block; 
  text-align: center;
  padding-top: 30px;
  padding-bottom: 30px;
} 
  
.buttons.d-flex {
  -ms-flex-pack: center;
justify-content: center;
}
 
svg path,
svg rect,
svg line,
svg circle,
svg polygon{ 
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
} 
 
@media (max-width:1550px){
  .form-control,
  .form-select{
    --input-h:42px;
  }
}
@media (max-width:1024px) {
  .btn{
    --btn-h:52px; 
    border-radius: 12px;
  }
} 
@media (max-width:576px) {
   
} 
/*==================================================
    Icon Setup
==================================================*/  

.icons{
  display:inline-block;
  position:relative;
  vertical-align:middle; 
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 1;
}
.icons.before:before,
.icons.before:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: contain;
  background-repeat:no-repeat;
  background-position: center center;
  transition: all 0.2s ease-in-out;
  opacity: 0;
}
.btn .icons.before:before{ opacity: 1; }
.btn .icons.before:after{ opacity: 0; }
.pc .btn:hover .icons.before:before{ opacity: 0; }
.pc .btn:hover .icons.before:after{ opacity: 1; }
 
/**/

.arrow-left,
.arrow-right,
.arrow-up,
.arrow-down{
  position: absolute;
  left: 0;
  top: 0;
  width:5px;
  height:5px;
  vertical-align:top;

  border-top: 1px solid #676767;
  border-left: 1px solid #676767;

   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}



.arrow-left{
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);  
}

.arrow-right{
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);  
}

.arrow-up{
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);  
}
.arrow-down{
   margin-left:1px; 
   -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);  
}
 
 
.container-fluid{
  max-width:100%; 
  padding-left:90px;
  padding-right:90px; 
  position: relative;
  z-index: 9;  
}

.container{ 
  max-width:calc(1920px + 180px); 
  padding-left: 90px;
  padding-right: 90px;
  position:relative;
  z-index:9; 
}

.container.mw-1530{
  max-width:calc(1530px + 180px); 
}

.section-target{
  position: absolute; 
  top: calc(var(--header-height) * -1);
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.section{
  display: block;
  position: relative;
  padding: 60px 0;
}

.py-100{
  padding: 100px 0;
}
.py-70{
  padding:80px 0;
}

.pt-60{
  padding-top: 60px;
}
.pt-50{
  padding-top: 45px;
}
 

.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }
 
.fancybox-button--zoom,
.fancybox-button--play{opacity: 0 !important; pointer-events: none;} 
 
@media (max-width:1550px) {
  .container-fluid,
  .container{
    padding-left: 70px;
    padding-right: 70px;
  }
} 

@media (max-width:1280px) {
  .container-fluid,
  .container{
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (max-width:991.98px) {
  .container,
  .container-fluid{
    padding-left:30px;
    padding-right: 30px;
  }
 
}
 
@media (max-width: 576px) {
  .container,
  .container-fluid{
    padding-left:20px;
    padding-right: 20px;
  }
   
}

/*==================================================
    Header Setup
==================================================*/  
 
:root {    

  --bs-body-color:var(--black);
  --bs-body-bg:#ffffff;
  --bs-body-text-align:left;
  --bs-body-font-weight:400;
  --bs-body-line-height:1.6;
  --bs-body-font-size:var(--f-16);
  --bs-body-font-family:'Inter','Noto Sans Thai','Poppins', sans-serif;
    
  --animate-duration-2s: all 0.2s ease-in-out;
  --animate-duration-35s: all 0.35s ease-in-out;
  --animate-duration-40s: all 0.40s ease-in-out;
  --animate-duration-45s: all 0.45s ease-in-out;

  --font-inter:'Inter';
  --font-notosans:'Noto Sans Thai';
  --font-poppins:'Poppins';

  --primary-color:#3400FF; 
  --secondary-color:#1d1d1d;
  --black:#333333;
  --red:#FF0000;
  --grey:#5F5F5F;

  --f-128:128px;
  --f-96:96px;
  --f-60:60px;
  --f-56:56px;
  --f-48:48px;
  --f-36:36px;
  --f-32:32px;
  --f-28:28px;
  --f-24:24px;
  --f-22:22px;
  --f-18:18px;
  --f-16:16px;
  --f-14:14px;

  /* --f-300:200;
  --f-400:300;
  --f-500:400;
  --f-600:500; 
  --f-700:600;   */

  --f-100:100;
  --f-200:200;
  --f-300:300;
  --f-400:400;
  --f-500:500;
  --f-600:600; 
  --f-700:700;  

  --header-height:88px;
  --bs-link-hover-color:var(--primary-color);
}  


@media (max-width: 1440px) {
  :root{
    --f-56:52px;
    --f-48:42px;
    --f-36:32px;
    --f-28:26px;
    --f-24:22px;
    --f-22:20px;
    --f-16:15px
  }
}

@media (max-width: 1199px) {
  :root{
    --f-56:48px;
    --f-48:36px;
    --f-36:28px;
    --f-28:24px;
    --f-24:20px;
    --f-22:18px;
    --f-16:15px;
  }
}

@media (max-width: 576px) {
  :root{
    --f-56:34px;
    --f-48:28px;
    --f-36:20px;
    --f-28:20px;
    --f-24:18px;
    --f-22:16px;
    --f-18:16px;
    --f-16:14px;

    --header-height:65px;
  }
}  

.bg-light{background-color: #F5F5F5 !important;}
.text-grey{color: var(--grey);}
.text-blue{color: var(--primary-color);} 

.font-inter{font-family: var(--font-inter) !important;}
.font-notosans{font-family: var(--font-notosans)!important;}
.font-poppins{font-family: var(--font-poppins)!important;}
 
b, strong{
  font-weight: bold; 
  font-family: inherit;
}
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6{   
  margin:0;  
  color:inherit;  
  font-weight:500;
  font-style: normal; 
  line-height: 1.3;   
  position: relative;
}   
.nowrap{ white-space: nowrap; }  
h1,.h1{}
h2,.h2{
  font-size: var(--f-56);
  font-weight: 900; 
  color: var(--primary-color);
}
h3,.h3{ }
h4,.h4{}
h5,.h5{}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  :root{
    --f-300:300;
    --f-400:400;
    --f-500:500;
    --f-600:600; 
  }

} 
 

 @media (max-width:1380px) {
  :root{}
 }
 
@media (max-width:1280px) {
  :root{ }
  
}
 
 
.header,
.navbar-brand img{
  transition: all 0.45s;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: auto;
  z-index: 1040;      
  display: block;   
  height: var(--header-height);
  background: #FFFFFF;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1);
} 
 
.header .container,
.header .container-fluid{  
  display: flex;   
  align-items: center; 
  height: 100%;
} 


.navbar-brand{
  margin:auto 0; 
  padding: 0;  
  position: relative;  
  flex-shrink: 0;
  z-index: 200;
  width: 187px;
}
.navbar-brand a{
  display: block;
  position: relative;
}
.navbar-brand img,
.navbar-brand svg{width: 100%; height: auto;} 
  

/*==================================================
   Mobile 
==================================================*/  

@media (min-width:1281px) {
  .btn-icon,.navbar-sidebar{display: none;}
  .nav-main{
    margin-left: auto;
  }
  .nav-main li a{
    display: block;
    font-size: 16px;
    color: var(--black);
    padding: 10px 15px;
    font-family: 'Poppins';
  }
  .nav-main li a.active{
    color: var(--primary-color);
    /* font-weight:600; */
  }
  .nav-main li a:hover{
    color: var(--primary-color); 
  }
  .nav-general{
    gap: 20px;
    margin-left: 35px;
  }

  .nav-general .btn{
    height: 56px;
    line-height: 54px;
    border-radius: 16px;
  }
}
@media (min-width:1281px) {
  .nav-main li a{
    padding-left: 20px;
    padding-right: 20px;
  }
}
@media (min-width:1551px) {
  .nav-main li a{
    padding-left: 25px;
    padding-right: 25px;
    font-size: 18px;
  }

  .nav-general{gap: 25px; margin-left: 45px;}
  
}

/*==================================================
   Mobile
==================================================*/  

@media (max-width:1280px) {
  .btn-icon{display: flex;}
  .nav-general .btn{
    padding: 0 20px;
    height: 52px;
    line-height: 50px;
  }
}
@media (max-width:1280px) {
  .header .nav-main{display: none;}
  .nav-general{margin-left: auto; gap: 20px;}

  .nav-general .btn{
    padding: 0 20px;
    height: 48px;
    line-height: 46px;
  }

  /**/

  .btn.btn-icon{
    padding: 0 !important;
    border:0 !important;   
    z-index: 1060; 
    border-radius: 0;
    position: relative; 
    margin: auto 0 auto 25px; 
    width: auto; 
    height: auto;
    background-color:transparent !important;
    overflow: visible;  
    display: flex;
  }
  
  .btn.btn-icon{ 
    opacity: 1 !important
  }
  .btn-icon:before{display: none;}
  .btn-icon .group{
    display: block;
    position: relative;
    width:25px;
    height:17px;
    margin: 0 auto 0
  }
  .btn-icon .group span{
    height:3px;
    background-color: var(--secondary-color);
    position: absolute;
    left: 0;
    right: 0;
    border-radius: 10px;
    -webkit-transform-origin: 25px, 1px;
    -ms-transform-origin: 25px, 1px;
    transform-origin: 25px, 1px
  }
   
  .btn-icon .group span:nth-child(1) {
      top: 0;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }
  
  .btn-icon .group span:nth-child(2) {
      top: 7px; 
      -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }
  
  .btn-icon .group span:nth-child(3) {
      top: 14px;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }
   
  
  .nav-opened .btn-icon span:nth-child(1):before { width: 100% !important }
  .nav-opened .btn-icon span:nth-child(2):before { width: 100% !important }
  .nav-opened .btn-icon span:nth-child(3):before { width: 100% !important }
  
  .nav-opened .btn-icon .group span:nth-child(1),
  .btn-icon[aria-expanded="true"] .group span:nth-child(1) {
      -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      -webkit-transform: rotate(45deg) translate3d(5px, 5px, 0);
      transform: rotate(45deg) translate3d(5px, 5px, 0)
  }
  
  .nav-opened .btn-icon .group span:nth-child(2),
  .btn-icon[aria-expanded="true"] .group span:nth-child(2) {
      -webkit-transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      -webkit-transform: scaleX(0) translateZ(0);
      transform: scaleX(0) translateZ(0)
  }
  
  .nav-opened .btn-icon .group span:nth-child(3),
  .btn-icon[aria-expanded="true"] .group span:nth-child(3)  {
      -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      -webkit-transform: rotate(-45deg) translate3d(5px, -5px, 0);
      transform: rotate(-45deg) translate3d(5px, -5px, 0)
  }

  /**/

  .header-slideout,
  .page-slideout {
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .page-slideout {
      position: relative;
      /* background-color: #fff; */
      overflow: hidden;
  }
  .closing .page-slideout,
  .nav-opened .page-slideout {
      z-index: 1040;
  }
  .closing .header-slideout,
  .nav-opened .header-slideout {
      z-index: 1043;
  }
  .page-blocker {
      position: fixed;
      top: 0;
      left: 0;
      bottom: 0;
      width: 100%;
      background-color: rgba(0, 0, 0, 0);
      z-index: 1090;
      pointer-events: none;
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .nav-opened .page-slideout,
  .nav-opened .header-slideout,
  .nav-opened .page-blocker {
    -webkit-transform: translate(-300px, 0);
    -ms-transform: translate(-300px, 0);
    transform: translate(-300px, 0);
    -webkit-transform: translate3d(-300px, 0, 0);
    transform: translate3d(-300px, 0, 0);
  }
  .nav-opened .page-blocker{ background-color:rgba(0,0,0,0.6);}
  .nav-opened .page-blocker{
    pointer-events: auto;
    display: block;
    cursor: pointer;
  }

  .navbar-sidebar {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1095;
      width: 300px;
      overflow: hidden;
      padding: 0; 
      display:block;
      background-color:var(--secondary-color) ;
      align-items: normal;
      -ms-flex-align: normal;
      -webkit-transform: translate(300px, 0);
      -ms-transform: translate(300px, 0);
      transform: translate(300px, 0);
      -webkit-transform: translate3d(300px, 0, 0);
      transform: translate3d(300px, 0, 0);
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .nav-opened .navbar-sidebar {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
  .nav-opened .header {
      pointer-events: none;
  }
  .navbar-sidebar .container-fluid {
      padding: 0;
  }
  .nav-main {
      position: absolute;
      top: 0;
      bottom: 0;
      display: block;
      height: 100%;
      right: -300px;
      width: 600px;
      overflow: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; 
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
  }
  .nav-main li {
      display: block;
      position: static;
  }
  .nav-main li {
      padding-left: 20px !important;
  }
  .nav-main li a {
      padding: 20px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-weight: 500;
      font-size: 16px !important;
      height: auto!important;
      line-height: normal !important;
      display: block;
      position: relative;
      color: #fff;
      text-transform: uppercase;
  } 
  .nav-main > li > a {
      width: 280px;
      position: relative;
  }
   
}

@media (max-width:576px) {
  .navbar-brand{
    max-width: 140px;
  }
  .nav-general{gap: 10px; display: none;}

  .btn.btn-icon{margin-left: auto;}
}
/*==================================================
   Section
==================================================*/  
 
.page{
  display: block;
  position: relative;
  overflow: hidden;  
  /* padding-top:var(--header-height); */
  padding-top: 0;
} 
 

.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#fff;
  z-index: 1090; 
  display:flex;   
} 


.loader {
  width: 34px;
  height:34px;
  margin:  auto;
  display: block;
  border-top: 3px solid var(--primary-color);
  border-right: 3px solid #f1f1f1;
  border-bottom: 3px solid #f1f1f1;
  border-left: 3px solid #f1f1f1;
  border-radius: 100px;
  animation: spin 1s infinite linear;
}
 
 
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}
.section-full{
  min-height: 100vh;
  min-height: calc(var(--vhs, 1vh) * 100) !important;
  display: flex;
}
 
.background{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  pointer-events: none;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background.fixed{
  background-attachment: fixed;
}
.device .background.parallaxie,
.device .background.fixed{
  background-attachment: scroll !important;
  background-position: center center !important;
}

@media (max-width:1199px) {
  .background.parallaxie{
    background-attachment: scroll !important;
    background-position: center center !important;
  }
}
 
.section{ 
  position: relative;
}

.section.h-full{
  min-height: 100vh;
}

.section-title{ 
  display: block;
  position: relative; 
  padding: 125px 0 75px; 
}    
.section-title h2{
  text-transform: uppercase;
  font-family: 'Poppins';
}
.section-title h3{
  font-size: var(--f-48);
  font-weight: 500;
}
.section-title h4{
  font-size: var(--f-36); 
}
.section-title h5{
  font-size: var(--f-28);
  letter-spacing:8px;
  text-transform: uppercase;
  font-family: 'Poppins';
}

.main-page .section-title h2{
  line-height: 1.1;
  padding-bottom:25px;
}
.card{
  border:0;
  border-radius: 0;
  background-color: transparent;
  position: relative;
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block; 
 
}

.card-photo .photo{
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: all 0.35s ease 0s;  
}
.card-photo .photo img{
  width: 100%
}

.card-photo.rounded,
.card-photo.rounded .photo{
  border-radius: 10px;
}
.card-body{color: inherit;}
 
.card-link{
  position: absolute !important;
  top: 0;
  left: 0; 
  right: 0;
  height: 100%;
  z-index: 100;
}
.card h3,
.card p,
.card .card-body{transition: all 0.2s ease 0s;}
 
strong{font-weight: 500;}
 

@media (max-width:1199px) {
  .main-page .section-title {
    margin: 20px 0;
  }
  .main-page .section-title h2{
    padding-bottom: 15px;
  }
  .main-page .section-title  .p-max-width {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width:1024px) {
  .section-title{
    padding: 100px 0 60px;
  }
}
 
@media (max-width:991.98px) { }

@media (max-width:670px) {
  .section-title{
    padding: 60px 0 40px;
  }
}

@media (max-width:576px) {
  .section-title h5{
    letter-spacing: 4px;
  }
  .main-page .section-title  .p-max-width {
    padding-left: 0;
    padding-right: 0;
  }
}
   
/*==================================================
   Banner
==================================================*/  

.textrow {
  position: relative;
  overflow: hidden;
} 
.section-banner{
  padding: 0 !important;
  
} 
.section-banner .background{
  background-position: top left;
}
.section-banner .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40%;
  opacity: 0.8;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  display: none;
}
.section-banner .container{
  display: flex;
  height: 100%;
  height:100vh;
}
.text-outline{
  color: var(--primary-color);
  font-weight: 900;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px;
}
 
.banner-main-caption{
  display: flex;
  position: relative;
  margin:0; 
  /* padding-top: 5vw; */
  z-index: 100;
}
.banner-main-caption h1{
  position: relative;
  display: block;
  font-size: var(--f-60);
  font-weight: 900;
  color: var(--primary-color);
  line-height: 0.8;
  margin-bottom: 25px;
  font-family: 'Poppins';
}
.banner-main-caption h1 .fs-xl{
  font-size: var(--f-128);
  line-height: 0.8; 
}
.banner-main-caption h1 span{
  display: block;
}
.banner-main-caption h1 span:nth-child(2){
  margin-top:-35px;
}
.banner-main-caption h3{
  font-size: var(--f-32);
  font-size: 500;
  margin-bottom: 18px;
}
.banner-main-caption p{
  font-size: var(--f-22);
}
.banner-main-caption p.tel{
  font-weight: 700;
  font-size: var(--f-36);
  font-family: var(--font-inter);
  margin-bottom: 40px;
}
.btn.btn-line{
  height: 64px;
  line-height: 62px;
  font-size: var(--f-18);
  font-weight: bold;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 223px; 
 
  --bs-btn-border-color:#24D62B;
  --bs-btn-bg:#24D62B;
  
  --bs-btn-hover-bg:#12C619;
  --bs-btn-hover-border-color:#12C619;
  
}
.btn.btn-line .icons{
  width: 30px;
  height: 30px;
  background-image: url(../img/icons/icon-line.svg);
}

.banner-main-caption .img-iphone{
  width: 40%;
  margin-left: auto; 
  margin-right: -90px;
  display: flex;
}
.banner-main-caption .img-iphone > img{
  position: relative;
  z-index: 100;
  margin-top: auto;
}
.banner-main-caption .article{
  padding-left: 360px;
  position: relative;

  margin-top: auto; margin-bottom: auto;
}
.banner-main-caption .logo-icons img{
  width:250px;
  position: absolute;
  
}
.banner-main-caption .logo-icons img.logo-top{
  left:-25px;
  top: -20px;
}
.banner-main-caption .logo-icons img.logo-bottom{
  right: -70px;
  bottom: 7vw; 
}



.banner-main-caption{
  -webkit-animation-delay: 0ms;
   animation-delay: 0ms;
     -webkit-animation-duration: 300ms;
   animation-duration: 300ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeOut;
   animation-name: fadeOut;
}
.swiper-slide-active .banner-main-caption{ 

   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
   } 

.banner-main-caption .element{  

    -webkit-animation-delay: 0ms;
   animation-delay: 0ms;
     -webkit-animation-duration: 500ms;
   animation-duration: 500ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeOut;
   animation-name: fadeOut;

}
.swiper-slide-active .banner-main-caption .element{
  opacity: 1;
  visibility: visible;
  -webkit-animation-duration: 900ms;
   animation-duration: 900ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
.swiper-slide-active .banner-main-caption .element-1{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}

.swiper-slide-active .banner-main-caption .element-2{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-slide-active .banner-main-caption .element-3{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
 
.swiper-slide-active .banner-main-caption .element-4{
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

.swiper-slide-active .banner-main-caption .element-5{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

.swiper-slide-active .banner-main-caption .element-6{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}


@media (min-width:1025px) and (max-height:750px)  {
  .section-banner .container.h-md-auto{height: auto;} 
}

@media (max-width:1920px) {
  .banner-main-caption .img-iphone{
    width: 45%;
  }
}

@media (max-width:1880px) {
  /* .banner-main-caption{padding-top: 7vw;} */
  .banner-main-caption .logo-icons img{width: 13vw;}
  .banner-main-caption .article{padding-left: 18vw; }
  .banner-main-caption .logo-icons img.logo-bottom{right: -40px;}
}

@media (max-width:1550px) {
  /* .banner-main-caption{padding-top: 7vw;} */
  .banner-main-caption .logo-icons img{width: 13vw;}
  .banner-main-caption .article{padding-left: 18vw; }
  .banner-main-caption .logo-icons img.logo-bottom{right: -40px;}

  .banner-main-caption h1 {font-size: 52px;}
  .banner-main-caption h1 .fs-xl{font-size: 110px;}
  .banner-main-caption h1 span:nth-child(2){margin-top: -30px;}
  .banner-main-caption h3{font-size: 27px;}
  .banner-main-caption p{font-size: 18px;}
  .banner-main-caption p.tel{font-size: 32px;}
  .btn.btn-line{
    height: 58px;
    line-height: 56px;
    width:200px;
  }
}

@media (max-width:1550px) and (min-height:1100px)  {
  .section-banner .container.h-md-auto{ height: 50vw; min-height: 0;} 
}

@media (max-width:1440px) {
  .banner-main-caption .article{padding-left: 15vw; }
  .banner-main-caption .logo-icons img.logo-top{left: -30px;}
  .btn.btn-line .icons {
    width: 29px;
    height: 29px;
  } 
}

@media (max-width:1280px) {
  .banner-main-caption .logo-icons img.logo-top{left: -15px;}
  .banner-main-caption .article {padding-left: 13vw;}
  .banner-main-caption .img-iphone{margin-right: -50px;}
  .banner-main-caption .logo-icons img{width: 11vw;} 
  .banner-main-caption .logo-icons img.logo-bottom{right: -2vw; width: 13vw;}
}


@media (max-width:1199px) { 
  .section-banner .container.h-md-auto{
    height: calc(var(--vhs, 1vh) * 100) !important;;
  }
  .banner-main-caption h1 {font-size: 42px;}
  .banner-main-caption h1 .fs-xl{font-size: 90px;}
  .banner-main-caption h1 span:nth-child(2){margin-top:-24px;}
  .banner-main-caption h3{font-size: 27px;}
  .banner-main-caption p{font-size: 18px;}
  .banner-main-caption p.tel{font-size: 32px;}
  .banner-main-caption .btn-line{
    height: 58px;
    line-height: 56px;
    width:200px;
  }
}


@media (max-width:1024px) {
  .banner-main-caption{
    margin-top: 0; 
  }
  .banner-main-caption .article{
    margin-top: 90px;
    margin-bottom: 90px; 
    padding-left: 12vw;
  }
  .banner-main-caption .img-iphone{
    display: flex;
  }
  .banner-main-caption .img-iphone > img{
    margin-top: auto;
  }

  .banner-main-caption h3{font-size: 22px;}
  .banner-main-caption p{font-size: 16px;}
  .banner-main-caption p.tel{font-size: 28px;}

  .banner-main-caption .logo-icons img.logo-top{width: 10vw;} 

  .section-banner .container{
    /* min-height: 0; */
  }
}
@media (max-width:991.98px) {
  /* .section-banner .container{
    min-height: 0;
  } */
  .banner-main-caption{
    position: static;
  }
  .banner-main-caption .article{ 
    padding-left: 0;
    margin-top: 20vw;
    margin-bottom: 0;
    margin-left: 20px; 
  }
  .banner-main-caption .logo-icons img.logo-top {
    left:0; 
  }
  .banner-main-caption p{white-space: nowrap;}
  .banner-main-caption h1{padding-left: 12.5vw;}

  .banner-main-caption .img-iphone{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin-right: 0; 
    flex-shrink: 0;
    width:57%
  }
  .banner-main-caption .logo-icons img.logo-bottom {
    right: 20px;
    width: 22vw;
  }
  .banner-main-caption .logo-icons img.logo-top{top: 0;}

  .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}
@media (max-width:750px) and (max-height:550px){
  .banner-main-caption .article{
    padding-top:60px;
    padding-bottom: 60px;
    margin-top: 0;
  }
}
@media (max-width:576px) { 
  .banner-main-caption .article{
    padding-top:30vw;
    padding-bottom: 30vw;
    margin-left: 0;
  }
  .banner-main-caption h1{
    font-size: 10.4vw;
    padding-left: 0;
    margin-top: -4vw;
  }
  .banner-main-caption h1 .fs-xl {
    font-size: 20vw;
  }
  .banner-main-caption h1 span:nth-child(2) {
    margin-top:-5.7vw;
  }

  .banner-main-caption .logo-icons img.logo-top{
    display: none;
  }

  .banner-main-caption p{white-space: normal;}
  .banner-main-caption p.tel{margin-bottom: 30px; font-size: 24px;}

  .banner-main-caption .btn-line {
    height: 48px;
    line-height: 46px;
    width: 160px;
    font-size: 15px;
    padding: 0;
  }
  .banner-main-caption .btn-line .icons {
    width: 26px;
    height: 26px;
  }
  .banner-main-caption .img-iphone{width: 51%;}
  .banner-main-caption .logo-icons img.logo-bottom{
    width: 22vw;
    bottom: 9vw;
  }
}

/*==================================================
   Feature
==================================================*/  
.section-aboutus{
  position: relative;
  position: relative;
}

.section-feature{
  background-color: #F3F4FD;
  padding-bottom: 200px;
}
.section-feature .section-title{
  flex-direction: column;
  display: flex; 
}
.section-feature .section-title h4{
  font-size: 24px;
  margin: 0 auto;
  max-width: 900px;
}
.card-feature{
  border-radius: 16px;
  background-color: #ffffff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 360px;
  transition: all 0.25s;
}
.card-feature .card-icon{
  width: 56px;
  height: 56px;
  margin-bottom:30px;
}
.card-feature .card-icon .icons{
  width: 100%;
  height: 100%;
}
.card-feature .card-icon .icons:before,
.card-feature .card-icon .icons:after{
  bottom: auto;
  height: 100%;
  transition: all 0.30s;
}
.card-feature .card-icon .icons:before{
  opacity: 1;
  top: 0; 
 
}
.card-feature .card-icon .icons:after{
  opacity: 0;
  top:30px;  
}
.pc .card-feature:hover .card-icon .icons:before{opacity: 0; top:-30px;    }
.pc .card-feature:hover .card-icon .icons:after{opacity: 1; top: 0; }
.card-feature .card-icon .icon-monitor:before{background-image: url(../img/icons/icon-monitor.svg);}
.card-feature .card-icon .icon-monitor:after{background-image: url(../img/icons/icon-monitor-blue.svg);}
.card-feature .card-icon .icon-chart:before{background-image: url(../img/icons/icon-chart-waterfall.svg);}
.card-feature .card-icon .icon-chart:after{background-image: url(../img/icons/icon-chart-waterfall-blue.svg);}
.card-feature .card-body{
  flex: none;
  padding: 0 40px;
}

.card-feature h3{
  font-size: var(--f-24);
  color: #000000;
  font-weight: 600;
  margin-bottom: 8px;
  transition: all 0.25s;
}
.card-feature h6{
  font-size: var(--f-16);
  color: #5F5F5F;
  font-weight: 400;
  margin-bottom: 20px;
  
}
.card-feature p:last-child{margin-bottom: 0;}
.pc .card-feature:hover{
  box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.1);
} 
@media (max-width:1550px) {
  .section-feature{
    padding-bottom: 160px;
  }
  .card-feature .card-body{
    padding: 0 30px; 
  }
}
@media (max-width:1440px) {
  .card-feature{
    height: 350px;
  }
  .card-feature .card-icon{margin-bottom: 25px;}
}
@media (min-width:992px) and (max-width:1199px) {
  .card-feature{
    height: 280px;
  } 
  .card-feature h6{
    font-size: 14px;
    margin-bottom: 12px;
  } 
  .card-feature h3{
    margin-bottom: 5px;
    font-size: 18px;
  } 
  .card-feature p{
    font-size: 13px;
  }
  .card-feature .card-body{
    padding: 0 15px;
  }
  .card-feature .card-icon{
    margin-bottom:15px;
  }
}

@media (max-width:991.98px) {
  .section-feature{
    padding-bottom: 120px;
  }
  .card-feature{
    height: 300px;
  }
  .section-feature .section-title h4{
    font-size: var(--f-24); 
    padding: 10px 20px 0;
  }
}

@media (max-width:576px) {
  .section-feature{
    padding-bottom:40px;
  }

  .section-feature .section-title h4{
    font-size: var(--f-20); 
    padding: 10px 0 0;
  }
}
 
/*==================================================
   Professional
==================================================*/  
.section-professional{
  padding: 0 !important;
}
.section-professional .background.color{
  background-color: var(--primary-color);
}
.section-professional .row > div{
  position: relative;
  overflow: hidden;
}
.section-professional .article{ 
  z-index: 100;
  color: #fff;
  max-width: 480px;
  padding:60px 0;
  margin-left: 60px;
  font-size: var(--f-18);
}
.section-professional .article > div{
  position: relative;
}
.section-professional .logo-icon{ 
  position: absolute;
  bottom: -200px;
  right: -170px;
  width: 440px; 
}
.section-professional h3{
  font-size:40px;
  font-weight: 600;
  margin: 20px 0; 
}
.section-professional h4{
  font-size: var(--f-24);
  font-weight: 500;
  margin-bottom:18px;
  line-height: 1.3;
}
.section-professional p{
  margin-bottom: 0;
}
.section-professional .icon-10plus{
  width: 156px;
  margin-bottom:35px;
  margin-top: 10px;
}

.section-professional .icon-10plus img{width: 100%;}
 
@media (max-width:1550px) {
  .section-professional .logo-icon{
    width: 380px;
  }
}
@media (max-width:1440px) {
  /* .section-professional .article{
    max-width: 400px;
  } */
  .section-professional .logo-icon{
    width: 320px;
    right: -130px;
    bottom: -140px;
  }
}

@media (max-width:1280px) {
  .section-professional .logo-icon{
    width: 260px;
    right: -100px;
    bottom: -110px;
  }
  .section-professional .article{
    margin-left: 40px;
  }
  .section-professional .icon-10plus{width: 145px;}
}
@media (max-width:1199px) {
 
  .section-professional .logo-icon{
    display: none;
  }
  .section-professional .logo-icon img{
    opacity: 0.2;
  }

  .section-professional .article{
    padding:40px;
    margin: 0;
    max-width: 100%;
    font-size: var(--f-16);
  }
  .section-professional .icon-10plus{
    width: 130px;
  }

  .section-professional h3{font-size: var(--f-48);}
}
@media (max-width:991.98px) {
  .section-professional .background:not(.color){
    height: 46vw;
    position: relative;
  }
  .section-professional .article{
    padding:70px 80px;
  }
}

@media (max-width:576px) {
  .section-professional .article{
    padding:40px 30px 50px;
  }
  .section-professional .icon-10plus {
    width: 120px;
    margin-bottom:30px;
  }
}

/*==================================================
   Service
==================================================*/  
.section-service{
  background-color: #f5f5f5;
  padding-bottom: 100px;
}
.section-service .section-title{
  text-transform: uppercase;
  text-align: center;
}
.section-service .section-title p{
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
}
.service-lists{
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: -25px -10px 0;
  list-style-type: none; 
}
.service-lists li{
  padding: 10px;
  margin: 0;
  width: 16.28%; 
 
}
.card-service{
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border-radius: 20px;
  text-align: center;
  align-items: center;
  height: 216px;
  transition: all 0.25s;
}
.card-service .card-icon{
  width: 48px;
  height: 48px; 
  /* margin-top: 40px;
  margin-bottom: 25px; */
  margin-top: 18%;
  margin-bottom: 10%;
  overflow: hidden;
  position: relative;
}
.card-service .card-icon .icons{
  width: 100%;
  height: 100%;
} 

.card-service .card-body{
  padding: 0 15px;
  margin-bottom: auto;
  flex: none;
}
.card-service h5{
  font-size: var(--f-16);
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 3px;
}
.card-service p{
  font-weight: 300;
  margin: 0;
  color: #6D6D6D;
  line-height: 1.3;
}

.card-service .icon-boxes:before{background-image: url(../img/icons/icon-boxes.svg);}
.card-service .icon-boxes:after{background-image: url(../img/icons/icon-boxes-blue.svg);}
.card-service .icon-bag:before{background-image: url(../img/icons/icon-bag.svg);}
.card-service .icon-bag:after{background-image: url(../img/icons/icon-bag-blue.svg);}
.card-service .icon-smartphone:before{background-image: url(../img/icons/icon-smartphone.svg);}
.card-service .icon-smartphone:after{background-image: url(../img/icons/icon-smartphone-blue.svg);}
.card-service .icon-doctor:before{background-image: url(../img/icons/icon-doctor.svg);}
.card-service .icon-doctor:after{background-image: url(../img/icons/icon-doctor-blue.svg);}
.card-service .icon-chat:before{background-image: url(../img/icons/icon-chat.svg);}
.card-service .icon-chat:after{background-image: url(../img/icons/icon-chat-blue.svg);}
.card-service .icon-iot:before{background-image: url(../img/icons/icon-iot.svg);}
.card-service .icon-iot:after{background-image: url(../img/icons/icon-iot-blue.svg);}
.card-service .icon-youtube:before{background-image: url(../img/icons/icon-youtube.svg);}
.card-service .icon-youtube:after{background-image: url(../img/icons/icon-youtube-blue.svg);}
.card-service .icon-truck:before{background-image: url(../img/icons/icon-truck.svg);}
.card-service .icon-truck:after{background-image: url(../img/icons/icon-truck-blue.svg);}
.card-service .icon-support:before{background-image: url(../img/icons/icon-support.svg);}
.card-service .icon-support:after{background-image: url(../img/icons/icon-support-blue.svg);}
.card-service .icon-buy:before{background-image: url(../img/icons/icon-buy.svg);}
.card-service .icon-buy:after{background-image: url(../img/icons/icon-buy-blue.svg);}
.card-service .icon-elearning:before{background-image: url(../img/icons/icon-elearning.svg);}
.card-service .icon-elearning:after{background-image: url(../img/icons/icon-elearning-blue.svg);}
.card-service .icon-taxi:before{background-image: url(../img/icons/icon-taxi.svg);}
.card-service .icon-taxi:after{background-image: url(../img/icons/icon-taxi-blue.svg);}
.card-service .icon-car-wash:before{background-image: url(../img/icons/icon-car-wash.svg);}
.card-service .icon-car-wash:after{background-image: url(../img/icons/icon-car-wash-blue.svg);}
.card-service .icon-share:before{background-image: url(../img/icons/icon-share.svg);}
.card-service .icon-share:after{background-image: url(../img/icons/icon-share-blue.svg);}

.pc .card-service:hover {box-shadow: 0px 20px 50px -10px rgb(0 0 0 / 10%);}

.card-service .card-icon .icons:before,
.card-service .card-icon .icons:after{
  bottom: auto;
  height: 100%;
  transition: all 0.30s;
}
.card-service .card-icon .icons:before{
  opacity: 1;
  top: 0; 
 
}
.card-service .card-icon .icons:after{
  opacity: 0;
  top:30px;  
}
.pc .card-service:hover .card-icon .icons:before{opacity: 0; top:-30px;    }
.pc .card-service:hover .card-icon .icons:after{opacity: 1; top: 0; }

 
@media (max-width:1550px) {
  .card-service{
    height:200px;
  }
  .card-service p{
    font-size: 15px;
  }
  .card-service .card-icon {
    width: 42px;
    height: 42px;
  }
}
@media (max-width:1280px) {
  .service-lists li{
    width: 20%;
  }
  .card-service .card-icon{
    margin-top: 15%;
    margin-bottom: 8%;
  }
}
@media (max-width:1024px) {
  .service-lists li{padding: 8px;}
}
@media (max-width:991.98px) {
  .service-lists li{
    width: 25%;
    padding: 5px;
  }
  .card-service {
    height: 185px;
  }
  .card-service p{
    font-size: 14px;
  }
}

@media (max-width:750px) {
  .service-lists li{
    width: 33.33%;
    padding: 8px;
  }
}

@media (max-width:576px) {
  .section-service{
    padding-bottom: 40px;
  }
  .service-lists{
    margin-top: -15px;
  }
  .service-lists li{
    width: 50%;
    padding: 5px;
  }
  .card-service .card-icon {
    margin-top: 17%;
    margin-bottom: 10%;
  }
}

/*==================================================
  Client
==================================================*/ 

.section-client{
  padding-bottom: 100px;
}
.section-client .section-title{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}
.section-client .section-title img.icons {
  position: relative;
  top: -2px;
  height: 92px;
  width: auto; 
}

.section-client .section-title-group{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.section-client .section-title p{
  text-align: center;
  width: 100%;
  max-width:1050px;
}
.client-lists {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: -25px -10px 0;
  list-style-type: none;
}
.client-lists li {
  padding: 10px;
  margin: 0;
  width: 16.6667%;
}
.card-client{
  display: block;
  border:1px solid #F1F1F1;
  transition: all 0.25s;
}
.card-client img{
  width: 100%;
}
.pc .card-client:hover{    box-shadow: 0px 20px 50px -10px rgb(0 0 0 / 10%);}
 
@media (max-width:1440px) {
  .section-client .section-title img.icons{height: 89px;}
}

@media (max-width:1280px) {
  .client-lists li {
    width: 20%;
  }
}
@media (max-width:1199px) {
  .client-lists {
    margin-left: -8px;
    margin-right: -8px;
  }
  .client-lists li {
    padding: 8px;
  }

  .section-client .section-title{gap: 20px;}
  .section-client .section-title img.icons{height: 80px;}

  .section-client .section-title-group{gap: 20px;}
}
@media (max-width:991.98px) {
 
  .client-lists li {
    width: 25%; 
  }

  .section-client .section-title img.icons{height: 70px; top: 2px;}
}

@media (max-width:750px) {
  .client-lists {
    margin-left: -5px;
    margin-right: -5px;
  }
  .client-lists li {
    padding: 5px;
  }

  .section-client .section-title img.icons{height: 60px; top: 5px;}
}

@media (max-width:576px) {
  .section-client{
    padding-bottom: 40px;
  }
  .client-lists li {
    width: 33.333%; 
  }

  .section-client .section-title{
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding-top: 100px;
  }
  .section-client .section-title img.icons{height:35px; top: 0;}

  .section-client .section-title-group{
    flex-direction: column;
    text-align: center;
    gap: 10px;
    padding-bottom: 10px;
  }
}


/*==================================================
  Portfolio
==================================================*/ 
.portfolio-lists {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin:0 -15px 0;
  list-style-type: none;
}
.portfolio-lists li {
  padding:15px;
  margin: 0;
  width: 33.33%;

  display: none;
}

.card-portfolio{
  display: flex;
  position: relative;
  overflow: hidden; 
}
 
.card-portfolio .card-photo:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: all 0.65s;
  z-index: 1;
 

}
.card-portfolio .card-photo img{
  width: 100%;
 
}
.card-portfolio h6{
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
  display: inline-block;
  padding: 8px 18px;
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 64px;
}
.card-portfolio .card-logo{
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 13%;
  background: #FFFFFF;
  box-shadow: 0px 10px 20px -10px rgba(0, 0, 0, 0.25);
}
.card-portfolio .card-logo img{width: 100%;}

.card-portfolio .icon-zoom{
  --icon-size:40px;
  background-image: url(../img/icons/icon-zoom.svg);
 
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 100;
}

/* .pc .card-portfolio:hover .card-photo img{transform: scale(1.12);} */
.card-portfolio:hover .card-photo:before{opacity: 1;}
.card-portfolio .card-body{
  position: absolute;
  left: 0; 
  right: 0;
  background-color: rgba(0, 0, 0, 0.9);
  transition: all 0.35s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:var(--gap);
  padding:var(--gap); 

  opacity: 0;
  transition: all 0.55s;
  bottom:-110px;
  pointer-events: none;
  z-index: 100;
  
  --gap:24px;  
}

.card-portfolio .card-body .btn{
  --btn-h:56px; 
  --btn-w:200px;
  width: var(--btn-w);
 
}
.card-portfolio .card-body .btn.btn-outline{ 
  --bs-btn-hover-bg:#fff; 
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#000;
}
.card-portfolio:hover .card-body{
  bottom: 0;
  opacity: 1;
  pointer-events: all;
} 

.button-lists{
  display: flex;
  align-items: center;
  justify-content: center;
  list-style-type: none;
  gap: 20px;
  padding: 0;
  margin: -30px 0 40px;
  width: 100%;
}
.button-lists .btn{
  height: 64px;
  width: 200px;
  padding: 0;
  border: 0;
 
  background-color: #F3F3F3;
  font-size: var(--f-16);
  font-weight: 500;
  color: var(--black);
}
.button-lists .btn.active,
.pc .button-lists .btn:hover{
  color: #fff;
  background-color: var(--black);
} 
.button-lists.active-blue .btn.active,
.pc .button-lists.active-blue .btn:hover{
  color: #fff; 
  background-color: #3400FF;
  box-shadow: 4px 4px 0px #2200A7 !important;
}
.button-lists li:before{display: none;}
 
.btn-more{
  margin: 0 auto;
  width: 223px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.btn-more .icons{
  width: 18px;
  height: 18px;
  background-image: url(../img/icons/icon-arrow-down.svg);
}
.btn-more.less .icons{
  transform: rotate(-180deg);
}
@media (max-width:1550px) {
  .button-lists .btn{
    height: 60px;
    line-height: 60px;
    width:180px;
  }

  .card-portfolio .card-body{ 
    --gap:20px; 
  }
  .card-portfolio .card-body .btn{
    --btn-h:50px; 
    --btn-w:50%; 
    border-radius: 12px;
  }
}

@media (max-width:1440px) {
  .card-portfolio .card-body{
    gap:15px
  }
  .card-portfolio .card-body .btn{
    font-size: 14px;
  }
}

@media (max-width:1199px) {
  .button-lists {gap: 15px; margin-bottom:30px;}
  .button-lists .btn{
    height: 50px;
    line-height: 50px;
    width:135px;
  }

  .card-portfolio h6{
    font-size: 11px;
    top: 15px;
    left: 15px;
    letter-spacing: 1px;
  }

  .portfolio-lists{
    margin-right: -10px;
    margin-left: -10px;
  }
  .portfolio-lists li {
    padding:10px;
  }

  .card-portfolio .card-body .btn{
    --btn-h:42px;
    padding: 0; 
  }
}
 
@media (max-width:1024px) {
  
  .card-portfolio .icon-zoom {
    --icon-size:35px;
    top: 10px;
    right: 10px;
  }

  .card-portfolio h6{
    font-size: 10px;
    top: 10px;
    left: 10px;
    padding:5px 12px;
    letter-spacing: 0;
  }
}

@media (min-width:992px) and (max-width:1024px) {
  .card-portfolio .card-body{
    --gap:15px;
    gap:10px;
  }
  .card-portfolio .card-body .btn{
    --btn-h:38px;
    font-size: 12px;
    border-radius:8px;
  }
}

@media (max-width:991.98px) {
  .button-lists {gap: 10px; margin-bottom:30px;}
  .button-lists .btn{
    height: 45px;
    line-height: 45px;
    width:115px;
    font-size: 14px;
  }

  .portfolio-lists li{
    width: 50%;
  }
}
@media (max-width:750px) {
  .portfolio-lists{
    margin-left: -10px;
    margin-right: -10px;
  }
  .portfolio-lists li {
    padding: 10px;
  }
  .card-portfolio .card-body{
    --gap:15px;
    gap:10px;
  }
  .card-portfolio .card-body .btn{
    --btn-h:38px;
    font-size: 12px;
    border-radius:8px;
  }
}
@media (max-width:670px) {
  .button-lists {
    flex-wrap: wrap;
    margin-top:  -20px;
    margin-bottom:30px;
    margin-left: auto;
    margin-right: auto;
    max-width: 400px;
  }
  .button-lists .btn{
    height: 35px;
    line-height: 35px;
    width:95px;
    font-size: 12px;
    border-radius: 10px;
  }
  .portfolio-lists{
    margin-left: -5px;
    margin-right: -5px;
  }
  .portfolio-lists li{
    width: 50%;
    padding: 5px;
  }

  .card-portfolio h6{
    font-size: 9px;
    top: 10px;
    left: 10px;
    padding: 5px 8px;
  }
  .card-portfolio .card-logo{
    bottom: 5px;
    right: 5px;
    width: 15%;
  }

  .btn-more{
    width: 170px;
  }
}

@media (max-width:500px) {
  .portfolio-lists {
    margin-left: -10px;
    margin-right: -10px;
  }
  .portfolio-lists li{
    width: 100%;
    padding: 10px;
  }
  .card-portfolio .card-body{
    --gap:15px;
    gap:15px;
  }
  .card-portfolio .card-body .btn{
    --btn-h:40px;
    font-size: 14px;
    border-radius:8px;
  }
  .card-portfolio h6 {
    font-size: 11px; 
    padding: 5px 10px;
  }
}

/*==================================================
   Showcase
==================================================*/  
.section-showcase{
  background-color:#F3F4F7;
  margin-top: 30px;
  margin-bottom: 9vw;
}

.swiper-overflow{
  display:block;
  position: relative;
}
.iphone-mockup{
  position: absolute;
  top: 25px;
  left: 50%;
  width: 250px;
  z-index: 100;
  margin-left: -125px;
  pointer-events: none; 
  
}
.iphone-mockup{}
.iphone-mockup img{
  display: block;
  border-radius:37px;
  box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.2);
}
.swiper-showcase {
  padding: 40px 0;
}
.swiper-showcase .swiper-slide { 
  display: flex;
  width: 220px;
}
.swiper-showcase .swiper-slide img{
  width:100%;
  margin:auto;
  display: block;
  border-radius: 16px;
  transition: all 0.25s;
  transform: scale(0.95);

  filter: drop-shadow(0px 10px 20px  rgba(0, 0, 0, 0.1));
}
 
.swiper-showcase .swiper-slide-active img{
  filter: drop-shadow(0px 10px 20px  rgba(0, 0, 0, 0));
  transform: scale(1);
}

.nav-showcase{
  display: flex;
  justify-content: center;
  border:0;
  gap: 5px;
  margin:30px 0 30px;
}
.nav-showcase li a{
  display: block;
  padding: 15px 20px;
  font-size: var(--f-16);
  color: #787878;
  font-weight: 500;
  border-bottom: 4px solid transparent;
}
.pc .nav-showcase li a:hover,
.nav-showcase li a.active{
  color: var(--black);
  border-color: var(--black);
}
.tab-content-shocase {
  position: relative;
}
.tab-content-shocase .tab-pane{
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:#F3F4F7;
}
.tab-content-shocase .tab-pane:nth-child(1){
  position: relative;
}
.tab-content-shocase .tab-pane.active{
  opacity: 1;
  pointer-events: all;
}
 
@media (max-width:1199px) {
  .swiper-showcase .swiper-slide {
    width: 180px;
  }
  .iphone-mockup{
    width: 200px;
    margin-left: -100px;
    top: 32px;
    border-radius: 31px;
  }

  .nav-showcase{margin: 20px 0 15px;}
}

@media (max-width:576px) {
  .section-showcase{
    padding-bottom: 10px;
  }
  .nav-showcase{
    padding: 0 20px;
    margin: 20px 0 0; 
    gap: 15px;
  }
  .nav-showcase li a{
    padding: 5px 0;
    border-width: 3px;
  }
}


/*==================================================
   Platform
==================================================*/  

.section-platform .container{
  display: flex;
  flex-direction: column;
  gap: 15vw;
}
.card-platform{
  display: flex;
  width: 100%;
}
.card-platform .card-photo{
  overflow:visible;
  width: 50%;
  padding-left: 50px;
  position: relative;
  margin-bottom: auto;
}
.card-platform .card-body{
  width: 50%;
  padding-left: 60px; 
  font-size: var(--f-22);
  margin-left: auto;
  margin-right: auto;
  padding-top: 2%;
}
.card-platform .card-body strong{
  font-weight: 700;
}
.card-platform .card-body .hgroup{
  display: block;
  position: relative;
  margin-bottom: 30px;
  padding: 0 0;
  position: relative;
}
.card-platform .card-body .hgroup:before{
  content: '';
  position: absolute;
  top: 5px;
  left: -50px;
  width: 17px;
  height:95%;
  background-image: url(../img/thumb/platform/line.svg);
  background-position: top left;
  background-size: auto;
  background-repeat: repeat-y;
}
.card-platform .blue{color: var(--primary-color);}
.card-platform h3{
  font-size: var(--f-48);
  font-weight: 900;
}
.card-platform h4{
  font-size: var(--f-36);
  font-weight: 900;
}
.card-platform .card-photo .img{position: relative;}
.card-platform .card-photo .img:before{
  content: '';
  position: absolute; 
  
}
.card-platform .card-photo .img img{position: relative; z-index: 10;}
.card-platform.ev-charger .card-photo .img-1{
  width: 93%; 
}
.card-platform.ev-charger .card-photo .img-2{
  position: absolute;
  bottom:-20px;
  right:18%;
  width: 32%;
  z-index: 10; 
}
 
.card-platform.ev-charger .card-photo .img-3{
  position: absolute;
  bottom: 2%;
  right: -2%;
  width: 27%;  
  z-index: 100;
}

.card-platform.ev-charger .card-photo .img-1:before{ 
  box-shadow: 20px -10px 100px rgba(0, 0, 0, 0.4);
  bottom: 5%;
  top: 5%;
  left: 10%;
  right: 10%;
}
.card-platform.ev-charger .card-photo .img-2:before,
.card-platform.ev-charger .card-photo .img-3:before{ 
  box-shadow: 20px 30px 100px rgba(0, 0, 0, 0.15);
  top: 5%;
  left: 8%;
  right: 10%;
  bottom: 5%;
  transform: rotate(-5deg);
}
.card-platform.ev-charger .card-photo .img-3:before{
  transform: rotate(5deg);
  left: 14%;
  right: 18%;
}
.card-platform.ev-charger .card-body{
  max-width: 600px;
}
.card-platform.live-stream{
  flex-direction: row-reverse;
}
.card-platform.live-stream .card-body{
  max-width:529px;
}

.card-platform.live-stream .card-photo{
  display: flex;
  gap: 50px;
  padding-left:0;
}

.card-platform.live-stream .card-photo .img:before{ 
  box-shadow: 0px 10px 40px rgb(0 0 0 / 20%);
  top: 3%;
  left: 8%;
  right: 5%;
  bottom: 2%;
  border-radius: 16px;
}
.card-platform.live-stream .card-photo .img-1,
.card-platform.live-stream .card-photo .img-2{
  width: 35%; 
  margin-bottom: auto;
}
.card-platform.live-stream .card-photo .img-1{
  margin-top: -9%;
}
.card-platform.home-service{
  margin-top: -6%;
}
.card-platform.home-service .card-photo{
  display: flex;
  margin: 0 auto;
  position: relative;
  left: 7%;
  margin-top: -5%;
}
.card-platform.home-service .card-photo .img { 
  margin-bottom: auto;
  
}
.card-platform.home-service .card-photo .img-1 {
  width: 38%; 
  margin: 0  auto;
}
.card-platform.home-service .card-photo .img-2 {
  width: 33%; 
  z-index: 100;
  position: absolute;
  top: -17%;
  left: 11%;
}

.card-platform.home-service .card-photo .img:before{ 
  box-shadow: 0px 10px 40px rgb(0 0 0 / 20%);
  top:5%;
  left: 8.5%;
  right: 10%;
  bottom: 5%;
  border-radius: 16px;
 
}
.card-platform.home-service .card-photo .img-1:before{
  transform: rotate( 8deg);
  left: 14.5%;
  right: 16%;
  box-shadow: 10px 10px 40px rgb(0 0 0 / 20%);
}
.card-platform.home-service .card-photo .img-2:before{ transform: rotate(-5.5deg);}
.card-platform.home-service .card-body{
  
  margin-left: 0;
}
.card-platform.home-service .card-body p{
  max-width: 600px;
}
@media (max-width:1550px) {
  .card-platform .card-body {
    margin-right: 0;
  }
  .card-platform .card-body .hgroup:before{
    left: -40px;
    width: 15px;
    background-size: 100%;
  }

  .card-platform.live-stream .card-photo{
    justify-content: center;
    gap: 2.4vw;
  }
  .card-platform.live-stream .card-body{
    margin-right: auto;
  }
  .card-platform.live-stream .card-photo .img-1, 
  .card-platform.live-stream .card-photo .img-2{
    width: 38%;
  }

  .card-platform.home-service .card-photo .img-1{width: 42%;}
  .card-platform.home-service .card-photo .img-2{width:38%; left: 5%;}
}

@media (max-width:1440px) {
  .card-platform .card-body {
    padding-left:70px;
  }
  .card-platform.home-service{margin-top:0;}
  .card-platform.home-service .card-photo .img-1{width: 44%;}
  .card-platform.home-service .card-photo .img-2{width:40%; left: 5%;}
}

@media (max-width:1280px) {
  .card-platform .card-body {
    padding-left:100px;
  }
}

@media (max-width:1024px) {
  .section-platform .container{
    gap: 20vw;
  }
  .card-platform .card-body {
    padding-top: 0;
  }

  .card-platform.live-stream .card-body{ 
    padding-left:60px;
  }
}

@media (max-width:991.98px) {
  .card-platform .card-photo{
    padding-left:0 ; 
    max-width: 45%;
  }

  .card-platform .card-body{
    padding-left: 60px;
    font-size: 14px;
  }
  .card-platform h3{
    font-size: 26px;
  }
  .card-platform h4{
    font-size: 18px;
  }
  .card-platform .card-body .hgroup{
    margin-bottom:15px;
  }
  .card-platform .card-body .hgroup:before {
    left: -25px;
    width: 10px; 
    top: 2px;
  }

  .card-platform.live-stream .card-body{
    padding-left: 0;
  }
  .card-platform.live-stream .card-body {
    max-width: 340px;
  }
  .card-platform.live-stream .card-photo .img-1, 
  .card-platform.live-stream .card-photo .img-2 {
    width: 47%;
  }

  .card-platform.home-service{margin-top:-5%;}
  .card-platform.home-service .card-photo .img-2 {
    width: 48%;
    left: -8%;
    margin-bottom: auto;
  }
  .card-platform.home-service .card-photo .img-1 {
    width: 50%;
    right: -4%;
    position: relative;
    margin-bottom: auto;
  }
}

@media (max-width:576px) {
  .card-platform{
    flex-direction: column;
  }
  .card-platform .card-photo{
    width: 80%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  .card-platform.ev-charger .card-photo .img-1{
    filter: drop-shadow(20px 30px 40px rgba(0, 0, 0, 0.4));
  }
  .card-platform.ev-charger .card-photo .img-2{
    bottom: -1%;
    width: 33%;
    right: 22%;
  }
  .card-platform.ev-charger .card-photo .img-3{
    width: 29%;
  }
  .card-platform .card-body{
    font-size: 15px;
  }
  .card-platform .card-body .hgroup:before {
    left: -24px;
    width: 8px;
    top: 0;
  } 
  .card-platform h3{
    font-size: 22px;
  }
  .card-platform h4 {
    font-size: 16px;
  }

  .card-platform.live-stream{
    flex-direction: column;
  }
  .card-platform.ev-charger .card-body,
  .card-platform.live-stream .card-body,
  .card-platform.home-service .card-body{
    max-width: 100%;
    width: 100%;
    padding-left: 30px;
    padding-top: 40px;
  }

  .card-platform.home-service{
    margin-top: 7%;
  }
  .card-platform.home-service .card-body{padding-top: 30px;}
  .card-platform.home-service .card-photo{left: 9%;}
}

/*==================================================
  Footer
==================================================*/ 

.footer-primary{
  background-color: #2A2A2A;
  color: #C0C0C0;
  position: relative;
  z-index: 200;
  
  font-size: 14px;
}
.footer-primary h6,
.footer-primary h5{
  color: #fff;
}
.footer-primary h6{
  font-size: var(--f-16);
  margin-bottom:12px;
}
.footer-primary h5{
  font-size: var(--f-18);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.footer-primary h3{
  font-size: var(--f-28);
  text-transform: uppercase; 
  font-weight: 700;
  color: #fff; 
}

.footer-primary .container{
  display: flex;
  position: relative;
  padding-top: 45px;
  padding-bottom: 45px;
}
.footer-primary .logo-texture{
  position: absolute;
  right: 90px;
  bottom: -50px;
  opacity: 0.8;
  pointer-events: none;
  z-index: 300;
}

.footer-infos{
  display: block;
   width: 305px;
   color: #E8E8E8;
   font-size: 12px;
   flex-shrink: 0;
}
.footer-infos h3{
  margin-bottom: 10px;
}
.pc .footer a:hover{color: #fff;}

.footer-infos .btn.btn-line{
  height: 48px;
  line-height: 46px;
  width: 166px;
  padding: 0;
  font-size: var(--f-16);
  margin-top: 30px;
  border-radius: 8px;
}
.footer-infos .btn.btn-line .icons{
  width: 26px;
  height: 26px;
}
.footer-infos .tel{
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.followus{
  display: flex;
  gap: 10px;
  margin-left:20px;
}
.followus .icons{
  width: 24px;
  height: 24px;
  opacity:0.6;
}
.followus .icon-line{background-image: url(../img/icons/icon-line-2.svg);}
.followus .icon-facebook{background-image: url(../img/icons/icon-facebook.svg);}
.followus .icon-instagram{background-image: url(../img/icons/icon-instagram.svg);}
.pc .followus .icons:hover{opacity: 1;}

.followus.md{
  padding:10px 0 25px;
  gap:12px;
  margin: 0;
}
.followus.md .icons{
  width: 36px;
  height: 36px;
  opacity:1;
}
.followus.md .icon-line{background-image: url(../img/icons/icon-line-color.svg);}
.followus.md .icon-facebook{background-image: url(../img/icons/icon-facebook-color.svg);}
.followus.md .icon-instagram{background-image: url(../img/icons/icon-instagram-color.svg);}
.footer-links{
  display: flex;    
  width: 100%;
  max-width:700px;
  padding: 0 60px 0 40px;
  margin: 0 auto;
  justify-content: space-between;
  position: relative; 
}
.footer-links .cols{
  width:auto;
}
.footer-links .nav{
  flex-direction: column;
}
.footer-links .nav li a{
  display: block;
  padding: 5px 0;
}
.footer-secondary{
  background-color: #2A2A2A; 
  position: relative;
  z-index: 100;
  border-top: 1px solid #1B1B1B;
  
}
.footer-secondary .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #B6B6B6;
  font-size: 12px;
}
.footer-secondary p{
  margin: 0;
  padding: 15px 0;
}
.footer-secondary .gramick{
  color: #fff;
  text-transform: uppercase;
  margin-left: 10px;
}

.totop{
  position: absolute;
  bottom:0px;
  right: 40px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color:#555555;
  display: flex;
  cursor: pointer;
  transition: all 0.35s;
}
.totop .icons{
  width: 24px;
  height: 24px;
  margin: auto;
  background-image: url(../img/icons/icon-arrow-up.svg);
}
.pc .totop:hover{
  background-color: #7D7D7D;
}

@media (max-width:1440px) {
  .footer-links{
    padding-left: 0;
  }
}


@media (max-width:1280px) {
  .totop{
    right: 40px;
    bottom: 30px;
  }

  .footer-primary h3{
    font-size: 24px;
  }
}

@media (max-width:1199px) {
  .footer-infos{
    width:280px;
  } 
  .footer-infos .btn.btn-line{
    height: 42px;
    line-height: 40px;
    width: 150px; 
    margin-top: 30px; 
    font-size: 14px;
  }

  .footer-infos .btn.btn-line .icons {
    width: 22px;
    height: 22px;
  }

  .footer-links{
    padding-right: 40px;
  }
  
  .footer-primary h3{
    font-size: 20px;
  }
  .footer-infos .tel{
    font-size: 18px;
  }
}

@media (max-width:1100px) {
  .footer-primary .container{
    flex-wrap: wrap;
  }
  .footer-infos{
    width: 40%;
  }
  .footer-links{
    width: 60%;
    padding: 0;
  }

  .totop{
    right: 40px;
    bottom: -30px;
  }
}

@media (max-width:800px) {
  .footer-primary .container{
    flex-direction: column;
  }
  .footer-infos{
    width: 100%;
  }
  .footer-links{
    width: 100%;
    padding: 40px 0 0 ;
    margin-top: 40px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .totop{
    width: 48px;
    height: 48px;
  }
}
@media (max-width:576px) {
  .footer-primary{
    font-size: 13px;
  }
  .footer-primary h3{
    font-size: 16px;
  }
  .footer-infos .tel{
    font-size: 14px;
    margin-bottom: 0;
  }
  .footer-links{ 
    padding-top:25px;
    margin-top:25px;
  }
  .footer-links .nav li a{
    padding: 2px 0;
  }

  .footer-secondary{
    padding: 10px 0;
  }
  .footer-secondary .container{
    font-size: 11px; 
    flex-direction: column;
  }
  .footer-secondary .gramick{
    margin-left: 5px;
  }
  .footer-infos .btn.btn-line{
    margin-top: 25px;
  }
  .footer-secondary p{ padding-bottom: 0;}
  .footer-secondary .social-media{padding: 10px 0;}
  .footer-secondary .social-media p{padding: 0;}

  .totop{display: none;}
}

.footer-subscribe{
  position: relative;
  flex-shrink: 0;
  width:500px;
}
.footer-subscribe:before{
  content: '';
  position: absolute;
  top: -45px;
  left:0;
  bottom: -100px;
  right: -100vw;
  background-color: #222222;
}
.footer-subscribe .inner{
  padding: 0 0 0 50px;
  position: relative;
  z-index: 100;
}
.footer-subscribe h3{
  text-transform: unset;
  font-weight: 600;
  margin-bottom: 5px;
}

.form-group.subscribe{
  margin: 25px 0 0;
}
.form-group.subscribe .group{
  position: relative;
}
.form-group.subscribe .form-control{
  --input-h: 48px;
  padding-left:50px;
}
.form-group.subscribe .icons{
  background-image: url(../img/icons/icon-email.svg);
  --icon-size: 24px;
  position: absolute;
  top: 0;
  left: 15px;
  bottom: 0;
  height: 100%;
}

.form-group.subscribe .btn{
  --btn-h:48px;
  border-radius: 5px;
  font-size: 14px;
  margin-top: 15px;
}
@media (max-width:1680px) { 
  .footer-subscribe{width: 400px;}
}
@media (max-width:1366px) {
  .footer-subscribe .inner{
    padding-left: 40px;
  }
}
@media (max-width:1199px) {
  .footer-subscribe {
    width:340px;
  }
}
@media (max-width:1100px) {

  .footer-subscribe{
    width:100%;
    margin-top: 20px; 
  }
  .footer-subscribe:before {
    bottom: 0;
    right: 0;
    top: 0;
    border-radius: 8px;
  }

  .footer-subscribe .inner {
    padding:25px;
  }

  .form-group.subscribe{
    display: flex;
    gap:15px; 
    margin-bottom:5px;
  }
  .form-group.subscribe .group{
    width: 100%;
  }
  .form-group.subscribe .btn{
    margin-top: 0;
    flex-shrink: 0;
  }
}

@media (max-width:575px) {
  .footer-subscribe{
    margin-top: 25px;
  }
  .footer-subscribe h3{
    margin-bottom: 5px;
  }

  .form-group.subscribe{
    flex-direction: column;
    gap:10px
  }
   
}


/*==================================================
  Landingpage Corporate
==================================================*/ 

:root{
  --gray-5:#F3F3F3;
  --gray-10:#E8E8E8;
  --gray-20:#D1D1D1;
  --gray-40:#A3A3A3;
  --gray-60:#757575;
  --gray-80:#474747;
  --gray-100:#1A1A1A;

  --blue-5:#EBE5FF;
  --blue-10:#D1C5FF;
  --blue-20:#B6A4FF;
  --blue-40:#9C83FF;
  --blue-60:#8262FF;
  --blue-80:#6842FF;
  --blue-100:#3400FF;
 
  --darkblue-10:#FAFAFF;
  --darkblue-20:#F1EEFF;
  --darkblue-30:#E7E2FF;
  --darkblue-40:#DDD7FF;
  --darkblue-50:#D3CBFF;
  --darkblue-60:#ABA1DD;
  --darkblue-70:#867CBB;
  --darkblue-80:#655B99;
  --darkblue-90:#483F77;
  --darkblue-100:#141027;

  --green:#ADFF45;

  --f-42:42px;
  --f-20:20px;
}
 
@media (max-width:1366px) {
  :root{
    --f-42:40px;
    --f-20:18px;
  }
}
@media (max-width:1024px) {
  :root{
    --f-42:34px; 
    --f-20:var(--f-16);
  }
}
@media (max-width:767px) {
  :root{
    --f-42:30px;  
  }
}
@media (max-width:670px) {
  :root{
    --f-42:26px;  
  }
}
.green{color: var(--green) !important;}
.icons{
  --icon-size:16px;
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
  object-position: center;
  flex-shrink: 0;
  top:-1px;
}
.icons.w-24{--icon-size:24px;}
.icons.w-22{--icon-size:22px;}

.textrow{
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.lgp-service{
  --padding-top:100px;
  --padding-bottom:100px;
  padding: var(--padding-top) 0 var(--padding-bottom);
}

.lgp-service-banner{ 
  --border-radius: 120px;
  padding: 0 !important;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);

  background-image: url(../img/thumb/lgp-service/banner-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size:cover;

  position: relative;
  overflow: hidden; 
}

.lgp-banner-caption{
  position: relative;
  text-align: center;
  padding-top: calc(var(--header-height) + 40px);

  width: 100%;
  max-width: 950px;
  margin: 0 auto;
  text-align: center; 
  color: var(--gray-10);

  display: flex;
  flex-direction: column; 
}
.lgp-banner-caption p.font-poppins{
  color: #fff;
}
.lgp-banner-caption p small{
  font-size: 18px;
  letter-spacing:2px;
}
.lgp-banner-caption h1{
  font-size: 80px;
  font-weight: var(--f-700);
  line-height: 1.3;
  margin: 10px 0 30px;
  position: relative;  
  color: #fff;
}
.lgp-banner-caption h1 .group{
  position: relative;
}
.lgp-banner-caption h1 .textrow{
  line-height: 1.1;
  z-index: 10;
}
.lgp-banner-caption h1 .textrow .d-block{position: relative; z-index: 10;}
.lgp-banner-caption h1 .group + .textrow{
  margin-top: -5px;
}
.lgp-banner-caption h1 img{
  width: 100%;
}
.lgp-banner-caption h1 .line{
  position: relative;
  display: block;
  height: 1px;
  top:-40px;
}
.lgp-banner-caption .line img{
  width:71%;
  vertical-align: top;
  position: relative;
  left:0;
}
.lgp-banner-caption h1 .megaphone{
  display: inline-block;
  position: relative;  
  top:35px;
  left:25px;
  transform: rotate(-16deg);
  width: 1px;
  height: 10px;
  vertical-align: top;
}
.lgp-banner-caption h1 .megaphone img{
  position: absolute;
  right: 0;
  bottom:0;
  width: 105px;
}
 
.lgp-banner-caption h4{
  font-size: 24px;
  font-weight: var(--f-400);
  line-height: 1.5;
  padding: 0;
}
.lgp-banner-caption .textgroup .mouse{
  position: relative;
  width: 1px;
  height: 10px;
  display: inline;
}
.lgp-banner-caption .textgroup .mouse img{ 
  position: absolute;
  top:12px;
  left:10px;
  width: 145px; 
 
  filter: drop-shadow(0px 3.65714px 7.31429px rgba(0, 0, 0, 0.12));
}
 
.card-banner{ 
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 5px solid rgba(255, 255, 255, 0.1) ;
  border-left: 0;
  border-bottom: 0;
  backdrop-filter: blur(5px);
  text-align: left;
  padding:40px 15px 40px 40px;
  width: 375px;  
  z-index: -1;
  position: relative;
}
 
.card-banner h5{
  font-size: 24px;
  font-weight: var(--f-600);
  position: relative;
  display: flex;
  gap:10px;
  margin-bottom: 18px;
}
.card-banner h5:before{
  content: '';
  position:relative;
  width: 24px;
  height: 24px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/lgp-service/icon-star.svg);
}
.card-banner p{
  margin: 0;
  font-size: 16px;
  color: #DEE2E6;
  font-weight: 200;
}
  
.card-banner-01{
  position: absolute;
  bottom:-10%;
  left: -390px;
}
.card-banner-01 .card-banner{
  transform: rotate(15deg);
}
.card-banner-02{
  position: absolute;
  bottom: -35%;
  right: -390px;
  left: auto;
}
.card-banner-02 .card-banner{
  transform: rotate(-15deg);
}

.card-tablet{
  position: relative;
  transition: all 0.35s;
  top: 0;
}
.card-tablet img{
  width: 100%;
}

.swiper-coverflow{ 
  margin: 0 auto;
}
 
.swiper-coverflow .swiper-slide{ 
  opacity: 0;
  transition: all 0.2s;
}
.swiper-coverflow .swiper-slide-active,
.swiper-coverflow .swiper-slide-prev,
.swiper-coverflow .swiper-slide-next{opacity: 1;}

.lgp-service-banner .swiper-coverflow{
  width: 1190px; 
  
}
.lgp-service-banner .swiper-slide{width: 590px;}

.lgp-service-banner .swiper-overflow{
  height:460px;
  margin-top:40px; 
  overflow: hidden;
}

.lgp-service-banner .swiper-slide > div{top: 30px;}
.lgp-service-banner .swiper-slide-active > div{top: 0;}

.page-scroll-down{
  position: fixed;
  left: 0;
  right: 0;
  bottom:30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100; 
  transition: all 0.35s;
}
.page-scroll-down a{
  display: block;
  transition: all 0.65s;
  opacity: 1;
}
.page-scroll-down .icons{
  --icon-size:64px; 
}
.scrolling .page-scroll-down{
  bottom:0;
}
.scrolling .page-scroll-down a{
  opacity: 0;
  pointer-events: none;
}

@media (max-width:1720px) {
  .lgp-banner-caption h1{font-size: 70px;}
  .lgp-banner-caption h1 .megaphone img {width: 95px;}
  .lgp-banner-caption h4{font-size: 22px;}
  .lgp-banner-caption .line{top:-38px}
  .lgp-banner-caption .line img {width: 66%;}
  .lgp-banner-caption .textgroup .mouse img {  
    width: 144px;
  }

  .card-banner h5{font-size: 22px;} 
  .card-banner-01{left: -350px;}
  .card-banner-02{right: -350px;}
}

@media (max-width:1550px) {
  .card-banner-01{bottom:0%;left: -280px;}
  .card-banner-02{bottom: -25%;right: -290px;}
  .card-banner{width: 340px; padding-right: 20px;}
  
  .card-banner p{font-size: 14px;}
  .lgp-banner-caption h1{font-size:60px;}
  .lgp-banner-caption h4{font-size: 20px; max-width: 90%; margin: 0 auto;}
  .lgp-banner-caption p small{font-size: 16px;}
  .lgp-banner-caption h1{
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
  }
  .lgp-banner-caption h1 .megaphone img {width: 88px;}
  .lgp-banner-caption .line img {
    width: 53%;
    margin-top: 5px;
  }
  .lgp-banner-caption h1 .textrow + .textrow{
    margin-top: -15px;
  }
}
 
@media (max-width:1400px) {
  .lgp-service{
    --padding-top:80px;
    --padding-bottom:80px;
  }
  .lgp-banner-caption h1{
    font-size: 50px;
    display: flex;
    flex-direction: column; 
    gap:10px
  }
  .lgp-banner-caption h1 .textrow + .textrow{
    margin-top:0;
  }

  .lgp-banner-caption h1 .megaphone img{width: 78px;}
  .lgp-banner-caption h1 .line{top: -15px; top: -25px;}
  .lgp-banner-caption .line img {width: 62%;}
  .lgp-service-banner .swiper-slide {width: 500px;}
  .lgp-service-banner .swiper-overflow {height: 385px;margin-top:30px;}
  .lgp-banner-caption h4{font-size:18px;}
  .lgp-banner-caption .textgroup .mouse img {   
    width: 114px; 
  }
  .card-banner{padding:30px 15px 30px 30px; width: 280px;}
  .card-banner h5{font-size:16px;} 
  .card-banner h5:before{width: 20px; height: 20px;}
  .card-banner p{font-size: 12px;}
  .card-banner-01{left: -210px;}
  .card-banner-02{right: -210px;}
}

@media (max-width:1199px) {
  .lgp-service-banner .swiper-coverflow{width: 100%;}
  .lgp-service-banner .swiper-slide {width:440px;}
  .page-scroll-down .icons{
    --icon-size:54px; 
  }
  .page-scroll-down{
    bottom: 20px;
  }
}

@media (max-width:991.98px) {
  .lgp-service-banner{--border-radius:80px} 
  .lgp-banner-caption .textgroup .mouse{display: none;}
 
  .card-banner-01,
  .card-banner-02{
    left: auto;
    right: auto; 
    bottom:auto;
    position: relative;
    height: 100%;
    padding-top: 35px;
    padding-bottom: 10px;
  }
  .card-banner{
    padding:25px 15px 25px 25px; 
    transform:none !important;
    opacity: 1 !important;
    height: 100%;
    position: relative;
    width: 100%;
  }
  .card-banner h5{font-size:14px; margin-bottom:8px;} 
  .card-banner h5:before{width: 15px; height: 15px;}

  .lgp-banner-caption h4{font-size: 17px; margin-top: 15px; max-width: 100%;}


  .lgp-banner-caption h1{margin:25px auto;}
  .lgp-banner-caption h1 .megaphone{left:10px;}
}

@media (max-width:845px) {
  .lgp-service-banner .swiper-overflow{height:280px;}
  .lgp-service-banner .swiper-slide{width: 350px;}

  .lgp-banner-caption p small{font-size: 14px;}
  .lgp-banner-caption h1{font-size:40px; max-width: 578px;}
  
  .lgp-banner-caption h1 .megaphone img { width: 60px; }

  .lgp-service{
    --padding-top:60px;
    --padding-bottom:60px;
  }
}

@media (max-width:690px){
  .lgp-service{
    --padding-top:30px;
    --padding-bottom:30px;
  }
  .lgp-banner-caption h4 br{display: none;}
}

@media (max-width:575px) {
  .lgp-service-banner{--border-radius:50px} 
  .lgp-service-banner .swiper-overflow{height:240px;} 
  .lgp-service-banner .swiper-slide{width: 240px;} 

  .lgp-banner-caption h1{font-size:26px; max-width: 578px; margin-top: 10px; margin-bottom: 25px;}
  .lgp-banner-caption h4{font-size: 15px; padding: 0;}
  .card-banner-01, .card-banner-02{padding-top: 5px;}
  .card-banner{border-radius: 18px;}
  .lgp-banner-caption p small{font-size: 12px;}
  .lgp-banner-caption .icons.w-22{--icon-size:18px}

  .lgp-banner-caption h1 .line{top:-25px;}
  
  .lgp-banner-caption h1 .megaphone{top:10px;}
  .lgp-banner-caption h1 .megaphone img{ width:45px;}
  .lgp-banner-caption .line img {width: 58%;}
  .lgp-banner-caption h4{margin-top: 0; margin-bottom: 25px;}
  .lgp-service-banner .swiper-overflow{height:180px;} 
}

@media (max-width:440px) {
  .lgp-service-banner .swiper-overflow{height:180px;} 
  .lgp-service-banner .swiper-slide{width: 210px;} 
  .lgp-banner-caption h1 .line{top:-15px;}
  .lgp-banner-caption .line img {width: 58%;}

}
 
/*==================================================
  Best Design
==================================================*/ 

.section-header{
  display: flex;
  flex-direction: column;
  text-align: center;
  max-width: 1065px;
  width: 100%;
  margin: 0 auto;
  padding: 25px 0;
  gap:15px;
}
.section-header p{
  margin: 0 auto;
  width: 100%;
  max-width:var(--max-width);
  color: var(--color);
  font-size: var(--f-20);
  --color:#757575;
  --max-width:100%;
}
.section-header h6{
  font-size: var(--f-16);
  font-family: 'Inter';
  font-weight: var(--f-500);
  color: var(--color);
  --color:var(--primary-color);
}
.section-header h2{
  font-size:var(--f-42);
  font-weight: 700;
  --color:var(--secondary-color);
  color: var(--color);
  padding-bottom:5px;
  /* font-family: 'Inter','Kanit','Poppins', sans-serif; */
}
.section-header h2 .textrow{vertical-align: bottom;}
.highlight{color: var(--blue-100) !important;}

.section-header .buttons{
  padding: 20px 0 0;
  gap:35px;
  display: flex;
  justify-content: center;
}
.section-header .buttons .btn{
  padding: 0 10px;
  min-width: 158px;
}

.card-infos{
    --card-border-radius:24px;
    --card-bg:#fff;
    --card-text-color:var(--darkblue-100);
    --card-text-info-color:var(--gray-60);
    --card-padding-x:40px;
    --card-padding-y:40px;
    --card-font-size:18px;

    position: relative;
    top: 0;
    border-radius: var(--card-border-radius);
    background-color: var(--card-bg);
    padding: var(--card-padding-y) var(--card-padding-x);
    font-size: var(--card-font-size);
    color: var(--card-text-info-color);
    height: 100%;
    transition: all 0.45s;
}
.pc .card-infos:hover{
  box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.1);
  
}
.card-infos.card-light{
  --card-bg:var(--darkblue-10);
}
.card-infos.card-blue,
.card-infos.card-black{
  --card-text-color:#fff;
  --card-text-info-color:#fff;
}
.card-infos.card-blue{ --card-bg:var(--blue-100);}
.card-infos.card-black{--card-bg:var(--gray-100);}

.card-infos h2,
.card-infos h3,
.card-infos h4{
  font-weight: var(--f-700);
  font-family:var(--font-notosans);
  color: var(--card-text-color);
}
.card-infos p{
  margin: 0;
}
.card-infos h2 .textrow{vertical-align: bottom;}
/* .pc .card-infos:hover .icons{
  animation-name: trin;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
} */
/* .card-infos.best-web{opacity: 0; transform: translate(0px, 80px);} */
.card-infos.best-web h4{font-size: var(--f-24);}
.card-infos.best-web h2{font-size: var(--f-48); margin-bottom: 5px;}
.card-infos.best-web .icons{--icon-size:40px; margin-bottom: 10px;}
.card-lists.best-web{
  --bs-gutter-x:30px;
  --bs-gutter-y:30px;
  padding-top: 40px;
}

@keyframes trin {

  from {
      transform:rotate3d(0, 0, 1, 0deg);
  }
  20%, 32%, 44%, 56%, 68% {
      transform: rotate3d(0, 0, 1, 0deg);
  }
  23%, 35%, 47%, 59%, 71% {
      transform: rotate3d(0,0,1,15deg);
  }
  26%, 38%, 50%, 62%, 74% {
      transform: rotate3d(0,0,1,0deg);
  }
  29%, 41%, 53%, 65%, 77% {
      transform: rotate3d(0,0,1,-15deg);
  }
  80% {
      transform:rotate3d(0, 0, 1, 0deg);
  }

}
@media (max-width:1440px) {
  .card-infos{
    --card-font-size: 16px;
  }
}

@media (max-width:1280px) {
  .card-infos{ 
    --card-padding-x:30px;
    --card-padding-y:30px;
  }
}
@media (max-width:1199px) {
  .card-lists.best-web {
    --bs-gutter-x:20px;
    --bs-gutter-y:20px;
  }

  .card-infos.best-web h2{font-size: 32px;}
}

@media (max-width:991.98px) {
  .section-header .buttons{
    gap:20px
  }
  .card-lists.best-web {
    padding-top: 30px;
  }
  .card-infos.best-web{
    --card-font-size: 15px;
    --card-padding-x:25px;
    --card-padding-y:25px;
  }
  .section-header h2{padding-bottom: 0;}
}
@media (max-width:670px) {
  .section-header .buttons{
    gap:10px;
    padding-top: 10px;
  }
  .section-header .buttons .btn{
    min-width: 120px;
    --btn-h:45px;
  }
}

@media (max-width:440px) {

}

/*==================================================
  client logo
==================================================*/ 
.lgp-service-client{
  padding-top: 20px !important;
}
 
.marquee {
  overflow: hidden;
  box-sizing: border-box;
  position: relative; 
  display: block; 
  width: 100%;
   
  overflow: hidden;  
  padding:  0;
  margin-bottom:20px;

}
.marquee > div{
  display: flex;
  align-items: center;
  height: 100%; 
}
.marquee div.d-flex{
  gap:30px
}
 
.marquee-client .item{
  width: 265px;
  height: 104px;
}
.marquee-client .item img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;

  transition: all 0.35s;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.marquee-client .item:hover img{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
}
.marquee-client.client-2{padding-left: 145px;}

.marquee-client-boxed{
  position: relative;
  margin-top: 20px;
}
.marquee-client-boxed:before,
.marquee-client-boxed:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 300px;
  background: linear-gradient(90deg, #fff 23.67%, rgba(255, 255, 255, 0) 100%);
  z-index: 100;
  pointer-events: none;
}
.marquee-client-boxed:before{
  left: 0px;
}
.marquee-client-boxed:after{
  right:0px;
  transform: rotate(-180deg);
}

@media (max-width:1280px) {
  .marquee-client{margin: 0 0 10px;}
  .marquee-client .item{
    width: 220px;
    height: 86px;
  }
  .marquee div.d-flex {
    gap: 10px;
  }

  .marquee-client.client-2{padding-left: 115px;}

  .marquee-client-boxed:before, .marquee-client-boxed:after{
    width: 100px;
  }
}

@media (max-width:690px) {
  .marquee-client .item{
    width: 120px;
    height: 47px;
  }
  .marquee-client-boxed{
    margin-top: 0;
  }
  .marquee-client-boxed:before, .marquee-client-boxed:after{
    width: 50px;
  }
}

/*==================================================
  Work Flow
==================================================*/ 
.lgp-service-work{
  background-color: var(--gray-100);
  padding: 0 !important;
  margin-top: -100px;
}
.lgp-service-work:before{
  content: '';
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #fff; 
  border-radius: 0 0 45% 45%/0 0 100% 100%;
  transform: scaleX(1.3);
}
.lgp-service-work:after{
  content: '';
  position: absolute;
  bottom: -7%;
  left: 0;
  width: 100%;
  height: 200px;
  background-color: #fff; 
  border-radius: 0 0 55% 45%/0 0 100% 100%;
  transform: scaleX(1.3) rotate(-180deg);
}
.lgp-service-work .container{
  position: static;
}
.work-flow-boxed{
  display: flex; 
  --col-left:705px;
  flex-wrap: wrap;
  margin: 70px 0;
}
.work-flow-boxed .col-left{
  width: var(--col-left);
  padding: 160px 0 220px;
}
.work-flow-boxed .col-right{
  width: calc(100% - var(--col-left));
  padding-left:0;
}

.work-flow-boxed .section-header{
  text-align: left;
}
.work-flow-boxed .section-header h6{--color:#B6A4FF }
.work-flow-boxed .section-header h2{--color:#ffffff }

.card-work-flow{
  --card-height:114px;
  --card-bg:#272729; 
  --card-text-color:var(--gray-40); 
  --card-title-color:#fff;
  --card-icon-bg:transparent; 
  --card-hover-bg:#3400FF;
  --card-hover-text-color:var(--blue-5);
  --card-hover-icon-bg:#EBE5FF;
  
  display: flex;
  padding:20px 25px;
  color:#fff;
  background-color: var(--card-bg);
  border-radius: 24px; 
  cursor: pointer;
  width: 100%;
  min-height:var(--card-height)
}
.card-work-flow .icongroup{
  --icon-size:64px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 16px; 
  background-color: var(--card-icon-bg);
  flex-shrink: 0;
  position: relative;
  top: 6px;
  display: flex;
}
.card-work-flow .icongroup .icons{
  --icon-size:40px; 
  margin: auto;
  
}
.card-work-flow .icongroup img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.card-work-flow .icongroup img:nth-child(2){
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.card-work-flow .textgroup{
  padding-left: 20px;
  padding-right: 20px;
}
.card-work-flow h3{
  color: var(--card-title-color);
  font-size: var(--f-24);
  font-weight: var(--f-700);
  margin-bottom:3px;
}
.card-work-flow p{
  color: var(--card-text-color);
  margin: 0;
  font-size:16px;
  line-height: 1.4;
}
.card-work-flow,
.card-work-flow .icongroup,
.card-work-flow .icongroup img,
.card-work-flow h3,
.card-work-flow p{
  transition: all 0.25s;
}
.pc .card-work-flow:hover,
.card-work-flow.active{background-color: var(--card-hover-bg);}
.pc .card-work-flow:hover p,
.card-work-flow.active p{color: var(--card-hover-text-color);}
.pc .card-work-flow:hover .icongroup,
.card-work-flow.active .icongroup{background-color: var(--card-hover-icon-bg);}
.pc .card-work-flow:hover .icongroup img:nth-child(1),
.card-work-flow.active .icongroup img:nth-child(1){opacity: 0;}
.pc .card-work-flow:hover .icongroup img:nth-child(2),
.card-work-flow.active .icongroup img:nth-child(2){opacity: 1;}
.nav-work-tabs{
  --bs-nav-tabs-border-width:0;
  flex-direction: column;
  gap:15px;
  padding-top:10px;
  max-width: 660px;
}

.tab-work-content{
  color: #fff; 
  position: absolute; 
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
}
 
.tab-work-content img{ 
  width: 100%; 
  margin-top: auto;
}
.tab-work-content > div{
  display: flex !important;
  opacity: 0;
  transition: all 0.65s; 
  position: relative;
  left:60px;
  height: 100%;
}
.tab-work-content > div.active{
  opacity: 1;
  left: 0;
}
.tab-work-content > div:not(:first-child){
  position: absolute;
  top: 0; 
  width: 100%; 
  bottom: 0;
}
@media (max-width:1700px) {
  .lgp-service-work:before{transform: scaleX(1.5);}
  .lgp-service-work:after{transform: scaleX(1.5) rotate(-180deg);}

  .work-flow-boxed{
    --col-left:630px;
  }
  .work-flow-boxed .section-header h2{font-size: 37px;}
  .nav-work-tabs{max-width: 600px;}
  .tab-work-content{width: 55%;}
  .card-work-flow{
    padding: 20px;
    --card-height: 100px;
  }
  .card-work-flow h3{font-size: 21px;}
  .card-work-flow p{font-size: 15px;}
  .card-work-flow .icongroup {--icon-size:58px; border-radius: 13px; top:2px;}
  .card-work-flow .icongroup .icons {--icon-size: 34px;}
  
}

@media (max-width:1440px) {
  .work-flow-boxed .col-left{
    width: 40%;
  }
  .work-flow-boxed .col-right{
    width: 60%;
  }
  .work-flow-boxed .section-header h2{font-size: 32px;}
  .card-work-flow h3{font-size:19px;}
  .card-work-flow p{font-size: 14px;}
}

@media (max-width:1280px) {
  .lgp-service-work:before{transform: scaleX(1.8);}
  .lgp-service-work:after{transform: scaleX(1.8) rotate(-180deg);}
}

@media (min-width:1025px) and (max-width:1280px)  {
  .work-flow-boxed .col-left{
    width:47%;
  }
}
@media (max-width:1024px) {
  .lgp-service-work{margin-top: -20px;}
  .lgp-service-work:before{transform: scaleX(1.5);top: -5%; height: 100px;}
  .lgp-service-work:after{transform: scaleX(1.5) rotate(-180deg);height: 100px; bottom:-5px;}
  .work-flow-boxed .section-header{max-width: 550px; margin-left: 0;}
  .work-flow-boxed{
    flex-direction: column;
  }
  .work-flow-boxed .col-left,
  .work-flow-boxed .col-right{
    width: 100%;
  }
  .work-flow-boxed .col-left{
    padding: 100px 0 ;
    padding-bottom: 0;
  }
  .nav-work-tabs{
    flex-direction: unset;
    max-width: 100%;
  }
  .nav-work-tabs li{
    width: calc(50% - 10px) 
  }
  .nav-work-tabs .card-work-flow{height: 100%;}

  .tab-work-content{
    position: relative;
    width: 100%;
    max-width: 800px;
    right: -50px;
    margin-top: -10vw;
    margin-left: auto;
  }
}

@media (max-width:855px) {

  .nav-work-tabs-boxed{
    margin:15px -50px 0; 
    position: relative;
    overflow: hidden;
  }
  .nav-work-tabs{
    flex-wrap: unset;
    overflow-y: auto;
    padding: 0 50px 10px;
    margin-bottom: -10px;
    -webkit-overflow-scrolling: touch;
  }
  .nav-work-tabs li{
    width:380px;
    flex-shrink: 0;
  }
  .card-work-flow{border-radius: 20px;}
  .card-work-flow .icongroup {--icon-size:46px; border-radius:10px; top:2px;}
  .card-work-flow .icongroup .icons {--icon-size:26px;}
  .card-work-flow .textgroup{padding-left: 15px;}
  .card-work-flow h3{font-size:17px;}
  .card-work-flow p{font-size: 13px;}
}

@media (max-width:670px) {
  .lgp-service-work:before{transform: scaleX(2);}
  .lgp-service-work:after{transform: scaleX(2) rotate(-180deg);height: 80px; }
  .work-flow-boxed .section-header h2{font-size: 26px;}
}
@media (max-width:575px) {
  .lgp-service-work {margin-top: -50px;}
  .lgp-service-work:before{height: 70px;}
  .work-flow-boxed .col-left {
    padding: 60px 0;
  }
  .card-work-flow{
    flex-direction: column;
  }
  .card-work-flow .textgroup{
    padding: 20px 0;
  }
  .nav-work-tabs li{
    width:260px;
  }
  .tab-work-content{margin-top: -22vw; right: -25px;}
}

/*==================================================
 Best Design
==================================================*/ 
.lgp-service-best-design{
  padding-top: 0;
  padding-bottom: 0;
  
}
.lgp-service-best-design .background{
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F3F8 62.63%);
  bottom:230px;
}
.lgp-service-best-design .section-header{
  padding-top: 0;
  margin-top: -40px;
}

.card-infos.best-design{
  --card-border-radius:32px;
  box-shadow: 0px 0px 40px 5px rgba(119, 119, 119, 0.06);
  overflow: hidden;
}
 
.card-infos.best-design.screen{
  --card-padding-x:70px;
  --card-padding-y:70px;
  padding-bottom: 40px;
}
.card-infos.best-design .apple-screen{
  position: relative;
  overflow: hidden;
}
.card-infos.best-design .apple-screen img{
  position: relative;
  z-index: 100;
  pointer-events: none;
}
.card-infos.best-design .apple-screen .display{
  position: absolute;
  top:7px;
  right:-9px;
  left:5px;
  background-color: #ccc;
  height:74.2%;
  overflow: hidden;
  overflow-y: auto; 
  z-index: 1;
}
.card-infos.best-design.screen .label{
  position: absolute;
  z-index: 100;
}
.card-infos.best-design.screen .label-1{
  top: 35%;
  left: 32px;
  width:11%;
  box-shadow: 0px 0px 31px rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}
.card-infos.best-design.screen .label-2{
  right: 33px;
  top: 66%;
}
.card-infos.best-design.screen .label-2 .btn{
  border-radius: 12px;
}
.card-infos.best-design.screen .label-2 .btn .icons{
  --icon-size:24px;
  background-image: url(../img/icons/lgp-service/icon-arrow.svg);
  left: 0;
}

.pc .card-infos.best-design.screen .label-2 .btn:hover .icons{left: 10px;} 

.lgp-service-best-design .card-lists{
  --bs-gutter-x:33px;
  --bs-gutter-y:33px;
  padding-top:25px;
}

.card-infos .zoom{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #fbfbfb;
  position: absolute;
  top:30px;
  right:30px;
  display: flex;
  transition: all 0.25s;
}
.card-infos .zoom .icons{
  --icon-size:24px;
  margin: auto;
  background-image: url(../img/icons/lgp-service/icon-fullscreen.svg);
}
.pc .card-infos:hover .zoom{
  background-color: #F8F8F8;
}
 
@media (max-width:1550px) {
  .card-infos.best-design.screen{
    --card-padding-x:55px;
    --card-padding-y:55px;
  }
  .card-infos.best-design.screen .label-1{left: 23px;}
  .card-infos.best-design.screen .label-2{top:66%; right: 23px;}
}

@media (max-width:1280px) {
  .card-infos.best-design.screen{
    --card-padding-x:40px;
    --card-padding-y:40px; 
  }
  .card-infos.best-design.screen .label-1{left: 15px;}
  .card-infos.best-design.screen .label-2 .btn{
    --btn-h:50px;
    padding: 0 15px;
  }
}
@media (max-width:1280px) {
  .card-infos.best-design.screen{
    --card-padding-x:40px;
    --card-padding-y:40px;
  }
  .card-infos.best-design.screen .label-1{left: 15px;}
  .card-infos.best-design.screen .label-2 .btn{
    --btn-h:50px;
    padding: 0 15px;
  }
  .card-infos.best-design .apple-screen .display{
    left: 0; 
  }

  .lgp-service-best-design .card-lists{
    --bs-gutter-x:25px;
    --bs-gutter-y:25px;
  }
}

@media (max-width:1024px) {
 
  .card-infos.best-design.screen{
    --card-padding-x:25px;
    --card-padding-y:25px;
    --card-border-radius:25px;
  }
  .card-infos.best-design .apple-screen .display{ 
    right: 0;
  }
  .card-infos.best-design.screen .label-1{left:8px; top: 32%;}
  .card-infos.best-design.screen .label-2{
    right: 11px;
    top:59%;
  }
  .card-infos.best-design.screen .label-2 .btn {
    --btn-h:42px;
    padding: 0 15px;
  }
}


@media (max-width:991.98px) {
  .lgp-service-best-design .card-lists{
    --bs-gutter-x:20px;
    --bs-gutter-y:20px;
    padding-top: 10px;
  }
}

@media (max-width:767px) {
  .lgp-service-best-design{
    margin-top:-80px;
  }
  .card-infos.best-design.screen{
    --card-padding-x:35px;
    --card-padding-y:35px; 
  
  }
}
@media (max-width:575px) {
  .card-infos.best-design.screen{
    --card-padding-x:25px;
    --card-padding-y:25px; 
  }

  .lgp-service-best-design .background{bottom: 130px;}
}

/*==================================================
 Best Design (2)
==================================================*/ 
.card-infos.best-design.wireframe{
  --card-padding-x:0;
  --card-padding-y:0;
}
.card-infos.best-design.wireframe .card-photo,
.card-infos.best-design.wireframe .card-photo .photo{
  height:100%;
  width: 100%;
}
.card-infos.best-design.wireframe .card-body{
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 100;
  border-top-right-radius: var(--card-border-radius);
  padding: 20px 30px;
  background: linear-gradient(95.12deg, rgba(236, 236, 236, 0.2) 0%, rgba(134, 134, 134, 0.2) 100%, rgba(15, 15, 15, 0.2) 100%);
backdrop-filter: blur(15px);
max-width: 430px;
}
.pc .card-infos.best-design.wireframe:hover .photo{transform: scale(1.1);}

.card-infos.best-design{
  --card-text-info-color:#8D93A5; 
  --card-font-size:16px;
  --card-title-font-size:24px;
}
.card-infos.best-design h3{
  font-size:var( --card-title-font-size);
  font-family: 'Poppins','Noto Sans Thai';
  margin-bottom:2px;
} 

.card-infos.best-design.wireframe{
  --card-text-info-color:var(--gray-80); 
}

@media (max-width:1280px) {
  .card-infos.best-design{
    --card-title-font-size:22px;
  }
}
@media (max-width:1199px) {
  .card-infos.best-design.wireframe .card-body{max-width: 80%;}
}
@media (max-width:1024px) {
  .card-infos.best-design{
    --card-title-font-size:18px;
    --card-font-size:14px;
  }
  .card-infos.best-design.wireframe .card-body{
    padding: 20px;
    max-width:calc(100% - 35px);
  }
}

@media (max-width:767px) {
  /* .card-infos.best-design.wireframe{
    height: 65vw;
  } */
}
@media (max-width:575px) {
  .card-infos.best-design{
    --card-title-font-size:18px; 
  }
  .card-infos.best-design.wireframe{
    height: 75vw;
  }
}

/*==================================================
 Best Design (3)
==================================================*/ 

.card-infos.best-design{
  --card-padding-x:30px;
  --card-padding-y:30px;
  --icongroup-size:56px;
  --icon-size:24px;
}
.card-infos.best-design .icongroup{
  background-color:var(--blue-5);
  border-radius: 12px;
  height:var(--icongroup-size); 
  width:var(--icongroup-size);
  display: flex; 
  margin-bottom: 17px;
}
.card-infos.best-design .icons{
 margin: auto;
 --icon-size:24px;
}

.card-infos.best-design p{line-height: 1.4;}
.card-infos.best-design .card-photo{
 margin-top: auto;
 padding-top: 20px;
}
.card-infos.best-design .ourteam{
  padding: 10px 10px 0;
  margin: 0;
  list-style-type: none;
  position: relative;
  display: flex;
  gap:5%;
}

.card-infos.best-design .ourteam li{
  width: 30%;
  display: flex; 
  position: relative;
}
.card-infos.best-design .ourteam li:nth-child(2){width:40%;}
.card-infos.best-design .ourteam img{
  width: 100%;
  margin-top: auto;
}
.card-infos.best-design.normal {
  flex-direction: column;
  display: flex;
}
.card-infos.best-design.normal .card-photo{
  overflow: visible;
}
.card-infos.best-design.normal h3{
  padding-bottom: 5px;
}
.card-infos.best-design.our-team:before{
  content: '';
  position: absolute;
  top: 10%;
  left: calc(50% - 265px/2 + 133px);
  top: calc(50% - 265px/2 - 70.5px); 
  width: 260px;
  height: 265px;
  border-radius: 50%;

  background: #0C25FF;
  opacity: 0.1;
 filter: blur(85px);

}

.card-infos.best-design.our-team img.name{
  position: absolute;
  z-index: 10; 
  filter: drop-shadow(0px 1.82857px 5.48571px rgba(0, 0, 0, 0.2));
}
.card-infos.best-design.our-team img.dev{
  width: 75%;
  left: -10%;
  top:50%;
}
.card-infos.best-design.our-team img.design{
  width:90%;
  top: 75%;
  left: -15%;
}
.card-infos.best-design.our-team img.pm{
  width: 80%;
  left:35%;
  top: 65%;
}
 
@media (max-width:1280px) {
  .card-infos.best-design {
    --card-padding-x:25px;
    --card-padding-y:25px;
  }
}
@media (max-width:991.98px) {
  .card-infos.best-design {
    --card-padding-x:20px;
    --card-padding-y:20px;
  }
}

/*==================================================
 Best Design (4)
==================================================*/ 
.card-infos.best-design .card-photo{
  width: 100%;
  /* max-width: 293px; */
}
.card-infos.best-design .pagespeed{
  position: relative;
  width: 234px;
  margin: 0 auto;
  display: flex;
}
.card-infos.best-design .pagespeed .group{
  margin: auto;
  text-align: center;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.card-infos.best-design .pagespeed h5{
  font-family: 'Poppins';
  font-size: 64px;
  font-weight: var(--f-700);
  color: #0A0A0A;
  line-height: 1.1;
}
.card-infos.best-design .pagespeed p{
  margin: 0;
  font-size: 14px;
  color: #A0AEC0;
}
.card-infos.best-design .based-on-likes{
  width: 100%;
  background-color: #3E3E3E;
  border-radius: 20px;
  color: #fff;
  position: relative;
  font-family: 'Poppins';
  font-size: 12px;
  text-align: center;
  padding: 20px 20px 18px;
  margin-top: -40px;
}
.card-infos.best-design .based-on-likes p{
  margin: 0;
}
.card-infos.best-design .based-on-likes h5{
  font-family: 'Poppins';
  font-size: 28px;
  font-weight: var(--f-700);
  color: #fff;
  line-height: 1.1;
}

.card-infos.best-design .based-on-likes p.top{
  position: absolute;
  top:15px;
}
.card-infos.best-design .based-on-likes p.top.right{
  right: 20px;
}

@media (max-width:1280px) {
  .card-infos.best-design .pagespeed{max-width: 200px;}
  .card-infos.best-design .pagespeed h5{font-size: 60px;}
  .card-infos.best-design .based-on-likes{margin-top: -30px;}
}
@media (max-width:1024px) {
  .card-infos.best-design .pagespeed{max-width: 180px;}
  .card-infos.best-design .pagespeed p{font-size: 12px;}
  .card-infos.best-design .pagespeed h5{font-size: 50px;}
  .card-infos.best-design .based-on-likes{padding:15px 15px 12px;}
  .card-infos.best-design .based-on-likes h5{font-size: 24px;}
  .card-infos.best-design.normal .card-body{flex: unset;}
  .card-infos.best-design.normal .card-photo{margin-bottom: auto;}
  
}
@media (max-width:575px) {
  .card-infos.best-design .pagespeed{max-width:220px;}
  .card-infos.best-design .based-on-likes{padding:20px 20px 18px;}
}

/*==================================================
Website structure
==================================================*/ 
.website-structure{
  --box-width:802px;
  --space-top:300px;
  --space-bottom:0;
  --macbook-width:82.5%;
  --mobile-width:32.7%;
  position: relative;
  width:var(--box-width);
  margin-left: auto;
  margin-right: auto;
  margin-top: var(--space-top);
  margin-bottom: var(--space-bottom);

  display: flex; 
}

.website-structure .macbook{
  margin-left: auto;
  width: var(--macbook-width);
  position: relative;
  z-index: 10;
}

.website-structure .mobile{
  position: absolute;
  left: 4%;
  bottom: 12%;
  width: var(--mobile-width);
  z-index: 9;
}
.website-structure .mobile img{
  position: relative;
  z-index: 10;
}
.website-structure .mobile .circle{
  --circle-size:250px;
  position: absolute;
  top: -13%;
  left: -14%;
  width:var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  background: linear-gradient(156.16deg, rgba(153, 168, 224, 1) -100%, rgba(255, 255, 255, 0) 45.42%);
  z-index: 1;
}
 

.website-infos{
  padding: 0;
  margin: 0;
  list-style-type: none; 
}

.website-infos li{
  position: absolute;
  z-index: 100;
}
.website-infos .card{
  --card-bg:#E8ECFB;
  --card-border-radius:16px;
  --card-font-size:14px;
  --card-title-font-size:20px;
  --card-padding-y:25px;
  --card-padding-x:30px;
  --card-point-size:32px;
  border-radius:var(--card-border-radius);
  background-color: var(--card-bg);
  color: var(--gray-60);
  font-size: var(--card-font-size);
  padding: var(--card-padding-y) var(--card-padding-x);
}
.website-infos .card h3{
  font-size: var(--card-title-font-size);
  color:#000000;
  margin-bottom: 8px;
  font-weight: var(--f-700);
}
.website-infos .card p{
  margin: 0;
  line-height: 1.3;
}
.website-infos .card-point{
  position: absolute;
  top: 0;
  bottom: 0; 
  display: flex;
  align-items: center;
  --card-point-size:32px;
}
.website-infos .card-point .point{
  position: relative;
  border-radius: 50%;
  width: var(--card-point-size);
  height: var(--card-point-size);
  background-color: var(--blue-10);
  z-index: 10;
}
.website-infos .card-point .point:before{
  content: '';
  position: absolute;
  top:4px;
  left:4px;
  right:4px;
  bottom:4px;
  border-radius: 50%;
  background-color:var(--blue-20);
}
.website-infos .card-point .line{
  width:114px;
  height: 1px;
  position: absolute;
  top: 50%;
  left: 20px;
  background: linear-gradient(-90deg, rgba(104, 66, 255, 0) 0%, rgba(104, 66, 255, 1) 100%);
  z-index: 1;
} 
.website-infos .card-point.right{
  right:calc((var(--card-point-size) / 2) * -1);
}
.website-infos .card-point.left{
  left:calc((var(--card-point-size) / 2) * -1);
}
.website-infos .card-point.left .line{
  left: auto;
  right: 20px;
  background: linear-gradient(90deg, rgba(104, 66, 255, 0) 0%, rgba(104, 66, 255, 1) 100%);

}
.website-infos .card.purple{
  --card-bg:var(--blue-5);
}
.website-infos .c-01{
  --card-width:328px;
  --card-space:35px;
  left:calc((var(--card-width) + var(--card-space)) * -1);
  top: -40px;
}
.website-infos .card{
  width: var(--card-width);
}

.website-infos .c-02{
  --card-width:310px;
  --card-space:0px;
  left:calc((var(--card-width) + var(--card-space)) * -1);
  top:40%;
}
 
.website-infos .c-02 .card-point{bottom: 30%;}

.website-infos .c-03{
  --card-width:324px;
  --card-space:200px;
  right:10%;
  top:calc((var(--card-width) - var(--card-space)) * -1);
}
.website-infos .c-03 .card-point .line{
  height: 103px;
  width: 80px;
  background: none;
  background-image: url(../img/thumb/lgp-service/line-2.svg);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: auto;
}

.website-infos .c-04{
  --card-width:300px;
  --card-space:0px;
  right:calc((var(--card-width) / var(--card-space)) * -1);
  top:14%;
}
.website-infos .c-04 .card{
  width: var(--card-width);
} 

.website-infos .c-05{
  --card-width:305px;
  --card-space:40px;
  right:calc((var(--card-width) + var(--card-space)) * -1);
  top:56%;
}
 
@media (max-width:1600px) {
  .website-structure{
    --box-width:660px;
    --space-top: 240px; 
  }
  .website-infos .card{ 
    --card-title-font-size:18px;
    --card-padding-y: 20px;
    --card-padding-x: 20px;
  }
  .website-infos .card-point{--card-point-size:28px;}
  .website-infos .card-point .line{width: 90px;}
  .website-infos .c-01{--card-width:280px;}
  .website-infos .c-02{--card-width:260px;}
  .website-infos .c-03{--card-width:280px; --card-space:160px;} 
  .website-infos .c-03 .card-point .line{width: 40px;}
  .website-infos .c-04{--card-width:260px;}
  .website-infos .c-05{--card-width:260px;}
  .website-structure .mobile .circle {--circle-size: 200px;top: -10%;left: -11%;}
}

@media (max-width:1366px) {
  .website-infos .c-01{--card-space:25px}
  .website-infos .c-05{--card-space:25px}
}

@media (max-width:1280px) {
  .website-structure{
    --box-width:580px;
  }
  .website-infos .card-point{--card-point-size:22px;}
  .website-infos .card-point .point:before { 
    top:3px;
    left:3px;
    right:3px;
    bottom:3px;
  }
  .website-infos .card{ 
    --card-font-size: 13px;
    --card-title-font-size:16px;
  }
  .website-infos .card-point .line{width:70px;}
  .website-infos .c-01{--card-width:220px;--card-space:10px;}
  .website-infos .c-02{--card-width:220px;}
  .website-infos .c-03{--card-width:220px; --card-space:100px;} 
  .website-infos .c-03 .card-point .line{width: 40px;}
  .website-infos .c-04{--card-width:220px;}
  .website-infos .c-05{--card-width:220px;}

  .website-structure .mobile .circle {--circle-size:170px;}
}

@media (max-width:1100px) {
  .website-structure{ 
    --space-top: 200px; 
  }
  .website-infos .card-point .line{display:none;}
  .website-infos li{
    position: relative;
    top:auto !important;
    left: auto!important;
    right: auto!important;
    bottom: auto!important;
  }
  .website-structure{
    flex-direction: column;
    width: 100%;
  }
  .website-structure .model-group{
    position: relative; 
    margin:0 auto auto;
    width: var(--box-width);
  }
  .website-infos{
    display: flex;
    flex-wrap: wrap;
    gap:20px
  }
  .website-infos li{
    width: calc(33.33% - 15px) !important;
    min-height: 150px;
  }
  .website-infos .card{
    width: 100% !important;
    height: 100%;
  }
  .website-infos .card-point{
    display: none;
  }
  .website-infos .c-01 .card,
  .website-infos .c-03 .card,
  .website-infos .c-05 .card{
    --card-bg:#E8ECFB;
  }
  .website-infos .c-04 .card{
    --card-bg: #E8ECFB;
  }
  .website-infos li .card.animated{
    animation-name: fadeIn !important;
    animation-delay: 0s !important;
  } 
}

@media (max-width:991.98px) {
  .website-infos li{
    width: calc(50% - 15px) !important;
    min-height: 0;
  }
  
}
@media (max-width:767px) {
  .website-infos{gap:10px}
  .website-infos li{width: calc(50% - 6px) !important;}
  .website-structure {
    --box-width: 100%; 
  }
  .website-structure .model-group{
    margin-bottom: 20px;
  }
}
@media (max-width:575px) {
  .website-structure{ 
    --space-top:25vw; 
  }
  .website-infos li{width:100% !important;}

  .website-infos .c-01 .card,
  .website-infos .c-03 .card,
  .website-infos .c-05 .card{
    --card-bg:var(--blue-5);
  }
  .website-infos .c-02 .card,
  .website-infos .c-04 .card{
    --card-bg: #E8ECFB;
  }
  .website-structure .mobile .circle {--circle-size:120px;}
}
/*==================================================
Modal
==================================================*/ 

.modal{
  --bs-modal-border-width:0;
  --bs-modal-border-radius:48px;
  --bs-modal-padding:40px
}

.modal .hgroup{
  text-align: center;
  width: 100%;
  margin: 0 auto;
  --max-width:100%;
  max-width: var(--max-width);
}
.modal .hgroup h3{
  font-size:26px;
  font-weight: var(--f-700);
  color: #0A0A0A;
  margin-bottom:14px;
}
.modal .hgroup p{
  font-size: var(--f-18);
  color: #8D93A5;
}

.modal .btn-close{
  position: absolute;
  top: 30px;
  right: 30px;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231C274C'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  background-color:#FBFBFB;
  border-radius: 50%;
  padding: 0;
  opacity: 1;
  --btn-h:56px;
  width: var(--btn-h);
  height:var(--btn-h);
  z-index: 1000;
  transition: all 0.25s;
}
.pc .modal .btn-close:hover{
  background-color:var(--blue-5);
}

.modal .btn-close.bg-none{
  --btn-h: 42px;
  background-color: transparent;
}
.modal-flow-chart{
  --bs-modal-width:1630px;
  padding-left: 10px;
  padding-right: 10px;
}
.modal-flow-chart .modal-body{
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 10px;
}
.modal-flow-chart .modal-body img{
  border-radius: 0 0 var(--bs-modal-border-radius) var(--bs-modal-border-radius);
}
 
@media (max-width:991.98px) {
  .modal{ 
    --bs-modal-border-radius:38px;
  }
  .modal .hgroup p{
    font-size: var(--f-16);
  }
  .modal .btn-close{
    --btn-h:48px;
    top: 20px;
    right: 20px;
  }
}
@media (max-width:670px) {
  .modal{ 
    --bs-modal-border-radius:24px;
    --bs-modal-padding:25px
  }
  .modal .hgroup p{
    font-size: var(--f-16);
  }
  .modal .btn-close{
    --btn-h:42px;
    top: 15px;
    right: 15px;
  }
  .modal .hgroup h3{
    font-size: 20px;
    margin-bottom: 10px;
  }
}
@media (max-width:440px) {
  .modal .btn-close{
    --btn-h:32px;
    top: 10px;
    right: 10px;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%231C274C'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/0.78em auto no-repeat;
    background-color: #FBFBFB;
  }
}

/*==================================================
Website Strategic
==================================================*/ 

.website-strategic{
  border-radius: 24px;
  background-color: #1a1a1a;
  
  position: relative;
  color: #fff;
  padding:var(--card-padding-y) var(--card-padding-x) ;
  margin-top: var( --card-margin-top);
  overflow: hidden;

  --card-padding-x:70px;
  --card-padding-y:60px;
  --card-margin-top:140px;
  --card-title-font-size:42px;
  --card-font-size:18px;

}
.website-strategic:before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.7;
  width: 100%;
  height: 100%;
  background-position: left bottom;
  background-size: auto;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/lgp-service/strategic-bg-1.svg);
}
.website-strategic:after{
  content: '';
  position: absolute;
  left: 0;
  top: 0; 
  width: 100%;
  height: 100%;
  background-position: right bottom;
  background-size: auto;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/lgp-service/strategic-bg-2.svg);
}
.website-strategic .card-body{ 
  max-width: 705px;
  position: relative;
  z-index: 100;
}
.website-strategic h2{
  font-size: var(--card-title-font-size);
  font-weight: var(--f-700);
  color: #fff;
  margin-bottom: 25px;
  line-height: 1.24;
}
.website-strategic h2 span{
  color: var(--blue-20);
}

.ul-lists{
  margin: 0;
  padding: 0;
  gap:18px;
  display: flex;
  flex-direction: column;
  list-style-type: none; 
}
.ul-lists li{
  display: flex;
  gap:15px;
  position: relative;
}
.ul-lists li:before{ 
  --icon-size:24px;
  content: '';
  width:var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image:url(../img/icons/lgp-service/icon-checks.svg);
}

.website-strategic .ul-lists{
  font-size: var(--card-font-size);
}
.website-strategic .buttons{
  text-align: left;
  display: flex;
  gap:20px;
  padding: 50px 0 0;
}
.website-strategic .btn-outline{
  --bs-btn-color:#fff;
  --bs-btn-border-color:rgba(255,255,255,0.1);
  --bs-btn-bg: #313131 ;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #313131;
  --bs-btn-hover-border-color:rgba(255,255,255,0.3);
}
.website-strategic .btn{
  padding: 0 30px;
}
.website-strategic .btn .icons{
  --icon-size:24px;
  left: 0;
}
.website-strategic .btn:hover .icons{
  left: 5px;
}

.website-strategic .card-photo{
  overflow: visible;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;

}
.website-strategic .card-photo > div{
  position:absolute;
  width: 504px;
}
.website-strategic .photo-1{
  right: -60px;
  top: -80px;
}
.website-strategic .photo-2{
  right: 135px;
  top:35px;
}

@media (max-width:1600px) {
  .website-strategic{
    --card-title-font-size:38px;
  }
  .website-strategic:after{
    background-size:700px;
  }

  .website-strategic .card-photo > div{width: 440px;}
  .website-strategic .photo-2 {right: 104px;}
  .website-strategic .card-body {max-width: 685px;}
  .ul-lists{gap:14px}
  .website-strategic .buttons{gap:15px; padding-top: 40px;}
  .website-strategic .btn {padding: 0 25px;}
}

@media (max-width:1550px) {
  .website-strategic{
    --card-padding-x:55px; 
  }
}
@media (max-width:1366px) {
  .website-strategic{
    --card-font-size:16px;
    --card-title-font-size:33px;
  }
  .website-strategic:after{background-size:650px;}
  .website-strategic .card-body {max-width: 55%;}
  .website-strategic h2 br{display: none;}
  .website-strategic .photo-1{top: -60px;}
}

@media (max-width:1280px) {
  .website-strategic .card-photo > div{width:360px;}
  .website-strategic .photo-1{top: -30px;}
  .website-strategic .photo-2{top: 50px; right: 70px;}
}

@media (max-width:1199px) {
  .website-strategic .ul-lists{padding-bottom: 25px;}
}
@media (max-width:1024px) {
  .website-strategic{
    --card-margin-top:100px;
  }
  .website-strategic:after{background-size:550px;}
}
@media (max-width:991.98px) {
  .website-strategic { 
    --card-title-font-size:28px;
    --card-padding-y: 45px;
    --card-padding-x: 45px;
  }
  .website-strategic .card-body{
    max-width: 100%;
  }

  .website-strategic .card-photo{
    position: relative;
    height: 180px;
    margin-top: -70px;
    pointer-events: none;
  }
  .website-strategic .card-photo > div{width: 200px;}
  .website-strategic .photo-1{top: 0;}
  .website-strategic .photo-2 {top: 20px; right: 14px;}
  .website-strategic:after{background-size:400px;}
}

@media (max-width:767px) {
  .ul-lists {gap: 10px;}
  .ul-lists li{gap:10px}
  .ul-lists li:before {--icon-size: 20px; margin-top: 5px;}
}
@media (max-width:670px) {
  .website-strategic { 
    --card-title-font-size:22px;
    --card-margin-top:60px;
    --card-padding-y: 35px;
    --card-padding-x: 35px;
  }
  .website-strategic h2{line-height: 1.4;}
  .website-strategic .card-photo{margin-top: 20px;}
}
@media (max-width:444px) {
  .website-strategic { 
    --card-font-size:15px;
    --card-margin-top:60px;
    --card-padding-y:25px;
    --card-padding-x:25px;
  }
  .website-strategic h2{
    padding-top: 10px;
  }

  .website-strategic .btn{
    padding: 0 15px;
    border-radius: 10px;
    --btn-h:45px;
  }
  .website-strategic .btn .icons {--icon-size: 18px;}
  .website-strategic .buttons{gap:10px; padding-top:30px;}
  .website-strategic:after{background-size:300px;}
}

/*==================================================
 SEO
==================================================*/ 

.lgp-service-seo{
  --padding-top:150px;
  --col-left:750px;
  --col-right:630px;
}
.lgp-service-seo .background{
  background-image: url(../img/thumb/lgp-service/world.svg);
  background-size: auto;
  background-position: top right;
}

.lgp-service-seo .container{
  display: flex;
  justify-content: space-between;
  position:relative;
  z-index: 100;
}
.lgp-service-seo .col-left{
  width: var(--col-left);
  position: relative; 
  z-index: 10;
}
.lgp-service-seo .col-right{
  width: var(--col-right);
  display: flex;
  align-items: center;
  position: relative; 
  z-index: 10;
}
.lgp-service-seo .col-left > div.row{
  --bs-gutter-x:1.75rem;
  --bs-gutter-y:1.75rem;
}
.lgp-service-seo .col-left > div.row div.row{
  --bs-gutter-x:20px;
  --bs-gutter-y:20px;
}
.lgp-service-seo .col-left > div > div{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap:18px
}

.card-infos.seo{
  box-shadow: 0px 12px 76px rgba(6, 28, 61, 0.12);
  width: 100%;
  height: auto;
  transition: all 0.25s;
  position: relative;
  top: 0;

  --card-font-size:16px;
  --card-title-font-size:20px;
  --card-padding-x:30px;
  --card-padding-y:30px; 
} 
.pc .card-infos.seo:hover{
 top:-5px
}
.card-infos.seo.card-blue{
  --card-text-info-color:var(--blue-10);
} 
.card-infos.seo.card-black{
  --card-text-info-color:var(--gray-40);
}
.card-infos.seo h4{
  font-size: var(--card-title-font-size);
  margin-bottom:10px;
}
.card-infos.seo .icons{
  --icon-size:40px;
  margin-bottom: 15px;
}

.article.seo{
  margin:auto 0;
  --title-font-size:var(--f-42);
  --font-size:24px;
}
.article.seo h2,
.article.seo h3{
  font-size: var(--title-font-size);
  font-weight: var(--f-700);
  margin-bottom: 10px;
}

.article.seo h2{ 
  color: var(--blue-100); 
}
.article.seo h3{ 
  color: #000000;
  padding-bottom: 10px;
}
.article.seo p{
  font-size: var(--font-size);
  font-weight: var(--f-500);
  color: var(--gray-80);
  line-height: 1.4;
}

.lgp-service .buttons{
  display: flex;
  gap:30px;
  padding-bottom: 0;
}

.lgp-service .buttons .btn{
  min-width: 158px;
}

@media (max-width:1680px) {
  .lgp-service-seo{ 
    --col-left:50%;
    --col-right:45%;
  }
}
@media (max-width:1550px) {
  .article.seo{ 
    --title-font-size:38px;
    --font-size:22px;
  }
}
@media (max-width:1366px) {
  .lgp-service-seo{
    --padding-top:120px;
  }
  .article.seo{ 
    --title-font-size:34px;
    --font-size:20px;
  }

  .article.seo h3{
    padding-bottom: 5px;
  }
}
@media (max-width:1199px) {
  .lgp-service-seo{ 
    --col-left:100%;
    --col-right:100%;
  }
  .lgp-service-seo .container{
    flex-direction: column-reverse;
  }
  .lgp-service-seo .col-left > div.row {
    --bs-gutter-x:20px;
    --bs-gutter-y:20px;
  }
  .lgp-service-seo .col-left > div.row div.row > div{
    width: 33.33%;
  }
  .card-infos.seo{height: 100%;}

  .lgp-service .buttons{ 
    gap:20px;
    padding-bottom: 60px;
    padding-top: 10px;
  }

  .lgp-service-seo .background{
    background-position: top center;
  }
  
}

@media (max-width:991.98px) {
  .article.seo{ 
    --title-font-size:var(--f-42);
    --font-size:18px;
  }

  .card-infos.seo{
    --card-font-size: 14px;
    --card-title-font-size: 18px;
    --card-padding-x: 20px;
    --card-padding-y: 25px;
  }
}
@media (max-width:670px) {
  .lgp-service-seo{
    --padding-top:55px;
  }
  .lgp-service-seo .col-left > div.row div.row > div{
    width:100%;
  }
 
  .card-infos.seo{
    --card-border-radius: 20px;
    --card-title-font-size: 17px;
  }
  .card-infos.seo .icons {
    --icon-size:35px;
    margin-bottom: 10px;
  }
  .card-infos.seo h4{
    margin-bottom: 5px;
  }
  .article.seo{ 
    --title-font-size:22px;
    --font-size:16px;
  }
  .lgp-service .buttons{ 
    gap:10px;
    padding-bottom:40px;
  }
  .lgp-service .buttons .btn{
    min-width: 120px;
    padding: 0 15px;
    border-radius: 10px;
    --btn-h: 45px;
  }
}

/*==================================================
  Team
==================================================*/ 
.lgp-service-team{
  --padding-top:50px;
}
.lgp-service-team .section-header{
  --title-font-size:var(--f-42);
  --font-size:20px;
}
.lgp-service-team .section-header h2,
.lgp-service-team .section-header h3{
  font-size: var(--title-font-size);
  font-weight: var(--f-700);
}
.lgp-service-team .section-header h3{
  color: var(--darkblue-100);
  line-height: 1;
}
.lgp-service-team .section-header h2{
  color: var(--blue-100);
}

.swiper-card.team .swiper-slide{
  width:16.6667%;
  padding: 15px;
}
.swiper-card.team .card{
  position: relative;
  border-radius: 50%;
  transition: all 0.25s;
  margin: 40px 0;
}
@media (min-width:0) {
  .swiper-card.team .card-body{
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgba(52, 0, 255, 0.8);
    color: #fff;
    transition: all 0.45s;
    border-radius: 50%;
    pointer-events: none;
    transform: scale(1.25);
  }
  
  .swiper-card.team .card:hover{
    filter: drop-shadow(0px 10px 10px rgba(16, 6, 54, 0.3));
  }
  .swiper-card.team .card:hover .card-body{
    opacity: 1;
    transform: scale(1);
    top: 0;
  }

}

.swiper-card.team .card-photo{
  border-radius: 50%;
}
.swiper-card.team .card-photo img{
  width: 100%;
}
.swiper-card.team h3{font-size:var(--title-size); font-weight: var(--f-700); padding-bottom: 3px;}
.swiper-card.team p{font-size: var(--text-size); margin-bottom: 0;}

.swiper-overflow.team{
  --margin-x:40px;
  --padding-x:70px;
  --title-size:20px;
  --text-size:16px;
  padding: 0 var(--padding-x);
  margin:0 var(--margin-x);
  position: relative;
  overflow: hidden;
}
.swiper-button{
   --btn-h:48px;
  width: var(--btn-h);
  height: var(--btn-h);
  background-color: var(--blue-100);
  border-radius: 50%;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.swiper-button.swiper-button-disabled{
  pointer-events: none;
  opacity: 0.3 !important;
}
.swiper-button-prev{left: 0;}
.swiper-button-next{right: 0;}
.swiper-button .icons{
  --icon-size:20px;
  margin: auto;
  background-image: url(../img/icons/lgp-service/icon-arrow-sm.svg);
}
.swiper-button-prev .icons{
  transform: rotate(-180deg);
}
.pc .swiper-button:hover{
  background-color:var(--blue-80);
}

/* @media (min-width:1441px) {
  .swiper-card.team .swiper-slide-next + div + div + div + div + div{
    opacity: 0;
  }
} */
@media (max-width:1550px) {
  .swiper-overflow.team{
    --title-size:18px;
    --text-size: 13px;
  }
}
@media (max-width:1440px) {
  .swiper-overflow.team{
    --margin-x:0;
    --padding-x:50px; 
  }

  .swiper-card.team .swiper-slide{
    padding: 12px;
  }
  .swiper-button {
    --btn-h: 42px;
  }
}
@media (max-width:1199px) {
  .lgp-service-team{
    --padding-top:0;
  }
  .swiper-overflow.team{
    --title-size:16px;
    --text-size: 11px;
  }
  .swiper-card.team .swiper-slide{
    width:20%; 
  }
}
@media (max-width:991.98px) {
  .swiper-overflow.team{
    --padding-x:0;  
  }
  .swiper-overflow.team .swiper-button{
    display:none;
  }
 
  .swiper-card.team .swiper-slide{
    width:20%; 
  }

  .swiper-overflow.team .swiper-pagination{
    justify-content: center;
    bottom: auto;
    position: relative;
    padding: 0px 0 0;
  }

  /* .swiper-card.team .card-body{
    text-align: center;
    padding: 15px 0 0;
  }
  .swiper-card.team .card-body h3{
    font-weight: 600;
    color: var(--blue-100);
  }
  .swiper-card.team .card-body p{
    color: var(--gray-60);
    margin-bottom: 0;
  } */
}

@media (max-width:850px) {
  .swiper-card.team .swiper-slide{
    width:25%; 
    padding-bottom: 10px;
  }
  .swiper-card.team .card-card{
    max-width: 130px;
    margin: 0 auto;
  } 
  .swiper-card.team .card{margin: 25px auto;}
  .lgp-service-team .section-header{
    --title-font-size:var(--f-42);
  }
}
@media (max-width:670px) {
  .swiper-card.team .swiper-slide{
    width:33.33%; 
  }

  
  
}
@media (max-width:575px) {
  .lgp-service-team {
    --padding-top:20px;
  }
}
@media (max-width:480px) {
  .swiper-overflow.team{
    --title-size: 18px;
    --text-size: 12px;
  }
  .swiper-card.team {overflow: visible;}
  .swiper-card.team .swiper-slide{
    width:100%; 
  }

  .swiper-card.team .card{
    max-width:220px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*==================================================
  Website Process
==================================================*/ 

.website-process-boxed{
  --padding:110px;
  --border-radius:70px;
  --margin-top:85px;
  background-color: #FAFAFF;
  position: relative;
  padding: var(--padding);
  border-radius:var(--border-radius) ;
  margin-top: var(--margin-top);
}
.website-process-boxed:before{
  content: '';
  position: absolute;

  background-image: url(../img/thumb/lgp-service/arrow-boxed.png);
  background-position:bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  width: var(--arrow-size);
  height: var(--arrow-size);
  top: calc(var(--arrow-size) * -1);
  right: 15%;
  --arrow-size:100px;
}


.website-process-boxed .section-header{
  text-align: center;
  padding: 0;
  margin-bottom:80px;
}
.website-process-boxed .section-header h2{
  color: var(--darkblue-100);
  display: inline-block;
  position: relative;
  margin: 0 auto;
}

.website-process-boxed .icons.quote{
  --icon-size:97px;

  position: absolute;
  top: -40px;
  left:-125px;
}
.website-process-boxed .row{
  --bs-gutter-x:30px;
  --bs-gutter-y:50px;
}
.card-infos.process{
  --card-padding-x: 0;
  --card-padding-y: 0;
  --card-border-radius:0;
  --card-title-font-size:20px;
  --card-font-size:16px;
  --card-bg:transparent;

  display: flex;
  gap:25px;
  box-shadow:none !important
}

.card-infos.process h3{
  font-size: var(--card-title-font-size);
  color: var(--darkblue-100);
  margin-bottom: 10px;
}
.card-infos.process p{
  line-height: 1.4;
}
.card-infos.process .icons{
  --icon-size:64px;
}

@media (max-width:1700px) {
  .website-process-boxed{
    --padding:90px;
  }
  .website-process-boxed .section-header{
    margin-bottom:60px;
  }
  .card-infos.process{
    gap:20px
  }
  .card-infos.process h3{
    margin-bottom: 5px;
  }
}
 
@media (max-width:1550px) {
  .website-process-boxed{
    --padding:70px;
    --margin-top: 45px;
  }
  .card-infos.process{ 
    --card-title-font-size:18px;
    --card-font-size:15px;  
  }
  .card-infos.process .icons {
    --icon-size:52px;
  }

  .website-process-boxed .icons.quote{
    --icon-size:72px;
    left: -90px;
    top: -30px;
  }

  .website-process-boxed:before{
    --arrow-size:80px;
  }
}

@media (max-width:1280px) {
  .website-process-boxed .row{
    --bs-gutter-x:30px;
    --bs-gutter-y:40px;
  }
  .website-process-boxed .row > div{
    width: 50%;
  }

  .card-infos.process{max-width: 350px;} 

  .website-process-boxed .icons.quote{
    --icon-size:70px; 
  }
}

@media (max-width:1199px) {
  .website-process-boxed .section-header h2{
    font-size: 32px;
  }

  .website-process-boxed .icons.quote{
    --icon-size:55px;
    left: -70px;
    top: -20px;
  }
}
@media (max-width:1024px){
  .website-process-boxed {
    --padding:50px;
    --border-radius:50px;
  }
  .website-process-boxed:before{
    --arrow-size:60px;
  }
  .card-infos.process {
    gap:15px;
    --card-title-font-size: 16px; 
  }
  .website-process-boxed .row {
    --bs-gutter-x: 20px;
    --bs-gutter-y: 30px;
  }
  .card-infos.process .icons {
    --icon-size:48px;
  }

  .website-process-boxed .section-header{
    margin-bottom: 50px;
  }
  .website-process-boxed .section-header h2{
    font-size: 28px;
  }
  .website-process-boxed .icons.quote{
    position: relative;
    left: auto;
    top: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
}
@media (max-width:767px){
  .website-process-boxed {
    --padding:25px;
  }

  
}
@media (max-width:670px){
  .website-process-boxed{
    --border-radius: 30px;
  }
  .website-process-boxed:before{
    --arrow-size:50px;
  }
  .website-process-boxed .row > div{
    width: 100%;
  }
  .card-infos.process {
    gap:20px;
    max-width: 100%;
  }
  .website-process-boxed .section-header h2{
    font-size: 22px;
  }

  .website-process-boxed .section-header{
    margin-bottom: 30px;
  }
  .website-process-boxed .icons.quote {
    --icon-size:45px;
  }
  
}

/*==================================================
  Trend Design
==================================================*/ 

.lgp-service-trend{
  --padding-top:20px;
  background: linear-gradient(180deg, #FFFFFF 11.16%, #F8F8F8 81.09%);
}

.card-news-lists{
  --bs-gutter-x:30px;
  --bs-gutter-y:30px;
  padding-top: 30px;
  padding-bottom:50px;
}

.card-news{
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: 16px;
  box-shadow: 0px 12px 50px -20px rgba(6, 28, 61, 0.1);
  background-color: #fff; 
  color: var(--darkblue-100);
  height: 100%;
  --padding-x:30px;
  --padding-y:12px;
  --title-size:20px;
  --font-size:14px;
  --border-radius:16px;
 
}
.card-news .card-photo{
  background-color: #ccc;
  border-radius: var(--border-radius)  var(--border-radius) 0 0;
  height: 180px;
}
.card-news .photo{
  height: inherit;
}
.card-news .card-body,
.card-news .card-footer{
  padding: var(--padding-y) var(--padding-x);
}
.tags{
  display: flex;
  gap:6px;
  flex-wrap: wrap;
  padding-bottom:5px;
  margin-top: 3px;
}
.tags .tag{
  border-radius: 8px;
  background-color: var(--tag-bg);
  color: var(--tag-color);
  font-size: var(--font-size);
  padding: 2px 8px;
  font-weight: var(--f-500);
  --tag-bg:var(--blue-5);
  --tag-color:var(--blue-60);
}
.tags .tag.app{  
  --tag-bg:#FCE9E9;
  --tag-color:#EC7C7C;
}
.card-news h3{
  font-size: var(--title-size);
  font-weight: var(--f-700);
}
.card-news .card-footer{
  border-top: 1px solid var(--gray-10);
  display: flex;
  justify-content:space-between;
  font-size: var(--font-size); 
  color: var(--blue-100);
  align-items: center;
}
.card-news .card-footer .icons{
  --icon-size:28px;
  left:5px;
}
.card-news .card-footer .icons path{
  stroke: var(--blue-100) !important;
}
.pc .card-news:hover .photo{transform: scale(1.13);}
.pc .card-news:hover .card-footer .icons{left:10px;}

@media (max-width:1280px){
  .card-news-lists{
    --bs-gutter-x:25px;
    --bs-gutter-y:25px;
    padding-top: 20px;
    padding-bottom:50px;
  }
  .card-news{
    --padding-x:20px; 
    --title-size:18px;
    --font-size:13px; 
  }
}

@media (max-width:991.98px){
  .card-news .tags .tag{
    font-size: 11px;
    border-radius: 5px;
  }
  .card-news{
    --padding-x:15px; 
    --title-size:16px;
    --font-size:12px; 
  }
  .card-news .card-footer{
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .card-news .card-footer .icons {
    --icon-size:24px;
  }
}

@media (max-width:767px){
  .lgp-service-trend .card-news-lists{
    --bs-gutter-x:15px;
    --bs-gutter-y:15px;
  }
  .card-news{--title-size:15px;}
}
@media (max-width:670px){
  .lgp-service-trend .card-news-lists{
    --bs-gutter-x:20px;
    --bs-gutter-y:30px;
    padding-top: 0;
  }
  .card-news-lists > div{width: 50%;}
  .card-news-lists > div:first-child{width: 100%;}
}
@media (max-width:520px){
  .card-news-lists > div{width: 100%;}

  .card-news{  --title-size:16px;}
  .tags .tag{
    font-size: 11px;
    border-radius: 5px;
  }
}

/*==================================================
  Contact
==================================================*/ 
 
.lgp-service-contact .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.lgp-service-contact {
  --col-left:536px;
  --col-right:748px;
  
  --title-size:72px;
  --text-size:20px;
}
.lgp-service-contact .container{
  display:flex;
  justify-content: space-between;
  align-items: center;
}
.lgp-service-contact .col-left{
  width: var(--col-left);
  display: flex;
}
.lgp-service-contact .col-right{
  width: var(--col-right);
  color:var(--gray-20);
  font-size: var(--text-size);
}
.lgp-service-contact h2{
  color: inherit;
  font-size: var(--title-size);
  font-weight: var(--f-700);
  color: #fff;
  margin-bottom: 15px;
}
.lgp-service-contact p{
  margin-bottom: 15px;
}

.contact-boxed{
  background-color: #fff;
  border-radius: 16px;
  padding: var(--padding); 
  margin: auto 0;
  --padding:30px;
}

.contact-boxed .title{
  text-align: center;
  margin-bottom: 25px;
  font-size: 24px;
  color: #061C3D;
  font-weight: var(--f-700);
}
.contact-boxed .form-body{
  --bs-gutter-x: 15px;
  --bs-gutter-y: 15px;
}
.contact-boxed textarea{height: 85px;}

.contact-boxed .btn{
  
  border-radius: 7px;
  --btn-h:48px;
  gap:10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-boxed .btn .icons{
  --icon-size:24px;
  left: 0;
}
.contact-boxed .buttons {padding-bottom: 0; padding-top: 15px;}
.contact-boxed .buttons .btn{width: 100%;}
.pc .contact-boxed .btn:hover .icons{left: 10px;}
.recaptcha{
  width: 200px;
  display: block;
}
.custom-file{
  --padding:15px; 
  position: relative;
  background-color: #F5F6F7;
  border-radius: 7px;
  padding:var(--padding);
}
.custom-file-input{
  pointer-events: none;
}
.custom-file-label{
  display: flex;
  justify-content: space-between;
  align-items: center;
  
}
.custom-file-label::after{display: none;}
.custom-file-label .btn{
  min-width: 115px;
  font-size: 14px; 
  border-radius: 4px;
  padding: 0;
  --btn-h:40px;
  --bs-btn-bg:#fff;
}
.custom-file-input{
  height: var(--input-h);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
 
.custom-file-label .file-name{
  padding-left: 10px;
}

@media (max-width:1700px){
  .lgp-service-contact{
    --title-size:65px;
    --col-right:650px;
  }
}
@media (max-width:1440px){
  .lgp-service-contact{
    --title-size:55px;
    --col-right:540px;
  }
}
@media (max-width:1300px){
  .lgp-service-contact{
    --title-size:45px;
    --col-right:47%;
    --col-left: 47%;
    --text-size: 16px;
  }
}
@media (max-width:991.98px){
  .lgp-service-contact h2 br{display: none;}
  .lgp-service-contact{
    --title-size:35px;
  }
  .contact-boxed{ 
    --padding:25px;
  }
  .contact-boxed .form-body {
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
  }

  .contact-boxed textarea{
    height: 75px;
  }
}

@media (max-width:820px){
  .lgp-service-contact{
    --padding-top:60px;
    --padding-bottom: 60px;
  }
  .lgp-service-contact .container{
    flex-direction: column-reverse;
  }
  .lgp-service-contact .col-left,
  .lgp-service-contact .col-right{
    width: 100%;
  }
  .lgp-service-contact p{margin-bottom: 0;}
  .lgp-service-contact h2 br{display: block;}

  .contact-boxed{margin-top: 20px;}
}

@media (max-width:670px){
  .lgp-service-contact{
    --padding-top:40px;
    --padding-bottom:50px;
    --title-size:26px;
  }
  .custom-file-label .file-name{
    padding-left: 0;
  }
  .custom-file-label .btn{
    padding: 0 10px;
    min-width: 0;
    font-size: 12px;
    --btn-h:36px;
  }
  .contact-boxed {
    --padding: 25px 20px;
    margin-top:5px;
  }

  .contact-boxed .title{
    font-size: 22px;
    margin-bottom: 20px;
  }
}
/*==================================================
  News Details
==================================================*/ 

.news-detail-boxed{
  width: 100%;
  max-width: 1010px;
  margin: 0 auto;
  padding:50px 0;
}
.news-detail-boxed .tags .tag{font-size: 14px;}
.news-detail-boxed .tags{
  margin-bottom: 10px;
}
.news-detail-boxed .hgroup{
  margin-bottom: 50px;
}
.news-detail-boxed .hgroup h1{
  font-size:64px;
  font-weight: var(--f-700);
  line-height: 1.24;
}

.news-detail{
  --space-bottom:25px;
  --border-radius:32px;
  --h2:46px;
  --h3:40px;
  --h4:34px;
  --h5:28px;
  --h6:18px;
  
  color: #787E90;
}
.news-detail h2,
.news-detail h3,
.news-detail h4,
.news-detail h5{
  font-weight: var(--f-700);
  color: var(--gray-100);
  margin-bottom: 5px;
}
.news-detail h2{font-size: var(--h2);}
.news-detail h3{font-size: var(--h3);}
.news-detail h4{font-size: var(--h4);}
.news-detail h5{font-size: var(--h4);}
.news-detail h6{
  font-size: var(--h6);
  color: inherit;
  margin-bottom: 5px;
  font-weight: var(--f-600);
}
.news-detail img{
  width: 100%;
  height: auto !important;
  border-radius: var(--border-radius);
}

.news-detail p{
  margin-bottom: var(--space-bottom);
}
.news-detail p img{
  margin-bottom: 10px;
}
.news-detail p:last-child{margin-bottom: 0;}
.news-infos.row{
  align-items: center;
  --bs-gutter-x:2rem;
  --bs-gutter-y:1.5rem;
  padding: 25px 0;
}
.news-infos.row:nth-child(even){
  flex-direction: row-reverse;
}

@media (max-width:1440px){
  .news-detail-boxed .hgroup{
    margin-bottom: 40px;
  }
  .news-detail-boxed .hgroup h1{
    font-size: 55px;
  }
  .news-detail{ 
    --border-radius:28px;
    --h2:42px;
    --h3:36px;
    --h4:30px;
    --h5:24px;
    --h6:18px;
  }
  .news-infos.row{
    padding: 20px 0;
  }
  
}

@media (max-width:1280px){
  .news-detail-boxed .hgroup{
    margin-bottom: 40px;
  }
  .news-detail-boxed .hgroup h1{
    font-size: 45px;
  }
  .news-detail-boxed .tags{
    margin-bottom: 5px;
  }
  .news-detail-boxed .hgroup{
    margin-bottom: 25px;
  }
}

@media (max-width:991.98px){
  .news-infos.row{
    align-items: flex-start;
  }

  .news-detail{ 
    --border-radius:24px;
    --h2:34px;
    --h3:28px;
    --h4:24px;
    --h5:22px;
    --h6:16px;
  }
  .news-detail-boxed .hgroup h1{
    font-size: 35px;
  }
  .news-detail-boxed .hgroup{
    margin-bottom: 25px;
    padding-top:15px;
  }
}

@media (max-width:640px){
  .news-infos.row > div{
    width: 100%;
  }

  .news-detail{ 
    --border-radius:18px;
    --h2:26px;
    --h3:26px;
    --h4:22px;
    --h5:20px; 
  }
  .news-infos.row{
    padding:15px 0;
  }
  .news-detail-boxed .tags .tag{
    font-size: 12px;
  }
  .news-detail-boxed .hgroup h1{
    font-size: 24px;
  }
  .news-detail{
    --space-bottom:15px;
  }
}

/*==================================================
  Portfolio
==================================================*/ 

.p-max-width{
  width: 100%;
  max-width: var(--width);
  margin-left: auto;
  margin-right: auto;
  --width:1200px;
}
.section-title p{margin-bottom: 0;}

.gallery-hidden{
  display: none;
}

.modal-portfolio{
  --bs-modal-border-radius:24px; 
  --bs-modal-width: 900px;
  --bs-modal-padding:50px 70px;
}

.modal-portfolio .modal-content{
  box-shadow: 0px 30px 40px rgba(16, 24, 40, 0.2);
}
.modal-portfolio .port-tag{
  display: inline-block;
  background-color: #F2F4FF;
  border-radius: 50px;
  padding: 7px 23px;
  font-size: 16px;
  color: #3400FF;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: var(--f-500);
  margin-bottom: 15px;
}

.modal-portfolio h3{
  font-size: var(--f-42);
  font-weight: var(--f-700);
  margin-bottom: 15px;
}
.modal-portfolio p{
  font-size: var(--f-18);
  color: #333333;
}
.modal-portfolio .ul-lists{
  color: #676767;
  gap: 12px;
  padding-top: 10px;
}

.modal-portfolio .buttons{
  padding:30px 0 0;
  display: flex;
  gap:25px
}
.modal-portfolio .buttons .btn{
  border-radius: 8px;
  width: 50%;
  font-weight: var(--f-700);
}

@media (max-width:1550px){
  .modal-portfolio h3{font-size: 38px;}
}

@media (max-width:1366px){
  .modal-portfolio h3{font-size: 30px;}
  .modal-portfolio .port-tag{font-size: 14px;}
}
@media (max-width:800px){
  .modal-portfolio{
    --bs-modal-border-radius:20px;  
    --bs-modal-padding:50px 30px;
  }
  .modal-portfolio p{
    font-size: var(--f-16);
  }
}

@media (max-width:670px){
  .modal-portfolio{
    --bs-modal-border-radius:16px;  
    --bs-modal-padding:40px 25px;
  }

  .modal-portfolio .buttons{gap: 15px;}
  .modal-portfolio .buttons .btn{font-weight: var(--f-500);}
  .modal-portfolio .port-tag{font-size: 13px;}
  .modal-portfolio h3{font-size:22px;}
}
@media (max-width:400px){
  .modal-portfolio .buttons{gap: 10px;}
  .modal-portfolio .port-tag{font-size: 12px; padding: 7px 15px;}
}
/*==================================================
  Fancybox
==================================================*/ 

.fancybox-navigation .fancybox-button div{
  width: 35px;
  height: 35px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.fancybox-navigation .fancybox-button div svg{
  display: none;
}
.fancybox-navigation .fancybox-button--arrow_left{left: 20px;}
.fancybox-navigation .fancybox-button--arrow_right{right: 20px;}
.fancybox-navigation .fancybox-button--arrow_left div{
  transform: rotate(90deg);
}
.fancybox-navigation .fancybox-button--arrow_right div{
  transform: rotate(-90deg);
}

@media (max-width:640px){
  .fancybox-navigation .fancybox-button div{width: 30px;height: 30px;}
  .fancybox-navigation .fancybox-button--arrow_left{left: 10px;}
  .fancybox-navigation .fancybox-button--arrow_right{right: 10px;}

  .fancybox-navigation .fancybox-button--arrow_right,
  .fancybox-navigation .fancybox-button--arrow_left{display: none;}
}
 
/*==================================================
   Banner animation - Main
==================================================*/  
.swiper-banner{
  --article-padding-y:40px;
}

.swiper-banner .container{
  padding-top: var(--header-height); 
  max-height: 1025px;
}
.banner-main{
  --banner-logo-width:480px;
  --banner-h2:80px;
  --banner-h4:28px;
  --banner-p:20px;
  --banner-p-tel:33px;
}
.banner-main .article{
  margin: auto 0;
  display: flex;
  flex-direction: column;
  gap:30px;
  padding: var(--article-padding-y) 0;
}
.banner-main .logo{
  width:var(--banner-logo-width);
  height: auto;
}
.banner-main h2{
  font-weight: 900;
  color:#1D1D1D;
  font-size: var(--banner-h2);
  text-transform: uppercase;
  line-height: 1;
  margin-top: 10px;
}
.banner-main h4{
  font-size: var(--banner-h4);
  font-weight:600;
  color: #333333;
  line-height: 1.3;
  padding-bottom: 5px;
}
.banner-main p{
  font-size: var(--banner-p);
  color: #5A5A5A;
  margin: 0;
}
.banner-main p.tel{
  font-size: var(--banner-p-tel);
  font-weight: 800;
  color: #333333;
  margin-top: 5px;
  margin-bottom: 0;
}
.image-group{
  position: relative;
}
.banner-main .image-group{
  width: 765px;
  height: 100%;
  margin-left: auto;
  margin-right:5%;
}
.banner-main .image-group img{
  position: absolute;
}
.banner-main .image-group .circle{
  width: 90%;
  position: relative;
  top: 2vw;
  margin:0 auto;
  display: block;
}
.banner-main .image-group .cloud-1,
.banner-main .image-group .cloud-2,
.banner-main .image-group .cloud-3{
  z-index: 10;
  filter: drop-shadow(8px 16px 34px rgba(21, 26, 70, 0.44));
}

.device .banner-main .image-group .cloud-1,
.device .banner-main .image-group .cloud-2,
.device .banner-main .image-group .cloud-3{
  filter: none;
}

.banner-main .image-group .cloud-1{
  width: 54.3%;
  left: -110px;
  top:30px; 
}
.banner-main .image-group .cloud-2{
  width:40%;
  right:2%;
  top:18%; 
  z-index: 12;
}
.banner-main .image-group .cloud-3{
  width:30%;
  left:6%;
  top:35%; 
}
.banner-main .image-group .hand{
  width: 400px;
  bottom: 0;
  left: 30%;
  z-index: 11;
}
.swiper-banner .swiper-slide{
  position: relative;
  overflow: hidden;
}
.swiper-banner .article{
  -webkit-animation-delay: 0ms;
   animation-delay: 0ms;
     -webkit-animation-duration: 300ms;
   animation-duration: 300ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeOut;
   animation-name: fadeOut;
}
.swiper-banner .swiper-slide-active .article{ 

   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeIn;
   animation-name: fadeIn;
   } 

.swiper-banner .element{  

    -webkit-animation-delay: 0ms;
   animation-delay: 0ms;
     -webkit-animation-duration: 500ms;
   animation-duration: 500ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
   -webkit-animation-name: fadeOut;
   animation-name: fadeOut;

}
.swiper-banner .swiper-slide-active .element{
  opacity: 1;
  visibility: visible;
  -webkit-animation-duration: 900ms;
   animation-duration: 900ms;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}

.swiper-banner .swiper-slide-active.banner-main .element-1{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-main .element-2{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
.swiper-banner .swiper-slide-active.banner-main .element-3,
.swiper-banner .swiper-slide-active.banner-main .element-4{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.swiper-banner .swiper-slide-active.banner-main .element-5{
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-main .element-6{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-main .element-7{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-main .element-8{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-main .element-9{
  -webkit-animation-duration: 1200ms;
  animation-duration: 1200ms;
  -webkit-animation-delay: 900ms;
  animation-delay: 900ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@media (min-width:1881px){
  .swiper-banner .container{ 
    padding-left: 140px;
    padding-right: 140px;
  }
}

@media (max-width:1880px){
  .banner-main .image-group{
    margin-right: 0;
  }
}

@media (max-width:1740px){
  .banner-main .image-group{
    width: 680px;
  }
  .banner-main .image-group .hand{
    width:55%;
    left: 26%;
  }
}

@media (max-width:1600px){
  .banner-main{
    --banner-logo-width:430px;
    --banner-h2:74px;
    --banner-h4:28px;
    --banner-p:20px;
    --banner-p-tel:33px;
  }

  .swiper-banner .container{max-height:800px;}
}
 
@media (max-width:1440px){
  .banner-main .image-group{
    width:50%;
    margin-top: auto;
    height: 700px;
  }
  .banner-main .image-group .hand{
    width:55%;
    left: 26%;
  }
}


@media (max-width:1380px){
  .banner-main{
    --banner-logo-width:350px;
    --banner-h2:58px;
    --banner-h4:25px;
    --banner-p:18px;
    --banner-p-tel:28px;
  }
  .banner-main .article{
    gap:20px
  }

  .banner-main .image-group{
    height: 660px;
  }
}
@media (max-width:1280px){
  .section-banner.main .container{
    height:60vw;
  }
}
@media (max-width:1199px){
   
  .banner-main{
    --banner-logo-width:280px;
    --banner-h2:48px;
    --banner-h4:22px;
    --banner-p:16px;
    --banner-p-tel:28px;
  }
  .banner-main .article{
    gap:20px
  }
  .banner-main .btn.btn-line {
    height: 52px;
    line-height: 50px; 
  } 
  .banner-main .image-group{
    width:530px;
    height: 660px;
  }
}  
@media (max-width:1024px) and (max-height:800px){
  .banner-main .image-group{
    width:440px;
    height:500px;
  }
  /* .banner-main .article{
    margin-top: auto;
    margin-bottom: 0; 
  } */
}

@media (max-width:1024px){
  .section-banner.main .container{
    height:65vw;
    min-height: 0;
  } 
  .banner-main .image-group{
    margin-top: auto;
    width:360px;
    height:390px;
    margin-left: auto;
    margin-right: 0;
  }
  
}

@media (max-width:1024px) and (min-width:861px){
  .section-banner.main .container{
    height:65vw !important;
    min-height: 0 !important;
  } 
}

@media (max-width:860px){
  .banner-main .article{ 
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .banner-main .btn.btn-line{
    margin-left: auto;
    margin-right: auto;
  }
  .swiper-banner .container{
    flex-direction: column;
  }
  .banner-main .image-group{
    margin-right: auto;
  }
}

@media (max-width:670px){
 
  .banner-main{
    --banner-logo-width:180px;
    --banner-h2:34px;
    --banner-h4:17px;
    --banner-p:14px;
    --banner-p-tel:24px;
  }
  .banner-main .btn.btn-line {
    height:48px;
    line-height:46px;
  }
  .btn.btn-line .icons {
    width: 25px;
    height: 25px;
  }
  .banner-main .article{
    margin-top:2vw;
  }
 
}

@media (max-width:540px){
  .banner-main .image-group{
    margin-top: auto;
    width:360px;
    height:390px;
  }
  .banner-main .image-group .cloud-1{
    left: -50px;
    top:0
  }
}
@media (max-width:440px){
  .banner-main .image-group{
    width:320px;
    height:360px;
  }
  .banner-main .image-group .cloud-1{width: 45%; left: 0;}
}
@media (max-width:380px){
 
  .banner-main .image-group .cloud-2 {
    width: 37%;
    right: 0;
    top: 6%;
  }
  .banner-main .image-group .hand{
    left: 30%;
  }
}

/*==================================================
   Banner animation - 24Carfix
==================================================*/ 

.banner-24carfix { 
  --banner-h2:70px;
  --banner-h4:28px;
  --banner-p:22px;
  color: #fff;
}
 
.banner-24carfix .background{
  background-position: center;
}
.banner-24carfix .article{
  padding-top:8vh;
}
.banner-24carfix h2{
  color: #fff;
  font-size: var(--banner-h2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 5px;
}
.banner-24carfix h4{ 
  font-size: var(--banner-h4);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 15px;
}
.banner-24carfix p{ 
  font-size: var(--banner-p); 
  line-height: 1.4; 
}

.apps-download{
  display: flex;
  gap:20px;
  margin-top:40px;
}

.apps-download img{
  height: 48px;
  width: auto;
}

.banner-24carfix .image-group{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.banner-24carfix .image-group img{
  position: absolute;
}
.banner-24carfix .car{
  width:48%;
  left: 13%;
  top:50%;
}
.banner-24carfix .iphone-1{
  width:37%;
  left: 50%;
  bottom: 5%;
}
.banner-24carfix .iphone-2{
  width:16%;
  right:7%;
  bottom: 15%;
}
.banner-24carfix .screwdriver{
  width:16%;
  right:18%;
  bottom:42%;
}
.swiper-banner .swiper-slide-active.banner-24carfix .element-1{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-24carfix .element-2{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}
.swiper-banner .swiper-slide-active.banner-24carfix .element-3{
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-24carfix .element-4{
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-24carfix .element-5{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

@media (max-width:1590px){
  .banner-24carfix { 
    --banner-h2:4vw;
    --banner-h4:1.63vw;
    --banner-p:1.2vw; 
  }

  .banner-24carfix .screwdriver{
    bottom:39%;
  }
  .apps-download{
    margin-top: 2vw;
  }
  .banner-24carfix .article{
    padding-top: 6vh;
  }
  .apps-download{gap:15px}
  .apps-download img{height: 40px;}
}
@media (max-width:1199px){
  .banner-24carfix .car{top: 52%; left: 8%; width: 54%;}
}
@media (max-width:1024px){
  .apps-download img{height:35px;}
  .banner-24carfix .car{top: 55%;}
}
/* @media (min-width:575px) and (max-width:1199px){ 
  @media (min-height:500px){
    .section-banner.main .container{
      height: 100vh;
      max-height: 1024px; 
      min-height:900px;
    }
  }
} */
@media (max-width:860px){
  .section-banner.main .container{
    height: 100vh;
    max-height: 1024px;
  }
  .banner-24carfix .iphone-1{
    width: 47%;
    left: 46%;
    bottom: 7%;
  }
  .banner-24carfix .iphone-2 {
    width: 20%;
    right: 1%;
    bottom: 21%;
  }
  .banner-24carfix .car{top: 56%; left: 1%;}
  .banner-24carfix .background{
    background-image: url(../img/thumb/banner-24carfix/bg-mobile.svg) !important;
  } 

  .banner-24carfix { 
    --banner-h2:45px;
    --banner-h4:22px;
    --banner-p:15px; 
  }
  .banner-24carfix .article{
    text-align: center;
    padding-top: 10%;
  }
  .apps-download{
    justify-content: center;
  }
  .banner-24carfix .car {
    top: 68%;
    left: 3%;
  } 
  .banner-24carfix .iphone-1 {
    width: 46%;
    left: 41%;
    bottom:6%;
  }
  .banner-24carfix .iphone-2 {
    width: 20%;
    right: 6%;
    bottom:13%;
  }
  .apps-download img{height:40px;}
}
@media (max-width:991px) and (max-height:670px){
  .section-banner.main .container{
    min-height: 800px;
  }
}
@media (max-width:991px) and (max-height:550px){
  .section-banner.main .container{
    min-height:600px;
  }
  .banner-24carfix .article{
    padding-top: 50px;
  }
  .banner-24carfix { 
    --banner-h2:28px;
    --banner-h4:16px;
    --banner-p:14px; 
  }
  .banner-24carfix .iphone-1 {
    width: 32%;
    left: 52%;
    bottom: 0;
  }
  .banner-24carfix .iphone-2 {
    width: 14%;
    right: 6%;
    bottom: 0;
  }
  .banner-24carfix .car {
    top: 72%;
    left: 20%;
    width: 38%;
  }
}

@media (max-width:670px){ 
  .section-banner.main .container{
    max-height:750px;
  }
  .banner-24carfix { 
    --banner-h2:24px;
    --banner-h4:16px;
    --banner-p:14px; 
  }
  .apps-download{gap:10px}
  .apps-download img{height: 35px;}
}
@media (max-width:575px){
  .section-banner.main .container{
    min-height: 0;
  }
  .banner-24carfix .background{
    background-image: url(../img/thumb/banner-24carfix/bg-mobile-2.svg) !important;
  } 

  .banner-24carfix .article{
    padding-top:80px;
  }

  .banner-24carfix .iphone-1{bottom: 16%;}
  .banner-24carfix .iphone-2{bottom: 22%;}
}


/*==================================================
   Banner animation - Bk Live
==================================================*/ 
.banner-bklive{
  --banner-h2:72px;
  --banner-h3:48px;
  --banner-p:32px; 

  --banner-iphone-1:37%;
  --banner-iphone-2:40%;
}
.banner-bklive .article{
  margin: auto;
  margin-right: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: left;
  color: #fff; 
}

.banner-bklive h2{
  color: #fff;
  font-weight: 700;
  font-size: var(--banner-h2);
  margin: 25px 0 25px;
}

.banner-bklive h3{ 
  font-weight: 500;
  font-size: var(--banner-h3); 
}
.banner-bklive p{ 
  font-weight: 500;
  font-size: var(--banner-p); 
}

.banner-bklive .image-group{
  position: absolute;
  top: 8%;
  left:5vw;
  bottom: 0;
  width:48%; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-bklive .image-group .inner{
  margin: auto 0;
  position: relative;
}
.banner-bklive .image-group img{
  position: absolute;
  top: 0;
  left: 0;
  width:100%; 
}
.banner-bklive .image-group .ball{  
  position: relative;
}
.banner-bklive .cartoon{
  position: absolute;
  bottom: 0;
  right: 90px;
  width: 250px;
}

.swiper-banner .swiper-slide-active.banner-bklive .element-1{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.swiper-banner .swiper-slide-active.banner-bklive .element-2{
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-bklive .element-3{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.swiper-banner .swiper-slide-active.banner-bklive .element-4{
  -webkit-animation-delay: 600ms;
  animation-delay: 600ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-bklive .element-5{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@media (max-width:1800px){
  .banner-bklive .image-group{
    width: 49%;
    left:2vw
  }
  .banner-bklive{
    --banner-h2:4vw;
    --banner-h3:2.7vw;
    --banner-p:1.8vw;
  } 

  .banner-bklive h2{
    margin: 20px 0 20px;
  }

  .banner-bklive .image-group .ball{  
    position:static;
  } 
}

@media (max-width:1620px){
  .banner-bklive .cartoon{
    width: 14%;
    right: 40px;
  }
}

@media (max-width:860px){
  .banner-bklive{
    /* --banner-h2:5vw;
    --banner-h3:3.5vw;
    --banner-p:3vw; */

    --banner-h2:28px;
    --banner-h3:22px;
    --banner-p:17px;
  } 
  .banner-bklive .image-group{
    width:380px;
    top: 0;
    margin:  auto auto 0;
    position: relative;
  }

  .banner-bklive .article{
    margin-right: auto;
    margin-top:10px;
    text-align: center;
    padding-bottom:11%;
  }
}

@media (max-width:670px) and (max-height:550px){
  .banner-bklive{
    --banner-h2:4vw;
    --banner-h3:3vw;
    --banner-p:2vw;
  }
  .banner-bklive h2 {
    margin:5px 0;
  }
}
 
@media (max-width:575px) and (max-height:550px) {
  .banner-bklive{
    --banner-h2:6vw;
    --banner-h3:4vw;
    --banner-p:3vw;
  } 
  .banner-bklive .image-group{
    width:80%;
  }
  .banner-bklive h2 {
    margin:10px 0;
  }

  .banner-bklive .cartoon{
    right: 40%;
    width: 20%;
  }
}

@media (max-width:575px)  {
  .banner-bklive .image-group{
   width: 300px;
  }
  .banner-bklive{
    --banner-h2:24px;
    --banner-h3:18px;
    --banner-p:15px;
  } 

  .banner-bklive h2{margin: 10px 0;}
}

/*==================================================
   Banner animation - One Charge
==================================================*/ 

.section-banner .swiper-pagination-bullet{background-color: #DBDBDB;}
.section-banner .swiper-pagination-bullet-active{background-color: #3400FF;}
.banner-onecharge {
  --banner-h2:63px;
  --banner-h3:50px;
  --banner-h4:40px;
  --banner-p:28px;
}
.banner-onecharge .article{
  color: #fff;
  display: flex; 
}
.banner-onecharge .article .inner{
  margin: auto 0;
}
.banner-onecharge h2{
  color: #fff;
  font-size: var(--banner-h2);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 15px;
}
.banner-onecharge h3{ 
  font-size: var(--banner-h3);
  font-weight: 400;
  line-height: 1.3;
}
.banner-onecharge h4{ 
  font-size: var(--banner-h4);
  font-weight: 400;
  line-height: 1.3;
  margin-bottom:5px;
}
.banner-onecharge p{ 
  font-size: var(--banner-p);
  font-weight: 400; 
}
.banner-onecharge strong{
  font-weight: 700;
}
.banner-onecharge .search{
  display: block;
  padding: 40px 0;
}
.banner-onecharge .search img{
  height: 68px;
  width: auto;
}
.banner-onecharge .image-group{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 55%;
  display: flex;
}
.banner-onecharge .image-group img{
  width: 100%;
  position:absolute;
  top: 0;
  left: 0;
}
.banner-onecharge .image-group .inner{
  margin: auto 0;
  position: relative;
  top:5%;
}
.banner-onecharge .image-group .notebook{
  position: relative;
}
.banner-onecharge .image-group .line{
  left: -12%;
  bottom: 5%;
  right: auto;
  width: 14%;
  top: auto;
}

.swiper-banner .swiper-slide-active.banner-onecharge .element-1{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}
.swiper-banner .swiper-slide-active.banner-onecharge .element-2{
  -webkit-animation-delay: 500ms;
  animation-delay: 500ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-onecharge .element-3{
  -webkit-animation-delay: 700ms;
  animation-delay: 700ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
.swiper-banner .swiper-slide-active.banner-onecharge .element-4{
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.swiper-banner .swiper-slide-active.banner-onecharge .element-5{
  -webkit-animation-delay: 800ms;
  animation-delay: 800ms;
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

.swiper-banner .logo-site{
  position: absolute;
  top: calc(var(--header-height) + 40px);
  right: 40px;
  z-index: 10;
}
.banner-onecharge .logo-site{ 
  width: 170px;
}
.banner-24carfix .logo-site,
.banner-bklive .logo-site{ 
  width:58px;
}
 
@media (max-width:1690px){
  .banner-onecharge {
    --banner-h2:3.5vw;
    --banner-h3:2.7vw;
    --banner-h4:2vw;
    --banner-p:1.6vw;
  }
  .banner-onecharge .search img{
    height: 62px;
  }

  .banner-onecharge .logo-site{width: 140px;}
}
@media (max-width:1440px){
  .banner-onecharge .search{
    padding: 25px 0;
  }
  .banner-onecharge .search img{
    height:46px;
  }
  .banner-onecharge .image-group{
    width:50%;
    right: 5%;
  }
  .banner-onecharge {
    --banner-h2:3vw;
    --banner-h3:2.4vw;
    --banner-h4:1.8vw;
    --banner-p:1.4vw;
  }
}


@media (max-width:860px){
  .banner-onecharge .image-group{
    position: relative;
    margin: auto auto 0;
    right: 0;
    width:80%; 
  }

  .banner-onecharge .article{
    margin: 0 auto auto;
    text-align: center;
    padding-bottom: 8%;
  }

  .banner-onecharge {
    --banner-h2:5vw;
    --banner-h3:4vw;
    --banner-h4:2.5vw;
    --banner-p:2vw;
  }
  .swiper-banner .logo-site{
    top: calc(var(--header-height) + 30px); 
    left: 50%;
    right: auto;
  }
  .banner-onecharge .logo-site{  
    width: 120px;  
    margin-left: -60px;
  }
  .banner-24carfix .logo-site,
  .banner-bklive .logo-site{ 
    width:30px;
    margin-left: -15px;
  }
}
@media (max-width:860px) and (max-height:860px) {
  .banner-onecharge .image-group{
    width:60%; 
  }

  .banner-onecharge {
    --banner-h2:4vw;
    --banner-h3:2.5vw;
    --banner-h4:2.2vw;
    --banner-p:2vw;
  }
  .banner-onecharge .search{
    padding: 15px 0;
  }
  .banner-onecharge .search img{
    height: 35px;
  }
  .banner-onecharge h2{
    margin-bottom: 10px;
  }
}

@media (max-width:575px)  and (max-height:550px){
  .banner-onecharge .image-group{
    width: 90%;
    margin-bottom: 20px;
  }

  .banner-onecharge {
    --banner-h2:6.4vw;
    --banner-h3:4.4vw;
    --banner-h4:3.8vw;
    --banner-p:3.4vw;
  }
  .banner-onecharge .search img{
    height: 35px;
  }
  .banner-onecharge h2{
    margin-bottom: 10px;
  }
}

@media (max-width:440px){
  .banner-onecharge {
    --banner-h2:24px;
    --banner-h3:4.4vw;
    --banner-h4:3.8vw;
    --banner-p:3.4vw;
  }
  .banner-onecharge .image-group{
    width: 90%;
    margin-bottom: 20px;
  }

  .banner-onecharge .logo-site{ 
    top: calc(var(--header-height) + 20px); 
    width: 100px;   
    margin-left: -50px;
  }
  .banner-onecharge .search img{height: 35px;}
}

.floating-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index:1000;
}
.floating-button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-decoration: none;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
.line-button {
  background-color: #00B900;
}
.phone-button {
  background-color: #FF5722;
}
.messenger-button {
  background-color: #0078FF;
}
.pagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:10px;
  padding:50px 0;
}
.pagination > li > a{ 
  height: 40px;
  min-width: 37px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;

  background-color: #EBEBEB;
  font-weight: 400;
  color: #A0A0A0;
}
.pagination > li > a.prev,
.pagination > li > a.next{
  width: 62px;
  font-size: 12px;
}

.pagination > li > a.arrow{
  width: 40px;
  border-radius: 15px;
}
.pagination > li > a.arrow svg{
  width: 15px;
  height: 15px;
}
.pagination > li > a.arrow svg path{stroke: #B3B3B3;}
.pagination > li > a.arrow.prev svg{ transform: rotate(-180deg);}
.pagination > li > a.arrow.prev{margin-right: 10px;}
.pagination > li > a.arrow.next{margin-left: 10px;}

.pc .pagination > li > a:hover,
 .pagination > li > a.active{
  background-color:#4D20FF;
  color: #fff;
}
.pc .pagination > li > a.prev:hover,
.pc .pagination > li > a.next:hover{
  background-color:#4D20FF;
  color: #ebe5ff;
}
.pc .pagination > li > a.arrow:hover{
  background-color: #4D20FF;
}
.pc .pagination > li > a.arrow:hover svg path{stroke: #fff;}