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

html,body{
  padding: 0;
  margin: 0; 
  height: 100%; 
}  

html{
  scroll-behavior:unset !important
}
body{     
  
  margin:0; 
  padding:0;  
 
  position: relative;
  overflow-x: hidden;

  /* overscroll-behavior: contain; */
}
 
:root {    

  --bs-body-color:var(--60697B);
  --bs-body-bg:#fff;
  --bs-body-text-align:left;
  --bs-body-font-weight:var(--fw-400);
  --bs-body-line-height:1.60;
  --bs-body-font-size:var(--fs-16);
  --bs-body-font-family: 'Inter','IBM Plex Sans Thai', sans-serif;   
  --bs-link-hover-color:var(--color-primary);

  --fs-64:64px;
  --fs-48:48px;
  --fs-42:42px;
  --fs-32:32px;
  --fs-24:24px;
  --fs-22:22px;
  --fs-20:20px;
  --fs-18:18px;
  --fs-16:16px;
  --fs-14:14px;
  
  --FF5001:#FF5001;
  --009A44:#009A44;
  --FED140:#FED140;
  --F3C9D5:#F3C9D5;
  --3958C4:#3958C4;
  --355FF5:#355FF5;

  --60697B:#60697B;
  --E9FAF1:#E9FAF1;
  --25C870:#25C870;
  --FFECEC:#FFECEC;
  --FF3E40:#FF3E40;
  --FFFFFF:#FFFFFF;
  --FBFBFB:#FBFBFB;
  --EBEBEB:#EBEBEB;
  --D6D6D6:#D6D6D6;
  --C2C2C2:#C2C2C2;
  --ADADAD:#ADADAD;
  --858585:#858585;
  --5C5C5C:#5C5C5C;
  --333333:#333333;
  --292929:#292929;
  --1F1F1F:#1F1F1F;
  --0A0A0A:#0A0A0A; 

  --title-color:var(--0A0A0A);
  --sub-title-color:var(--1F1F1F);

  --color-primary:var(--FF5001); 
  --color-secondary:var(--FED140); 

  --card-border-radius:24px; 

  --animation-primary: 0.4s cubic-bezier(.75, 0, .25, 1);
  --animation-navigation-fade: 0.3s ease-in-out; 
  
  --header-height:120px; 
  --navbar-brand:70px; 

  --header-height-scrolling:105px; 
  --navbar-brand-scrolling:50px; 

  --padding-90:90px;
  --padding-80:80px;
  --padding-75:70px;
  --padding-50:50px;
  --padding-30:30px;
 
  /* --fw-300:200;
  --fw-400:300;
  --fw-500:400;
  --fw-600:500; 
  --fw-700:600;
  --fw-800:700;
  --fw-900:800; */

  --fw-300:300;
  --fw-400:400;
  --fw-500:500;
  --fw-600:600; 
  --fw-700:700;
  --fw-800:800;
  --fw-900:900;
  
}  
 

@media (max-width:1550px) {
  :root{
    --padding-90:70px;

    --fs-48:44px;
    --fs-42:40px;
    --fs-32:30px;
    --fs-24:22px;
    --fs-22:20px;

  }
}

@media (max-width:1280px) {
  :root{
    --fs-48:40px;
    --fs-42:36px;
    --fs-32:26px;
    --fs-20:18px;
    --fs-18:16px;
  }
}
@media (max-width:1199px) {
  :root{
    --padding-90:50px; 
    
    --fs-32:24px;
    --fs-24:18px; 
    --fs-22:var(--fs-24);
  }
}


@media (max-width:1024px) {
  :root{
    --navbar-brand:50px; 
    --header-height:90px;
    --header-height-scrolling:var(--header-height);
  }
}

@media (max-width:991.98px) {
  :root{
    --fs-48:var(--fs-42);
    --fs-42:32px;
    --fs-20:16px; 
  }
}
@media (max-width:670px) {
  :root{ 
    --padding-90:40px;  
    
    --navbar-brand:40px; 
    --header-height:75px; 
    
    --fs-42:25px;
    --fs-32:22px;
    --fs-24:16px;
    --fs-20:var(--fs-16);
    --fs-18:var(--fs-16);
    --fs-16:15px;
  }
}

