@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../fonts/LINESeedSansTH-Thin.eot');
  src: url('../fonts/LINESeedSansTH-Thin.eot?#iefix') format('embedded-opentype'),
      url('../fonts/LINESeedSansTH-Thin.woff2') format('woff2'),
      url('../fonts/LINESeedSansTH-Thin.woff') format('woff'),
      url('../fonts/LINESeedSansTH-Thin.ttf') format('truetype'),
      url('../fonts/LINESeedSansTH-Thin.svg#LINESeedSansTH-Thin') format('svg');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../fonts/LINESeedSansTH-Regular.eot');
  src: url('../fonts/LINESeedSansTH-Regular.eot?#iefix') format('embedded-opentype'),
      url('../fonts/LINESeedSansTH-Regular.woff2') format('woff2'),
      url('../fonts/LINESeedSansTH-Regular.woff') format('woff'),
      url('../fonts/LINESeedSansTH-Regular.ttf') format('truetype'),
      url('../fonts/LINESeedSansTH-Regular.svg#LINESeedSansTH-Regular') format('svg');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../fonts/LINESeedSansTH-Bold.eot');
  src: url('../fonts/LINESeedSansTH-Bold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/LINESeedSansTH-Bold.woff2') format('woff2'),
      url('../fonts/LINESeedSansTH-Bold.woff') format('woff'),
      url('../fonts/LINESeedSansTH-Bold.ttf') format('truetype'),
      url('../fonts/LINESeedSansTH-Bold.svg#LINESeedSansTH-Bold') format('svg');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../fonts/LINESeedSansTH-ExtraBold.eot');
  src: url('../fonts/LINESeedSansTH-ExtraBold.eot?#iefix') format('embedded-opentype'),
      url('../fonts/LINESeedSansTH-ExtraBold.woff2') format('woff2'),
      url('../fonts/LINESeedSansTH-ExtraBold.woff') format('woff'),
      url('../fonts/LINESeedSansTH-ExtraBold.ttf') format('truetype'),
      url('../fonts/LINESeedSansTH-ExtraBold.svg#LINESeedSansTH-ExtraBold') format('svg');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LINE Seed Sans TH';
  src: url('../fonts/LINESeedSansTH-Heavy.eot');
  src: url('../fonts/LINESeedSansTH-Heavy.eot?#iefix') format('embedded-opentype'),
      url('../fonts/LINESeedSansTH-Heavy.woff2') format('woff2'),
      url('../fonts/LINESeedSansTH-Heavy.woff') format('woff'),
      url('../fonts/LINESeedSansTH-Heavy.ttf') format('truetype'),
      url('../fonts/LINESeedSansTH-Heavy.svg#LINESeedSansTH-Heavy') format('svg');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/*==================================================
    General
==================================================*/

html,body{
  padding: 0;
  margin: 0; 
  height: 100%; 
  scroll-behavior:unset !important
}  

body{      
  margin:0; 
  padding:0;  
 
  position: relative;
  overflow-x: hidden;

  /* overscroll-behavior:unset !important; */

}
 
:root {    

  --bs-body-color:#000;
  --bs-body-bg:#fff;
  --bs-body-text-align:left;
  --bs-body-font-weight:var(--fw-400);
  --bs-body-line-height:1.55; 
  --bs-body-font-size:var(--fs-15);
  --bs-body-font-family:"LINE Seed Sans TH", sans-serif; 
  --bs-link-hover-color:inherit; 
  
  --fs-90:90px;
  --fs-58:50px;
  --fs-50:50px;
  --fs-42:42px;
  --fs-36:36px;
  --fs-30:30px;
  --fs-28:28px;
  --fs-24:24px;
  --fs-20:20px;
  --fs-18:18px;
  --fs-16:16px;
  --fs-15:15px;

  --red:#E4000F;
  --red-light:#F43D2C;
  --text-red:#E03526;
  --bs-primary-rgb:2, 48, 117;

  --card-border-radius:22px;  

  --animation-primary: 0.4s cubic-bezier(.75, 0, .25, 1);
  --animation-navigation-fade: 0.3s ease-in-out; 
    
  --navbar-brand:180px;  
  --header-height:115px;
  
  --padding-90:90px;
  --padding-80:80px;
  --padding-75:70px;
  --padding-50:50px;
  --padding-30:30px;
 
  /* --fw-200:200;
  --fw-300:200;
  --fw-400:300;
  --fw-500:400;
  --fw-600:500; 
  --fw-700:600;
  --fw-800:700;
  --fw-900:800; */

  --fw-200:200;
  --fw-300:300;
  --fw-400:400;
  --fw-500:500;
  --fw-600:600; 
  --fw-700:700;
  --fw-800:800;
  --fw-900:900; 
 
}  
 
@media (max-width:1440px) {
  :root{
    --navbar-brand:160px;  
    --header-height:100px;
  }
}
 
 
@media (max-width:670px) {
  :root{
    --header-height:80px;
  }
}

 
.modal-open{
  touch-action: none; 
  overscroll-behavior: contain;
}
  
.modal-backdrop{
  overscroll-behavior: contain;
  --bs-backdrop-opacity: 0.6;
  --bs-backdrop-zindex: 1051; 
}
 
a{
  color:inherit;
  text-decoration: none; 
  transition: all 0.2s ease-in-out; 
}
a:hover{ text-decoration: none;   } 
.form-control,
.form-select{
  --input-h:52px;
 -webkit-appearance: none; 
  padding:0 20px;
 
  font-weight:var(--fw-400);  
  font-size: var(--fs-16);
  border:1px solid #DADADA;
  color: #1C1C1C;

  height:var(--input-h);
  line-height:calc(var(--input-h) - 0px);  
  background-color:#fff; 
  border-radius:16px;   
 
    -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::placeholder {   
  opacity:1;  
  color:#A3A3A3; 
}

.form-control:-ms-input-placeholder {   
  opacity:1;  
  color:#A3A3A3;  
}

.form-control::-ms-input-placeholder {   
  opacity:1;  
  color:#A3A3A3; 
}

.form-control.disabled,
.form-control:disabled, 
.form-control[readonly],
.form-select.disabled,
.form-select:disabled, 
.form-select[readonly] {
background-color: #F6F7F9 !important;
border-color: #F6F7F9;
color: #A3A3A3;
} 
 
.form-select{
  background-image: url(../img/icons/icon-select-option.svg); 
  background-position:right .85rem center;
  background-size: 12px;
  background-repeat: no-repeat; 
} 

.form-select{padding-right: 35px;}
 
.form-control:focus,
.form-select:focus{
  background-color: #fff; 
  outline: 0; 
  box-shadow:none; 
  border-color:#E9E9E9;
}  
.form-select:not(.selected){color:#A3A3A3} 
.form-select.dropdown  [data-bs-toggle]:after{margin-left: auto;}
.form-select.dropdown{z-index: auto;} 
.form-select.dropdown .dropdown-menu{
  left: 0;
  z-index: 100;
  margin-top: 1px;
  padding: 0;
  box-shadow: 0 0px 10px rgba(199, 199, 227, 0.3);
  --bs-dropdown-border-width:1px;
  overflow: hidden;
} 

.form-select.dropdown .dropdown-menu li{
  display: block;
  line-height: normal;
  padding:5px 15px;
  margin: 0;
  font-size: 14px;
} 
.form-select.dropdown .dropdown-menu li:hover{
  background-color: #f1f1f1;
}
.form-select.dropdown .dropdown-menu li.active{
  background-color: #767676;
  pointer-events:none;
  color: #fff;
}
.form-check {
  position: relative;
  padding-left:0;
  display: flex; 
  gap: 10px; 
} 
.form-check-input{
  width:22px;
  height:22px; 
  border-width:2px;
  position: relative;
  margin: 0; 
  margin-left: 0 !important; 
  flex-shrink: 0;
  border-color:#EEEEEE;
  box-shadow: none !important;
}
.form-check-input[type=checkbox],
.form-check-input[type=radio].square{
  border-radius: 6px; 
}
.form-check-input[type=radio],
.form-check-input[type=checkbox].circle{
  border-radius: 50%;  
  border-color: #F0F0F0;
  margin-top: 0;
  width: 20px;
  height: 20px;
}
 
.form-check-input[type=radio]:checked,
.form-check-input[type=checkbox].circle:checked {
  background-color: transparent; 
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23008D7A'/%3e%3c/svg%3e");
  border-color: #008D7A;
}
.form-check-input[type=radio]:checked + .form-check-label{color: var(--text-title-black);}
.form-check label{
  margin-bottom:0;
  font-weight: var(--fw-400);
  font-size: var(--fs-15); 
}
.form-check-input:checked[type=checkbox], 
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent; 
}

.form-check-input:checked[type=checkbox],
.form-check-input:checked[type=radio].square{
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-size: 18px;
  background-position: center;
  background-repeat: no-repeat;
  background-color:#008D7A;
  border-color:#008D7A; 
}

.form-check-input:checked + .text-active-black{color:#1B204C; font-weight: var(--fw-500);}
.form-check label strong{font-weight: var(--fw-500);}
 
.form-select [data-bs-toggle]{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap:5px; 
  padding-top: 2px;
  opacity: 0.5;
  outline: 0 !important;
  color:#222222;
}
 
.form-select [data-bs-toggle].selected{opacity: 1;}
.form-select [data-bs-toggle] .icons{top: -2px;}

.form-group .form-select [data-bs-toggle]{color: #A1B1BA; opacity: 1;}
.form-group .form-select [data-bs-toggle].selected{color: #1F1F1F;}
.form-group .form-select [data-bs-toggle]::after{display: none;}
.form-group{
  display: block; 
  position: relative;
} 
 
label.title{  
  padding-bottom:5px;
  font-size: inherit; 
  font-size: var(--fs-16);
  font-weight: var(--fw-500);
  display: block; 
  color:#1B204C;
} 
label.title small{
  color: #565C6E;
  font-weight: var(--fw-400);
  font-size: 14px;
  display: block;
  margin: -2px 0 3px;
}
 
.form-group span.error{
  color:#FF3E40; 
  padding-top: 5px;  
  display: block;
}
 
.form-group .group{
  position: relative;
  display: block;
} 
.form-group .icons.left,
.form-group .icons.right{
  position: absolute;
  top: 0 !important;
  right: 11px;
  bottom: 0 !important;
  width:24px; 
  height: auto;

  transition: none;
  z-index: 1;
} 
  
.form-group .icons.left{
  left: 14px;
  right: auto;
}
 
.form-group .icons.left + .form-control{
  padding-left: 45px;
}
.form-group .icons.right + .form-control{
  padding-right: 40px;
}
.form-group  .error + .icons{bottom: 31px !important;}
.form-group  .error[style] + .icons{bottom: 0 !important;} 
 
.error + .form-select{border-color: #DF1642; }
.star{color: #FF3E40;}
.form-select + .error{
  position: absolute;
  left: 0;
  top: 100%;
  line-height: 0.9;
}
 
select.form-select.error{display: none !important;}
 
.btn{
  --btn-h:52px; 
  position: relative; 
  padding:2px 22px 0;       
  height:var(--btn-h); 
  line-height:calc(var(--btn-h) - 0px);  
  transition: all 0.25s ease-in-out;    
  font-weight: var(--fw-500);     
  display: flex;
  align-items: center;
  justify-content: center;  
  font-size: var(--fs-18);  
  gap:8px;    
  max-width: var(--max-width);
  --max-width:none;
  --bs-btn-border-width:0;
  --bs-btn-border-radius:16px;

  --bs-btn-color:#fff; 
  --bs-btn-bg:#E4000F;
  --bs-btn-hover-color:#fff; 
  --bs-btn-hover-bg:#1E1C1C;
  --bs-btn-active-color:var(--bs-btn-color); 
  --bs-btn-active-bg:var(--bs-btn-hover-bg);

  --bs-btn-icon-color:var(--bs-btn-color);
  --bs-btn-hover-icon-color:var(--bs-btn-hover-color); 
}   

.btn path[fill]{fill: var(--bs-btn-icon-color);}
.btn path[stroke]{stroke: var(--bs-btn-icon-color);}
.btn line[stroke]{stroke:var(--bs-btn-icon-color);}

.btn:hover path[fill],
.btn.active path[fill],
.btn:active path[fill]{fill: var(--bs-btn-hover-icon-color) !important;}

.btn:hover path[stroke],
.btn.active path[stroke],
.btn:active path[stroke]{stroke:var(--bs-btn-hover-icon-color)!important;}

.btn:hover line[stroke],
.btn.active line[stroke],
.btn:active line[stroke]{stroke:var(--bs-btn-hover-icon-color)!important;}

.btn{
  display: flex;
  align-items: center;
  justify-content: center; 
} 
  
.btn span,
.btn .icons{
  position: relative;
  z-index: 10;
}  
.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-black{
  --bs-btn-bg:#000;
  --bs-btn-color:#fff;
  --bs-btn-hover-bg:#222;
  --bs-btn-hover-color:#fff;

}
.btn-pretty{
  padding: 0;
  gap: 0;
  --btn-h:52px;
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:var(--bs-btn-bg);
  --bs-btn-active-bg:var(--bs-btn-bg);

  --bs-btn-color:#fff;
  --bs-btn-hover-color:var(--bs-btn-color);
  --bs-btn-active-color:var(--bs-btn-color);
}
.btn-pretty:before,
.btn-pretty:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  background-size: auto 100%;
  background-image: url(../img/thumb/bg-button.png);
}
.btn-pretty:before{
  left:0;
  width:40px;
  background-position: left center;
}
.btn-pretty:after{
  right:0;
  width:90px;
  background-position: right center;
}
.btn-pretty .btn-text{
  margin: 0 35px;
  background-size: auto 100%;
  background-repeat: repeat-x;
  background-image: url(../img/thumb/bg-button-body.png); 
}
.btn-pretty .btn-icon{
  width: 52px;
  height: 100%;
  display: flex;
}
.btn-pretty .btn-icon .icons{
  background-image: url(../img/icons/icon-next.svg);
  margin: auto;
  --size:11px;
}
.btn-pretty:hover .btn-icon .icons{
  transform: rotate(45deg);
}
.btn-pretty.btn-more .btn-text{margin: 0 26px;}

.btn-pretty.black:before,
.btn-pretty.black:after{background-image: url(../img/thumb/bg-button-black.png);}
.btn-pretty.black .btn-text{background-image: url(../img/thumb/bg-button-body-black.png); }
.btn-outline-g{ 
  --bs-btn-border-radius:16px;
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg:var(--bs-btn-bg);
  --bs-btn-active-bg:var(--bs-btn-bg);

  --bs-btn-color:#000000;
  --bs-btn-hover-color:#E4000F;
  --bs-btn-active-color:var(--bs-btn-color);
}
.btn-outline-g:before,
.btn-outline-g:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;  
  left: 0;
  right: 0;
  border-radius: inherit;
} 
.btn-outline-g:before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%);
}
 
.btn-outline-g:after{
  background-color: #fff;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  border-radius: 15.5px;
}



.btn-link {
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: #fff; 
  text-decoration: none;
} 

.btn-trans{
  --bs-btn-bg: transparent;
  --bs-btn-hover-bg: transparent;
  --bs-btn-hover-color: #fff; 
  padding: 0;
}
  
.btn.h-40{
  --btn-h:40px;
  font-size: 13px;
}
.btn.h-45{
  --btn-h:45px; 
}
.btn.disabled, .btn:disabled{  pointer-events: none;} 
.shadow-0{box-shadow: none !important;}
.btn.rounded{border-radius: 100px !important;}  
  
.buttons{
  display: flex; 
  text-align: center; 
  justify-content: center;
  gap:10px;  
  padding:25px 0 0;
}  
 
svg path,
svg rect,
svg line,
svg circle,
svg polygon{  
 transition: all 0.2s ease-in-out;
} 
 
@media (max-width:1199px){
  .btn-more{
    --btn-h:44px;
    font-size: 15px;
  }
  .btn-more:before{width: 30px;}
  .btn-more:after{width: 70px;}
  .btn-more .btn-text{margin: 0 20px;}
  .btn-more .btn-icon{width: 44px;}
}

@media (max-width:670px){
  .btn-pretty{
    --btn-h:44px;
    font-size: 15px;
  }

  .btn-pretty:before{width: 30px;}
  .btn-pretty:after{width: 70px;}
  .btn-pretty .btn-text{margin: 0 25px;}
  .btn-pretty .btn-icon{width: 44px;}

  .form-control,
  .form-select{
    --input-h:45px;
    border-radius: 12px;
    padding-left: 15px;
  }

  .form-group .icons.left, .form-group .icons.right{
    width:20px;
  }
  .form-group .icons.left{
    left: 10px;
  }
  .form-group .icons.left + .form-control{
    padding-left:35px;
  }
}


 
/*==================================================
    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;
  
  --size:24px;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  
}
.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.35s 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; }

img.icons,
svg.icons{ 
  object-fit: contain;
  object-position:center;
  flex-shrink: 0;
}
.icons.w-12{--size:12px;}
.icons.w-14{--size:14px;}
.icons.w-16{--size:16px;}
.icons.w-18{--size:18px;}
.icons.w-20{--size:20px;}
.icons.w-27{--size:27px;}
.icons.w-32{--size:32px;}
.icons.w-34{--size:34px;}
.icons.w-36{--size:36px;}
.icons.w-40{--size:40px;}
.container-fluid{ 
  --padding-x:80px; 
  max-width:100%;
  padding-left:var(--padding-x);
  padding-right:var(--padding-x); 
  position: relative;
  z-index: 9;    
}

.container{ 
  --padding-x:80px;
  max-width: calc(1530px + (var(--padding-x) * 2));
  padding-left: var(--padding-x);
  padding-right: var(--padding-x);
  position:relative;
  z-index:9; 
}
 
.section-target{
  position: absolute; 
  top:0; 
   
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; 
}
.section-target.tabien{
  top: -180px;
}
 
.section{
  display: block;
  position: relative; 
  flex: 1 1 auto;
  --padding-top:30px;
  --padding-bottom:30px;

  padding: var(--padding-top) 0 var(--padding-bottom);
}
 
.compensate-for-scrollbar{ margin-right: 0 !important } 
.compensate-for-scrollbar .header{ right: 0 } 
body.fancybox-active{ overflow: visible !important;padding-right: 0 !important  }

@media (max-width: 1800px) {
  .container-fluid{
    --padding-x:50px;
  }
}
 
@media (max-width: 1280px) {
  .container-fluid{
    --padding-x:30px;
  } 
  .container{ 
    --padding-x:50px;
  }
} 
@media (max-width: 1024px) {
  .container{
    --padding-x:30px;
  } 
}
@media (max-width: 670px) {
  .container,
  .container-fluid{
    --padding-x:20px;
  } 
 
}

@media (max-width: 575px) {
  .section{
    --padding-top:30px;
    --padding-bottom:30px;
  } 
}

/*==================================================
    Header Setup
==================================================*/   
.fw-light{font-weight: var(--fw-300) !important;}
.fw-400{font-weight: var(--fw-400) !important;}
.fw-500{font-weight: var(--fw-500) !important;}
.fw-600{font-weight: var(--fw-600) !important;}   
.fw-700{font-weight: var(--fw-700) !important;}    
 
.fs-18{font-size: var(--fs-18);}
.link-white{color:#fff; text-decoration: underline;text-decoration-thickness: 1px;} 
a.link-hover-white:hover{color: #fff;}
p a:hover{text-decoration: underline;text-decoration-thickness: 1px;}
 

b, strong{
  font-weight: var(--fw-500); 
  font-family: inherit;
} 
  
.h1, .h2, .h3, .h4, .h5, .h6, 
h1, h2, h3, h4, h5, h6{   
  margin:0;    
  font-weight:var(--fw-700);
  font-style: normal;  
  line-height:1.4;    
  position: relative;   
}   

h1,.h1{}
h2,.h2{}
h3,.h3{}
h4,.h4{}
 
  
.text-underline{text-decoration: underline;}  
.nowrap{ white-space: nowrap; }    
  
.header,
.navbar-brand,
.navbar-brand img,
.navbar-toppage,
.navbar-menu{
  transition: all 0.3s;
}
.header{
  position: fixed;
  top: 0;
  left:0;
  right: 0;
   
  height: var(--header-height);
  z-index: 1020;      
  display: block;    

  background-color:transparent; 
}  

.header.pos-absolute{
  position: absolute;
}
  
.header .container,
.header .container-fluid{  
  display: flex;   
  align-items:center;    
  justify-content: space-between;
  z-index: 400;
  position: relative; 
  height: 100%;
}   

.header.bg-white-on-scroll{background-color: #fff;}

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

.navbar-brand .logo-1{opacity: 1;}
.navbar-brand .logo-2{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}
  
.navbar-brand.logo-white .logo-1{opacity: 1;}
.navbar-brand.logo-white .logo-2{opacity: 0;}
.dropdown [data-bs-toggle]{
  display: flex;
  align-items: center;
  gap:5px
}
.dropdown [data-bs-toggle]:after{
  content: '';
  width: 11px;
  height: 11px;
  margin-left:2px;
 
  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='%23222222' 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; 
}
.header .dropdown [data-bs-toggle]:after{
  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"); 
}
.dropdown-menu{
  --bs-dropdown-border-radius:16px;
  --bs-dropdown-menu-border-radius:0; 
  --bs-dropdown-border-color:#fff;
  --bs-dropdown-bg:#fff; 
  --bs-dropdown-color:#7B8992;
  --bs-dropdown-padding-x:15px;
  --bs-dropdown-padding-y:7px;
  --bs-dropdown-spacer:0;
  --bs-dropdown-min-width:100%;
  --bs-dropdown-link-hover-bg:transparent; 
  --bs-dropdown-border-width:0;
  
  opacity: 0;
  border: 0;
  display: block;
  pointer-events: none;
  transition: all 0.35s;

  box-shadow: none;
  top: 100%;  
  padding:15px 0; 
  width: auto; 
  box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
}  
  
.dropdown-menu.right{
  left: auto;
  right: 0;
}
.dropdown-menu li{cursor: pointer;} 
  
.dropdown:hover > .dropdown-menu,
.dropdown > .dropdown-menu.show{
  opacity: 1;
  top: 100%;
  pointer-events: all;
}
 
.dropdown-menu > li{
  position: relative;
  z-index: 10; 
  margin: 2px 0;
}

.dropdown-menu > li > a{ 
  display: block;
  position: relative; 
  padding:11px var(--bs-dropdown-padding-x);    
  display: flex;
  gap: 10px;
  align-items: center;
} 
 
.dropdown-menu > li.active > a,
.dropdown-menu > li > a:hover{  
  background-color: var(--bg-light);
}

 
@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);
  }

}
    
.avatar{
  --avatar-size:40px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; 
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.header .nav{
  background-color: #1D1D1D;
  flex-direction: row;
  gap:14px;
  align-items: center;
  border-radius: 40px;
  padding:8px;
  --nav-h:50px;
}
.nav-menu > li > a{
  border-radius: 50px;
  color: #fff;
  background-color: #292929;
  border-radius: 50px;
  padding:0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--nav-h);
  font-size: 15px;
  font-weight: 300;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.active{
  background-color:#E03526 ;
}
.nav-menu > li.link-home > a{
  border-radius: 50%;
  background-color: #000;
  padding: 0;
  width: var(--nav-h);
}
.nav-menu > li.link-home .icons{
  background-image: url(../img/icons/icon-home.svg);
  --size:23px;
  margin: auto;
}
.nav-menu > li.link-contact > a{
  background-color:#E4000F ;
}

.nav-menu > li.link-home {margin-right: 80px;}
.nav-menu > li.link-contact {margin-left: 80px;}
 
.nav-general .icon-globe{
  --size:var(--nav-h);
  background-color: #000;
  border-radius:50%;
  background-image: url(../img/icons/icon-globe.svg);
  background-size: 24px;
}
.nav-general .lang{
  display: flex;
  align-items: center;
  font-size: 13px;
  color: #5E5E5E;
  gap: 2px;
  padding: 0 20px 0 10px;
}
.nav-general .lang .active{
  font-weight: var(--fw-700);
  color: #fff;
}
.nav-general .lang .line{color: #fff;}
.nav-general +  .nav-general{display: none;}
.navbar-slider {display:none}
.btn-menu{
  --btn-h:51px;
  --bs-btn-bg:#1D1D1D;
  --bs-btn-hover-bg:var(--bs-btn-bg);
  border-radius: 50%;
  width: var(--btn-h);
  padding: 0;
  margin-left: 15px;
  display: none;
}
.btn-menu:before,
.btn-menu:after{display: none;}
.btn-menu .group{
  display: block;
  position: relative;
  width:20px;
  height:14px;
  margin: 0 auto 0
}
.btn-menu .group span{
  height: 2px;

  position: absolute;
  left: 0;
  right: 0;
  border-radius: 0;
  -webkit-transform-origin: 25px, 1px;
  -ms-transform-origin: 25px, 1px;
  transform-origin: 25px, 1px
}
.btn-menu .group span:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background:#fff;
  transition: all 0.25s ease-in-out; 
  border-radius: 50px;
} 

 
.btn-menu .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-menu .group span:nth-child(2) {
    top: 6px; 
    -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-menu .group span:nth-child(3) {
    top: 12px;
    -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-menu .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-menu .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-menu .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(4px, -4px, 0);
  transform: rotate(-45deg) translate3d(4px, -4px, 0)
}
@media (max-width:1580px) {
  .header .nav{
    gap:8px; 
  }
  .nav-general .lang{padding-left: 5px;}

  .nav-menu > li.link-home{margin-right: 25px;}
  .nav-menu > li.link-contact{margin-left: 25px;}
 
}

@media (max-width:1440px) {
  .header .nav{
    --nav-h:45px;
  }

  .nav-menu > li > a{padding: 0 20px;}
 
  .nav-menu > li.link-home .icons{--size:20px;}
  .nav-general .icon-globe{background-size: 20px;}
}

@media (max-width:1280px) {
  .header .nav{
    --nav-h:40px;
  }

  .nav-menu > li.link-home{margin-right:0;}
  .nav-menu > li.link-contact{margin-left:0;}
  .nav-menu > li > a{font-size: 14px;}
}
 
/*==================================================
   Mobile
==================================================*/  
@media (max-width:1090px) {
  .header .nav-menu{display: none;}

  .nav-general +  .nav-general {margin-left:14px; display: flex;}
  .nav-general {margin-left: auto;}

  .btn-menu{display: flex;}
  .navbar-slider {
    --navbar-width:100%; 
  
      position: fixed;
      top: 0;
      right: 0;
      left: auto;
      bottom: 0;
      z-index: 1060;
      width: var(--navbar-width);
      overflow: hidden;
      overflow-y: auto;
      padding: 0; 
      display:flex; 
      align-items: center;
      justify-content: center;
      flex-direction: column;
      background:#000; 
      
      opacity: 1;  
 
      -webkit-transform: translateX(110%);
      -ms-transform: translateX(110%);
      transform: translateX(110%);
      -webkit-transition: -webkit-transform .6s cubic-bezier(.77,0,.175,1);
      transition: -webkit-transform .6s cubic-bezier(.77,0,.175,1);
      -o-transition: transform .6s cubic-bezier(.77, 0, .175, 1);
      transition: transform .6s cubic-bezier(.77,0,.175,1);
      transition: transform .6s cubic-bezier(.77,0,.175,1), -webkit-transform .6s cubic-bezier(.77,0,.175,1);

  }
 
  
  .nav-opened .navbar-slider {
    pointer-events: all;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }

  .navbar-slider .btn-menu{
    position: absolute;
    top:25px;
    right: 25px;
    display: flex;
  }

  .nav-slide {
    flex-direction: column;
  }
  .nav-slide li a{
    color: #fff;
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
    display: block;
  }

  .navbar-slider .nav-general{
    margin:20px auto 0;
    align-items: center;
    background-color: #1D1D1D;
    border-radius: 50px;
    padding:8px;
  }

  .nav-general .icon-globe{
    width: 35px;
    height: 35px; 
  }
}

@media (max-width:670px) {
  .header .nav {
    padding: 5px;
  }

  .btn-menu{--btn-h:45px}
}

@media (max-width:575px) {
  .header .nav{
    --nav-h:44px;
    padding: 0;
  }

  .btn-menu{--btn-h:42px}

  .navbar-slider .btn-menu {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}

/*==================================================
   Section
==================================================*/  
 
.page{
  display: flex;
  position: relative;
  overflow: hidden;    
  padding-top:var(--header-height);
  flex-direction: column;
  min-height: 100%;
  background-color: var(--bg);
  --bg:#fff; 
}  
  
.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#191717;
  z-index: 1090; 
  display:flex;   
} 
  
.loader {
  width: 34px;
  height:34px;
  margin:  auto;
  display: block;
  border-top: 3px solid #F43D2C;
  border-right: 3px solid rgba(255, 255, 255, 0.2);
  border-bottom: 3px solid rgba(255, 255, 255, 0.2);
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  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;  
}
  
.card{ 
  position: relative;
  min-height: 100%;
  --bs-card-border-width:0;
}
.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-body{color: inherit;}

.card.h-auto{min-height: 0;}
 
.card-link{
  position: absolute !important;
  top: 0;
  left: 0; 
  right: 0;
  height: 100%;
  z-index: 100;
  z-index: 40 !important;
}
.card h3,
.card p,
.card .card-body{transition: all 0.2s ease 0s;}
 
.section-banner{ 
  position: relative; 
  flex: unset;
}

.section-body{
  flex: 1 1 auto;
  --padding-top:40px;
  --padding-bottom:40px; 
}
 
.textrow{
  position: relative;
  overflow: hidden;
  display: block;
}
.textrow > span{
  display: inline-block;
}  
  
/*==================================================
   Home
==================================================*/ 
.boxed{
  margin:auto;
  width: 100%;
  max-width: var(--width);
  --width:970px;
}
.line-animate{ 
  height:var(--line-h);
  position: relative;
  width:39px;

  --line-color:var(--yellow);
  --line-h:1px;
}
.line-animate.blue{--line-color:var(--main-blue)}
.line-animate:before{
  content: '';
  position: absolute;
  width: 0;
  height: 100%;
  display: inline-block;
  top: 0;
  background:var(--line-color);
 
  transition: all 0.8s;
  transition-delay: 0.2s;
} 
.line-animate.center{
  margin-left: auto;
  margin-right: auto;
}
.line-animate.center:before{
  left: 50%;
  transform: translateX(-50%);
}
.line-animate.aos-animate:before {width: 100%;}
 
.hgroup{
  display: flex;
  justify-content: center 
} 

.page-disabled-scrollbar{
  position: relative;
  overflow: hidden;
}
.loading-success{
  position: static;
  overflow: unset;
  overflow-x: visible;
}
.page-loading{
  background-color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;

  display: flex;
  overflow: hidden;
}

.page-loading-height{
  height: 100vh;
}

.logo-loading{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  display: flex;
}

.logo-loading .group{
  margin: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: auto;
  width: 370px;

  transition: all 0.8s;
  position: relative;
  top: 0;
  cursor: pointer;
}

.logo-loading .logo{
  width: 430px;
  height: auto;
  position: relative;
  right: -30px;
}
.logo-loading h5{
  font-weight: 200;
  color: #fff;
  font-size: 18px;
  text-align: center;
}


.bg-loading{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0; 
  height: 100%;
  transition: all 0.8s; 
}
 
.bg-loading .bg-1{
  background-image: url(../img/thumb/loading/bg-dot-line.jpg);
}
.bg-loading .bg-2{
  /* background-image: url(../img/thumb/loading/bg.png); */
  background-size: auto;
  z-index: 100;
  display: flex;
  opacity: 0.7;
}
.bg-loading .bg-2 img{ 
  margin: auto;
  object-position: center;   
  width: 3180px;
  position: absolute;
  left: 50%;
  margin-left: -1590px;
  transition: all 1s; 
  position: relative;
  top: -14%;
}
.bg-loading .bg-3{
  background-image: url(../img/thumb/loading/bg-looper.png);
  background-size: auto;
  height: 100%;
  bottom: auto;
  top: 70%;
  z-index: 101;
  mix-blend-mode: color-dodge;
  transition: all 0.8s;  

 
}
html.loading-step-1 .logo-loading .group {
  top: -70%;  
  transition-delay: 0.1s; 
  opacity: 0;
}
html.loading-step-1 .bg-loading{
  top: 0;
  transition-delay: 0.1s; 
  opacity: 1;
  margin-top: 0;
}
html.loading-step-1 .bg-loading .bg-3{
  top: 50%;  
  transition-delay: 0.5s;
  margin-top: 0;
}
html.loading-step-2 .bg-loading .bg-2 img{ 
  transition-delay: 0.25s;
  transform: scale(.96) rotate(-10deg);
  top:20%;
 
}
html.loading-step-2 .bg-loading .bg-3{
  margin-top: -8%;  
  transition-delay: 0.25s;
}

 
.section-banner{
  width: 100%;
  height: 100vh;
  position: absolute;
  z-index: 100;
}

.section-banner .container-fluid{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

.section-banner.highlight {
  text-align: center;
  color: #fff;
  z-index: 200;
  pointer-events: none;
 
}
.section-banner.highlight .fade-up{
  transition-duration: 1.2s;
  opacity: 0;
  transition-property: opacity, transform;
  transform: translate3d(0, 100px, 0) scale(0.6);
}
.header .container-fluid.fade-down{
  transition-duration: 1.2s;
  opacity: 0;
  transition-property: opacity, transform;
  transform: translate3d(0, -100px, 0);
  transition-delay: 0.55s;
}
.section-banner.highlight h1{
  font-size: 70px;
  color: inherit;
  font-weight: var(--fw-700);
  margin-bottom: 14px;
}
.section-banner.highlight h2{
  font-size: 36px;
  color: inherit;
  font-weight: var(--fw-400);
}
.section-banner.highlight h1 > .fade-up{ transition-delay: 0.55s;}
.section-banner.highlight h2 > .fade-up{ transition-delay: 0.55s;}

.section-banner.highlight .buttons{
  padding: 0;
  overflow: hidden;
  margin-top: 45px;
}
.section-banner.highlight .buttons .btn{transition-delay: 0.55s;}
html.loading-step-2 .section-banner.highlight{
  pointer-events: all;
}
html.loading-step-2 .section-banner.highlight .fade-up,
html.loading-step-2 .header .container-fluid.fade-down{
  opacity: 1;
  transform: translateZ(0);
}

html.loading-success .page-loading{
  position: absolute;
}

.section-dark{
  background: rgb(0, 0, 0);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}
.section-white{
  background: rgb(255, 255, 255);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  padding: 0;
  pointer-events: none;
}
@media (max-width:1440px) {
  .section-banner.highlight h1{font-size: 59px;}
  .section-banner.highlight h2{font-size:28px;}
}

@media (max-width:1280px) {
  .logo-loading .logo{width: 320px; right: -20px;}
  .logo-loading h5{font-size: 16px;}

  .section-banner.highlight h1{font-size: 50px;}
  .section-banner.highlight h2{font-size:22px;}

  .bg-loading .bg-2 img{
    width: 2000px;
    margin-left: -1000px;
  }

}
@media (max-width:1024px) {
  .section-banner.highlight h1{font-size:45px;}
}

@media (max-width:991.98px) {
  .bg-loading .bg-2 img{
    width:1100px;
    margin-left:-550px; 
  }

  html.loading-step-2 .bg-loading .bg-3{margin-top: -12%;}
}

@media (max-width:670px) {
  .logo-loading .logo{width: 220px; right: -10px;}
  .logo-loading h5{font-size: 13px;}

  .section-banner.highlight h1{
    font-size:32px; 
  }
  .section-banner.highlight h2{font-size:16px;}

  .section-banner.highlight .buttons{margin-top: 35px;}

  .bg-loading .bg-2 img{
    width:900px;
    margin-left:-350px; 
  }

  .bg-loading .bg-3{background-size:1400px ;}
  html.loading-step-1 .bg-loading .bg-3,
  html.loading-step-2 .bg-loading .bg-3{margin-top: -20%;}
}

@media (max-width:440px) {
  .section-banner.highlight h1{
    font-size:42px;
    margin: 0 auto;
    width: 100%;
    max-width: 320px;
    margin-bottom: 10px;
  }
}

@media (max-width:380px) {
  .section-banner.highlight h1{font-size:13vw;}
}

/*==================================================
   Home - About
==================================================*/ 

.section-highlight-about{
  padding: 200px 0 200px;
  display: flex;
  align-items: center;
}
.section-highlight-about .background{
  background-image: url(../img/thumb/bg-about.svg);
  background-size: auto;
  background-position: top center;
  top:50px;
}
.section-highlight-about .boxed.main{
  display: flex; 
  gap:120px;
  justify-content: center;
  --width:100%
}
.section-highlight-about .col-left{ 
  position: relative; 
  width: 100%;
  width: 465px;
}
.section-highlight-about .col-right{  
  position: relative;  
}
.section-highlight-about .article{ 
  font-size:20px;
}
.section-highlight-about .article h2{
  font-size:50px;
  margin-bottom: 25px;
}
.section-highlight-about .logo-icon{
  width: 100%; 
  z-index: 10;
  position: relative;
}

.section-highlight-about .line{
  width: 211px;
  position:absolute;
}
.section-highlight-about .line h5{
  color: var(--text-red);
  font-size: 20px;
  font-weight: var(--fw-400);
  margin-bottom: 11px;
}
.section-highlight-about .line.bottom{
  left: 83%;
  bottom: 34%;
}

.section-highlight-about .line.top{
  left: 9%;
  top: -4%;
}
.section-highlight-about .line.top img{
  transform: rotate(-180deg);
}
.about-bubble-list{
  display: flex;
  align-items: center; 
  gap:35px;
  margin: 40px 0; 
  height: 275px;
}

.card-about-bubble{
  position: relative;
  /* width:calc(33.333% - 30px); */
  flex-shrink: 0;
  width: 235px;
  transition: all 0.35s;
}
.card-about-bubble:hover{
  width: 275px;
}
.card-bubble{
  width:100%;
  height: 100%; 
  position: absolute;
  top: 0;
  left: 0;
  background-color: #ccc;
  border-radius: 50%; 
}
.card-bubble:before,
.card-bubble:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
}
.card-bubble:before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(46, 46, 46, 1) 100%);
}
 
.card-bubble:after{
  background-color: #fff;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
}

.card-about-bubble:hover > .card-bubble:before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%);
}
 