@media (max-width:575px) {
  :root{
    --fs-42:24px;
  }
  
}
.fs-16{font-size: var(--fs-16);}
.fs-18{font-size: var(--fs-18);}
.fs-19{font-size: var(--fs-19);} 
.fs-20{font-size: var(--fs-20);} 
.fs-22{font-size: var(--fs-22);}
.fs-24{font-size: var(--fs-24);}
.text-title{color: var(--color-title);} 
.text-bw-10{color: #1F1F1F;}
.highlight{color: var(--color-primary);}

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

.modal-backdrop{
  overscroll-behavior: contain;
  --bs-backdrop-opacity: 0.8;
  --bs-backdrop-zindex: 1051;
}
 
a{
  color:inherit;
  text-decoration: none; 
  transition: all 0.2s ease-in-out;
}
a:hover{ text-decoration: none;   }
 
.star{ color: #FF3E40 }

.form-control,
.form-select,
.form-selects{
  --input-h:48px;
 -webkit-appearance: none; 
  padding:0 15px;
 
  font-weight:var(--fw-400); 
  font-family:inherit;  
  font-size:var(--fs-16); 
  border:1px solid #F0F0F0;

  height:var(--input-h);
  line-height:calc(var(--input-h) - 2px);  
  background:#fff; 
  border-radius: 12px; 
  color: var(--title-color);  
 
    -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-select.secondary{
  color: #2F9AB9;
  border-color: #2F9AB9;
  background-color: #EBF5F8;
  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='%232F9AB9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
 
.form-control::placeholder {   
  opacity:1;  
  color: #8D93A5; 
}

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

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

.form-control.disabled,
.form-control:disabled, 
.form-control[readonly] {
background: #F6F6F6;
border-color: #D3D3D3;
} 

.form-control.bg-light{
  background-color: #F7F7FC !important;
  border-color: #F7F7FC !important;
}
 
.form-select,
.form-selects{
  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='%238D93A5' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); 
  background-position:right .75rem center;
  background-size: 12px;
  background-repeat: no-repeat;
 
} 
 
.form-control:focus,
.form-select:focus{
  background-color: #fff; 
  outline: 0;
  border-color:rgba(86, 208, 201, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(80, 203, 239, 0.25);
 
}

.form-select.h-40,
.form-control.h-40{
  --input-h:40px;
}
.form-select.w-200{width: 200px;}
textarea.form-control{
  height: 120px;
  line-height: normal;
  padding-top: 10px;  
}
textarea.form-control.h-180{
  height: 180px;
} 

div.form-control{
  display: flex;
  align-items: center;
  gap:10px
}
.form-check {
  position: relative;
  padding-left:0;
  display: flex;
  gap: 10px;
}
.form-check .form-check-input{
  width: 20px;
  height: 20px;
  margin-right: 0; 
  border-width: 2px;
  position: relative;
  margin-left:0;
  margin-top: 0;
  border-radius: 3px; 
  flex-shrink: 0;
  border-color:#F0F0F0;
  box-shadow: none !important;
}
.form-check .form-check-input[type=radio],
.form-check .form-check-input[type=checkbox].circle{
  border-radius: 50%; 
}

.form-check .form-check-input[type=radio]:checked,
.form-check .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='%234F8F85'/%3e%3c/svg%3e");
}
.form-check label{
  margin-bottom:0;
  font-weight: 400;
  font-size: inherit; 
}
.form-check-input:checked[type=checkbox], 
.form-check-input.rounded:checked[type=radio]{
  background-color:transparent; 
}

.form-check-input:checked[type=checkbox]{
  background: 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='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  background-color: #25C870;
  border-color: #25C870; 
}
.form-select [data-bs-toggle]{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  gap:5px;
  color: var(--title-color); 
  padding-top: 2px;
  opacity: 0.5;
  outline: 0 !important;
}
.form-select [data-bs-toggle].selected{opacity: 1;}
.form-select [data-bs-toggle] .icons{top: -2px;}
.form-select.dropdown{padding: 0 10px; position: relative; z-index: 100;}
.form-select.dropdown:hover{
  border-color: rgba(86, 208, 201, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(80, 203, 239, 0.25);
}
.form-select .dropdown-menu{  
  border-radius: 8px;
  margin-top: 0;
  padding: 0px; 
  top: 100%;
  left: 0;
  z-index: 11;
  margin-top: 4px;

  transition: all .45s;
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  max-height: 200px;
  
}
.form-select .dropdown-menu:before,
.form-select .dropdown-menu:after{display: none;}
.form-select .dropdown-menu > li{
  border-bottom: 0;
}
.form-select .dropdown-menu > li {
  font-size: 14px;
  padding: 7px 10px;
  outline: none;
  text-align: left;
  transition: all 0.2s;
  list-style: none; 
  display: flex;
  gap:8px;
  align-items: center;
  line-height: normal;
  border-bottom: 0;
  cursor: pointer;
  transition: all 0.25s;
}
.form-select .dropdown-menu > li:hover ,
.form-select .dropdown-menu > li.active {
  background-color: var(--bs-dropdown-link-hover-bg);
}
.form-group{
  display: block;
  position: relative;  
  z-index: 10;
} 
.form-group h6{ 
  font-weight:var(--fw-500); 
  font-size: var(--fs-18);
  margin-bottom:10px;
  color: #1F1F1F;
}
.form-group span.error{
  color:#DF1642; 
  padding-top: 5px; 
  /* margin-top: -15px;  */
  display: block;
}
 
.form-group .group{
  position: relative;
  display: block;
} 
.form-group .group .icons{
  position: absolute;
  top: 0 !important;
  right: 15px;
  bottom: 0 !important;
  width: 16px; 
  height: auto;

  transition: none;
  z-index: 1;
} 
  
.form-group .group .icons.left{
  left: 10px;
  right: auto;
}
.form-group .group .icons.left.w-20{
  left: 14px;
}
.form-group .group .icons.left + .form-control{
  padding-left: 45px;
}
 

.form-group  .error + .icons{bottom: 31px !important;}
.form-group  .error[style] + .icons{bottom: 0 !important;}
.error + .form-select{border-color: #DF1642; }

.form-select + .error{
  position: absolute;
  left: 0;
  top: 100%;
  line-height: 0.9;
}

select.form-select.error{display: none !important;}

.btn{
  --btn-h:56px; 
  position: relative; 
  padding:0 25px;       
  height:var(--btn-h); 
  line-height:calc(var(--btn-h) - 2px);  
  transition: all 0.25s ease-in-out;    
  font-weight: var(--fw-500);    
  font-size: var(--fs-16); 
  display: flex;
  align-items: center;
  justify-content: center;
  gap:8px; 

  --bs-btn-border-width:0;
  --bs-btn-border-radius:16px;

  --bs-btn-color:#fff; 
  --bs-btn-bg: var(--color-primary);  
  --bs-btn-hover-color:#fff; 
  --bs-btn-hover-bg:#FF6018;
  
  --bs-btn-active-color:var(--bs-btn-color);  
  --bs-btn-active-bg:var(--bs-btn-hover-bg);

  padding-top:1px;
 
}   
.btn{
  display: flex;
  align-items: center;
  justify-content: center;
} 
.btn span{
  position: relative;
  z-index: 10;
}

.btn-outline-white{
  --bs-btn-border-width:1px;
  --bs-btn-color:#fff; 
  --bs-btn-bg:transparent;
  --bs-btn-border-color:#fff;
}

.btn svg path{fill: #fff;} 

.btn-outline:active svg path ,
.btn-outline:hover svg path {fill: #fff;}

.btn-outline .icon-download path{fill:transparent;} 
.pc .btn-outline:hover .icon-download path{fill:unset; stroke: #fff;} 


.btn .icon-arrow{
  background-image: url(../img/icons/icon-arrow-tail.svg);
  width: 24px;
  height: 24px;
  animation: shake 1.4s ease infinite; 
  margin-right: -11px;
  margin-left: 10px;
}
.btn.btn-shadow:after{
  content: '';
  position: absolute;
  left: 10px;
  right:0;
  top:70%;
  height: 25px;
  z-index: -1;
  background: rgba(255, 80, 1, 0.3);

  filter: blur(20px);
}
.shake {
  animation: shake 2s ease infinite;
}
@keyframes shake {  
  50% {
    transform: translateX(-8px);
  }
}

  
.btn svg,
.btn img{
  position: relative;
  left: 0;
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
}
.btn.rounded {border-radius: 50px !important;}
 
.btn:focus,.btn:active,
button:focus,button:active,
a:focus,a:active {
   /* outline: none;
   box-shadow: none; */
} 

.btn.disabled, .btn:disabled{  pointer-events: none;}
 
.shadow-0{box-shadow: none !important;}
.btn.w-300{
  max-width: 300px;
  width: 100%;
  margin: 0 auto;
}
  
.buttons{
  display: flex; 
  text-align: center; 
  gap:20px;
  justify-content: center;
} 
.btn.w-110{width: 110px;}
.btn.w-150{width: 150px;}
.btn.w-210{width: 210px;}

.rounded-3{border-radius: 3px !important;}
.rounded-12{border-radius: 12px !important;}
.rounded{border-radius: 50% !important;}

.py-90{padding: var(--padding-90) 0 !important;}
.pt-90{padding-top: var(--padding-90) !important;}
.pb-90{padding-bottom: var(--padding-90) !important;}

.py-80{padding: var(--padding-80) 0 !important;}
.pt-80{padding-top: var(--padding-80) !important ;}
.pb-80{padding-bottom: var(--padding-80) !important ;}

.py-70{padding: var(--padding-75) 0 !important;}
.pt-70{padding-top: var(--padding-75) !important;}
.pb-70{padding-bottom: var(--padding-75)!important ;}

.py-50{padding: var(--padding-50) 0 !important;}
.pt-50{padding-top: var(--padding-50) !important;}
.pb-50{padding-bottom: var(--padding-50)!important ;}

.py-30{padding: var(--padding-30) 0 !important;}
.pt-30{padding-top: var(--padding-30) !important;}
.pb-30{padding-bottom: var(--padding-30)!important ;}

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

svg path,
svg rect,
svg line,
svg circle,
svg polygon{ 
  -webkit-transition: all 0.2s ease-in-out;
     -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
      -ms-transition: all 0.2s ease-in-out;
          transition: all 0.2s ease-in-out;
} 

@media (max-width:1280px){ }

@media (max-width:670px){
  .btn{
    --btn-h:46px; 
    --bs-btn-border-radius: 12px;
    padding: 0 20px;
  }
} 
 
/*==================================================
    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;
  
  --icon-size:16px;
  width: var(--icon-size);
  height: var(--icon-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;
}
 
.container-fluid{
  max-width: 1920px;
  --padding-x:90px;
  padding-left:var(--padding-x);
  padding-right:var(--padding-x); 
  position: relative;
  z-index: 9;    
}

.container{ 
  --padding-x:120px;
  max-width: calc(1489px + (var(--padding-x) * 2));
  padding-left: var(--padding-x);
  padding-right: var(--padding-x);
  position:relative;
  z-index:9; 
}
 
.section-target{
  position: absolute; 
  top: calc((var(--header-height)  - 0px) * -1); 
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; 
}
 
.section{
  display: block;
  position: relative; 
}
 
.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) {}
@media (max-width:1550px) {
  .container-fluid{
    --padding-x:70px;
  }
  .container{
    --padding-x:100px;
  }
}

@media (max-width:1199px) {
  .container,
  .container-fluid{
    --padding-x:50px;
  } 
}
  
@media (max-width:991.98px) { 
  .container-fluid{
    --padding-x:30px;
  }  
}
@media (max-width: 670px) {
  .container{
    --padding-x:30px;
  }
}
@media (max-width: 575px) {
  .container,
  .container-fluid{
    --padding-x:20px;
  }

  .section-target{top: -60px;}
   
}

/*==================================================
    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;}    

.title-main{color: var(--title-color);}
 
b, strong{
  font-weight: var(--fw-600); 
  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;  
  padding-top: 2px;
  color: var(--sub-title-color);
}   
.nowrap{ white-space: nowrap; }    
 
.h1, h1{
  font-size: var(--fs-64); 
}
.h2, h2{
  font-size: var(--fs-48); 
}
.h3, h3{
  font-size: var(--fs-42); 
}
.h4, h4{
  font-size: var(--fs-32); 
}
.h5, h5{
  font-size: var(--fs-24); 
}
.h6, h6{
  font-size: var(--fs-20); 
}
 
.header,
.navbar-brand,
.navbar-brand img{
  transition: all 0.3s;
}
.header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 0;
  height: auto;
  z-index: 1020;      
  display: block;    
  height: var(--header-height);  
  background-color:var(--0A0A0A);  
  color: #fff;

  --nav-general-height:48px;
  --nav-main-height:56px;

} 

.header-trans{ 
  background-color: transparent;
}

.scrolling .header{
  height: var(--header-height-scrolling);
}
.scrolling .header-trans{  
  background-color: #0A0A0A;
}
.header .container,
.header .container-fluid{  
  display: flex;   
  align-items:center;  
  height: 100%; 
  z-index: 400;
  position: relative;
  max-width: 100%;
  justify-content: space-between;
} 
  
.navbar-brand{
  margin:auto 0;  
  padding: 0;   
  flex-shrink: 0;
  z-index: 200;  
  flex-shrink: 0; 
  width: var(--navbar-brand);
}
.navbar-brand a{
  display: block;
  position: relative;
}
.navbar-brand img,
.navbar-brand svg{
  width: 100%; 
  height: auto;  
}  
   
.btn-menu{display: none;} 
.nav-btn-menu{display: none;}

.nav-general{
  gap:25px; 
  height: 100%;
  padding: 0;
  height: 40px;
  display: flex;
  justify-content: end;
}
.nav-general > li{
  display: flex;
  align-items: center;
}
.nav-general > li:last-child{
  display: none;
}
.nav-general > li > a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap:10px;
  height: 100%;
  font-weight: var(--fw-600); 
}
.nav-general > li .lang {
  display: flex;
  align-items: center;
  justify-content: center;
  gap:10px;
  color: var(--858585);
  font-size: 13px;
  font-weight: var(--fw-600);
}
.nav-general > li .lang .active{
  color: var(--color-primary);
}
.nav-general > li .lang .vr{
  opacity: 1;
  background-color: #fff;
}
.dropdown-menu{
  --bs-dropdown-border-radius:12px;
  --bs-dropdown-border-color:#FBFBFB;
  --bs-dropdown-bg:#FBFBFB;
  --bs-dropdown-font-size:var(--fs-15);
  --bs-dropdown-color:var(--bs-body-color);
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y:4px;
  --bs-dropdown-spacer:0;
  --bs-dropdown-min-width:0;
  --bs-dropdown-link-hover-bg:rgba(241, 241, 241, 0.3);
  --bs-dropdown-border-width:0;

  opacity: 0;
  display: block;
  pointer-events: none;
  transition: all 0.35s;
  top: 110%;
} 
.dropdown-menu > li > a{
  display: flex;
  gap:10px;
  padding:8px 15px;
  color: var(--bs-dropdown-color);
  align-items: center;
}
.dropdown-menu > li{
  border-bottom: 1px solid var(--bs-dropdown-border-color);
}
.dropdown-menu > li:last-child{
  border: 0;
}
.dropdown-menu > li > a:hover{
  background-color: var(--bs-dropdown-link-hover-bg);
}
 
.pc li.dropdown:hover .dropdown-menu,
.dropdown-menu.show{
  top: 100%;
  pointer-events: all;
  opacity: 1;
}
 
.avatar{
  --avatar-size:40px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  border-radius: 50%;
  object-position: center;
  object-fit: cover;
  flex-shrink: 0;
} 

.form-group .icon-search{
  background-image: url(../img/icons/icon-search.svg);
}

.btn-icon,.navbar-slider{display: none;}
.header .form-group.search {
  width:210px;
}
.header .form-group.search .form-control{
  --input-h:40px;
  border-radius: 12px;
  color: #fff;
  font-size: 12px;
  border: 0;

  backdrop-filter: blur(12px);
  background-color: rgba(246, 246, 246, 0.2);
}
.header .form-group.search .form-control:focus{
  box-shadow: none !important;
}
.header .form-group .group .icons.left  {
  left: 15px;
}
.header .form-group .group .icons.left + .form-control{
  padding-left:40px;
}
.header .form-control::placeholder {   
  opacity:1;  
  color: #fff; 
}

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

.header .form-control::-ms-input-placeholder {   
  opacity:1;  
  color: #fff;
}
  
@media (min-width:1025px) {
  .header-group{
    display: flex;
    flex-direction: column;
    margin-top:auto;
  }

  .nav-main .desktop{display: flex;}
  .nav-main .device{display: none !important;}
  .nav-main{
    gap:0;
    margin-left: auto; 

    --padding-x:20px; 
  }
  .nav-main > li > a {
    display: flex;
    gap:5px;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0 var(--padding-x);
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-title);
    height:var(--nav-main-height);
  
  }
  .nav-main > li.dropdown > a:after {
    content: '';
    width: 24px;
    height: 24px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(../img/icons/icon-arrow.svg);
  }
  .nav-main > li > a:before {
    content: '';
    position: absolute;
    left: 0;
    right: 0%;
    bottom: 0;
    height: 3px;
    background-color: var(--color-primary);
    opacity: 0;
  }
  .nav-main > li.active > a:before{
    opacity: 1;
  }
  .nav-main > li:last-child{
    margin-right: -5px;
  }
  .nav-main > li:last-child > a{
    padding-right: 0;
  }
  .nav-main .dropdown-menu{
    --bs-dropdown-bg:#000;
    --bs-dropdown-color:#fff;
    --bs-dropdown-font-size:16px;
    --bs-dropdown-border-radius:0;
    --bs-dropdown-min-width:305px;
    --bs-dropdown-padding-y:20px; 
    display: flex;
    flex-direction: column;
    gap:5px;
    margin-top: 0; 
  }
  .nav-main .dropdown-menu > li{border: 0;}
  .nav-main .dropdown-menu > li > a{
    padding: 10px 25px;
    white-space:nowrap;
  }
  .nav-main .dropdown-menu > li:hover > a{
    background-color: var(--color-primary);
  }

  .nav-main > li:last-child .dropdown-menu{
    left: auto;
    right: 0;
  }

  .scrolling .nav-main > li > a{height: 50px;}
  .scrolling .navbar-brand{width: var(--navbar-brand-scrolling);}

  .form-group.search .icons[data-bs-toggle]{display: none;}

  .form-group.search .dropdown-menu{
    pointer-events: all;
    opacity: 1;
    position: relative;
    left: auto;
    top: auto;
    background-color: transparent;
  }
  .nav-main .dropdown-menu > li.nav-title{display: none;}
}
 
/*==================================================
   Mobile
==================================================*/  
@media (max-width:1024px) {
  .nav-main .desktop{display: none !important;}
  .header .nav-main{display: none;}
  .nav-general > li:last-child{display: flex;}
  .nav-genaral > li.nav-search, 
  .form-group.search{
    position: static;
  }
  .header .form-group.search{
    width: auto;
    height: 100%;
  }
  .header .form-group .icon-search{height: 100%;}
  .form-group.search .dropdown-menu{
    width: 100% !important;
    top: var(--header-height);
    left: 0;
    right: auto;
    padding:  15px 15px;
    background-color:#fff;
    box-shadow: 0px 12px 30px rgba(114, 114, 114, 0.05);
    z-index: 1000;
    border-radius: 0;
    background-color: #000; 
  }

  .header-trans  .form-group.search .dropdown-menu{background-color:rgba(0, 0, 0, 0.2)}
  .scrolling .header-trans  .form-group.search .dropdown-menu{background-color:rgba(0, 0, 0,1)}
  .form-group.search .dropdown-menu .icons{
    display: none;
  }

  .header .form-group .group .icons.left + .form-control{
    padding-left: 15px;
  }

  .btn.btn-icon{
    padding: 0 !important;
    border:0 !important;   
    z-index: 1060; 
    border-radius: 0;
    position: relative; 
    margin: auto 0; 
    width: auto; 
    height: auto;
    background-color:transparent !important;
    overflow: visible;  
    --bs-btn-bg:transparent;
    box-shadow: none;
    opacity: 1 !important;
    display: block;
  }
 
  .btn-icon:before{display: none;}
  .btn-icon .group{
    display: block;
    position: relative;
    width:25px;
    height:17px;
    margin: 0 auto 0
  }
  .btn-icon .group span{
    height: 2px;

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

  .btn-icon .group span:nth-child(1) {
      top: 0;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(2) {
      top: 7px; 
      -webkit-transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.175s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }

  .btn-icon .group span:nth-child(3) {
      top: 14px;
      -webkit-transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98);
      transition: transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0s cubic-bezier(0.72, 0.01, 0.28, 0.98)
  }
  .nav-opened .btn-icon .group span:nth-child(1) {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(45deg) translate3d(5px, 5px, 0);
    transform: rotate(45deg) translate3d(5px, 5px, 0)
  }

  .nav-opened .btn-icon .group span:nth-child(2) {
    -webkit-transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.21s 0.25s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: scaleX(0) translateZ(0);
    transform: scaleX(0) translateZ(0)
  }

  .nav-opened .btn-icon .group span:nth-child(3)  {
    -webkit-transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    transition: transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98), -webkit-transform 0.33s 0.45s cubic-bezier(0.72, 0.01, 0.28, 0.98);
    -webkit-transform: rotate(-45deg) translate3d(5px, -5px, 0);
    transform: rotate(-45deg) translate3d(5px, -5px, 0)
  }

  /**/

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

      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 1095;
      width: var(--navbar-width);
      overflow: hidden;
      padding: 0; 
      display:block;
      background-color:var(--0A0A0A);
      align-items: normal;
      -ms-flex-align: normal;
      -webkit-transform: translate(100%, 0);
    -ms-transform: translate(100%, 0);
    transform: translate(100%, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
      transition: -webkit-transform 0.6s ease;
      transition: transform 0.6s ease;
      transition: transform 0.6s ease, -webkit-transform 0.6s ease;
  }
  .nav-opened .navbar-slider {
      -webkit-transform: translate(0, 0);
      -ms-transform: translate(0, 0);
      transform: translate(0, 0);
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
  }
  .nav-opened .header {
      pointer-events: none;
  }

  .navbar-inner{
    position: relative;
    overflow: hidden;
    height: 100%;
  }
 
  .nav-main {
      position: absolute;
      top: 0;
      bottom: 0;
      display: block;
      height: 100%; 
      right: calc(-1 * var(--navbar-width));
      width: calc(var(--navbar-width) * 2);
      overflow: hidden;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch; 
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      transition: all 0.4s;
  }
  .nav-main li {
      display: block;
      position: static;
  }
  .nav-main li {
      padding-left: 30px !important;
  }
  .nav-main li a {
      padding: 18px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      font-weight: 400;
      font-size:18px;
      height: auto!important;
      line-height: normal !important; 
      display: block;
      position: relative;
      color: #fff;
      outline: 0 !important;
  } 
  .nav-main > li > a {
      /* width: var(--navbar-width-column);; */
      position: relative;
  }
  .nav-main > li.dropdown > a:after {
      content: "";
      position: absolute;
      top: 25px;
      left:calc(var(--navbar-width) - 60px);
      content: "";
      width: 8px;
      height: 8px;
      opacity: 0.75;
      vertical-align: top; 
      border-top: 1px solid #fff;
      border-left: 1px solid #fff;
      -webkit-transform: rotate(135deg);
      transform: rotate(135deg);
  }

   .nav-main > li > a .arrow{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50px;
    z-index: 1; 
   }
  .nav-main .dropdown-menu {
      position: absolute;
      top: 0 !important;
      right: 0;
      bottom: 0;
      left: auto !important;
      width: var(--navbar-width);
      margin: 0;
      padding: 0;
      transition: none;
      border: 0;
      background-color:var(--0A0A0A);
      
  } 
  .nav-main li.nav-title {
      padding-left: 0;
      position: relative;
      cursor: pointer;
      display: flex;

      opacity: 0.8; 
      padding: 13px 0 13px 40px;
      margin-bottom: 0;
      padding-left: 40px !important;
      color:rgba(255,255,255,0.5); 
      font-size: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important
  } 
  .nav-main li.nav-title > span{
    display: block;
    position: relative;
    padding: 0 0 0 30px;
  }
  .nav-main li.nav-title:after{
    display: none;
  }
  .nav-main li.nav-title .arrow{
      display: inline-block;
      position: absolute;
      vertical-align: top;
      left: 20px;
      top: 50%;
      margin-top: -4px;
  }
  .nav-main li.nav-title .arrow:before{
      content: "";
      width: 8px;
      height: 8px;
      vertical-align: top;
      position: absolute;
      top: 0;
      left: 0;
      border-top: 1px solid rgba(255, 255, 255, 0.8);
      border-left: 1px solid rgba(255, 255, 255, 0.8);
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg);
  }  
  .nav-main .dropdown.showing .dropdown-menu {
      display: block;
      opacity: 1;
  }
  .nav-main .dropdown .nav{
    flex-direction: column;
  }
  .level-1-opened .nav-main {
      right: 0;
  }

  .nav-main .dropdown-menu > li{border: 0;}
}
 
@media (max-width:575px) {
  .navbar-slider {
    --navbar-width:calc(100vw - 50px);
  }
  .nav-main li {
    padding-left:20px !important;
  }
  .nav-main li a{font-size: 16px;}
  .nav-main > li.dropdown > a:after{
    left: calc(var(--navbar-width) - 45px);
  }
}

/*==================================================
   Section
==================================================*/  
 
.page{
  display: flex;
  position: relative;
  overflow: hidden;   
  padding-top: var(--header-height);
  flex-direction: column;
  min-height: 100%;
} 
.page-light{
  background-color: #F5F5F5;
}
.preload{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color:#fff;
  z-index: 1090; 
  display:flex;   
} 


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

  pointer-events: none;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.background.opacity-30:before,
.background.opacity-40:before,
.background.opacity-50:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
}
.background.opacity-40:before{background-color: rgba(0, 0, 0, 0.4);}
.background.opacity-50:before{background-color: rgba(0, 0, 0, 0.5);}
.background.opacity-50{opacity: 1 !important;}
.background.fixed{
  background-attachment: fixed;
}
.device .background.parallaxie,
.device .background.fixed{
  background-attachment: scroll !important;
  background-position: center center !important;
}

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

.section-title{  
  position: relative;       
}   
   
.hgroup{
  display: block;
  padding:0;
}
.hgroup.center{
  justify-content: center;
}
.hgroup .group{
  position: relative;
}
.hgroup .line-animate{
  height: 5px;
  width: 68px;
  margin-top: 15px;
  margin-bottom: 15px;
  --line-color:var(--color-primary);
}
 
.card{ 
  position: relative;
}
.card-photo{
  position: relative;
  overflow: hidden;
  display: block;  
  border-radius: var(--card-border-radius);
}

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

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

.section-body{
  flex: 1 1 auto;
  padding-top:var(--header-height);
}
.section-breadcrumb{
  padding-top:var(--header-height);
}
.textrow{
  position: relative;
  overflow: hidden;
  display: block;
}
.textrow > span{
  display: inline-block;
}

  
.link-effect{
  position: relative;
  display: inline-block; 
  color: var(--color-primary);
}
.link-effect:before{
  content: '';
  position: absolute;
  bottom:0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary);
  transform: scaleX(0) rotate(0.001deg);
  transform-origin: right;
  transition: transform var(--animation-primary), background-color var(--animation-navigation-fade);
}

 .pc .link-effect:hover:before{
  transform: scaleX(1) rotate(0.001deg);
  transform-origin: left;  
}
.link-effect.link-white{color: #fff;}
.link-effect.link-white:before{ background-color:#fff;} 
.pc .link-effect.link-white:hover{opacity: 0.8;}

@media (max-width:670px) {
  .hgroup .line-animate{
    height: 4px;
    width: 50px;
  }
}

/*==================================================
   Home - Banner
==================================================*/ 
.pt-body{padding-top: var(--header-height) !important;}
.line-animate{ 
  height:1px;
  position: relative;
  width:39px;

  --line-color:var(--0A0A0A);
}
.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%;}
 
 
.section-banner{
  flex: 1 1 auto;
  height: 100vh; 
  display: flex;
}

.section-banner .container-fluid.d-flex{
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
}

.section-banner.home .background:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height:28%;
  background: linear-gradient(0deg, #FFFFFF 10.81%, rgba(255, 255, 255, 0) 100%);
 
}

.banner-caption{
  color: #fff;
  text-align: center;
  max-width: 1450px;
  padding-top: var(--header-height);
}
.banner-caption .line-animate{
  --line-color:rgba(255,255,255,0.5);
  width: 100%;
  max-width: 585px;

  margin-top: 35px;
  margin-bottom: 35px;
}
.banner-caption h5{
  font-weight: var(--fw-500);
  color: inherit;
}
.banner-caption h1{
  position: relative;
  color: inherit;
}

.banner-caption .btn{
  --btn-h:40px;
  font-size: 18px;
  margin: 0 auto 20px;
  pointer-events: none;
  --bs-btn-bg:rgba(255, 255, 255, 0.1);
}
.banner-caption .icon-angle{
  --icon-size:28px;
  background-image: url(../img/icons/icon-angle.svg); 
  position: relative;
}
.banner-caption .icon-angle.left{
  left:0px;
  top: -40px;
  transform: rotate(-180deg);
}
.banner-caption .icon-angle.right{
  right: -10px;
  bottom: -20px;
}

.page-scroll-down{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10%;
  display: flex;
  font-size: 12px;
  flex-direction: column;
  color: #fff;
  text-align: center;
  z-index: 100;
}

.page-scroll-down .btn{
  --bs-btn-bg:transparent;
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-color: #fff;
  font-size: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-shrink: 0;
  gap:10px;
  --btn-h:80px;
  margin: auto;
}
.page-scroll-down .btn p{
  margin-bottom: 0;
  line-height: 1;
}
.page-scroll-down .btn img {
  width: 48px;
  height: auto;
}
@media (max-width:1700px) {
  .banner-caption h1{
    font-size: 55px;
  }
}
@media (max-width:1440px) {
  .banner-caption h1{
    font-size:45px;
  }

  .banner-caption .icon-angle{--icon-size: 22px;}
  .banner-caption .icon-angle.left {
    left: 3px;
    top: -27px;
  }
  .banner-caption h5{font-size: 20px;}
  .banner-caption .line-animate{
    max-width:450px;
    margin-top: 25px;
    margin-bottom:25px;
  }
}

@media (max-width:1199px) {
  .banner-caption .line-animate { 
    margin-top: 35px;
    margin-bottom: 35px;
  }
  .banner-caption h1{
    font-size:34px;
  }

  .home .banner-caption h1 br{display: none;}
  .banner-caption .line-animate {max-width:250px;}
  .banner-caption h5{font-size: 18px;}

  .page-scroll-down .btn img {
    width: 40px;
  }
}
 
@media (max-width:575px) {
  .banner-caption h1{
    font-size:24px;
  }
  .banner-caption .line-animate {
    max-width:50%;
    margin-top: 25px;
    margin-bottom: 20px;
  }
  .banner-caption .icon-angle {
    --icon-size:16px;
  }
  .banner-caption .icon-angle.left{
    top: -19px;
  }
  .banner-caption .icon-angle.right {
    right: -5px;
    bottom: -13px;
  }
  .banner-caption h5 {
    font-size: 14px;
  }

  .banner-caption .btn{
    font-size: 14px;
    --btn-h:36px
  }
}
/*==================================================
   Home - Intro
==================================================*/ 
.text-row{
  position: relative;
  overflow: hidden;
}
.section{
  --padding-y:80px;
  --padding-x:0;
  padding: var(--padding-y) var(--padding-x);
}
.section-intro .background{
  background-image: url(../img/thumb/bg-intro-blur.jpg);
  background-size: 975px;
}
.section-intro .article{
  width: 100%;
  max-width: 1080px;
  position: relative;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-24);
  color: var(--0A0A0A);
}
.section-intro .article p{
  margin-bottom: 35px;
}

.icon-quotes{
  --icon-size:60px;
  background-image: url(../img/icons/icon-quotes.svg);
}
.article .icon-quotes{
  position: absolute;
}
.article .icon-quotes.left{
  left: -60px;
  top: -20px;
}
.article .icon-quotes.right{
  right: -60px;
  bottom: -20px;
  transform: rotate(-180deg);
}

.section-intro .icons.logo{
  --icon-size:64px;
  margin:25px auto 70px;
  display: block;
}

@media (max-width:1440px) {
  .section{
    --padding-y:60px;
  }
}

@media (max-width:1199px) {
  .icon-quotes{
    --icon-size:45px;
  }
  .section-intro .icons.logo {
    --icon-size: 64px;
    margin: 15px auto 50px;
  }
  .section-intro .article p{
    margin-bottom: 25px;
  }
  .section-intro {
    --padding-x:50px;
  }
}
@media (max-width:991.98px) {
  
}

@media (max-width:670px) {
  .section{--padding-y: 30px;}
  .icon-quotes{
    --icon-size:30px;
  }
  .section-intro {
    --padding-x:20px;
  }
  .article .icon-quotes.left{
    left: -30px;
    top: -10px;
  }
  .article .icon-quotes.right{
    right: -20px;
    bottom:0px;
  }

  .section-intro .article{
    font-size: 15px;
  }
  .section-intro .article p{
    margin-bottom:15px;
  }
  .section-intro .icons.logo {
    --icon-size: 50px;
    margin: 0 auto 30px;
  }
}

/*==================================================
   Home - About
==================================================*/ 
.article{
  --text-gap:30px;
}
.article p{
  margin-bottom: var(--text-gap);
}
 
.swiper-card.single .swiper-slide{
  width: 100%;
  padding: 0 5px;
}

.swiper-pagination{
  position: relative;
  bottom: auto;
  justify-content: center;
  padding-top: 25px;
}

/**/


.swiper-number-3.swipe-show-1 + .swiper-pagination{display: none !important;}
.swiper-number-3.swipe-show-1 ~ .swiper-button{display: none !important;}
.swiper-number-3.swipe-show-1 .swiper-slide{display: none;}

.swipe-show-1.single + .swiper-pagination{display: none !important;}
.swipe-show-1.single ~ .swiper-button{display: none !important;}
.swipe-show-1.single .swiper-slide{display: none;}
.swipe-show-1.single .swiper-slide-active{display:block}

@media (max-width:440px){
  .swiper-number-3.swipe-show-1 .swiper-slide-duplicate-prev{display: block;}
}

@media (min-width:441px){
  .swiper-number-3.swipe-show-2 .swiper-wrapper{flex-direction: row-reverse;justify-content: flex-end;}

  .swiper-number-3.swipe-show-2 + .swiper-pagination{display: none !important;}
  .swiper-number-3.swipe-show-2 ~ .swiper-button{display: none !important;}
  .swiper-number-3.swipe-show-2 .swiper-slide{display: none;}

  .swiper-number-3.swipe-show-2 .swiper-slide-next,
  .swiper-number-3.swipe-show-2 .swiper-slide-duplicate-active{display: block;}
  
  .swiper-number-3.swipe-show-1 .swiper-slide-duplicate-active{display: block;}
 
}
@media (min-width:441px) and (max-width:900px){
  .swiper-number-3:not(.no-sliding){overflow: visible;}
}
@media (min-width:901px){
  .swiper-number-3.swipe-show-3 + .swiper-pagination{display: none !important;}
  .swiper-number-3.swipe-show-3 ~ .swiper-button{display: none !important;}
  .swiper-number-3.swipe-show-3 .swiper-slide{display: none;}
  .swiper-number-3.swipe-show-3 .swiper-slide-active,
  .swiper-number-3.swipe-show-3 .swiper-slide-next,
  .swiper-number-3.swipe-show-3 .swiper-slide-duplicate-prev{display: block;}

  .swiper-number-3:not(.no-sliding) .swiper-slide-prev > div,
  .swiper-number-3:not(.no-sliding) .swiper-slide-duplicate-active> div,
  .swiper-number-3:not(.no-sliding) .swiper-slide-duplicate-next> div,
  .swiper-number-3:not(.no-sliding) .swiper-slide-duplicate-prev > div{ 
      box-shadow: none ;
      transition: all 0.2s;    transition-delay: 0.5s;
  }
}
/**/

/*==================================================
   Home - About
==================================================*/ 
 
.section-about{z-index: 10;}

/* .bg-oval-bottom{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
} */
.bg-oval-bottom:after,
.bg-oval-bottom:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height:200px;
  bottom: -100px; 
}
.bg-oval-bottom:before{
  background-color: #FBFBFB;
}
.bg-oval-bottom:after{
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url(../img/thumb/vector-oval.svg);
  background-position: bottom center;
  z-index: 10;
}
.section-about {padding-bottom: 0 !important;}

.section-about .container-fluid{
  position: relative;
  z-index: 100;
}
.section-about .title-img{
  width: 555px;
  display: block;
  margin: 0 auto;
}
.article-about{
  padding-top: 100px;
}
.section-about{
  padding-right: 70px; 
}

.article-about .left{width: 55%;}
.article-about .right{ width: 45%;}
.article-about .right .swiper-overflow{margin-left: 15px;}
.article-about .article{text-align: justify;  }

.article-about .hgroup{margin-bottom: 30px; text-align: left;}
.article-about .icons.highlight{
  --icon-size:60px;
}
.article-about .line-animate{
  width:68px;
  height: 5px;
  margin:  5px 0;
  --line-color:var(--color-primary)
}

.signature{
  display: flex;
  text-align: center;
  font-size: 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  padding-top: 15px;
}
.signature img{
  height:87px;
  width: auto;
}
@media (min-width:1751px){
  .article-about .article{
    --text-gap:40px;
  }
  .article-about .article{ padding-right: 15px; }
}

@media (max-width:1550px){
  .section-about .title-img{width: 480px;}
  .article-about{padding-top:80px;}

  .article-about .icons.highlight{--icon-size:50px;}

  .bg-oval-bottom:after, 
  .bg-oval-bottom:before{
    height:150px;
    bottom: -80px;
  }
}
@media (max-width:1366px){
  .article-about .icons.highlight{--icon-size:40px;}
}

@media (max-width:1280px){
  .article-about .article{
    --text-gap:20px;
    font-size: 16px;
  }

  .article-about .line-animate{width: 50px;}
}

@media (max-width:1199px){
  .section-about{
    padding-right: 0;
  }
  .article-about .left,
  .article-about .right{ width: 100%;}

  .article-about {
    flex-direction:column-reverse;
  }

  .section-about .swiper-overflow{
    width: 100%;
    max-width: 550px;
    margin: 0 auto 40px !important;
    display: block;
  }
}

@media (max-width:1024px){
  .section-about .title-img{width:380px;}
  .article-about {padding-top: 50px;}
}

@media (max-width:991.98px){
  
  .bg-oval-bottom:after{
    background-size: 1024px;
  }
}


@media (max-width:575px){
  .section-about .title-img{width:100%; max-width: 280px;}
  .article-about {padding-top:30px;}

  .article-about .article{font-size: 15px;}
  .article-about .right .swiper-overflow{margin-bottom: 25px !important;}

  .article-about .icons.highlight{--icon-size:25px;}
  .signature{font-size: 13px;}
  .signature img{
    height: 60px;
  }

  .bg-oval-bottom:after, 
  .bg-oval-bottom:before{
    height:110px;
    bottom: -40px;
  }
}

/*==================================================
   Home - Core Values
==================================================*/ 
.hgroup .text{
  position: relative;
  z-index: 10;
}
.section-core-values{
  background-color:#FBFBFB;
  padding-top:180px; 
}
 
 
.section-core-values .hgroup{
  max-width: 1130px;
  margin: 0 auto;
  padding-bottom:60px;
}
.section-core-values .hgroup h3{
  position: relative;
}
.section-core-values .hgroup h6{
  color: var(--60697B);
  font-weight: var(--fw-400);
  margin-bottom: 15px;
}
.section-core-values .hgroup h6 .highlight{
  font-weight: var(--fw-700);
}
.hgroup p{
  font-size: var(--fs-18);
}
.bg{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: auto;
}
.section-core-values .hgroup .bg{ 
  background-size: auto;
  background-image: url(../img/thumb/title-care-value-bg.svg);
  margin: 10px 0 0 0;
}
.core-values-lists > div{
  height: 340px;
}
.card-core-values{
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: center;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;

  --circle-size:105px;
  --circle-size-hover:180px;
  --circle-color:#E9F9F1;
  --card-cartoon-size:180px;
  --card-cartoon-size-hover:250px;
}
.card-core-values h3{
  font-size: var(--fs-20);
  color: var(--title-color);
  margin-bottom: 5px;
  margin-top: 0;
  transition: all 0.4s;
}
.card-core-values p{
  font-size: 15px;
}

.card-core-values .card-cartoon {
  position: relative;
  height: var(--card-cartoon-size);
  display: flex;
  transition: all 0.6s; 
  height: 180px;
}
.card-core-values .card-cartoon .circle{
  width: var(--circle-size);
  height: var(--circle-size);
  border-radius: 50%;
  margin: 30px auto;
  background-color: var(--circle-color);
  transition: all 0.6s;
 
}

.card-core-values .cartoon-group{
  /* width: 65%; */
  width: 160px;
  
  margin: 0 auto; 
  top: -20px;
  left:50%; 
  margin-left: -80px;
  position: absolute;
  z-index: 1;
  transition: all 0.6s;
}
.card-core-values .cartoon-group img.cartoon-1,
.card-core-values .cartoon-group img.cartoon-2{
  width: 100%;
  transition: all 0.6s;
  margin-top: 0;
}
.card-core-values .cartoon-group img.cartoon-1{ 
  z-index: 0;
  position: relative;
}
.card-core-values .cartoon-group img.cartoon-2{ 
  z-index: 3;

  position: absolute;
  left: 0;
  top: 0;
}
.card-core-values .cartoon-group img.text{
  position: absolute;
  z-index: 2;

  transition: all 0.6s; 
  transition-delay: 0.1s;
  opacity:0;
 
  margin-left: 25%;
  
} 
.card-core-values .cartoon-group img.star,
.card-core-values .cartoon-group img.blink{
  position: absolute;
  z-index: 2;
  height: auto;
  opacity: 0;
  transition: all 0.4s; 
  transition-delay: 0.1s;
}
.card-core-values .cartoon-group img.star{width: 16px;}
.card-core-values .cartoon-group img.blink{width: 27px;}
.card-core-values.c-01 .cartoon-group img.text{
  top: 2%;
  width: 133%;
  left: -22.2%;
}
.card-core-values.c-01 .cartoon-group img.star{
  top: 81%;
  left: 16%;
}
.card-core-values.c-01 .cartoon-group img.blink{
  top: 43%;
  left: 77%;
}

.card-core-values:hover .card-cartoon{
  height: var(--card-cartoon-size-hover);
}
.card-core-values:hover .card-cartoon .circle{
  width: var(--circle-size-hover);
  height: var(--circle-size-hover);
}
 
.card-core-values:hover .cartoon-group img.cartoon-1,
.card-core-values:hover .cartoon-group img.cartoon-2{
  transform: scale(1.78);
  margin-top: 28px;
}

.card-core-values:hover .cartoon-group img.text{
  opacity: 1; 
  margin-left: 0;
}
.card-core-values:hover .cartoon-group img.star,
.card-core-values:hover .cartoon-group img.blink{opacity: 1;}
.card-core-values:hover h3{margin-top: 10px;}

/*c-02*/

.card-core-values.c-02{
  --circle-color:#FFECEC;
  --circle-size-hover: 200px;
}
.card-core-values.c-02 .cartoon-group img.star{
  top: 42%;
  left: 7%;
}
.card-core-values.c-02 .cartoon-group img.blink{
  top: 73%;
  left: 76%;
  transform: rotate(70deg);
}
.card-core-values.c-02 .cartoon-group{
 
}
.card-core-values.c-02 .cartoon-group img.text{
  width: 109%;
  left: -5%;
  top:0%;
}
.card-core-values.c-02:hover .cartoon-group img.cartoon-1,
.card-core-values.c-02:hover .cartoon-group img.cartoon-2{
  transform: scale(1.49);
  margin-top: 35%;
}

/*c-03*/
.card-core-values.c-03{
  --circle-color:#FFD5C1;
  --circle-size-hover: 200px;
}
 
.card-core-values.c-03:hover .cartoon-group img.cartoon-1,
.card-core-values.c-03:hover .cartoon-group img.cartoon-2{
  transform: scale(1.38);
  margin-top: 36%;
}
.card-core-values.c-03 .cartoon-group img.text{
  width:152%;
  left: -21%;
  top:3%;
}
.card-core-values.c-03 .cartoon-group img.star{
  top: 80%;
  left: -16%;
}
.card-core-values.c-03 .cartoon-group img.blink{
  top: 43%;
  left: 96%; 
}
/*c-04*/
.card-core-values.c-04{
  --circle-color:#D3DDFF;
  --circle-size-hover: 160px;
}
 
.card-core-values.c-04 .cartoon-group img.cartoon-1{z-index: 1;}
.card-core-values.c-04:hover .cartoon-group img.cartoon-1{
  transform: scale(1.6);
  margin-top: 25%;
  
}
.card-core-values.c-04 .cartoon-group img.star{
  top: 10%;
  left: 29%;
}
.card-core-values.c-04 .cartoon-group img.blink{
  top: auto;
  left: 72%; 
  bottom: 0;
  width: 24px;
}
.card-core-values.c-04 .cartoon-group img.text{
  width:93%;
  left: 16%;
  top:43%;
  z-index: 0;
}
/*c-05*/
.card-core-values.c-05{
  --circle-color:#FDF1CB;
  --circle-size-hover: 160px;
  --circle-size: 115px;
}
 
.card-core-values.c-05 .cartoon-group{ 
  top: -4%;
}
.card-core-values.c-05:hover .card-cartoon{margin-bottom: 0;}
.card-core-values.c-05:hover .cartoon-group{margin-left: -90px;}
.card-core-values.c-05:hover .card-cartoon .circle{margin-top: 40px;}
.card-core-values.c-05:hover .cartoon-group img.cartoon-1,
.card-core-values.c-05:hover .cartoon-group img.cartoon-2{
  transform: scale(1.4);
  margin-top:29%; 
} 
.card-core-values.c-05 .cartoon-group img.text{
  width:150%;
  left: -16%;
  top:-2%;
  z-index: 0;
}
.card-core-values.c-05 .cartoon-group img.star{
  top: -5%;
  right: -25%;
}
.card-core-values.c-05 .cartoon-group img.blink{
  top: auto;
  left:0; 
  bottom: 3%; 
  transform: rotate(-170deg);

}

@media (max-width:1280px){
  .core-values-lists{
    justify-content: center; 
  }
  .core-values-lists > div{
    flex: unset;
    width: 33.33%;
    height: 320px;
  }
  .card-core-values .card-cartoon{height: 170px;}

  .card-core-values p{font-size: 14px;}

  .section-core-values .hgroup .bg{background-size: 234px;}
}
@media (max-width:991.98px){
  .core-values-lists > div{ 
    width: 50%;
  }
  .section-core-values .hgroup .bg{background-size: 210px;}

  .card-core-values h3{font-size: 20px;}
}
@media (max-width:670px){
  .card-core-values p{font-size: 13px;}
  
  .card-core-values h3{font-size: 18px;}
  .section-core-values .hgroup .bg{background-size: 160px;}
}
@media (max-width:576px){
  .section-core-values{
    padding-top:90px;
  }
}

@media (max-width:500px){
  .core-values-lists > div{ 
    width: 100%;
    height: auto;
    margin-bottom: 30px;
  }

}

/*==================================================
   Home - Target Industries
==================================================*/ 

.vector-group > img{
  position: absolute;
  height: auto; 
}
.vector-group.industry .icon-1{
  width: 36px;
  top: -15px;
  left: -26px;
}
.vector-group.industry .icon-2{
  width: 39px;
  bottom: -5px;
  right: -31px;
}
.vector-group.industry .icon-3{
  width: 227px;
  left: 20%;
}
.vector-group.industry.top{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}
.vector-group.industry .icon-4{
  width: 205px;
  left: -120px;
  top: -150px;
}
.vector-group.industry .icon-5{
  width: 95px;
  left:30px;
  top: -80px;
}
.vector-group.industry .icon-6{
  width: 168px;
  right:25px;
  bottom: 0px;
}
.vector-group.industry .icon-7{
  width: 140px;
  right:-30px;
  bottom: 30px;
}
.section.bg-oval-top{padding-top: 20px; margin-top: 100px;}
.section.bg-oval-top .containe,
.section.bg-oval-top .container-fluid{position: relative; z-index: 100;}
.section-industry .hgroup .group{margin-bottom: 30px; margin-top: 10px;}

.bg-oval-top:after,
.bg-oval-top:before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height:200px;
  top: -100px; 
}
.bg-oval-top:before{
  background-color: #FBFBFB;
}
.bg-oval-top:after{
  background-repeat: no-repeat;
  background-size: auto;
  background-image: url(../img/thumb/vector-oval.svg);
  background-position: top center;
  z-index: 10;
}
.section-industry .container-fluid,
.section-industry .container{
  z-index: 100;
}

.card-about{
  display: flex;
}
.card-about .card-photo{
  width: 555px;
  flex-shrink: 0;
}
.card-about .card-body{
  display: flex;
  align-items: center;
  width: 555px;
  flex: unset;
}
.card-about h3{
  font-size: var(--fs-32);
  color: var(--title-color);
  display: flex;
  flex-direction: column;
}
.card-about h3 > span{
  margin-right: auto;
  padding: 0 20px; 
  position: relative;
}
.card-about h3 > span > span{
  position: relative;
  z-index: 100;
}
.card-about h3 > span:before{
  content: '';
  background-color: #FFECEC;
  border-radius: 55px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  transition: all 0.55s;
  z-index: 0;
  opacity: 0;
}
.card-about h3 > span:nth-child(1):before{transition-delay: 0.2s;}
.card-about h3 > span:nth-child(2):before{transition-delay: 0.3s;}
.card-about h3 > span:nth-child(3):before{transition-delay: 0.4s;}
.card-about:hover h3 > span:before{width: 100%; opacity: 1;}
.card-about:hover .photo{transform: scale(1.3);}

.card-about-lists{
  padding:60px 0;
  max-width: 1290px;
  margin: 0 auto;
}
.card-about-lists .card-about:nth-child(odd){
  flex-direction: row-reverse;
}
.card-about-lists .card-about:nth-child(odd) .card-body{margin-right: auto;}
.card-about-lists .card-about:nth-child(even) .card-body{margin-left: auto;}

.card-about.infos h3{margin-bottom: 10px;}
.card-about.infos p{font-size: var(--fs-20); text-align: justify;}

.card-about .info-label{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%; 
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(8, 8, 8, 0.370787) 33.85%, #151515 92.71%); 

  display: flex;
  padding: 25px 40px;
  align-items: flex-end;
}

.card-about .info-label h5{
  text-transform: uppercase;
  color: #fff; 
  font-weight: var(--fw-500);
}

.card-about .photo:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(31, 31, 31, 0.2);
}
@media (max-width:1550px){
  .card-about-lists{
    max-width: 1100px;
  }
  .card-about .card-photo,
  .card-about .card-body{
    width: 480px;
  }
    
  .vector-group.industry .icon-6{ 
    bottom: -40px;
  }
  .vector-group.industry .icon-7{ 
    bottom: -10px;
  }
}

@media (max-width:1440px){
  .section.bg-oval-top{padding-top: 0;}
  .bg-oval-top:after,
  .bg-oval-top:before{
    height:150px;
    top: -100px; 
  }

  .card-about .info-label h5{font-size: 20px;}
}

@media (max-width:1280px){
  .vector-group.industry .icon-3{width: 190px;}
  .vector-group.industry .icon-2{width: 34px;right: -27px;}
  .vector-group.industry .icon-1{width: 30px; top: -12px;left: -21px;}

  .vector-group.industry .icon-4{
    width: 175px;
    left: -90px;
    top: -140px;
  }
  .vector-group.industry .icon-5{
    width: 75px;
    left:30px;
    top: -50px;
  }

  .vector-group.industry .icon-6{
    width: 140px;
  }
  .vector-group.industry .icon-7{
    width: 110px;
  }

  .card-about-lists{
    padding-left: 30px;
    padding-right: 30px;
  }
  .card-about .card-photo{
    width:380px;
  }

  .card-about .card-body{
    width: 100%;
    flex: 1 1 auto;
  }
  .card-about-lists .card-about:nth-child(odd) .card-body{
    padding-right:50px;
  }
  .card-about-lists .card-about:nth-child(even) .card-body{
    padding-left:50px;
  }
  .card-about .info-label{padding-left: 30px; padding-right: 30px;}
  .card-about .info-label h5{font-size: 16px;}
}

@media (max-width:1024px){
  .bg-oval-top:after{
    background-size: 1024px;
  }

  .card-about-lists .card-about:nth-child(odd) .card-body{
    padding-right:30px;
  }
  .card-about-lists .card-about:nth-child(even) .card-body{
    padding-left:30px;
  }
}

@media (max-width:991.98px){
  .vector-group.industry .icon-3{width: 170px;}

  .card-about-lists{
    padding-left: 0;
    padding-right: 0;
  }
  .card-about .card-photo{
    width:320px;
  }
  .card-about h3{
    font-size: 20px;
  }

  .card-about.infos{
    margin-bottom: 40px;
  }

  .vector-group.industry .icon-6{
    width: 100px;
    bottom: 0;
  }
  .vector-group.industry .icon-7{
    width: 80px;
    right: -20px;
    bottom: 20px;
  }
}
@media (max-width:880px){
  .card-about h3{
    font-size: 18px;
  } 
}

@media (max-width:730px){
  .card-about-lists{
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    gap:30px
  }
  .card-about{
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
  }
  .card-about .card-photo{
    max-width: 320px;
    margin: 0 auto;
  }
  .card-about h3{
    justify-content: center;
  }
  .card-about h3 > span{
    margin-left: auto;
  }

  .card-about .card-body{
    padding:20px 0 !important;
  }
  .card-about .card-photo{width: 100%;}

  .card-about.infos{max-width: 100%; margin-bottom: 0;}
  .card-about.infos p{margin-bottom: 0;}
  .card-about .group{width: 100%;}

  .card-about .info-label{display: none;}
}
@media (max-width:670px){
  .vector-group.industry .icon-3{width: 120px;}
  .vector-group.industry .icon-2{width: 26px;right:-21px;}
  .vector-group.industry .icon-1{width: 22px;top: -8px;left: -15px;}

  .vector-group.industry .icon-4{
    width: 115px;
    left: -56px;
    top: -140px;
  }
  .vector-group.industry .icon-5{
    width: 55px;
    left:30px;
    top: -90px;
  }

  .card-about-lists{
    padding: 30px 0; 
    gap:20px
  }

  .card-about h3 > span{
    padding: 0 15px;
  }
}

@media (max-width:575px){
  .section.bg-oval-top{
    margin-top: 50px;
  }
  .bg-oval-top:after, 
  .bg-oval-top:before {
    height: 100px;
    top: -50px;
  } 

  .vector-group.industry .icon-6{
    width: 80px; 
    right: 20px;
  }
  .vector-group.industry .icon-7{
    width:45px;
    right: -10px;
    bottom: 20px;
  }
}

/*==================================================
   Home - Why Khon Kaen
==================================================*/ 

.section-khonkaen .container{z-index: 100; padding-top: 100px;}
.hgroup.khonkaen{
  padding: 20px 0;
  margin-top:40px;
}
.hgroup.khonkaen .bg{
  background-image: url(../img/thumb/vector/brush-01.svg);
  background-size: 430px;
  z-index: -1;
  margin-top: -10px;
}
.hgroup.khonkaen .line-animate{
  margin-top: 5px;
}

.card-infos-lists{
  display: flex;
  flex-direction: column;
  gap:0;
  width: 100%;
  max-width: 1435px;
  margin:0 auto;
  padding-top: 40px;
}
.card-infos{
  display: flex;
}
.card-infos .card-photo{
  width:555px;
  flex-shrink: 0;
}
.card-infos h3{
 font-size: var(--fs-32);
 margin-bottom: 10px;
 text-align: left;
}
.card-infos p{
  margin: 0;
  font-size:var(--fs-20);
}
.card-infos .card-body{
  display: flex; 
  align-items: center;
}
.card-infos .card-body .group{
  max-width: 580px;
  text-align: justify;
 
}
.card-infos:hover .photo{transform: scale(1.15);}
.card-infos:nth-child(odd) .card-body .group{ margin-left:80px;}
.card-infos:nth-child(even){flex-direction: row-reverse;}
.card-infos:nth-child(even) .card-body .group{margin-left: auto; margin-right: 80px;}
@media (max-width: 1550px) {
  .card-infos .card-photo {
    width: 480px;
  }
  .card-infos-lists{
    padding-left: 40px;
    padding-right: 40px;
  }

  .card-infos:nth-child(odd) .card-body .group{margin-left: 60px;}
  .card-infos:nth-child(even) .card-body .group{ margin-right: 60px;}
}
@media (max-width: 1280px) {
  .section-khonkaen .container{padding-top: 50px;}
  .card-infos .card-photo {
    width: 380px;
  }
  .card-infos-lists{
    padding-left: 0;
    padding-right: 0;
  }

  .card-infos .card-body .group{
    max-width:480px;
  }
  .card-infos:nth-child(odd) .card-body .group{margin-left: 40px;}
  .card-infos:nth-child(even) .card-body .group{ margin-right: 40px;}

  .hgroup.khonkaen .bg{background-size: 380px;}
}
@media (max-width: 991.98px) {
  .section-khonkaen .container{padding-top: 0;}
  .card-infos .card-photo {
    width: 320px;
  }
  .card-infos:nth-child(odd) .card-body .group{margin-left: 25px;}
  .card-infos:nth-child(even) .card-body .group{ margin-right: 25px;}
  .card-infos p{
    font-size:15px;
  }
  .card-infos h3{font-size: 20px;}

  .hgroup.khonkaen .bg{background-size:300px;}
}
@media (max-width:730px) {
  .card-infos-lists{
    gap:20px
  }
  .card-infos {
    flex-direction: column !important;
    
  }
  .card-infos .card-photo{
    max-width: 380px;
    margin: 0 auto;
  }

  .card-infos .card-body{
    padding: 20px 0 !important;
    text-align: center;
  }
  .card-infos .card-body .group{
    margin: 0 !important;
    text-align: center;
    width: 100%;
    max-width: 100%;
  }
  .card-infos h3{text-align: center;}
}
@media (max-width:670px) {
  .card-infos h3{font-size: 18px; margin-bottom: 5px;}

  .hgroup.khonkaen .bg{background-size:230px;}
  .card-infos-lists{padding-top: 15px;}
}


/*==================================================
   Home - Sustainable by Design
==================================================*/ 
.section-design{
  background-color:#FBFBFB;
}
 
.hgroup.design .group{
  margin:110px auto 50px;
}

.vector-group.design .icon-1{
  left: -23px;
  top: -18px;
  width: 40px;
}
.vector-group.design .icon-2{
  width: 468px;
  left: -10px;
  bottom: -20px;
}

.hgroup.design p{
  margin: 0 auto;
  max-width: 760px;
}

@media (min-width:1551px) {
  .hgroup.design p{
    font-size: var(--fs-20); 
    max-width: 840px;
  }
}

@media (max-width:1550px) {
  .vector-group.design .icon-2 {
    width: 451px;
  }
}
@media (max-width:1280px) {
  .vector-group.design .icon-2 {
    width: 404px;
    bottom: -15px;
  }
  .vector-group.design .icon-1 {
    left: -18px;
    top: -14px;
    width: 34px;
  }
}
@media (max-width:991.98px) {
  .vector-group.design .icon-2 {
    width: 362px;
  }
  .hgroup.design .group {
    margin: 80px auto 35px;
  }
}
@media (max-width:670px) {
  .vector-group.design .icon-1{
    width: 28px;
  }
  .vector-group.design .icon-2 {
    width: 322px;
  }
  .hgroup.design .group {
    margin: 110px auto 35px;
  }
}

@media (max-width:670px) {
  .hgroup.design .group {
    margin: 70px auto 35px;
  }
  .vector-group.design .icon-2 {
    width:272px;
  }
}

/*==================================================
   Home - Sustainable Development Goals
==================================================*/ 
.goals-lists{
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 1.5rem;
}
.goals-lists > div{
  width: 16.66%;
  flex: 0 0 auto;
}
.card-goals{
  display: block;
  position: relative;
  padding:20px;

  --border-color:#FF5001;
  --card-bg:#000;
}
.card-goals .card-body{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--card-border-radius);
  border: 1px dashed var(--border-color);
  background-color: #fff;
  padding: 20px 25px; 

  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;

  opacity: 0;
  transition: all 0.45s;
  pointer-events: none;
  transform: scale(0.8);

  filter: drop-shadow(1px 1px 5px rgba(255, 80, 1, 0.2));
}
.card-goals .card-body:before{
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-radius: var(--card-border-radius);
  background-color: var(--card-bg);
}
.card-goals p{
  margin: 0;
  text-align: center;
  font-size: var(--fs-18);
  position: relative;
  z-index: 100;
}

.card-goals:hover .card-body{
  opacity: 1;
  transform: scale(1);
  overflow: hidden;
}
.card-goals.disabled {pointer-events: none;}
.card-goals.disabled .card-photo:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.vector-group.goals .icon-1{
  width: 100%;
  left: 0;
  top: 10px;
}
.vector-group.goals .icon-2{
  width: 27px;
  top: -4px;
  right: -23px;
}
.hgroup.goals{
  margin-bottom: 25px;
}
.hgroup.goals h3{
  position: relative;
  z-index: 100;
}
@media (max-width:1700px) {
  .goals-lists{
    --bs-gutter-x: 1.2rem;
    --bs-gutter-y: 1.2rem;
  }
  .card-goals p{font-size: 16px;}
}
@media (max-width:1550px) {
  .goals-lists{
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
  } 
}
@media (max-width:1440px) {
  .goals-lists > div{
    width: 20%;
  }
}
@media (max-width:1280px) {
  .goals-lists > div{
    width: 25%;
  }
}
@media (max-width:991.98px) {
  .goals-lists{
    --bs-gutter-x: 0.6rem;
    --bs-gutter-y: 0.6rem;
  } 
  .card-goals p{ font-size: 12px;}
}
@media (max-width:800px) {
 
  .goals-lists > div{
    width: 33.33%;
  }
  .card-goals p{ font-size: 14px;}

  .vector-group.goals .icon-2 {
    width: 23px; 
  }
}

@media (max-width:690px) {
  .goals-lists > div{
    width: 50%;
  }

  .vector-group.goals .icon-2 {
    width: 18px;
    top: -4px;
    right: -13px;
  }
}
@media (max-width:575px) {
  .goals-lists{
    --bs-gutter-x:0rem;
    --bs-gutter-y:0rem;
  } 

  .card-goals{--card-border-radius:18px; padding: 15px;}
  .card-goals .card-body{
    padding: 20px;
   
  }
  .card-goals p{ font-size: 12px;}
  .card-goals .card-body{padding: 15px;}
  .card-goals .card-body:before{
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
  }

  .hgroup.goals{margin-bottom: 0px;}
}
@media (max-width:360px) {
  .goals-lists > div{
    width:100%;
  }
  .card-goals p{ font-size: 14px;}
}


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

.footer{
  background-color: #fff;
  padding-top: 50px;
}
.footer .container,
.footer .container-fluid{
  display: flex;
}
.footer .col-infos{
  display: flex;
  flex-direction: column;
  font-size: var(--fs-20);
  font-weight: var(--fw-600);
  color: #333333;
}
.footer .col-infos h6{
  font-size: inherit;
  color: inherit;
  font-weight: var(--fw-600);
}
.footer .logo{
  width: 100px;
  margin-bottom: 30px;
}

.followus{
  display: flex;
  gap:10px;
}
.followus .icons{
  --icon-size:32px;
}
.followus .icons:hover{opacity: 0.7;}
.followus .icons.w-auto{ 
  font-size: 12px;
  width: auto !important;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  margin-left: 10px;
}
.followus .icon-facebook{background-image: url(../img/icons/icon-facebook.svg);}
.followus .icon-instagram{background-image: url(../img/icons/icon-instagram.svg);}

.footer .col-links{
  display: flex;
  justify-content: space-between;
  gap:30px;
  margin-left: auto;
}
.col-links{
  font-size: 14px;
  padding-bottom: 50px;
}
.col-links .col{
  /* flex: unset;
  width: 100%;  */
}
.col-links h5{
  font-size: 18px;
  color: var(--0A0A0A);
  margin-bottom: 10px;
  font-weight: var(--fw-700);
}
.col-links h6{
  font-weight: var(--fw-600);
  color: var(--0A0A0A);
  margin-bottom: 10px;
  font-size: inherit;
}
.col-links .nav{
  flex-direction: column;
  color: var(--60697B);
  gap:8px;

  margin-bottom: 10px;
}
.col-links .nav li{
  line-height: 1.4;
}
.col-links .nav a{
  color: inherit;
}
.col-links .nav a:hover{color: var(--color-primary);} 
.col-links .nav.list li{
  display: flex;
  position: relative;
  gap: 10px;
}
.col-links .nav.list li:before{
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--60697B);
  flex-shrink: 0;
  position: relative;
  top: 7px;
}
/* .col-links .c-2{min-width: 230px;}
.col-links .c-2{max-width: 162px;}
.col-links .c-3{min-width: 280px;} 
.col-links .c-4{min-width: 230px;}  */
.col-links .c-5{width: auto; flex: unset;}

.footer-copyright{
  background-color: var(--color-primary);
  color: #fff;
  font-size: 11px;
  text-align: center;
  padding: 10px 20px;
}
.footer-copyright p{
  margin: 0;
}
@media (max-width:1550px) {
  .footer .col-infos{font-size: 18px;padding-right: 20px;}
}
@media (max-width:1440px) {
  /* .footer .col-links{
    gap:0;
    flex-wrap: wrap;
    justify-content: unset;
  }
  .col-links .col{
    width: 50%;
    flex: 0 0 auto;
  } */

  .footer .container, .footer .container-fluid{
    flex-direction: column;
  }

  .footer .col-infos{ 
    flex-direction: row; 
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 10px;
    margin-bottom: 30px;
    font-size: 16px;
  }

  .footer .logo{margin-right: 40px;}

  .footer .col-infos{
    font-weight: 400;
  }
  .footer .col-infos p{
    font-size: 12px;
    margin-bottom: 10px;
  }
  .footer .col-infos h6{
    color: var(--0A0A0A);
  }
  .footer .followus{gap:6px; margin-left: -10px;}
  .footer .followus .icons{
    --icon-size:24px
  }

  .footer .col-links{padding-bottom: 50px;}

  .col-links h5{font-size: 16px;}
}

@media (max-width:1199px) {
  .footer .col-links{
    gap:0;
    flex-wrap: wrap;
    justify-content: unset;
  }
  .col-links .col{
    width: 33.33%;
    flex: 0 0 auto;
  }

}
@media (max-width:900px) { 
  .col-links .col{
    width: 50%; 
    padding-bottom: 20px;
  } 
}
@media (max-width:575px) { 
  .col-links .col{
    width: 100%;  
    padding-bottom:10px;
  } 
  .footer .logo{
    margin-right: 20px;
    width: 68px;
  }
  .footer .followus{gap:0; margin-left: -2px;}
  .footer .followus .icons {
    --icon-size: 18px;  
  }

  .footer .col-infos{
    margin-bottom: 25px;
    padding-bottom: 25px;
  }
  .col-links h5{font-size: 15px; margin-bottom: 5px;}
  .footer .col-links{font-size: 14px;}
}