.card-about-bubble .card-body{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: center;
}
.card-about-bubble h3{
  font-size: 24px;
  font-weight: var(--fw-400);
}
.card-about-bubble p{
  margin: 0;
  font-size: 18px;
  color: #515151;
  transition: all 0.25s;
}
.card-about-bubble .icons{
  --size:62px;
  background-color: #1E1C1C;
  border-radius: 50%;
  margin-bottom: 15px;
  background-image: 27px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-about-bubble .icons img{
  width: 24px; 
  object-fit: contain;
  object-position: center;
  transition: all 0.25s;
}
.card-about-bubble:hover .icons{
  --size:90px; 
  background-color: #E4000F;
} 

.card-about-bubble:hover h3{
  color: #E4000F;
  font-weight: var(--fw-700);
}
.card-about-bubble:hover p{
  color: #E4000F;
}
.card-about-bubble:hover .icons img{
  width: 40px;
}

.link-more{
  display: flex;
  align-items: center;
  gap: 15px;
}
.link-more .text{
  font-size: 18px;
  font-weight:800;
  line-height: 1.1;
  border-bottom: 2px solid #000;
  display: inline-block;
  position: relative;
  background: linear-gradient(65.07deg, #000000 60.21%, rgba(177, 177, 177, 0) 108.83%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.link-more.text-white .text{
  background: linear-gradient(55deg, #FFFFFF 70.21%, rgba(177, 177, 177, 0) 95.15%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;

}
 

.link-more .text{}
 
.link-more .icon-circle{
  width: 52px;
  height: 52px;
  background-color:#E03526;
  border-radius: 50%;
  display: flex;
}

.link-more .icon-circle .icons{
  margin: auto;
  background-image: url(../img/icons/icon-next.svg);
  --size:12px;
}

.link-more:hover .icon-circle .icons{
  transform:rotate(45deg)
}

@media (max-width:1550px){  
  .section-highlight-about .boxed.main{
    gap: 100px;
  }
  .section-highlight-about .article h2{
    font-size: 40px;
  }
  .section-highlight-about .article{
    font-size: 18px;
  } 
   
  .card-about-bubble{
    width: 205px;
  }

  .about-bubble-list{
    height: 250px;
    gap: 25px; 
  }
  .card-about-bubble .icons {
    --size:50px;
  }

  .card-about-bubble h3{font-size: 20px;}
  .card-about-bubble p{font-size: 16px;}
  .card-about-bubble .icons img{width: 20px;}
  .card-about-bubble:hover{width: 245px;}
  .card-about-bubble:hover .icons{--size:70px}
  .card-about-bubble:hover .icons img{width: 30px;}

}

@media (max-width:1366px){
  .section-highlight-about .boxed.main {
    gap:60px;
  }
 
  .section-highlight-about{
    padding: 120px 0 120px;
  }
}

@media (max-width:1199px){
  .section-highlight-about{
    padding: 80px 0 80px;
  }
  .section-highlight-about .background{
    top: 0;
  }
  .section-highlight-about .col-left{
    width: 360px;
    margin: 80px auto 0;
  }
  .section-highlight-about .article h2{
    font-size:32px;
    margin-bottom: 15px;
  }

  .section-highlight-about .boxed.main{
    flex-direction: column;
  }

  .section-highlight-about .col-right{
    margin: 0 auto;
    width: auto;
  }
  .section-highlight-about .article{
    text-align: center;
  }
  .about-bubble-list{
    justify-content: center;
  }

  .section-highlight-about .link-more{
    margin-right: auto;
  }

  .section-highlight-about .line.top {
    left: 2%;
    top: -17%;
  }
  
}

@media  (min-width:690px) and (max-width:880px){
  .card-about-bubble{
    width: 170px;
  }
  .card-about-bubble .icons{
    --size:40px;
  }

  .card-about-bubble:hover {
    width: 210px;
  }

  .card-about-bubble:hover .icons{
    --size:50px
  }
  .card-about-bubble:hover .icons img{width: 22px;}
  .card-about-bubble h3{font-size: 16px;}
  .card-about-bubble p{font-size: 13px;}
  .card-about-bubble .icons img{width: 17px;}
  .about-bubble-list{height: 210px;}

  .section-highlight-about .article{font-size: 16px;}
}

@media (max-width:689px){
  .about-bubble-list{
    flex-direction: column;
  }

  .about-bubble-list{
    height: auto;
    gap: 35px;
  }

  .section-highlight-about{
    padding: 30px 0 60px;
  }
}

@media  (min-width:576px) and (max-width:767px){

}

@media (max-width:575px){
  .section-highlight-about .boxed.main{gap: 40px;}
  .section-highlight-about .article h2{
    font-size: 24px;
  }
  .section-highlight-about .article{
    font-size: 15px;
  }
  .section-highlight-about .article p br{
    display: none;
  }

  .link-more .text{font-size: 16px;}
  .link-more .icon-circle{
    width: 48px;
    height: 48px;
  }

  .section-highlight-about .col-left{
    width: 250px;
  }

  .section-highlight-about .line.bottom{
    display: none;
  }
  .section-highlight-about .line{width:110px;}
  .section-highlight-about .line h5{font-size: 16px; margin-bottom: 5px;}
}

  
/*==================================================
   Our Solution
==================================================*/ 
.section-highlight-solution{
  padding: 100px 0; 
  overflow: hidden;
  background-color: #000;
}
.section-highlight-solution .background{
  opacity: 0.8;
  background-image: url(../img/thumb/bg-solution.jpg);
  background-size: auto;
  /* backdrop-filter: blur(10px);  */
  filter:blur(5px);
  top: -10px;
  left: -20px;
  right: -20px;
  bottom: -20px;

}
.hexagon {
  position: relative; 
  width: 221px; 
  background-position:center;
  background-repeat: no-repeat;
  background-size: contain;
 
}
 
.hexagon img{opacity: 0.6; width: 100%; height: auto;}
.hexagon img.flip{transform: rotate(-180deg);}
.hexagon .infos{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hexagon .infos:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/hexagon-hover.svg);
  opacity: 0;
  transition: all 0.25s;
}
.hexagon:hover .infos:before{opacity: 1;}
.hexagon .infos .icons{
  height: auto;
  width: var(--w);
  --w:18px;
  margin-bottom: 10px;
  z-index: 10;
}
.hexagon .infos .icons path{fill: #fff; opacity: 0.8;}
.hexagon h3{
  font-size: 16px;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 10;
}
.hexagon h3.lg{
  font-size: 40px;
}
.hexagon:hover h3.lg{
  background: linear-gradient(108.33deg, #FFFFFF 71.47%, #E03526 93.28%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;

}

.hexagon-boxed{
  position: relative;
  display: flex;
  height: 816px;
  width: 770px;
  margin-left: auto;
  /* backdrop-filter: blur(10px); */
}
.hexagon-boxed .rows{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  margin-left: -40px;
  position: relative; 
}
.hexagon-boxed .rows:first-child{margin-left: 0;}
 
.section-highlight-solution .boxed.main{
  --width:1240px;
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-highlight-solution .article{
  font-size: 20px;
  max-width: 335px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  position: relative;
  z-index: 100;
}
.section-highlight-solution .article p{
  background: linear-gradient(70.24deg, #FFFFFF 83.27%, rgba(177, 177, 177, 0.1) 96.17%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.section-highlight-solution .article h2{
  font-size: 50px;
  color: #fff; 
  background: linear-gradient(71.59deg, #FFFFFF 70.21%, rgba(177, 177, 177, 0) 92.15%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
 
@media (max-width:1366px){
  .hexagon{width: 190px;}
  .hexagon-boxed{width: auto;}
  .hexagon-boxed .rows{margin-left: -31px; gap: 12px;}
  .hexagon h3{font-size: 15px;}
  .hexagon h3.lg{font-size: 34px;}
}

@media (max-width:1280px){
  .section-highlight-solution{padding: 40px 0 0;}
  .section-highlight-solution .article h2{font-size: 40px;}
  .section-highlight-solution .article {
    font-size: 16px;
    max-width:265px;
    gap: 20px;
  }

  .hexagon{width: 170px;}
  .hexagon-boxed{width: auto;}
  .hexagon-boxed .rows{gap: 8px;}
  .hexagon h3{font-size: 14px;}
  .hexagon h3.lg{font-size: 30px;}
}

@media (min-width:576px) and (max-width:670px){
  .hexagon{width: 140px;}
  .hexagon-boxed{width: auto;}
  .hexagon-boxed .rows{gap: 8px; margin-left: -22px;}
  .hexagon h3{font-size: 11px;}
  .hexagon h3.lg{font-size: 20px;}
}

@media (max-width:991.98px){
  .section-highlight-solution{padding-top: 70px;}
  .section-highlight-solution .boxed.main{
    flex-direction: column;
  }
  .hexagon-boxed{
    margin: auto;
  }
}

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

@media (max-width:575px){
  .section-highlight-solution{
    padding: 40px 0 20px;
  }
  .hexagon-boxed{
    flex-wrap: wrap;
    width: 340px;
    margin-top: 50px;
    margin-bottom: 0;
  }

  .hexagon-boxed .hexagon.opacity-0{display: none;}
  .hexagon-boxed .rows{margin-left: -28px; gap: 10px;justify-content: flex-start; }
  .hexagon-boxed .rows:nth-child(1){padding-top: 80px;}
  .hexagon-boxed .rows:nth-child(3){margin-left: 0; margin-top: -83px; }
  .hexagon-boxed .rows:nth-child(3) .hexagon:nth-child(1),
  .hexagon-boxed .rows:nth-child(3) .hexagon:nth-child(4){display: none;}
  .hexagon-boxed .rows:nth-child(4){justify-content: flex-start; margin-top: -2px;}
}

/*==================================================
  News
==================================================*/ 
.section-highlight-news{
  padding: 140px 0 140px;
}
.section-highlight-news .background{
  background-image: url(../img/thumb/bg-news.svg);
  background-size: auto;
  background-position: top center;
  top: 50px;
}
.title-news .btn-tag{
  padding: 0 20px;
  font-size: 20px;
  display: inline-block;
  border-radius: 10px;
  --btn-h:58px;
}

.title-news{
  font-size: 42px;
  font-weight: var(--fw-700);
}

.nav-underline-tabs{
  border: 0;
  gap: 55px;
 margin-bottom: 30px;
  --bs-nav-link-color:#808080;
  --bs-nav-link-hover-color:#000;
  --bs-nav-link-active-color:#000;
  --bs-nav-link-padding-x: 0;
  --bs-nav-link-padding-y: 15px;
  --bs-nav-link-font-size:30px;
}
.nav-underline-tabs .nav-link{
  border: 0;
  margin: 0;
  border-radius: 0;
 
  display: block;
  position: relative;
  line-height: 1;
}
 
.nav-underline-tabs .nav-link:before{
  content: '';
  position: absolute;
  left: 0;
  
  bottom: -15px; 
  height: 15px;
  width: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  background-size: auto 100% ;
  background-image: url(../img/thumb/tab-underline.svg);
  transition: all 0.25s;
  opacity: 0;
}

.nav-underline-tabs .nav-link.active:before{
  opacity: 1;
}

.card-highlight-news{
  display: flex;
  height: 388px;
  background-color: #1E1C1C;
  border-radius: 20px;
  margin: 50px 0 65px;
}
.card-highlight-news .card-photo{
  width:61%;
  border-radius: 20px;
}
.card-highlight-news .photo{
  width: 100%;
  height: 100%;
}
.card-highlight-news .card-body{
  display: flex;
  flex-direction: column;
  padding:50px 50px;
  color:#DCDCDC;
  gap: 10px;
  justify-content: space-between;
  font-size: 15px;
  width: 39%;
}
.card-highlight-news .card-body h3{
  color: #fff;
  margin-bottom: 10px;
  font-size: 28px;
}
.card-highlight-news .card-body p{
  overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.card-highlight-news .card-body p.date{
  font-size: 14px;
}
.card-highlight-news .tags{
  background-color: #F6F6F6;
  color: #BF202F;
  font-size: 14px;
  font-weight: var(--fw-700);
  min-height: 32px;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 50px;
  margin-right: auto;
}
.card-news {  
  position: relative;
  transition: all 0.25s;
  padding-top: 0; 
  padding-bottom: 10px;
}

.card-news * {transition: all 0.25s;}

.card-news .card-see-more{
  border-radius: 20px;
  background-color: #E4000F;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  color: #fff;
  height: 57px;
  transition: all 0.25s;

  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.card-news .card-see-more p{
  margin: 0;
  font-size: 20px;
  font-weight: var(--fw-400);
}
.card-news .card-see-more .icons{
  --size:18px;
  background-image: url(../img/icons/icon-see-more.svg);
}

.card-news .card-groups{
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 20px; 
  margin-top: 0; 
}
.card-news .card-groups *{position: relative; z-index: 10;}
.card-news .card-groups:before{
  content: '';
  position: absolute;
  top: -1px;
  left: -1px; 
  right: -1px;
  bottom: -1px; 
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%);
  border-radius: inherit;
  opacity: 0;
  transition: all 0.25s;
}

.card-news .card-photo{
  border-radius: 20px 20px 0 0;
}
.card-news .card-body{
  color: #fff;
  padding:25px 20px;
  background-color: #1E1C1C;
  border-radius: 0 0 20px 20px;
}
.card-news .card-body h3{
  font-size:19px;
  color: #fff;
  margin-bottom: 5px;
  transition: all 0.25s;
  font-weight: var(--fw-700);

  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-news .card-body p{
  margin: 0;
  font-size: 15px;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-news .tags{
  font-size: 10px;
  position: absolute;
  top:20px;
  left:20px;
  background-color: #F6F6F6;
  border-radius: 50px;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #BF202F;
}
 
.card-news:hover .card-groups:before{opacity: 1;}
.card-news:hover .card-body{background-color: #F5F5F5;}
.card-news:hover .card-body h3{color: #303030;}
.card-news:hover .card-body p{color: #7A7A7A;}

.card-news:hover {padding-top: 80px;}
.card-news:hover .card-see-more{opacity: 1;}
.card-news-list > div{position: relative;}

.row.card-news-list {
  --bs-gutter-x:45px;
  --bs-gutter-y:45px;
}

.card-news.p-0 .card-groups:before{opacity: 1;}
.card-news.p-0 .card-body{background-color: #F5F5F5;}
.card-news.p-0 .card-body h3{color: #303030;}
.card-news.p-0 .card-body p{color: #7A7A7A;}

.card-news.p-0:hover .card-groups:before{opacity: 0;}
.card-news.p-0:hover .card-body{background-color: #1E1C1C;}
.card-news.p-0:hover .card-body h3{color: #fff;}
.card-news.p-0:hover .card-body p{color: #fff;}

.swiper-news{height: 480px; padding-left: 1px;padding-right: 1px;}
 
.swiper-button{
  width: 52px;
  height: 32px;
  border-radius: 16px;
  background-color: #fff;
  box-shadow: 0px 6px 20px rgba(150, 150, 150, 0.63);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}
.swiper-button-prev{left: 0;}
.swiper-button-next{right: 0;}
.swiper-button:hover{background-color: #404040;}
.swiper-button:hover path{fill: #A5A5A5;}
.swiper-button-prev .icons{
  transform: rotate(-180deg);
}

.swiper-button-container{
  display: flex;
  position: relative;
  align-items: center;
}

.swiper-button-container .swiper-pagination{padding-top: 0;}
.swiper-button-container .swiper-button{
  position: relative;
  left: auto;
  right:auto;
  top: auto;
  margin: 0;
}
 
.swiper-button-container .swiper-button-next{
  margin-left: 20px;
}
.swiper-button-container .btn{
  margin: 0 auto;
  width: 128px;
}
.swiper-button-container .buttons{
  margin:  auto;
  padding: 0;
}

.swiper-button.button-star{
  width:60px;
  height:60px;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../img/icons/icon-btn-slide-star.svg);
  background-size: contain;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
  margin-top: -30px;
}

.swiper-button.button-star .icons{
  --size:18px;
  background-image: url(../img/icons/icon-btn-slide-arrow.svg);
}
.swiper-button-prev.button-star{left:50px;}
.swiper-button-next.button-star{right:50px;}
.swiper-button.button-star:hover{opacity: 0.9;}
@media (max-width:1440px){ 
  .row.card-news-list {
    --bs-gutter-x:35px;
    --bs-gutter-y:35px;
  } 
}
 
@media (max-width:1280px){
  .section-highlight-news{padding: 80px 0;}
  .section-highlight-news .background{
    background-size: 160%;
  }
  .title-news{
    font-size: 38px;
  }
  .title-news .btn-tag{
    --btn-h:50px;
    font-size: 18px;
  }

  .nav-underline-tabs{
    gap:40px;
    --bs-nav-link-font-size: 25px;
  }
  .nav-underline-tabs .nav-link:before{
    height: 12px;
    bottom: -12px;
  }

  .card-highlight-news .card-body{
    padding: 35px;
  }
  .card-news .card-see-more{
    padding: 0 20px;
    height: 50px;
    border-radius: 16px;
  } 
  .card-news .card-see-more p {
    font-size: 18px;
  }
  .card-news:hover{padding-top:65px;}
  .card-news .card-body{padding: 20px;}
  .card-news .card-body h3{font-size: 17px;}

  .card-news .tags {
    font-size: 10px;
    position: absolute;
    top:15px;
    left: 15px;
    height: 22px;
  }

  .swiper-news{height: auto; margin-bottom: 40px;}

  .row.card-news-list {
    --bs-gutter-x:25px;
    --bs-gutter-y:25px;
  } 
}

@media (min-width:768px) and (max-width:1199px){
  .card-news.p-0 .card-body{padding-left: 15px; padding-right: 15px;}
  .card-news.p-0 .card-body h3{font-size: 16px;}
  .card-news.p-0 .card-body p{font-size: 14px;}
}

@media (max-width:991.98px){
  .title-news{
    font-size: 30px;
  }
  .title-news .btn-tag{
    --btn-h:46px;
    font-size: 16px;
    padding: 0 15px;
  }

  .card-highlight-news{
    flex-direction: column;
    height: auto;
    margin: 30px 0;
  }
  .card-highlight-news .card-photo{
    width: 100%;
    height: 40vw;
    border-radius:20px 20px 0 0;
  }

  .card-highlight-news .card-body{
    padding: 50px 30px 25px;
    width: 100%;
  }
  .card-highlight-news .tags{
    margin-bottom: 20px;
  }
}

@media (max-width:670px){
  .section-highlight-news{
    padding:40px 0;
  }
  .nav-underline-tabs{
    gap:20px;
    margin-bottom:25px;
    --bs-nav-link-font-size:18px;
  }
  .nav-underline-tabs .nav-link:before{
    height: 8px;
    bottom: -5px;
  }

  .title-news{
    font-size: 24px;
  }
  .title-news .btn-tag {
    --btn-h:35px;
    font-size: 13px;
    padding: 0 10px;
  }
  .title-news .btn-tag .icons{width: 14px; height: 14px;}

  .card-highlight-news .card-photo{height: 55vw;}
  .card-highlight-news .card-body{
    padding: 30px 20px 25px;
  }
  .card-highlight-news .card-body h3{font-size: 22px;}
  .card-highlight-news .tags{
    font-size: 12px; 
    min-height: 20px; 
    padding: 5px 10px;
    margin-bottom: 15px;
  }
  .card-highlight-news p{margin-bottom: 0;}
  .card-highlight-news p.date{padding-top: 10px;}
  .card-news{padding-top: 0 !important;}
  .card-news .tags {top: 20px; left: 20px;}

  .swiper-news{margin-bottom: 20px;}


}

@media (min-width:441px) and (max-width:670px){
  .row.card-news-list {
    --bs-gutter-x: 15px;
    --bs-gutter-y: 25px;
  }
  .row.card-news-list > div{ width: 50%;}
  .card-news.p-0 .card-body{padding-left: 15px; padding-right: 15px;}
  .card-news.p-0 .card-body h3{font-size: 16px;}
  .card-news.p-0 .card-body p{font-size: 14px;}
}

@media (max-width:575px){
  .swiper-news{
    height: auto; 
    margin-bottom:20px; 
    overflow:visible;
    padding: 0;
  }
  .swiper-news .swiper-slide {width: 320px; padding-right: 20px;}
  .swiper-button-container .swiper-button-prev{margin-left: auto;}
  .swiper-button-container .swiper-button-next{margin-left: 10px;}
  .swiper-pagination-bullet{width: 12px;}
  .swiper-pagination-bullet-active{width: 35px;}
 
  .swiper-button-container .btn{margin-right: 0; width: auto;}
  .swiper-button-container .swiper-button{display: none;}
  .card-news.p-0 .card-body{padding-left: 15px; padding-right: 15px;}
 
}

@media (max-width:440px){
  .swiper-news .swiper-slide {width: calc(100vw - 20px);}
  .row.card-news-list > div{ width: 100%;}
}


/*==================================================
 Business Alliance
==================================================*/ 

.section-highlight-alliance{
  background-color: #EEEEEE;
  padding: 120px 0 120px;
}
.section-highlight-alliance .background{
  background-image: url(../img/thumb/bg-alliance.png);
  background-size: auto;
  background-position: top right;
}
.section-highlight-alliance .background:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(238, 238, 238, 0.83);
}
.section-highlight-alliance .background:after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100px;
  background: linear-gradient(180deg, #FFFFFF 68.71%, rgba(255, 255, 255, 0) 96.77%);
transform: rotate(-180deg);
}
.section-highlight-alliance .background.shadow-0:after{display: none;}
  
.section-highlight-alliance .article{
  font-size: 20px;
}
.section-highlight-alliance .article h2{
  font-size: 52px;
  margin-bottom: 10px;
}
.section-highlight-alliance .article p{
  max-width: 680px;
  background: linear-gradient(71.59deg, #000000 75.95%, #E03526 92.5%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;

}
 
.card-partner{
  width: 83%;
  height: auto;
  position: relative;
  margin: 0 auto;
}

.card-partner .card-bubble::before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%);
}

.card-partner .card-photo{
  width: 100%;
  height: 100%;
  display: flex; 
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}
.card-partner .card-photo:before,
.card-partner .card-photo:after{opacity:0; transition: all 0.25s;}
.border-gradient{
  border-radius: inherit;

  --bg-before:conic-gradient(from 180deg at 50% 50%, #5C93FF -16.75deg, rgba(122, 215, 255, 0.45) 7.58deg, #73A3FF 116.08deg, rgba(102, 209, 255, 0.05) 178.34deg, #83ADFF 251.48deg, #6B9DFF 308.27deg, #5C93FF 343.25deg, rgba(122, 215, 255, 0.45) 367.58deg);
  --bg-after:#E4000F;
}
.border-gradient:before,
.border-gradient:after{
  content: '';
  position: absolute; 
  border-radius:inherit;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
}
.border-gradient:before{
  background:var(--bg-before);
}
.border-gradient:after{
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
  z-index: 2;
  background:var(--bg-after);
}
.card-partner .card-photo img{
  margin: auto;
  /* width:calc(100% - 20px);
  height:95px; */
  width:calc(100% - 2px);
  height:calc(100% - 2px);
  object-fit: contain;
  object-position: center;
  position: relative;
  z-index:10; 
  filter: none;
  -webkit-filter: grayscale(100%); 
  filter: grayscale(100%);
  transition: all 0.25s;
  
}  
.card-partner .card-icon{
  width: 52px;
  height: 52px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-radius: 50%;
  display: flex; 
  opacity: 0;
  transition: all 0.25s;
  transform: scale(0.5);
  z-index: 20;

  --bg-before:conic-gradient(from 180deg at 50% 50%, #5C93FF -16.75deg, rgba(122, 215, 255, 0.45) 7.58deg, #73A3FF 116.08deg, rgba(102, 209, 255, 0.05) 178.34deg, #83ADFF 251.48deg, #6B9DFF 308.27deg, #5C93FF 343.25deg, rgba(122, 215, 255, 0.45) 367.58deg);
  --bg-after:#000000;
}
.card-partner .card-icon .icons{z-index: 10; margin: auto; --size:11px}
.card-partner .card-icon path{fill: #fff;}

.card-partner:hover .card-icon{bottom: 5px; transform: scale(1); transition-delay: 0.15s; opacity: 1;}
.card-partner:hover .card-photo:before,
.card-partner:hover .card-photo:after{opacity:1; }

.card-partner:hover .card-photo img{

  -webkit-filter: grayscale(0); 
  filter: grayscale(0);
}

.swiper-overflow{
  position: relative;
}
.swiper-overflow.partner{
  margin-bottom: 100px;
}
.swiper-partner{
  margin:70px auto 0;
  max-width: 1320px;
}
.swiper-partner .swiper-slide{
  width: 20%;
}

.swiper-overflow.partner .swiper-pagination{display: none;}
@media (max-width:1580px){
  .swiper-overflow.partner{
    padding: 0 60px;
  }
}
@media (max-width:1366px){
  .card-partner:hover .card-icon{
    width: 46px;
    height: 46px;
  }
}

@media (max-width:1280px){ 
  .section-highlight-alliance .article h2{font-size: 40px;}
  .section-highlight-alliance .article{font-size: 18px;}

  .swiper-overflow.partner{
    margin-bottom:70px;
  }
  .swiper-partner{
    margin-top: 50px;
  }
  .section-highlight-alliance .background{
    background-size: cover
  }
}

@media (max-width:1199px){
  .card-partner:hover .card-icon{
    width: 40px;
    height: 40px;
  }
  .card-partner .card-icon .icons{
    --size:9px;
  }
}

@media (max-width:991.98px){ 
  .section-highlight-alliance .article{font-size: 16px;}
  .section-highlight-alliance .article p{max-width: 592px;}
  .card-partner:hover .card-icon{width: 35px; height: 35px;}
  .card-partner .card-icon .icons{--size:7px}
}

@media (max-width:840px){
  .swiper-partner .swiper-slide {width: 25%;}
}

@media (max-width:767px){
  .section-highlight-alliance{
    padding: 50px 0;
  }

  .section-highlight-alliance .article h2{font-size: 32px;}
  .swiper-overflow.partner{padding: 0;}
  .swiper-overflow.partner .swiper-button{display:none;}
  .swiper-overflow.partner .swiper-pagination{display: flex;}
}
@media (max-width:575px){ 
  .section-highlight-alliance{
    padding:40px 0;
  }
  .section-highlight-alliance .article {font-size: 15px;}
  .section-highlight-alliance .article h2{font-size: 24px;}

  .swiper-partner{margin-top: 30px;}
  .swiper-partner .swiper-slide{width: 33.33%;}
  .swiper-overflow.partner .swiper-pagination-bullet-active{width: 12px;}
}

@media (max-width:440px){
  .swiper-partner .swiper-slide{width:50%;}
}

/*==================================================
 Customers Innovating on AWS
==================================================*/ 

.section-highlight-client{
  padding: 50px 0 80px;
}
.section-highlight-client h2{
  font-size: 36px;
  text-align: center;
}

.card-client-list{
  padding-top:25px;
}
.card-client{
  position: relative;
  height: 190px;
  width: 100%;
  max-width: 190px;
  display: flex;
  margin: 30px auto;
}
.card-client .card-triangle{
  position: absolute;
  top:0;
  left: 0;
  width:190px;
  height:190px; 
}
.card-client .card-triangle:before,
.card-client .card-triangle:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: all 0.25s;
}
.card-client .card-triangle:before{
  background-image: url(../img/thumb/triangle.png);
}
.card-client .card-triangle:after{
  opacity: 0;
  background-image: url(../img/thumb/triangle-black.png);
}
.card-client:hover .card-triangle:before{opacity: 0;}
.card-client:hover .card-triangle:after{opacity: 1;}
.card-client .card-triangle.rotate-45{transform: rotate(45deg); margin: -15px 0 0 13px;}
.card-client .card-triangle.rotate-105{transform: rotate(105deg);margin: 32px 0 0 25px;}
.card-client .card-groups{
  position: relative;
  width: 157px;
  margin: auto;
  z-index: 5;
}
.card-client .card-photo{
  border-radius: 50%;
  overflow: hidden;
  padding: 1px;
}
.card-client .card-photo img{
  border-radius: 50%;
  width: 100%;
}
.card-client .card-bubble::before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%);
}

@media (max-width:1400px){
  .card-client-list > div{width: 20%;}
}
@media (max-width:1199px){
  .card-client-list > div{width: 25%;} 
}
@media (max-width:991.98px){
  .section-highlight-client{padding-top: 0;}
  .card-client-list > div{width: 33%;}

  .card-client{
    margin: 20px auto;
  }
  .card-client,
  .card-client .card-triangle{
    width: 160px;
    height: 160px;
  }
  .card-client .card-groups{
    width:82%;
  }
  .card-client .card-triangle.rotate-105{margin-top: 30px;}

  .section-highlight-client h2{font-size: 32px;}
}

@media (max-width:575px){
  .section-highlight-client{margin-top: -30px;}
  .section-highlight-client h2{font-size: 24px;}
 
  .card-client{
    margin: 10px auto;
  }
  .card-client,
  .card-client .card-triangle{
    width: 120px;
    height: 120px;
  }
  .card-client .card-triangle.rotate-105 {margin: 21px 0 0 17px;}
  .card-client .card-triangle.rotate-45 { margin: -7px 0 0 6px;}
}

@media (max-width:440px){
  .card-client,
  .card-client .card-triangle{
    width: 100px;
    height: 100px;
  }
}

/*==================================================
News
==================================================*/ 

.section-news{
  padding-top: 100px;
}

.section-news .background{
  background-image: url(../img/thumb/bg-news-2.svg);
  background-size: auto;
  background-position: top center;

  top:calc(var(--header-height) * -1); ;
}

.section-filter{
  display: flex;
  gap: 25px; 
  padding: 40px 0;
}
.section-filter .form-select{
  max-width: 269px;
}

.form-group.search{
  display: flex;
  gap: 20px;
}
.section-filter .form-group.search .form-control.w-400{width: 400px;}
.section-filter .form-group.search .btn{width: 170px; padding: 0;}
.icon-search{background-image:url(../img/icons/icon-search.svg);}

hr{
  opacity: 1;
  border-color: #ECECEC;
}

.pagination{
  --bs-pagination-padding-x:0;
  --bs-pagination-padding-y:0;
  --bs-pagination-border-width:1px; 
  --bs-pagination-font-size:14px;
  --bs-pagination-bg:#fff;
  --bs-pagination-color:#1C1C1C;
  --bs-pagination-border-color:#DADADA;
  --bs-pagination-hover-color:#fff;
  --bs-pagination-hover-bg:#E03526;
  --bs-pagination-hover-border-color:#DADADA;
  --bs-pagination-active-bg:#E03526;
  --bs-pagination-active-border-color:#DADADA;
  --bs-pagination-focus-bg:#fff;
  --bs-pagination-focus-color:#1C1C1C;
  --bs-pagination-focus-border-color:#DADADA;

  --bs-pagination-disabled-color:#DADADA;
  padding:20px 0;
  margin-bottom: 0;
  justify-content: center;
  gap:14px; 
}
.page-link{ 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height:48px;
  width: 48px; 
  box-shadow: none !important; 
  border-radius: 16px;
}
.page-link small{font-size: 12px; font-weight: 500;}
.page-link.text{padding: 2px 0 0; width: 62px;}
.page-link.dot{ 
  border: 0 !important;
  pointer-events: none;
}
.page-link.arrow{ 
  background-color: transparent;
  border: 0;
  width: 35px;
} 
.page-link.arrow path[fill]{fill: #5D5D5D;}
.page-link.arrow path[stroke]{stroke: #5D5D5D;}

.page-link.arrow:hover {border-color: #5D5D5D !important;}  

.page-link .icons{
  width: 100%;
  height: 100%;
  top: -1px;
  background-image: url(../img/icons/icon-chevron-right.svg);
  background-size: 10px;
} 

.page-link.prev .icons{transform: rotate(-180deg);} 

.pagination .page-link.disabled{
  pointer-events: none; 
}
.pagination .page-link.disabled .icons{opacity: 0.6;}
.page-link.active{font-weight: var(--fw-700);}

@media (max-width:1366px){
  .section-filter{gap:15px}
  .section-filter .form-group.search .form-control.w-400{width: 300px;}
  .section-filter .form-group.search .btn{width: 140px;}

  .form-group.search{gap: 15px;}
  .section-filter .form-select{max-width: 240px;}
}

@media (max-width:991.98px){
  .section-filter{flex-wrap: wrap;} 
  .section-filter .form-group.search .btn{width: 180px;}
  .section-filter .form-group.search .group,
  .section-filter .form-group.search .form-control.w-400{width: 100%;}
  .form-group.search{width: 100%;}

  .section-filter.news .form-select{width: calc(50% - 8px); max-width: none;}

  .page-link{
    width:42px;
    height:42px;
    border-radius: 10px;
  }

  .section-news{
    padding-top:50px;
  }
}

@media (max-width:670px){
  .section-news{
    padding-top:30px;
  }
  .section-filter{gap: 10px;}
  .section-filter .form-group.search .btn{
    width: 160px;
    border-radius: 12px;
    --btn-h:45px
  }

  .form-group.search{gap: 10px;}

  .pagination{gap: 10px;}
  .page-link{
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }
}

@media (max-width:450px){
  .section-filter.news .form-select{ width: calc(100% - 5px);}
  .section-filter .form-group.search .btn{
    font-size: 14px;
    padding: 0 15px;
    width: auto;
  }
}

/*==================================================
News Details
==================================================*/ 

.article-detail{
  display: block;
  width: 100%;
  max-width:1160px;
  margin: 25px auto;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  padding:20px 60px 60px;
}

.bg-light{background-color: #F5F5F5 !important;}

.article-detail .hgroup{
  border-bottom: 1px solid #E7E7E7;
  justify-content: flex-start;
  padding:20px 0 15px;
}
 
.goback a{
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: var(--fw-600);
  color: #858585;
  gap: 12px;
  margin-right: auto;
}
.goback .icons{
  --size:14px;
  background-image: url(../img/icons/icon-arrow.svg);
}
.goback a:hover{color: #000;}

.goback .icons.icon-circle{
  background-color:#E03526;
  border-radius: 50%;
  background-image: url(../img/icons/icon-arrow-white.svg);
  background-size: 14px;
  margin-right: 3px;
  --size:39px;
}
 
.goback .text-gradient{
  background: linear-gradient(65.07deg, #000000 60.21%, rgba(177, 177, 177, 0) 108.83%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
border-bottom: 1px solid #000;
font-weight: var(--fw-700);
font-size: 18px;
line-height: 1;
}

.datetime-infos,
.info-dot-row{
  display: flex;
  align-items: center;
  padding: 30px 0 20px;
}
.datetime-infos p,
.info-dot-row p{
  margin: 0 !important;
  position: relative;
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #121212;
}
.datetime-infos p:before,
.info-dot-row p:before{
  content: '';
  width: 5px;
  height: 5px;
  background-color:rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  margin: 0 10px;
}
.datetime-infos p.title{
  height: 28px;
  font-size: 14px;
  color: #fff;
  background-color:#E03526;
  border-radius: 24px;
  padding: 0 15px;
  line-height: 1;
}
.datetime-infos p.title:before,
.info-dot-row p:first-child:before{display: none;}

.article-detail .article {
  color: #484848;
  font-size: var(--fs-16);
  line-height: 1.6;
}
.article-detail .article p{
  margin-bottom:25px;
}
.article-detail .article p img{
  width: 100%;
  margin: 10px 0;
}
.article.news h1{
  font-size: 32px;
  margin-bottom: 10px;
  color: #000;
}
.article.news h2{
  font-size: 26px;
  margin-bottom: 10px;
  color: #000;
}
.article.news h3{
  font-size: 20px;
  margin-bottom: 10px;
  color: #000;
}

.article.policy{
  padding: 30px 0;
}

.article.policy h2{
  font-size: 32px;
  margin-bottom: 10px;
  color:#121212
}
.article.policy p{margin-bottom: 15px;}
@media (max-width:1199px){
  .article-detail{
    padding: 10px 40px 40px;
  }

  .article.news h1{
    font-size: 26px;
  }
  .article.news h2{
    font-size: 20px;
  }
  .article.news h3{
    font-size: 18px;
  }

  .article.policy h2{
    font-size: 28px;
  }
}

@media (max-width:991.98px){
  .article.policy{
    font-size: 15px;
  }
  .article.policy h2{
    font-size: 24px;
  }
}

@media (max-width:670px){
  .article-detail{
    margin: 20px auto; 
    padding: 10px 20px 20px;
  }

  .datetime-infos {padding:20px 0 15px;}
  .datetime-infos p.title{
    font-size: 12px;
    height: 24px;
    padding: 0 10px;
  }
  .article.news {font-size: 15px;}
  .article.news h1{
    font-size: 24px;
  }
  .article.news h2{
    font-size: 18px;
  }
  .article.news h3{
    font-size: 16px;
  }
  .article-detail .article p{
    margin-bottom: 20px;
  }
  .datetime-infos p:before{margin: 0 6px;}
  .article-detail .article p img{margin: 0;}
  .article-detail .article p + p img{margin-top: 10px;}

 
  .article.policy h2{
    font-size:18px;
    margin-bottom:5px;
  }
  .article.policy{font-size: 14px;}

  .goback .icons.icon-circle{--size:34px}
}

/*==================================================
About us
==================================================*/ 

.section-about-banner{ 
  height: 605px;
}
.section-about-banner .background{
  background-image: url(../img/thumb/photo-1920x605.jpg);
}

.section-about-banner .container{
  display: flex;
  align-items: center;
  height: 100%;
}
.section-about-banner .hgroup{
  margin: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  position: relative;
}
.section-about-banner h1{
  font-size: 60px;
  color: #fff;
  margin:0 auto 10px;
  position: relative;
}
.section-about-banner h1 > span{
  position: relative;
  z-index: 10;
}
.section-about-banner h1 .logo-icon{
  width: 60px;
  height: auto;
  position: absolute;
  top: 4px;
  right:-22px
}
.section-about-banner p{
  margin: 0;
  color: #B7B7B7;
  font-size: 25px;
}

@media (max-width:1280px){
  .section-about-banner{
    height: 520px;
  }

  .section-about-banner h1{
    font-size: 50px;
  }
  .section-about-banner p{
    font-size: 22px;
  }
  .section-about-banner h1 .logo-icon{
    width: 50px;
  }
}
@media (max-width:1024px){
  .section-about-banner{
    height: 420px;
  }
}
@media (max-width:670px){
  .section-about-banner{
    height: 320px;
  }

  .section-about-banner h1{
    font-size: 30px;
  }
  .section-about-banner p{
    font-size:18px;
  }
  .section-about-banner h1 .logo-icon{
    width: 40px;
    top: 0px;
    right: -15px;
  }
}


/*==================================================
About us
==================================================*/ 

.section-about{
  min-height: 1020px;
  padding-top: 100px;
  padding-bottom:350px;
}
.section-about .background{
  background-image: url(../img/thumb/bg-about.jpg);
  background-position: top left;
  background-size: auto;
  top:25px; 
  margin-left: -170px;
}
.section-about h3{
  font-size:30px;
  font-weight: var(--fw-400);
  display: flex;
  gap: 10px;
  align-items: center;
  color: #030211;
  margin-bottom: 30px;
}
.section-about h3 .btn{
  margin-right: auto;
  color: #fff;
  font-size: 0.80em;
  border-radius: 55px;
  cursor: text;

  --bs-btn-bg:#E03526;
  --bs-btn-hover-bg:var(--bs-btn-bg)
}

.section-about h2{
  color: #000000;
  font-size: 50px;
  max-width: 615px;
  line-height: 1.5;
  padding-right: 20px;
}
.section-about .article{
  font-size: 25px;
  max-width: 556px;
}
.section-about .article .line{
  display: block;
  height: 5px;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url(../img/thumb/about-line.svg);
  margin-bottom: 30px;
}

.section-about .article p{
  margin-bottom: 25px;
}
.section-about .article p:last-child{
  margin-bottom: 0;
}

.section-about .article p + .line{margin-top: -20px;}

.card-about-bubble.xs{ 
  width: 140px;
}
.card-about-bubble.xs .icons{
  --size: 35px;
  margin-bottom:8px;
}
.card-about-bubble.xs .icons img{
  width: 15px;
}
.card-about-bubble.xs h3{
  font-size: 15px;
  margin-bottom: 0;
  font-weight: var(--fw-400) !important;
}

/**/

.card-about-bubble.md{ 
  width: 260px;
}

.card-about-bubble.md .icons{
  --size: 84px;
  margin-bottom:12px;
  background-color: #CA1622;
}
.card-about-bubble.md .icons img{
  width: 40px;
}
.card-about-bubble.md h3{
  font-size: 27px;
  margin-bottom: 0;
  font-weight: 700 !important;
  color: #fff;
} 
.card-about-bubble.md .card-bubble:before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%)
}
.card-about-bubble.md .card-bubble:after{
  background: #E03526;
}
.about-bubble-floating{
  position: relative;
  height: 200px;
}
.about-bubble-floating .card-about-bubble{position: absolute;}
.about-bubble-floating .card-about-bubble:nth-child(1){left: 22%; top:-13%;} 
.about-bubble-floating .card-about-bubble:nth-child(2){left:48%; top: 70%;}
.about-bubble-floating .card-about-bubble:nth-child(3){left: 86%; top:63%;}

@media (max-width:1650px){
  .section-about .background{
    background-size: contain;
  }
}

@media (max-width:1400px){
  .section-about .background{top: 100px;}
}

@media (max-width:1366px){
  .section-about h2{
    font-size: 44px;
  }

  .section-about h3{
    font-size: 28px;
  }

  .section-about .article{
    font-size: 22px;
    padding-left: 10px;
  }
}

@media (max-width:1199px){ 
  .section-about h2{max-width: 100%; margin-bottom: 25px;}

  .section-about .article{max-width: 100%;}
  .section-about .article p + .line{margin-top:35px;}

  .section-about .background{top: 0; bottom: 150px; background-position: bottom left;}

  .about-bubble-floating .card-about-bubble:nth-child(1){top: 18%;left: 17%;}
  .about-bubble-floating .card-about-bubble:nth-child(2) {left: 42%;top: 70%;}
  .about-bubble-floating .card-about-bubble:nth-child(3) {left: 82%;top:73%;}
}

@media (max-width:991.98px){
  .about-bubble-floating .card-about-bubble:nth-child(1){ left: 12%;}
  .about-bubble-floating .card-about-bubble:nth-child(2) {left:32%;}
  .about-bubble-floating .card-about-bubble:nth-child(3) {left: 78%;}
}

@media (max-width:767px){
  .section-about h2{
    font-size: 32px;
  }
  .section-about h3 {
    font-size: 25px;
  }
}
@media (max-width:670px){  
  .section-about{
    padding-top: 50px;
    padding-bottom: 250px;
  }
  .section-about h3 .btn{
    --btn-h:44px
  }

  .about-bubble-floating .card-about-bubble:nth-child(1){ left: 5%;}
  .about-bubble-floating .card-about-bubble:nth-child(2) {left:25%;}
  .about-bubble-floating .card-about-bubble:nth-child(3) {left: 70%;}

  .section-about .article{
    font-size: 18px;
  }
  .section-about .article p + .line{
    margin:15px 0;
  }
}

@media (max-width:575px){
  .section-about{
    padding-bottom: 50px;
  }
  .about-bubble-floating{
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    padding: 30px 0;
  }

  .about-bubble-floating .card-about-bubble{
    position:relative;
    top: auto !important;
    left: auto !important;
  }

  .card-about-bubble.md{
    width: 230px;
  }
  .card-about-bubble.md h3{
    font-size: 22px;
  }
  .card-about-bubble.md .icons img{
    width: 30px;
  }
  .card-about-bubble.md .icons {
    --size: 70px;
  }
}

/*==================================================
About Mission
==================================================*/ 
.section-mission{
  padding: 130px 0;
}
.section-mission .background{
  background-image: url(../img/thumb/bg-mission.svg);
}
.card-mission{
  display: flex;
  flex-direction: column;
  position: relative;
  text-align: center;

  background: #FFFFFF;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.1);
  border-radius: 108px;
  padding:90px 80px;

  --icon-gap:70px;
}
.card-mission {
  font-size: 16px;
}
.card-mission .icons{
  width: 48px;
  height: auto;
  position: absolute; 
}
.card-mission .icons.top{
  left: var(--icon-gap);
  top: var(--icon-gap);
}
.card-mission .icons.bottom{
  right: var(--icon-gap);
  bottom: var(--icon-gap);
  transform:rotate(-180deg);
}
.card-mission h2{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5em;
  gap:20px;
  font-weight: var(--fw-700); 
}
.card-mission h2 .btn{
  font-size: inherit;
  border-radius: 40px;
  font-weight: var(--fw-700);
  height: auto;
  line-height: normal;
  padding:13px 30px;
  cursor: text;
  --bs-btn-bg:#E03526;
  --bs-btn-hover-bg:var(--bs-btn-bg);
}
.card-mission h3{
  font-size:3.2em;
  margin: 40px 0;
}
.card-mission p{
  font-size: 2.125em;
  font-weight: var(--fw-700);
  line-height: 1.35; 
  margin: 0 auto;
  max-width: 1100px;
}

@media (max-width:1550px){
  .card-mission{
    font-size: 13px;
    border-radius: 92px;
  }

  .card-mission h2{gap: 15px;}
  .card-mission h2 .btn{
    border-radius: 32px;
    padding:10px 24px;
  }
  .card-mission h3{
    margin: 30px 0;
  }
  .card-mission p{
    max-width: 1000px;
  }
}

@media (max-width:1440px){
  .card-mission{--icon-gap:50px;}
  .card-mission .icons{width: 42px;} 
}

@media (max-width:991.98px){
  .section-mission{
    padding: 100px 0;
  }
  .card-mission{
    font-size: 11px;
    border-radius: 60px;
    padding:140px 50px;
    --icon-gap:40px;
  }
  .card-mission .icons{width:32px;} 
  .card-mission p{font-size: 2em;font-weight: 400;}
 
}

@media (max-width:767px){
  .card-mission{
    padding-left:40px;
    padding-right: 40px;
  }
  .card-mission h3{
    font-size: 2.8em;
  }
}

@media (max-width:670px){
  .card-mission{
    font-size: 11px;
    border-radius: 70px;
  }
  .card-mission p{font-size: 2em;}
}

@media (max-width:575px){
  .section-mission {
    padding: 70px 0;
  }
  .card-mission{
    padding:60px 30px 80px;
    border-radius: 35px;
    font-size: 10px;
    --icon-gap:25px;
  }
  .card-mission .icons {
    width: 23px;
  } 
  .card-mission h2{font-size: 2em;gap:11px;}
  .card-mission h2 .btn{ padding: 6px 16px; border-radius: 20px;}
 
  .card-mission h3{font-size: 2.4em; margin:30px 0 15px;}
  .card-mission h3 br{display:none;}
  .card-mission p {font-size: 1.6em; }
}
@media (max-width:400px){
  .card-mission h3{font-size: 2.2em;}
}
/*==================================================
About - Awards
==================================================*/ 

.section-awards{
  padding: 0;
  background-color: #fff;
}
.section-awards .hgroup{
  padding: 70px 20px;
}
.section-awards .hgroup h2{
  color: #E03526;
  font-size: 40px;
}

.card-awards{
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}
.card-awards .card-body{
  padding:30px 10px 30px 0;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.card-awards p{
  margin: 0;
  font-size: 20px;
}

.card-awards .icon-arrow{
  --size:56px;
  margin-top: auto;
}
.card-awards .icon-arrow:before{
  background-image: url(../img/icons/icon-button-awards.svg);
  opacity: 1;
}
.card-awards .icon-arrow:after{
  background-image: url(../img/icons/icon-button-awards-hover.svg);
  opacity: 0;
}

.card-awards:hover .icon-arrow:before{opacity: 0;}
.card-awards:hover .icon-arrow:after{opacity: 1;}

.swiper-awards{
  margin: 0 auto 50px;
  width:100%;
  max-width: 1195px;

}

.swiper-button-container.awards{
  height: 128px;

  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/bg-awards-slide.jpg);
}

.swiper-button-container.awards .container{
  display: flex;
  position: relative;
  align-items: center;
}
.btn-outline-g.border-img{
  background-image: url(../img/thumb/btn-outline.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;

  --bs-btn-color:#fff;
}
.btn-outline-g.border-img:before,
.btn-outline-g.border-img:after{
  display: none;
}

@media (max-width:1350px){
  .section-awards .hgroup {
    padding: 60px 20px;
  }
  .swiper-awards{
    max-width: calc(100% - 100px);
  }

  .card-awards p{
    font-size: 18px;
  }
  .card-awards .icon-arrow {
    --size: 52px;
  }
}

@media (max-width:991.98px){
  .swiper-awards{
    max-width: calc(100% - 60px);
    margin-bottom:30px;
  }

  .card-awards p{
    font-size: 16px;
  }
  .card-awards .icon-arrow {
    --size:46px;
  }
  .card-awards .card-body{
    gap: 20px;
    padding-top: 20px;
  }

  .swiper-button-container.awards{height: 110px;}
}

@media (max-width:767px){
  .section-awards .hgroup h2{
    font-size: 32px;
  }
}

@media (max-width:575px){
  .section-awards .hgroup{
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (max-width:460px){
  .swiper-awards{
    overflow:visible;
    max-width: calc(100% - 40px);
    margin-bottom: 20px;
  }
 
  .swiper-awards .swiper-slide{
    width: 320px;
    padding-right: 20px;
  }
}


/*==================================================
Strong Team J Ventures
==================================================*/ 

.section-team{
  background-color: #030211;
  padding: 0;
  min-height: 1120px;
  display: flex;
  overflow: hidden;
}
.section-team .background{
  background-image: url(../img/thumb/bg-team.png);
  background-size: 820px;
  background-position: left center;
}
.section-team .container{
  display: flex;
  flex-direction: column;
  padding-right: 0;
}
.section-team .hgroup{
  position: relative;
  justify-content: flex-start;
  width: 80%;
  padding: 40px 0;
  margin-top: 20px;
  margin-bottom: 80px;
}
.section-team .hgroup:after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  margin-left: -150px;
 
  background: linear-gradient(90deg, #030211 0.45%, #E6E6E6 49.56%, rgba(230, 230, 230, 0) 99.49%);
}
.section-team .hgroup h2{
  font-size: 47px;
}
.section-team .hgroup h2 span{  
  display: inline-block;
  position: relative;
  z-index: 100;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) -7.25%, #FFFFFF 47.58%, #FFFFFF 101.84%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.section-team .hgroup .logo-icon{
  position: absolute;
  right: -16px;
  top: 0;
  width: 60px;
}
.section-team .boxed{
  display: flex;
  max-width: 100%;
  position: relative;
  flex: 1 1 0;
}
.card-chief{
  display: flex;
  flex-direction: column;

  width: 300px;
  position: relative; 
}
.card-chief .card-photo{
  border-radius: 60px;
}
.card-chief .card-body{
  padding:20px 0;
  color: #fff;
  font-size: 22px;
}
.card-chief h3{
  margin-bottom: 5px;
  font-size: inherit;
}
.card-chief h3:before{
  content: '';
  position: absolute;
  top: 5px;
  left:0;
  width:20px;
  height: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-star-2.svg);
}
.card-chief p{
  margin: 0;
  font-weight: var(--fw-300);
  font-size: inherit;
}

.card-chief h3,
.card-chief p{
  padding-left:30px;
}

.card-chief:hover .photo{transform: scale(1.1);}
.card-chief:nth-child(2){
  margin-top: auto;
}
.card-chief-list{
  display: flex;
  max-width: 46%;
  height: 605px;
  width: 100%;
  justify-content: space-between; 
}

.card-staff-list{
  position: absolute;
  right: 0;
  bottom: 0; 
  width: 890px;
  margin-right:-60px;
  margin-bottom:-50px;
}
.card-staff-list .bg{
  width: 100%;
}

.card-staff-boxed{
  position: absolute; 
  left: 50%;
  bottom: 0;
  top: 0;
  width: 100%;
  max-width: 1920px;

  margin-left:-960px ;
}

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

.staff-list li{
  position: absolute;
  width: 10%;
  z-index: 100;
}
.staff-list li img{
  width: 100%;
  height: auto;
  border-radius: 50%;
  transition: all 0.25s;
}
.staff-list li:hover img{
  transform: scale(1.2);
}
.staff-list li:nth-child(1){
  top: 58%;
  left: -4%;
}
.staff-list li:nth-child(2){
  top: 43%;
  left:19%;
}
.staff-list li:nth-child(3){
  top:15%;
  left:21%;
}
.staff-list li:nth-child(4){
  top:-5%;
  left:53%;
}
.staff-list li:nth-child(5){
  top:70%;
  left:38%;
}
.staff-list li:nth-child(6){
  top: 49%;
  left: 71%;
}
.staff-list li:nth-child(7){
  top:77%;
  left:66%;
}
@media (max-width:1900px){
  .card-staff-boxed{
    left: 0;
    right: 0;
    margin: 0;
  }
}

@media (max-width:1660px){
  .card-chief-list{ 
    justify-content: flex-start;
    gap: 10%;
  }

  .card-chief{width: 280px;}
}

@media (max-width:1550px){
  .card-chief{width: 250px;}
  .card-chief .card-photo{border-radius: 45px;}
  .card-chief .card-body{font-size: 20px;}
  .card-staff-list{max-width: 780px;}
}
@media (max-width:1366px){
  .card-chief{width: 220px;}
  .card-chief .card-photo{border-radius: 40px;}
  .card-chief .card-body{font-size: 18px;}
  .card-chief h3, .card-chief p{padding-left: 24px;}
  .card-chief h3:before{width:18px; height: 18px;}

  .section-team .hgroup{padding: 30px 0;}
  .section-team .hgroup h2{font-size: 40px;}
  .section-team .hgroup:after{margin-left: 0;}
  .section-team .hgroup .logo-icon{width: 50px;}
}
 
@media (max-width:1280px){ 
  .section-team{
    display: block;
  }
  .section-team .background{
    background-position: 50% 50%;
    background-size: 700px;
  }
  .section-team .container{
    padding-right: var(--padding-x);
  }
  .card-chief-list{ 
    flex-direction: row;
    height: auto; 
    width: 100%;
    max-width: 100%;
    justify-content: center;
    gap: 60px;
  }
  .card-chief:nth-child(2){margin-top: 110px;}
  .card-staff-boxed{
    position: relative;
    display:flex;
    margin-top: 80px;
  }
  .card-staff-list{
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 50px;
    right:0;
    position: relative;
    max-width:650px;
    width: calc(100% - 70px)
  }
  .staff-list li{width: 13%;}
  .staff-list li:nth-child(1) {top: 78%;left: 9%;}
  .staff-list li:nth-child(2){top:40%; left: 17%;}
  .staff-list li:nth-child(3){top: 13%;}
  .staff-list li:nth-child(5) {top: 79%;left: 55%;}
  .staff-list li:nth-child(6) {top: 29%;left: 64%;}
  .staff-list li:nth-child(7) {top: 58%;left: 92%;}
}

@media (max-width:991.98px){
  .section-team .hgroup{
    width: 100%;
    justify-content: center;
  }
}

@media (max-width:767px){ 
  .card-chief-list{
    gap: 40px;
  }

  .section-team .hgroup h2{
    font-size: 32px;
  }
  .section-team .hgroup .logo-icon {width: 44px;}
}

@media (max-width:575px){
  .section-team .hgroup{
    margin-bottom: 50px;
  }
  .section-team .hgroup h2{
    text-align: center;
  }
  .section-team .hgroup .logo-icon{
    right:-9%
  }
  .card-chief-list{
    padding-left: 10px;
    padding-right: 10px;
    gap: 25px;
  
  }

  .card-staff-boxed{
    display: block;
  }
  
  .staff-list li{width: 18%;}
  .staff-list li:nth-child(1) {top: 78%;left: 9%;}
  .staff-list li:nth-child(2){top: 44%;left: 14%;}
  .staff-list li:nth-child(3){top: 13%;left: 15%;}
  .staff-list li:nth-child(4) {top: -9%;}
  .staff-list li:nth-child(5) {top: 76%;left: 54%;}
  .staff-list li:nth-child(6) {top: 29%;left: 64%;}
  .staff-list li:nth-child(7) {top: 55%;left: 86%;}

}

@media (min-width:451px) and (max-width:575px){
  .card-chief .card-body {
    font-size: 16px;
  }
  .card-chief h3, .card-chief p {
    padding-left: 20px;
  }
  .card-chief h3:before {
    width: 16px;
    height: 16px;
    top: 3px;
  }
}

@media (max-width:450px){
  .card-chief-list{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .card-chief{width: 250px;}
  .card-chief:nth-child(2){margin-top:0;}
}

/*==================================================
The J Ventures Grow up 
==================================================*/ 
.section-growup{
  background-color: #000;
  padding: 140px 0 0 ;
}
.card-growup{
  display: flex;
  flex-direction: column;
  position: relative;
  width: 240px;
  z-index: 100;
  flex-shrink: 0;
}

.card-growup .card-photo{
  border-radius: 30px;
}

.card-growup .card-body{
  padding: 0;
  color: #fff;
  font-size: 14px;
}
.card-growup .card-body p{
  margin: 0;
}
.card-growup .date{
  margin:15px 0;
  text-align: center;
  padding:18px 0;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0) -5.45%, rgba(255, 255, 255, 0.2) 49.93%, rgba(255, 255, 255, 0) 107.79%);
border-radius: 236.532px;
}
.card-growup .date p{ 
  font-weight: var(--fw-700);
}
 
.card-growup-list{
  position: relative;
  display: flex;
  min-height: 890px;
  display: flex; 
  padding-right: 100px;
  padding-left: 100px;
  padding-bottom: 100px;
  padding-top: 50px;
}

.card-growup-list .line{
  width: 1362px;
  height: auto;
  position: absolute;
  top: 140px;
  left: 270px;
}

.card-growup-list .hgroup{
  position: absolute;
  top: 0;
  left: 0;
  flex-direction: column;
}
.card-growup-list .hgroup h2{
  font-size: 50px;
  color: #fff;
}
.card-growup-list .hgroup h3{
  font-size: 170px;
  display: flex;
  padding-left: 50px;
  line-height: 1;
}
.card-growup-list .hgroup h3 span.text-gradient-red{
  background: linear-gradient(90.49deg, rgba(255, 255, 255, 0.04) 4.69%, #FF0000 49.74%, #FF1500 94.48%);
 
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.card-growup-list .hgroup h3 span.text-gradient-gray{
  background: linear-gradient(90.49deg, rgba(255, 255, 255, 0.04) 4.69%, #F4F4F4 49.74%, rgba(255, 255, 255, 0.08) 94.48%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
  
.card-growup-list .hgroup img.year{
  height: auto;
  width:385px;

}
.card-growup-list .hgroup.y-2018 img.year{
  margin-left:70px;
  margin-top: 10px;
}
.card-growup-list .hgroup.y-2019{
  top: -300px;
  left: -30px;
}
 
.card-growup-list .card-growup.c1{margin-top:350px;}
.card-growup-list .card-growup.c2{margin-left:240px;}
.card-growup-list .card-growup.c3{margin-top: 430px; margin-left:15px;}
.card-growup-list .card-growup.c4{margin-top: 120px; margin-left:150px;}
.card-growup-list .card-growup.c5{margin-top: 357px; margin-left:215px;}

.swiper-box-scrollbar.growup{overflow: visible;}

.secton-about-256{height: 256px;}

@media (max-width:991.98px){
  .card-growup-list{
    padding-right: 60px;
    padding-left: 60px;
  }
  /* .card-growup-list .hgroup h2{
    font-size: 40px;
  }
  .card-growup-list .hgroup img.year{
    width: 300px;
  }
  .card-growup-list .hgroup.y-2018 img.year{
    margin-left: 40px;
  }
  .card-growup-list .line{width: 1000px; top: 177px;}
  .card-growup-list .card-growup.c1{margin-top: 250px;}
  .card-growup-list .card-growup.c2{margin-left: 210px;}
  .card-growup-list .card-growup.c3{margin-top: 360px;}

  .card-growup{width: 220px;} */

  .secton-about-256{height: 200px;}
}
@media (max-width:670px){
  .section-growup{
    padding-top: 60px;
  }
  .card-growup-list{
    padding-right: 30px;
    padding-left: 30px;
    padding-top: 0;
    padding-bottom:50px;
  }
  .card-growup-list .hgroup h2{font-size:32px;}
  .card-growup-list .hgroup img.year{width: 240px;}
  .card-growup-list .hgroup.y-2018 img.year{margin-left: 50px;}

  .card-growup-list .line{left: 160px; width: 1200px;} 
  .card-growup .card-photo{height: 250px;} 

  .card-growup-list .card-growup.c1{margin-top: 260px;}
  .card-growup-list .card-growup.c2{margin-left:160px;}
  .card-growup-list .card-growup.c4{margin-left: 100px;}
  .card-growup-list .card-growup.c5{margin-left: 141px; margin-top:290px;}

  .card-growup-list .hgroup.y-2019 {
    top: -170px;
  }

  .secton-about-256{height: 120px;}
}

/*==================================================
Our Service - Banner
==================================================*/ 
 
.service-banner{
  max-width: 100%;
  border-radius: 40px;
  background-color: #ccc;
  height: 750px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  position: relative;
  border-radius: 40px;
}
 
.service-banner .article{
  width: 100%;
  max-width: 1030px;
  padding-bottom: 60px;
  text-align: center;
  position: relative;
  z-index: 10;
}
.service-banner h1{
  font-size: 90px;
}
.service-banner p{
  font-size: 28px;
}

.section-navbar-service{
  height: 122px;
  /* margin-top: -100px; */

}
.navbar-service{
  position: relative;
  z-index: 100; 
  padding:0;
  background-color:#E03526;
  height:inherit;

}
.nav-service{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  height: 100%;
}

.nav-service .btn{
  --btn-h:52px;
  --bs-btn-bg:#fff;
  --bs-btn-color:#1C1C1C;
  --bs-btn-hover-color:#fff;
  --bs-btn-active-color:#fff;

  font-size: 18px; 
  border-radius: 50px;
}
@media (max-width:1700px){
  .service-banner{height: 45vw;}
}

@media (max-width:1440px){
  .service-banner h1{
    font-size: 70px;
  }
  .service-banner p{
    font-size: 25px;
  }

  .service-banner .article{
    padding-left: 50px;
    padding-right: 50px;
  } 

  .section-navbar-service{height:100px;}
  .nav-service{gap: 20px;}
  .nav-service .btn {
    --btn-h:46px;
    font-size: 16px;
  }
 
}
@media (max-width:1366px){
  .service-banner h1{
    font-size: 60px;
  }
  .service-banner p{
    font-size: 22px;
  }
 
  .service-banner .article{
    max-width: 950px;
  }
}
@media (max-width:1280px){
  .section-service-banner{
    padding-top: 10px;
  }
  .section-navbar-service{
    height: 90px;
  }
  .nav-service{gap:15px;}
  .nav-service .btn {
    --btn-h:40px;
    font-size: 15px;
  }
}

@media (max-width:1199px){
  .service-banner h1{
    font-size: 50px;
    margin-bottom: 10px;
  }
  .service-banner p{
    font-size:18px;
  }
  .service-banner .article{
    max-width: 800px;
    padding-bottom: 0px;
  }
}

@media (max-width:1024px){ 
  .service-banner{
    border-radius: 35px;
  }
  .section-navbar-service{
    margin-top: -60px;
    height: 70px;
  }
  .navbar-service{  
    overflow-y: auto;
    display: flex;
  }
  .nav-service{
    gap:10px;
    flex-wrap: unset;  
    padding: 0 30px;
    height: auto;
    margin: auto 0;
    
  }
  .nav-service .btn {
    --btn-h:32px;
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 14px;
    padding: 0 15px;
  }
}
@media (max-width:991.98px){
  .service-banner{height:55vw;}

}

@media (max-width:810px){
  .nav-service{
    justify-content: flex-start;
  }
}

@media (max-width:690px){
  .service-banner h1{
    font-size: 45px;
    margin-bottom: 5px;
  }
  .service-banner p{
    font-size:16px;
  }
  .service-banner .article{
    padding-left:20px;
    padding-right:20px;
  }
}
@media (max-width:575px){
   .section-service-banner{
    padding-top: 0;
  }
  .service-banner{
    border-radius: 25px;
  }
  .service-banner h1{
    font-size: 25px; 
  }
  .service-banner p{
    font-size:14px;
  } 

  .service-banner{
    min-height:75vw; 
    height: auto;
  } 
  .nav-service{
    gap:8px; 
    padding: 0 20px;
  }
  .nav-service .btn {
    --btn-h:28px; 
    font-size: 12px;
    padding: 0 12px;
  }
  .section-navbar-service{
    height: 65px;
  }
}

/*==================================================
Digital First Strategy
==================================================*/ 

.section-target.service{top: -140px;}
.section-target.service#s_strategy{top: -20px;}
.section-target.service#s_engagement{top: -100px;}
.title-58{font-size: 58px;}
.title-58 > span{display: inline-block;}
.title-58 .fs-38{font-size:0.65em;}
.section-strategy{
  padding: 120px 0;
}
.card-strategy{
  position: relative;
  display: flex;
  align-items: center;
  margin: 0 80px 0 0;
  flex-wrap: wrap;
}

.card-strategy .card-photo{
  width: 51%;
  border-radius: 30px;
  position: relative;
  z-index: 10;
}
.card-strategy .card-body{
  width:49%; 
  border-radius: 0 40px 40px 0;
 
  padding:20px 70px;
  min-height: 465px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.card-strategy .card-body:before{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: inherit;
  background-color: #F6F6F6;
}
.card-strategy .card-body *{
  position: relative;
  z-index: 10;
}
.card-strategy h2{ 
  margin-bottom: 12px;
}
.card-strategy p{
  margin: 0;
  font-size: 28px;
  font-weight: var(--fw-700);
}
.card-strategy .buttons{
  padding:30px 0 0;
  justify-content: flex-start;
}

.section-strategy .triangle{
  width: 290px;
  height:auto;
  position: absolute;
  right: -120px;
  top: 100px;
}
@media (max-width:1550px){
  .title-58{font-size: 50px;}
  .card-strategy .card-body{
    padding: 20px 50px;
  }

  .card-strategy{margin-right: 40px; margin-left: 40px;}
}

@media (max-width:1440px){
  .card-strategy{align-items: unset;}
  .card-strategy .card-body{ 
    min-height: 0;
  }

  .card-strategy .card-body:before{
    top: 10%;
    bottom: 10%;
  }
}
@media (max-width:1366px){
  .card-strategy{margin-right: 0; margin-left: 0;} 
  .section-strategy{padding: 100px 0;}
}

@media (max-width:1280px){
  .card-strategy p{font-size: 24px;}

  .section-strategy .triangle{
    width: 200px; 
    right:-50px;
    top: 40px;
  }

  .section-target.service{top: -120px;}
  .section-target.service#s_strategy{top: -10px;}
  .section-target.service#s_engagement{top: -80px;}
}
@media (max-width:1199px){
  .title-58{font-size: 40px;}
  .section-strategy{padding:80px 0;}
  .card-strategy .card-body{
    padding: 0 40px;
  }
  .card-strategy h2{margin-bottom: 5px;}

 
}

@media (max-width:880px){
  .card-strategy{
    flex-direction: column;
  }

  .card-strategy .card-photo{
    margin: 0 auto;
    width:calc(100% - 80px); 
  }

  .card-strategy .card-body{
    width: 100%;
    border-radius: 35px;
    background-color:#F6F6F6;

    padding: 80px 40px 60px;
    margin-top: -40px;
  }
  .card-strategy .card-body:before,
  .card-strategy .card-bodt:after{display: none;}

  .section-target.service{top: -85px;}
  .section-target.service#s_strategy{top: -10px;}
  .section-target.service#s_engagement{top: -20px;}
}

@media (max-width:670px){
  .title-58{font-size:34px;}
  .section-strategy{padding:60px 0;}
  .card-strategy p{font-size: 20px;}

  .section-strategy .triangle{
    width: 150px; 
    right:-30px;
    top: 10px;
  }
}

@media (max-width:575px){
  .title-58{font-size:28px;}
  .section-strategy{padding:40px 0;}
  .card-strategy p{font-size:16px;}

  .card-strategy .card-photo{
    width: 100%;
    border-radius:25px 25px 0 0;
  }
  .card-strategy .card-body{
    border-radius:0 0 25px 25px;
    padding: 25px 20px 30px;
    margin-top: 0;
  }

  .card-strategy .buttons{
    padding-top: 20px;
  }

  .section-target.service#s_strategy{top: -40px;}
}

/*==================================================
Digital First Technology
==================================================*/ 
.section-technology{
  padding: 0;
}

.section-technology .container-fluid{
  position: relative;
}
.section-technology .container,
.section-service-ads .container{
  padding-top: 30px;
  padding-bottom: 30px;
}
.section-technology .background,
.section-service-ads .background{
  background-color: #F6F6F6;
  border-radius: 30px;
  left: var(--padding-x);
  right: var(--padding-x);
}

.section-technology .hgroup{ 
  justify-content: space-between;
  display: flex;
  padding: 30px 0; 
  flex-wrap:wrap;
  gap: 20px;
}

.card-technology{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius:40px ;
  padding: 40px;
  background-color: #fff;
  height: 100%;
}
 

.card-technology .card-bubble{
  opacity: 0;
  transition: all 0.35s;
  border-radius: inherit;
  background-color: transparent;
  filter: drop-shadow(0px 20px 80px rgba(0, 0, 0, 0.15));
}
.card-technology .card-bubble:before, .card-technology .card-bubble:after{
  border-radius: inherit;
}
.card-technology .card-bubble:before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%)
}
.card-technology .card-number{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Poppins";
  font-size: 18px;
  font-weight: var(--fw-500);
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-bg-number.svg);
  width: 50px;
  height: 50px;
  padding-left:5px;
  position: relative;
  z-index: 10;

}
.card-technology .card-body{
  position: relative;
  z-index: 10;
}
.card-technology h3{
  font-size: 30px;
  color: #282938;
  line-height: 1.2;
  margin-bottom: 15px;
}
.card-technology p{
  margin: 0;
  color: #6F6F6F;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.card-technology:hover .card-bubble{opacity: 1;}

.card-technology-list{
  padding: 10px 0 40px;
  --bs-gutter-x:30px;
    --bs-gutter-y: var(--bs-gutter-x);
}

@media (max-width:1440px){
  .section-technology .container,
  .section-service-ads .container{
    padding-left: 50px;
    padding-right: 50px;
  }
  .card-technology{
    padding: 30px;
  }
  .card-technology h3{
    font-size: 25px;
    margin-bottom: 10px;
  }
}

@media  (min-width:1200px) and (max-width:1280px){
  .card-technology-list{
    --bs-gutter-x:25px;
  }
  .card-technology{
    padding:30px 20px;
    border-radius: 30px;
  }
  .card-technology h3{font-size: 22px;}
}

@media (max-width:1024px){
  .card-technology-list{
    --bs-gutter-x:25px;
  }
  .card-technology{
    border-radius: 30px;
  }

  .section-technology .container ,
  .section-service-ads .container {
    padding-left: 30px;
    padding-right: 30px;
  }


}

@media (max-width:575px){
  .section-technology .container,
  .section-service-ads .container {
    padding-left: 20px;
    padding-right: 20px;

    padding-top: 0;
    padding-bottom: 0;
  }
  .section-technology .hgroup{padding-bottom: 20px;}
  .card-technology-list{padding-top: 0;}
 
  .card-technology{
    padding:30px 20px; 
  }

  .card-technology h3{font-size: 22px;}
}

/*==================================================
Pah Advance
==================================================*/ 

.section-service-ads{
  padding: 0;
  margin-top: 80px;
}

.card-service-ads{
  display: flex;
  padding: 45px 0;
}
.card-service-ads .card-icon{
  margin-top: -10px;
}
.card-service-ads .card-icon .icons.w-119{--size:119px}
.card-service-ads .card-icon .icons.w-121{--size:121px}
.card-service-ads .card-body{
  --gap:60px;
  padding: 0 0 0 var(--gap);
  max-width: 690px;
}
.card-service-ads h2{
  line-height: 1.1;
}
.card-service-ads p{
  font-size: 30px;
}
.card-service-ads p small{
  font-size: 24px;
  color: #4F4F4F;
}

.card-service-ads .buttons{
  padding:25px 0 0;
  justify-content: flex-start;
}

.card-service-ads.text-right{
  text-align: right;
}
.card-service-ads.text-right{
  flex-direction: row-reverse;
}
.card-service-ads.text-right .card-body{
  padding: 0 var(--gap) 0 0;
}
.card-service-ads.text-right .buttons{
  justify-content: flex-end;
}
@media (max-width:1440px){
  .card-service-ads p{
    font-size: 28px;
  }
  .card-service-ads p small{
    font-size: 20px;
  }
  .card-service-ads .card-body{
    --gap:50px; 
    max-width: 620px;
  }
}

@media (max-width:1024px){
  .card-service-ads .card-body{ 
    --gap:30px; 
  }
  .card-service-ads p{
    font-size: 24px;
  }
  .card-service-ads p small{
    font-size: 18px;
  }

  .section-service-ads{margin-top: 50px;}
}

@media (max-width:767px){
  .card-service-ads{
    flex-direction: column !important;
    padding-left: 15px;
    padding-right: 15px;
  }
  .card-service-ads .card-icon{
    margin-bottom: 20px;
  }
  .card-service-ads .card-body{ 
    --gap:0; 
  }

  .card-service-ads p{
    font-size: 20px;
  }
  .card-service-ads p small{
    font-size: 15px;
  }

  .card-service-ads{
    text-align: center !important;
  }
  .card-service-ads .buttons,
  .card-service-ads.text-right .buttons{
    justify-content: center;
  }
  .section-olympus .background {
    background-image: linear-gradient(180deg, #f2f2f2 0%, rgba(224, 53, 38, 0.15) 100%) !important;
  }
}

@media (max-width:575px){
  .section-service-ads{margin-top: 40px;}
  .card-service-ads{
    padding-left: 5px;
    padding-right: 5px;
  }
  .card-service-ads .title-58{font-size: 25px; line-height: 1.3;}
  .card-service-ads .card-icon .icons.w-119{--size:100px}
  .card-service-ads .buttons{padding-top: 15px;}

  .card-service-ads p{font-size: 16px;}
}

/*==================================================
Engagement Solution
==================================================*/ 
.section-engagement{
  padding: 120px 0;
}
.section-engagement .container-fluid{
  display: flex;
  flex-wrap: wrap;
}

.section-engagement .col-left{width: 42%; display: flex;}
.section-engagement .col-right{width: 58%;}

.section-engagement .article{
  font-size: 30px;
  margin-left: auto;
  margin-right: 20px;
  max-width: 460px;
  width: 100%;
  color: #120008;
}
.section-engagement h2{
  margin-bottom: 10px;
}
.card-engagement-list{
  --bs-gutter-x:40px;
  --bs-gutter-y:var(--bs-gutter-x);
}

.card-engagement{
  border-radius: 40px;
  position: relative;
  overflow: hidden; 
  border: 1px solid #DBDBDB;
  transition: all 0.25s;
  height: 550px;
}

.card-engagement .card-photo{
  border-radius: inherit; 
}
.card-engagement .card-photo,
.card-engagement .card-photo .photo{
  height: 100%;
  width: 100%;
}

.card-engagement .card-body{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; 
  background-color: rgba(255, 255, 255, 0.38);
  z-index: 10;
  text-align: center;
  padding:40px 20px;
}
.card-engagement .card-body:before{
  content: '';
  position: absolute;
  left: 0; 
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 3.09%, #F7F7F7 50.52%), rgba(255, 255, 255, 0.88);
}
.card-engagement .card-body * {
  position: relative;
  z-index: 10;
}
.card-engagement h3{
  font-size: 28px;
  margin-bottom: 10px;
}
.card-engagement p{
  margin: 0;
  font-size: var(--fs-18);
}

.card-engagement .btn-more-group{
  position: absolute;
  top: 30px;
  right:30px;
}
.card-engagement:hover{ 
  border-color:#E03526;
}
.card-engagement:hover .photo{transform: scale(1.1);}
.section-engagement .triangle{
  position: absolute;
  left: -140px;
  top:100px;
  width: 290px;
}
.card-engagement .btn-more-group .btn-pretty{opacity: 0; z-index: 10;}
.card-engagement .btn-more-group .btn-icon-more{opacity: 1;} 
.card-engagement:hover .btn-more-group .btn-pretty{opacity: 1;} 
.btn-icon-more{
  width: 52px;
  height: 52px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-btn-circle.svg);
  display: flex;
  align-items: center;
  justify-content: center;

  position: absolute;
  top: 0;
  right: 0;

  margin-left: auto;

  transition: all 0.25s;
  opacity: 0;
}
.btn-icon-more .icons {
  background-image: url(../img/icons/icon-next.svg);
  margin: auto;
  --size: 11px;
}
@media (max-width:1550px){
  .card-engagement{height: 460px;}
  .card-engagement .card-body{
    padding:25px 20px;
  }

  .card-engagement .btn-more-group{
    top: 20px;
    right: 20px;
  }

  .card-engagement .btn-pretty{
    --btn-h:42px;
    font-size: 15px;
  }

  .card-engagement .btn-pretty:before{width: 30px;}
  .card-engagement .btn-pretty:after{width: 70px;}
  .card-engagement .btn-pretty .btn-text{margin: 0 19px;}
  .card-engagement .btn-pretty .btn-icon{width: 42px;}
  .btn-icon-more{
    width: 42px;
    height: 42px;
  }
}
 

@media (max-width:1366px){
  .card-engagement-list {
    --bs-gutter-x:30px;
  }
  .card-engagement{
    height: 420px;
    border-radius: 32px;
  }
  .card-engagement h3{
    font-size: 24px;
  }
  .card-engagement p{
    font-size: 16px;
  }
  .section-engagement .article{
    font-size: 26px;
    max-width:380px;
  }

}

@media (max-width:1280px){
  .section-engagement .triangle{
    width: 240px;
    top: 60px;
  }
}

@media (max-width:1199px){
  .section-engagement{
    padding: 90px 0;
  }
  .section-engagement .article{
    font-size: 22px;
    max-width:320px;
  }

  .section-engagement .triangle{top: auto; bottom: 30px;}

  .card-engagement-list{--bs-gutter-x: 30px;}
  .card-engagement h3{
    font-size: 22px;
  }
  .card-engagement p{
    font-size: 15px;
  }
}

@media (max-width:1100px){
  .section-engagement .col-left{width: 35%;}
  .section-engagement .col-right{width: 65%;}
}

@media (max-width:991.98px){
  .section-engagement .col-left,
  .section-engagement .col-right{width: 100%;}

  .section-engagement .article{
    margin: 0 auto 20px;
    text-align: center;
    max-width: 500px;
  }
  .section-engagement .article h2 br{display: none;}

  .card-engagement-list{
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
  }
  .card-engagement{border-radius: 30px;}
  .card-engagement .btn-pretty{
    --btn-h:38px;
    font-size: 14px;
  }

  .card-engagement .btn-pretty:before{width: 30px;}
  .card-engagement .btn-pretty:after{width: 60px;}
  .card-engagement .btn-pretty .btn-text{margin: 0 19px;}
  .card-engagement .btn-pretty .btn-icon{width: 38px;}
  .btn-icon-more{
    width: 38px;
    height: 38px;
  }
 
}

@media (max-width:670px){
  .section-engagement{
    padding: 60px 0;
  }
  .card-engagement-list {
    --bs-gutter-x:20px;
  }
  .card-engagement{height: 380px;}
  .card-engagement h3{
    font-size: 20px;
  }
  .card-engagement .card-body {
    padding: 20px 15px;
  }

  .section-engagement .article{
    font-size: 18px;
  }
}

@media (max-width:575px){
  .card-engagement {height:auto;}
  .card-engagement .btn-more-group{display: none;}
}

/*==================================================
Digital First Strategy - section 01
==================================================*/ 
.section-strategy-01{
  overflow: hidden;
  padding-bottom: 0;
}
.dx-strategy-boxed{
  position: relative;
  max-width: 1530px;
  margin: 40px auto 0;
}
.bg-strategy-elements{
  position: relative;
  width: 100%; 
}
 
.bg-linear-white:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 123px; 
  background: linear-gradient(180deg, #FFFFFF 68.71%, rgba(255, 255, 255, 0) 96.77%);
  transform: rotate(-180deg);
  z-index: 100;
}
.bg-linear-white.linear-240:before{
  height: 240px;
  background: linear-gradient(180deg, #FFFFFF 47.77%, rgba(255, 255, 255, 0) 96.77%);
}
  
.bg-strategy-elements .element{
  position: absolute;
  z-index: 10;
}
.bg-strategy-elements .element-1,
.bg-strategy-elements .element-2{
  width: 8.76%;
  height: auto;
}

.bg-strategy-elements .element-1{
  left: 10%;
  top: 20%;
}

.bg-strategy-elements .element-2{
  right: 9%;
  top: 50%;
}
.bg-strategy-elements .element-3{
  right: 0.5%;
  left: 0;
  bottom:10%;
  display: flex;
}
.bg-strategy-elements .element-3 img{
  width:53.5%;
  margin: 0 auto 0;
}
.dx-strategy-boxed .article{
  position: absolute;
  top: -30px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 100;
}
.dx-strategy-boxed .article h1{
  font-size: 70px;
  margin: 0 auto 0;
  background-color: #fff;
  border-radius: 15px;
  padding: 10px 25px;
}
.dx-strategy-boxed .article h1 > span{
  display: inline-block;
}
.dx-strategy-boxed .article p{
  margin: 0 auto;
  width: 100%;
  max-width: 710px;
  font-size: 23px;
  text-align: center;

  background-color: #fff;
  border-radius: 15px;
  padding: 5px 15px;
}
.dx-strategy-boxed .buttons{
  padding-top: 40px;
}
.text-red{color: var(--red);}

@media (max-width:1440px){
  .dx-strategy-boxed .article h1{
    font-size: 60px;
  }
  .dx-strategy-boxed .article p{
    font-size: 21px;
  }
  .dx-strategy-boxed .buttons{
    padding-top: 30px;
  }
}

@media (max-width:1199px){
  .dx-strategy-boxed .article h1{
    font-size: 50px;
  }
  .dx-strategy-boxed .article p{
    font-size:18px;
    max-width: 610px;
  }

  .bg-linear-white:before{
    height: 15%;
  }
}

@media (max-width:1024px){
  .dx-strategy-boxed .article {
    margin-top: 0;
    margin-bottom:20px;
    position: relative;
    padding: 0 20px;
  }
}


@media (max-width:670px){
  .bg-linear-white:before{height: 10%;}
  .dx-strategy-boxed .article {
    margin-bottom: 0;
  }
  .dx-strategy-boxed .article h1{
    font-size:40px;
  }
  .dx-strategy-boxed .article p{
    font-size:16px;
  }

  .dx-strategy-boxed .buttons{
    padding-top: 20px;
  }
}

/*==================================================
Digital First Strategy - section 02
==================================================*/ 
.section-strategy-data{
  overflow: hidden;
  padding-top: 30px;
}
.label{
  display: flex;
  padding: 8px 16px;
  background-color: var(--bg);
  color: var(--color);
  border-radius: 50px;
  font-size: 20px;
  --bg:#FFE5E3;
  --color:#E03526;
}

.hgroup .d-flex{
  align-items: center;
}

.strategy-data-boxed{
  display: flex;
  position: relative;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
}
 
.card-strategy-data{
  display: flex;
  flex-direction: column;
  gap: 20px;

  max-width: var(--width);
  --width:265px;
}
.card-strategy-data .card-body{
  padding: 0;
}
.card-strategy-data h3{
  font-size: 20px;
  margin-bottom: 10px;
  font-weight: var(--fw-700);
}
.card-strategy-data p{
  margin: 0;
  color: #787E90;
  font-weight: var(--fw-700);
}
.card-strategy-data .icons{
  --size:48px
}
 
.card-strategy-data.card-03{--width:340px} 
.card-strategy-data.card-02,
.card-strategy-data.card-04{margin-left: auto;}
.card-strategy-list{
  display: flex;
  flex-direction: column;
  gap: 40px;
  position: relative;
  z-index: 100;
  margin-bottom:220px;
}

.card-strategy-list.left{width: 550px;}
.card-strategy-list.right{
  width: 550px; 
  margin-left: auto;
  padding-top:5%;
}

.strategy-data-boxed .bg-elements,
.strategy-data-boxed .bg-elements .element{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
} 
.strategy-data-boxed .bg-elements .background{
  background-image: url(../img/thumb/line-pattern.png);
  background-size: 820px;
}
.strategy-data-boxed .bg-elements .hand-mobile {
  display: flex;
  flex-wrap: wrap;
}
.strategy-data-boxed .bg-elements .hand-mobile img{
  width:840px; 
  margin-top: -6%;
  margin-left: auto; 
  margin-right: auto; 
  margin-bottom: auto;
  position: relative; 
  left: 7%;
}

.section-strategy-data .triangle{
  top: 0;
  right: -130px;
  width: 290px;
  position: absolute;
}

.section-strategy-data .triangle img{
  transform: rotate(15deg);
}

@media (max-width:1680px){
  .card-strategy-list{
    margin-bottom: 180px;
  }
  .card-strategy-list.left,
  .card-strategy-list.right{
    width: 36%;
  }
  .strategy-data-boxed .bg-elements .background{
    background-size: 720px;
  }
  .strategy-data-boxed .bg-elements .hand-mobile img{
    width: 740px;
    margin-top: auto;
    margin-bottom: 0;
  }
}

@media (max-width:1280px){
  .section-strategy-data .triangle{ 
    right: -110px;
    width: 200px; 
  }
  
}
@media (max-width:1199px){
  .strategy-data-boxed .bg-elements .background{
    background-size:650px;
  }
  .strategy-data-boxed .bg-elements .hand-mobile img{
    width: 640px;
  }

  .card-strategy-data.card-03{--width:300px} 

  h6.label{
    font-size: 17px;
  }
}

@media (max-width:1024px){
  .strategy-data-boxed{
    flex-direction: column;
    margin-bottom: 60px;
  }
  .strategy-data-boxed .bg-elements{
    position: relative;
    height: 600px;
    width: auto;
    margin-left: -30px;
    margin-right: -30px;
    margin-top: -80px;
    overflow: hidden;
  }
  .strategy-data-boxed .bg-elements .background{
    background-size: 400px;
  }
  .strategy-data-boxed .bg-elements .hand-mobile img{
    width: 420px;
  }
  .card-strategy-list{
    margin-bottom: 0;
    flex-direction:unset;
    flex-wrap: wrap;
    width: 100% !important;
    gap: 0;
  }
  .strategy-data-boxed .hgroup{width: 100%; margin-bottom: 30px;}
  .strategy-data-boxed .hgroup.d-lg-flex{display: none !important;}
  .strategy-data-boxed .hgroup.d-lg-none{display: flex !important;}

  .card-strategy-data{--width:47% !important}

  .bg-linear-white.linear-240:before{height: 150px;}

  .strategy-data-boxed .bg-elements:before{
    content: '';
    position: absolute;
    left: -50px;
    right: -50px;
    bottom: 0;
    height: 120px;
    background: linear-gradient(180deg, #FFFFFF 68.71%, rgba(255, 255, 255, 0) 96.77%);
    transform: rotate(-180deg);
    z-index: 100;
  }
  .section-strategy-data .title-58{font-size: 58px;}
  .strategy-data-boxed .hgroup{
    text-align: center;
    justify-content: center;
    margin-bottom: 0;
  }
  .strategy-data-boxed .hgroup .d-flex{
    justify-content: center;
    margin-left: -40px;
  }
 
}

@media (max-width:670px){
  .section-strategy-data{margin-top: 40px;}
  .section-strategy-data .title-58{font-size: 40px;}
}

@media (max-width:575px){
  
  .card-strategy-data{
    margin-bottom: 30px;
    text-align: center;
    --width:100% !important;
  }

  .card-strategy-data h3{
    font-size: 18px;
  }
  h6.label {font-size: 15px;padding:5px 14px;}
  
  .strategy-data-boxed .bg-elements{
    height: 400px;
    margin-top: -30px;
  }
  .strategy-data-boxed .bg-elements .background{
    background-size: 300px;
  }
  .strategy-data-boxed .bg-elements .hand-mobile img{
    width: 320px;
  }
  .strategy-data-boxed .bg-elements:before{height: 50px;}
  .bg-linear-white.linear-240:before{height: 80px; right: -50px; left: -50px;}

  .section-strategy-data .triangle{ 
    right: -90px;
    width:160px;
    top: 160px; 
  }
}

/*==================================================
What State are you ?
==================================================*/
.section-strategy-digital{
  padding-bottom: 0;
} 
.section-strategy-digital.bg-linear-white:before{height: 125px;}
.section-strategy-digital .hgroup{
  position: absolute;
  left: var(--padding-x);
  top: 0;
}
.section-strategy-digital .hgroup .title-58{
  font-size: 58px;
}
.section-strategy-digital .hgroup p{
  font-size: 28px;
}
.section-strategy-digital .container{
  display: flex;
  flex-direction: column;
}
 
.card-digital{
  display: flex;
  gap: 10px;
  width: 730px;
  height: 336px;
  border-radius:30px; 
  position: relative;
  margin-bottom: 70px;
}
.card-digital .card-bubble{
  z-index: 10 !important;
  position: absolute !important;
}
.card-digital .card-bubble:before, 
.card-digital .card-bubble:after{
  border-radius:30px;
}
.card-digital .card-bubble:before{
  background:linear-gradient(20deg,  rgba(204,202,201,0.6) 0%,rgba(224,53,38,0.4) 100%);
} 
.card-bubble.red:before{
  background:linear-gradient(20deg,  rgba(204,202,201,0.6) 0%,rgba(224,53,38,0.4) 100%);
} 

.card-digital .card-bubble:after{
  background-color: #F6F6F6;
}
.card-digital .card-body{
  width: calc(61% - 10px);
  position: relative;
  display: flex;
  padding:40px 30px;
  gap:20px;
}
.card-digital .card-body *{
  position: relative;
  z-index: 100;
}

.card-digital .card-number{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Poppins";
  font-size: 18px; 
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-bg-number.svg);
  width: 50px;
  height: 50px;
  padding-left:5px;
  padding-bottom: 5px;
  position: relative;
  flex-shrink: 0;
  z-index: 10;

}
.card-digital .card-body h3{
  margin-bottom: 20px;
  margin-top: 10px;
}
.card-digital h3{
  font-size: 27px; 
  font-weight: var(--fw-600);
}
.card-digital h4{
  margin-bottom: 5px;
  font-size: 18px; 
  font-weight: var(--fw-600);
}
.card-digital p{
  margin: 0;
  color: #787E90;
}
.card-digital .card-title{
  border-radius: inherit;
  transition: all 0.35s;
  background-color: #1E1C1C;
  width: 39%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}
.card-digital .card-title h3{
  color: #fff;
}
.card-digital .card-title.bg-red{
  background-color: #E03526;
}

 
.strategy-digital-boxed{
  display: flex;
  flex-direction:column; 
  width: 1115px;
  margin-left: auto;
}
.strategy-digital-boxed .card-digital:nth-child(even){margin-left: auto;}
.strategy-digital-boxed.boxed-01{ margin-right: -70px;}
.strategy-digital-boxed.boxed-02{ margin-right: 50px; margin-bottom: 100px;}

.strategy-digital-boxed.boxed-02 .card-digital:last-child{margin-bottom: 0 !important;}

.section-strategy-digital .triangle{position: absolute;}
.section-strategy-digital .triangle-1{
  width:360px;
  left: -140px;
  top: 40%;
}

.section-strategy-digital .triangle-2{
  width: 180px;
  filter: blur(10px);
  top: 30%;
  left: 155px;
}
.section-strategy-digital .triangle img {
  transform: rotate(15deg);
}

@media (max-width:1800px){
  .strategy-digital-boxed{width: 67%;}
  .strategy-digital-boxed.boxed-01{ margin-right: 0px;}
  .strategy-digital-boxed.boxed-02{ margin-right: 150px;}

  .card-digital{width: 680px; height:280px;}
  .card-digital h3{font-size: 25px;}
  .card-digital .card-body {padding: 30px 25px;}
  .card-digital .card-body h3{margin-top: 4px;} 
  .card-digital .card-number{width:42px; height: 42px;} 
}

@media (max-width:1366px){
  .section-strategy-digital .triangle-1{
    width:290px;
    left: -120px;
    top: 40%;
  }
  
  .section-strategy-digital .triangle-2{
    width: 160px; 
    top: 31%;
    left: 125px;
  }
}

@media (max-width:1280px){
  .strategy-digital-boxed.boxed-01{ margin-right:0px;}
  .strategy-digital-boxed.boxed-02{ margin-right:0px;}
  .card-digital{margin-bottom: 50px; margin-left: auto;}
}

@media (max-width:1199px){
  /* .section-strategy-digital .hgroup .title-58{
    font-size: 46px;
  } */
  .card-digital {
    width: 600px; 
    margin-bottom: 30px;
  }
  .card-digital h3{font-size: 22px;}
  .card-digital h4{font-size: 16px;}
  .card-digital .card-body {padding: 30px 20px;}
}

@media (max-width:1024px){
  .section-strategy-digital .hgroup{
    position: relative;
    left: auto;
    text-align: center;  
    align-items: center;
    padding: 40px 0;
  }
  .section-strategy-digital .hgroup h2 br{display: none;}

  .strategy-digital-boxed{
    width: 100%;
  }
  .card-digital {
    margin: 0 auto 30px!important;
  }

  /* .strategy-digital-boxed .card-digital:nth-child(even){
    flex-direction: row-reverse;
  } */
}

@media (max-width:670px){
  .card-digital {
    width: auto;
    height: auto;
  }
  .card-digital .card-title{height: auto;}
  .card-digital h3{font-size: 20px;}
  .card-digital h4,
  .card-digital p{font-size: 15px;}

  .section-strategy-digital .hgroup {
    padding: 0 0 20px;
    margin-top: 0;
  }
}

@media (max-width:575px){
  .card-digital {
    flex-direction: column-reverse;
    margin-bottom: 40px !important;
  }
  .card-digital .card-body,
  .card-digital .card-title{
    width: 100%;
  }

  .card-digital .card-title{
    padding: 20px;
    border-radius: 20px;
  }

  .section-strategy-digital .hgroup .title-58{
    font-size: 40px;
  }
  .section-strategy-digital .hgroup p{
    font-size: 22px;
  }

  .section-strategy-digital.bg-linear-white:before{display: none;}
  .strategy-digital-boxed.boxed-02{margin-bottom: 60px;}
}

/*==================================================
Digital First Stakeholder
==================================================*/ 

.section-stakeholder{
  padding: 60px 0;
  margin-bottom: 50px;
}
.section-stakeholder .hgroup{
  padding-bottom: 45px;
  justify-content: flex-start;
  align-items: center;
  gap:35px;
}
.section-stakeholder .hgroup .line{
  height: 4px;
  flex-shrink: 0;
  width: 340px;
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url(../img/thumb/line.png);
}

.card-stakeholder{
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 540px;
  padding: 1px;
  width: 100%;
  overflow: hidden;
  transition: all 0.45s;
}

.card-stakeholder .card-photo,
.card-stakeholder .card-photo .photo{
  height: 100%;
}
.card-stakeholder .card-photo{
  border-radius: inherit;
  background-color: #fff;
  z-index: 100;
}
.card-stakeholder .card-photo .photo{
  opacity: 0.8;
  /* background-size: auto 100%; */
}
.card-stakeholder .card-photo .photo:nth-child(2){opacity: 0;}
.card-stakeholder:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom:0;
  top: 0;
  background:linear-gradient(45deg,  rgba(204,202,201,0.4) 0%,rgba(224,53,38,0.7) 100%);
  opacity: 0.6;
  transition: all 0.45s;
}
.card-stakeholder:after{
  content: '';
  position: absolute;
  left: 1px;
  right: 1px;
  bottom:1px;
  top: 10%;
  background: linear-gradient(360deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
  z-index: 101; 
  border-radius:inherit;
  transition: all 0.45s;
}
.card-stakeholder .card-title{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 20px 35px;
  color: #000;
  
  justify-content: center;
  text-align: center;
  z-index: 103;
  transition: all 0.45s;
}
  
.card-stakeholder .card-body{
  background: linear-gradient(270deg, #000000 22.86%, rgba(0, 0, 0, 0) 82.46%);
  border-radius: inherit;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;

  display: flex; 
  opacity: 0;
  transition: all 0.45s;
}
  
.card-stakeholder .card-body .group{
  margin: auto;
  margin-right: 0;
  margin-bottom: 0;
  padding-right:80px;
  padding-bottom: 30px;
  color: #fff;
}
.card-stakeholder h3{
  font-size: 26px;
  color:inherit;
  margin-bottom: 10px;
}

.card-stakeholder .card-arrow{
  position: absolute;
  top: 15px;
  right: 15px;
  z-index: 500;
}
.card-stakeholder .card-arrow .icons{
  --size:52px;
  background-image: url(../img/icons/icon-arrow-circle-red.svg);
}
.card-stakeholder:hover .card-arrow .icons{
  background-image: url(../img/icons/icon-arrow-circle-black.svg);
}
.card-stakeholder:hover:before,
.card-stakeholder:hover:after{opacity: 0;}
.card-stakeholder:hover .card-photo .photo{
  background-position: center right; 
  opacity: 1;
}
.card-stakeholder:hover .card-title{opacity: 0;}
.card-stakeholder:hover .card-body{opacity: 1;}

.stakeholder-boxed .row{
  --bs-gutter-x:20px;
  --bs-gutter-y: var(--bs-gutter-x);
  flex-wrap: unset;
}
.stakeholder-boxed .row > div{
  flex: 0 0 auto;
  width: 25%;
  transition: all 0.45s;
}


.stakeholder-boxed .row > div.hover{ width: 40%;}
.stakeholder-boxed .row > div.not-hover{ width: 20%;}
@media (max-width:1550px){
  .card-stakeholder .card-body .group{padding-right: 50px;}
}

@media (max-width:1440px){
  .card-stakeholder h3{
    font-size: 22px;
  }
}

@media (max-width:1199px){
  .card-stakeholder{height:480px;}
  .section-stakeholder .hgroup{gap: 30px;}
  .section-stakeholder .hgroup .line{width: 280px;}

  .section-stakeholder .hgroup .title-58{font-size: 40px; text-align: center;}
}

@media (max-width:991.98px){
  .stakeholder-boxed .row{--bs-gutter-x: 30px;flex-wrap: wrap;}
  .stakeholder-boxed .row > div{width: 50% !important;} 

  .section-stakeholder .hgroup .line{width: 180px;}
}

@media (max-width:767px){
  .section-stakeholder .hgroup {
    flex-direction: column-reverse;
  }
}

@media (max-width:670px){
  .section-stakeholder{padding: 20px 0px;}
  .stakeholder-boxed .row{--bs-gutter-x: 20px; }
  .card-stakeholder{height:420px;}
  .card-stakeholder h3{font-size: 20px;}
  .card-stakeholder .card-title{
    padding: 15px 15px 25px;
  }
  .card-stakeholder .card-body .group{
    padding-bottom: 15px;
    padding-right: 30px;
  }
  .card-stakeholder .card-arrow .icons{
    --size:42px;
  }
}

@media (max-width:470px){

  .stakeholder-boxed .row > div{
    width: 100% !important;
  }
  .card-stakeholder{
    height:380px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
  }
}

/*==================================================
Phone model
==================================================*/ 
.section-phone-model {
  padding: 0;
  overflow: hidden;
}
.section-phone-model .background{
  background-position: top center;
}

.section-phone-model .title{
  position: absolute;
  top:4vw;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11vw;
  
}
.section-phone-model .title span{
  color: rgba(0, 0, 0, 0.7);
  opacity: 0.4;
}
.phone-model-boxed{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* max-width: 1920px;
  position: relative; */
}

.phone-model-boxed .model{
  width:41%;
  position: absolute;
}

.phone-model-boxed .model img{width: 100%;}

.phone-model-boxed .model-1 {top: 43%;left: -2.5%;}
.phone-model-boxed .model-1 img{transform: rotate(-15deg);}

.phone-model-boxed .model-2 {top: 41%;left: 19.5%; z-index: 10;}
.phone-model-boxed .model-2 img{transform: rotate(-15deg);}

.phone-model-boxed .model-3 {top: 40%;left: 39%;z-index: 9;}
.phone-model-boxed .model-3 img{transform: rotate(15deg);}

.phone-model-boxed .model-4 {top: 40%;left:61.4%;z-index: 9;}
.phone-model-boxed .model-4 img{transform: rotate(15deg);}

.swiper-overflow.client{
  padding: 40px 100px;
}
.swiper-client .swiper-slide{
  width: 16.667%;
}

.swiper-overflow.client .swiper-pagination{display: none;}

@media (max-width:1550px){
  .swiper-overflow.client{
    padding-left: 70px;
    padding-right: 70px;
  }
 
  .swiper-client .card-client{
    margin: 20px auto;
  }
  .swiper-client .card-client,
  .swiper-client .card-client .card-triangle{
    width: 160px;
    height: 160px;
  }
  .swiper-client .card-client .card-groups{
    width:82%;
  }
  .swiper-client .card-client .card-triangle.rotate-105{margin-top: 30px;}
}

@media (max-width:1366px){
  .swiper-client .swiper-slide{
    width:20%;
  }
}

@media (max-width:1199px){
  .swiper-client .card-client{
    margin: 10px auto;
  }
  .swiper-client .card-client,
  .swiper-client .card-client .card-triangle{
    width: 140px;
    height: 140px;
  }
  .swiper-client .card-client .card-triangle.rotate-105 {margin: 21px 0 0 17px;}
  .swiper-client .card-client .card-triangle.rotate-45 { margin: -7px 0 0 6px;}
}

@media (max-width:991.98px){
  .swiper-overflow.client{padding: 20px 0;}
  .swiper-overflow.client .swiper-button{display: none;}

  .swiper-overflow.client .swiper-pagination{display: flex;}
}

@media (max-width:750px){
  .swiper-client .swiper-slide{
    width:25%;
  }
}

@media (max-width:670px){
  .swiper-overflow.client{padding:  0;}
  .swiper-client .swiper-slide{
    width:33.33%;
  }
  .swiper-client .card-client,
  .swiper-client .card-client .card-triangle{
    width: 100px;
    height: 100px;
  }
}

@media (max-width:575px){
  .swiper-client {
    overflow: visible;
  }

  .swiper-client .swiper-slide{width: 120px;}
}

/*==================================================
Support Centre
==================================================*/ 

.section-support-center-banner{
  background-color: #E03526;
  height:490px;
  padding: 0 !important;
}
.section-support-center-banner .container{
  display: flex;
}
.section-support-center-banner .boxed{
  --width:1200px;
  margin:0 auto;
  color: #fff;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column; 
  justify-content: center;
}

.section-support-center-banner h1{
  font-size: 58px;
  color: inherit;
}

.section-support-center-banner p{
  margin: 0;
  font-size: 44px;
}

.section-support-center-banner .photo{
  position: absolute;
  bottom: 0;
  right: 30px;
  width: auto;
  height: 420px;
}

.card-support-center{
  display: flex;
  flex-direction: column;
  text-align: center;
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;

  width: 324px;
  height: 324px;
  margin: 30px auto;

  --radius:80px;
 
}
.card-support-center .card-photo{
  border-radius: var(--radius) var(--radius) 0 0 ;
  background-color: #ccc;
  height:65%;
}
.card-support-center .card-photo .photo{
  height: 100%;
}
.card-support-center:hover .card-photo .photo{transform: scale(1.1);}
.card-support-center .card-body{
  margin-top: auto;
  padding:20px 15px 15px;
  background-color: #F2F2F2;
}
.card-support-center h3{
  font-size: 25px;
  text-align: center;
}

.icons.w-51{--size:50px}

@media (max-width:1440px){
  .card-support-center{
    width: 300px;
    height: 300px;
    margin: 20px auto;
    --radius:60px;
  }
  .card-support-center h3{
    font-size: 23px;
  }
  .card-support-center .card-body{
    padding-top: 18px;
  }
}

@media (max-width:1366px){
  .section-support-center-banner{height: 400px;}
  .section-support-center-banner h1{font-size: 50px;}
  .section-support-center-banner p{ font-size: 32px;}
  .section-support-center-banner .boxed{--width:90%}
  .section-support-center-banner .photo{height: 355px; right: 20px;} 
}

@media (max-width:1199px){
  .section-support-center-banner{height: 360px;} 
  .section-support-center-banner h1{font-size:42px;}
  .section-support-center-banner p{ font-size:28px;}
  .section-support-center-banner .boxed{--width:95%}
  .section-support-center-banner .photo{height: 315px; right: 0;}

  .card-support-center{
    width:250px;
    height: 250px;
    margin: 20px auto;
    --radius:45px;
  }
  .card-support-center h3{
    font-size: 20px;
    line-height: 1.2;
  }
}

@media (max-width:991.98px){
  .card-support-center{
    width:220px;
    height: 220px;
    margin: 30px auto;
    --radius:35px;
  }
  .card-support-center h3{
    font-size:18px; 
  }
}

@media (max-width:800px){
  .section-support-center-banner{height: 340px;} 
  .section-support-center-banner p{ font-size:24px;}
  .section-support-center-banner .photo{height:280px;}
}

@media (max-width:680px){
  .section-support-center-banner {
    height: auto;
  }
  .section-support-center-banner .boxed{
    text-align: center;
    justify-content: flex-start;
    padding-top: 30px;
  }
  .section-support-center-banner .photo{
    position: relative;
    right: auto;
    width: auto;
    margin:30px auto 0;
  }
}

@media (max-width:575px){
  .section-support-center-banner h1{font-size:32px;}
  .section-support-center-banner p{ font-size:20px;}
  .section-support-center-banner .photo{height: 240px;}

  .card-support-center{
    width: 100%;
    max-width:180px;
    height: 180px;
    margin: 5px auto;
    --radius:30px;
  }
  .card-support-center h3{
    font-size:16px; 
  }
}

/*==================================================
DIGITAL ENGINE
==================================================*/ 

.workflow-boxed{
  position: relative;
  max-width: 1540px;
  width: 100%;
  margin: 0 auto 80px;
  display: flex;
  justify-content: space-between;
}

.card-workflow{
  display: flex;
  flex-direction: column;
  max-width: 430px;
  width: 100%; 
  gap: 30px;
  position: relative;
  z-index: 100;

  --radius:30px;
}
.card-workflow .card-header{
  background-color: #1A1A1A;
  height: 130px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
}
.card-workflow .card-header.bg-red{
  background-color: #E03526;
}
.card-workflow .card-header h2{
  color: #fff;
  font-size: 28px;
}

.card-workflow > .card-body{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 25px 30px;
  border-radius: var(--radius); 
  position: relative;
  height: 100%;
  gap: 25px;
}

.card-workflow > .card-body:before,
.card-workflow > .card-body:after{
  content: '';
  position: absolute;
  border-radius: var(--radius);
}
.card-workflow > .card-body:before{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:linear-gradient(45deg,  rgba(204,202,201,0.4) 0%,rgba(224,53,38,0.6) 100%);
}
.card-workflow > .card-body:after{
  background-color: #fff;
  top: 1px;
  left: 1px;
  right: 1px;
  bottom: 1px;
}
.card-workflow-item{
  position: relative;
  display: flex;
  gap: 20px;
  align-items: center;
  z-index: 100;
  width: 100%;
  max-width: 370px;
}
.card-workflow-item .card-icon{
  border-radius: 20px;
  border: 1px solid #EAEAEA;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  flex-shrink: 0;
  overflow: hidden;
}
.card-workflow-item .card-icon img{
 --size:100%;

}
.card-workflow-item h3{
  font-size: 18px;
  margin-bottom: 4px;
}

.card-workflow-item p{
  margin: 0;
  font-size: 14px;
  color: #787E90;
}

.card-workflow-bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}

.card-workflow-bg .group{
  margin: 40px auto auto;
  position: relative;
}
.card-workflow-bg .bg{
  width: 695px;
  margin: 0;
}
.card-workflow-bg .jdx{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
}
.card-workflow-bg .jdx img{
  margin: auto;
  width: 325px;
  height: auto;
}

.section-technology-workflow .hgroup{
  padding-bottom: 70px;
}
.section-technology-workflow .hgroup h5{
  font-size: 28px;
  font-weight: var(--fw-400);
  margin-bottom: 5px;
}
.section-technology-workflow .hgroup h2{
  font-size: 58px;
}

@media (max-width:1680px){
  .card-workflow{
    gap: 20px;
  }
  .card-workflow .card-header{
    height: 110px;
  }
  /* .card-workflow .card-header h2{
    font-size: 24px;
  } */

  .card-workflow-bg .bg{width:580px;}
  .card-workflow-bg .jdx img{width: 280px;}

  .card-workflow{max-width: 400px;}
  .card-workflow > .card-body{
    gap: 20px;
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .card-workflow-item{gap: 15px;}
  .card-workflow-item h3{font-size: 17px;}
  .card-workflow-item .card-icon{width: 80px; height: 80px;border-radius: 15px;}

}

@media (max-width:1440px){
  .card-workflow{
    --radius:25px;
    max-width:350px;
  }
  .card-workflow .card-header{
    height:85px;
  }
  .card-workflow .card-header h2{
    font-size: 22px;
  }

  .card-workflow > .card-body{
    padding-left: 25px;
    padding-right: 25px;
  }

  .card-workflow-bg .group{
    margin-top: 25px;
  }

  .card-workflow-item{
    align-items: flex-start;
  }
  .card-workflow-item h3{
    margin-bottom: 0;
    font-size: 16px;
  }
  .card-workflow-item .card-icon {
    width:70px;
    height: 70px;
  }
}

@media (max-width:1199px){
  .card-workflow-bg .bg{width:500px;}
  .card-workflow-bg .jdx img{width: 220px;}

  .workflow-boxed{margin-bottom: 50px;}
}


@media (max-width:1024px){
  .section-technology-workflow .hgroup {
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
  }
  .section-technology-workflow .hgroup h2{font-size: 50px;}

  .workflow-boxed{
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .card-workflow-bg{
    position: relative;
    margin-bottom: 10px;
  }

  .card-workflow{max-width: 420px; --radius: 20px;}
  .card-workflow .card-header{height: 70px;}
  .card-workflow .card-header h2{font-size: 20px;}
}

@media (max-width:670px){
  .section-technology-workflow .hgroup{padding-bottom: 20px;}
  .section-technology-workflow .hgroup h2{font-size: 40px;}

  .card-workflow .card-header{height: 60px;}

  .card-workflow-bg .bg{width:320px;}
  .card-workflow-bg .jdx img{width: 160px;}

  .card-workflow{max-width: 330px;}

  .workflow-boxed{margin-bottom:30px;}
}

@media (max-width:575px){
  .card-workflow > .card-body{
    padding:25px 20px;
  }
  .section-technology-workflow .hgroup h2{font-size: 34px;}
  .section-technology-workflow .hgroup h5{font-size: 24px;}
}

/*==================================================
We have been recognized 
through Thailand’s regulators
==================================================*/ 
.section-recognition .hgroup {
  max-width: 1545px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.section-recognition .hgroup h2{
  font-size: 104px;
  line-height: 1.2;
  margin-bottom: 15px;
}
.section-recognition .hgroup h5{
  font-size: 38px;
  font-weight: var(--fw-400);
}

.card-certified{
  display: flex;
  gap:40px;
  align-items: center;
  font-size: 16px;
  width: 480px;
}
.card-certified .card-photo{
  width: 148px;
  height: 148px;
  border: 1px solid #EAEAEA;
  border-radius: 20px;
  overflow: hidden;
  flex-shrink: 0;
}
.card-certified .card-photo .icons{
  --size:100%
}
.card-certified .card-body{
  padding: 0; 
}
.card-certified h3{
  font-size: inherit;
  margin-bottom:5px;
}
.card-certified p{
  margin: 0;
  color: #787E90;
}

.marquee {
  overflow: hidden;
  box-sizing: border-box;
  position: relative; 
  display: block; 
  width: 100%;
   
  overflow: hidden;  
  padding:  0;

}
.marquee > div{
  display: flex;
  align-items: center;
  height: 100%; 
}
.marquee div.d-flex{
  gap:0
}
.marquee-certified{
  overflow: visible;
  margin: 70px 0;
  position: relative;
}
.marquee-certified:before,
.marquee-certified:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 100;
 
  background: linear-gradient(90deg, #FFFFFF 47.77%, rgba(255, 255, 255, 0) 96.77%);
}

.marquee-certified:before{
  left:calc(var(--padding-x) * -1);
}
.marquee-certified:after{
  right:calc(var(--padding-x) * -1);
  transform: rotate(-180deg);
}
.marquee-certified .card-certified{
  margin:0 20px;
}
.marquee-certified.marquee-2{
  padding-left: 250px;
}
@media (max-width:1700px){
  .section-recognition .hgroup h2{
    font-size: 90px;
  }
}
@media (max-width:1550px){
  .section-recognition .hgroup h2{
    font-size:80px;
    line-height: 1.1;
  }
  .section-recognition .hgroup h5{
    font-size: 30px;
  }
}

@media (max-width:1280px){
  .card-certified{
    font-size: 15px; 
    line-height: 1.3;
    gap: 20px;
    width: 400px; 
  }
  .card-certified .card-photo {
    width: 120px;
    height: 120px;
  }
  .card-certified p{font-size: 14px;}
  .marquee-certified{
    margin: 70px 0;
  }
  .marquee-certified.marquee-2{
    padding-left: 200px;
  }
}

@media (max-width:991.98px){
  .section-recognition .hgroup h2{
    font-size:60px; 
    margin-bottom: 16px;
  }
  .section-recognition .hgroup h5{
    font-size:24px;
  }
  .marquee-certified{
    margin: 50px 0;
  }
}

@media (max-width:767px){
  .card-certified {
    align-items: flex-start;
  }
  .card-certified .card-photo {
    width: 80px;
    height: 80px;
    border-radius: 12px;
  }
  .marquee-certified.marquee-2{
    padding-left:150px;
  }
}

@media (max-width:670px){
  .section-recognition .hgroup{
    padding-bottom: 10px;
  }
  .section-recognition .hgroup h2{
    font-size:42px; 
  }
  .section-recognition .hgroup h5{
    font-size:20px;
  }
}
@media (max-width:575px){
  .section-recognition .hgroup h2{
    font-size:30px; 
  }
  .section-recognition .hgroup h5{
    font-size:16px;
  }
  .card-certified { 
    gap: 14px;
    width: 240px; 
  }
  .card-certified .card-photo {
    width: 50px;
    height: 50px;
    border-radius: 10px;
  }
  .card-certified h3{font-size: 12px;}
  .card-certified p{font-size: 12px;}
  .marquee-certified{margin: 25px 0;}
  .marquee-certified.marquee-2{
    padding-left:0;
  }

  .marquee-certified:before, .marquee-certified:after{width: 40px;}
}

/*==================================================
Products Features
==================================================*/ 

.section-features{
  padding: 0;
  margin: 50px 0;
  min-height: 500px; 
}
.section-features .background{
  height:500px;
  bottom: auto;
  background-color: #000000;
  border-radius: 40px;
  left:var(--padding-x);
  right:var(--padding-x);

  background-image: url(../img/thumb/photo-1920x588.png);
  background-size: 1480px;
  background-position: bottom center;
}

.section-features .title-32{
  display: flex;
  align-items: center;
  justify-content:center;
  gap:20px;
  font-size: 32px;
  font-weight: 400;
  color: #fff;
  position: relative;
  z-index: 100;
  padding:90px 0;
}
.section-features .title-32 span{
  display: inline-block;
  background-color: #E03526;
  border-radius: 50px;
  padding: 12px 35px;
  line-height: 1;
}
.features-boxed {
  position: relative;
  width: 100%;
  max-width: 1660px;
  padding: 0 80px;
  margin: 0 auto;
}
.features-boxed .row > div{
  display: flex; 
  justify-content: space-between;
}
 
.features-boxed .right{
  flex-direction: row-reverse; 
}
.features-boxed .phone-model{
  width: 43%;
}
.features-boxed .left .phone-model{margin-right: 4%;}
.features-boxed .right .phone-model{
  margin-left: 4%;
  margin-top: 16%;
}

.features-boxed .right .card-features-infos{
  margin-top: auto;
  margin-bottom: 6%;
}
.features-boxed .boxed-group{
  width: 100%;
  margin-bottom: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-features-infos{
  position: relative;
  width: 44.5%;
  border-radius: 40px;
  /* height:358px; */
  padding: 15px;
  font-size: 16px;
  display: flex;
  flex-direction: column;
}
.card-features-infos:before,
.card-features-infos:after{
  content: '';
  position: absolute;
  border-radius:inherit;
}
.card-features-infos:before{
  top: 0;
  left: 0; 
  right: 0;
  bottom: 0; 
  background:linear-gradient(45deg,  rgba(204,202,201,0.4) 0%,rgba(224,53,38,0.6) 100%);
}
.card-features-infos:after{
  top: 0;
  left: 0; 
  right: 0;
  bottom: 0;
  background-color: #F6F6F6;
}

.card-features-infos .card-header,
.card-features-infos .card-body{
  position: relative;
  z-index: 100;
  text-align: center;
}
.card-features-infos .card-header{
  padding:30px 0 20px;  
}
.card-features-infos h3{
  text-align: center;
  font-size: 1.5625em;
  line-height: 1.2;
}
.card-features-infos .data-list{
  padding: 0;
  margin: 0;
  list-style-type: none;
  font-size: 18px;
  color: #0A0A0A;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  font-size: 1.125em;
}
.card-features-infos .data-list:before,
.card-features-infos .data-list:after{
  content: '';
  position: absolute;
  background-color: #F6F6F6;
}
.card-features-infos .data-list:before{
  width: 1px;
  top: 0;
  bottom: 0;
  
}
.card-features-infos .data-list:after{
  height: 1px;
  left: 0;
  right: 0;
  bottom: 0;
}
.card-features-infos .data-list li{
  width: 50%;
  padding: 20px 0;
  border-bottom: 1px solid #D9D9D9;
  border-left: 1px solid #D9D9D9;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
 
.card-features-infos .label{
  padding: 5px 15px;
  line-height: 1;
  display: inline-block;
  font-size: 11px;
  position: relative;
  top: -2px;
}

.card-features-infos .icon-arrow{
  position: relative;
  z-index: 100;
  --size:40px;
  
  transform: rotate(-90deg);
}
.card-features-infos .icon-arrow.red{
  margin: 20px 5px 5px auto; 

  background-image: url(../img/icons/icon-arrow-circle-red.svg);
}
.card-features-infos .icon-arrow.black{
  margin: 5px auto 0 5px; 
 
  background-image: url(../img/icons/icon-arrow-circle-black.svg);
}
@media (max-width:1920px){
  .section-features .background{
    height: 26vw;
  }
  .section-features .title-32{
    padding:4.5vw 0;
  }
}

@media (max-width:1680px){
  .features-boxed{
    padding: 0 4vw;
  }
  .section-features .background{
    background-size: cover;
    background-position: top 60px center;
  }
}

@media (max-width:1550px){
  .card-features-infos{width: 46.5%; font-size: 14px;  }
  .features-boxed .left .phone-model{margin-right: 2%;}
  .features-boxed .right .phone-model{margin-left: 2%;}
  .card-features-infos .label{padding:5px 10px;}
}

@media (max-width:1280px){
  .section-features .title-32{padding: 3.5vw 0;}
  .card-features-infos{width: 48%; font-size: 13px;}
  .card-features-infos .card-header{padding-top: 20px;}
}

@media (max-width:1199px){
  .section-features .title-32{padding:60px 0;}
  .features-boxed{
    max-width: 760px;
  }
  .features-boxed .left .phone-model{margin-right: 0%;}
  .features-boxed .right .phone-model{margin-left: 0%; margin-top: -60px;}
  .features-boxed .right .card-features-infos{margin-top: auto; margin-bottom: auto;}

  .section-features .background{height: 400px;}
  .card-features-infos{width: 46%; font-size: 15px;}
}

@media (max-width:880px){
  .features-boxed{
    max-width: 660px;
  }
  .card-features-infos{width: 48%; font-size: 14px;}
  .features-boxed .right .phone-model{ margin-top: -40px;}
  .section-features .background{background-size: cover;}
}

@media (max-width:670px){
  .section-features .title-32{
    font-size: 24px;
  }
  .features-boxed .phone-model{width: 39%;}
  .features-boxed .right .phone-model{ margin-top: -10px;}
  .card-features-infos{width: 51%;font-size: 12px;}
  .card-features-infos .icon-arrow{--size:34px;}

  .features-boxed .row > div{
    justify-content: center;
    gap: 20px;
  }

  .features-boxed .boxed-group {
    justify-content: center;
    gap: 30px;
  }
}

@media (max-width:550px){
  .section-features .title-32{
    flex-direction: column;
    gap: 10px;
    padding: 40px 0;
  }
  .section-features .title-32 span{
    margin-left: auto;
    margin-right: auto;
    padding: 10px 30px;
  }
  .section-features .background{height: 300px;}
  .features-boxed{padding: 0;}
  .features-boxed .boxed-group,
  .features-boxed .row > div {
    flex-direction: column-reverse;  
    justify-content: center;
    align-items: center;
    gap: 30px;
  }
  .features-boxed .boxed-group{
    margin-bottom: 50px;
  }
  .features-boxed .phone-model{width: 60%;}
  .card-features-infos{width: 90%;}

  .features-boxed .right .phone-model{ 
    margin: 0 auto;
  }
}

/*==================================================
Digital First Technology Digital-First Approach
==================================================*/ 
.section-technology-banner{
  padding: 120px 0  120px;
}
.section-technology-banner .text-jdx img{
  width: 228px;
  height: auto;
}
.section-technology-banner h2{font-size: 68px; margin: 7px 0;}
.section-technology-banner p{font-size: 30px; margin: 0;}
.section-technology-banner .buttons{justify-content: flex-start; padding:40px 0 0;}

.section-technology-banner .boxed{display: flex; padding: 0 40px; align-items: center;}
.section-technology-banner .boxed .col-left{width: 50%; padding-right: 40px;}
.section-technology-banner .boxed .col-right{width: 50%;}

.section-technology-banner .card-photo{
  position: relative;
  overflow: visible;
  margin-right: 50px;
}
.section-technology-banner .card-photo:before{
  content: '';
  position: absolute;
  top: -35px;
  left: -40px;
  bottom: -35px;
  width: 80%;

  border-radius: 70px 30px 30px 70px;
  background-color: #F6F6F6;

}
.section-technology-banner .card-photo img{
  position: relative;
  z-index: 100;
  width: 100%;
  border-radius: 40px;
}

.section-technology-banner .triangle{
  position: absolute;
  width: 350px;
  height: auto;
}
.section-technology-banner .triangle-1{
  left: -150px;
  bottom: -10px;
}
.section-technology-banner .triangle-2{
  right: -150px;
  top: 0px; 
}
@media (max-width:1550px){ 
  .section-technology-banner {padding-bottom: 100px;}
  .section-technology-banner .boxed .col-right{width: 48%; margin-left: auto; display: flex;}

  .section-technology-banner .triangle{width: 320px;}
  .section-technology-banner .triangle-1{left: -130px;bottom: -70px;}
}
@media (max-width:1440px){
  .section-technology-banner .text-jdx img{width: 200px;}
  .section-technology-banner h2{font-size: 60px;}
  .section-technology-banner p{font-size: 26px;}
  .section-technology-banner .card-photo{margin-left: auto; margin-right: 0;}
  .section-technology-banner .card-photo:before{
    top: -25px;
    left: -25px;
    bottom: -25px;

    border-radius: 60px 25px 25px 60px;
  }
  .section-technology-banner .card-photo img{border-radius: 30px;}
}

@media (max-width:1199px){
  .section-technology-banner .text-jdx img{width:150px;}
  .section-technology-banner h2{font-size: 50px;}
  .section-technology-banner p{font-size: 26px;}

  .section-technology-banner .triangle-1{left: -160px;bottom: -80px;}
}

@media (max-width:880px){
  .section-technology-banner{padding: 60px 0;}
  .section-technology-banner .boxed{
    flex-direction: column-reverse;
  }
  .section-technology-banner .boxed .col-left{width: 80%; padding-top: 70px;}
  .section-technology-banner .boxed .col-right{ width:80%; margin: 0 auto 0; }
}

@media (max-width:600px){
  .section-technology-banner{padding: 40px 0;}
  .section-technology-banner .boxed {
    padding: 0 20px;
  }
  .section-technology-banner .boxed .col-left{width: 100%; padding-top: 70px;}
  .section-technology-banner .boxed .col-right{ width:100%; }

  .section-technology-banner h2{font-size: 42px;}
  .section-technology-banner p{font-size: 18px;}
  .section-technology-banner .buttons{padding-top: 30px;}

  .section-technology-banner .card-photo:before{
    top: -20px;
    left: -20px;
    bottom: -20px;

    border-radius: 50px 20px 20px 50px;
  }
  .section-technology-banner .card-photo img{border-radius: 20px;}

  .section-technology-banner .triangle-1{bottom: -180px;}
}

/*==================================================
Job position
==================================================*/ 

.card-job-filter{
  border-radius: 30px;
  background-color: #191717;
  padding: 40px;
  margin-top: 140px;
  font-size: 20px;
}
.card-job-filter .row{
  --bs-gutter-x:20px;
  --bs-gutter-y:var(--bs-gutter-x);
}
.card-job-filter .form-control,
.card-job-filter .form-select{
  --input-h:60px;
  font-size: inherit;
  border-radius: 100px;
  padding-left: 30px;
}
.card-job-filter .form-select{
  background-image: url(../img/icons/icon-select-option-2.svg);
  background-position: right 10px center;
  background-size: 32px;
}
.card-job-filter .btn{
  --btn-h:60px;
  --bs-btn-bg:#E03526;
  --bs-btn-hover-bg:var(--red);
  border-radius: 100px;
  width: 100%;
  font-size: inherit;
}
.card-job-filter label.title{
  font-size:inherit;
  color: #fff;
  margin-bottom: 10px;
}
.job-prositions{
  --sidebar:355px;
  --padding:35px;
}
.job-prositions .hgroup{
  border-bottom: 2px solid #E0E0E0;
  justify-content: flex-start;
  padding: 20px 0;
  margin-top: 40px;
}
.job-prositions .hgroup h3{
  font-size: 20px;
  font-weight: var(--fw-400);
}
 
.job-prositions .sidebar{
  width:var(--sidebar);
  border-right: 2px solid #E0E0E0;
  padding: var(--padding);
  padding-left: 0;

}
.job-prositions .content{
  width:calc(100% - var(--sidebar));
  padding: 20px ; 
}

.card-job{
  display: flex;
  flex-direction: column;
  border-bottom:2px solid #E0E0E0;
  padding: 30px 20px 30px;
  gap:18px;
}
.card-job .rows{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-job .info-dot-row{margin: 0; padding: 0;}
.card-job p.date{color: #B5B5B5;}
.card-job h2{font-size:36px;}

@media (max-width:1440px){
  .card-job-filter{font-size: 18px;}
  .card-job-filter .form-control,
  .card-job-filter .form-select{
    --input-h:50px; 
    padding-left: 20px;
  }
  .card-job-filter .form-select{
    background-size:28px;
  }
  .card-job-filter .btn{
    --btn-h:50px;  
  }
}

@media (max-width:1280px){
  .job-prositions{
    --sidebar:300px;
    --padding:25px;
  }

  /* .card-job{
    padding: 20px 20px;
  } */

  .card-job .link-more .icon-circle{
    width: 44px;
    height: 44px;
  }
  .card-job h2{font-size: 30px;}
}
@media (max-width:1199px){
  .card-job-filter{font-size: 16px;}
  .card-job-filter .row{
    --bs-gutter-x:15px;
  }
}

@media (max-width:1024px){
  .card-job-filter .col-lg-6{width: 100%;} 

  .card-job h2{font-size:24px;}
}

@media (max-width:991.98px){
  .job-prositions{
    flex-direction: column;
    --sidebar:100%;
  }
  .job-prositions .sidebar{
    border-right: 0;
    border-bottom: 2px solid #E0E0E0;
  }
  .job-prositions .content{
    width: 100%;
    padding-left: 0%;
    padding-right: 0;
    padding-top: 0;
  }

  .card-job{
    padding-left: 0;
    padding-right: 0;
  }

  .card-job .link-more .text{
    padding-left: 0;
    padding-right: 0;
   font-size:15px;
  }
  .card-job .link-more .icon-circle{
    width: 40px;
    height: 40px;
  }

  .card-job p.date{font-size: 14px;}
}

@media (max-width:767px){
  .card-job-filter .form-control,
  .card-job-filter .form-select{
    --input-h:48px; 
    padding-left: 20px;
  }
  .card-job-filter .form-select{
    background-size:22px;
  }
  .card-job-filter .btn{
    --btn-h:48px;  
    margin-top: 0;
  }
  .card-job-filter label.title{
    margin-bottom: 0px;
    font-size: 14px;
  }

  .section-job .background{
    background-position: right -50px center;
  }
}

@media (max-width:575px){
  .card-job-filter{
    padding: 30px 25px;
    margin-top:60px;
  }
  .section-job .background{
    height: 200px !important;
 
  }
  .card-job{gap: 10px; padding-bottom: 20px;}
  .card-job .link-more .text{display: none;}
  .card-job .link-more .icon-circle{
    width: 35px;
    height: 35px;
  }
  .card-job .link-more .icon-circle .icons{
    --size:9px
  }
  .card-job p.date{font-size: 12px;}
  .card-job h2{font-size: 20px;}
}
/*==================================================
Job detail
==================================================*/ 
.section-job-detail .background{
  height:278px;
}

.job-detail-boxed{
  background-color: #F6F6F6;
  border-radius: 22px;
  margin-top: 125px;
  --padding-x:55px;
  width: 100%;
  max-width: 1145px;
  margin: 125px auto 0;
}

.job-detail-boxed .hgroup{
  padding: 40px var(--padding-x) 30px;
  justify-content: flex-start;
  border-bottom: 1px solid #E0E0E0;
}
.job-detail-boxed .article{
  padding: 40px var(--padding-x) 30px;
}
.info-dot-row{padding: 0;}
.info-dot-row p:before{background-color: #000; width: 6px; height: 6px;}
.info-dot-row p{font-size: 16px;color: #000;}

.label.experience{
  font-size: 12px;
  font-weight: var(--fw-700);
  padding: 4px 14px;
  color: #fff;
  background-color: #000;
}
.job-detail-boxed h2{font-size: 32px;}
.job-detail-boxed h3{font-size: 21px; margin-bottom: 30px;}
.job-detail-boxed hr{border-color:#E0E0E0 ; margin: 25px 0;}
.job-detail-boxed ul{padding-left: 17px;}
.job-detail-boxed ul li{margin-top:8px; margin-bottom: 8px;}

.section-job-apply {
  padding: 0 0 120px;
  margin: 40px 0 0;
}
.section-job-apply .background{
  background-color: #E03526;
  height: 295px;
}
.section-job-apply .container{
  display: flex;
  flex-direction: column;
  justify-content: center;
} 
.section-job-apply .btn{
  margin-top: 70px;
  margin-bottom: 70px;
  width: 256px;
}

.card-contact{
  background-color: #fff;
  border-radius: 40px;
  display: flex;
  flex-direction: column;
  padding:50px 40px;
  text-align: center;
  box-shadow: 0px 1px 24px rgba(0, 0, 0, 0.13);
  max-width: 735px;
  width: 100%;
  margin: 0 auto;
}
 

.card-contact .icons{
  --size:68px;
  margin: 0 auto 20px;
}
.card-contact h3{
  font-size: 24px;
  font-weight: 600;
  margin-top: 5px;
}
.card-contact p{
  font-size: 28px;
  margin: 0;
}

@media (max-width:1199px){
  .section-job-apply{padding-bottom: 90px;}
  .section-job-apply .btn{
    margin-top: 50px;
    margin-bottom: 50px;
  
  }

  .section-job-apply .background{
    height: 270px;
  }
}

@media (max-width:767px){
  .job-detail-boxed{
    --padding-x:30px;
  }
  .job-detail-boxed .hgroup,
  .job-detail-boxed .article {
    padding: 25px var(--padding-x);
  }
  .job-detail-boxed h2{
    font-size: 28px;
  }
  .job-detail-boxed h3 {
    font-size:19px;
    margin-bottom:25px;
  }
  .job-detail-boxed hr{
    margin: 18px 0;
  }
  .card-contact h3{
    font-size: 22px;
  }
  .card-contact p{
    font-size: 24px;
  }
}

@media (max-width:575px){
  .job-detail-boxed{
    --padding-x:20px;
    margin-top: 50px;
  }

  .info-dot-row p,
  .job-detail-boxed p.date{font-size: 13px;}
  .section-job-detail .background{height: 220px;}

  .job-detail-boxed h2{font-size: 24px;}
  .job-detail-boxed h3{font-size: 17px;}
  .job-detail-boxed hr{margin: 14px 0;}

  .card-contact{
    padding: 40px 20px;
  }
  .card-contact h3{
    font-size: 18px;
  }
  .card-contact p{
    font-size: 20px;
    word-break: break-all;

  }
  .section-job-apply{padding-bottom:50px;}
  .section-job-apply .btn {
    margin-top: 30px;
    margin-bottom: 30px;
    width: auto;
  }
}

/*==================================================
Pah Advance 
==================================================*/ 
.section-pah-banner{
  height: auto;
  overflow: hidden;
  padding: 0;
}
.section-pah-banner .card-photo{
  position: absolute;
  right: 0;
  top: 0;
  width:1150px; 
  filter: drop-shadow(-1px 2px 234.4px rgba(0, 0, 0, 0.12));
  margin-left: auto;
  margin-right: -280px;
  margin-top: -100px;
}
.section-pah-banner .card-photo img{
  width: 100%;

}
 
.section-pah-banner .article{
  display: flex;
  flex-direction: column; 
  justify-content: center;
  text-align: left;
  min-height: 1000px;
  max-width: 635px;
  gap: 30px;
  position: relative;
  z-index: 100;
  padding-top: 20px;
}
.section-pah-banner .article .logo{
  width: 133px;
  height: auto;
}
.section-pah-banner h2{font-size: 68px; line-height:1.2;}
.section-pah-banner h2 .text-red{color: #E03526;}
.section-pah-banner p{font-size: 26px; margin: 0;}
.section-pah-banner .buttons{
  justify-content: flex-start;
  gap: 30px;
  padding:20px 0 0;
}
.section-pah-banner .btn-pretty .btn-text{min-width: 170px;}

@media (max-width:1680px){
  .section-pah-banner .article{min-height: 900px; margin-left: 20px;}
  .section-pah-banner .article .logo{width: 120px;}
  .section-pah-banner h2{font-size: 60px;}
  .section-pah-banner .card-photo{width: 1000px; margin-right: -180px;}
}

@media (max-width:1550px){
  .section-pah-banner .article{min-height: 800px; margin-left: 20px;}
  .section-pah-banner .article .logo{width: 100px;}
  .section-pah-banner h2{font-size:50px;}
  .section-pah-banner .btn-pretty .btn-text{min-width: 140px;}
  .section-pah-banner .card-photo{width: 900px; margin-right: -180px;}
}

@media (max-width:1440px){
  .section-pah-banner .article {max-width: 535px;min-height:760px;}
 
  .section-pah-banner p{font-size: 22px;}
  .section-pah-banner .buttons{gap: 20px;}
 
  .section-pah-banner .card-photo {width: 860px; margin-right: -140px;}
}

@media (max-width:1280px){
  .section-pah-banner .card-photo {margin-right: -180px;}
}

@media (max-width:1199px){
  .section-pah-banner .btn-pretty .btn-text{min-width: 100px;}
  .section-pah-banner .article {gap: 20px;}
  .section-pah-banner h2{font-size:40px;}
  .section-pah-banner p{font-size:20px;}
}

@media (max-width:991.98px){
  .section-pah-banner .card-photo {width: 720px; margin-top: -140px; margin-right: -140px;}

  .section-pah-banner .article{
    min-height: 0;
    padding-top: 330px;
    padding-bottom: 80px;
  }
}

@media (max-width:670px){
  .section-pah-banner .card-photo {width: 540px; margin-top: -80px; margin-right: -100px;}

  .section-pah-banner h2{font-size:32px;}
  .section-pah-banner p{font-size:16px;}
  .section-pah-banner .article .logo{width: 80px;}
  .section-pah-banner .buttons{
    padding-top: 10px;
    flex-wrap: wrap;
  }
}

@media (max-width:500px){
  .section-pah-banner .card-photo {width: 440px; margin-top: -80px; margin-right: -100px;}
  .section-pah-banner .article{ 
    padding-top:280px;
    padding-bottom: 50px; 
    margin-left: 0;
  }
  .section-pah-banner .btn-pretty .btn-text{min-width: 150px;}
}

/*==================================================
Pah Advance  - partner
==================================================*/ 

.section-pah-partner .hgroup{
  padding: 40px 0;
}
.section-pah-partner .hgroup h2{
  font-size: 34px;
  display: flex;
  align-items: center;
  font-weight: var(--fw-700);
}
.section-pah-partner .hgroup h2 .d-flex{
  align-items: center;
}
.section-pah-partner .hgroup h2 .logo{
  width: 74px;
  height: auto;
  margin: 0 15px;
}

.card-partner-logo{
  position: relative;
  width: 140px; 

}
.card-partner-logo img{
  width: 100%;
  height: auto;
  filter: none;
    -webkit-filter: grayscale(0);
    transition: all 0.25s;
}
/* .card-partner-logo:hover img{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
} */
.partner-list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 50px;
  max-width: 1440px;
  margin: 0 auto;
  padding-top:20px;
  padding-bottom: 50px;
}

@media (max-width:1280px){
  .section-pah-partner .hgroup h2{font-size: 30px;}
  .section-pah-partner .hgroup h2 .logo{width: 70px;}
  
  .partner-list{gap: 40px;}
}

@media (max-width:991.90px){
  .partner-list{gap: 30px;}
}

@media (max-width:767px){
  .section-pah-partner .hgroup h2{font-size: 30px; flex-direction: column;}
  .section-pah-partner .hgroup h2 .logo{width: 50px;}
}

@media (max-width:575px){
  .section-pah-partner .hgroup h2{font-size:24px;}
  .partner-list{gap: 20px; padding: 0 0 20px;}
  .card-partner-logo{width:calc(33.333%  - 17px)}
  .section-pah-partner .hgroup h2 .logo{width: 45px;}
}

/*==================================================
Pah Advance  - Faq
==================================================*/ 
.section-faq-banner {
  padding: 0 !important;
  overflow: hidden;
}
.section-faq-banner .background{
  position: relative;
 
}
.section-faq-banner .background .bg{
  width: 100%;
  height: auto;
}
.section-faq-banner .hgroup{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center; 
}
.section-faq-banner h2{
  font-size: 58px;
  line-height: 1.2;
}
.section-faq-banner p{
  font-size: 20px;
  margin: 0;
}

@media (min-width:1900px){
  .section-faq-banner{
    height: 465px;
  }
  .section-faq-banner .background{
    position: absolute;
  }
  .section-faq-banner .background .bg{
    height: 100%;
    width: 100%; 
    object-fit: contain;
    object-position: center;
    position: relative;
    z-index: 100;
  }

  .section-faq-banner .background:before,
  .section-faq-banner .background:after{
    content: '';
    position:absolute;
    top: 0;
    bottom: 0;
    width: 50%;
  }
  .section-faq-banner .background:before{
    left: 0;
    background-color: #d0020f;
  }
  .section-faq-banner .background:after{
    background-color: #710910;
    right: 0;
  }
}

@media (max-width:1366px){
  .section-faq-banner h2{
    font-size: 48px; 
  }
  .section-faq-banner p{
    font-size: 18px; 
  }
}
@media (max-width:991.98px){
  .section-faq-banner h2{
    font-size: 5vw; 
  }
  .section-faq-banner p{
    font-size: 2vw; 
  }
}

@media (max-width:575px){
  .section-faq-banner h2{
    font-size: 6.3vw; 
  }
  .section-faq-banner p{
    font-size: 3vw; 
  }
}

/*==================================================
Pah Advance  - Faq
==================================================*/ 

.section-faq{
  background-color: #191717;
  padding: 130px 0 80px;
}

.section-faq .left{
  border-right: 1px solid #262626;
  padding-bottom: 60px;
}
.section-faq .right{
  padding-bottom: 60px;
}
.section-faq .hgroup { 
  padding: 0 0 50px 0;
}
.section-faq .hgroup .label{
  font-size: 23px;
  padding: 11px 30px;
  background-color: #E03526;
  font-weight: var(--fw-400);
  color: #fff;
  margin-top: -40px;
}


.accordion{
  --bs-accordion-bg:transparent;
  --bs-accordion-border-width:0;
  --bs-accordion-border-radius:0; 
  border-top: 1px solid #262626;
  padding-top:35px;
}
.accordion-item{
  position: relative;
  overflow: hidden;
  border-radius: var(--bs-accordion-border-radius);
  display: flex;
  flex-direction: column; 
  padding-left: 110px;  
  margin: 0 30px;
  min-height: 80px;
}
.accordion-title{
  background-color:transparent;
  line-height: 1.25;
  color:#fff;
  padding: 0 0; 
  font-size: 22px;
  font-weight: var(--fw-400);
  display: flex;  
  align-items: center; 
  cursor: pointer;
  transition: all 0.20s;
  margin-top: 20px;
  margin-bottom: 10px;
}
.accordion .number{ 
  width: 80px;
  height: 80px;
  position: absolute;
  top: 0;
  left: 0; 
  font-size: 28px;
  font-weight: var(--fw-700);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 25px;
  transition: all 0.25s;
  color: #fff;
}
.accordion .number span{
  position: relative;
  z-index: 10;
}
.accordion .number:before,
.accordion .number:after{
  content: '';
  position: absolute; 
  border-radius: 12px;
  
}
.accordion .number:before{ 
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: linear-gradient(180deg, #2E2E2E 0%, rgba(46, 46, 46, 0) 100%);
}
.accordion .number:after{
  left: 1px;
  right: 1px;
  bottom: 1px;
  top: 1px;
  background: linear-gradient(180deg, #242424 0%, rgba(36, 36, 36, 0) 100%);
}
 
.accordion-title .icons{
  --size:34px;  
  margin-left: auto;
  background-color: transparent;
  background-image: url(../img/icons/icon-faq-plus.svg);
}
.accordion-title .icons .icon-plus{width: 14px;height: 14px;}
.accordion-title:hover ,
.accordion-title[aria-expanded="true"] { 
  color: #FC5B4D;
}
.accordion-title[aria-expanded="true"] .icons{
  background-image: url(../img/icons/icon-faq-close.svg);
}
.accordion-title:hover .icons .icon-plus:before, 
.accordion-title:hover .icons .icon-plus:after,
.accordion-title[aria-expanded="true"] .icons .icon-plus:before, 
.accordion-title[aria-expanded="true"] .icons .icon-plus:after{background-color: #fff;}

.accordion-body{
  background-color:transparent;
  color: #fff;  
  font-size: var(--fs-18);
  padding:0; 
  position: relative;
  z-index: 100;
}
.accordion-body p:last-child{margin-bottom: 10px;}
.accordion-body strong{color: #fff;}
.accordion-body p a:hover{color: #E03526;}

 
.accordion-item:hover .number{color: #FC5B4D;}
.accordion-collapse.show + .number,
.accordion-collapse.collapsing + .number{color: #FC5B4D;}

.accordion hr{
  margin: 30px 0;
  border-color: #262626;
}
 

@media (max-width:1550px){
  .accordion .number{
    width: 70px;
    height: 70px;
    font-size: 24px;
  }
  .accordion-item{
    padding-left: 92px;
    min-height: 70px;
  }

  .accordion-title{  
    margin-top: 18px;
    margin-bottom:0px;
  }

  .accordion-body{
    font-size: 16px;
    padding-top: 10px;
  }
  .accordion-title .icons {
    --size:26px;
  }
}
 
 
@media (max-width:1440px){ 
  .accordion-item{margin: 0 20px;}

  .accordion .number{
    width: 60px;
    height: 60px;
    font-size: 20px;
  }
  .accordion-item{
    padding-left: 80px;
    min-height: 60px;
  }

  .accordion-title{ 
    font-size: 18px;
  }

}
@media (max-width:1199px){
  .section-faq .left{
    border-right: 0;
    border-bottom: 1px solid #262626;
    padding-bottom: 30px;
  }
  .section-faq .right{
    margin-top: 50px;
   
  }
  .section-faq .hgroup .label{
    margin-top: 0;
  }
}

@media (max-width:991.98px){
  .accordion hr{margin: 20px 0;}
}

@media (max-width:767px){
  .section-faq{padding: 80px 0;}
  .accordion-title{font-size:18px;}
  .accordion-body{font-size: 15px;}
}
@media (max-width:575px){
  .section-faq{padding: 50px 0;}

  .accordion-item{margin-left: 0; margin-right: 0;}

  .accordion .number{
    width:40px;
    height: 40px;
    font-size:18px;
  }
  .accordion .number:before, .accordion .number:after { 
    border-radius:8px;
  }
  .accordion-item{
    padding-left: 56px;
    min-height: 0;
  }
  .accordion-title{
    min-height: 38px;
    font-size: 16px;
    margin-top: 0;
  }
  .accordion-title .icons {
    --size:22px;
  }
  .accordion{padding-top: 25px;}

  .section-faq .hgroup {
    padding: 0 0 40px;
  }
  .section-faq .hgroup .label{
    font-size:18px;
  }
}

/*==================================================
Testimonial
==================================================*/ 
.card-testimonial{
  display: flex;
  position: relative;
  
  margin: 20px 0 0 25px;
  transition: all 0.25s;
  
}
.card-testimonial:before,
.card-testimonial:after{
  content: '';
  position: absolute;
}
.card-testimonial:before{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-color: #F5F5F5;
  border-radius: 32px;
  z-index: 10;
}
.card-testimonial:after{
  content: '';
  left:-20px;
  bottom: -18px;
  width: 146px;
  height: 146px;
  background-image: url(../img/thumb/testimonial-texture.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
  opacity: 0;
  transition: all 0.25s;
}
.card-testimonial h3{
  font-size: 23px;
  margin-bottom: 5px;
}
.card-testimonial h4{
  font-size: 17px;
  color: #2B2B2B;
  font-weight: var(--fw-400);
  margin-bottom: 18px;
}
 
.card-testimonial p{
  color: #585858;
  font-size: 16px;
  margin: 0;
}

.card-testimonial .card-photo{
  width: 177px;
  height: 177px;
  margin: -20px 0 0 -25px;
  border-radius: 50%;
  flex-shrink: 0;
  z-index: 200;
  transition: all 0.25s;
}
.card-testimonial .card-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-testimonial .card-body{
  padding:20px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 310px;
  position: relative;
  z-index: 200;
}
.swiper-testimonial{
   width: 915px;
   margin: 0;
   overflow: visible;
}
.swiper-testimonial .swiper-slide{
  width: 100%;
}
.swiper-testimonial .swiper-slide:not(.swiper-slide-active) .card-testimonial{
  transform: scale(0.8);  
}
.swiper-testimonial .swiper-slide:not(.swiper-slide-active) .card-testimonial:before{
  border-radius: 42px; 
}
.swiper-testimonial .swiper-slide:not(.swiper-slide-active) .card-testimonial:after{ 
  opacity: 1;
}

.swiper-testimonial .swiper-slide:not(.swiper-slide-active) .card-photo{
  width: 100px;
  height: 100px;
}
.swiper-testimonial .swiper-slide:not(.swiper-slide-active) .card-body{
  min-height: 280px;
}

.swiper-button-group{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 0;
}

.swiper-button-group .swiper-pagination{
  padding: 0;
  margin: 0 20px;
  gap: 10px;
}
.swiper-button-group .swiper-pagination-bullet{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #C4C4C4;
  transform: scale(0.6);
}
.swiper-button-group .swiper-pagination-bullet-active{
  width: 10px;
  height: 10px;
  background-color: #F5333F;
  transform: scale(1);
}

.swiper-button-group .swiper-button{
  box-shadow: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  top: auto;
  right: auto;
  left: auto;
  margin:0;
  position: relative;
  background-color: #F5333F;
}
.swiper-button-group .swiper-button .icons{ 
  --size:12px;
}
.swiper-button-group .swiper-button-prev .icons{
  transform: rotate(0deg);
}
.swiper-button-group .swiper-button-next .icons{
  transform: rotate(-180deg);
}
.swiper-button-group .swiper-button .icons path{ 
  stroke: #fff;
  fill: none;
}
.section-testimonial {
  background-color: #FCFCFC;
  padding: 50px 0;
}
.section-testimonial .hgroup{
  justify-content: flex-start;
  padding: 40px 0;
  position: relative;
  z-index: 200;
}

.section-testimonial .hgroup h2{
  color:#E03526 ;
  font-size: 34px;
  font-weight: 800;
}

.section-testimonial .container{
  overflow: hidden;
}
.section-testimonial .container:before,
.section-testimonial .container:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 100;

  background: linear-gradient(90deg, #FCFCFC 47.77%, rgba(255, 255, 255, 0) 96.77%);
}
.section-testimonial .container:before{
  left: -100px;
  width: 220px; 
}
.section-testimonial .container:after{
  right:  -100px;
  width: 220px;
  transform:rotate(-180deg)
}
.swiper-overflow.testimonial{padding-left:50px;}
 
@media (max-width:1680px){
  .section-testimonial .container:after{right: -50px;}
  
}

@media (max-width:1366px){
  .swiper-overflow.testimonial{padding-left:0;}

  .swiper-testimonial{width: 800px;}

  .card-testimonial .card-photo{width: 160px; height: 160px;}
  .card-testimonial .card-body {padding: 20px 40px;}
  .card-testimonial p{font-size: 16px;}
}

@media (max-width:1199px){
  .swiper-testimonial{
    width: 86%;
    margin:0 auto;
  }

  .section-testimonial .container:before,
  .section-testimonial .container:after{
    width: 150px;
  }

  .section-testimonial .container:before{left: 0;}
  .section-testimonial .container:after{right: 0;}
}

@media (max-width:1024px){
  .section-testimonial{
    padding: 20px 0;
  }
  .section-testimonial .hgroup h2{
    font-size: 28px;
  }

  .section-testimonial .container:before,
  .section-testimonial .container:after{
    width: 60px;
  }

  .card-testimonial .card-photo {
    width: 130px;
    height: 130px;
  }
  .card-testimonial .card-body {
    padding: 20px 20px;
  }

  .swiper-testimonial{
    width: 90%;
  }

  .swiper-pagination{padding-top: 20px;}
  .swiper-pagination-bullet{width: 12px;}
  .swiper-pagination-bullet-active{width: 30px;}
}

@media (max-width:767px){
  .card-testimonial{
    flex-direction: column;
    margin:40px 0 0;
  }

  .card-testimonial .card-photo{
    margin: -60px auto 0;
  }
  .card-testimonial .card-body{
    min-height: 0;
    padding: 40px;
    text-align: center;
  }
  .swiper-testimonial{
    width: 100%;
  }
  .section-testimonial .container:before,
  .section-testimonial .container:after{display: none;}
  .card-testimonial:after{opacity: 1;}

  .section-testimonial .hgroup{justify-content: center; margin-bottom: 20px;}
}


@media (max-width:575px){
  .section-testimonial .hgroup {margin-bottom: 10px; padding-top: 20px;}
  .section-testimonial .hgroup h2{font-size: 24px;}
  .card-testimonial h3{font-size: 18px;}
  .card-testimonial h4{font-size: 15px;}
  .card-testimonial p{font-size: 15px;}
  .card-testimonial .card-body{
    padding-left: 20px;
    padding-right: 20px;
  }


}


/*==================================================
Organization
==================================================*/ 

#s_organization,
#s_staff{
  top: -230px;
}
.card-organization{
  position: relative;
  border-radius: 30px;
  min-height: 400px;
  display: flex;
  background-color: transparent;
  height: 100%;
}
.card-organization .card-bubble:before, 
.card-organization .card-bubble:after{
  border-radius: 30px;
}

.card-organization .card-bubble:before{
  background:linear-gradient(10deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%);
  opacity: 0.5;
}

.card-organization .card-bubble:after{
  background-color: #F6F6F6;
}

.card-organization .card-body{
  position: relative;
  z-index: 100;
  padding: 20px;
  max-width: 342px;
  margin:0 auto;
  padding:60px 0;
}

.card-organization h3{
  font-size:28px;
  white-space: nowrap;
}
.card-organization h4{
  font-size: 18px;
  color: #E03526;
  margin-bottom: 20px;
}
.card-organization p{
  font-size: 16px;
  font-weight: var(--fw-700);
  color: #787E90;
  margin-bottom:20px;
}
.card-organization p:last-child{
  margin: 0;
}

.card-organization,
.card-organization h3,
.card-organization h2,
.card-organization p,
.card-organization .card-bubble{
  transition: all 0.25s;
}

.card-organization:hover{
  background-color: #000;
}
.card-organization:hover h3,
.card-organization:hover p{
  color: #fff;
}
.card-organization:hover .card-bubble{
  opacity: 0;
}
.card-organization.hover-bg-red:hover{
  background-color: #E03526;
}
.card-organization.hover-bg-red:hover h4{
  color: #fff;
}
.section-organization {
  padding: 50px 0 150px;
}
.section-organization .hgroup{
  padding: 80px 0 50px;
}
.section-organization .hgroup h2{
  font-size: 34px;
  font-weight: var(--fw-700);
}

.section-organization .background{
  top: -160px;
  background-image: url(../img/thumb/triangle-stroke-3.svg);
  background-size: auto;
  background-position: top center;
}
@media (max-width:1440px){
  .card-organization h3{ 
    white-space: normal;
  }
  .card-organization .card-body{ 
    padding:40px 30px;
  }
}

@media (max-width:1280px){
  .card-organization h3{
    font-size:24px;
  }
}

@media (max-width:991.98px){
  .card-organization {
    min-height: 0;
  }
  .card-organization .card-body{
    max-width: 100%;
  }

  .section-organization .hgroup{
    padding: 50px 0 30px;
  }
  .section-organization .hgroup h2{
    font-size: 28px;
  }
  .section-organization{padding-bottom: 100px;}

  #s_organization,
  #s_staff{
    top: -100px;
  }
}

@media (max-width:767px){
  .section-organization{padding-bottom: 70px;}
}

@media (max-width:575px){
  .card-organization .card-body {
    padding: 30px 20px;
  }

  .card-organization p{
    font-size: 15px;
  }
  .section-organization .hgroup{
    padding: 40px 0 20px;
  }
  .section-organization .hgroup h2{
    font-size: 24px;
  }

  .section-organization{padding-bottom: 50px; padding-top: 30px;}
}

/*==================================================
Key Benefits
==================================================*/ 
.section-benefits {
  padding: 0;
  margin-top: 40px;
}
.section-benefits .background{
  background-image: url(../img/thumb/photo-1920x554.jpg);
  background-position: top center;
  height: 375px;
}
.section-benefits .hgroup{
  padding: 20px 0 20px;
  margin-top: 55px;
  position: relative; 
}
.section-benefits .hgroup h2{
  display: flex;
  font-size: 62px;
  margin-right: auto;
  align-items: center;
  gap: 10px;
}
.section-benefits .hgroup h2 .icons{
  --size:56px;
}

.card-benefits{
  background: #FFFFFF;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.13);
  border-radius: 20px;
  width: 100%;
  max-width: 425px;
  height: 140px;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  text-align: center;

  position: absolute;
  font-size: 16px;
}

.card-benefits h3{font-size: 1.375em;}
.card-benefits p{font-size: 1.125em; margin: 0;}

.card-wallet{ 
  background: #E03526;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.13);
  border-radius: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  color: #fff;
  padding:30px 20px;
  max-width: 550px;
  width: 100%;
  position: relative;

  position: absolute;
  font-size: 16px;
  z-index: 100;
}

.card-wallet h3,
.card-wallet h5{
  color: inherit;
}
.card-wallet h3{
  font-size: 2.9375em;
  margin-bottom: 10px; 
}
.card-wallet h5{
  font-size: 1.5em;
}
.card-wallet p{
  margin: 0;
  font-size: 1.25em;
}

.card-wallet h3:before,
.card-wallet h3:after{
  content: '';
  top: 0; 
  width: 116px;
  height:116px;
  position: absolute;
  background-image:url(../img/icons/line.svg);
  background-position: center;
  background-repeat:no-repeat;
  background-size: contain; 
}
.card-wallet h3:before{left:8px; top: 5px;}
.card-wallet h3:after{ right: 10px; top: -70px;}
.card-wallet .icon-wallet{
  --size:48px;
  margin: 10px auto 15px;
  background-image: url(../img/icons/icon-wallet.svg);
}


.key-benefits-boxed{
  position: relative;
  margin-top: 250px;
}

.key-benefits-boxed .woman{
  width: 56%;
  margin: 0 auto; 
  display: block;
  position: relative;
  left: 2%;
  z-index: 1;
}
.key-benefits-boxed .woman img.w-100{
  position: relative;
  z-index: 10;
}
.key-benefits-boxed .woman:before{
  content: '';
  position: absolute;
  left: 0;
  right: 20%;
  bottom: -5px;
  height: 10%;
  background: linear-gradient(180deg, #FFFFFF 68.71%, rgba(255, 255, 255, 0) 96.77%);
transform: rotate(-180deg);
z-index: 100;
}
  
.key-benefits-boxed .card-wallet{
  right: 8%;
  top: -14%;
}
.key-benefits-boxed .line{
  position: absolute;
  width: 150px;
  height: auto;
  z-index: 1;
 
}

.key-benefits-boxed .line-1{
  top: -5%;
  left: 24%;
}
.key-benefits-boxed .line-2 {
  top: 17%;
  left: 5%;
}
.key-benefits-boxed .line-3 {
  top: 52%;
  left: -3%;
  transform: rotate(-65deg);
}
.key-benefits-boxed .line-4 {
  top: 47%;
    right: 16%;
    transform: rotate(114deg);
}

.key-benefits-boxed .line-5 {
  top: 77%;
  right: 12%;
  transform: rotate(-197deg);
}
.card-benefits-list{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
}
.card-benefits.c1{top: -24%;left: 18%;}
.card-benefits.c2{top: 6%;left: 5%;}
.card-benefits.c3{top:56%;left: -2%;}
.card-benefits.c4{top:40%;right: 5%;}
.card-benefits.c5{top:80%;right: 0%;}


@media (max-width:1700px){
  .card-wallet{width: 480px; font-size: 15px;}
  .card-wallet h3:before,
  .card-wallet h3:after{width: 100px; height: 100px;}
  .card-wallet h3:before{left: 0;}
  .card-wallet h3:after{top: -34px; right: 0;}

  .card-benefits {max-width: 400px; height: 120px; font-size: 15px;}
  .card-benefits.c3{left:0}
  .card-benefits.c5{right: 2%;}

}

@media (max-width:1550px){
  .card-wallet{width: 440px; right: 2%;}

  .card-wallet h3:before,
  .card-wallet h3:after{width: 80px; height: 80px;} 

  .section-benefits .background{height: 300px;}
  .section-benefits .hgroup{margin-top: 20px;}
  .key-benefits-boxed{margin-top: 200px;}
}

@media (max-width:1440px){
  .key-benefits-boxed{margin-top: 180px;}
  .key-benefits-boxed .card-wallet {
    right: 3%;
    top: -21%;
  }
  .card-wallet{font-size: 14px;}
  .card-wallet .icon-wallet{--size:40px;}
  .card-benefits {width: auto; padding-left: 25px; padding-right: 25px; min-width: 300px;}
  .card-benefits.c5{right: 0%; top:80%;}

  .section-benefits .hgroup h2{font-size: 52px;}
  .section-benefits .hgroup h2 .icons {--size: 50px;}
}

@media (max-width:1280px){
  .card-wallet{font-size: 13px;width: 400px; }
  .card-benefits{font-size: 14px;}

  .section-benefits .hgroup h2{font-size:48px;}
  .section-benefits .hgroup h2 .icons {--size: 44px;}
  .section-benefits .background{height: 250px;}
  .key-benefits-boxed{margin-top: 140px;}
}

@media (max-width:1120px){
  .card-benefits-list{
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 40px;

    position: relative;
  }
  .card-benefits{
    position: relative;
    top: auto !important;
    left: auto!important;
    right: auto!important;
    bottom: auto!important;

    width:calc(50% - 38px);
    min-width: 0;
    max-width: unset;
  }

  .card-wallet{
    position: relative;
    top: auto !important;
    left: auto!important;
    right: auto!important;
    bottom: auto!important;

    margin: -50px auto 0;
    width: 500px;
  }
  .key-benefits-boxed{margin-top: 50px;}
  .key-benefits-boxed .woman{
    width:650px;
    left:5%;
  }
  .key-benefits-boxed .woman:before{height: 15%;}
  .section-benefits .hgroup {
    margin-top: 51px;
  }
  .section-benefits .hgroup h2{
    margin-left: auto;
    margin-right: auto;
  }
  .section-benefits .background{
    height: 200px;
  }

  .key-benefits-boxed .line{display: none;}
}

@media (max-width:767px){
  .card-benefits-list{
    gap: 20px;
  }
  .card-benefits{
    width:calc(50% - 28px);
  }
}
@media (max-width:670px){
  .card-benefits-list{
    gap: 20px;
  }
  .card-benefits{
    width:100%;
  }

  .key-benefits-boxed .woman{width: 80%;}
  .section-benefits .hgroup {margin-top: 20px;}
  .section-benefits .hgroup h2{font-size:34px;}
  .section-benefits .hgroup h2 .icons {--size: 34px;}
  .section-benefits .background{
    height: 125px;
  }
  .section-benefits{margin-top: 0;}
}

@media (max-width:575px){
  .card-wallet{
    width: 100%;
  }
  .card-wallet h3 span{position: relative; z-index: 10;}

  .key-benefits-boxed .woman{width: 90%;}
  .card-wallet{margin-top:-30px;}
}


/*==================================================
BBT
==================================================*/ 

.section-bbt-banner{
  padding: 0 !important;
  margin-bottom: 40px;
}
.section-bbt-banner .img-banner{
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: block;
  position: relative;
}
.section-bbt-banner .img-banner:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -50px;
  height: 100px; 
background: linear-gradient(180deg, #FFFFFF 68.71%, rgba(255, 255, 255, 0) 96.77%);
transform: rotate(-180deg);

}
.section-bbt-banner .img-banner img{
  width: 100%;
}
 
.section-overlap{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;

  display: flex;
}

.section-bbt-banner .container{
  display: flex;
}
.section-bbt-banner .article{
  margin: auto 0;
  max-width: 600px;
  padding-top:50px;
}
.section-bbt-banner .logo{width: 120px; height:auto;}
.section-bbt-banner h2{font-size: 70px; margin: 30px 0; line-height: 1.2;}
.section-bbt-banner p{
  font-size: 34px;
  margin: 0;
}
@media (max-width:1920px){
  .section-bbt-banner .img-banner{
    max-width: unset;
    width:auto;
    margin:0 -70px;
  
  }
}

@media (max-width:1700px){
  .section-bbt-banner .article{
    padding-left: 20px;
  }
  .section-bbt-banner h2{font-size: 60px; margin: 20px 0;}
  .section-bbt-banner .logo{width: 110px;}
}

@media (max-width:1440px){
  .section-bbt-banner h2{font-size: 50px; }
  .section-bbt-banner .logo{width: 90px;}
  .section-bbt-banner p{font-size: 30px;}
  .section-bbt-banner .article{max-width: 500px;}
}
 
@media (min-width:992px) and (max-width:1280px){
  .section-bbt-banner h2{font-size: 35px; } 
  .section-bbt-banner p{font-size: 20px;}
  .section-bbt-banner .logo{width: 60px;}

  .section-bbt-banner .article{max-width: 350px; margin-left: 8vw;}
}

@media (max-width:991.98px){
 
  .section-bbt-banner .section-overlap{
    position: relative;
  }
 
  .section-bbt-banner .img-banner{
    position: absolute;
    top: 0; 
    bottom: 0;
  } 

  .section-bbt-banner .img-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .section-bbt-banner .article{
    padding:140px 40px;
    max-width:420px;
    margin: 0
  } 

  .section-bbt-banner h2{font-size: 35px; } 
  .section-bbt-banner p{font-size: 20px;}
  .section-bbt-banner .logo{width: 70px;}

  .section-bbt-banner .img-banner:before{bottom: -20px; }
}

@media (max-width:575px){
  .section-bbt-banner .article{
    padding: 100px 20px;
    margin-top: 20px;
  }
  .section-bbt-banner h2{font-size: 26px; } 
  .section-bbt-banner p{font-size: 18px;}
  .section-bbt-banner .logo{width: 50px;}
}

/*==================================================
4 Services
==================================================*/ 
.section-bbt-service{
  padding-bottom: 100px;
}
.card-service{
  border-radius: 30px;
  position: relative;
  height: 161px;
  padding: 0 15px;
  gap: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-service .card-bubble{
  border-radius: inherit;
  background-color: #fff;
}
.card-service .card-bubble:before,
.card-service .card-bubble:after{
  border-radius: 30px; 

}
.card-service .card-bubble:before{
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,0.8) 100%);
  opacity: 0.5;
}
.card-service h3{
  font-size: 36px;
  text-align: center;
}

.card-service .d-flex{
  display: flex;
  align-items: center;
  gap: 20px;
}

.card-service .icons{
  --size:92px;
}
.card-service .icons img{
  border-radius: 50%;
}
.card-service .icons .label{
  border-radius: 40px;
  font-size: 11px;
  text-align: center;
  width: 58px;
  padding: 4px 5px;
  text-align: center;
  justify-content: center;

  position: absolute;
  left: 50%;
  bottom: -10px;
  margin-left: -29px;
}
.bbt-service-list{
  --bs-gutter-x:35px;
  --bs-gutter-y:var(--bs-gutter-x);
}
.bbt-service-list div.left{width:40%;}
.bbt-service-list div.right{ width: 60%;}
.bbt-service-list .hgroup{
  justify-content: flex-start;
  flex-direction: column;
}
.bbt-service-list .hgroup h2{
  color: #E03526;
  font-size: 70px;
}
.bbt-service-list .hgroup p{
  margin: 0;
  font-size: 22px;
}


@media (max-width:1440px){
  .card-service {
    height: 150px;
  }
  .card-service h3{font-size: 32px;}
  .card-service .icons{
    --size:86px;
  }

  .bbt-service-list .hgroup h2{
    font-size: 60px;
  }
}

@media (max-width:1280px){
  .bbt-service-list {
    --bs-gutter-x: 25px;
  } 
}

@media (max-width:1199px){
  .bbt-service-list .hgroup{
    padding-bottom: 20px;
  }
  .bbt-service-list div.left,
  .bbt-service-list div.right{ width: 100%;}
}

@media (max-width:1024px){
  .card-service{height: 120px;}
  .card-service h3{font-size: 25px;}
  .card-service .icons {--size: 68px;}

  .card-service .icons .label{padding: 2px 5px; font-size: 10px;}

  .section-bbt-service{padding-bottom:60px;}
}

@media (max-width:767px){
  .bbt-service-list {
    --bs-gutter-x: 20px;
  }
  .bbt-service-list .hgroup{padding-bottom: 10px;}
  .bbt-service-list .hgroup h2{font-size: 45px;}
  .bbt-service-list .hgroup p{font-size: 20px;}
  .card-service{height: 100px;}
  .card-service h3{font-size: 20px;}
  .card-service .icons {--size: 60px;}
}

@media (max-width:670px){
  .section-bbt-service{
    padding-top: 0;
    margin-top: -40px;
  }
  .bbt-service-list .hgroup p{font-size:16px;}

  .card-service .card-bubble:before,
  .card-service .card-bubble:after{
    border-radius:20px; 

  }
  .section-bbt-service{padding-bottom:40px;}
}

@media (max-width:575px){
  .bbt-service-list {
    --bs-gutter-x:12px;
  }
  .bbt-service-list .hgroup h2{font-size: 35px;}
  .card-service h3{font-size: 18px;}

  .bbt-service-list div.right .card-service{
    flex-direction: column;
    height: auto;
    gap: 15px;
    padding: 20px;
  }
  .bbt-service-list div.right .card-service .d-flex{
    margin-bottom: 15px;
  }
}

/*==================================================
Tokenization Services
==================================================*/ 
.hgroup.bbt{
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding-bottom:10px ;
  text-align: center;
}
.hgroup.bbt + .label-lists{
  padding-top: 20px;
}
.hgroup.bbt h2{
  font-size: 70px;
  line-height: 1.2;
}
.hgroup.bbt h4{
  font-size: 30px;
  line-height: 1.2;
}
.hgroup.bbt p{
  font-size: 22px; 
  margin: 0;
}
.label-lists{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px 20px;
  max-width: 1230px;
  margin: 0 auto;
}
.label.h-32{
  padding: 5px 14px;
  font-size:16px;
  font-weight: var(--fw-400);
  text-align: center;
  line-height: 1;
  display: flex;
  align-items: center;
}
.label.h-42{
  padding: 8px 18px;
  font-size:16px;
  font-weight: var(--fw-400);
  text-align: center;
}

.card-token-infos{
  padding: 20px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.13);
  border-radius: 20px;
  text-align: center;
  font-size: 14px;
}
 
.card-token-infos p:last-child{
  margin: 0;
}

.token-info-boxed{
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px;
  padding: 50px 0;
  align-items: center;
  min-height: 769px;

  background-position: center;
  background-repeat:no-repeat;
  background-size: contain;
  background-image: url(../img/thumb/shadow-circle.png);

}
.token-info-boxed .cols.left,
.token-info-boxed .cols.right{
  width: 22%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 286px;
  gap: 50px;
}
.token-info-boxed .cols.center{
  width: 56%;
  display: flex;
  justify-content: space-between;
  padding: 0 5%;
}

.card-token-triangle{
  position: relative;
  width: 46%;
  filter: drop-shadow(-1px 2px 220px rgba(0, 0, 0, 0.1));
}
.card-token-triangle img.triangle{
  width: 100%;

}
.card-token-triangle .card-body{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content:center;
  z-index: 100; 
  gap: 15px;
  padding-left: 13%;

}
.card-token-triangle h3{
  text-align: center;
  font-size: 22px;
}

.card-token-triangle .icons{
  /* --size:140px; */
  --size:42%;
  height: auto;
}
@media (max-width:1700px){
  .token-info-boxed{margin: 0;}

  .token-info-boxed .cols.center{
    padding: 0 3%;
  }
  .card-token-triangle{width: 47%;}
  .card-token-triangle .icons{--size:39%}

  .token-info-boxed{min-height: 40vw;}
}
@media (max-width:1440px){
  .hgroup.bbt h2{
    font-size: 60px;
  }

  .label-lists{
    gap: 25px 15px;
  }
  .label.h-32{
    font-size: 15px;
  }

  .token-info-boxed .cols.left, 
  .token-info-boxed .cols.right{
    gap: 40px;
  }
  .card-token-triangle h3{font-size: 20px;}
}

@media (max-width:1280px){
  .hgroup.bbt h2{
    font-size: 50px;
  }
  .hgroup.bbt h4{
    font-size: 24px;
  }
  .hgroup.bbt p{
    font-size: 20px;
  }
  .label-lists{
    gap: 20px 15px;
  }
  .label.h-32{
    font-size: 14px;
  } 

  .token-info-boxed .cols.center{
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .token-info-boxed .cols.left, 
  .token-info-boxed .cols.right{
    width: 30%;
  }
  .token-info-boxed .cols.center{
    width: 40%;
    padding: 0;
  }
  .card-token-triangle {
    width: 74%;
    filter: drop-shadow(-1px 2px 60px rgba(0, 0, 0, 0.1));
  }
  .card-token-triangle h3{font-size: 18px;}
}

@media (max-width:991.98px){
  .token-info-boxed .cols.left, 
  .token-info-boxed .cols.right{
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    gap: 25px;
    height: auto;
    min-height: 0;
  }
  .token-info-boxed .cols.center{
    flex-direction: row;
    width: 100%;
    padding: 40px 3%;
    max-width: 520px;
    margin: 0 auto;
  }
  .card-token-triangle {
    width:46%;
  }
  .card-token-triangle h3{
    font-size: 15px;
  }
}

@media (max-width:767px){
  .hgroup.bbt h2{
    font-size: 45px;
  }
}

@media (max-width:575px){
  
  .hgroup.bbt h2{
    font-size: 32px;
  }
  .hgroup.bbt h4{
    font-size: 18px;
  }
  .hgroup.bbt p{
    font-size: 16px;
  }
  .hgroup.bbt + .label-lists{
    padding-top: 10px;
  }
  .label-lists{
    gap:10px;
  }
  .label.h-32{
    font-size: 12px;
  }

  .card-token-triangle {
    width:48%;
  }

  .token-info-boxed .cols.center{
    gap: 20px;
    padding:30px 0;
  }
  .token-info-boxed .cols.left, 
  .token-info-boxed .cols.right{
    flex-direction: column;
    gap: 15px;
  }
  .card-token-triangle h3 {
    font-size: 2.9vw;
  }
  .card-token-triangle .card-body{
    gap: 9px;
    padding-left: 19%;
  }

  .token-info-boxed{padding: 30px 0 0;}
}

/*==================================================
Why investment token is 
good for business?
==================================================*/ 

.section-bbt-investment{
  background-color: #F6F6F6;
  padding: 80px 0;
  margin-top: 30px;
}
.section-bbt-investment .hgroup{
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  margin-bottom:50px;
}

.section-bbt-investment .card-lists{
  justify-content: center;
  --bs-gutter-x:30px;
  --bs-gutter-y:50px;
}

.row .card-certified{
  width: 100%;
}

@media (max-width:1700px){
  .row .card-certified{
    gap: 30px;
  }
}

@media (min-width:1200px) and (max-width:1440px){
  .row .card-certified {gap: 25px;}
  .row .card-certified .card-photo{width: 135px; height: 135px;}
  .row .card-certified {font-size: 15px;}
}

@media (max-width:1199px){
  .section-bbt-investment .card-lists{
    justify-content: flex-start;
  }

}

@media (max-width:991.98px){
  .section-bbt-investment .card-lists{ 
    --bs-gutter-x:20px;
    --bs-gutter-y:30px;
  }
  
  .row .card-certified {gap: 20px;}
}

@media (max-width:670px){
  .section-bbt-investment{
    padding: 40px 0;
  }
  .section-bbt-investment .card-lists{ 
    --bs-gutter-x:20px;
    --bs-gutter-y:20px; 
  }
  
  .section-bbt-investment .card-lists > div{width: 100%;}
  .section-bbt-investment .hgroup{margin-bottom: 25px;}
  .row .card-certified {gap:15px;align-items: center;}
  .row .card-certified .card-photo{width: 105px; height: 105px;}
  .row .card-certified {font-size: 15px;}
  .card-certified h3{font-size: 14px;}
}

/*==================================================
Highlight Projects
==================================================*/ 
.section-bbt-project{
  padding: 80px 0 100px;
}
.section-bbt-project .hgroup{
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 40px;
}

.swiper-project{
  overflow: visible;
}
.swiper-project .swiper-slide{
  width:630px;
  padding-right: 30px;
}
 
.card-project{
  position: relative;
  border-radius: 20px;
  background-color: #EEEEEE;
  overflow: hidden;
  
  height: 377px;
  width: 100%;
  transition: all 0.25s;
}
.card-project .card-body{
  padding:40px 0 0 40px; 
  max-width: 340px;
}
.card-project h3{
  font-size: 18px;
  margin-bottom: 15px;
  transition: all 0.25s;
}
.card-project p{
  margin: 0;
  font-size: 16px;
  transition: all 0.25s;

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:9;
  -webkit-box-orient: vertical;
}
.card-project .card-photo{
  width: 35%;
  position: absolute;
  top:90px;
  right: 30px;
  transition: all 0.25s;

 
}
.card-project .card-photo img{
  width: 100%;
}
.card-project:hover{
  background-color: #222222;
}
.card-project:hover .card-photo{
  top: 60px;
}
.card-project:hover h3,
.card-project:hover p{
  color: #fff;
}

.swiper-pagination.left{
  justify-content: flex-start;
}
.swiper-pagination.left .swiper-pagination-bullet{
  background-color: #D9D9D9;
  height: 6px;
}
.swiper-pagination.left .swiper-pagination-bullet-active{
  background-color: #E03526;
}

@media (max-width:1440px){
  .card-project p{font-size: 15px;}
}

@media (max-width:1280px){
  .card-project {
    height: 310px;
  }
  .card-project .card-body {
    padding: 30px 10px 0 25px;
    max-width: 320px;
  }
  .card-project .card-photo{
    right: 25px;
  }
  .swiper-project .swiper-slide{width:570px; padding-right: 25px;}

  .card-project h3{margin-bottom: 10px;} 
}
 

@media (max-width:670px){
  .swiper-project .swiper-slide{width:90vw; padding-right:20px;}
}

@media (max-width:670px){
    .section-bbt-project{
      padding: 50px 0;
    }
    .section-bbt-project .hgroup{
      margin-bottom: 20px;
    }
    .card-project{
      height:100%;
      display: flex;
      flex-direction: column;
    }
    .card-project .card-body {
      width: 100%;
      padding: 25px 20px 5px 20px;
      max-width: 100%; 
      font-size: 14px;
    }
 
    .card-project .card-photo{
      position: relative;
      right: auto;
      margin: auto auto 0;
      top: 0 !important;
      width:160px;
      height:170px;
    }
 

    .card-project p{font-size: 14px;}
  }

@media (max-width:500px){
 
} 

/*==================================================
BBT info
==================================================*/ 

.section-bbt-infos{
  padding: 80px 0;
  margin-bottom: 100px;
}

.card-bbt-infos{
  background-color: #fff;
  border-radius: 40px;
  padding:40px 30px;
  font-size: 20px;
  border:1px solid #F0F0F0;
  height: 100%;
}
.card-bbt-infos h3{
  font-size: 30px;
  margin-bottom:20px;
  line-height: 1.4;
}
.card-bbt-infos p{
  margin: 0;
  line-height: 1.5;
}

.card-bbt-infos .card-body{
  padding:20px 30px;
}
.card-bbt-infos.jfin{
  flex-direction: column;
  justify-content: center;
  text-align: center;
  display: flex;
}
.card-bbt-infos.jfin .logo{
  max-width: 230px;
  margin: 20px auto;
  width: 60%;
}
.card-bbt-infos.jfin h3{
  display: flex;
  justify-content: center;
  color: #E03526; 
  position: relative;
  margin:15px auto;
}
.card-bbt-infos.jfin h3 .year{
  width: 2px;
}
.card-bbt-infos.jfin h3 .year{
  position: absolute;
  top: -10px;
  right: -9px;
  color: #484848;
  font-size: 18px;
}

.card-bbt-infos.jfin .label-lists{
  gap: 25px 12px;
  padding-top: 15px;
  margin-bottom: 20px;
}
.card-bbt-infos.jfin .label-lists .label{
  font-size: 16px;
}
@media (min-width:1681px){
  .card-bbt-infos.jfin .label-lists .label{
    padding: 8px 18px; 
    font-size: 16px;
  }
}

@media (max-width:1680px){
  .card-bbt-infos.jfin .label-lists{
    gap: 15px;
  }

  .card-bbt-infos.jfin{
    padding-left: 15px;
    padding-right: 15px;
  }

  .card-bbt-infos h3{font-size: 28px;}
}

@media (max-width:1280px){
  .card-bbt-infos.jfin .label-lists{
    gap: 10px;
  }
  .card-bbt-infos.jfin .label-lists .label{
    font-size: 14px; 
    padding: 8px 15px;
  }

  .card-bbt-infos h3{
    font-size: 24px;
  }
  .card-bbt-infos.jfin .logo{width: 53%;}
  .card-bbt-infos.jfin h3{margin: 5px auto;}
  .card-bbt-infos.jfin h3 .year{font-size: 16px;}
}

@media (max-width:991.98px){
  .card-bbt-infos.jfin .logo{
    max-width: 180px;
  }

  .card-bbt-infos .card-body{
    padding: 15px;
    font-size: 18px;
  }
  .card-bbt-infos h3{
    font-size: 20px;
  }
  .card-bbt-infos.jfin h3{
    font-size: 24px;
  }
}

@media (max-width:575px){
  .section-bbt-infos {
    margin-bottom: 0;
    padding-top: 40px;
  }
  .section-bbt-infos .background{
    background-position:center right;
  }
  .card-bbt-infos.jfin .logo{
    max-width: 120px;
  }
  .card-bbt-infos .card-body{
    padding: 0;
    font-size: 16px;
  }

}

/*==================================================
Engagement : Customer
==================================================*/ 

.section-engagement-banner{
  height: 665px;
}
.section-engagement-banner .background:before,
.section-engagement-banner .background:after{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-image: url(../img/thumb/bg-customer-banner.png);
  
}
.section-engagement-banner .background:before{ 
  background-position: left center;
  background-image: url(../img/thumb/bg-customer-banner.png);
}
.section-engagement-banner .background:after{ 
  background-position: right center;
  background-image: url(../img/thumb/bg-customer-banner-right.png);
}
.section-engagement-banner .container{
  height: 100%;
  display: flex;
}
.section-engagement-banner .hgroup{
  margin: auto;
  
}
.section-engagement-banner .hgroup h1{
  margin-bottom: 10px;
  margin-top: 10px;
}

.title-70{
  font-size: 70px;
  line-height: 1.3;
}
.title-50{
  font-size:50px;
  line-height: 1.3;
}
.title-40{
  font-size:40px;
  line-height: 1.3;
}
.title-26{
  font-size: 26px;
}
.hgroup.engagement{
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 4px;
}
.hgroup.engagement p{
  margin: 0;
  font-size:26px ;
  line-height: 1.3;
}
.hgroup.engagement.center{
  text-align: center;
  justify-content: center;
}
@media (max-width:1440px){
  .title-70{
    font-size: 60px;
  }
  .title-40{
    font-size:36px;
  }
  .section-engagement-banner{
    height:580px;
  }
  .hgroup.engagement p{
    font-size: 24px;
  }
  
}

@media (max-width:1199px){
  .title-70{
    font-size: 50px;
  }
  .title-50{
    font-size:40px;
  }
  .section-engagement-banner{
    height:540px;
  }
  .hgroup.engagement p{
    font-size: 20px;
  }
  .title-26{font-size: 22px;}
}
 
@media (max-width:991.98px){
  .title-70{
    font-size:44px;
  }
  .title-50{
    font-size:35px;
  }
  .title-40{
    font-size:35px;
  }
  .section-engagement-banner{
    height:480px;
  }
  .section-engagement-banner .label.h-42{
    padding: 5px 15px;
  }
}

@media (max-width:670px){
  .section-engagement-banner .background:before{
    margin-left: -50px;
  }
  .section-engagement-banner .background:after{
    margin-right:  -50px;
    left: auto;
    right: 0;
  }
  .title-70{
    font-size:34px;
  }
  .hgroup.engagement p{
    font-size:18px;
  }
}

@media (max-width:500px){
  .title-50{
    font-size:30px;
  }
  .title-40{
    font-size:30px;
  }
  .section-engagement-banner .background:before{
    margin-left:0;
  }
  .section-engagement-banner .background:after{
    margin-right:  -100px;
    left: auto;
    right: 0;

    display: none;
  }
}

/*==================================================
Elements of 
Web3 for Customer Loyalty
==================================================*/ 

.section-customer-web3{
  padding: 120px 0;
}
.section-customer-web3 .hgroup{
  margin-bottom:60px;
}
.section-customer-web3 .arrow-item{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:45px 10px 0;
  height: 100%;
}
.section-customer-web3 .arrow-item .arrow{
  width: 50%;
}
.section-customer-web3 .arrow-item .arrow.red{margin-right: -10px;}
.section-customer-web3 .arrow-item .arrow.black{margin-left: -10px;}
.card-info{
  padding: 25px;
  background: #FFFFFF;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.13);
  border-radius: 20px;
}
.card-info p:last-child{
  margin: 0;
}

.section-customer-web3 .row-info > div{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
}
 
@media (max-width:1366px){
  .section-customer-web3 .arrow-item{padding-left: 0; padding-right: 0;}
  .section-customer-web3 .row-info > div.left,
  .section-customer-web3 .row-info > div.right{width: 37%;}

  .section-customer-web3 .row-info > div.center{width: 26%;}
}

@media (max-width:991.98px){
  .section-customer-web3 {
    padding:80px 0;
  }
  .section-customer-web3 .row-info > div{
    gap: 5px;
  }
  .section-customer-web3 .card-info{
    font-size: 16px !important;
  }
  .section-customer-web3 .arrow-item .arrow.red{margin-right: -5px;}
  .section-customer-web3 .arrow-item .arrow.black{margin-left: -5px;}

  .section-customer-web3 .row-info > div.left,
  .section-customer-web3 .row-info > div.right{width:45%;}

  .section-customer-web3 .row-info > div.center{width: 10%;}

  .section-customer-web3 .arrow-item{
    flex-direction: column;
  }
}

@media (max-width:767px){
  .section-customer-web3 .row-info > div.left,
  .section-customer-web3 .row-info > div.right,  
  .section-customer-web3 .row-info > div.center{width: 100%;}

  .section-customer-web3 .arrow-item{
    width: 130px;
    margin: auto;
    flex-direction: row;
    padding:40px 0;
  }
}

/*==================================================
How to Start 
Connecting with Your Customers
==================================================*/ 

.card-info-border{
  position: relative;
  display: flex;
}
 
.card-info-border .card-bubble:before, 
.card-info-border .card-bubble:after{
  border-radius:30px;
}
.card-info-border .card-bubble:before{
  background:linear-gradient(20deg,  rgba(204,202,201,0.6) 0%,rgba(224,53,38,0.4) 100%);
} 
  
.card-info-border .card-number,
.card-info-border .card-body{
  position: relative;
  z-index: 100;
}

.card-info-border .card-number{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Poppins";
  font-size: 18px;
  font-weight: var(--fw-500);
  border-radius: 8px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-bg-number.svg);
  width: 46px;
  height: 50px;
  padding-left:5px;
  position: relative;
  z-index: 10;
  flex-shrink: 0;

}

.card-info-border .card-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Poppins";
  font-size: 18px;
  font-weight: var(--fw-500);
  border-radius: 10px; 
  width: 75px;
  height: 75px; 
  position: relative;
  z-index: 10;
  flex-shrink: 0;
  background-color: #F5F5F5;
}

.card-info-border{
  padding:40px 25px;
  gap: 20px;
}

.card-info-border h3{
  font-size: 28px;
  padding: 6px 0;
  min-height: 50px;
  margin-bottom: 6px;
}
.card-info-border h4{
  font-size: 20px;
  padding: 6px 0; 
  margin-bottom: 6px;
}
.card-info-border h4.h-76{
  min-height: 75px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
.card-info-border p{
  margin: 0;
  font-size: inherit;
}
.card-info-border p strong{
  font-weight: var(--fw-700);
}

.card-info-border .icon-arrow{
  width: 70px;
  height: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right:-95px;
  background-image: url(../img/icons/icon-arrow-lg-red.svg);
}
.card-info-border .card-body{
  font-size: 18px;
}
.card-info-border ul{
  padding-left: 0;
  margin: 0;
}
.card-info-border ul li{
  position: relative;
  display: flex;
  gap: 10px;
}
.card-info-border ul li:before{
  content: ''; 
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  top: 12px;
}
.section-customer-howto{
  padding: 90px 0;
}
.section-customer-howto .hgroup{
  justify-content: flex-start;
  padding: 0 0 70px;
}
.section-customer-howto .boxed.main{
  --width:100%;
  padding:80px 60px 100px;
  border-radius: 60px; 
  overflow: hidden;
  position: relative;
}
.section-customer-howto .boxed .background{
  background-image: url(../img/thumb/photo-1920x786.jpg);
}

.section-customer-howto .boxed.main .row{
  --bs-gutter-x:120px;
  --bs-gutter-y: 0;
}
.section-customer-howto .card-info-border{min-height: 290px;}

@media (max-width:1680px){
  
  .section-customer-howto .boxed.main{
    padding:80px 60px 100px;
  }
  .section-customer-howto .hgroup{
    padding-bottom:50px;
  }

  .section-customer-howto .boxed.main .row{
    --bs-gutter-x:80px;
  }
  .section-customer-howto .card-info-border{
    min-height: 260px;
  }
  .card-info-border{
    padding:30px 25px;
  }
  .card-info-border .icon-arrow{
    width: 50px;
    right: -67px;
  }

  .card-info-border h3{font-size: 26px;}
}

@media (max-width:1550px){
 
  
  .section-customer-howto .hgroup{
    padding-bottom:40px;
  }
  .card-info-border h3{font-size: 24px;} 
  .card-info-border .card-body{font-size: 16px;}

  .section-customer-howto .boxed.main .row{
    --bs-gutter-x:60px;
  }
  .card-info-border .icon-arrow{
    width: 40px;
    right: -50px;
  }
}

@media (max-width:1199px){
  .section-customer-howto {
    padding: 70px 0;
  }
  .section-customer-howto .boxed.main {
    padding: 50px 50px 60px;
  }
  .section-customer-howto .card-info-border{
    flex-direction: column;
    padding-bottom: 40px;
    gap: 10px;
  }
  .card-info-border h3{min-height: 0;}
}

@media (max-width:1024px){
  .section-customer-howto,
  .section-customer-howto .container-fluid {
    padding: 0;
  }
  .section-customer-howto .boxed.main {
    padding: 80px 30px 80px;
    border-radius: 0;
  }
  .section-customer-howto .boxed.main .row{
    --bs-gutter-x:25px;
  }
  .card-info-border .icon-arrow{
    width:25px;
    right: -33px;
    display: none;
  }
  .card-info-border {
    padding:25px 20px;
  }
  .card-info-border h3{font-size: 20px;}
}

@media (max-width:767px){
  .section-customer-howto .boxed.main .row{
    --bs-gutter-y:25px;
  } 
  .section-customer-howto .card-info-border{
    flex-direction: row; 
    min-height: 0;
    gap: 20px;
  }
}

@media (max-width:575px){
  .section-customer-howto .hgroup{padding-bottom: 30px;}
  .section-customer-howto .boxed.main {
    padding: 50px 20px 50px;
  }
  .section-customer-howto .boxed.main .row{
    --bs-gutter-y:20px;
  }
  .section-customer-howto .card-info-border{
    gap: 15px;
  }
}

/*==================================================
Features & 
Functions
==================================================*/ 
.section-customer-features{
  padding-top: 0;
}
.section-customer-features .row{
  --bs-gutter-x:35px;
  --bs-gutter-y:35px;
}
.card-feature{
  background-color: #fff;
  border-radius: 40px;
  border: 1px solid #E6E4E4;
  height: 377px;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  position: relative;
}
.card-feature .card-body{
  padding: 20px 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.card-feature.bg-black  .card-body{
  background-color: #000;
  border-radius: 40px;
}
.card-feature.bg-gray .card-body{
  background-color: #F6F6F6;
}
.card-feature.bg-red .card-body{
  background-color: #E03526;
  color: #fff;
}
.card-feature.bg-black .title-50{
  color: #fff;
}

.card-feature .card-body{
  width: 60%;
  border-radius: 40px 0 0 40px;
}
.card-feature .card-photo{
  width: 40%;
  border-radius: 0 40px 40px 0;
}
.card-feature .card-photo .photo{
  width: 100%;
  height: 100%;
  background-color: #ccc;
}
.card-feature h3{
  font-size: 20px;
  margin-bottom:15px;
}
.card-feature ul{
  padding: 0;
  margin: 0 0 0 8px;
  list-style-type: none;
  display: flex;
  flex-direction: column;
}
.card-feature ul li{
  display: flex;
  gap: 12px;
}
.card-feature ul li:before{
  content: '';
  width: 4px;
  height: 4px;
  background-color: #000;
  border-radius: 50%;
  top: 10px;
  position: relative;
  flex-shrink: 0;
}

.card-feature.text-white ul li:before{
  background-color: #fff;
}

.card-feature.flex-row-reverse .card-body{
  border-radius: 0 40px 40px 0;
}
.card-feature.flex-row-reverse .card-photo{
  border-radius:40px 0 0 40px;
}

@media (max-width:1280px){
  .card-feature .card-body{
    padding: 20px 30px;
  }
}
@media (max-width:1024px){
  .section-customer-features{
    padding-top: 80px;
    padding-bottom: 80px;
  }
  .section-customer-features .row{
    --bs-gutter-x:25px;
    --bs-gutter-y:25px;
  }
}
@media (max-width:991.98px){
  .section-customer-features {
    padding-top: 70px;
    padding-bottom: 70px;
  }
  .card-feature{height: auto; min-height: 260px;}
  .card-feature .card-photo .photo{background-position: top center;}
}

@media (max-width:575px){
  .section-customer-features {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  .section-customer-features .row{
    --bs-gutter-x:20px;
    --bs-gutter-y:20px;
  }
  .card-feature{
    flex-direction: column-reverse !important;
    border-radius: 30px ;
  }
  .card-feature .card-body,
  .card-feature .card-photo{
    width: 100%;
  }

  .card-feature .card-photo{
    height:70vw;
    border-radius: 30px 30px 0 0 !important;
  }

  .card-feature .card-body{
    border-radius: 0 0 30px 30px !important;
    padding: 30px 20px;
    font-size: 15px;
  }
  .card-feature h3{font-size: 18px;}
  .card-feature ul li:before{top: 8px;}

  .card-feature.bg-black{min-height: 0;}
}

/*==================================================
Phone Model
==================================================*/ 

.section-customer-model{
  margin: 80px 0 100px;
}
.phone-model-circle{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
}

.phone-model-circle .model{
  position: absolute;
  width:15%;
}
.phone-model-circle .model img{
  width: 100%;
  transform: rotate(-15deg);
}
.phone-model-circle .model-1,
.phone-model-circle .model-3{
  left: 33%;
}
.phone-model-circle .model-2,
.phone-model-circle .model-4{
  right: 33%;
}

.phone-model-circle .model-2 img,
.phone-model-circle .model-4 img{transform: rotate(15deg);}

.phone-model-circle .model-1{top: 0;} 
.phone-model-circle .model-2{top:23%;}
.phone-model-circle .model-3{top:46%;} 
.phone-model-circle .model-4{top:68%;} 

@media (max-width:1024px){
  .section-customer-model {
    margin: 30px 0 50px;
    margin-left: -6vw;
    margin-right: -6vw;
  }

}

@media (max-width:575px){
  .section-customer-model {
    margin:0px 0 20px;
    margin-left: -12vw;
    margin-right: -12vw;
  }
}

/*==================================================
The benefits of 
customer  engagement
==================================================*/ 
.section-customer-benefit{
  padding-top: 0;
}
.section-customer-benefit .background{
  background-image: url(../img/thumb/bg-triangle.png);
  background-size: auto;
  background-position: top center;
  top: 0;
}
.section-customer-benefit .hgroup{
  background-color: #fff;
  padding-bottom:30px;
}
.section-customer-benefit h2{
  line-height: 1;
  margin:0 auto;
}
.section-customer-benefit h2 .d-flex{
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap:wrap;
}
.section-customer-benefit h2 .img{
  width:17%;
  height: auto;

  flex-shrink: 0;
  margin: 0 8px;
  position: relative;
  top: 7px;
}

.benefit-triangle-list{
  position: relative;
  display: flex;
  justify-content: center; 
  padding:120px 0;
  max-width: 1522px;
  margin: 0 auto 0;
}

.card-triangle-benefit{
  width: 25%;
  height: auto; 
  position: relative; 
  filter: drop-shadow(-1px 2px 234.4px rgba(0, 0, 0, 0.07));
  margin: 0 -7.7% auto;
  margin-bottom: auto !important;
  transition: all 0.55s;

  --triangle-bg:#FFEFEE;
  --title-color:#EE3F30;
}

.card-triangle-benefit .triangle{width: 100%; height: auto;}
.card-triangle-benefit .triangle path{fill: var(--triangle-bg);}
.card-triangle-benefit .card-body{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
}

.card-triangle-benefit .icons{
  position:absolute;
  top: 9%;
  right:9%;
  width:22%;
  height: auto;
}
.card-triangle-benefit h3{
  font-size: 30px;
  text-align: center;
  color: var(--title-color);
  margin: auto;
  padding-left: 10px;
} 
 
.card-triangle-benefit.c-2{
  --triangle-bg:#FCCBC6;
  --title-color:#A80303; 
}
.card-triangle-benefit.c-3{
  --triangle-bg:#F98C82;
  --title-color:#790303;
}
.card-triangle-benefit.c-4{
  --triangle-bg:#E03526;
  --title-color:#ffffff;
}
.benefit-triangle-list:hover .card-triangle-benefit{margin-left: 0.4%; margin-right: 0.4%;}
/* .benefit-triangle-list:hover .card-triangle-benefit.c-1{margin-top: 15%;}
.benefit-triangle-list:hover .card-triangle-benefit.c-2{margin-top: 10%;}
.benefit-triangle-list:hover .card-triangle-benefit.c-3{margin-top: 5%;}
.benefit-triangle-list:hover .card-triangle-benefit.c-4{margin-top: 0;} */

.card-triangle-benefit.c-1{margin-top: 15%; z-index: 5;}
.card-triangle-benefit.c-2{margin-top: 10%; z-index: 4;}
.card-triangle-benefit.c-3{margin-top: 5%; z-index: 3;}
.card-triangle-benefit.c-4{margin-top: 0;}


@media (min-width:1920px){
  .section-customer-benefit h2{
    font-size: 130px; 
  }
  .section-customer-benefit .container-fluid{
    padding-left: 60px;
    padding-right: 30px;
  }
}

@media (max-width:1919px){
  .section-customer-benefit h2 {
    font-size: 6.6vw;
  }
  .section-customer-benefit .background{
    background-size: 110%;
  }
}

@media (max-width:1680px){
  .section-customer-benefit .background{
    background-size: 115%;
  }
}

@media (max-width:1280px){
 
  .section-customer-benefit h2 .img{
    width:19%;
  }
}

@media (max-width:1530px){
  .benefit-triangle-list{
    padding-left:40px;
    padding-right: 40px;
  }
  .card-triangle-benefit h3{
    font-size: 1.88vw;
  }
}

@media (max-width:1366px){
  .benefit-triangle-list{
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

@media (max-width:1199px){
  .section-customer-benefit h2 .img{
    margin: 0 0;
  }
  .section-customer-benefit h2 .d-flex{
    gap: 10px;
  }
  .section-customer-benefit h2 .img{
    width:20%;
  }
}

@media (max-width:991.98px){
  .section-customer-benefit h2 {
    font-size: 6.3vw;
  }
  .section-customer-benefit h2 .img{
    top: 3px;
  }

  .benefit-triangle-list{
    padding: 50px 20px;
  }

  .section-customer-benefit .hgroup .title-40{
    font-size:3vw;
  }
}

@media (max-width:575px){
  .section-customer-benefit{
    padding-top: 0;
    padding-bottom: 60px;
  }
  .section-customer-benefit h2 {
    font-size:10.3vw;
  }
  .section-customer-benefit h2 .d-flex{
    padding-top: 10px;
  }
  .section-customer-benefit h2 .img{
    width: 37%;
  }

  .benefit-triangle-list{
    padding: 0 0;
  }
 
  .section-customer-benefit .background{
    display:none;
  }
}
 

/*==================================================
Business Co
==================================================*/ 

.section-business-banner{
  min-height: 100vh;
  padding: 0;
  display: flex;
}
 
.section-business-banner .article{
  margin: auto;
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  text-align: center;
  color: #fff;
  position: relative;
  z-index: 100;
}
.section-business-banner h3,
.section-business-banner h1{
  color: #fff;
}
.section-business-banner h3{
  font-size: 70px;
  font-weight:300;
}
.section-business-banner h1{
  font-size: 160px;
  line-height: 0.9;
  margin: 25px 0;
}

.section-business-banner p{
  margin: 0;
  font-size: 28px;
}

.section-business-banner .buttons{
  padding-top: 40px;
}

@media (max-width:1680px){
  .section-business-banner h3{font-size: 60px;}
  .section-business-banner h1{font-size: 135px;}
  .section-business-banner p{font-size: 24px;}
}

@media (max-width:1280px){
  .section-business-banner h3{font-size: 50px;}
  .section-business-banner h1{font-size: 115px;} 
}

@media (max-width:991.98px){
  .section-business-banner h3{font-size: 7vw;}
  .section-business-banner h1{font-size: 12vw;} 
  .section-business-banner p{font-size: 20px;}
}

@media (max-width:575px){
  .section-business-banner h3{font-size: 6vw;}
  .section-business-banner h1{font-size: 12vw; line-height: 1.1; margin: 15px 0 20px;}   
  .section-business-banner p{font-size: 16px;}
}

/*==================================================
Pah withdraw
==================================================*/ 
.section-withdraw{
  padding: 120px 0;
}
.section-withdraw .container{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.section-withdraw .cols.left{
  width: 36%;
  display:flex;
  flex-direction: column;
}
.section-withdraw .cols.right{width: 64%;}

.section-withdraw .hgroup{
  margin-bottom: 30px;
}
.section-withdraw .hgroup h2{
  color: #E03526;
  font-size: 60px;
}
.section-withdraw .hgroup h3{ 
  font-size: 40px;
}

.nav-howto-withdraw{
  flex-direction: column;
  position: relative; 
  max-width:430px;
  margin-top: auto;
}
.nav-howto-withdraw li {
  position: relative; 
}

.nav-howto-withdraw .btn{
  --btn-h: 72px;
  --bs-btn-bg: #fff;
  --bs-btn-color: #707070;
  --bs-btn-hover-bg: #000000;
  --bs-btn-active-bg: #000000;
  --bs-btn-hover-color: #fff;
  --bs-btn-active-color: #fff;

  box-shadow: 0px -2px 31px rgba(0, 0, 0, 0.06);
  border-radius: 19px;
  justify-content: flex-start;
  font-size: 16px;
  position: static;
  margin: 10px 0 10px 70px; 
  line-height: 1.2;
  padding: 0 15px;
  text-align: left;

  cursor: default;
  pointer-events: none;
}

.nav-howto-withdraw .btn .dot{ 
  position: absolute;
  left: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #D9D9D9;
  top: 50%;
  margin-top: -14px;
  transition: all 0.25s;
  transform: scale(0.6);
  
}
.nav-howto-withdraw .btn .dot:before{
  content: '';
  position: absolute;
  top:-12px;
  left:-12px;
  right:-12px;
  bottom:-12px;
  border: 12px solid #fff;
}
.nav-howto-withdraw .btn:hover .dot,
.nav-howto-withdraw .btn.active .dot{
  background-color: #F5333F;
}
.nav-howto-withdraw .btn.active .dot{
  transform: scale(1);
}
.nav-howto-withdraw .btn:before{
  content: '';
  position:absolute;
  top:calc(50% + 15px);
  left: 13px;
  width: 2px;
  height:calc(50% + 28px);
  background-color: #D9D9D9;
}

.nav-howto-withdraw li:last-child .btn:before{display: none;}
.nav-howto-withdraw .btn .number{
  width: 46px;
  height: 46px;
  background-color: #F0F0F0;
  border-radius: 17px;
  display:flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  color: #7E7E7E;
  font-size: 13px;
  font-weight: var(--fw-700);
  transition: all 0.25s;
  margin-right: 8px;
}
.nav-howto-withdraw .btn .number > span{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;

  border-radius: 50%;
  
}
.nav-howto-withdraw .btn .number > span:before,
.nav-howto-withdraw .btn .number > span:after{
  position: absolute;
  content: '';
  border-radius: inherit;
  transition: all 0.25s;
}
.nav-howto-withdraw .btn .number > span:before{
  background-color: #F0F0F0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.nav-howto-withdraw .btn .number > span:after{
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  background-color: #fff;
}
.nav-howto-withdraw .btn .number > span > span{
  position: relative;
  z-index: 2;
}

.nav-howto-withdraw .btn.active{
  font-weight: var(--fw-700);
}
.nav-howto-withdraw .btn.active .number {background-color: #fff; color: #E03526;}
.nav-howto-withdraw .btn.active .number > span:before{opacity: 1;}

.tab-howto-content{
  position: relative;
}
.tab-howto-content .tab-pane{
  padding: 0;
  height: auto;
}
.tab-howto-content .card-media{
  border-radius: 40px;
  position: relative;
  overflow: hidden;
}
.tab-howto-content .card-media img{
  width: 100%;
  border-radius: inherit;
}
.tab-howto-content .card-media video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width:1550px){
  .section-withdraw .hgroup h2{font-size: 50px;}
  .section-withdraw .hgroup h3{font-size: 35px;}

  .nav-howto-withdraw{max-width: 390px;}
  .nav-howto-withdraw .btn{margin-left: 60px;}

  .section-withdraw .cols.left{width: 34%; }
  .section-withdraw .cols.right{width: 66%; padding-left: 20px;}
}

@media (max-width:1440px){
  .section-withdraw .cols.right{padding-left: 40px;}

  .nav-howto-withdraw .btn{
    --btn-h:60px;
    margin-left: 50px; 
    padding-left: 10px;
  }
  .nav-howto-withdraw .btn .number{
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
  .nav-howto-withdraw .btn .dot{
    width: 24px;
    height: 24px;
  }
  .nav-howto-withdraw .btn:before{
    left: 10px;
  }
}

@media (max-width:1280px){
  
  .section-withdraw .container{align-items: unset;}

  .section-withdraw .cols.right{display: flex; flex-direction: column;}
  .section-withdraw .cols.right .tab-howto-content{margin-top: auto;}
}

@media (min-width:1024px) and (max-width:1280px){
  .section-withdraw .hgroup h2{font-size: 40px;}
  .section-withdraw .hgroup h3{font-size: 28px;}

}

@media (max-width:991.98px){
  .section-withdraw{padding: 30px 0 80px;}
  .section-withdraw .container{
    flex-direction: column;
  }

  .section-withdraw .cols.left,
  .section-withdraw .cols.right{
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  .nav-howto-withdraw{
    flex-direction: row;
    max-width: 100%;
    gap: 14px;
    margin-bottom:40px;
  }
  .nav-howto-withdraw li{
    width: calc(50% - 12px);
  }
  .nav-howto-withdraw .btn{
    margin:0 ;
  }
  .nav-howto-withdraw .btn:before{display:none;}
  .nav-howto-withdraw .btn .dot{display: none;}
}

@media (max-width:767px){
  .section-withdraw .hgroup h2{font-size: 40px;}
  .section-withdraw .hgroup h3{font-size: 28px;}
  .section-withdraw{padding:0px 0 60px;}

  .tab-howto-content .card-media{border-radius: 35px;}

}

@media (max-width:575px){
  .nav-howto-withdraw {
    margin-bottom: 25px;
    gap: 8px;
    justify-content: center;
  }
  .nav-howto-withdraw li {
    width: calc(50% - 4px);
  }
  .nav-howto-withdraw .btn{
    font-size: 14px;
  }

  .nav-howto-withdraw .btn{ 
    height: auto;
    padding:10px 10px;
    text-align: left;
    border-radius: 14px;
    font-size: 12px;
    gap:6px;
    min-height: 100%; 
  }

  .nav-howto-withdraw .btn .number{
    width: 22px;
    height: 22px;
    border-radius:50%;
    margin-right: 2px;
    flex-shrink: 0;
 
  }
  .nav-howto-withdraw .btn .number > span:before,
  .nav-howto-withdraw .btn .number > span:after{display: none;}
  .nav-howto-withdraw .btn .number > span{width: 24px; height: 24px; font-size: 11px;}
  .tab-howto-content .card-media{border-radius: 20px;}
  .section-withdraw .hgroup{margin-bottom: 20px;}
  .section-withdraw .hgroup h2{font-size:34px;}
  .section-withdraw .hgroup h3{font-size: 22px;}
}

@media (max-width:390px){
  .nav-howto-withdraw .btn .number{
    width: 20px;
    height: 20px;
  }
}

/*==================================================
Engagement : Student 
==================================================*/ 
.section-student-about {
  padding: 140px 0;
}
.section-student-about .hgroup{
  text-align: left;
  max-width: 395px;
}
.section-student-about .hgroup h2{
  margin-bottom: 20px;
}
.section-student-about .hgroup p{
  line-height: 1.5;
}
.card-digital.student{
  height:100%;
  gap: 25px;
  margin-left: -20px;
  width: auto;
}
.card-digital.student .card-title{
  flex-direction: column;
  text-align: center;
}
.card-digital.student .card-title .icons{
  --size:90px;
  margin-bottom:14px;
}
.card-digital.student .card-body{
  text-align: right;
}
.card-digital.student .card-body h3{
  margin-bottom:6px;
}
.card-digital.student .group{
  margin: auto 0 auto auto;
  max-width: 300px;
  padding-left: 10px;
  padding-right: 10px;
}


@media (max-width:1440px){
  .section-student-about {
    padding: 100px 0;
  }
}

@media (max-width:1199px){
  .card-digital.student{
    gap: 15px;
  }
  .card-digital.student .card-title .icons{
    --size:80px;
    margin-bottom: 10px;
  }
}

@media (max-width:991.98px){
  .section-student-about {padding:80px 0;}
  .section-student-about .hgroup{
    max-width: 100%;
    margin-bottom: 40px;
    text-align: left;
    align-items: flex-start;
  }
  .section-student-about .hgroup h2{margin-bottom: 10px;}
  .card-digital.student{min-height: 250px; gap: 20px;}
  .card-digital.student .card-body{
    text-align: left;
  }
  .card-digital.student .group{
    margin: auto;
  }
  /* .card-digital.student{
    flex-direction: column;
  }
  .card-digital.student .card-title,
  .card-digital.student .card-body{
    width: 100%;
  }
  .card-digital.student .card-body{
    text-align: center;
  } */
}

@media (max-width:575px){
  .section-student-about {
    padding: 50px 0;
  } 

  .section-student-about .hgroup{
    margin-bottom: 30px;
  }
  .card-digital.student{
    flex-direction: column;
    gap: 15px;
    min-height: 0;
  }
  .card-digital.student .card-title{
    flex-direction: row; 
    gap:10px;
    padding: 12px 30px;
  }
  .card-digital.student .card-title .icons {
    --size:30px;
    margin-bottom: 0;
  }
  .card-digital.student .card-title h3{
    font-size: 16px;
  }
  .card-digital.student .group{
    padding-left: 5px;
  }
}

/*==================================================
Why Student 
Engagement is important?
==================================================*/ 

.section-student-engagement{
  background-color: #F8F8F8;
  padding: 130px 0;
  margin-top: -100px;
}

.section-student-engagement .bg-line{
  position: absolute;
  top: 34%;
    left: 30%;
    height: auto;
    width: 1560px;
}

.section-student-engagement .hgroup{
  text-align: left;
  align-items:flex-start;
  margin-bottom: 20px;
}
.card-photo.radius-40{border-radius: 40px;}

.student-engagement-list{
  display: flex;
  justify-content:space-between;
  padding: 90px 0 0 0;
}
.student-engagement-list .card-info-border{
  width: 100%;
  max-width:430px;
  margin-bottom: auto;
}

.card-info-border .triangle{
  position: absolute;
  top: -30px;
  right: -30px;
  width: 84px;
  height: auto;
  z-index: -1;
}
.card-info-border .triangle.black path{ fill: #000;}
@media (max-width:1680px){
  .section-student-engagement{
    margin-top: -5.6vw;
  }
}

@media (max-width:1550px){
  .student-engagement-list{
    gap: 60px;
  }
}

@media (min-width:992px) and (max-width:1199px){
  .student-engagement-list{
    gap: 40px;
  }
  .student-engagement-list .card-info-border{
    flex-direction: column;
  }
  .student-engagement-list .card-info-border .triangle{ 
    top: -25px;
    right: -25px;
    width: 74px;
  }
}

@media (max-width:1280px){

.section-student-engagement .bg-line{ 
  top: 36%;
    left: 30%;
    height: auto;
    width: 1360px;
}
}

@media (max-width:1199px){
  .section-student-engagement{
    padding: 100px 0;
  }
}

@media (max-width:1024px){
  .section-student-engagement{
    margin-top: -3.6vw;
  }

  .card-photo.radius-40{border-radius: 32px;}
  .student-engagement-list{padding-top: 40px;}
}

@media (max-width:991.98px){
  .section-student-engagement{
    padding:80px 0;
  }
  .student-engagement-list{
    flex-direction: column;
    gap: 30px;
  }

  .student-engagement-list .card-info-border{
    max-width: 100%;
    min-height: 140px;
  }

  .card-info-border .triangle{ 
    top: -15px;
    right: -15px;
    width: 55px;
  }
}

@media (max-width:575px){
  .section-student-engagement{
    padding:50px 0;
  }
  .section-xs-fill .container{
    padding: 0;
  }
  .section-xs-fill .card-photo.radius-40{
    border-radius: 20px 20px 0 0;
  }

  .student-engagement-list .card-info-border .card-body{font-size: 15px;}


  .card-photo.radius-xs-20{border-radius: 20px;}
}

/*==================================================
Types of Student Engagement
==================================================*/ 

.section-student-types{
  padding: 0 0 120px;
}
.section-student-types .banner{
  padding: 120px 0;
}

.student-types-list{
  display: flex;
  justify-content: space-between;
  gap: 40px;
}
.student-types-list .card-info-border{
  width: 100%;
  max-width: 430px;
  padding-top: 30px;
  padding-bottom: 30px;
}
@media (max-width:1280px){
  .section-student-types{
    padding-bottom: 90px;
  }
  .section-student-types .banner{
    padding: 90px 0;
  }
  
}

@media (max-width:1199px){
  .student-types-list{
    gap: 30px;
  }
  .student-types-list .card-info-border{
    flex-direction: column;
  }
  .card-info-border h4.h-76{
    min-height: 0;
  }
}

@media (max-width:1024px){
  .section-student-types{
    padding-bottom: 70px;
  }
  .section-student-types .banner{
    padding: 70px 0;
  } 
}

@media (max-width:991.98px){
  .student-types-list{
    flex-direction: column;
  }
  .student-types-list .card-info-border{
    max-width: 100%;
    flex-direction: row;
  }
  .student-types-list .card-info-border .card-icon{
    margin: 0 10px;
  }
}

@media (max-width:670px){
  .section-student-types{
    padding-bottom: 50px;
  }
  .section-student-types .banner{
    padding: 50px 0;
  } 

  .student-types-list{
    gap: 20px;
  }
  .student-types-list .card-info-border{
    padding-top: 20px;
    padding-bottom: 20px;
  }
  .student-types-list .card-info-border .card-icon{
    margin: 0 0;
  }
  .student-types-list .card-info-border .card-body{
    font-size: 15px;
  }
  .card-info-border .card-icon{
    width: 44px;
    height: 44px;
  }
  .card-info-border .card-icon .icons{
    --size:22px !important
  }

  .card-info-border h4{font-size: 18px;}
}


/*==================================================
Key Features
==================================================*/ 

.section-student-features{
  padding: 120px 0; 
  background-color: #F8F8F8;
}
.section-student-features .background{
  background-image: url(../img/thumb/bg-triangle.png);
  background-size: auto;
  background-position: top 30% center;
  top: 0;
}

@media (max-width:1920px){
  .section-student-features .background{
    background-size: 110%;
  }
}

.section-student-features .container{
  display: flex;
  gap: 80px;
}
.section-student-features .hgroup{
  justify-content: flex-start;
  flex-shrink: 0;
  margin-bottom: auto;
}
.section-student-features .hgroup h2{
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 15px;
  font-size: 32px;
  font-weight:var(--fw-400);
}
.section-student-features .hgroup h2 .label{
  font-size: inherit;
  padding: 5px 36px;
  background-color: #E03526;
  color: #fff;
}

.student-types-list.features{
  gap: 0;
  width: 100%;
  justify-content: flex-start;
  padding-left: 20px;
  flex-direction: row;
}
.card-info-border.feature{ 
  margin: 0 -20px;
  height: auto;
  margin-bottom:auto ;
  width: 36%;
  max-width: none;
}
.card-info-border.feature .card-body{padding-right: 20px; }
.card-info-border.feature.c-1{z-index: 1;}
.card-info-border.feature.c-2{z-index: 2; margin-top: 100px;}
.card-info-border.feature.c-3{z-index: 3; margin-top: 200px;}

@media (max-width:1550px){
  .section-student-features .container{
    gap: 50px;
  }

  .card-info-border.feature .card-icon{
    width: 65px;
    height: 65px;
  }
  .card-info-border.feature h4{min-height: 65px;}
}


@media (max-width:1440px){
  .section-student-features .hgroup h2{font-size: 28px;}
  .section-student-features .container{
    padding: 0 50px;
  }

  .card-info-border.feature{
    margin:0 -15px auto;
  }
  .card-info-border.feature .card-body{
    padding-right: 10px;
  }

}

@media (max-width:1366px){
  .section-student-features .container{
    flex-direction: column;
  }
  .card-info-border.feature{width: 35.5%;}
}

@media (max-width:1199px){
  .section-student-features{padding: 90px 0;}
  .card-info-border.feature h4{min-height: 0;}
}

@media (max-width:991.98px){
  .section-student-features .container{
    gap: 30px;
  }
  .section-student-features .hgroup{padding-bottom: 0;}
  .section-student-features .hgroup h2{font-size: 24px;}
  .section-student-features {padding: 70px 0;} 
  .student-types-list.features{
    flex-direction: column;
    gap: 25px;
    padding-left: 0;
  }
  .card-info-border.feature{
    margin:0 0;
    width: 100%;
  }
  .card-info-border.feature.c-2,
  .card-info-border.feature.c-3{margin-top: 0;}
}
@media (max-width:670px){
  .section-student-features{
    padding: 50px 0;
  }
  .section-student-features .container{
    padding: 0 20px;
  }
  .section-student-features .hgroup h2 .label{
    padding: 5px 20px;
  }
  .card-info-border.feature .card-icon {
    width: 44px;
    height: 44px;
  }
  .student-types-list.features{
    gap: 20px;
  }
}

/*==================================================
Discover 
Success Story
==================================================*/ 

.section-student-story{
  padding: 130px 0 40px;
}
.section-student-story .hgroup{
  flex-direction: column;
  background-color: #E03526;
  border-radius: 40px;
  margin-right: auto;
  color: #fff;
  padding: 35px 60px 40px;
  margin-bottom:20px;
  min-width: 620px;
}
.section-student-story .hgroup h2{
  color:inherit;
}

.card-story{
  display: flex;
  align-items: center;
  position: relative;
  align-items: center;
  max-width: 1300px;
  width: 100%;
  margin: 120px auto;
  justify-content: space-between;
  flex-wrap: wrap;
}
.card-story .card-photo,
.card-story .card-body{
  width: 50%;
}
.card-story .card-body{
  font-size: 26px;
  flex: unset;
  width: 45%;
}
.card-story h3{
  font-size: 80px;
  font-weight: var(--fw-800);
  line-height: 1.2;
  margin-bottom: 20px;
}
.card-story h5{
  font-size: inherit;
  color: #E03526;
  margin-bottom: 12px;
}
.card-story p{
  margin: 0;
}
.card-story.story-1{padding-left: 30px;}
.card-story.story-1 .card-photo{width: 45%;} 

.card-story.story-2{
  flex-direction: row-reverse;
}
.card-story.story-2 .card-photo{width: 50%;} 
.card-story.story-2 .card-body{max-width: 505px;}

.section-student-story{
  overflow: hidden;
}
.section-student-story .circle{
  position: absolute;
  width: 800px;
  height: auto;
}

.section-student-story .circle-1{
  top: -590px;
  right: -590px;
}
.section-student-story .circle-2{
  top:40%;
  left:-640px;
}
.section-student-story .circle-3{
  bottom: -340px;
  right: -549px;
}

@media (max-width:1550px){
  .section-student-story .circle{
    width: 700px;
  }
  
  .section-student-story .circle-1{
    top: -420px;
    right: -420px;
  }
  .section-student-story .circle-2{
    top:38%;
    left:-420px;
    width: 600px;
  }
  .section-student-story .circle-3{
    bottom: -380px;
    right: -429px;
  }
}

@media (max-width:1450px){
  .card-story .card-body{
    font-size: 22px;
  }
  .card-story h3{
    font-size: 70px;
  }
  .card-story .card-body{width: 48%;}

  .section-student-story .hgroup{min-width:520px ;}
}

@media (max-width:1280px){
  .section-student-story {
    padding: 90px 0 40px;
  }
  .card-story{padding: 0 20px;}
  .card-story h3{
    font-size: 60px;
  }
  .card-story .card-body{
    font-size: 20px;
  }

  .card-story.story-1 .card-photo{width: 42%;} 
  .card-story.story-2 .card-photo{width: 48%;} 

  .card-story{margin: 90px 0;}
}

@media (max-width:1199px){
  .section-student-story .hgroup{min-width:0 ;}
}

@media (max-width:991.98px){
  .section-student-story .hgroup{
    min-width:0 ;
    padding: 40px;
  }
  .section-student-story {
    padding: 70px 0 20px;
  }
  .card-story{align-items: flex-start;}
  .card-story h3{
    font-size:45px;
  }
  .card-story .card-body{
    font-size:18px;
  }

  .section-student-story .circle{
    width: 600px;
  }
  
  .section-student-story .circle-1{
    top: -420px;
    right: -360px;
  }
  .section-student-story .circle-2{
    top:42%;
    left:-300px;
    width: 400px;
  }
  
   
}

@media (max-width:767px){
  .section-student-story .hgroup{
    width: 100%;
    padding: 20px 40px;
    border-radius: 30px;
  }
  .section-student-story .hgroup p{
    font-size: 24px;
  }
  .card-story{
    flex-direction: column;
    margin: 60px 0;
    padding: 0 10px;
  }

  .card-story .card-body{
    width: 100% !important;
    padding-top: 40px;
  }
  .card-story h3{
    font-size:34px;
  }
  .card-story h3 br{display: none}

  .card-story.story-1{padding-left: 10px; padding-right: 10px;}
  .card-story .card-photo{width: 55%; margin-left: auto; margin-right: auto;}
}

@media (max-width:575px){
  .section-student-story {
    padding: 50px 0 20px;
  }
  .card-story {
    margin: 40px 0;
  }
  .card-story h3{
    font-size:34px;
  }
  .card-story h3 br{display: block}
  .card-story .card-body{
    font-size:16px;
  }
  .card-story.story-1 .card-photo,
  .card-story.story-2 .card-photo{width: 95%;}

  .card-story.story-2 .card-body{max-width:100%;}
}

/*==================================================
Contact
==================================================*/ 

.section-contact .hgroup{
  flex-direction: column;
  padding-top: 20px;
}
.section-contact .hgroup h2{
  font-size: 90px;
  line-height: 1.15;
}
.section-contact .hgroup p{
  margin: 0 0 10px;
  font-size: 24px;
}

.card-support{
  background-color: #F24637;
  border-radius: 50px;
  position: relative;
  display:flex;
  align-items: center;
  padding: 0 90px;
  height: 156px;
  transition:all 0.45s; 
  color: #fff;
  width: 100%;
  overflow: hidden;
}

.card-support h3{
  font-size: 28px;
}
.card-support p{
  font-size: 22px;
  margin: 0;
}
.card-support .card-photo{
  transition: all 0.45s;
}
.card-support .card-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.card-support .triangle{
  height: auto; 
  position: absolute;
  transition: all 0.45s;
  width: 248px;
}
.card-support:hover{
  background-color: #000 !important;
  color: #fff;
}
.card-support:hover .triangle path{fill: rgba(69, 69, 69, 0.6);}
.card-support.c-2,
.card-support.c-3{max-width: 75%;}

.card-support.c-2{margin-left: 17%; background-color: #C72315;}
.card-support.c-3{margin-left: 0; background-color: #8A1005;}

.card-support.c-1 .triangle{ 
  left: 34%;
  top:-170px;
}
.card-support.c-1:hover .triangle{ 
  width: 440px; 
  left: 30%;
  top: -240px;
}
.card-support.c-2 .triangle{
  transform: rotate(-45deg); 
  left: 50%;
  top:-183px;
}
.card-support.c-2:hover .triangle{
  width: 385px;
  left: 38%;
  transform: rotate(-45deg);  
}

.card-support.c-3 .triangle{
  transform: rotate(-75deg); 
  left: 75%;
  top:-170px;
}
.card-support.c-3:hover .triangle{ 
  transform: rotate(-15deg); 
  width: 380px; 
  left: 65%;
  top:-190px;
}

.card-support.c-1 .card-photo{width: 324px; margin-right: 10%;}
.card-support.c-2 .card-photo{width:200px; margin-top: 90px;} 
.card-support.c-3 .card-photo{width: 168px; margin-top: -5px;}

.card-support.c-1:hover .card-photo{width: 448px; margin-right:3%; margin-top:100px;}
.card-support.c-2:hover .card-photo{width: 295px;margin-right:-3%;  margin-top: 175px;} 
.card-support.c-3:hover .card-photo{width: 220px; margin-top: -5px;}
.card-support-list {
  padding: 100px 0;
}
.card-support-list .row{ 
  --bs-gutter-y: 55px;
}
.card-support-list .row > div{
  display: flex;
  align-items: center;
}
.card-support-list .icon-more{margin-left: 40px;}
.icon-more .icons{--size:56px}
 

@media (max-width:1550px){
  .section-contact .hgroup h2{font-size: 70px;}
  .card-support-list{padding:70px 0;}
}

@media (max-width:1440px){
  .card-support{
    padding-left: 50px;
  }
  .card-support.c-2, .card-support.c-3{max-width: 80%;}
  .card-support.c-1 .card-photo{
    margin-right: 8%;
  }

  .card-support.c-1:hover .triangle{
    width:360px;
    left: 37%;
    top: -150px;
  }
  .card-support.c-1:hover .card-photo {
    width: 380px;
    margin-right: -2%;
    margin-top: 70px;
  }

  .card-support.c-2:hover .triangle {
    width: 300px;
    left: 38%; 
    top: -163px;
  }
  .card-support.c-3 .triangle{
    left: 71%;
  }
  .card-support.c-3:hover .triangle { 
    width: 300px; 
    top: -140px;
  }
}

@media (max-width:1280px){
  .section-contact .hgroup h2{font-size: 60px;}
  .card-support-list{padding:50px 0;}
  .card-support-list .row {--bs-gutter-y: 40px;}
  .card-support{
    border-radius: 40px;
    height: 140px;
  }
  .card-support h3{font-size: 24px;}
  .card-support p{font-size: 20px;}
  .card-support .triangle{width: 200px !important;}
  .card-support.c-1 .card-photo{margin-right: 0; width: 300px;}
  .card-support.c-1 .triangle{top: -130px;}
  .card-support.c-1:hover .triangle{ 
    left: 34%;
    top: -100px;
    transform: rotate(-44deg);
  }
  .card-support.c-2{margin:0 auto;}
  .card-support.c-2 .triangle{
    left: 40%;
    top: -133px;
  }
  .card-support.c-2:hover .triangle { 
    left: 40%;
  }

  .card-support.c-2:hover .triangle {
    transform: rotate(64deg);
    top: -103px;
  }
  .card-support.c-2:hover .card-photo{
    width: 230px;
    margin-top: 135px;
  }

  .card-support.c-3 .triangle {
    left: 71%;
    top:-120px;
  }
  .card-support.c-3:hover .card-photo {
    width: 200px;
    margin-top: -5px;
  }
  .card-support.c-3:hover .triangle{
    transform: rotate(45deg);
    left: 70%;
    top: -50px;
  }

  .card-support-list .icon-more{
    margin-left: 30px;
  }
}


@media (max-width:991.98px){
  .section-contact .hgroup h2{
    font-size: 45px;
  }
  .card-support{
    width: 100%;
    max-width: 100% !important;
  }
  .card-support-list .row {
    --bs-gutter-y:30px;
  }
  .card-support-list .row > div{
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }
  .card-support-list .icon-more{
    margin-left: 0;
  }

  .card-support{
    border-radius: 30px; 
    padding: 0 40px 0 30px;
  }
  .card-support.c-1 .card-photo{
    position: absolute;
    left: 55%;
    width: 280px !important;
    margin-top: 0 !important;
  }

  .card-support.c-2 .card-photo{
    width: 200px !important;
    margin-top: 90px !important;
    margin-right: 0 !important;
  }
  .card-support.c-3 .card-photo {
    width: 168px !important;
    margin-top: -5px !important;
  }
}

@media (max-width:575px){
  .section-contact .hgroup{
    padding-top: 0;
  }
  .section-contact .hgroup h2{
    font-size: 24px;
  }
  .section-contact .hgroup p{
    font-size: 18px;
  }
  .card-support-list{
    padding: 30px 0;
  }
  .card-support-list .row {
    --bs-gutter-y:20px;
  }
  .card-support{
    padding: 0 20px;  
  }
  .card-support h3{
    font-size: 20px;
  }
  .card-support p{
    font-size: 14px;
  }
  .card-support .card-body{
    position: relative;
    z-index: 10; 
  }
  .card-support.c-1 .card-body{
    max-width: 150px;
  }
  .card-support.c-3 .card-photo {
    position: absolute;
    left: auto;
    right: 0;
    width: 100px !important;
    top: auto;
    bottom: 0; 
  }

  .card-support.c-2 .card-photo {
    position: absolute;
    left: auto;
    right: 20px;
    width: 110px !important;
    top: auto;
    bottom: -30px; 
  }
}

/*==================================================
Contact
==================================================*/ 

.section-contact-info{
  background-image: url(../img/thumb/bg-contact-info.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  padding: 120px 0;
}

.section-contact-info .hgroup p{
  font-size: 24px;
}
.section-contact-info .hgroup h2{
  font-size: 56px;
  line-height: 1.2;
}

.contact-info{
  display: flex;
  flex-direction: column;
}
.contact-info h3{
  font-size: 22px;
  line-height: 1.5;
}
.contact-info p{
  font-size: 20px;
}
.contact-info hr{
  width: 27px;
  border-width: 3px;
  border-color: #000;
  margin: 25px 0;
}

.google-map{
  position: relative;
  height: 454px;
  border-radius: 40px;
  overflow: hidden;
  margin:90px 0;
}

.google-map iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media (max-width:1280px){
  .section-contact-info .hgroup{
    margin-bottom: 20px;
  }

  .google-map{
    margin: 50px 0;
  }
}

@media (max-width:1024px){
  .google-map{
    margin: 30px 0;
  }
}

@media (max-width:991.98px){
  .section-contact-info{
    padding: 100px 0;
  }
  .section-contact-info .hgroup h2{
    font-size: 44px;
  }
  .contact-info h3{
    font-size: 20px;
  }
}

@media (max-width:575px){
  .section-contact-info {
    padding:60px 0;
  }
  .section-contact-info .hgroup{
    margin-bottom: 20px;
  }
  .section-contact-info .hgroup h2{
    font-size:34px;
  }
  .section-contact-info .hgroup p{
    font-size: 20px;
  }

  .contact-info h3{
    font-size: 18px;
  }
  .contact-info hr{
    margin: 20px 0;
  }
  .contact-info p{
    font-size: 16px;
  }
  .google-map{
    margin: 20px 0;
    border-radius: 25px;
    height: 354px;
  }
}


/*==================================================
Contact for Partner
==================================================*/ 

.section-contact-banner{
  height:500px;
  background-color: #E03526;
  overflow: hidden;
}
.section-contact-banner .container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  height: 100%;
}

.section-contact-banner .triangle{
  position: absolute;
  height: auto;
}
.section-contact-banner .triangle path{fill:rgba(250, 250, 250, 0.2);}

.section-contact-banner .triangle1 {
  
  width: 770px; 
  transform: rotate(-30deg); 
}
.section-contact-banner .triangle2 { 
  width: 325px; 
  transform: rotate(-30deg); 
}
.section-contact-banner h2{
  font-size: 58px;
}
.section-contact-banner p{
  font-size: 44px;
  margin: 0;
}

.card-contact-banner{
  position: relative;
  border-radius: 60px;
  height: 336px;
  display: flex; 
  flex-direction: column;
  justify-content: center;
  margin-top: -60px;
  z-index: 100;
}
.card-contact-banner .card-bubble:before,
.card-contact-banner .card-bubble:after{
  border-radius: 60px;
}
.card-contact-banner .card-bubble:after{
  background-color:rgba(249, 249, 249, 1) ;
}

.card-contact-banner .card-body{
  position: relative;
  padding: 40px 60px 40px 8%;
  flex: unset;
  z-index: 200;
}
.card-contact-banner h3{
  font-size: 45px;
  line-height: 1.2;
}
.card-contact-banner h4{
  font-size: 38px;
  font-weight: var(--fw-400);
  margin-bottom: 20px;
}
.card-contact-banner p{
  font-size: 24px;
  color: #B3B3B3;
}

.card-contact-banner .staff{
  position: absolute;
  width: 440px;
  height: auto;
  bottom: 0;
  right: 8%;
}

.section-contact .banner{
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.section-contact .banner .line-1{
  margin-top:-40px;
  margin-left: auto;
  margin-right: 13%;
  display: block;
  width:70%;
}
.section-contact .banner .line-2{
  margin-left: auto;
  margin-right: 24%;
  margin-top: -40px; 
  width:60%;
}
.card-contact-2{
  background-color: #F0F0F0;
  border-radius: 80px;
  transition: all 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  height: 290px;
  max-width: 335px;
  width: 100%;
}
.card-contact-2 .card-icon{
  width: 85px;
  height: 85px;
  border-radius: 50%;
  background-color: #416BD6;
  display: flex;
  margin-bottom: -40px;
  position: relative;
  z-index: 100;
}

.card-contact-2 .card-icon .icons{
  --size:50px;
  margin: auto;
}

.card-contact-2 .card-body{
  display: flex;
  flex: unset;
  position: relative;
  flex-direction: column; 
  align-items: center;
  width: 180px;
}
.card-contact-2 .card-title{
  background-color: #F6F6F6;
  border-radius: 14px;
  height: 110px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2F2F2F;
  font-size: 15px;
  padding-top: 20px;
  box-shadow: 0px 0px 11px rgba(0, 0, 0, 0.12);
}
.card-contact-2 .btn{
  --btn-h:34px;
  --bs-btn-bg:#fff; 
  --bs-btn-border-width:1px;
  --bs-btn-color:#418BD6;
  --bs-btn-border-color:#418BD6;

  border-radius: 14px;
  padding: 0 20px;
  font-size: 12px;
  margin-top:-18px;
  width: 98px;
} 

.card-contact-2:hover{
  background-color: #E03526;
}

.text-rotate{
  color: #858484;
  font-size: 24px;
  transform-origin: 0 0;
  transform: rotate(90deg);

  position: absolute; 
  left: 100%;
  top: 0;
  white-space: nowrap;
}

.section-contact .contact-list{margin-top: -80px;}
@media (min-width:1900px){
  .section-contact-banner .triangle1 {
    right: -380px;
    top: -200px;
  }
  .section-contact-banner .triangle2 {
    left: -300px;
    top: 100px;
  }
}

@media (max-width:1899px){
  .section-contact-banner .container{
    position: static;
  }
  .section-contact-banner .triangle2 {
    left: -172px;
    top: 120px;
  }
  .section-contact-banner .triangle1 {
    right: -292px;
    top: -171px;
  }
}

@media (max-width:1500px){
  .section-contact-banner .triangle1 {
    width: 650px; 
    top: -121px;
  }
  .section-contact-banner .triangle2 { 
    width:280px; 
  }

  .section-contact-banner .boxed{padding-left: 50px;}

  .card-contact-banner{
    height: auto;
  }
  .card-contact-banner .card-body{
    padding: 6vw 0 6vw 6%; 
  }
  .card-contact-banner .staff{
     right: 5%;
     width: 34%;
  }

  .card-contact-banner h3{font-size: 3vw;}
  .card-contact-banner h4{font-size: 2.6vw;}
  .card-contact-banner p {font-size: 1.75vw;}
}

@media (max-width:1440px){
  .section-contact .banner .line-1{width: 65%;  margin-right: 11%;}
  .section-contact .banner .line-2{width: 55%; margin-right: 20%; margin-top: -10px;}
}

@media (max-width:1366px){
  .section-contact .contact-list{
    padding:0 40px 0 0;
  }
  .section-contact .text-rotate{font-size: 20px; left:100%; margin-right: -20px;}
}

@media (max-width:1280px){
  .section-contact-banner{height: 340px;}
  .section-contact-banner .boxed{padding-left: 80px;}
  .section-contact-banner h2{font-size: 48px;}
  .section-contact-banner p{font-size: 36px;}

  .section-contact-banner .triangle1 {
    width: 500px; 
    top: -101px;
    right: -250px;
  }
  .section-contact-banner .triangle2 { 
    width:220px; 
    left: -122px;
  }
}

@media (max-width:1199px){
  .card-contact-banner{
    border-radius: 50px;
  }
  .card-contact-banner .card-bubble:before,
  .card-contact-banner .card-bubble:after{
    border-radius: 50px;
  }

  .section-contact .contact-list{
    margin-top: -40px;
  }
}

@media (max-width:991.98px){
  .section-contact-banner{height: 320px;}
  .section-contact-banner h2{font-size: 40px;}
  .section-contact-banner p{font-size: 28px;}

  .card-contact-banner{
    border-radius: 35px;
  }
  .card-contact-banner .card-bubble:before,
  .card-contact-banner .card-bubble:after{
    border-radius: 35px;
  }

  .card-contact-banner{margin-top: -14px;}
  .section-contact .banner .line-1{margin-top: -10px;}

  .card-contact-2{
    border-radius: 50px;
    height: auto;
    padding: 40px 0;
  }
  .card-contact-2 .card-icon{
    width: 60px;
    height: 60px; 
    margin-bottom: -30px;
  }
  .card-contact-2 .card-icon .icons {
    --size:35px;
  }
  .card-contact-2 .card-title{
    padding-top: 10px;
  }
  .section-contact .contact-list{padding-right: 0;}
  .section-contact .text-rotate{display:none;}
}

@media (max-width:690px){
  .section-contact-banner .boxed{padding-left: 20px; padding-right: 20px;}
  .section-contact-banner .triangle path{fill:rgba(250, 250, 250, 0.1);}

  .section-contact .contact-list .row{
    flex-direction: column;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
  }
  .section-contact .contact-list .row > div{
    width: 100%;
  }
  .card-contact-2{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 0;
    border-radius:30px;
  }
}

@media (max-width:575px){
  .section-contact-banner{height: 220px;}
  .section-contact-banner h2{font-size: 32px; margin-bottom: 10px;}
  .section-contact-banner p{font-size: 20px;}
  .section-contact-banner .boxed{padding-left: 0; padding-right: 0;}

  .section-contact-banner .triangle1 {
    width: 300px; 
    top: -61px;
    right: -150px;
  }
  .section-contact-banner .triangle2 { 
    width:120px; 
    left: -50px;
    top: 50%;
  }

  .card-contact-banner{
    border-radius: 20px;
    overflow: hidden;
  }
  .card-contact-banner .card-bubble:before,
  .card-contact-banner .card-bubble:after{
    border-radius: 20px;
  }

  .card-contact-banner h4{
    margin-bottom: 10px;
  }
  .card-contact-banner .card-body{
    padding-left:20px;
  }
  .card-contact-banner h3{
    font-size: 4.5vw;
    max-width: 60%;
    margin-bottom: 5px;
  }
  .card-contact-banner .staff {
    right: 0;
    width: 40%;
  }
}



/*==================================================
Venture Builder
==================================================*/ 
.section-venture-builder-banner{
  height: 550px;
  border-radius: 0 0 60px 60px;
  overflow: hidden;
}
.section-venture-builder-banner .background{
  background-image: url(../img/thumb/photo-1920x605--2.jpg);

}
.section-venture-builder-banner .container{
  display: flex;
  height: 100%;
}
.section-venture-builder-banner .group{
  margin: auto;
  padding-top: 60px;
}
.section-venture-builder-banner h2{
  text-align: center;
  color: #fff;
  font-size: 60px;
}

.section-venture-builder-banner p{
  text-align: center;
  color: #B7B7B7;
  font-size: 25px;
  margin: 0;
}

@media (max-width:1550px){
  .section-venture-builder-banner{
    height: 450px;
    border-radius: 0 0 50px 50px;
  }
  
  .section-venture-builder-banner h2{ 
    font-size: 55px;
  }
  
  .section-venture-builder-banner p{
    font-size: 23px;
  }
}

@media (max-width:1440px){
  .section-venture-builder-banner{
    height: 30vw;
  }
}

@media (max-width:1280px){
  .section-venture-builder-banner h2{ 
    font-size:45px;
  }
  
  .section-venture-builder-banner p{
    font-size: 20px;
  }
}

@media (max-width:991.98px){
  .section-venture-builder-banner{
    height: 40vw;
    border-radius: 0 0 40px 40px;
  }
 
  .section-venture-builder-banner h2{ 
    font-size:35px;
  }
  
  .section-venture-builder-banner p{
    font-size: 18px;
  }
}

@media (max-width:670px){
  .section-venture-builder-banner{
    height: 40vw;
    border-radius: 0 0 30px 30px;
  }
  .section-venture-builder-banner h2{ 
    font-size:35px;
  }
  .section-venture-builder-banner p{
    font-size: 16px;
  }
}

@media (max-width:575px){
  .section-venture-builder-banner{ 
    height: 56vw;
    border-radius: 0 0 20px 30px;
  }
  .section-venture-builder-banner h2{ 
    font-size:24px;
  }
  .section-venture-builder-banner p{
    font-size: 14px;
  }
}

/*==================================================
Who Are We
==================================================*/ 

.section-whoarewe{
  padding: 80px 0;
}
.section-whoarewe h2{
  font-size: 80px;
  margin-bottom: 20px;
}
.section-whoarewe .article{
  font-size: 20px;
  text-align: center;
}

.card-whoarewe{
  display: flex;
  flex-direction: column; 
  text-align: center; 
  border-left: 2px solid #CFCFCF;
  border-bottom: 2px solid #CFCFCF;
  transition: all 0.25s;
  position: relative;
  height: 100%;
}
.card-whoarewe:after{
  content: '';
  position: absolute;
  top: 0;
  bottom: -2px;
  border-right: 2px solid transparent;
  right: -2px;
}
.card-whoarewe:before{
  content: '';
  position: absolute;
  top: -2px;
  right: -2px; 
  left: -2px;
  border-top: 2px solid transparent; 
}
.card-whoarewe .icons{
  --size:35px;
  margin:0 auto 20px;
}

.card-whoarewe h3{
  font-weight: 700;
  font-size: 24px;
  transition: all 0.25s;
  min-height: 55px;
  display: flex;
  color: #212121;
  align-items: center;
  justify-content: center;
}
.card-whoarewe p{
  margin: 0 auto;
  font-size: 20px;
  max-width: 380px;
}
.card-whoarewe .card-body{
  flex: unset;
  padding: 30px 20px;
}

.card-whoarewe:hover{
  background-color: #FFECEA;
  border-color:#E03526 ;
  z-index: 100;
}
.card-whoarewe:hover::before,
.card-whoarewe:hover::after{border-color: #E03526;}

.card-whoarewe:hover h3{
  color: #E03526;
  font-weight: 700;
}
.card-whoarewe:hover .icons path{fill: #E03526;}
.boxed-whoarewe{
  position: relative;
  overflow: hidden;
  margin-top: 90px;
  margin-bottom: 20px;
}
  
.boxed-whoarewe:before{
  content: '';
  position: absolute; 
  z-index: 200; 
 
  border: 2px solid #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}
  
.section-whoarewe .bg-triangle{
  position: absolute;
  left: -140px;
  top: 20%;
  width:290px;
  height: auto;
  transform: rotate(15deg);
}
.section-whoarewe .bg-triangle path{
  fill:rgba(228, 0, 15, 0.1) ;
}

.followus-floating{
  position: absolute;
  top: 30px;
  gap: 20px;
  display: flex;
  flex-direction: column;
  right: var(--padding-x);
  z-index: 100;
}
.followus-floating .icons{
  --size:50px;
  border-radius:50%;
  border: 1px solid #B7B7B7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.followus-floating .icons img,
.followus-floating .icons svg{
  width: 26px;
  height: 26px;
  object-fit: contain;
  object-position: center;
}
.followus-floating .icons:hover{
  border-color: #000;
}
@media (max-width:1550px){
  .section-whoarewe h2{
    font-size: 70px;
  }
}

@media (max-width:1440px){
  .section-whoarewe .article{
    font-size: 18px;
  }
}

@media (max-width:1280px){
  .section-whoarewe{
    padding:60px 0;
  }
  .section-whoarewe h2{
    font-size: 60px;
    margin-bottom: 15px;
  }
  .section-whoarewe .bg-triangle{width: 200px; left: -100px; top: 10%;}

  .followus-floating{
    gap: 10px;
  }
  .followus-floating .icons{
    --size:40px;
  }
  .followus-floating .icons img,
  .followus-floating .icons svg{
    width: 22px;
    height: 22px;
  }
}

@media (max-width:1024px){ 

  .boxed-whoarewe{
    margin-top: 70px; 
  }
 
}

@media (max-width:991.98px){
  .section-whoarewe{
    padding:60px 0;
  }
  .section-whoarewe h2{
    font-size: 45px; 
    margin-bottom: 10px;
  }

  .boxed-whoarewe .row {
    justify-content: center;
  }
  .boxed-whoarewe .row > div{
    width: 50%;
  } 
  .card-whoarewe p{font-size: 18px;}
  .followus-floating .icons{
    --size:30px;
  }
  .followus-floating .icons img,
  .followus-floating .icons svg{
    width: 18px;
    height: 18px;
  }
}

@media (max-width:767px){  
  .boxed-whoarewe{
    margin-top: 50px; 
  }

  .card-whoarewe p{font-size: 16px;}
}

@media (max-width:575px){
  .section-whoarewe{
    padding:50px 0; 
  }
  .section-whoarewe h2{
    font-size: 30px; 
    margin-bottom: 10px;
  }
  .section-whoarewe .article{
    font-size: 15px;
  } 
  .card-whoarewe .icons{margin-bottom: 10px;} 
  .card-whoarewe h3{font-size: 20px;}

  .boxed-whoarewe{margin-bottom: 0;}
  .section-whoarewe .bg-triangle{display: none;}

  .followus-floating{
    top: auto;
    right:auto;
    position: relative;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
    padding: 20px 0;
  }
  .followus-floating .icons{
    --size:40px;
  }
  .followus-floating .icons img,
  .followus-floating .icons svg{
    width: 22px;
    height: 22px;
  }
}

@media (max-width:500px){
  .boxed-whoarewe .row > div{
    width: 100%;
  }

  .card-whoarewe h3{
    min-height: 0;
    line-height: normal;
    margin-bottom: 10px;
  }
}

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

.section-portfolio{
  padding: 120px 0;
}
.section-portfolio .hgroup{
  padding-bottom:70px;
  flex-direction: column;
  gap: 20px;
}

.section-portfolio .hgroup .label{
  font-size: 32px;
  padding: 8px 30px;
  margin-right: auto;
  min-width: 156px;
  text-align: center;
  justify-content: center;
  font-weight: 700;
  --bg: #E03526;
  --color: #fff; 
}

.section-portfolio .hgroup h2{
  font-size: 78px;
}

.card-portfolio{
  position: relative;
  border-radius: 30px;
  overflow: hidden; 
  transition: all 0.25s;
}

.card-portfolio:before,
.card-portfolio:after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
   
  height: 40%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
  opacity: 0.4;
  z-index: 100;
}
.card-portfolio:before{
  top: 0;
  transform: rotate(-180deg); 
}
.card-portfolio:after{
  bottom: 0;
}
  
.card-portfolio .card-title{
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  font-size: 28px;
  color: #fff;
  font-weight: var(--fw-400);
  padding: 10px 10px 14%;
  z-index: 100;
}

.card-portfolio:hover .photo{transform: scale(1.2);}

.card-portfolio.others{
  border: 1px solid rgba(222, 222, 222, 0.6);
  background-color: rgba(206, 206, 206, 0.2) !important;
}
.card-portfolio.others:hover{
  background-color: rgba(206, 206, 206, 0.5) !important;
}
.card-portfolio.others .photo{
  background-image: url(../img/icons/icon-other.png);
  background-size: 80px;
  transform: scale(1);
}
.card-portfolio.others .card-title{
  color: #000000;
}

.row.portfolio-list{
  --bs-gutter-x: 70px;
  --bs-gutter-y: var(--bs-gutter-x);
}
.section-portfolio .bg-shadow{
  position: absolute;
  left: 0;
  top: 30%;
  width:290px;
  height: auto;
}

.section-portfolio .bg-triangle{
  position: absolute;
  right: -140px;
  top: 0;
  width:290px;
  height: auto;
  transform: rotate(15deg);
}
.section-portfolio .bg-triangle path{
  fill:rgba(228, 0, 15, 0.1) ;
}
@media (max-width:1550px){
  .section-portfolio .hgroup{
    padding-bottom: 50px;
  }
  .section-portfolio .hgroup h2{
    font-size: 70px;
  }
  .section-portfolio .hgroup .label{
    font-size: 28px;
    min-width: 145px;
  }
  .card-portfolio .card-title{
    font-size: 26px;
  }
  .row.portfolio-list {
    --bs-gutter-x: 60px;
  }
}

@media (max-width:1280px){
  .section-portfolio{padding: 80px 0;}
  .section-portfolio .hgroup{
    gap: 10px;
    padding-bottom: 30px;
  }
  .section-portfolio .hgroup h2{
    font-size:50px;
  }
  .section-portfolio .hgroup .label{
    font-size: 22px;
    min-width: 0;
    padding: 4px 30px;
  }
  .row.portfolio-list {
    --bs-gutter-x: 40px;
  }
  .card-portfolio.others .photo{
    background-size: 25%;
  }
  .card-portfolio .card-title{
    font-size: 22px;
  }

  .section-portfolio .bg-triangle{
    width: 220px;
  }
}

@media (max-width:1024px){
  .row.portfolio-list {
    --bs-gutter-x: 30px;
  }
  .card-portfolio .card-title{
    font-size:18px;
  }
}

@media (max-width:991.98px){
  .section-portfolio .hgroup h2{
    font-size:45px;
  }
  .row.portfolio-list {
    --bs-gutter-x: 20px;
  }

  .card-portfolio {
    border-radius: 20px;
  }
  .card-portfolio .card-title{
    font-size:15px;
    padding-bottom: 10%;
  }
}
@media (max-width:800px){
  .section-portfolio .hgroup .label{
    font-size:18px;
    min-width: 0;
    padding: 2px 20px;
  }
}
@media (max-width:767px){
  .card-portfolio {
    border-radius: 30px;
  }
  .row.portfolio-list {
    --bs-gutter-x: 30px;
  }
  .card-portfolio .card-title{
    font-size:22px;
  }
}

@media (max-width:670px){
  .section-portfolio .hgroup h2{font-size: 30px;}
  .row.portfolio-list {
    --bs-gutter-x: 20px;
  }

  .row.portfolio-list > div{
    width: 50%;
  }
  .card-portfolio .card-title{
    font-size:20px;
  }
}

@media (max-width:450px){ 

  .row.portfolio-list > div{
    width: 100%;
  }
  
  .card-portfolio.others{
    height: 40vw;
  }
  .card-portfolio.others .card-photo ,
  .card-portfolio.others .card-photo .photo{height: 100%;}
  .card-portfolio.others .card-photo img{display: none;}

  .card-portfolio.others .photo{background-size: 40px; background-position: top 30px center;}
  .card-portfolio.others .card-title{padding-bottom: 20px;}
}

/*==================================================
Job Career
==================================================*/ 

.section-job-banner .banner{
  position: relative;
  margin: 0 auto;
  max-width: 1920px;
}
.section-job-banner .banner img{
  width: 100%;
  max-width: 1757px;
  margin-right: auto;
  display: block;
}

.card-banner{
  background: #FFFFFF;
  box-shadow: 0px 18px 30px rgba(0, 0, 0, 0.25);
  border-radius: 30px;
  padding: 25px;

  position: absolute; 

  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 23px;
}
.card-banner .card-icon{
  background-color: #FF4646;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 82px;
  height: 82px;
  flex-shrink: 0;
  transition: all 0.25s.;
}

.card-banner .card-icon .icons{
  --size:40px;
}
.card-banner .card-body{
  padding: 0 20px 0 0;
}
.card-banner p{
  margin: 0;
  line-height: 1.4;
}
.card-banner .icons path{fill: #FBCCCC;}

.card-banner.c1{
  min-width: 520px;
  top: 7%;
  left: 9%;
}
.card-banner.c2{ 
  left: 50%;
  bottom: 20%;
  min-width: 450px;
}
.card-banner:hover .card-icon {background-color: #E03526;}

.title-70vw{font-size: 70px;}
@media (max-width:1800px){
  .section-job-banner .banner{
    padding-right:50px;
  }

  .title-70vw{font-size: 4vw;}
}
@media (max-width:1680px){
  .card-banner{
    padding:18px;
    gap: 15px;
    font-size: 21px;
  }
  .card-banner .card-icon{width: 70px; height: 70px;}
  .card-banner .card-icon .icons{--size:35px}
  .card-banner.c1{min-width:450px;}
  .card-banner.c2{min-width: 400px; left: 55%;}
}

@media (max-width:1280px){
  .card-banner{
    padding:12px;
    gap: 15px;
    font-size: 18px;
    border-radius: 18px;
  }
  .card-banner .card-icon{width:50px; height: 50px; }
  .card-banner .card-icon .icons{--size:26px}
  .card-banner.c1{min-width:0;}
  .card-banner.c2{min-width: 300px; }
}
 

@media (max-width:991.98px){
  .card-banner{
    padding:8px 20px 8px 8px;
    gap: 10px;
    font-size: 10px;
    border-radius: 12px;
  }
  .card-banner .card-icon{width:40px; height: 40px; border-radius: 8px;}
  .card-banner .card-icon .icons{--size:26px}
  .card-banner.c1{left: 10%;}
  .card-banner.c2{min-width: 210px; left: 48%; bottom: 13%;}

  .title-70vw{font-size: 50px;}
}


@media (max-width:767px){
  .title-70vw{font-size: 40px;}
}

@media (max-width:670px){
  .card-banner.c1{left: 5%;}
  .card-banner.c2{min-width: 0;}

  .card-banner .card-icon{width:32px; height: 32px; border-radius:6px;}
  .card-banner .card-icon .icons{--size:16px}
  .card-banner .card-body{padding-right: 0;}

  .section-job-banner .banner{padding-right: 20px;}
}


@media (max-width:575px){
  .card-banner.c1{left: 5%;}
  .card-banner.c2{min-width: 0;}

  .card-banner {padding: 5px 10px 5px 5px;border-radius: 10px; gap: 8px; font-size:8px;}
  .card-banner .card-icon{width:24px; height: 24px;}
  .card-banner .card-icon .icons{--size:14px}
  .card-banner .card-body{padding-right: 0;}

  .section-job-banner .banner{padding-right: 20px;}

  .title-70vw{font-size:28px;}
}

/*==================================================
Job - Vision
==================================================*/ 

.section-job-vision{
  background-color: #F5F5F5;
  position: relative;
  padding: 100px 0;
  overflow: hidden;
}

.card-vision {
  position: relative;
  padding-top: 200px;
  width: 100%;
  max-width: 1178px;
  margin: 0 auto;
  background-color: transparent !important; 

  --text-padding:220px;
  
}
.card-vision .card-photo{
  position: absolute;
  left:0;
  top: 0;
  border-radius: 40px;
  padding:5px;
  width: 385px;
  background:linear-gradient(20deg,  rgba(204,202,201,1) 0%,rgba(224,53,38,1) 100%);
  z-index: 100;
}
.card-vision .card-photo .photo{
  border-radius: 34px;
}
.card-vision .card-body{
  background-color: #E03526;
  position: relative;
  border-radius: 40px;
  min-height: 370px;
  color: #fff;
  padding: 40px 40px;
  display: flex;
  flex-direction: column;
  max-width: 1000px;
  width: 100%;
  margin-left: auto;
}
.card-vision h3{
  font-size: 27px;
  margin-bottom: 30px;
  line-height: 1.5;
}

.card-vision h5{
  font-size: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  
}
.card-vision h5 .icons{
  --size:20px; 
}

.card-vision .group{
  margin: auto 0; 
  /* margin-left: auto;
  max-width: 675px; */
  padding-left: var(--text-padding);
  width: 100%;
}

.card-vision h2{
  font-size: 70px;
  position: absolute;
  top: -30px;
  right: -60px;
}

.card-vision.bg-black  h2{
  right: auto;
  left: -60px;
  top: -60px;
}
.card-vision.bg-black .card-body{
  background-color: #000;
  margin-left: 0;
  margin-right: auto;
}
.card-vision.bg-black .group{ 
  padding-left: 20px;
  padding-right: var(--text-padding);
}
.card-vision.bg-black .card-photo{
  left: auto;
  right: 0;
}
 
.card-vision.bg-black .icons path{fill:#E03526 ;}

.card-vision-list{
  display: flex;
  flex-direction: column;
  gap: 180px;
}
.section-job-vision .background img{
  position: absolute;
  width: 832px;
  height: auto;
}
.section-job-vision .background.left-bottom img{
  left: -220px;
  bottom: -240px;
}
.section-job-vision .background.right-bottom img{
  right: -220px;
  bottom: -240px;
}
.section-job-vision .background.left-bottom:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px;
  opacity: 0;
  background-color: #F5F5F5;
}

.swiper-overflow.workwithus{
  overflow: hidden;
}

.swiper-workwithus .card-photo{
  border-radius: 20px;
  background: conic-gradient(from 180deg at 50% 50%, #E03526 -113.4deg, #CCCAC9 3.77deg, #E03526 246.6deg, #CCCAC9 363.77deg);
}
 
.swiper-workwithus{
  width: 720px;
  margin: 0 auto;
  overflow: visible;
  padding: 50px 0;
}
.swiper-workwithus .swiper-slide{
  width: 100%;
}
.swiper-workwithus .card-photo{
  width: 580px;
  margin: 0 auto;
  display: block;
  padding: 2px; 
  transition: all 0.35s;
}
.swiper-workwithus .card-photo .photo{
  border-radius:18px;
}
.swiper-workwithus .swiper-slide .card-photo{  transform: rotate(9.02deg);}
.swiper-workwithus .swiper-slide-active .card-photo{  transform: rotate(-9.02deg);}

.section-workwithus{margin-bottom: 30px;}
@media (max-width:1550px){
  
  .card-vision {
    max-width:950px; 
    padding-top: 156px;
    --text-padding:160px;
  }

  .card-vision .card-photo{
    width: 300px; 
  }
  .card-vision .card-body{min-height:300px; max-width: 800px;}
  .card-vision h3{font-size: 24px;} 

  .card-vision h2{
    font-size: 60px;  
  } 

  .section-job-vision .background img{ 
    width: 700px; 
  }
  .section-job-vision .background.left-bottom img{
    left: -250px;
    bottom: -220px;
  }

  .section-job-vision .background.right-bottom img{
    right: -250px;
    bottom: -220px;
  }

  .section-job-vision +  .section-job-vision {margin-top: -50px; z-index: 10;}
 
}
 
@media (max-width:1280px){
  .card-vision h2{
    font-size: 50px;  
    right:-40px;
    top: -30px;

  }
  .card-vision.bg-black h2{
    top: -30px;
  }
  
  .swiper-workwithus{
    width: 620px;
  }

  .swiper-workwithus .card-photo{
    width: 500px;
  }

  .section-workwithus{margin-bottom: 0;}
}

@media (max-width:1199px){
  .card-vision {
    max-width: 80%; 
    padding-top:80px;
    --text-padding:120px;
  }
  .card-vision h3{
    font-size: 22px;
  }
  .card-vision h5{
    font-size: 16px;
  }
  .card-vision .card-photo{
    width: 220px;
  } 
  .card-vision .card-body{
    max-width:87%;
  }
  .card-vision.bg-black .group{
    padding-left: 0;
  }

  .card-vision.bg-black h2{
    top: -60px;
    line-height: 1.2;
  }
}

@media (max-width:991.98px){
  .section-job-vision{
    padding: 90px 0;
  }
  
  .card-vision {
    max-width: 100%;
    padding: 50px 0 0 50px;
  }
  .card-vision .card-photo{
    width: 180px;
    left: 0;
    border-radius: 30px;
  }
  .card-vision .card-photo .photo{
    border-radius: 24px;
  }
  .card-vision .card-body {
    min-height:280px;
    border-radius: 30px;
    max-width: 100%;
  }
  .card-vision h3{
    font-size: 20px;
  }
  .card-vision h5 .icons {
    --size: 18px;
  }
  .card-vision.bg-black  {
    padding-left: 0;
    padding-right: 50px;
  }
  
  .card-vision-list{
    gap:150px;
  }
  .card-vision h2{
    font-size: 40px;  
    right:0px;
    top: -20px;

  }
  .card-vision.bg-black h2{
    left: 0;
  }

  .section-job-vision +  .section-job-vision {margin-top: -20px; z-index: 10;}
  .section-job-vision .background img {width:600px;}
  .section-job-vision .background.left-bottom img {
    left: -220px;
    bottom: -220px;
  }
  .section-job-vision .background.right-bottom img{
    right: -220px;
    bottom: -220px;
  }

  .swiper-workwithus{
    width:520px;
  }

  .swiper-workwithus .card-photo{
    width: 420px;
  }

  .swiper-button.button-star{width: 50px; height: 50px;}
  .swiper-button.button-star .icons{--size:15px}
}
 
@media (max-width:767px){
  .swiper-workwithus{
    width:80%;
  }

  .swiper-workwithus .card-photo{
    width: 420px;
  }
  .swiper-button-prev.button-star{left: 30px;}
  .swiper-button-next.button-star{right: 30px;}

  .section-workwithus .title-26{font-size: 20px;}
}

@media (max-width:680px){
  .section-job-vision{
    padding: 50px 0;
  }
  .card-vision{
    flex-direction: column;
    padding: 0 !important;
  }
  .card-vision .card-photo{
    position: relative;
    margin-bottom:-60px;
    margin-left:auto;
    margin-right: auto;
  }
  .card-vision .group{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 20px; 
  }

  .card-vision .card-body{
    min-height: 0;
    padding:70px 25px 50px !important;
    max-width: 100%;
  }
  .card-vision h3{
    font-size:18px;
  }

  .card-vision h5{
    position: relative;
    padding-left: 26px;
    line-height: 1.2; 
    font-size: 14px;
  }
  .card-vision h5 .icons{
    position: absolute;
    top: 0;
    left: 0;
  }
  .card-vision h5 .icons {
    --size: 16px;
    top: 2px;
  }

  .card-vision-list{
    gap: 50px;
  }

  .card-vision h2{
    position: relative;
    font-size:34px;  
    right:0px;
    top: auto;
    text-align: center;
    padding-bottom: 30px;
  }
  .card-vision.bg-black h2{
    top: 0;
  }

  .section-job-vision +  .section-job-vision {margin-top: 0px; padding-bottom: 80px;}

  .section-workwithus .title-26{font-size:16px;}
}

@media (max-width:575px){
  .swiper-workwithus{
    width:100%;
    padding: 5vw 0;
  }

  .swiper-workwithus .card-photo{
    width: 80%;
  }
  .swiper-button-prev.button-star{left: 20px;}
  .swiper-button-next.button-star{right: 20px;}

  .swiper-button.button-star{display: none;}
  .swiper-overflow.workwithus{margin-bottom:0;} 
}


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

.footer{
  background-color: #0A0D14; 
  padding-top: 110px;
  padding-bottom: 80px;
  color: #fff;
  font-size: 16px;
  position: relative;
}

.footer > .container{
    /* display: flex;
    flex-direction: column; */
}

.footer-copyright{
  background-color: #0A0D14; 
  font-size: 12px;
  color: #fff;
  position: relative;
}
.footer-copyright .container{
  padding-top: 20px;
  padding-bottom: 20px;
}
.footer-copyright .container:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  border-top: 1px solid #2A2A2A;
}
.footer-copyright .container{
  display: flex;
  justify-content: space-between;
}
.footer-copyright p{
  margin: 0;
}

.footer h3{
  font-size:14px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  font-weight: var(--fw-400);
  margin-bottom: 15px;
}
.footer-links{
  display: flex;
  justify-content: space-between;
}
.nav-footer{
  flex-direction: column;
}
.nav-footer li a{
  display: inline-block;
  padding: 3px 0; 
}
.nav-footer li a:hover{  color: rgba(255, 255, 255, 0.6);}

.followus{
  display: flex;
  gap: 10px;
  padding-top: 2px;
}
.followus .btn{
  --btn-h:32px;
  --bs-btn-bg:#F43D2C;
  --bs-btn-color:#0A0D14;
  --bs-btn-hover-bg:#E4000F;
  --bs-btn-hover-color:#0A0D14;
  --bs-btn-border-radius:50px;
  font-size: 14px;
  padding: 0 16px;
}

.followus .btn .icons{
  --size:7px;
  background-image: url(../img/icons/icon-arrow-next-black.svg);
}
.followus .btn:hover .icons{ transform: rotate(45deg);}

.footer-contact{
  display: flex;
  flex-direction: column;
  text-align: right;
  align-items: flex-end;
  justify-content: space-between;
  height: 265px;
  max-width: 485px;
  margin-left: auto;

}
.footer-contact h2{
  color: #D6D4CC;
  font-size: 30px;
  font-weight:var(--fw-400);
  line-height: 1;
  text-transform: uppercase;
  text-align: right;
}

.footer-contact h5{
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  font-weight: var(--fw-400);
  gap:10px;
  text-align: right;
}
.footer-contact .form-group{width: 100%; padding-top: 10px;}
.footer-contact .form-group .btn{
  --btn-h:47px;
  --bs-btn-color:#1A1A1A;
  padding: 0; 
  width: var(--btn-h);
  border-radius: 50%;
  position: absolute;
  right: 0;
  top:0
}
.footer-contact .form-group .form-control{
  background-color: transparent;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid #8B8B8B;
  color: #fff;
  font-weight: var(--fw-400);
  padding-left: 0;
  --input-h:55px
}
.footer-contact .form-control::placeholder {   
  opacity:1;  
  color:#6D6D6D; 
}

.footer-contact  .form-control:-ms-input-placeholder {   
  opacity:1;  
  color:#6D6D6D;
}

.footer-contact .form-control::-ms-input-placeholder {   
  opacity:1;  
  color:#6D6D6D;
}

.footer-infos .logo{
  width: 370px;
  height: auto;
  display: block;
  margin-top: -45px;
  margin-bottom: 45px;
}
.footer-infos h2{
  font-size: 28px;
  margin-bottom: 15px;
}
.footer-infos h2 span{
  display: inline-block;
  background: linear-gradient(71.59deg, #FFFFFF 72.24%, rgba(177, 177, 177, 0.31) 92.5%);
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent;*/
background-clip: text;
text-fill-color: transparent;
}

.footer-infos p{
  margin: 0;
  font-size: 20px;
  max-width: 329px;
  background: linear-gradient(71.59deg, #FFFFFF 83.38%, rgba(177, 177, 177, 0.31) 92.5%);
-webkit-background-clip: text;
/* -webkit-text-fill-color: transparent; */
background-clip: text;
text-fill-color: transparent;
}

.totop{
  width: 58px;
  height: 58px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/icons/icon-totop.svg);

  position: absolute;
  top: -25px;
  right: 50px;
  z-index: 100;
  display: flex;
}
.totop .icons{
  --size:18px;
  margin: auto;
  background-image: url(../img/icons/icon-totop-arrow.svg);
  top: 0;
}

.totop:hover .icons{ top: -5px;}
 
@media (max-width:1550px){
  .footer-copyright .container:before{left: var(--padding-x); right: var(--padding-x);}
}

@media (max-width:1440px){
  .footer{font-size: 15px;}
  .footer-infos .logo{width: 300px;}
  .footer-infos h2{font-size: 26px;}
  .footer-infos p{font-size: 18px; max-width: 300px;}
}

@media (max-width:1050px){
  .footer-infos .logo{width: 250px;}
  .footer-infos h2{font-size: 24px;}
  .footer-infos p{font-size: 16px; max-width: 260px;}

  .footer-contact{max-width:400px;}
  .footer-contact h2{font-size: 24px;}
}

@media (max-width:991.98px){
  .footer-infos{ 
    border-bottom:1px solid #2A2A2A;
    padding-bottom: 40px;
    margin-bottom: 40px;
  }
  .footer-infos .logo{ 
    margin-bottom: 20px;
    width: 320px;
  }

  .footer-infos p{max-width: 100%;}


  .totop{
    width: 50px;
    height: 50px;
    right: 30px;
  }
  .totop .icons{
    --size:16px;
  }
}


@media (max-width:575px){
  .footer{
    padding-top: 90px;
  }
  
  .footer-links{
    flex-wrap: wrap;
    gap: 30px 0;
  }
  .footer-links .cols:nth-child(1){width: 100%;}
  .footer-links .cols{
    width: 50%;
  }

  .footer-infos{
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
  .footer-infos h2{
    font-size: 20px;
    margin-bottom: 10px;
  }

  .footer-infos .logo{ 
    margin-bottom: 20px;
    width: 220px;
  }

  .footer-contact{
    max-width: 100%;
    align-items: flex-start;
    height: auto;
    gap: 25px;

    border-top:1px solid #2A2A2A;
    padding-top: 40px;
    margin-top: 40px;
  }
  .footer-contact h2{text-align: left;}
  .footer-contact h2 br{display:none;}

  .footer-contact .form-group{
    padding-top: 0;
  }
  .footer-contact .form-group .btn{
    --btn-h:42px
  }
  .followus .btn {
    --btn-h: 28px;
    font-size: 13px;
    padding: 0 14px;
  }

  .totop{
    width:46px;
    height: 46px;
    right: 20px; 
  }
  .totop .icons{
    --size:16px;
  }
}
.text-red{
  color: var(--red) !important;
}