/*=========Cookie Policy=========*/

.cookie-policy{ 
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding:15px 0 ;
  color: #fff;  
  font-size: 14px;
  z-index: 1000;  
  font-weight: 300;
 
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease, -webkit-transform .6s ease;

  -webkit-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%);
    -webkit-transform: translate3d(0, 0, 100%);
    transform: translate3d(0, 0, 100%);
}

.cookie-policy:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; 
  background-color: rgba(0, 0, 0, 1);

}

.cookie-policy.cookie-show{
  -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.cookie-policy a{
  color:#fff; 
  position: relative; 
}
.cookie-policy a.link{white-space: nowrap;}
.cookie-policy a.link:before{
  content: '';
  position: absolute;
  left: 0; 
  right: 0;
  height: 1px;
  bottom:2px;
  border-bottom: 1px solid #fff;

}

.pc .cookie-policy a:hover{
  opacity: 0.8; 
}
.cookie-policy .cols{
  position: relative;
  z-index: 1000;
}
.cookie-policy .cols:nth-child(1){ 
  position: relative; 
  padding-right: 40px;
} 
.cookie-policy .cols:nth-child(2){
  margin-left: auto; 
}

.cookie-policy .container-fluid{
  display: flex;
  align-items: center;
}
.cookie-policy .buttons{
  padding: 0;
  display: flex; 
}
 
.cookie-policy .btn{   
  border-radius:12px;
  width: 120px;
  height: 42px;
  line-height: 40px; 
  font-weight: 400;
  font-size:16px;
  flex-shrink: 0; 

} 
 
@media (max-width:1600px){
  .cookie-policy .cols:nth-child(2){
    margin-right: 0;
  }
}
@media (max-width:1400px){
  .cookie-policy .cols:nth-child(1){
    padding-right: 100px;
  }
}

@media (max-width:575px){
  .cookie-policy .container-fluid{  
    font-size: 11px;
    flex-direction: column;
  }
  .cookie-policy .cols:nth-child(1){
    padding-right: 0;
  }
   
  .cookie-policy .cols:nth-child(2){ 
    padding-top:10px;
    margin-left: auto;
    padding-left:0px;
    margin-right: 0;
  }
  .cookie-policy .buttons{
    justify-content: left;
    padding-top: 0;
    margin: auto 0;
  }
  .cookie-policy .btn { 
    width: 62px;
    height: 28px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 11px; 
    font-weight: 300;
    margin-right:auto;
    margin-left: 0;
    border-radius: 8px;
  }
}



/*==================================================
  Stakeholders
==================================================*/ 

.article{
  font-size: var(--fs-20);
  line-height: 1.65;
  max-width: 1250px;
  --margin-bottom:25px;
  margin: 0 auto;
}
.article h2,
.article h5{
  margin-bottom:5px;
}
.article p{
  margin-bottom:var(--margin-bottom) ;
}
.article p:last-child{
  margin-bottom: 0;
}

.article ul{
  padding-left: 17px;
  margin-bottom:var(--margin-bottom) ;
}
.article ul li{
  margin-top: 5px;
  margin-bottom: 5px;
}
.article h6{
  margin-bottom: 10px;
  color: inherit;
}
.article p a{text-decoration: underline;}

.contact-lists{
  display: flex;
  gap:35px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 40px 0;
}
.card-contact{
  display: flex;
  align-items: center;
  gap:20px;
}
.card-contact .icons{
  --icon-size:48px;
}
.card-contact h6{
  font-size: var(--fs-20);
  line-height: 1.2;
  font-weight:600;
}
.card-contact p{
  margin: 0;
  font-size: var(--fs-18);
}
.card-contact .link{
  text-decoration: underline;
  color: var(--color-primary);
}

.card-contact .link:hover{
  color: #1EAFED;
}
@media (max-width:1600px){
  .article{
    font-size: var(--fs-18);
    max-width: 1100px;
  }
}
@media (max-width:1024px){
  .article{
    --margin-bottom:20px;
  }
}
@media (max-width:575px){
  .article{
    font-size: var(--fs-16);
    --margin-bottom:15px;
  }

  .contact-lists{
    flex-direction: column;
    gap:15px;
    padding: 30px 0;
  }
  .card-contact{gap:15px}
  .card-contact .icons {
    --icon-size: 42px;
  }

  .flex-row .card-contact .icons {
    --icon-size: 35px;
  }
  .flex-row .card-contact{gap:8px}
  .flex-row .card-contact h6{font-size: 14px;}
  .flex-row .card-contact p{font-size: 12px;}
}


/*==================================================
  Stakeholders - Architects
==================================================*/ 

.card-architect{
  display: flex;
  flex-direction: column;
  position: relative;

  width: 100%;
}
.card-architect h3{
  color: #fff;
  text-transform: uppercase;
  font-size: var(--fs-24);
}
 
.card-architect .card-photo{
  background-color: #ccc;
}
.card-architect .card-body{
  border-radius: var(--card-border-radius);

  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex; 
  padding: 30px;
}
.card-architect .card-body.title{
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(8, 8, 8, 0.370787) 33.85%, #151515 92.71%); 
  transition: all 0.45s;
}
.card-architect .card-body.more{
  background-color: rgba(0, 0, 0, 0.8);
  align-items: center;
  justify-content: center;
  transition: all 0.45s;
  height: 20%;
  opacity: 0;
 
}
.card-architect .card-body .text{
  text-decoration: underline;
  color: #fff;
  font-size: 18px;
  transition: all 0.24s;
}
.card-architect .card-body .d-flex{
  align-items: center;
  justify-content: center;
  gap:10px;
}
.card-architect .card-body .icon-more{
  --icon-size:27px;
  background-image: url(../img/icons/icon-circle-topup.svg);
}
.card-architect:hover .card-body.more{
  opacity: 1;
  height: 100%;
}
.card-architect:hover .card-body.title{
  opacity: 0;
}
.card-architect .card-body .text:hover{color: var(--color-primary);}

.swiper-card.architects .swiper-slide{
  width: 25%;
  padding: 0 14px;
}

.section-architect .swiper-overflow {
  margin-left: -14px;
  margin-right: -14px;
}
.gallery-lists{
  --bs-gutter-y: 1rem; 
  padding:15px;
  margin-bottom: 40px;
}

.gallery-lists img{width: 100%; border-radius: 32px;}

.open-time{
  --bg:#E9F9F1;
  --color:#25C870;
  display: flex;
  gap:10px;
  justify-content: center;
  align-items: center; 
  font-weight: var(--fw-600);
  border-radius: 16px;
  background-color: var(--bg);
  color: var(--color);
  padding:12px 15px;
  margin: -15px auto 0;
}
.open-time .icons{
  --icon-size:32px;
}
@media (max-width:1550px){
  .card-architect h3{font-size: 20px;}
  .card-architect .card-body{padding: 25px;}

  .open-time .icons{
    --icon-size:28px;
  }
}

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

  .swiper-card.architects .swiper-slide{ padding: 0 10px;}
  .section-architect .swiper-overflow {
    margin-left: -10px;
    margin-right: -10px;
  }
}

@media (max-width:1199px){
  .swiper-card.architects{
    overflow:visible;
  }
  .swiper-card.architects .swiper-slide{
    width: auto;
  }
  .card-architect{
    width: 280px;
  }
  .gallery-lists{padding-top: 0;}
  .gallery-lists img{border-radius:24px;}

  .open-time{padding: 10px 12px; gap:8px; border-radius: 12px;}
}
@media (max-width:575px){
  .card-architect{
    width: 260px;
  }
  .card-architect h3{font-size:16px;}
  .card-architect .card-body {padding: 20px;}
  .swiper-card.architects .swiper-slide{ padding: 0 5px;}
  .section-architect .swiper-overflow {margin-left: -5px;margin-right: -5px;}
  .card-architect .card-body .text{font-size: 15px;}

  .gallery-lists img{border-radius:20px;}

  .open-time{
    padding:8px 12px; 
    gap:6px; 
    border-radius: 10px;
    font-size: 13px;
  }
  .open-time .icons {
    --icon-size: 22px;
  }
}
/*==================================================
   Connect with Us
==================================================*/ 
.section-contact{
  padding-top:calc(var(--header-height) + 40px)
}
.google-map{
  height: 770px;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
}
.google-map iframe{
  height: 100%;
  width: 100%;
}

.contact-infos h2{margin-bottom: 0;}
.contact-infos h5{margin-top:15px;}
.contact-infos p.h5{font-weight: 400; color: var(--60697B); margin-bottom: 20px;}
.contact-infos .contact-lists{
  justify-content: space-between;  
  padding:15px 30px 15px 0;
  margin-bottom: 30px;
  gap:0
}
.btn-map {
  border-radius: 12px;
  padding:0 15px;
  --btn-h:48px;
  --bs-btn-border-width: 1px;
  --bs-btn-color: #355FF5;
  --bs-btn-border-color: #355FF5;
  --bs-btn-bg:rgba(53, 95, 245, 0.1);

  --bs-btn-hover-color: #355FF5;
  --bs-btn-hover-bg:rgba(53, 95, 245, 0.2);
  --bs-btn-hover-border-color: #355FF5;
  
}
.btn-map .icons{
  --icon-size: 24px;
}
.contact-infos .btn-map {
  margin-top: -5px;
  margin-bottom: 20px;
}

.boxed-1480{
  width: 100%;
  max-width: 1480px;
  margin:0 auto;
}
.section-contact .left .google-map{display: none;}

.captcha{
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
  max-width: 302px;
}

.form-check.policy .form-check-label{
  font-size: 14px;
  color: #383C3E;
}
.form-check.policy .form-check-label a{ color: #00A3FF;}
.form-check.policy .form-check-label a:hover{ text-decoration:underline;}
@media (max-width:1640px){
  .google-map{
    height: 680px;
  }
}
@media (max-width:1550px){
  .card-contact{
    gap:15px
  }
}
@media (max-width:1440px){
  .section-contact .left{    width: 52%;}
  .section-contact .right{    width: 48%;}

  .contact-infos .card-contact h6,
  .contact-infos .card-contact p{font-size: 16px;}
  .contact-infos .card-contact .icons {--icon-size: 42px;}
  .google-map{height: 620px;}
}

@media (max-width:1280px){
  .contact-infos .contact-lists{padding-right: 20px;}

  .contact-infos h5,
  .contact-infos .h5{font-size:18px;}

  .contact-infos .card-contact{gap:10px}
  .contact-infos .card-contact h6,
  .contact-infos .card-contact p{font-size: 14px;}
  .contact-infos .card-contact .icons {--icon-size:36px;}
  .google-map{height:500px; border-radius: 24px;}

  .btn-map{
    font-size: 14px;
    --btn-h: 42px;
    border-radius: 10px;;
  }
  .btn-map .icons{
    --icon-size:20px;
     
  }
}

@media (max-width:1024px){
  .section-contact .left{width:100%;}
  .section-contact .left .google-map{display: block; padding-bottom: 40px;}
  .section-contact .right{display: none;}
}

@media (max-width:575px){
  .contact-infos h5, .contact-infos .h5{
    font-size: 16px;
  }
  .contact-infos .contact-lists{gap:10px}
}